/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* ============================================
   TOOLBAR BUTTON STYLING
   ============================================ */

/* FIX: Active toolbar buttons - gray background, BLACK icons */
.mce-btn.mce-active,
.mce-btn.mce-active button {
	background-color: #d0d0d0 !important;
	background-image: none !important;
	border-color: #aaa !important;
	color: #333 !important;
}

/* CRITICAL: Keep icon/text color BLACK in active state */
.mce-toolbar .mce-btn.mce-active i,
.mce-toolbar .mce-btn.mce-active button i,
.mce-toolbar .mce-btn.mce-active .mce-ico,
.mce-toolbar .mce-btn.mce-active button .mce-ico,
.mce-toolbar .mce-btn.mce-active .mce-caret,
.mce-toolbar .mce-btn.mce-active button .mce-caret,
.mce-toolbar .mce-btn.mce-active span,
.mce-toolbar .mce-btn.mce-active button span {
	color: #333 !important;
}

/* Ensure icons stay visible - target :before pseudo-elements */
.mce-toolbar .mce-btn.mce-active button:before,
.mce-toolbar .mce-btn.mce-active i:before {
	color: #333 !important;
}

/* Button hover state */
.mce-btn button:hover {
	background-color: #e8e8e8 !important;
}

/* ============================================
   SUBMISSION & DISPLAY FIXES
   ============================================ */

/* FIX: Remove selection highlight on submitted essays */
.wpProQuiz_question_text ::selection,
.wpProQuiz_question_text ::-moz-selection {
	background-color: transparent !important;
	color: inherit !important;
}

/* FIX: Hide inline table toolbar (the one that appears below table) */
.mce-tinymce-inline {
	display: none !important;
}


/* ============================================
   CELL SPACING SUPPORT
   Make cellspacing attribute work properly
   ============================================ */

/* Tables with cell spacing should use separate borders */
table[cellspacing]:not([cellspacing="0"]) {
    border-collapse: separate !important;
    /* border-spacing will be set by JavaScript based on cellspacing value */
}

/* Tables without cell spacing should collapse borders */
table[cellspacing="0"],
table:not([cellspacing]) {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* Ensure cell spacing is visible in the editor */
.mce-content-body table[cellspacing]:not([cellspacing="0"]) {
    border-collapse: separate !important;
}



/* ============================================
   OK BUTTON STYLING
   ============================================ */

/* OK button - Default state: BLUE background, WHITE text */
/* To change blue color, modify #007cba values below */
.mce-window .mce-btn-group .mce-btn.mce-primary,
.mce-window .mce-primary {
    background-color: #007cba !important;
    background-image: linear-gradient(to bottom, #008fd4, #007cba) !important;
    border-color: #007cba !important;
    color: white !important;
    text-shadow: none !important;
}


/* 1. OK button - Hover: Lighter blue with glow (Aggressive Selector) */
.mce-window .mce-primary:hover,
.mce-window .mce-primary button:hover,
.mce-window .mce-btn.mce-primary:hover button {
    background-color: #0091cd !important;
    background-image: linear-gradient(to bottom, #0091cd, #007cba) !important;
    border-color: #006ba1 !important;
    color: #ffffff !important;
    box-shadow: 0 0 8px rgba(0, 124, 186, 0.7) !important;
}


/* 2. OK button - Click/Active: Darker blue (Aggressive Selector) */
.mce-window .mce-primary:active,
.mce-window .mce-primary button:active,
.mce-window .mce-btn.mce-primary:active button {
    background-color: #005a87 !important;
    background-image: none !important;
    border-color: #004a6f !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
    transform: translateY(1px);
}

/* OK button - Focus state (when tabbed to) */
.mce-window .mce-primary:focus {
    outline: 2px solid #4f94d4;
    outline-offset: 2px;
}

/* Cancel button - Keep gray */
.mce-window .mce-btn:not(.mce-primary) {
    background-color: #f3f3f3 !important;
    background-image: linear-gradient(to bottom, #fefefe, #f3f3f3) !important;
    border-color: #ccc !important;
    color: #333 !important;
}

.mce-window .mce-btn:not(.mce-primary):hover {
    background-color: #e8e8e8 !important;
    background-image: linear-gradient(to bottom, #f3f3f3, #e8e8e8) !important;
    border-color: #aaa !important;
}