/* PDF to MCQ - Shared CMS Dashboard styles
   Used by [quiz_recent_exams], [quiz_students_list], [cms_create_classes].
   Brand color: #16b7cc (matches the site's header/footer brand color).
   Panel/table color: #c5ebf0 (light brand-tinted blue), used everywhere
   instead of white so containers are actually visible against a white
   page instead of blending straight into it. */

:root {
    --cms-brand: #16b7cc;
    --cms-brand-dark: #129aab;
    --cms-panel: #c5ebf0;
    --cms-panel-row-hover: #d9f2f5;
    --cms-input-bg: #f0f2f4;
    --cms-text: #262a2e;
    --cms-text-muted: #6b7280;
    --cms-border: #7fc9d6;
    --cms-radius: 10px;
    --cms-shadow: 0 4px 14px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.10);
}

/* ---------------------------------------------------------------
   Card wrapper - gives each shortcode's table/content a distinct,
   clearly visible surface instead of blending into a white page.
   --------------------------------------------------------------- */
.cms-card {
    background: var(--cms-panel);
    border: 2px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow);
    padding: 20px;
    margin: 20px 0;
}

.cms-card-title {
    margin: 0 0 16px;
    color: var(--cms-text);
    font-size: 18px;
}

/* Shared table look across all three shortcodes */
.cms-card table {
    width: 100%;
    border-collapse: collapse;
}

.cms-card table th {
    background: var(--cms-brand);
    color: #000;
    text-align: left;
    padding: 10px 12px;
    font-size: 13px;
    border: 2px solid var(--cms-border);
    border-bottom: none;
}

.cms-card table th:first-child { border-top-left-radius: 6px; }
.cms-card table th:last-child { border-top-right-radius: 6px; }

/* Data rows are white, distinct from the colored panel around the
   table, with the same border color/thickness as the outer container
   so the table reads as one consistent grid rather than the header
   being the only bordered part. */
.cms-card table td {
    padding: 10px 12px;
    background: #ffffff;
    border: 2px solid var(--cms-border);
    vertical-align: top;
}

.cms-card table tr:hover td {
    background: var(--cms-panel-row-hover);
}

/* ---------------------------------------------------------------
   Shared input style - search boxes, class name field, add-student
   fields. Previously most of these had no explicit styling at all and
   just fell back to whatever the browser/theme did by default, which
   is why they looked inconsistent with each other (some picking up a
   default blue focus ring, different border widths, square corners...).
   --------------------------------------------------------------- */
.cms-input {
    background: var(--cms-input-bg);
    border: 2px solid var(--cms-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--cms-text);
    box-sizing: border-box;
}

.cms-input:focus {
    outline: none;
    border-color: var(--cms-brand-dark);
}



/* Generic brand-colored buttons for use inside these shortcodes */
.cms-btn {
    background: var(--cms-brand);
    color: #000;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: background 0.2s ease;
}

.cms-btn:hover {
    background: var(--cms-brand-dark);
    color: #000;
}

.cms-btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.cms-btn-danger {
    background: #e74c3c;
    color: #000;
}

.cms-btn-danger:hover {
    background: #c0392b;
    color: #000;
}

/* ---------------------------------------------------------------
   Popup component - ALWAYS a centered modal with a dimmed backdrop
   and a close (X) button, on every screen size. (An earlier version
   tried an anchored dropdown on desktop, but inside these shortcodes'
   fairly narrow containers that just produced cramped popups with
   their own scrollbars - a centered modal is simpler and reads much
   better at any width.)

   IMPORTANT: cms-dashboard.js moves every .cms-popup to be a direct
   child of <body> before it can be opened. Without that, a popup
   nested deep inside the page (behind a theme wrapper that uses
   transform/filter/etc., which is common for sticky headers) can end
   up trapped in a LOWER stacking context than the backdrop - even
   though the popup's own z-index is higher, it can't visually "win"
   against a sibling-of-<body> element like the backdrop. That was the
   actual cause of the backdrop appearing to sit on top of (dimming)
   the popup, and of clicks meant for the popup's content instead
   landing on the backdrop and closing it immediately.
   --------------------------------------------------------------- */
.cms-popup-wrapper {
    display: inline-block;
}

.cms-popup-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, 0.5);
    z-index: 999998;
}

.cms-popup-backdrop.cms-active {
    display: block;
}

.cms-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.25), 0 2px 8px rgba(16, 24, 40, 0.1);
    padding: 22px 22px 20px;
    width: 90%;
    max-width: 400px;
    max-height: 85vh;
    overflow-y: auto;
    z-index: 999999;
    border: 2px solid var(--cms-border);
    text-align: left;
}

.cms-popup.cms-open {
    display: block;
    animation: cmsPopupIn 0.18s ease forwards;
}

@keyframes cmsPopupIn {
    from { opacity: 0; transform: translate(-50%, -46%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.cms-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #98a2b3;
    cursor: pointer;
    padding: 6px;
}

.cms-popup-close:hover {
    color: #333;
}

.cms-popup-title {
    font-weight: bold;
    margin: 0 0 14px;
    padding-right: 24px;
    color: var(--cms-brand-dark);
    font-size: 16px;
}

.cms-popup label {
    display: block;
    font-weight: normal;
    font-size: 13px;
    padding: 5px 0;
    color: var(--cms-text);
}

.cms-popup input[type="text"],
.cms-popup input[type="email"] {
    width: 100%;
    padding: 9px 12px;
    background: var(--cms-input-bg);
    border: 2px solid var(--cms-border);
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.cms-popup input[type="text"]:focus,
.cms-popup input[type="email"]:focus {
    outline: none;
    border-color: var(--cms-brand-dark);
}

/* .c_full_name is used for the "Create Class" name field and for the
   Full Name / Email fields in the "Add Students" popup - previously it
   had NO styling of its own at all, so it fell back to inconsistent
   browser/theme defaults (including a stray default blue focus
   outline). It's also used for two fields stacked directly on top of
   each other with zero gap between them - the margin-bottom here fixes
   that too. */
.c_full_name {
    display: block;
    width: 100%;
    background: var(--cms-input-bg);
    border: 2px solid var(--cms-border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    color: var(--cms-text);
    margin-bottom: 12px;
    box-sizing: border-box;
}

.c_full_name:focus {
    outline: none;
    border-color: var(--cms-brand-dark);
}