/* v22.16: Poppins is linked from <head> (config/assets.php) instead of an @import,
   which made the browser wait for this whole file before it could start the font. */

/* =====================================================================
   CrimTrack — Style.css
   Global / common styles shared by every page (sign-in, Admin, Agency,
   Intern). Sections keep their original cascade order.
   ===================================================================== */

/* =====================================================================
   Base theme (formerly style.css)
   ===================================================================== */
:root {
    /* ===== Deep Teal + Soft Sage palette (canonical tokens) ===== */
    --primary: #0B4F4A;
    --primary-dark: #073C39;
    --primary-medium: #2F7770;

    --sage: #AFC9BE;
    --sage-light: #DDEAE4;
    --sage-soft: #EEF5F1;

    --background: #F8FAF8;
    --surface: #FFFFFF;

    --text-color: #173B39;
    --text-secondary: #617572;
    --text-muted: #8A9B98;

    --border: #DCE5E0;

    /* ===== Legacy variable names kept as aliases =====
       The rest of this stylesheet (and admin.css/agency.css/intern.css/login.css)
       reference these older names extensively. Aliasing them to the new tokens
       re-themes every existing rule without having to touch each one. */
    --accent: var(--primary-medium);
    --light: var(--sage-light);
    --bg: var(--background);
    --text: var(--text-color);
    --muted: var(--text-secondary);
    --white: var(--surface);
    --line: var(--border);
    --soft: var(--sage-soft);
    --shadow: 0 10px 30px rgba(7,60,57,.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    background: var(--bg);
    color: var(--text);
}

a {
    color: inherit;
}

h1, h2, h3 {
    margin-top: 0;
    color: var(--text);
}

p {
    line-height: 1.5;
}

.muted {
    color: var(--muted);
    margin: 4px 0 0;
}

.error {
    color: #C1584F;
}

.empty-state {
    text-align: center;
    color: var(--muted);
    padding: 24px;
}

/* Login */

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F8FAF8 0%, #DDEAE4 55%, #EEF5F1 100%);
    padding: 20px;
}

.login-card {
    width: 390px;
    background: rgba(255,255,255,.95);
    padding: 34px;
    border-radius: 24px;
    box-shadow: 0 25px 70px rgba(23,107,104,.18);
    text-align: center;
    border: 1px solid rgba(15,76,76,.18);
}

.login-logo {
    width: 88px;
    height: 88px;
    border-radius: 0;
    object-fit: contain;
    margin: 0 auto 12px;
    display: block;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.login-card h1, .login-card h2 {
    font-size: 28px;
    margin-bottom: 6px;
    color: var(--accent);
}

.login-card p {
    color: var(--muted);
    font-size: 13px;
    margin: 0 0 18px;
}

label {
    display: block;
    text-align: left;
    margin-top: 14px;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

input, select, textarea, button {
    font-family: "Poppins", sans-serif;
}

input, select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: white;
    color: var(--text);
    outline: none;
    transition: .2s;
    font-size: 14px;
    margin-top: 8px;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(15,76,76,.12);
}

textarea {
    min-height: 100px;
    resize: vertical;
}

.password-field {
    position: relative;
}

.password-field input {
    padding-right: 44px;
}

.password-field .material-icons-outlined {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 21px;
    color: var(--muted);
    cursor: pointer;
    margin: 0;
}

.forgot-password {
    text-align: right !important;
    font-size: 12px !important;
    margin: 8px 0 16px !important;
}

.forgot-password a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.forgot-password a:hover {
    text-decoration: underline;
}

.demo {
    margin-top: 18px;
    padding: 14px;
    background: var(--soft);
    border-radius: 14px;
    line-height: 1.6;
    text-align: left;
    color: var(--text) !important;
    font-size: 13px !important;
}

/* Buttons */

button, .btn {
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 12px;
    width: auto;
    transition: .2s;
    box-shadow: 0 8px 20px rgba(15,76,76,.18);
}

button:hover, .btn:hover {
    background: var(--accent);
    transform: translateY(-1px);
}

.secondary-btn {
    background: var(--soft);
    color: var(--accent);
    box-shadow: none;
}

.secondary-btn:hover {
    background: #AFC9BE;
    color: #073C39;
}

.close-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    background: #EEF5F1;
    color: var(--text);
    box-shadow: none;
}

.close-btn:hover {
    background: #EEF5F1;
}

/* Layout */

.sidebar, aside {
    width: 260px;
    background: white;
    color: var(--text);
    padding: 20px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid var(--line);
    box-shadow: 8px 0 30px rgba(38,67,61,.03);
    transition: .25s ease;
    overflow: hidden;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 10px 8px;
}

.sidebar-brand img {
    width: 44px;
    height: 44px;
    /* The logo PNG is already transparent. `background:white` + `object-fit:cover`
       painted a white disc behind it and cropped the seal's outer ring. Neither
       is needed: contain preserves the artwork, transparent lets the sidebar
       show through. */
    border-radius: 0;
    object-fit: contain;
    background: transparent;
    box-shadow: none;
}

.sidebar-brand div {
    min-width: 0;
}

.sidebar-brand h2, aside h2 {
    font-size: 18px;
    margin: 0;
    color: var(--accent);
    white-space: nowrap;
}

.sidebar-brand p, aside>p {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-nav {
    display: grid;
    gap: 8px;
}

.side-nav a {
    color: var(--text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    font-weight: 500;
    opacity: .9;
    white-space: nowrap;
    transition: .2s;
}

.side-nav a:hover, .side-nav a.active {
    background: var(--soft);
    color: var(--accent);
    opacity: 1;
}

.side-nav .logout {
    margin-top: 14px;
    color: #D48079;
    background: #FBF1F0;
}

.side-nav .logout:hover {
    background: #FBF1F0;
    color: #C1584F;
}

.material-icons-outlined {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 0;
    line-height: 1;
}

.sidebar.collapsed, aside.collapsed {
    width: 78px;
    padding-left: 12px;
    padding-right: 12px;
}

.sidebar.collapsed .sidebar-brand div, aside.collapsed .sidebar-brand div, .sidebar.collapsed .nav-text, aside.collapsed .nav-text {
    display: none;
}

.sidebar.collapsed .side-nav a, aside.collapsed .side-nav a {
    justify-content: center;
    padding: 12px;
}

.sidebar.collapsed .material-icons-outlined, aside.collapsed .material-icons-outlined {
    font-size: 22px;
}

.topbar, .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.page-header p {
    margin: 0;
    color: var(--muted);
}

/* Cards */

.cards.three {
    grid-template-columns: repeat(3, 1fr);
}

.card, .panel {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(220,233,226,.75);
}

/* Forms and tables */

.grid-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.section-title-row, .top-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.search-input, .table-search {
    width: 190px;
    max-width: 100%;
    padding: 8px 11px;
    font-size: 13px;
    border-radius: 11px;
    margin-top: 0;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: 16px;
    overflow: hidden;
}

th, td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-size: 14px;
}

th {
    background: #EEF5F1;
    color: var(--text);
    font-weight: 700;
}

tr:hover td {
    background: #F8FAF8;
}

.table-link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

.table-link:hover {
    text-decoration: underline;
}

.short-form {
    max-width: 420px;
}

.small-label {
    margin: 0 0 8px;
    color: var(--muted);
    font-weight: 600;
}

.select-search {
    margin-bottom: 8px;
}

.searchable-select {
    height: 135px;
}

/* Camera */

.camera-box {
    margin: 15px 0;
    display: grid;
    grid-template-columns: 320px 180px;
    gap: 14px;
    align-items: center;
}

.compact-camera {
    max-width: 540px;
    grid-template-columns: 320px 180px;
}

.attendance-panel {
    max-width: 760px;
}

video, #preview {
    width: 100%;
    height: 180px;
    background: #173B39;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid #DDEAE4;
}

video {
    height: 320px;
}

#preview {
    height: 180px;
}

.modal-camera-box {
    grid-template-columns: 1fr 1fr;
    max-width: 100%;
}

.modal-camera-box video, .modal-camera-box #preview {
    height: 220px;
}

.history-photo {
    width: 82px;
    height: 64px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--line);
}

/* Modal */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(22,54,54,.50);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 999;
}

.modal-overlay.show {
    display: flex;
}

.modal-card {
    width: 100%;
    max-width: 720px;
    background: white;
    border-radius: 22px;
    padding: 22px;
    box-shadow: 0 24px 80px rgba(38,67,61,.25);
    border: 1px solid var(--line);
}

.wide-modal {
    max-width: 860px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.modal-header p {
    margin: 4px 0 0;
    color: var(--muted);
}

.modal-form-grid {
    margin-bottom: 14px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
}

.modal-actions button {
    width: auto;
}

/* UI spacing fixes: rotation schedule, register buttons, login button */

.rotation-form {
    align-items: end;
}

.rotation-form input, .rotation-form select {
    height: 42px;
    min-height: 42px;
    padding: 8px 12px;
    margin-top: 0;
    font-size: 13px;
    border-radius: 10px;
}

.rotation-form .select-search, .rotation-form .searchable-select {
    height: 42px !important;
    min-height: 42px !important;
    margin: 0;
}

.rotation-form button {
    height: 42px;
    padding: 0 16px;
    font-size: 13px;
    border-radius: 10px;
    width: auto;
    box-shadow: none;
}

.top-actions {
    justify-content: flex-end;
    align-items: center;
}

.top-actions .table-search {
    width: 180px;
    height: 36px;
    padding: 7px 11px;
    font-size: 13px;
    border-radius: 10px;
}

.top-actions .btn {
    height: 36px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 10px;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    box-shadow: none;
}

.login-card button[type="submit"] {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 14px;
    margin-top: 8px;
    box-shadow: 0 8px 18px rgba(15,76,76,.16);
}

.login-card .material-icons-outlined {
    font-size: 19px;
}

/* Camera frame size fixes */

.kiosk-camera-area {
    display: grid;
    grid-template-columns: minmax(260px, 420px) minmax(260px, 420px);
    gap: 18px;
    align-items: start;
    justify-content: center;
    margin: 18px 0;
}

.camera-card {
    background: #F8FAF8;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
}

.camera-card h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

.kiosk-camera-area video, .kiosk-camera-area #preview {
    width: 100%;
    height: 260px;
    max-height: 260px;
    border-radius: 16px;
    object-fit: cover;
    display: block;
}

.kiosk-camera-area .secondary-btn {
    margin-top: 12px;
    width: 100%;
}

.compact-modal-camera {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 100%;
}

.compact-modal-camera video, .compact-modal-camera #preview {
    width: 100%;
    height: 190px;
    max-height: 190px;
    border-radius: 14px;
    object-fit: cover;
    display: block;
}

/* Stable scrolling layout fix */

html, body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

.layout {
    display: block;
    min-height: 100vh;
}

aside, .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

main {
    flex: 1;
    min-width: 0;
    margin-left: 260px;
    width: calc(100% - 260px);
    min-height: 100vh;
    padding: 28px;
}

aside.collapsed+main, .sidebar.collapsed+main {
    margin-left: 78px;
    width: calc(100% - 78px);
}

/* Student list delete icon alignment fix */

.student-name-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 30px;
}

.student-name-cell>span {
    flex: 1;
    line-height: 1.4;
}

.icon-delete-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #C1584F !important;
    border-radius: 50% !important;
    cursor: pointer;
}

.icon-delete-btn:hover {
    background: rgba(193,88,79,.08) !important;
    color: #A6473F !important;
    transform: none !important;
}

.icon-delete-btn .material-icons-outlined {
    font-size: 19px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* Hamburger alignment fix: match CrimTrack brand level */

.menu-btn {
    background: white;
    color: var(--accent);
    box-shadow: var(--shadow);
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    margin-top: 6px !important;
    border-radius: 12px !important;
}

.menu-btn .material-icons-outlined {
    font-size: 22px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

/* ===== CRIMTRACK PREMIUM LOGO HOVER ===== */

img[src$="crimtrack-logo.svg"], .login-logo, .sidebar-brand img {
    transition: transform 0.3s ease, filter 0.3s ease;
}

img[src$="crimtrack-logo.svg"]:hover, .login-logo:hover, .sidebar-brand img:hover {
    transform: scale(1.03);
    /* drop-shadow follows the alpha channel, so it hugs the seal rather than
       drawing a square halo. Kept subtle. */
    filter: drop-shadow(0 2px 6px rgba(4,20,18,.35));
}

/* ===== REGISTER STUDENT CAMERA FRAME FIX ===== */

#studentModal .modal-card.wide-modal {
    max-width: 820px;
}

#studentModal .compact-modal-camera {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 16px;
    align-items: start;
    margin: 14px 0 10px;
}

#studentModal .compact-modal-camera>div {
    background: #F8FAF8;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 12px;
}

#studentModal .compact-modal-camera video, #studentModal .compact-modal-camera #preview {
    width: 100% !important;
    height: 210px !important;
    max-height: 210px !important;
    min-height: 210px !important;
    object-fit: cover;
    display: block;
    border-radius: 14px;
    border: 2px solid #DDEAE4;
    background: #173B39;
}

#studentModal .compact-modal-camera #preview {
    background: #F8FAF8;
}

#studentModal .small-label {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
}

@media (max-width: 900px) {
    #studentModal .compact-modal-camera {
        grid-template-columns: 1fr;
    }

    #studentModal .compact-modal-camera video, #studentModal .compact-modal-camera #preview {
        height: 220px !important;
        max-height: 220px !important;
        min-height: 220px !important;
    }
}

.status-actions {
    display: flex;
    gap: 8px;
}

.btn-approve, .btn-decline {
    border: none;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.btn-approve {
    background: #0B4F4A;
    color: white;
}

.btn-approve:hover {
    background: #073C39;
}

.btn-decline {
    background: #C1584F;
    color: white;
}

.btn-decline:hover {
    background: #A6473F;
}

/* FORM SIZE ADJUSTMENT */

/* INPUT STYLE */

.settings-form input, .settings-form select, .settings-form textarea {
    padding: 8px 11px;
    border: 1px solid #DCE5E0;
    border-radius: 7px;
    font-size: 14px;
    outline: none;
    transition: 0.2s ease;
}

/* FOCUS EFFECT */

.settings-form input:focus, .settings-form select:focus, .settings-form textarea:focus {
    border-color: #0B4F4A;
    box-shadow: 0 0 0 2px rgba(15,76,76,0.15);
}

/* PRIMARY BUTTON (YOUR SYSTEM COLOR) */

.settings-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 7px;
    border: none;
    background: #0B4F4A;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease;
}

/* HOVER EFFECT */

.settings-form button:hover {
    background: #2F7770;
    transform: translateY(-1px);
}

.student-list {
    margin-top: 10px;
    list-style: none;
    padding: 0;
}

.upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    margin: 15px 0;
}

.upload-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 14px;
}

.doc-box {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

body.dark-mode .panel {
    background: #0F2A28;
}

/* SWITCH */

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #C7D9CE;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.switch input:checked+.slider {
    background-color: #0B4F4A;
}

.switch input:checked+.slider:before {
    transform: translateX(24px);
}

/* MAKE CARDS MORE COMPACT */

/* INPUTS LESS TALL */

.settings-card input, .settings-card select {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* BUTTON */

.settings-card button {
    width: 100%;
    padding: 9px;
    border-radius: 8px;
    margin-top: 8px;
}

/* USER LIST COMPACT */

#userList li {
    padding: 6px 8px;
    margin-top: 4px;
    font-size: 14px;
}

/* ===== DOCUMENT CREATE BUTTON FIX ===== */

.panel-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.create-doc-box {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

#docType {
    flex: 1;
    min-width: 250px;
    padding: 12px 14px;
    border: 1px solid #DCE5E0;
    border-radius: 10px;
    font-size: 14px;
    outline: none;
    transition: 0.2s ease;
}

#docType:focus {
    border-color: #0B4F4A;
    box-shadow: 0 0 0 3px rgba(15,76,76,0.15);
}

/* CREATE BUTTON */

.create-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #0B4F4A;
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.25s ease;
}

.create-btn:hover {
    background: #2F7770;
    transform: translateY(-2px);
}

.create-btn:active {
    transform: scale(0.97);
}

.create-btn .material-icons-outlined {
    font-size: 20px;
}

/* ===== SETTINGS PAGE UPGRADE ===== */

.permission-box {
    margin-top: 10px;
    padding: 14px;
    border-radius: 12px;
    background: #F8FAF8;
    border: 1px solid #DCE5E0;
}

.permission-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 15px;
}

.permission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.permission-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
}

.permission-grid input {
    width: auto;
    margin: 0;
}

.user-list-box {
    margin-top: 20px;
}

.user-list-box h3 {
    margin-bottom: 10px;
    font-size: 16px;
}

.student-list li span {
    font-size: 13px;
    color: #2F7770;
    font-weight: 600;
}

@media (max-width:768px) {
    .permission-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== STUDENT DASHBOARD UPGRADE ===== */

/* ===== CLEAN WHITE HERO ===== */

.student-hero {
    background: white;
    padding: 28px;
    border-radius: 24px;
    margin-bottom: 22px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(220,233,226,.75);
}

.student-hero h1 {
    color: var(--text);
}

.student-hero p {
    color: var(--muted);
}

.student-hero .badge {
    background: var(--soft);
    color: var(--accent);
    margin-bottom: 10px;
}

.dashboard-cards, .cards {
    margin-bottom: 22px;
}

.card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 14px;
}

.card-icon .material-icons-outlined {
    font-size: 28px;
    color: white;
}

.green {
    background: #0B4F4A;
}

.blue {
    background: #4A7A96;
}

.orange {
    background: #C98A3E;
}

.red {
    background: #C1584F;
}

.progress-bar {
    width: 100%;
    height: 10px;
    background: #EEF5F1;
    border-radius: 999px;
    overflow: hidden;
    margin: 14px 0 10px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0B4F4A, #2F7770);
    border-radius: 999px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.info-grid div {
    background: #F8FAF8;
    padding: 16px;
    border-radius: 14px;
    border: 1px solid #EEF5F1;
}

.info-grid span {
    display: block;
    font-size: 13px;
    color: #617572;
    margin-bottom: 6px;
}

.info-grid b {
    font-size: 15px;
    color: #173B39;
}

.stat-text {
    font-size: 20px !important;
    line-height: 1.4;
}

@media (max-width:900px) {
    .cards, .cards.three, .grid-form, .camera-box, .modal-camera-box, .modal-form-grid {
        grid-template-columns: 1fr;
    }

    .page-header, .topbar {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-card {
        max-height: 92vh;
        overflow-y: auto;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions button {
        width: 100%;
    }

    .top-actions {
        justify-content: stretch;
        flex-direction: column;
        align-items: stretch;
    }

    .search-input, .table-search {
        width: 100%;
    }

    .top-actions .table-search, .top-actions .btn, .login-card button[type="submit"] {
        width: 100%;
    }

    .kiosk-camera-area, .compact-modal-camera {
        grid-template-columns: 1fr;
    }

    .kiosk-camera-area video, .kiosk-camera-area #preview, .compact-modal-camera video, .compact-modal-camera #preview {
        height: 230px;
        max-height: 230px;
    }

    .layout {
        flex-direction: column;
        display: block;
    }

    aside, .sidebar {
        position: static;
        width: 100%;
        height: auto;
        overflow: visible;
    }

    main, aside.collapsed+main, .sidebar.collapsed+main {
        margin-left: 0;
        width: 100%;
        padding: 20px;
    }

    .page-header {
        min-height: auto;
    }

    .header-left {
        align-items: center;
    }

    .menu-btn {
        margin-top: 0 !important;
    }

    .student-hero {
        text-align: center;
    }

    .student-hero .btn {
        width: 100%;
    }
}

/* DOWNLOAD PACKAGE BUTTON */

.doc-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.combined-download-btn {
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
}

/* ===== STUDENT SETTINGS PAGE ===== */

.settings-grid {
    align-items: start;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.settings-card {
    padding: 16px;
    border-radius: 12px;
    transition: 0.25s ease;
}

.settings-card:hover {
    box-shadow: 0 10px 25px rgba(4,18,15,0.06);
    transform: translateY(-3px);
}

.settings-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.settings-title h2 {
    margin: 0;
    font-size: 18px;
}

.settings-title .material-icons-outlined {
    color: #0B4F4A;
    font-size: 24px;
}

.settings-form {
    max-width: 420px;
    display: grid;
    gap: 12px;
}

.settings-form textarea {
    resize: vertical;
    min-height: 120px;
}

.theme-switch {
    justify-content: center;
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #F8FAF8;
    border: 1px solid #DCE5E0;
    padding: 18px;
    border-radius: 14px;
}

/* DARK MODE */

body.dark-mode {
    background: #071F1D;
    color: white;
}

body.dark-mode main {
    background: #071F1D;
}

body.dark-mode .panel, body.dark-mode .card, body.dark-mode .student-hero {
    background: #0F2A28;
    border-color: #173B39;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode strong, body.dark-mode b {
    color: white;
}

body.dark-mode .muted, body.dark-mode p, body.dark-mode span {
    color: #C7D9CE;
}

body.dark-mode aside {
    background: #071F1D;
    border-right: 1px solid #173B39;
}

body.dark-mode .side-nav a {
    color: #DDEAE4;
}

body.dark-mode .side-nav a:hover, body.dark-mode .side-nav a.active {
    background: #073C39;
    color: #A8C3B5;
}

body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
    background: #173B39;
    border: 1px solid #26433D;
    color: white;
}

body.dark-mode table {
    background: #0F2A28;
}

body.dark-mode th {
    background: #073C39;
}

body.dark-mode td {
    border-color: #173B39;
}

body.dark-mode .theme-switch {
    background: #073C39;
    border-color: #26433D;
}

.student-list li {
    margin-bottom: 8px;
    box-shadow: 0 2px 5px rgba(4,18,15,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    background: #F8FAF8;
    border: 1px solid #EEF5F1;
    padding: 10px;
    border-bottom: 1px #EEF5F1;
    font-size: 14px;
}

.student-list li:hover {
    background: #F8FAF8;
}

.drop-zone {
    border: 2px dashed #89A99A;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: 0.3s;
    background: #F8FAF8;
}

.drop-zone:hover {
    background: #EEF5F1;
    border-color: #0B4F4A;
}

.drop-zone span {
    font-size: 40px;
    color: #0B4F4A;
}

.drop-zone p {
    margin-top: 10px;
    font-size: 14px;
}

.btn-eval {
    background: #0B4F4A;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.btn-eval:hover {
    background: #2F7770;
}

canvas {
    width: 100% !important;
    max-height: 380px;
}

.panel {
    margin-bottom: 20px;
    background: #FFFFFF;
    padding: 20px;
    margin-top: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(4,18,15,.08);
}

.panel h2 {
    margin-bottom: 20px;
}

.cards {
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
    gap: 20px;
}

.card {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(4,18,15,.08);
}

.card h3 {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 10px;
}

.card strong {
    color: var(--accent);
    font-size: 28px;
}

/* Notification */

.notification {
    position: relative;
    cursor: pointer;
}

.notification .material-icons-outlined {
    font-size: 25px;
    color: #173B39;
}

.badge {
    padding: 6px 10px;
    font-weight: 700;
    position: absolute;
    top: -5px;
    right: -6px;
    background: #C1584F;
    color: white;
    width: 16px;
    height: 16px;
    font-size: 10px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Admin */

.admin-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: white;
    border-radius: 10px;
}

.admin-profile img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-info h4 {
    margin: 0;
    font-size: 14px;
}

.profile-info p {
    margin: 0;
    font-size: 11px;
    color: #617572;
}

.admin-profile .material-icons-outlined {
    font-size: 18px;
}

/* DOCUMENT STORAGE */

.folder-btn {
    width: 100%;
    padding: 15px;
    border: none;
    background: #F8FAF8;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
}

.folder-content {
    display: none;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #DCE5E0;
    border-radius: 10px;
}

.approve-btn {
    background: #0B4F4A;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
}

.reject-btn {
    background: #C1584F;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
}

#sendModal .modal-card {
    position: relative;
    width: 400px;
}

#sendModal select {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
}

.student-btn {
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: #173B39;
}

.document-dropdown {
    display: none;
}

.document-list {
    background: #F8FAF8;
    padding: 20px;
    border-radius: 5px;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
}

/* Student Selection List */

.student-selection-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    max-height: 350px;
    overflow-y: auto;
}

.student-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: #FFFFFF;
    border: 1px solid #DCE5E0;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s ease;
}

.student-option:hover {
    background: #F8FAF8;
}

/* Profile section */

.student-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #DDEAE4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.student-avatar span {
    font-size: 28px;
    color: #2F7770;
}

.student-info h4 {
    margin: 0;
    font-size: 15px;
}

.student-info p {
    margin: 3px 0 0;
    font-size: 13px;
    color: #617572;
}

/* Checkbox at right edge */

.student-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.student-picker .btn {
    width: 100%;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    border-radius: 8px;
}

/* Header */

.page-header {
    min-height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Search */

.search-box {
    width: 280px;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid #DCE5E0;
    border-radius: 25px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 2px 8px rgba(4,18,15,.05);
}

.search-box span {
    color: #89A99A;
    margin-right: 10px;
}

.search-box input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 14px;
    background: transparent;
}

/* Notification */

.icon-btn {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(4,18,15,.08);
}

.icon-btn:hover {
    background: #EEF5F1;
}

.notify-dot {
    width: 10px;
    height: 10px;
    background: #D48079;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Profile */

.profile-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    padding: 8px 14px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(4,18,15,.08);
}

.profile-box img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0B4F4A;
}

.profile-box h4 {
    margin: 0;
    font-size: 14px;
    color: #26433D;
}

.profile-box small {
    color: #617572;
    font-size: 12px;
}

/* Attendance camera preview placeholder */
#preview:not([src]), #preview[src=""] {
    background: #F8FAF8;
}

/* ===== GLOBAL STABILITY FIXES ===== */
img, video, canvas {
    max-width: 100%;
}

img {
    display: block;
}

button, input, select, textarea {
    max-width: 100%;
}

.header-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.header-left > div {
    min-width: 0;
}

.header-left h1 {
    margin-bottom: 4px;
    overflow-wrap: anywhere;
}

.nav-links {
    display: grid;
    gap: 8px;
}

.side-nav {
    min-height: calc(100vh - 105px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.panel {
    overflow: hidden;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Login loading/fallback fixes */
.login-card form {
    width: 100%;
}

.login-card input {
    margin-top: 10px;
}

.alert {
    padding: 11px 13px;
    border-radius: 12px;
    text-align: left;
    font-size: 13px;
}

.alert-error {
    color: #A6473F !important;
    background: #FBF1F0;
    border: 1px solid #F5E4E1;
}

/* Camera and preview fixes */
#preview:not(.has-photo) {
    background: #F8FAF8;
    border: 2px dashed #DCE5E0;
}

#preview:not(.has-photo)::before {
    content: "Captured photo will appear here";
}

.camera-notice {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: #FCF6EA;
    border: 1px solid #EDD3A8;
    color: #8B3A34;
    font-size: 13px;
}

.attendance-panel form > button[type="submit"] {
    margin-top: 8px;
}

/* Prevent collapsed sidebar content from leaking */
aside.collapsed .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
}

aside.collapsed .sidebar-brand img {
    width: 42px;
    height: 42px;
}

/* Responsive fixes */
@media (max-width: 900px) {
    aside, .sidebar,
    aside.collapsed, .sidebar.collapsed {
        position: relative;
        width: 100%;
        height: auto;
        max-height: none;
    }

    aside.collapsed .sidebar-brand div,
    aside.collapsed .nav-text {
        display: block;
    }

    aside.collapsed .side-nav a {
        justify-content: flex-start;
    }

    main,
    aside.collapsed + main,
    .sidebar.collapsed + main {
        margin-left: 0;
        width: 100%;
        padding: 18px;
    }

    .side-nav {
        min-height: auto;
    }

    .header-left {
        width: 100%;
    }

    .kiosk-camera-area {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .login-body {
        align-items: flex-start;
        padding: 14px;
    }

    .login-card {
        width: 100%;
        padding: 24px 18px;
        border-radius: 18px;
        margin-top: 20px;
    }

    .page-header,
    .header-left {
        gap: 10px;
    }

    main {
        padding: 14px;
    }

    .card, .panel {
        padding: 16px;
        border-radius: 16px;
    }

    th, td {
        padding: 10px;
        font-size: 13px;
    }
}

.password-field .password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 5px 0 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.password-field .password-toggle:hover {
    background: var(--soft);
    color: var(--accent);
    transform: translateY(-50%);
}

/* Login accessibility and validation message */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.alert-error {
    margin: 0 0 14px !important;
    padding: 10px 12px;
    border: 1px solid #F5E4E1;
    border-radius: 10px;
    background: #FBF1F0;
    color: #A6473F !important;
    text-align: left;
    font-size: 13px !important;
}

/* ===== Formal shared header tools ===== */
.page-header {
    min-height: 64px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.header-left {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.header-left h1 {
    margin-bottom: 4px;
    font-size: clamp(22px, 2vw, 30px);
    letter-spacing: -.02em;
}

.header-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    position: relative;
}

.global-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: min(300px, 28vw);
}

.global-search-wrap > .material-icons-outlined {
    position: absolute;
    left: 12px;
    color: var(--muted);
    font-size: 20px;
    pointer-events: none;
}

.global-search-wrap input {
    margin: 0;
    height: 42px;
    padding: 9px 40px 9px 40px;
    border-radius: 12px;
    background: var(--white);
}

.search-clear {
    position: absolute;
    right: 5px;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}

.search-clear:hover {
    background: var(--soft);
    color: var(--accent);
    transform: none;
}

.header-menu-wrap { position: relative; }

.header-icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    color: var(--text);
    box-shadow: none;
}

.header-icon-btn:hover {
    background: var(--soft);
    color: var(--accent);
    transform: none;
}

.notification-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid var(--white);
    background: #C1584F;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
}

.profile-button {
    height: 46px;
    padding: 4px 9px 4px 5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    color: var(--text);
    box-shadow: none;
}

.profile-button:hover { background: #F8FAF8; transform: none; }
.profile-button img, .profile-summary img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}

.profile-copy { display: grid; text-align: left; min-width: 95px; }
.profile-copy strong { font-size: 12px; line-height: 1.2; }
.profile-copy small { color: var(--muted); font-size: 10px; }
.profile-chevron { font-size: 18px; color: var(--muted); }

.header-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 310px;
    z-index: 1000;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(38,67,61,.16);
}

.header-dropdown[hidden] { display: none; }
.dropdown-heading, .profile-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}
.dropdown-heading span { color: var(--accent); font-size: 12px; font-weight: 600; }
.header-dropdown a {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    text-decoration: none;
    border-bottom: 1px solid #EEF5F1;
    font-size: 13px;
}
.header-dropdown a:hover { background: var(--soft); }
.header-dropdown a .material-icons-outlined { color: var(--accent); margin-top: 2px; }
.header-dropdown a span:last-child { display: grid; }
.header-dropdown small { display: block; color: var(--muted); margin-top: 2px; }
.profile-summary { justify-content: flex-start; }
.profile-summary span { display: grid; }
.profile-menu { width: 240px; }
.profile-menu .profile-logout { color: #C1584F; }
.profile-menu .profile-logout .material-icons-outlined { color: #C1584F; }

/* Formal layout polish without changing the green theme */
main { background: var(--bg); }
.panel, .card { border-color: var(--line); box-shadow: 0 8px 24px rgba(38,67,61,.06); }
.panel h2 { font-size: 18px; }
.side-nav { min-height: calc(100vh - 105px); display: flex; flex-direction: column; }
.side-nav .nav-links { display: grid; gap: 8px; }
.side-nav .logout { margin-top: auto; }
.side-nav a { min-height: 44px; }
.table-responsive { width: 100%; overflow-x: auto; }
.page-search-hidden { display: none !important; }
.page-search-empty { padding: 18px; text-align: center; color: var(--muted); }

@media (max-width: 1080px) {
    .profile-copy, .profile-chevron { display: none; }
    .profile-button { width: 44px; min-width: 44px; padding: 4px; }
    .global-search-wrap { width: min(250px, 30vw); }
}

@media (max-width: 900px) {
    .page-header { align-items: stretch; }
    .header-tools { width: 100%; margin-left: 0; justify-content: stretch; }
    .global-search-wrap { width: auto; flex: 1; }
    .side-nav { min-height: auto; }
    .side-nav .logout { margin-top: 12px; }
}

@media (max-width: 560px) {
    .header-tools { display: grid; grid-template-columns: 1fr auto auto; }
    .header-dropdown { position: fixed; top: 76px; left: 12px; right: 12px; width: auto; }
}


/* Requested admin workflow refinements */
.inline-actions,.filter-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.filter-toolbar input,.filter-toolbar select{width:auto;min-width:160px;margin:0}.section-title-row h2{margin-bottom:4px}.table-wrap{overflow-x:auto}.status-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}.status-badge.success{background:#E1EBE0;color:#2F5239}.status-badge.info{background:#E3EEF3;color:#2F5A70}.status-badge.warning{background:#F7ECD9;color:#8A5A22}.status-badge.danger{background:#FBF1F0;color:#8B3A34}.system-overview{display:grid;grid-template-columns:minmax(240px,.75fr) minmax(0,1.5fr);gap:22px;background:linear-gradient(135deg,#0B4F4A,#2F7770);color:#FFFFFF;border-radius:18px;padding:24px;margin-bottom:22px}.system-overview h2{color:#FFFFFF;margin:6px 0}.system-overview p,.system-overview small{color:#89A99A}.eyebrow{color:#DDEAE4;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.quick-access-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quick-access-card{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:15px;text-decoration:none;transition:.2s ease}.quick-access-card:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);border-color:#DDEAE4}.quick-access-card>.material-icons-outlined{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:#DDEAE4;color:#0B4F4A}.quick-access-card strong,.quick-access-card small{display:block}.menu-btn{position:relative;z-index:250;pointer-events:auto!important;cursor:pointer!important}body.sidebar-collapsed main{margin-left:78px!important;width:calc(100% - 78px)!important}.sidebar-filter select{cursor:pointer}
@media(max-width:900px){.system-overview{grid-template-columns:1fr}.quick-access-grid{grid-template-columns:1fr 1fr}.filter-toolbar,.inline-actions{width:100%}.filter-toolbar input,.filter-toolbar select,.inline-actions input,.inline-actions .btn{flex:1 1 180px}}@media(max-width:620px){.quick-access-grid{grid-template-columns:1fr}.system-overview{padding:18px}body.sidebar-collapsed main{margin-left:0!important;width:100%!important}}

/* =========================================================
   ADMIN DASHBOARD
   Scoped to .dashboard-content to avoid conflicts with other pages.
   Uses the existing CrimTrack theme variables from :root.
   ========================================================= */

.dashboard-content {
    padding: 28px;
    background: var(--bg);
    min-height: calc(100vh - 80px);
}

.dashboard-content .dashboard-welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 28px;
    margin-bottom: 24px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--primary));
    color: var(--white);
    box-shadow: 0 12px 28px rgba(23,107,104,.18);
}

.dashboard-content .dashboard-welcome h2 {
    margin: 6px 0 8px;
    color: var(--white);
    font-size: 28px;
}

.dashboard-content .dashboard-welcome p {
    margin: 0;
    color: rgba(255,255,255,.84);
}

.dashboard-content .welcome-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    font-size: 13px;
}

.dashboard-content .welcome-year {
    min-width: 170px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 12px;
    background: rgba(255,255,255,.12);
}

.dashboard-content .welcome-year small {
    display: block;
    margin-bottom: 5px;
    color: rgba(255,255,255,.74);
}

.dashboard-content .welcome-year strong {
    color: var(--white);
    font-size: 18px;
}

.dashboard-content .analytics-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.dashboard-content .analytics-summary h2 {
    margin: 0;
    color: var(--text);
    font-size: 20px;
}

.dashboard-content .analytics-summary p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-content .analytics-total {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-content .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.dashboard-content .stat-card {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 7px 18px rgba(38,67,61,.06);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.dashboard-content .stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 10px 24px rgba(23,107,104,.12);
}

.dashboard-content .stat-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dashboard-content .stat-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--soft);
    color: var(--accent);
}

.dashboard-content .stat-icon .material-icons-outlined {
    font-size: 25px;
}

.dashboard-content .stat-copy {
    min-width: 0;
}

.dashboard-content .stat-copy span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-content .stat-copy strong {
    display: block;
    color: var(--text);
    font-size: 26px;
    line-height: 1;
}

.dashboard-content .metric-bar {
    height: 6px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--soft);
}

.dashboard-content .metric-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--accent));
}

.dashboard-content .metric-caption {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--muted);
    font-size: 11px;
}

.dashboard-content .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr);
    gap: 22px;
    margin-bottom: 24px;
}

.dashboard-content .dashboard-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 7px 18px rgba(38,67,61,.06);
}

.dashboard-content .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 22px;
    border-bottom: 1px solid var(--line);
}

.dashboard-content .panel-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
}

.dashboard-content .panel-heading p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.dashboard-content .panel-link {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-content .panel-link:hover {
    text-decoration: underline;
}

.dashboard-content .quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 20px;
}

.dashboard-content .quick-action {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.dashboard-content .quick-action:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 7px 16px rgba(23,107,104,.10);
}

.dashboard-content .quick-action-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--soft);
    color: var(--accent);
}

.dashboard-content .quick-action strong {
    display: block;
    color: var(--text);
    font-size: 14px;
}

.dashboard-content .quick-action small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    line-height: 1.3;
}

.dashboard-content .activity-list {
    margin: 0;
    padding: 8px 20px 16px;
    list-style: none;
}

.dashboard-content .activity-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.dashboard-content .activity-item:last-child {
    border-bottom: 0;
}

.dashboard-content .activity-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 5px var(--soft);
}

.dashboard-content .activity-item p {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
}

.dashboard-content .activity-item small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
}

.dashboard-content .schedule-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.dashboard-content .modern-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 0;
}

.dashboard-content .modern-table th,
.dashboard-content .modern-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.dashboard-content .modern-table th {
    background: var(--soft);
    color: var(--muted);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.dashboard-content .modern-table td {
    color: var(--text);
    font-size: 14px;
}

.dashboard-content .modern-table tbody tr:hover td {
    background: #F8FAF8;
}

.dashboard-content .intern-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-weight: 600;
}

.dashboard-content .intern-avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--soft);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}

.dashboard-content .week-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

/* The shared .empty-state rule is already declared near the top of style.css. */

@media (max-width: 1100px) {
    .dashboard-content .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-content .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .dashboard-content {
        padding: 18px;
    }

    .dashboard-content .dashboard-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-content .welcome-year {
        width: 100%;
    }

    .dashboard-content .analytics-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-content .dashboard-stats,
    .dashboard-content .quick-actions {
        grid-template-columns: 1fr;
    }
}

/* ===== ADMIN ANALYTICS PAGE ===== */

.analytics-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-summary .card {
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
}

.analytics-summary .card h3 {
    color: var(--muted);
}

.analytics-summary .card strong {
    color: var(--accent);
}

.analytics-summary .card small {
    display: block;
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.analytics-source-card {
    background: var(--soft);
}

main > .panel {
    border: 1px solid var(--line);
}

.chart-container {
    position: relative;
    width: 100%;
    height: 350px;
    min-height: 320px;
    margin-top: 20px;
}

.chart-container-small {
    max-width: 600px;
    height: 350px;
    min-height: 280px;
    margin-right: auto;
    margin-left: auto;
}

.page-header .header-left p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 14px;
}

@media (max-width: 1050px) {
    .analytics-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .chart-container,
    .chart-container-small {
        height: 280px;
        min-height: 280px;
    }
}

@media (max-width: 650px) {
    .analytics-summary {
        grid-template-columns: 1fr;
    }
}
/* Student list avatars */

.student-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.student-avatar-image {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--soft);
    border: 2px solid var(--white);
    box-shadow: 0 3px 10px rgba(38,67,61,0.14);
}

.student-identity span {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 650px) {
    .student-avatar-image {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }
}
.student-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-avatar-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--line);
    background: var(--soft);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(4,18,15,.08);
}

.student-info span {
    font-weight: 500;
}

/* ===== DOCUMENT SELECTOR MODAL ===== */

.student-document-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    text-align: left;
    box-shadow: none;
}

.student-document-link:hover {
    background: transparent;
    color: var(--primary);
    text-decoration: underline;
    transform: none;
}

.student-document-link:focus-visible {
    outline: 3px solid var(--soft);
    outline-offset: 3px;
    border-radius: 4px;
}

.document-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(22,54,54,.55);
    backdrop-filter: blur(3px);
}

.document-modal-overlay.show {
    display: flex;
}

.document-modal-card {
    width: min(680px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 24px 70px rgba(22,54,54,.22);
}

.document-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.document-modal-header h2 {
    margin: 4px 0;
}

.document-modal-eyebrow {
    margin: 0;
    color: var(--accent);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.document-modal-close {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
    color: var(--text);
    box-shadow: none;
}

.document-modal-close:hover {
    background: var(--soft);
    color: var(--accent);
    transform: none;
}

.document-selection-section h3,
.document-agency-section label {
    display: block;
    margin: 0 0 10px;
    font-size: .95rem;
    font-weight: 700;
}

.document-option-list {
    display: grid;
    gap: 10px;
}

.document-option {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.document-option:hover {
    border-color: var(--primary);
    background: var(--soft);
}

.document-option.is-disabled {
    cursor: not-allowed;
    opacity: .55;
    background: var(--bg);
}

.document-option input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.document-option-icon {
    color: var(--accent);
}

.document-option-details {
    display: grid;
    gap: 3px;
}

.document-option-details small,
.document-option-state {
    color: var(--muted);
}

.document-option-state {
    font-size: .78rem;
    font-weight: 700;
}

.document-agency-section {
    margin-top: 22px;
}

.document-agency-section select {
    width: 100%;
}

.document-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

@media (max-width: 600px) {
    .document-modal-overlay {
        padding: 12px;
    }

    .document-modal-card {
        padding: 18px;
        border-radius: 14px;
    }

    .document-option {
        grid-template-columns: auto auto 1fr;
    }

    .document-option-state {
        grid-column: 2 / -1;
    }

    .document-modal-actions {
        flex-direction: column-reverse;
    }

    .document-modal-actions button {
        width: 100%;
    }
}
.student-document-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
}

.student-document-avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 2px solid var(--soft);
    border-radius: 50%;
    background: var(--soft);
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(38,67,61,.10);
}

.student-document-name {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.student-document-name strong {
    color: var(--text);
    font-size: 14px;
    overflow-wrap: anywhere;
}

.student-document-name small {
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 600px) {
    .student-document-profile {
        min-width: 170px;
    }

    .student-document-avatar {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }
}
/* Partner agency branding */
.agency-brand-chip{position:fixed;right:24px;bottom:20px;display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--line,#DCE5E0);border-radius:999px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);font-size:12px;font-weight:700;color:var(--agency-accent-dark,#2F5239);box-shadow:0 8px 28px rgba(22,54,54,.08);z-index:30;pointer-events:none}
.agency-brand-chip .material-icons-outlined{font-size:16px}
.brand-field{display:flex;flex-direction:column;gap:7px;padding:10px 12px;border:1px solid var(--line,#DCE5E0);border-radius:12px;background:#FFFFFF;font-size:13px;font-weight:700}
.brand-field input[type="color"]{width:100%;height:42px;padding:3px;border:0;background:transparent;cursor:pointer}
.brand-upload{grid-column:span 2}.brand-upload small{font-weight:500;color:var(--muted,#617572)}
.agency-brand-preview{display:inline-flex;align-items:center;gap:8px;font-weight:650}.agency-color-dot{width:14px;height:14px;border-radius:50%;background:var(--agency-dot);box-shadow:0 0 0 3px color-mix(in srgb,var(--agency-dot) 18%,transparent)}
@media(max-width:900px){body .layout aside{transform:translateX(-105%);transition:transform .22s ease;z-index:1000}body.sidebar-mobile-open .layout aside{transform:translateX(0)}body .layout main{margin-left:0!important}.brand-upload{grid-column:auto}}
.verification-note{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:14px 16px;border:1px dashed var(--line,#DDEAE4);border-radius:14px;background:#F8FAF8}.verification-note>.material-icons-outlined{color:var(--agency-accent,#2F7770);font-size:24px}.verification-note p{margin:4px 0 0}

/* ===== CrimTrack functional light/dark theme ===== */
:root[data-theme="dark"] {
    --primary: #4C9490;
    --accent: #A8C3B5;
    --bg: #173B39;
    --text: #DCE5E0;
    --muted: #89A99A;
    --white: #173B39;
    --line: #26433D;
    --soft: #173B39;
    --shadow: 0 10px 30px rgba(4,18,15,.28);
    color-scheme: dark;
}
:root[data-theme="dark"] body,
:root[data-theme="dark"] main { background: var(--bg); color: var(--text); }
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .header-dropdown,
:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] .document-modal-card,
:root[data-theme="dark"] .agency-brand-chip { background: var(--white); border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: #071F1D; border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #617572; }
:root[data-theme="dark"] table thead,
:root[data-theme="dark"] th { background: #073C39; color: #DCE5E0; }
:root[data-theme="dark"] tr,
:root[data-theme="dark"] td { border-color: var(--line); }
:root[data-theme="dark"] tbody tr:hover { background: #073C39; }
:root[data-theme="dark"] .secondary-btn,
:root[data-theme="dark"] .document-modal-close { background: #073C39; color: var(--text); border-color: var(--line); }
:root[data-theme="dark"] .verification-note { background: #173B39; border-color: var(--line); }
:root[data-theme="dark"] .login-body { background: linear-gradient(135deg,#04120F,#173B39 55%,#173B39); }

.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.settings-card { min-width:0; }
.settings-card-heading { display:flex; align-items:flex-start; gap:12px; margin-bottom:18px; }
.settings-card-heading > .material-icons-outlined { color:var(--accent); font-size:28px; }
.settings-card-heading h2 { margin-bottom:4px; }
.settings-form { display:grid; gap:12px; }
.settings-form label { margin:0; }
.permission-fieldset { margin:4px 0 2px; padding:14px; border:1px solid var(--line); border-radius:14px; }
.permission-fieldset legend { padding:0 6px; font-weight:700; color:var(--text); }
.permission-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:8px; }
.permission-option { display:flex; align-items:center; gap:8px; margin:0; padding:9px 10px; border:1px solid var(--line); border-radius:10px; background:var(--soft); cursor:pointer; }
.permission-option input { width:16px; height:16px; margin:0; }
.permission-badge { display:inline-flex; margin:2px 4px 2px 0; padding:4px 8px; border-radius:999px; background:var(--soft); border:1px solid var(--line); font-size:12px; font-weight:700; }
.inline-form { display:inline; }
.theme-setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--soft); }
.theme-setting-row div { display:grid; gap:4px; }
.theme-setting-row small { color:var(--muted); }
.theme-switch { margin:0; cursor:pointer; position:relative; }
/* The checkbox is absolutely positioned to hide it, but it still picked up the
   generic form rule `input{width:100%}`. With no positioned ancestor its
   containing block was the page, so it measured 100% of the viewport from its
   own offset and pushed the document ~612px wide on profile.php and
   admin-settings.php (101px at mobile widths). Pinning it to 1px inside a
   position:relative label keeps it screen-reader reachable without geometry. */
.theme-switch input { position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; margin:0; padding:0; border:0; top:0; left:0; }
.theme-switch-track { width:52px; height:30px; display:block; padding:3px; border-radius:999px; background:#89A99A; transition:.2s ease; }
.theme-switch-thumb { display:block; width:24px; height:24px; border-radius:50%; background:white; box-shadow:0 2px 6px rgba(4,18,15,.22); transition:transform .2s ease; }
.theme-switch input:checked + .theme-switch-track { background:#2F7770; }
.theme-switch input:checked + .theme-switch-track .theme-switch-thumb { transform:translateX(22px); }
body.modal-open { overflow:hidden; }
.modal-overlay[hidden] { display:none !important; }
.modal-overlay.show { display:flex !important; }
@media (max-width:900px){ .settings-grid{grid-template-columns:1fr;} }
@media (max-width:600px){ .permission-grid{grid-template-columns:1fr;} }

/* ===== Functional user profiles and editable feature access ===== */
.profile-layout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:20px;align-items:start}.profile-summary-card{text-align:center;position:sticky;top:18px}.profile-avatar-large{width:128px;height:128px;border-radius:50%;object-fit:cover;border:5px solid var(--white);box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(22,54,54,.12);margin:4px auto 16px}.profile-summary-card h2{margin:0 0 4px}.profile-summary-card>.status-badge{margin-top:12px}.profile-feature-list{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.profile-feature-list strong{width:100%;margin-bottom:5px}.profile-feature-list small{color:var(--muted)}.profile-main-column{display:grid;gap:20px;min-width:0}.profile-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.profile-secondary-grid{margin-bottom:0}.settings-form textarea{width:100%;resize:vertical}.settings-form label small{display:block;margin-top:5px;color:var(--muted);font-weight:500}.permission-editor{display:grid;gap:8px;min-width:280px}.permission-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px}.permission-editor-grid label{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;white-space:nowrap}.permission-editor-grid input{width:14px;height:14px;margin:0}.compact-btn{width:max-content;padding:7px 10px;font-size:12px}
:root[data-theme="dark"] .profile-avatar-large{border-color:var(--white);box-shadow:0 0 0 1px var(--line),0 12px 30px rgba(4,18,15,.28)}
@media(max-width:900px){.profile-layout{grid-template-columns:1fr}.profile-summary-card{position:static}.profile-form-grid{grid-template-columns:1fr}.permission-editor{min-width:220px}}
/* Portal feature cards */
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:18px}.stat-card{display:flex;gap:14px;align-items:center;padding:18px;border:1px solid var(--border,#DCE5E0);border-radius:16px;background:var(--card,#FFFFFF)}.stat-card .material-icons-outlined{font-size:30px}.stat-card strong{font-size:26px;display:block}.stat-card p{margin:2px 0 0;color:#617572}.quick-access-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.quick-access-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid #DCE5E0;border-radius:16px;background:#FFFFFF;text-decoration:none;color:inherit}.quick-access-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(4,18,15,.07)}.quick-access-card .material-icons-outlined{font-size:30px}.quick-access-card small{color:#617572}.deployment-card{padding:18px;border:1px solid #DCE5E0;border-radius:16px}.filter-bar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:18px}.filter-bar label{display:flex;flex-direction:column;gap:6px}.full-width{grid-column:1/-1}.form-actions{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:1000px){.stats-grid,.quick-access-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.stats-grid,.quick-access-grid{grid-template-columns:1fr}}


/* ===== CRIMTRACK OFFICIAL DEEP TEAL + SAGE THEME (2026-09) ===== */
:root:not([data-theme="dark"]) {
  --primary:#0B4F4A;
  --accent:#2F7770;
  --light:#DDEAE4;
  --soft:#EEF5F1;
  --bg:#F8FAF8;
  --text:#173B39;
}
:root:not([data-theme="dark"]) body,
:root:not([data-theme="dark"]) main { background:#F8FAF8; color:#173B39; }
:root:not([data-theme="dark"]) .side-nav a.active,
:root:not([data-theme="dark"]) .side-nav a:hover { background:rgba(175,201,190,.22); color:#FFFFFF; }
:root:not([data-theme="dark"]) input:focus,
:root:not([data-theme="dark"]) select:focus,
:root:not([data-theme="dark"]) textarea:focus { border-color:#0B4F4A; box-shadow:0 0 0 4px rgba(11,79,74,.12); }
:root:not([data-theme="dark"]) .secondary-btn { background:#DDEAE4; color:#0B4F4A; }
:root:not([data-theme="dark"]) .secondary-btn:hover { background:#AFC9BE; color:#073C39; }

/* Workflow upgrade: keep evaluation action on-brand in all themes */
.evaluation-submit,.evaluation-form .evaluation-submit{background:#0B4F4A!important;color:#FFFFFF!important;border-color:#0B4F4A!important}
.evaluation-submit:hover,.evaluation-form .evaluation-submit:hover{background:#2F7770!important;color:#FFFFFF!important}
body.dark-mode .evaluation-submit,:root[data-theme="dark"] .evaluation-submit{background:#0B4F4A!important;color:#FFFFFF!important}
.action-danger{background:#FBF1F0!important;color:#A6473F!important;border:1px solid #F5E4E1!important;box-shadow:none!important}
.action-danger:hover{background:#FBF1F0!important;color:#8B3A34!important;transform:none!important}
.metric-positive{color:#0B4F4A;font-weight:700}.metric-negative{color:#A6473F;font-weight:700}


/* ===== Student registration modal + dashboard logs refinement ===== */
body.modal-open {
    overflow: hidden;
}

.register-student-btn {
    white-space: nowrap;
}

.compact-log-filter {
    margin-bottom: 0;
}

.compact-log-filter input {
    min-width: 210px;
}

.dashboard-logs-wrap {
    max-height: 360px;
    overflow: auto;
}

#dashboardLogsTable {
    min-width: 760px;
}

#dashboardLogsTable thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

@media (max-width: 760px) {
    .register-student-btn {
        width: 100%;
    }

    .compact-log-filter {
        width: 100%;
    }

    .compact-log-filter input {
        width: 100%;
        min-width: 0;
    }
}


/* ===== Attendance photo viewer, student avatars, and universal password eyes ===== */
.attendance-photo-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--primary);font-weight:700;font-size:12px}
.attendance-photo-thumb{width:54px;height:54px;border-radius:10px;object-fit:cover;border:1px solid var(--line);box-shadow:0 3px 10px rgba(22,54,54,.10);background:#F8FAF8}
.attendance-photo-link .material-icons-outlined{font-size:18px}
.student-profile-cell{display:flex;align-items:center;gap:11px;min-width:190px}
.student-profile-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;border:2px solid var(--light,#DDEAE4);background:#FFFFFF;box-shadow:0 2px 8px rgba(22,54,54,.10)}
.student-profile-placeholder{display:grid;place-items:center;background:var(--light,#DDEAE4);color:var(--primary,#0B4F4A)}
.student-profile-placeholder .material-icons-outlined{font-size:24px}
.password-visibility-wrap{position:relative;display:block;width:100%;margin-top:8px}
.password-visibility-wrap>input{margin-top:0!important;padding-right:46px!important}
.password-visibility-wrap>.password-toggle,.password-field>.password-toggle{position:absolute!important;right:7px!important;top:50%!important;transform:translateY(-50%)!important;width:36px!important;height:36px!important;min-width:36px!important;margin:0!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#617572!important;box-shadow:none!important;display:grid!important;place-items:center!important;z-index:3}
.password-visibility-wrap>.password-toggle:hover,.password-field>.password-toggle:hover{background:var(--soft,#DDEAE4)!important;color:var(--primary,#0B4F4A)!important;transform:translateY(-50%)!important}
.password-visibility-wrap>.password-toggle .material-icons-outlined,.password-field>.password-toggle .material-icons-outlined{font-size:20px!important;margin:0!important}
body.partner-branded .student-profile-placeholder{background:var(--agency-light)!important;color:var(--agency-accent-dark)!important}
body.partner-branded .student-profile-avatar{border-color:var(--agency-light)!important}


/* ===== 2026-08-08 Student dashboard / profile / notification upgrades ===== */
.student-profile-cell {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 220px;
}
.student-profile-cell img {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #DDEAE4;
    background: #F8FAF8;
}
.student-profile-cell strong { color: #173B39; }
.student-profile-cell small { color: #617572; }

.notification-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    color: #617572;
    font-size: 13px;
}
.notification-dot {
    min-width: 17px;
    width: auto;
    padding: 0 4px;
    height: 17px;
    font-size: 9px;
}

.student-admin-style-dashboard .system-overview {
    align-items: stretch;
}
.student-overview-profile {
    display: flex;
    gap: 16px;
    align-items: center;
}
.student-overview-profile img {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    object-fit: cover;
    background: #FFFFFF;
    border: 3px solid rgba(255,255,255,.26);
}
.student-overview-profile h2 {
    margin: 4px 0 2px;
}
.student-overview-profile p {
    margin: 0;
}
.student-deployment-summary {
    margin: 18px 0 0;
    max-width: 560px;
}
.student-dashboard-stats {
    margin-bottom: 22px;
}
.student-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 20px;
}
.student-progress-number {
    font-size: 24px;
    color: #0B4F4A;
}
.student-progress-track {
    height: 12px;
}
.compact-info-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
}
@media (max-width: 900px) {
    .student-dashboard-grid { grid-template-columns: 1fr; }
    .compact-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .student-overview-profile { align-items: flex-start; }
    .student-overview-profile img { width: 58px; height: 58px; border-radius: 14px; }
}


/* ===== Workflow/UI fixes: assignments, logs, profile layering, cleaner student dashboard ===== */
.page-header {
    position: relative;
    z-index: 2200 !important;
    overflow: visible !important;
}
.header-tools,
.header-menu-wrap {
    position: relative;
    z-index: 2210;
}
.header-dropdown,
.profile-menu,
.notification-menu {
    z-index: 5000 !important;
}
.layout main,
.agency-dashboard-content {
    overflow: visible;
}

.student-list-filter-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}
.student-list-filter-row select {
    width: auto;
    min-width: 170px;
    margin: 0;
}

.student-welcome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    margin-bottom: 20px;
    border: 1px solid #DCE5E0;
    border-radius: 18px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(22,54,54,.05);
}
.student-welcome-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}
.student-welcome-profile img {
    width: 62px;
    height: 62px;
    border-radius: 16px;
    object-fit: cover;
    border: 2px solid #DDEAE4;
    background: #F8FAF8;
}
.student-welcome-profile .eyebrow { color: #0B4F4A; }
.student-welcome-profile h2 { margin: 3px 0 2px; font-size: 21px; }
.student-welcome-profile p { margin: 0; color: #617572; }
.student-welcome-agency {
    display: grid;
    gap: 3px;
    min-width: 220px;
    padding: 13px 16px;
    border-radius: 14px;
    background: #EEF5F1;
    border: 1px solid #DDEAE4;
}
.student-welcome-agency span,
.student-welcome-agency small { color: #617572; font-size: 12px; }
.student-welcome-agency strong { color: #173B39; }

.student-clean-grid {
    display: grid;
    grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr);
    gap: 20px;
}
.student-progress-panel,
.student-actions-panel { min-height: 190px; }
.student-action-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
}
.student-action-grid a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #DCE5E0;
    border-radius: 13px;
    background: #F8FAF8;
    color: #173B39;
    text-decoration: none;
    transition: .18s ease;
}
.student-action-grid a:hover {
    border-color: #AFC9BE;
    background: #EEF5F1;
    transform: translateY(-1px);
}
.student-action-grid .material-icons-outlined { color: #0B4F4A; }

@media (max-width: 900px) {
    .student-clean-grid { grid-template-columns: 1fr; }
    .student-welcome-card { align-items: flex-start; flex-direction: column; }
    .student-welcome-agency { width: 100%; min-width: 0; }
}
@media (max-width: 560px) {
    .student-action-grid { grid-template-columns: 1fr; }
    .student-list-filter-row { justify-content: stretch; flex-wrap: wrap; }
    .student-list-filter-row select { width: 100%; }
}


/* =====================================================================
   CrimTrack responsive/mobile compatibility + Register Student button fix
   ===================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-width: 0;
}

img,
video,
canvas {
    max-width: 100%;
}

.layout,
.layout main,
.panel,
.card,
.modal-card,
.table-wrap {
    min-width: 0;
}

.register-entity-btn,
#openStudentRegisterButton,
#openAgencyModalButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 11px;
    white-space: nowrap;
    flex: 0 0 auto;
}

#studentRegisterModal {
    z-index: 9000;
}

#studentRegisterModal .modal-card {
    width: min(900px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

#studentRegisterModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #FFFFFF;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

@media (max-width: 900px) {
    /* Mobile sidebar becomes an off-canvas drawer. */
    body .layout {
        display: block !important;
        min-height: 100dvh;
    }

    body .layout aside,
    body .layout .sidebar,
    body .layout aside.collapsed,
    body .layout .sidebar.collapsed {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(82vw, 290px) !important;
        height: 100dvh !important;
        transform: translateX(-105%) !important;
        transition: transform .22s ease !important;
        overflow-y: auto !important;
        z-index: 7000 !important;
        box-shadow: 16px 0 40px rgba(22,54,54,.18);
    }

    body.sidebar-mobile-open .layout aside,
    body.sidebar-mobile-open .layout .sidebar {
        transform: translateX(0) !important;
    }

    body.sidebar-mobile-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(22,54,54,.38);
        z-index: 6900;
    }

    body .layout main,
    body.sidebar-collapsed .layout main,
    body .layout aside.collapsed + main,
    body .layout .sidebar.collapsed + main {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 16px !important;
    }

    .page-header,
    .topbar {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px;
        padding: 14px 0 18px;
    }

    .page-header .header-left {
        width: 100%;
        min-width: 0;
    }

    .page-header .header-left > div {
        min-width: 0;
    }

    .page-header h1 {
        font-size: clamp(22px, 6vw, 30px);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .page-header p {
        line-height: 1.45;
    }

    .header-tools {
        width: 100%;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 8px;
        align-items: center;
    }

    .global-search-wrap {
        min-width: 0;
        width: 100%;
    }

    .global-search-wrap input {
        width: 100%;
        min-width: 0;
    }

    .profile-copy {
        display: none;
    }

    .header-dropdown,
    .profile-menu,
    .notification-menu {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        top: 78px !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - 100px);
        overflow-y: auto;
        z-index: 9500 !important;
    }

    .section-title-row {
        align-items: flex-start;
        gap: 12px;
        flex-wrap: wrap;
    }

    .section-title-row > div:first-child {
        flex: 1 1 220px;
        min-width: 0;
    }

    .section-title-row > .btn,
    .section-title-row > button {
        flex: 0 0 auto;
    }

    .grid-form,
    .modal-form-grid,
    .profile-form-grid,
    .settings-grid,
    .student-dashboard-grid,
    .student-clean-grid,
    .analytics-grid,
    .cards,
    .cards.three {
        grid-template-columns: 1fr !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .quick-access-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .panel {
        padding: 16px;
        border-radius: 15px;
    }

    .system-overview,
    .student-welcome-card {
        padding: 18px;
    }

    .filter-toolbar,
    .filter-bar,
    .inline-actions,
    .student-list-filter-row,
    .top-actions,
    .form-actions {
        width: 100%;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .filter-toolbar input,
    .filter-toolbar select,
    .filter-bar input,
    .filter-bar select,
    .inline-actions input,
    .inline-actions select,
    .student-list-filter-row select {
        flex: 1 1 180px;
        width: auto;
        min-width: 0;
    }

    .modal-overlay {
        padding: 12px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-card,
    .wide-modal,
    #studentRegisterModal .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 0;
        border-radius: 16px;
    }

    .camera-box,
    .modal-camera-box,
    .kiosk-camera-area,
    .compact-modal-camera {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 640px) {
    body .layout main {
        padding: 12px !important;
    }

    .header-tools {
        grid-template-columns: minmax(0, 1fr) 42px 42px;
    }

    .header-icon-btn,
    .profile-button {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        justify-content: center;
    }

    .profile-button img {
        width: 32px;
        height: 32px;
    }

    .profile-chevron {
        display: none;
    }

    .stats-grid,
    .quick-access-grid,
    .student-action-grid {
        grid-template-columns: 1fr !important;
    }

    .stat-card {
        min-height: 86px;
    }

    .section-title-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .section-title-row > .btn,
    .section-title-row > button,
    #openStudentRegisterButton,
    #openAgencyModalButton {
        width: 100% !important;
    }

    .student-list-filter-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .student-list-filter-row select,
    .student-list-filter-row button,
    .filter-toolbar input,
    .filter-toolbar select,
    .filter-toolbar button,
    .filter-bar input,
    .filter-bar select,
    .filter-bar button {
        width: 100% !important;
    }

    .student-welcome-profile {
        align-items: flex-start;
    }

    .student-welcome-profile img {
        width: 54px;
        height: 54px;
    }

    .student-profile-cell {
        min-width: 180px;
    }

    /* Keep tables readable instead of crushing columns on phones. */
    .table-wrap table {
        min-width: 680px;
    }

    .table-wrap th,
    .table-wrap td {
        white-space: nowrap;
        padding: 11px 12px;
    }

    .table-wrap td:nth-child(2) {
        white-space: normal;
    }

    .modal-header {
        align-items: flex-start;
    }

    .modal-actions,
    .form-actions {
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .modal-actions button,
    .form-actions button,
    .form-actions .btn {
        width: 100% !important;
    }

    input,
    select,
    textarea {
        font-size: 16px; /* prevents iOS auto-zoom */
    }
}

@media (max-width: 390px) {
    body .layout main {
        padding: 10px !important;
    }

    .panel,
    .system-overview,
    .student-welcome-card {
        padding: 14px;
        border-radius: 14px;
    }

    .page-header h1 {
        font-size: 22px;
    }

    .header-dropdown,
    .profile-menu,
    .notification-menu {
        left: 10px !important;
        right: 10px !important;
    }
}

/* =====================================================================
   CRIMTRACK PROFESSIONAL ENTERPRISE THEME — 2026-08-16
   Visual-only layer. No page structure, IDs, forms, routes, or JS behavior changed.
   ===================================================================== */

:root {
    --primary: #0B4F4A;
    --accent: #2F7770;
    --light: #DDEAE4;
    --bg: #F8FAF8;
    --text: #173B39;
    --muted: #617572;
    --white: #FFFFFF;
    --line: #DCE5E0;
    --soft: #EEF5F1;
    --surface-muted: #F8FAF8;
    --sidebar-bg: #173B39;
    --sidebar-bg-soft: #173B39;
    --sidebar-text: #DCE5E0;
    --sidebar-heading: #F8FAF8;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --shadow: 0 8px 24px rgba(22,54,54,.055);
    --shadow-hover: 0 14px 34px rgba(22,54,54,.09);
}

body:not(.login-body) {
    background: var(--bg);
    color: var(--text);
}

body,
button,
input,
select,
textarea {
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ----- Enterprise sidebar ----- */
body:not(.login-body) aside,
body:not(.login-body) .sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    border-right: 1px solid rgba(255,255,255,.06);
    box-shadow: 8px 0 26px rgba(22,54,54,.08);
}

body:not(.login-body) .sidebar-brand {
    margin: 0 0 20px;
    padding: 10px 10px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

body:not(.login-body) .sidebar-brand img {
    width: 42px;
    height: 42px;
    border: 0;
    box-shadow: none;
}

body:not(.login-body) .sidebar-brand h2,
body:not(.login-body) aside h2 {
    color: var(--sidebar-heading);
    font-weight: 700;
    letter-spacing: -.02em;
}

body:not(.login-body) .sidebar-brand p,
body:not(.login-body) aside > p {
    color: #89A99A;
}

body:not(.login-body) .side-nav,
body:not(.login-body) .nav-links {
    gap: 5px;
}

body:not(.login-body) .side-nav a {
    min-height: 42px;
    padding: 10px 12px;
    color: var(--sidebar-text);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 500;
    opacity: 1;
    border: 1px solid transparent;
}

body:not(.login-body) .side-nav a .material-icons-outlined {
    color: #89A99A;
    font-size: 20px;
    transition: color .18s ease;
}

body:not(.login-body) .side-nav a:hover {
    color: #FFFFFF;
    background: rgba(255,255,255,.055);
    border-color: rgba(255,255,255,.055);
    transform: none;
}

body:not(.login-body) .side-nav a:hover .material-icons-outlined {
    color: #DDEAE4;
}

body:not(.login-body) .side-nav a.active {
    color: #FFFFFF;
    background: linear-gradient(90deg, rgba(23,107,104,.24), rgba(15,76,76,.13));
    border-color: rgba(76,148,144,.18);
    box-shadow: inset 3px 0 0 #4C9490;
}

body:not(.login-body) .side-nav a.active .material-icons-outlined {
    color: #A8C3B5;
}

body:not(.login-body) .sidebar-filter {
    margin-top: 12px;
    padding: 12px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 12px;
}

body:not(.login-body) .sidebar-filter label {
    color: #89A99A;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body:not(.login-body) .sidebar-filter select {
    margin-top: 7px;
    background: var(--sidebar-bg-soft);
    color: #F8FAF8;
    border-color: #26433D;
}

body:not(.login-body) .side-nav .logout {
    color: #EAC5C0;
    background: rgba(139,58,52,.12);
    border-color: rgba(212,128,121,.10);
}

body:not(.login-body) .side-nav .logout:hover {
    color: #F5E4E1;
    background: rgba(139,58,52,.22);
}

/* ----- Main workspace / header ----- */
body:not(.login-body) main {
    background:
        radial-gradient(circle at 92% 0%, rgba(76,148,144,.045), transparent 25%),
        var(--bg);
}

.page-header {
    min-height: 64px;
    margin-bottom: 22px;
    padding-bottom: 16px;
    border-bottom: 1px solid #DCE5E0;
}

.page-header h1 {
    margin: 0 0 4px;
    color: #173B39;
    font-size: clamp(24px, 2.1vw, 31px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -.035em;
}

.page-header p {
    color: #617572;
    font-size: 13px;
}

.menu-btn,
.header-icon-btn {
    background: #FFFFFF !important;
    color: #26433D !important;
    border: 1px solid #DCE5E0 !important;
    box-shadow: 0 2px 8px rgba(22,54,54,.04) !important;
}

.menu-btn:hover,
.header-icon-btn:hover {
    background: #F8FAF8 !important;
    color: var(--primary) !important;
    border-color: #DCE5E0 !important;
    transform: none !important;
}

.header-tools {
    gap: 9px;
}

.global-search-wrap {
    height: 42px;
    border: 1px solid #DCE5E0;
    border-radius: 11px;
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(22,54,54,.035);
}

.global-search-wrap:focus-within {
    border-color: #4C9490;
    box-shadow: 0 0 0 3px rgba(76,148,144,.10);
}

.global-search-wrap input {
    color: #173B39;
}

.profile-button {
    min-height: 42px;
    background: #FFFFFF;
    border: 1px solid #DCE5E0;
    box-shadow: 0 2px 8px rgba(22,54,54,.035);
}

.profile-button:hover {
    border-color: #DCE5E0;
    background: #FFFFFF;
}

.header-dropdown {
    border: 1px solid #DCE5E0;
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(22,54,54,.14);
}

/* ----- Panels / cards ----- */
.panel,
.card,
.settings-card,
.stat-card,
.dashboard-content .dashboard-panel,
.deployment-card,
.student-welcome-card {
    background: #FFFFFF;
    border: 1px solid #DCE5E0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.panel,
.card {
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.panel:hover {
    border-color: #DCE5E0;
}

.card:hover,
.stat-card:hover {
    border-color: #DCE5E0;
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.panel h2,
.settings-title h2,
.section-title-row h2 {
    color: #173B39;
    font-weight: 700;
    letter-spacing: -.02em;
}

.muted,
.small-label,
.card h3,
.stat-card p {
    color: #617572 !important;
}

/* Hero/overview keeps brand presence but becomes more enterprise-like */
.system-overview,
.dashboard-content .dashboard-welcome {
    background:
        linear-gradient(120deg, rgba(15,76,76,.98), rgba(10,56,56,.96));
    border: 1px solid rgba(10,56,56,.30);
    border-radius: 20px;
    box-shadow: 0 14px 36px rgba(15,76,76,.13);
}

.system-overview .quick-access-card,
.dashboard-content .dashboard-welcome .quick-access-card {
    background: rgba(255,255,255,.095);
    border-color: rgba(255,255,255,.13);
    box-shadow: none;
}

.system-overview .quick-access-card:hover {
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.22);
    transform: translateY(-1px);
}

/* ----- Statistics ----- */
.stats-grid,
.dashboard-content .dashboard-stats {
    gap: 14px;
}

.stat-card,
.dashboard-content .stat-card {
    padding: 17px 18px;
    min-height: 104px;
}

.stat-card > .material-icons-outlined,
.dashboard-content .stat-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #0B4F4A;
    background: #EEF5F1;
    border: 1px solid #DDEAE4;
}

.stat-card strong,
.dashboard-content .stat-copy strong,
.card strong {
    color: #173B39;
    font-weight: 700;
    letter-spacing: -.025em;
}

/* ----- Buttons / links ----- */
button,
.btn,
.create-btn,
.btn-approve,
.btn-eval,
.approve-btn,
.login-submit {
    border-radius: 10px;
    font-weight: 600;
}

button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle),
.btn:not(.secondary-btn) {
    box-shadow: 0 5px 14px rgba(15,76,76,.12);
}

button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle):hover,
.btn:not(.secondary-btn):hover {
    box-shadow: 0 7px 18px rgba(15,76,76,.17);
}

.secondary-btn {
    color: #26433D;
    background: #FFFFFF;
    border: 1px solid #DCE5E0;
    box-shadow: none;
}

.secondary-btn:hover {
    color: #0B4F4A;
    background: #F8FAF8;
    border-color: #AFC9BE;
    transform: none;
}

.table-link,
a.panel-link,
.dashboard-content .panel-link {
    color: #0B4F4A;
}

/* ----- Forms ----- */
input,
select,
textarea {
    border-color: #DCE5E0;
    border-radius: 10px;
    background: #FFFFFF;
    color: #173B39;
}

input:hover,
select:hover,
textarea:hover {
    border-color: #C7D9CE;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #4C9490;
    box-shadow: 0 0 0 3px rgba(76,148,144,.10);
}

label {
    color: #26433D;
    font-weight: 600;
}

.permission-box,
.theme-switch,
.info-grid div,
.camera-card,
.document-list {
    background: #F8FAF8;
    border-color: #DCE5E0;
}

/* ----- Tables ----- */
table {
    background: transparent;
    border: 1px solid #DCE5E0;
    border-radius: 14px;
    overflow: hidden;
}

th,
td {
    border-bottom-color: #EEF5F1;
}

th {
    padding-top: 11px;
    padding-bottom: 11px;
    background: #F8FAF8;
    color: #3F5C56;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

td {
    color: #26433D;
    font-size: 13px;
}

tbody tr:last-child td {
    border-bottom: 0;
}

tr:hover td,
.dashboard-content .modern-table tbody tr:hover td {
    background: #EEF5F1;
}

/* ----- Status pills ----- */
.status-badge,
.status,
.badge {
    border-radius: 999px;
    font-weight: 700;
}

.status-badge.success,
.status.approved {
    background: #EEF5F1;
    color: #0B4F4A;
    border: 1px solid #AFC9BE;
}

.status-badge.warning,
.status.pending {
    background: #FCF6EA;
    color: #A87232;
    border: 1px solid #EDD3A8;
}

.status-badge.danger {
    background: #FBF1F0;
    color: #A6473F;
    border: 1px solid #F5E4E1;
}

/* ----- Modals ----- */
.modal-overlay {
    background: rgba(22,54,54,.52);
    backdrop-filter: blur(3px);
}

.modal-card {
    border: 1px solid #DCE5E0;
    border-radius: 18px;
    box-shadow: 0 28px 80px rgba(22,54,54,.22);
}

.modal-header {
    padding-bottom: 13px;
    border-bottom: 1px solid #EEF5F1;
}

.close-btn {
    background: #F8FAF8;
    color: #3F5C56;
    border: 1px solid #DCE5E0;
}

.close-btn:hover {
    background: #F8FAF8;
    color: #173B39;
}

/* ----- Student / Agency profile visuals ----- */
.student-profile-cell img,
.profile-button img,
.profile-summary img,
.student-welcome-profile img {
    border-color: #DDEAE4;
    box-shadow: 0 0 0 2px #FFFFFF;
}

.student-action-grid a,
.quick-access-card {
    border-color: #DCE5E0;
    border-radius: 13px;
}

.student-action-grid a:hover,
.quick-access-card:hover {
    border-color: #AFC9BE;
    background: #EEF5F1;
}

/* ----- Login polish: same content, more premium presentation ----- */
.login-body {
    background:
        radial-gradient(circle at 18% 18%, rgba(76,148,144,.14), transparent 30%),
        radial-gradient(circle at 82% 86%, rgba(15,76,76,.10), transparent 28%),
        linear-gradient(135deg, #F8FAF8 0%, #EEF5F1 48%, #F8FAF8 100%);
}

.login-card {
    width: min(420px, 100%);
    padding: 38px;
    border: 1px solid rgba(137,169,154,.28);
    border-radius: 20px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 24px 70px rgba(22,54,54,.12);
}

.login-logo {
    width: 76px;
    height: 76px;
    /* Shadow removed with the white plate: a drop shadow on a transparent
       PNG traces the square bounding box, not the seal. */
    box-shadow: none;
}

.login-card h1,
.login-card h2 {
    color: #173B39;
    font-weight: 700;
    letter-spacing: -.03em;
}

.login-submit,
.login-card button[type="submit"] {
    min-height: 46px;
    background: #0B4F4A;
    border-radius: 10px;
    box-shadow: 0 7px 18px rgba(15,76,76,.18);
}

.login-submit:hover,
.login-card button[type="submit"]:hover {
    background: #073C39;
}

/* ----- Scrollbar (desktop browsers that support it) ----- */
@supports selector(::-webkit-scrollbar) {
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: #DCE5E0; border: 3px solid transparent; background-clip: content-box; border-radius: 999px; }
    *::-webkit-scrollbar-thumb:hover { background: #89A99A; border: 3px solid transparent; background-clip: content-box; }
}

/* ----- Preserve mobile behavior from the responsive build ----- */
@media (max-width: 900px) {
    body:not(.login-body) .layout aside,
    body:not(.login-body) .layout .sidebar,
    body:not(.login-body) .layout aside.collapsed,
    body:not(.login-body) .layout .sidebar.collapsed {
        background: var(--sidebar-bg) !important;
    }

    .page-header {
        padding-bottom: 14px;
    }

    .system-overview,
    .dashboard-content .dashboard-welcome {
        border-radius: 17px;
    }
}

@media (max-width: 640px) {
    .login-card {
        padding: 28px 20px;
        border-radius: 17px;
    }

    .panel,
    .card,
    .settings-card,
    .stat-card,
    .student-welcome-card {
        border-radius: 14px;
    }

    .page-header {
        margin-bottom: 16px;
    }

    .page-header h1 {
        font-size: 23px;
    }
}

/* =====================================================================
   CRIMTRACK — PROFESSIONAL GREEN ENTERPRISE THEME
   Visual-only upgrade. Existing PHP/JS/content/workflows are unchanged.
   Headings: Manrope | UI/body: Inter
   ===================================================================== */
/* Removed an @import placed after other rules; browsers never applied it. (style.css) */

:root {
    --primary: #0B4F4A;
    --accent: #2F7770;
    --primary-dark: #073C39;
    --primary-strong: #073C39;
    --light: #DDEAE4;
    --soft: #EEF5F1;
    --bg: #F8FAF8;
    --white: #FFFFFF;
    --text: #173B39;
    --muted: #617572;
    --line: #DCE5E0;
    --line-strong: #DCE5E0;
    --sidebar-bg: #073C39;
    --sidebar-deep: #072928;
    --sidebar-text: #EEF5F1;
    --sidebar-muted: #A8C3B5;
    --surface-soft: #F8FAF8;
    --shadow: 0 8px 24px rgba(22,54,54,.055);
    --shadow-hover: 0 14px 34px rgba(22,54,54,.085);
}

html, body {
    background: var(--bg);
}

body,
input,
select,
textarea,
button {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

h1, h2, h3,
h4,
.sidebar-brand h2,
.card strong,
.stat-card strong,
.settings-title h2 {
    font-family: "Manrope", "Inter", sans-serif !important;
    letter-spacing: -.025em;
}

body:not(.login-body) main {
    background:
        radial-gradient(circle at 88% 3%, rgba(76,148,144,.045), transparent 22rem),
        #F8FAF8;
}

/* ----- Premium sidebar ----- */
body:not(.login-body) aside,
body:not(.login-body) .sidebar {
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-deep) 100%) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    box-shadow: 10px 0 30px rgba(7,41,40,.10) !important;
    color: var(--sidebar-text) !important;
}

.sidebar-brand {
    padding: 8px 8px 18px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.sidebar-brand img {
    width: 44px !important;
    height: 44px !important;
    /* Was a 78%-white ring plus drop shadow — the most specific of the three
       rules that boxed the logo in. The seal reads better unframed. */
    border: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    box-shadow: none !important;
}

.sidebar-brand h2,
body:not(.login-body) aside h2 {
    color: #FFFFFF !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

.sidebar-brand p,
body:not(.login-body) aside > p {
    color: var(--sidebar-muted) !important;
}

.side-nav {
    gap: 4px !important;
}

.side-nav a {
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color: #DDEAE4 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.side-nav a .material-icons-outlined {
    color: #AFC9BE !important;
    font-size: 20px !important;
}

.side-nav a:hover {
    color: #FFFFFF !important;
    background: rgba(255,255,255,.075) !important;
    transform: none !important;
}

.side-nav a.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #2F7770, #0B4F4A) !important;
    box-shadow: 0 8px 20px rgba(4,18,15,.14) !important;
}

.side-nav a.active .material-icons-outlined,
.side-nav a:hover .material-icons-outlined {
    color: #FFFFFF !important;
}

.sidebar-filter {
    margin-top: 14px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-filter label {
    color: #AFC9BE !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sidebar-filter select {
    color: #FFFFFF !important;
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
}

.side-nav .logout {
    color: #F5E4E1 !important;
    background: rgba(212,128,121,.10) !important;
    border: 1px solid rgba(212,128,121,.14);
}

.side-nav .logout:hover {
    color: #FFFFFF !important;
    background: rgba(212,128,121,.18) !important;
}

/* ----- Header / global tools ----- */
.page-header {
    min-height: 66px;
    padding: 0 0 18px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #EEF5F1;
}

.page-header h1 {
    color: #173B39 !important;
    font-size: clamp(24px, 2.15vw, 30px) !important;
    font-weight: 800 !important;
    line-height: 1.15;
}

.page-header p {
    color: #617572 !important;
    font-size: 13px;
}

.menu-btn {
    background: #FFFFFF !important;
    color: #26433D !important;
    border: 1px solid #DCE5E0 !important;
    box-shadow: 0 4px 12px rgba(22,54,54,.04) !important;
    border-radius: 10px !important;
}

.menu-btn:hover {
    color: #0B4F4A !important;
    border-color: #AFC9BE !important;
    background: #EEF5F1 !important;
}

.global-search-wrap,
.search-box {
    background: #FFFFFF !important;
    border: 1px solid #DCE5E0 !important;
    box-shadow: 0 3px 12px rgba(22,54,54,.035) !important;
    border-radius: 10px !important;
}

.global-search-wrap:focus-within,
.search-box:focus-within {
    border-color: #AFC9BE !important;
    box-shadow: 0 0 0 3px rgba(23,107,104,.09) !important;
}

.header-icon-btn,
.icon-btn,
.profile-button,
.profile-box {
    background: #FFFFFF !important;
    border: 1px solid #DCE5E0 !important;
    box-shadow: 0 3px 12px rgba(22,54,54,.035) !important;
}

.header-icon-btn:hover,
.icon-btn:hover,
.profile-button:hover {
    background: #F8FAF8 !important;
    border-color: #DCE5E0 !important;
    transform: none !important;
}

.notification-dot {
    background: #2F7770 !important;
    border: 2px solid #FFFFFF;
}

.header-dropdown,
.profile-menu,
.notification-menu {
    border: 1px solid #DCE5E0 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 50px rgba(22,54,54,.14) !important;
    background: #FFFFFF !important;
}

/* ----- Cards / panels ----- */
.panel,
.card,
.settings-card,
.stat-card,
.student-welcome-card,
.student-hero,
.camera-card {
    background: #FFFFFF !important;
    border: 1px solid #EEF5F1 !important;
    border-radius: 14px !important;
    box-shadow: var(--shadow) !important;
}

.card:hover,
.stat-card:hover,
.settings-card:hover {
    box-shadow: var(--shadow-hover) !important;
    transform: translateY(-1px);
}

.panel {
    padding: 20px !important;
}

.panel h2,
.section-title-row h2,
.settings-title h2 {
    color: #173B39 !important;
    font-size: 16px !important;
    font-weight: 750 !important;
}

.card h3,
.stat-card p,
.small-label,
.muted {
    color: #617572 !important;
}

.card strong,
.stat-card strong {
    color: #173B39 !important;
    font-weight: 800 !important;
}

/* ----- Dashboard overview ----- */
.system-overview,
.dashboard-content .dashboard-welcome {
    background: linear-gradient(135deg, #073C39 0%, #073C39 100%) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 34px rgba(10,56,56,.16) !important;
}

.system-overview h2,
.system-overview strong,
.dashboard-content .dashboard-welcome h1,
.dashboard-content .dashboard-welcome h2 {
    color: #FFFFFF !important;
}

.system-overview p,
.system-overview small,
.dashboard-content .dashboard-welcome p {
    color: #DDEAE4 !important;
}

.eyebrow {
    color: #A8C3B5 !important;
}

.quick-access-card {
    background: rgba(255,255,255,.075) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: none !important;
}

.quick-access-card:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.18) !important;
}

.quick-access-card strong { color: #FFFFFF !important; }
.quick-access-card small { color: #AFC9BE !important; }
.quick-access-card > .material-icons-outlined {
    background: rgba(76,148,144,.18) !important;
    color: #A8C3B5 !important;
}

/* ----- Inputs / forms ----- */
label {
    color: #26433D !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}

input,
select,
textarea {
    background: #FFFFFF !important;
    border: 1px solid #DDEAE4 !important;
    border-radius: 9px !important;
    color: #173B39 !important;
    box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #89A99A !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #4C9490 !important;
    box-shadow: 0 0 0 3px rgba(76,148,144,.10) !important;
}

/* ----- Buttons ----- */
button,
.btn,
.create-btn,
.btn-approve,
.btn-eval,
.approve-btn {
    border-radius: 9px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    box-shadow: 0 5px 14px rgba(15,76,76,.12) !important;
}

button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.password-toggle):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle),
.btn:not(.secondary-btn):not(.action-danger):not(.btn-decline) {
    background: #0B4F4A !important;
}

button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.password-toggle):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle):hover,
.btn:not(.secondary-btn):not(.action-danger):not(.btn-decline):hover {
    background: #073C39 !important;
}

.secondary-btn {
    color: #2F7770 !important;
    background: #EEF5F1 !important;
    border: 1px solid #DDEAE4 !important;
    box-shadow: none !important;
}

.secondary-btn:hover {
    color: #073C39 !important;
    background: #DDEAE4 !important;
}

/* ----- Tables ----- */
.table-wrap {
    border: 1px solid #EEF5F1;
    border-radius: 12px;
    background: #FFFFFF;
}

table {
    background: #FFFFFF !important;
    border-radius: 12px !important;
}

th {
    background: #F8FAF8 !important;
    color: #3F5C56 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .045em;
    border-bottom: 1px solid #DCE5E0 !important;
}

td {
    color: #26433D !important;
    font-size: 13px !important;
    border-bottom: 1px solid #EEF5F1 !important;
}

tbody tr:last-child td { border-bottom: 0 !important; }
tr:hover td { background: #EEF5F1 !important; }

.table-link {
    color: #0B4F4A !important;
}

/* ----- Status chips / badges ----- */
.badge,
.status-badge,
.status-chip,
.status.approved,
.status.pending {
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.status-badge.success,
.status.approved {
    background: #E1EBE0 !important;
    color: #2F5239 !important;
}

.status-badge.warning,
.status.pending {
    background: #F7ECD9 !important;
    color: #8A5A22 !important;
}

.status-badge.info {
    background: #E3EEF3 !important;
    color: #2F5A70 !important;
}

/* ----- Progress / analytics ----- */
.progress-bar {
    background: #EEF5F1 !important;
}

.progress-fill {
    background: linear-gradient(90deg, #0B4F4A, #4C9490) !important;
}

canvas {
    filter: saturate(.92);
}

/* ----- Modal polish ----- */
.modal-overlay {
    background: rgba(22,54,54,.48) !important;
    backdrop-filter: blur(3px);
}

.modal-card {
    border: 1px solid #DCE5E0 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 52px rgba(22,54,54,.16) !important;
}

.modal-header {
    padding-bottom: 14px;
    border-bottom: 1px solid #EEF5F1;
}

/* ----- Profile / student visuals ----- */
.profile-button img,
.profile-box img,
.student-profile-cell img,
.student-welcome-profile img {
    border: 2px solid #DDEAE4 !important;
    box-shadow: 0 0 0 2px #FFFFFF !important;
}

.student-action-grid a {
    background: #FFFFFF !important;
    border: 1px solid #DCE5E0 !important;
    box-shadow: 0 3px 10px rgba(22,54,54,.035);
}

.student-action-grid a:hover {
    background: #EEF5F1 !important;
    border-color: #DDEAE4 !important;
}

.student-action-grid .material-icons-outlined {
    color: #0B4F4A !important;
}

/* ----- Login: polished enterprise sign-in ----- */
.login-body {
    background:
        radial-gradient(circle at 14% 18%, rgba(76,148,144,.14), transparent 28rem),
        radial-gradient(circle at 84% 80%, rgba(15,76,76,.08), transparent 24rem),
        #F8FAF8 !important;
}

.login-card {
    width: min(420px, 100%) !important;
    padding: 38px !important;
    background: #FFFFFF !important;
    border: 1px solid #DCE5E0 !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 70px rgba(22,54,54,.11) !important;
}

.login-card h1,
.login-card h2 {
    font-family: "Manrope", sans-serif !important;
    color: #173B39 !important;
    font-weight: 800 !important;
}

.login-card > p {
    color: #617572 !important;
}

.login-logo {
    box-shadow: none !important;
    background: transparent !important;
    object-fit: contain !important;
}

.login-submit,
.login-card button[type="submit"] {
    min-height: 46px !important;
    border-radius: 9px !important;
    background: #0B4F4A !important;
    box-shadow: 0 8px 18px rgba(15,76,76,.18) !important;
}

.login-submit:hover,
.login-card button[type="submit"]:hover {
    background: #073C39 !important;
}

/* ----- Responsive preservation ----- */
@media (max-width: 900px) {
    body:not(.login-body) .layout aside,
    body:not(.login-body) .layout .sidebar,
    body:not(.login-body) .layout aside.collapsed,
    body:not(.login-body) .layout .sidebar.collapsed {
        background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-deep)) !important;
    }

    .page-header {
        border-bottom: 0;
    }

    .panel,
    .card,
    .settings-card,
    .stat-card,
    .student-welcome-card {
        border-radius: 13px !important;
    }
}

@media (max-width: 640px) {
    .login-card {
        padding: 28px 20px !important;
        border-radius: 14px !important;
    }

    .panel {
        padding: 15px !important;
    }
}

/* =====================================================================
   2026-08-17 UI consistency upgrade
   Keeps existing routes/data flows intact and resolves late theme overrides.
   ===================================================================== */

/* Profile: requested white workspace in light mode only. */
:root:not([data-theme="dark"]) body.profile-page,
:root:not([data-theme="dark"]) body.profile-page main {
    background: #FFFFFF !important;
}

/* Header variants for pages that already provide their own local filters. */
.header-tools.header-tools-no-search {
    grid-template-columns: auto auto;
    width: auto;
}

/* Progressive-enhancement file input used throughout Profile/Documents/Agency. */
.file-upload-control {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin-top: 7px;
}
.file-upload-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
}
.file-upload-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    min-height: 42px;
    padding: 9px 14px !important;
    white-space: nowrap;
}
.file-upload-button .material-icons-outlined { font-size: 19px; }
.file-upload-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
}
.file-upload-control.has-file .file-upload-name {
    color: var(--text);
    font-weight: 600;
}

/* Admin dashboard: attendance log cards + organized intern dropdown. */
.dashboard-content .dashboard-log-panel .panel-heading {
    align-items: flex-end;
}
.dashboard-intern-filter {
    display: grid;
    grid-template-columns: minmax(160px, 220px) auto;
    gap: 7px 8px;
    align-items: end;
}
.dashboard-intern-filter label {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--muted) !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .045em;
}
.dashboard-intern-filter select {
    min-height: 40px;
    margin: 0;
}
.dashboard-intern-filter .secondary-btn {
    min-height: 40px;
    padding-inline: 12px;
}
.dashboard-log-list {
    display: grid;
    gap: 12px;
    max-height: 620px;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.attendance-log-card {
    display: grid;
    gap: 13px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--white);
    box-shadow: 0 4px 14px rgba(22,54,54,.035);
}
.attendance-log-card[hidden] { display: none !important; }
.attendance-log-head,
.attendance-log-person,
.attendance-log-status,
.attendance-photo-card-link,
.attendance-photo-missing {
    display: flex;
    align-items: center;
}
.attendance-log-head {
    justify-content: space-between;
    gap: 12px;
}
.attendance-log-person { gap: 10px; min-width: 0; }
.attendance-log-person > div { min-width: 0; }
.attendance-log-person strong,
.attendance-log-person span { display: block; }
.attendance-log-person strong {
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}
.attendance-log-person > div > span {
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}
.attendance-log-avatar {
    display: grid !important;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--soft);
    color: var(--accent) !important;
    font-weight: 800;
}
.attendance-log-head time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
}
.attendance-log-head time .material-icons-outlined { font-size: 16px; }
.attendance-log-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
.attendance-log-times > div {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--soft) 34%, var(--white));
}
.attendance-log-times .material-icons-outlined {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--accent);
    font-size: 19px;
}
.attendance-log-times small { color: var(--muted); font-size: 10px; }
.attendance-log-times strong { color: var(--text); font-size: 12px; }
.attendance-log-status { flex-wrap: wrap; gap: 7px; }
.attendance-log-status .status-badge { gap: 4px; }
.attendance-log-status .material-icons-outlined { font-size: 14px; }
.attendance-log-footer { padding-top: 1px; }
.attendance-photo-card-link {
    gap: 9px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}
.attendance-photo-card-link img {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: 9px;
}
.attendance-photo-card-link > span { display: inline-flex; align-items: center; gap: 4px; }
.attendance-photo-card-link .material-icons-outlined { font-size: 15px; }
.attendance-photo-missing { gap: 6px; color: var(--muted); font-size: 11px; }
.attendance-photo-missing .material-icons-outlined { font-size: 17px; }
.dashboard-log-empty { border: 1px dashed var(--line); border-radius: 12px; }

/* Agency dashboard alignment with the Admin dashboard design language. */
.agency-dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}
.agency-dashboard-heading h2 { margin: 0; font-size: 20px; }
.agency-dashboard-heading p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.agency-kpis { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; }

/* Student dashboard: use the same hierarchy/cards as Admin without sharing permissions. */
.student-admin-style-dashboard .student-welcome-card {
    margin-bottom: 22px;
}
.student-dashboard-stats { margin-bottom: 22px !important; }
.student-dashboard-stats .student-metric-caption { margin-top: 20px; }
.student-dashboard-main-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr) !important;
    gap: 22px;
    margin-bottom: 22px;
}
.student-admin-style-dashboard .dashboard-panel {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 7px 18px rgba(38,67,61,.06);
}
.student-admin-style-dashboard .panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}
.student-admin-style-dashboard .panel-heading h2 { margin: 0; color: var(--text); font-size: 17px; }
.student-admin-style-dashboard .panel-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.student-progress-body { padding: 22px 20px; }
.student-progress-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 15px;
}
.student-progress-summary span {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: color-mix(in srgb, var(--soft) 30%, var(--white));
    color: var(--muted);
    font-size: 11px;
}
.student-progress-summary b { display: block; color: var(--text); font-size: 14px; }
.student-dashboard-actions {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 10px 16px 16px;
}
.student-dashboard-actions a {
    display: flex;
    align-items: center;
    gap: 12px;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 4px !important;
}
.student-dashboard-actions a:last-child { border-bottom: 0 !important; }
.student-dashboard-actions a > span:last-child { display: grid; }
.student-dashboard-actions small { color: var(--muted); font-size: 11px; font-weight: 500; }
.student-recent-panel { margin-bottom: 0; }
.student-recent-list { display: grid; }
.student-recent-log {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(190px, .65fr) minmax(220px, .8fr);
    align-items: center;
    gap: 16px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--line);
}
.student-recent-log:last-child { border-bottom: 0; }
.student-recent-date { display: flex; align-items: center; gap: 10px; min-width: 0; }
.student-recent-date > .material-icons-outlined {
    display: grid;
    place-items: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--soft);
    color: var(--accent);
}
.student-recent-date strong,
.student-recent-date small { display: block; }
.student-recent-date small {
    margin-top: 2px;
    overflow: hidden;
    color: var(--muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.student-recent-times { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.student-recent-times span { display: grid; }
.student-recent-times small { color: var(--muted); font-size: 10px; }
.student-recent-times strong { color: var(--text); font-size: 12px; }
.student-recent-status { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }

/* Final dark-mode compatibility layer. It intentionally comes last because
   earlier legacy/professional-theme rules use hard-coded light colors. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] main,
:root[data-theme="dark"] .dashboard-content,
:root[data-theme="dark"] .agency-dashboard-content {
    background: var(--bg) !important;
    color: var(--text) !important;
}
:root[data-theme="dark"] .page-header { border-color: var(--line) !important; }
:root[data-theme="dark"] .page-header h1,
:root[data-theme="dark"] .panel h2,
:root[data-theme="dark"] .section-title-row h2,
:root[data-theme="dark"] .settings-title h2,
:root[data-theme="dark"] .card strong,
:root[data-theme="dark"] .stat-card strong,
:root[data-theme="dark"] .agency-dashboard-heading h2 {
    color: var(--text) !important;
}
:root[data-theme="dark"] .page-header p,
:root[data-theme="dark"] .card h3,
:root[data-theme="dark"] .stat-card p,
:root[data-theme="dark"] .small-label,
:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .agency-dashboard-heading p {
    color: var(--muted) !important;
}
:root[data-theme="dark"] .menu-btn,
:root[data-theme="dark"] .global-search-wrap,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .header-icon-btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .profile-button,
:root[data-theme="dark"] .profile-box,
:root[data-theme="dark"] .header-dropdown,
:root[data-theme="dark"] .profile-menu,
:root[data-theme="dark"] .notification-menu,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .settings-card,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .student-welcome-card,
:root[data-theme="dark"] .student-hero,
:root[data-theme="dark"] .camera-card,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .dashboard-content .dashboard-panel,
:root[data-theme="dark"] .student-admin-style-dashboard .dashboard-panel,
:root[data-theme="dark"] .attendance-log-card,
:root[data-theme="dark"] .brand-field {
    background: var(--white) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}
:root[data-theme="dark"] .menu-btn,
:root[data-theme="dark"] .header-icon-btn,
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .profile-button,
:root[data-theme="dark"] .profile-box {
    color: var(--text) !important;
    box-shadow: 0 3px 12px rgba(4,18,15,.16) !important;
}
:root[data-theme="dark"] .menu-btn:hover,
:root[data-theme="dark"] .header-icon-btn:hover,
:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .profile-button:hover {
    background: #073C39 !important;
    border-color: #3F5C56 !important;
}
:root[data-theme="dark"] label { color: #DCE5E0 !important; }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
    background: #071F1D !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #617572 !important; }
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] table {
    background: var(--white) !important;
    border-color: var(--line) !important;
}
:root[data-theme="dark"] th {
    background: #073C39 !important;
    color: #DCE5E0 !important;
    border-color: var(--line) !important;
}
:root[data-theme="dark"] td {
    background: var(--white) !important;
    color: #DCE5E0 !important;
    border-color: var(--line) !important;
}
:root[data-theme="dark"] tr:hover td { background: #073C39 !important; }
:root[data-theme="dark"] .secondary-btn {
    background: #073C39 !important;
    color: #AFC9BE !important;
    border-color: var(--line) !important;
}
:root[data-theme="dark"] .secondary-btn:hover { background: #173B39 !important; }
:root[data-theme="dark"] .theme-setting-row,
:root[data-theme="dark"] .permission-option,
:root[data-theme="dark"] .verification-note,
:root[data-theme="dark"] .attendance-log-times > div,
:root[data-theme="dark"] .student-progress-summary span {
    background: #073C39 !important;
    border-color: var(--line) !important;
}
:root[data-theme="dark"] .modal-header { border-color: var(--line) !important; }
:root[data-theme="dark"] .student-action-grid a {
    background: var(--white) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}
:root[data-theme="dark"] .student-action-grid a:hover { background: #073C39 !important; }
:root[data-theme="dark"] .profile-button img,
:root[data-theme="dark"] .profile-box img,
:root[data-theme="dark"] .student-profile-cell img,
:root[data-theme="dark"] .student-welcome-profile img {
    box-shadow: 0 0 0 2px var(--white) !important;
}
:root[data-theme="dark"] .dashboard-content .analytics-total,
:root[data-theme="dark"] .dashboard-content .quick-action {
    background: var(--white) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}
:root[data-theme="dark"] .dashboard-content .quick-action:hover { background: #073C39 !important; }
:root[data-theme="dark"] .file-upload-button { background: #0B4F4A !important; color: #FFFFFF !important; }
:root[data-theme="dark"] .file-upload-name { color: var(--muted) !important; }
:root[data-theme="dark"] .file-upload-control.has-file .file-upload-name { color: var(--text) !important; }
:root[data-theme="dark"] .login-body {
    background: radial-gradient(circle at 14% 18%, rgba(76,148,144,.08), transparent 28rem), #04120F !important;
}
:root[data-theme="dark"] .login-card { background: var(--white) !important; border-color: var(--line) !important; }
:root[data-theme="dark"] .login-card h1,
:root[data-theme="dark"] .login-card h2 { color: var(--text) !important; }
:root[data-theme="dark"] .login-card > p { color: var(--muted) !important; }

@media (max-width: 900px) {
    .student-dashboard-main-grid { grid-template-columns: 1fr !important; }
    .student-recent-log { grid-template-columns: 1fr; }
    .student-recent-status { justify-content: flex-start; }
}
@media (max-width: 640px) {
    .file-upload-control { grid-template-columns: 1fr; }
    .file-upload-button { width: 100% !important; }
    .dashboard-content .dashboard-log-panel .panel-heading { align-items: stretch; }
    .dashboard-intern-filter { grid-template-columns: 1fr; width: 100%; }
    .dashboard-intern-filter label { grid-column: auto; }
    .dashboard-intern-filter .secondary-btn { width: 100%; }
    .attendance-log-head { align-items: flex-start; flex-direction: column; }
    .attendance-log-times { grid-template-columns: 1fr; }
    .student-progress-summary { grid-template-columns: 1fr; }
    .student-recent-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.agency-theme-preview { display:flex; align-items:center; gap:10px; color:var(--text); }
.agency-theme-preview > span:first-child { width:28px; height:28px; border-radius:8px; background:var(--agency-setting-color); border:1px solid var(--line); }
.file-upload-button {
    background: #0B4F4A;
    color: #FFFFFF;
    border: 1px solid #0B4F4A;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    box-shadow: 0 5px 14px rgba(15,76,76,.12);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.file-upload-button:hover,
.file-upload-button:focus-visible {
    background: #073C39;
    border-color: #073C39;
    outline: none;
    box-shadow: 0 0 0 3px rgba(76,148,144,.13);
}

/* ============================================================
   Feature integration upgrade — 2026-08-17
   Reverse geolocation, secure student detail views, exports,
   report attachments, login labels/footer, analytics consistency.
   ============================================================ */
.login-body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 18px 18px;
}
.login-field-label {
    display: block;
    margin: 0 0 7px;
    color: var(--text, #173B39);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}
.login-card form > input,
.login-card .password-field { margin-bottom: 16px; }
.login-footer {
    width: 100%;
    margin-top: 18px;
    color: #617572;
    font-size: 12px;
    text-align: center;
}
:root[data-theme="dark"] .login-field-label { color: var(--text) !important; }
:root[data-theme="dark"] .login-footer { color: var(--muted) !important; }

.profile-summary-card {
    padding: 0 !important;
    overflow: hidden;
    background: #FFFFFF !important;
}
.profile-identity-banner {
    padding: 28px 22px 24px;
    background: linear-gradient(145deg, #073C39, #0B4F4A 52%, #2F7770);
    color: #FFFFFF;
    text-align: center;
}
.profile-identity-banner .profile-avatar-large {
    margin-top: 0;
    border-color: rgba(255,255,255,.96);
    box-shadow: 0 0 0 1px rgba(255,255,255,.45), 0 16px 34px rgba(10,56,56,.3);
}
.profile-identity-banner h2,
.profile-identity-banner .muted {
    color: #FFFFFF !important;
}
.profile-identity-banner .muted { opacity: .82; }
.profile-role-badge {
    margin-top: 12px;
    background: rgba(255,255,255,.16) !important;
    border: 1px solid rgba(255,255,255,.28);
    color: #FFFFFF !important;
}
.profile-summary-card .profile-feature-list {
    margin: 0;
    padding: 20px;
    background: var(--white, #FFFFFF);
}
:root[data-theme="dark"] .profile-summary-card { background: var(--white) !important; }
:root[data-theme="dark"] .profile-summary-card .profile-feature-list { background: var(--white) !important; }

.student-name-link {
    color: var(--text, #173B39);
    text-decoration: none;
    font-weight: 700;
}
.student-name-link:hover { color: #0B4F4A; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .student-name-link { color: var(--text) !important; }
:root[data-theme="dark"] .student-name-link:hover { color: #A8C3B5 !important; }

.reverse-location-note {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start !important;
    gap: 12px !important;
}
.reverse-location-note > .material-icons-outlined { margin-top: 3px; }
.location-parts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    margin-top: 10px;
}
.location-parts span {
    display: grid;
    gap: 1px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: color-mix(in srgb, var(--soft) 36%, var(--white));
    color: var(--text);
    font-size: 11px;
}
.location-parts b { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .045em; }
.location-attribution { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }
.location-retry { width: auto !important; white-space: nowrap; }
:root[data-theme="dark"] .location-parts span { background: #073C39 !important; }

.optional-label {
    margin-left: 6px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.file-type-icon { font-size: 14px !important; vertical-align: -2px; margin-right: 3px; }

.analytics-summary-expanded {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.analytics-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.empty-chart-note {
    margin: -8px 0 4px;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
}

.student-detail-topbar {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.student-detail-topbar .btn,
.dashboard-export-btn {
    width: auto !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}
.student-detail-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px !important;
    background: linear-gradient(135deg, color-mix(in srgb, #0B4F4A 8%, var(--white)), var(--white)) !important;
}
.student-detail-hero > img {
    width: 104px;
    height: 104px;
    flex: 0 0 104px;
    border-radius: 24px;
    object-fit: cover;
    border: 4px solid var(--white);
    box-shadow: 0 0 0 1px var(--line), 0 12px 28px rgba(22,54,54,.12);
}
.student-detail-hero h2 { margin: 4px 0 4px; font-size: clamp(24px, 3vw, 34px); }
.student-detail-hero p { margin: 0; color: var(--muted); }
.student-detail-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.student-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.detail-list { display: grid; gap: 0; }
.detail-list > div {
    display: grid;
    grid-template-columns: minmax(120px, .65fr) minmax(0, 1fr);
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.detail-list > div:last-child { border-bottom: 0; }
.detail-list span { color: var(--muted); font-size: 12px; }
.detail-list strong { color: var(--text); font-size: 13px; overflow-wrap: anywhere; }
.profile-bio-box {
    margin-top: 15px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--soft);
}
.profile-bio-box span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.profile-bio-box p { margin: 6px 0 0; color: var(--text); font-size: 13px; }
.student-hours-summary {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.student-hours-summary > div:first-child { display: flex; align-items: baseline; gap: 8px; }
.student-hours-summary strong { font-size: 28px; color: var(--text); }
.student-hours-summary span,
.student-hours-summary small { color: var(--muted); font-size: 11px; }
.progress-track {
    height: 9px;
    margin: 10px 0 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--soft);
}
.progress-track span { display: block; height: 100%; border-radius: inherit; background: #2F7770; }
:root[data-theme="dark"] .student-detail-hero { background: linear-gradient(135deg, rgba(15,76,76,.17), var(--white)) !important; }
:root[data-theme="dark"] .profile-bio-box { background: #073C39 !important; }

@media (max-width: 1100px) {
    .analytics-summary-expanded { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
    .analytics-summary-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .analytics-chart-grid,
    .student-detail-grid { grid-template-columns: 1fr; }
    .reverse-location-note { grid-template-columns: auto minmax(0, 1fr); }
    .location-retry { grid-column: 2; justify-self: start; }
}
@media (max-width: 560px) {
    .analytics-summary-expanded { grid-template-columns: 1fr !important; }
    .student-detail-hero { align-items: flex-start; flex-direction: column; }
    .student-detail-hero > img { width: 88px; height: 88px; flex-basis: 88px; border-radius: 20px; }
    .detail-list > div { grid-template-columns: 1fr; gap: 3px; }
    .location-parts { grid-template-columns: 1fr; }
    .login-footer { margin-top: 14px; }
}

/* 2026-08-19: role-safe student monitoring + bulk routing controls */
.profile-summary-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.profile-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border, #DCE5E0);
  border-radius: 14px;
  background: var(--surface, #FFFFFF);
  min-width: 0;
}
.profile-summary-card > .material-icons-outlined { font-size: 24px; }
.profile-summary-card small { display: block; opacity: .72; margin-bottom: 2px; }
.profile-summary-card strong { font-size: 1.35rem; line-height: 1; }
.bulk-action-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0 16px;
}
.bulk-action-bar button { display: inline-flex; align-items: center; gap: 7px; }
table input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.monitoring-count {
  display: inline-flex;
  min-width: 36px;
  justify-content: center;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-weight: 700;
  background: rgba(22,54,54,.06);
}
@media (max-width: 720px) {
  .profile-summary-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulk-action-bar { align-items: stretch; }
  .bulk-action-bar button { width: 100%; justify-content: center; }
}

.attendance-log-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* =====================================================================
   Deep Teal + Soft Sage Minimalism — design tokens
   Visual-only. Additive aliases for the palette already applied
   throughout this stylesheet; nothing above depends on these names,
   so they are safe to use going forward without touching existing rules.
   ===================================================================== */
:root {
    --primary: #0B4F4A;
    --primary-dark: #073C39;
    --secondary: #2F7770;
    --sage: #A8C3B5;
    --sage-light: #DDEAE4;
    --sage-lightest: #EEF5F1;
    --background: #F8FAF8;
    --surface: #FFFFFF;
    --text: #173B39;
    --text-muted: #617572;
    --border: #DCE5E0;
    --success: #2F5239;
    --success-bg: #E1EBE0;
    --warning: #8A5A22;
    --warning-bg: #F7ECD9;
    --danger: #8B3A34;
    --danger-bg: #FBF1F0;
    --info: #2F5A70;
    --info-bg: #E3EEF3;
}

/* ===== Upgrade v4: one password eye =====
   Microsoft Edge (and older IE) draws its own reveal button inside every
   password field, next to CrimTrack's eye, so users saw two icons. The
   system toggle stays; the browser's duplicate is hidden. */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* =====================================================================
   My Profile banner (was duplicated in admin.css, agency.css, intern.css)
   ===================================================================== */
body.profile-page .profile-identity-banner {
    background: #FFFFFF !important;
    color: #173B39 !important;
    border-bottom: 1px solid var(--line, #DCE5E0);
}
body.profile-page .profile-identity-banner h2,
body.profile-page .profile-identity-banner .muted { color: #173B39 !important; }
body.profile-page .profile-identity-banner .muted { opacity: 1; color: #617572 !important; }
body.profile-page .profile-identity-banner .profile-avatar-large {
    border-color: #FFFFFF !important;
    box-shadow: 0 0 0 1px var(--line, #DCE5E0), 0 12px 28px rgba(22,54,54,.12) !important;
}
body.profile-page .profile-role-badge {
    background: var(--soft, #EEF5F1) !important;
    border-color: var(--line, #DDEAE4) !important;
    color: var(--primary, #0B4F4A) !important;
}

/* =====================================================================
   Sign-in pages: login, forgot / reset password (formerly login.css)
   ===================================================================== */
/* =========================================================================
   CrimTrack — Premium Login Experience
   Deep Teal + Soft Sage split-screen authentication layout.
   Visual layer only: field names/ids, form action, and auth logic in
   index.php are untouched. Loads after style.css so these rules take
   precedence for the login page's shared classnames (.login-card, etc.).
   ========================================================================= */

.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
        radial-gradient(circle at 14% 12%, rgba(175,201,190,.35), transparent 40%),
        radial-gradient(circle at 90% 88%, rgba(11,79,74,.10), transparent 38%),
        #F1F6F3;
}

/* ----- Split-screen shell ----- */
.login-shell {
    width: min(1000px, 100%);
    display: flex;
    align-items: stretch;
    background: #FFFFFF;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border, #DCE5E0);
    box-shadow: 0 30px 80px rgba(7,60,57,.16);
}

.login-brand-panel,
.login-form-panel {
    flex: 1 1 0;
    min-width: 0;
}

/* ----- Left branding panel ----- */
.login-brand-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: linear-gradient(155deg, var(--primary-dark, #073C39) 0%, var(--primary, #0B4F4A) 55%, var(--primary-medium, #2F7770) 100%);
    overflow: hidden;
}

.login-brand-shape {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.login-brand-shape-a {
    width: 340px;
    height: 340px;
    right: -120px;
    top: -110px;
    background: radial-gradient(circle, rgba(175,201,190,.22), transparent 68%);
}

.login-brand-shape-b {
    width: 280px;
    height: 280px;
    left: -100px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(221,234,228,.16), transparent 68%);
}

.login-brand-grid {
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image:
        linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}

.login-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 360px;
    text-align: center;
    color: #FFFFFF;
}

.login-brand-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    /* Transparent PNG on the dark login panel: the white disc and padding only
       added a visible plate around an already round seal. */
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0 auto 22px;
    display: block;
    box-shadow: none;
}

.login-brand-name {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #FFFFFF;
}

.login-brand-tagline {
    margin: 0 auto 26px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.6;
}

.login-brand-keywords {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.login-brand-keywords li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.20);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
}

.login-brand-keywords .material-icons-outlined {
    font-size: 16px;
    color: #DDEAE4;
}

/* ----- Right form panel ----- */
.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: #FFFFFF;
}

.login-card {
    width: min(400px, 100%);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}

.login-card-mobile-brand {
    display: none;
}

.login-welcome {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text, #173B39);
}

.login-welcome-sub {
    margin: 0 0 24px;
    color: var(--text-secondary, #617572);
    font-size: 14px;
}

/* ----- Fields ----- */
.login-field-label {
    display: block;
    margin: 0 0 7px;
    color: var(--text, #173B39);
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}

.login-input-wrap {
    position: relative;
    margin: 0 0 16px;
}

.login-input-wrap .login-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--text-muted, #8A9B98);
    pointer-events: none;
}

.login-input-wrap input {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 16px 0 44px;
    border: 1px solid var(--border, #DCE5E0);
    border-radius: 12px;
    background: #FFFFFF;
    color: var(--text, #173B39);
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.login-input-wrap input::placeholder {
    color: var(--text-muted, #8A9B98);
}

.login-input-wrap input:hover {
    border-color: var(--sage, #AFC9BE);
}

.login-input-wrap input:focus {
    outline: none;
    border-color: var(--primary, #0B4F4A);
    box-shadow: 0 0 0 4px rgba(11,79,74,.12);
}

.password-field.login-input-wrap input {
    padding-right: 46px;
}

/* Keep the JS-driven show/hide eye icon (right side) clear of our left icon */
.login-input-wrap .password-visibility-wrap,
.login-input-wrap.password-field .password-visibility-wrap {
    display: block;
}

.forgot-password {
    text-align: right !important;
    font-size: 13px !important;
    margin: 2px 0 22px !important;
}

.forgot-password a {
    color: var(--primary-medium, #2F7770);
    text-decoration: none;
    font-weight: 600;
}

.forgot-password a:hover {
    color: var(--primary, #0B4F4A);
    text-decoration: underline;
}

/* ----- Submit button ----- */
.login-submit-btn,
.login-card button[type="submit"] {
    width: 100%;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    border: 0;
    border-radius: 13px;
    background: var(--primary, #0B4F4A);
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(11,79,74,.22);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.login-submit-btn:hover,
.login-card button[type="submit"]:hover {
    background: var(--primary-medium, #2F7770);
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(11,79,74,.26);
}

.login-submit-btn:active,
.login-card button[type="submit"]:active {
    background: var(--primary-dark, #073C39);
    transform: translateY(0);
}

.login-submit-btn:focus-visible,
.login-card button[type="submit"]:focus-visible {
    outline: 3px solid rgba(47,119,112,.35);
    outline-offset: 2px;
}

.login-submit-btn .material-icons-outlined {
    font-size: 19px;
}

/* Purely visual "signing in" state — does not block or duplicate the
   normal form POST, it only shows briefly while the page navigates. */
.login-submit-btn.is-loading .login-submit-label::after {
    content: "Signing in\2026";
}
.login-submit-btn.is-loading .login-submit-label {
    font-size: 0;
}
.login-submit-btn.is-loading .login-submit-label::after {
    font-size: 15px;
}
.login-submit-btn.is-loading {
    pointer-events: none;
    opacity: .88;
}
.login-submit-btn.is-loading .material-icons-outlined {
    animation: loginSpin 0.9s linear infinite;
}
@keyframes loginSpin {
    to { transform: rotate(360deg); }
}

/* ----- Alerts ----- */
.login-card .alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
    text-align: left;
}

.login-card .alert .material-icons-outlined {
    font-size: 18px;
    line-height: 1.3;
    flex-shrink: 0;
}

.login-card .alert-error {
    background: #FBF1F0;
    color: #A6473F;
    border: 1px solid #F5E4E1;
}

/* ----- Footer ----- */
.login-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    width: 100%;
    color: var(--text-secondary, #617572);
    font-size: 12px;
    text-align: center;
    pointer-events: none;
}

/* =========================================================================
   Responsive behavior
   Desktop 1200px+: full split-screen.
   Tablet 768–1199px: narrower branding column, same split layout.
   Mobile <768px: single column, compact top brand header replaces panel.
   Small mobile <480px: tighter spacing, still no horizontal scroll.
   ========================================================================= */

@media (max-width: 1199px) and (min-width: 768px) {
    .login-brand-panel { flex: 0 0 38%; padding: 40px 26px; }
    .login-form-panel { flex: 1 1 62%; }
    .login-brand-tagline { font-size: 13px; }
    .login-brand-keywords { gap: 8px; }
}

@media (max-width: 767px) {
    .login-body { padding: 0; background: #F1F6F3; align-items: stretch; justify-content: flex-start; }

    .login-shell {
        flex-direction: column;
        width: 100%;
        border-radius: 0;
        border: 0;
        box-shadow: none;
    }

    .login-brand-panel { display: none; }

    .login-card-mobile-brand {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 22px;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border, #DCE5E0);
    }

    .login-card-mobile-brand img {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        object-fit: contain;
        background: var(--sage-soft, #EEF5F1);
        padding: 4px;
        flex-shrink: 0;
    }

    .login-card-mobile-brand strong {
        display: block;
        font-size: 17px;
        color: var(--text, #173B39);
    }

    .login-card-mobile-brand span {
        display: block;
        font-size: 12px;
        color: var(--text-secondary, #617572);
        margin-top: 2px;
    }

    .login-form-panel {
        padding: 32px 24px;
        align-items: flex-start;
    }

    .login-card { width: 100%; max-width: 440px; margin: 0 auto; }

    .login-footer { position: static; margin: 8px 0 24px; }
}

@media (max-width: 479px) {
    .login-form-panel { padding: 24px 18px 84px; }
    .login-welcome { font-size: 24px; }
    .login-welcome-sub { font-size: 13px; margin-bottom: 20px; }
    .login-card-mobile-brand img { width: 40px; height: 40px; }
    .login-card-mobile-brand strong { font-size: 15px; }
    .login-input-wrap input { height: 48px; font-size: 14px; }
    .login-submit-btn, .login-card button[type="submit"] { height: 50px; font-size: 14px; }
}

/* ----- Dark theme: keep the split-screen legible if the site theme toggle is dark ----- */
:root[data-theme="dark"] .login-body { background: #0F2A28; }
:root[data-theme="dark"] .login-shell { background: var(--white); border-color: var(--line); }
:root[data-theme="dark"] .login-form-panel { background: var(--white); }
:root[data-theme="dark"] .login-welcome,
:root[data-theme="dark"] .login-field-label { color: var(--text) !important; }
:root[data-theme="dark"] .login-welcome-sub { color: var(--muted) !important; }
:root[data-theme="dark"] .login-input-wrap input { background: #071F1D; border-color: var(--line); color: var(--text); }
:root[data-theme="dark"] .login-card-mobile-brand { border-color: var(--line); }

/* =====================================================================
   UI layer (formerly crimtrack-ui.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — UI layer
   ---------------------------------------------------------------------
   Presentation only. This file loads AFTER style.css and the role
   stylesheets, and restyles the existing markup (aside / .side-nav /
   .page-header / .panel / table / .status-badge / .btn ...) to the
   reference design direction.

   Nothing here changes behaviour, markup contracts, or data. Every
   selector targets classes the pages already render, so removing this
   one <link> returns the app to its previous appearance.

   Palette and typeface are the project's existing ones (Deep Teal +
   Soft Sage, Poppins) — only their application changes.
   ===================================================================== */

:root {
    /* Surfaces */
    --ct-shell: #0B4F4A;          /* sidebar / primary */
    --ct-shell-deep: #073C39;
    --ct-shell-raised: #14615B;   /* active nav pill */
    --ct-shell-line: rgba(255, 255, 255, .13);
    --ct-shell-text: rgba(255, 255, 255, .74);
    --ct-shell-muted: rgba(214, 233, 226, .58);

    --ct-canvas: #F6F9F7;
    --ct-surface: #FFFFFF;
    --ct-surface-sunken: #F4F8F6;
    --ct-line: #E3EBE7;
    --ct-line-strong: #D3E0DA;

    /* Ink */
    --ct-ink: #12332F;
    --ct-ink-soft: #5E7370;
    --ct-ink-faint: #5D7774;

    /* The legacy --muted token measured 4.42:1 against the sunken surface,
       just under the 4.5:1 floor. Darkened slightly; the dark theme sets its
       own value at higher specificity and is unaffected. */
    --muted: #586E6B;  /* was #8CA09C at 2.75:1 on white — below the 4.5:1 floor for body text. #5D7774 keeps the same green-grey hue at 4.82:1 on white and 4.50:1 on the sunken surface. */

    /* Accents (existing tokens) */
    --ct-accent: #0B4F4A;
    --ct-accent-hover: #0E625C;
    --ct-tint: #EEF5F1;
    --ct-tint-deep: #DDEAE4;

    /* Geometry */
    --ct-r-card: 16px;
    --ct-r-control: 11px;
    --ct-r-pill: 999px;
    --ct-gutter: 26px;

    /* Elevation — one soft shadow, used consistently */
    --ct-shadow: 0 1px 2px rgba(11, 79, 74, .05), 0 10px 26px rgba(11, 79, 74, .05);
    --ct-shadow-lift: 0 2px 6px rgba(11, 79, 74, .07), 0 16px 34px rgba(11, 79, 74, .09);

    --ct-sidebar-w: 258px;
    --ct-rail-w: 76px;
    --ct-header-h: 66px;
}

/* =====================================================================
   1. Base
   ===================================================================== */

body:not(.login-body) {
    background: var(--ct-canvas);
    color: var(--ct-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body:not(.login-body) h1,
body:not(.login-body) h2,
body:not(.login-body) h3 {
    letter-spacing: -.012em;
    color: var(--ct-ink);
}

/* Visible keyboard focus everywhere, without a focus ring on mouse clicks. */
body:not(.login-body) :focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   2. Shell
   ===================================================================== */

body:not(.login-body) .layout {
    min-height: 100vh;
    background: var(--ct-canvas);
}

body:not(.login-body) .layout > aside,
body:not(.login-body) .layout > .sidebar {
    width: var(--ct-sidebar-w) !important;
    background: var(--ct-shell) !important;
    color: #FFFFFF !important;
    border-right: 0 !important;
    box-shadow: none !important;
    padding: 18px 14px 16px !important;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    overflow: hidden auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

body:not(.login-body) .layout > aside::-webkit-scrollbar {
    width: 6px !important;
}

body:not(.login-body) .layout > aside::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .2) !important;
    border-radius: 99px;
}

body:not(.login-body) .layout > main {
    margin-left: var(--ct-sidebar-w) !important;
    width: calc(100% - var(--ct-sidebar-w)) !important;
    background: var(--ct-canvas) !important;
    padding: 0 var(--ct-gutter) 40px !important;
}

body:not(.login-body) .layout > aside.collapsed + main,
body:not(.login-body).sidebar-collapsed .layout > main {
    margin-left: var(--ct-rail-w) !important;
    width: calc(100% - var(--ct-rail-w)) !important;
}

/* ---- Brand lockup ---- */

body:not(.login-body) .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 18px !important;
    padding: 6px 8px 16px !important;
    border-bottom: 1px solid var(--ct-shell-line);
}

/* The seal is a transparent PNG with its own dark outer ring, so it sits on the
   teal sidebar unaided. The previous white rounded plate was the visible
   "white box around the logo"; contain keeps the artwork undistorted. */
body:not(.login-body) .sidebar-brand img {
    width: 40px !important;
    height: 40px !important;
    flex: none;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:not(.login-body) .sidebar-brand h2,
body:not(.login-body) aside h2 {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    line-height: 1.15;
    color: #FFFFFF !important;
    letter-spacing: -.01em;
}

body:not(.login-body) .sidebar-brand p,
body:not(.login-body) aside > p {
    margin: 3px 0 0 !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    line-height: 1.3;
    color: var(--ct-shell-muted) !important;
    white-space: normal;
}

/* ---- Navigation ---- */

body:not(.login-body) .side-nav {
    flex: 1;
    min-height: 0;
    display: flex !important;
    flex-direction: column;
}

body:not(.login-body) .side-nav .nav-links {
    display: flex !important;
    flex-direction: column;
    gap: 3px !important;
    flex: 1;
    min-height: 0;
}

body:not(.login-body) .side-nav a {
    display: flex !important;
    align-items: center;
    gap: 12px !important;
    min-height: 42px;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.2;
    color: var(--ct-shell-text) !important;
    opacity: 1 !important;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

body:not(.login-body) .side-nav a .material-icons-outlined {
    font-size: 20px !important;
    flex: none;
}

body:not(.login-body) .side-nav a:hover {
    background: rgba(255, 255, 255, .07) !important;
    color: #FFFFFF !important;
}

body:not(.login-body) .side-nav a.active {
    background: var(--ct-shell-raised) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
}

/* Logout lives in the header profile menu; the sidebar stays navigation-only.
   The link is kept in the DOM (and logout.php untouched) — only hidden here. */
body:not(.login-body) .side-nav .logout {
    display: none !important;
}

/* ---- School Year selector, pinned to the bottom ---- */

body:not(.login-body) .sidebar-filter {
    margin-top: auto !important;
    padding-top: 18px !important;
}

body:not(.login-body) .sidebar-filter form {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid var(--ct-shell-line) !important;
    border-radius: 12px !important;
    padding: 10px 11px !important;
}

body:not(.login-body) .sidebar-filter label {
    text-transform: none;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 7px;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--ct-shell-muted) !important;
}

body:not(.login-body) .sidebar-filter label .material-icons-outlined {
    font-size: 14px !important;
}

body:not(.login-body) .sidebar-filter select {
    width: 100% !important;
    margin: 0;
    padding: 9px 30px 9px 11px !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    background-color: rgba(255, 255, 255, .96);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%230B4F4A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    color: var(--ct-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

/* ---- Collapsed rail ---- */

body:not(.login-body) .layout > aside.collapsed {
    width: var(--ct-rail-w) !important;
    padding-inline: 10px;
}

body:not(.login-body) .layout > aside.collapsed .side-nav a {
    justify-content: center;
    padding-inline: 0;
}

body:not(.login-body) .layout > aside.collapsed .sidebar-filter {
    display: none !important;
}

body:not(.login-body) .layout > aside.collapsed .sidebar-brand {
    justify-content: center;
    padding-inline: 0;
}

/* =====================================================================
   3. Header
   ===================================================================== */

body:not(.login-body) .page-header {
    position: sticky !important;
    top: 0;
    z-index: 60 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 16px;
    min-height: var(--ct-header-h);
    margin: 0 calc(var(--ct-gutter) * -1) 22px !important;
    padding: 0 var(--ct-gutter) !important;
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--ct-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body:not(.login-body) .page-header .header-left {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    min-width: 0;
}

body:not(.login-body) .page-header h1 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25;
    letter-spacing: -.01em;
}

body:not(.login-body) .page-header p,
body:not(.login-body) .page-header .header-left p {
    margin: 1px 0 0 !important;
    font-size: 12px !important;
    line-height: 1.35;
    color: var(--ct-ink-faint) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
}

body:not(.login-body) .menu-btn {
    display: none !important;
    width: 38px !important;
    height: 38px !important;
    flex: none;
    place-items: center;
    padding: 0 !important;
    border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-control) !important;
    background: var(--ct-surface) !important;
    color: var(--ct-ink) !important;
    box-shadow: none !important;
}

body:not(.login-body) .menu-btn:hover {
    background: var(--ct-tint) !important;
    color: var(--ct-accent) !important;
    transform: none;
}

/* ---- Header tools ---- */

body:not(.login-body) .header-tools {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    margin-left: auto;
}

body:not(.login-body) .global-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(340px, 32vw);
    height: 38px;
    padding: 0 13px;
    border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-pill) !important;
    background: var(--ct-surface-sunken) !important;
    transition: border-color .16s ease, background .16s ease;
}

body:not(.login-body) .global-search-wrap:focus-within {
    background: var(--ct-surface) !important;
    border-color: var(--ct-line-strong) !important;
    box-shadow: 0 0 0 3px rgba(11, 79, 74, .07) !important;
}

body:not(.login-body) .global-search-wrap > .material-icons-outlined {
    font-size: 18px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .global-search-wrap input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: none !important;
    font-size: 13px;
    font-family: inherit;
    color: var(--ct-ink);
}

body:not(.login-body) .global-search-wrap input::placeholder {
    color: var(--ct-ink-faint);
}

body:not(.login-body) .global-search-wrap input:focus {
    outline: none;
    box-shadow: none !important;
}

body:not(.login-body) .header-icon-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid transparent !important;
    border-radius: var(--ct-r-control);
    background: transparent !important;
    color: var(--ct-ink-soft) !important;
    box-shadow: none !important;
}

body:not(.login-body) .header-icon-btn:hover {
    background: var(--ct-tint) !important;
    color: var(--ct-accent) !important;
    transform: none !important;
}

body:not(.login-body) .notification-dot {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: var(--ct-r-pill);
    border: 2px solid var(--ct-surface);
    background: #C1584F;
    color: #FFFFFF;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
}

/* style.css fills every <button> outside its exclusion list with the primary
   colour, using !important. The profile chip is absent from that list, so the
   ID is needed to win. #profileButton is emitted by render_user_tools(). */
body:not(.login-body) button#profileButton,
body:not(.login-body) .profile-button {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 9px 0 5px !important;
    border: 1px solid transparent !important;
    border-radius: var(--ct-r-pill) !important;
    background: transparent !important;
    color: var(--ct-ink) !important;
    box-shadow: none !important;
}

body:not(.login-body) button#profileButton:hover,
body:not(.login-body) .profile-button:hover {
    background: var(--ct-tint) !important;
    transform: none !important;
}

body:not(.login-body) .profile-button img {
    width: 32px !important;
    height: 32px;
    border-radius: 50% !important;
    object-fit: cover;
    border: 1px solid var(--ct-line) !important;
    background: var(--ct-tint) !important;
}

body:not(.login-body) .profile-copy {
    display: grid;
    gap: 1px;
    text-align: left;
    line-height: 1.2;
}

body:not(.login-body) .profile-copy strong {
    font-size: 12.5px;
    font-weight: 600;
}

body:not(.login-body) .profile-copy small {
    font-size: 10.5px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .profile-chevron {
    font-size: 18px;
    color: var(--ct-ink-faint);
}

/* ---- Header dropdowns ---- */

body:not(.login-body) .header-dropdown {
    margin-top: 8px;
    padding: 6px;
    border: 1px solid var(--ct-line);
    border-radius: 14px;
    background: var(--ct-surface);
    box-shadow: var(--ct-shadow-lift);
}

body:not(.login-body) .header-dropdown .dropdown-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--ct-line);
    font-size: 13px;
}

body:not(.login-body) .header-dropdown .dropdown-heading span {
    font-size: 11.5px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .header-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13px;
    color: var(--ct-ink);
    text-decoration: none;
}

body:not(.login-body) .header-dropdown a:hover {
    background: var(--ct-tint);
}

body:not(.login-body) .header-dropdown a .material-icons-outlined {
    font-size: 19px;
    color: var(--ct-ink-soft);
}

body:not(.login-body) .notification-menu a > span:last-child {
    display: grid;
    gap: 1px;
}

body:not(.login-body) .notification-menu small {
    font-size: 11.5px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .profile-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--ct-line);
}

body:not(.login-body) .profile-summary img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

body:not(.login-body) .profile-summary small {
    font-size: 11.5px;
    color: var(--ct-ink-faint);
}

/* =====================================================================
   4. Page structure
   ===================================================================== */

body:not(.login-body) main > section,
body:not(.login-body) main > div:not(.page-header) {
    max-width: 1460px;
}

body:not(.login-body) .section-title-row,
body:not(.login-body) .top-actions,
body:not(.login-body) .panel-heading {
    display: flex;
    align-items: flex-start !important;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

body:not(.login-body) .section-title-row h2,
body:not(.login-body) .panel-heading h2,
body:not(.login-body) .panel > h2 {
    margin: 0 0 3px;
    font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
}

body:not(.login-body) .section-title-row p,
body:not(.login-body) .panel-heading p,
body:not(.login-body) .section-title-row .muted {
    margin: 0;
    font-size: 12.5px !important;
    line-height: 1.45;
    color: var(--ct-ink-faint) !important;
}

/* =====================================================================
   5. Cards and panels
   ===================================================================== */

body:not(.login-body) .panel,
body:not(.login-body) .card,
body:not(.login-body) .dashboard-panel,
body:not(.login-body) .settings-card {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-card) !important;
    box-shadow: var(--ct-shadow) !important;
    padding: 20px !important;
    margin-bottom: 18px;
}

body:not(.login-body) .panel:last-child {
    margin-bottom: 0;
}

/* =====================================================================
   6. Stat cards
   ===================================================================== */

body:not(.login-body) .dashboard-stats,
body:not(.login-body) .cards,
body:not(.login-body) .dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)) !important;
    gap: 14px;
    margin-bottom: 18px;
}

/* The admin dashboard has six metrics, and auto-fit leaves those as an
   awkward five-plus-one at most desktop widths. Pinning the column count
   for a six-card grid keeps the row complete: six across on a wide screen,
   a 3x2 block on a narrower one. Grids with any other number of cards keep
   the auto-fit behaviour, and browsers without :has() fall back to it too. */
@media (min-width: 901px) {
    body:not(.login-body) .dashboard-stats:has(> :nth-child(6):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1360px) {
    body:not(.login-body) .dashboard-stats:has(> :nth-child(6):last-child) {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

body:not(.login-body) .stat-card {
    display: flex;
    flex-direction: column;
    /* style.css centres these, which collapses the block-level metric bar to
       zero width. Stretch also keeps every card's footer on the same line. */
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-card) !important;
    box-shadow: var(--ct-shadow) !important;
    text-decoration: none;
    color: inherit !important;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body:not(.login-body) .stat-card:hover {
    border-color: var(--ct-line-strong);
    box-shadow: var(--ct-shadow-lift) !important;
    transform: translateY(-2px);
}

body:not(.login-body) .stat-card-top {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

body:not(.login-body) .stat-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    background: var(--ct-tint);
    color: var(--ct-accent);
    box-shadow: none;
}

body:not(.login-body) .stat-icon .material-icons-outlined {
    font-size: 21px;
    color: inherit;
}

body:not(.login-body) .stat-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

body:not(.login-body) .stat-copy span {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.3;
    color: var(--ct-ink-soft) !important;
}

body:not(.login-body) .stat-copy strong {
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ct-ink) !important;
    font-variant-numeric: tabular-nums;
}

/* Share-of-total bar: a real proportion from the existing data,
   not an invented trend figure. */
body:not(.login-body) .metric-bar {
    /* Pins the bar and caption to the card footer so a card with a two-line
       label still lines its footer up with its neighbours. */
    margin-top: auto;
    height: 5px;
    border-radius: var(--ct-r-pill);
    background: var(--ct-tint) !important;
    overflow: hidden;
}

body:not(.login-body) .metric-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ct-accent), #2F7770);
}

body:not(.login-body) .metric-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 11.5px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .stat-card:hover .metric-caption span:last-child {
    color: var(--ct-accent) !important;
}

body:not(.login-body) .metric-positive {
    color: #2F5239;
    font-weight: 600;
}

body:not(.login-body) .metric-negative {
    color: #A6473F;
    font-weight: 600;
}

/* =====================================================================
   7. Controls
   ===================================================================== */

body:not(.login-body) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body:not(.login-body) select,
body:not(.login-body) textarea {
    padding: 10px 13px;
    border: 1px solid var(--ct-line-strong);
    border-radius: var(--ct-r-control);
    background: var(--ct-surface);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ct-ink);
    transition: border-color .16s ease, box-shadow .16s ease;
}

body:not(.login-body) input:not([type="checkbox"]):not([type="radio"]):focus,
body:not(.login-body) select:focus,
body:not(.login-body) textarea:focus {
    outline: none;
    border-color: var(--ct-accent);
    box-shadow: 0 0 0 3px rgba(11, 79, 74, .1);
}

body:not(.login-body) input::placeholder,
body:not(.login-body) textarea::placeholder {
    color: var(--ct-ink-faint);
}

body:not(.login-body) label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ct-ink-soft);
}

body:not(.login-body) main select:not([multiple]) {
    padding-right: 32px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235E7370' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    -webkit-appearance: none;
}

/* Validation states use colour plus a border weight change, so the state
   is not carried by hue alone. */
body:not(.login-body) input[aria-invalid="true"],
body:not(.login-body) select[aria-invalid="true"],
body:not(.login-body) textarea[aria-invalid="true"],
body:not(.login-body) .input-error {
    border-color: #C1584F;
    box-shadow: 0 0 0 3px rgba(193, 88, 79, .1);
}

/* ---- Buttons ---- */

body:not(.login-body) button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle),
body:not(.login-body) .btn:not(.secondary-btn):not(.action-danger):not(.btn-decline) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px !important;
    border: 1px solid var(--ct-accent) !important;
    border-radius: var(--ct-r-control) !important;
    background: var(--ct-accent) !important;
    color: #FFFFFF !important;
    font-family: inherit;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

body:not(.login-body) button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle):hover,
body:not(.login-body) .btn:not(.secondary-btn):not(.action-danger):not(.btn-decline):hover {
    background: var(--ct-accent-hover) !important;
    border-color: var(--ct-accent-hover) !important;
    transform: none !important;
}

body:not(.login-body) .secondary-btn,
body:not(.login-body) .btn.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 15px;
    border: 1px solid var(--ct-line-strong);
    border-radius: var(--ct-r-control) !important;
    background: var(--ct-surface) !important;
    color: var(--ct-ink) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    text-decoration: none;
}

body:not(.login-body) .secondary-btn:hover {
    background: var(--ct-tint) !important;
    border-color: var(--ct-line-strong) !important;
    color: var(--ct-accent) !important;
    transform: none !important;
}

body:not(.login-body) .btn .material-icons-outlined,
body:not(.login-body) button .material-icons-outlined {
    font-size: 18px !important;
}

body:not(.login-body) button:disabled,
body:not(.login-body) .btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
}

/* ---- Filter toolbars ---- */

body:not(.login-body) .filter-toolbar,
body:not(.login-body) .inline-actions,
body:not(.login-body) .student-list-filter-row {
    display: flex;
    /* Filters read as part of the table below them, so they start at the
       same left edge rather than hugging the right. */
    justify-content: flex-start;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

body:not(.login-body) .filter-toolbar input,
body:not(.login-body) .filter-toolbar select,
body:not(.login-body) .student-list-filter-row input,
body:not(.login-body) .student-list-filter-row select {
    min-width: 170px;
    margin: 0;
}

body:not(.login-body) .search-input,
body:not(.login-body) .table-search {
    width: 240px;
    max-width: 100%;
}

/* =====================================================================
   8. Tables
   ===================================================================== */

body:not(.login-body) .table-wrap,
body:not(.login-body) .table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--ct-line);
    border-radius: 13px !important;
    background: var(--ct-surface) !important;
}

body:not(.login-body) .table-wrap table,
body:not(.login-body) .table-responsive table {
    border-radius: 0 !important;
    min-width: 100%;
}

body:not(.login-body) table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ct-surface) !important;
    font-size: 13.5px;
}

body:not(.login-body) th {
    /* style.css tracks these out in caps; sentence case is easier to scan
       and matches the rest of the interface. */
    text-transform: none;
    letter-spacing: 0;
    padding: 12px 15px !important;
    background: var(--ct-surface-sunken) !important;
    border-bottom: 1px solid var(--ct-line) !important;
    color: var(--ct-ink-soft) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .005em;
    white-space: nowrap;
    text-align: left;
}

body:not(.login-body) td {
    padding: 13px 15px !important;
    border-bottom: 1px solid var(--ct-line) !important;
    color: var(--ct-ink) !important;
    vertical-align: middle;
}

body:not(.login-body) tbody tr:last-child td {
    border-bottom: 0 !important;
}

body:not(.login-body) tbody tr:hover td {
    background: var(--ct-surface-sunken) !important;
}

body:not(.login-body) .table-link,
body:not(.login-body) .student-name-link {
    color: var(--ct-accent) !important;
    font-weight: 600;
    text-decoration: none;
}

body:not(.login-body) .table-link:hover,
body:not(.login-body) .student-name-link:hover {
    text-decoration: underline;
}

body:not(.login-body) .student-profile-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body:not(.login-body) .student-profile-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ct-line) !important;
    background: var(--ct-tint);
}

body:not(.login-body) .empty-state {
    padding: 34px 20px;
    text-align: center;
    color: var(--ct-ink-faint);
    font-size: 13.5px;
}

/* ---- Status badges ---- */

body:not(.login-body) .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--ct-r-pill) !important;
    border: 1px solid transparent;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    white-space: nowrap;
}

body:not(.login-body) .status-badge .material-icons-outlined {
    font-size: 14px !important;
}

body:not(.login-body) .status-badge.success {
    background: #E4EFE7 !important;
    border-color: #CDE1D3;
    color: #2A5136 !important;
}

body:not(.login-body) .status-badge.info {
    background: #E5EFF4 !important;
    border-color: #CFE1E9;
    color: #2C5769 !important;
}

body:not(.login-body) .status-badge.warning {
    background: #F8EEDC !important;
    border-color: #EDDCBE;
    color: #85571F !important;
}

body:not(.login-body) .status-badge.danger {
    background: #FBF0EF !important;
    border-color: #F2DDDA;
    color: #8B3A34 !important;
}

body:not(.login-body) .monitoring-count {
    background: var(--ct-tint);
    color: var(--ct-ink);
    font-size: 12.5px;
}

/* ---- Pagination (rendered by crimtrack-ui.js when a table is paged) ---- */

/* Rows outside the current page. Kept in the DOM so search, column filters
   and server-side exports continue to see every record. */
.ct-page-hidden {
    display: none !important;
}

.ct-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 14px;
}

.ct-pagination-pages {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ct-pagination button {
    min-width: 34px;
    min-height: 34px !important;
    padding: 0 9px !important;
    border: 1px solid var(--ct-line-strong) !important;
    border-radius: 9px !important;
    background: var(--ct-surface) !important;
    color: var(--ct-ink) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.ct-pagination button:hover:not(:disabled) {
    background: var(--ct-tint) !important;
    color: var(--ct-accent) !important;
}

.ct-pagination button[aria-current="page"] {
    background: var(--ct-accent) !important;
    border-color: var(--ct-accent) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

.ct-pagination button:disabled {
    opacity: .4;
}

.ct-pagination-status {
    font-size: 12.5px;
    color: var(--ct-ink-faint);
}

/* =====================================================================
   9. Dashboard blocks
   ===================================================================== */

body:not(.login-body) .dashboard-content {
    padding: 0;
}

body:not(.login-body) .dashboard-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 0 !important;
    margin-bottom: 20px;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:not(.login-body) .dashboard-welcome h2 {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em;
    /* The old hero was a dark teal band, so style.css forces white here. */
    color: var(--ct-ink) !important;
}

body:not(.login-body) .dashboard-welcome p {
    margin: 5px 0 0;
    font-size: 13.5px;
    color: var(--ct-ink-soft) !important;
    max-width: 62ch;
}

body:not(.login-body) .welcome-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 9px;
    padding: 4px 11px;
    border-radius: var(--ct-r-pill);
    background: var(--ct-tint);
    color: var(--ct-accent);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body:not(.login-body) .welcome-label .material-icons-outlined {
    font-size: 15px;
}

body:not(.login-body) .welcome-year {
    display: grid;
    gap: 2px;
    padding: 12px 18px;
    background: var(--ct-surface);
    border: 1px solid var(--ct-line);
    border-radius: 13px;
    box-shadow: var(--ct-shadow);
}

body:not(.login-body) .welcome-year small {
    font-size: 11.5px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .welcome-year strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--ct-ink);
}

body:not(.login-body) .analytics-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    padding: 0;
    background: none;
    border: 0;
}

body:not(.login-body) .analytics-summary h2 {
    margin: 0 0 3px;
    font-size: 17px;
    font-weight: 600;
}

body:not(.login-body) .analytics-summary p {
    margin: 0;
    font-size: 12.5px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .analytics-total {
    padding: 6px 13px;
    border-radius: var(--ct-r-pill);
    background: var(--ct-tint);
    border: 1px solid var(--ct-tint-deep);
    color: var(--ct-accent);
    font-size: 12.5px;
    font-weight: 600;
}

body:not(.login-body) .dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 16px;
    align-items: start;
}

body:not(.login-body) .quick-actions {
    /* One column: this panel sits in the narrow half of the dashboard grid,
       where two columns wrap every label onto three lines. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 9px;
    padding: 0 !important;
}

/* Keep the export buttons and the intern filter on one row. */
body:not(.login-body) .dashboard-intern-filter {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

body:not(.login-body) .dashboard-intern-filter label {
    text-transform: none;
    letter-spacing: 0;
}

body:not(.login-body) .dashboard-intern-filter .inline-actions {
    margin-bottom: 0;
}

body:not(.login-body) .quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--ct-line);
    border-radius: 12px;
    background: var(--ct-surface);
    text-decoration: none;
    color: inherit;
    transition: background .16s ease, border-color .16s ease;
}

body:not(.login-body) .quick-action:hover {
    background: var(--ct-tint);
    border-color: var(--ct-tint-deep);
    transform: none;
}

body:not(.login-body) .quick-action-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 10px;
    background: var(--ct-tint);
    color: var(--ct-accent);
}

body:not(.login-body) .quick-action strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
}

body:not(.login-body) .quick-action small {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .panel-link {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--ct-accent) !important;
    text-decoration: none;
}

body:not(.login-body) .panel-link:hover {
    text-decoration: underline;
}

/* ---- Attendance log cards ---- */

body:not(.login-body) .dashboard-log-list {
    display: grid;
    gap: 11px;
}

body:not(.login-body) .attendance-log-card {
    display: grid;
    gap: 12px;
    padding: 15px;
    border: 1px solid var(--ct-line);
    border-radius: 13px;
    background: var(--ct-surface);
}

body:not(.login-body) .attendance-log-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

body:not(.login-body) .attendance-log-person {
    display: flex;
    align-items: center;
    gap: 10px;
}

body:not(.login-body) .attendance-log-avatar {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--ct-line);
    background: var(--ct-tint);
}

body:not(.login-body) .attendance-log-person span:not(.attendance-log-avatar) {
    font-size: 12px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .attendance-log-head time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--ct-r-pill);
    background: var(--ct-surface-sunken);
    border: 1px solid var(--ct-line);
    font-size: 11.5px;
    color: var(--ct-ink-soft);
}

body:not(.login-body) .attendance-log-head time .material-icons-outlined {
    font-size: 14px;
}

body:not(.login-body) .attendance-log-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body:not(.login-body) .attendance-log-times > div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 2px 9px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--ct-surface-sunken);
    border: 1px solid var(--ct-line);
}

body:not(.login-body) .attendance-log-times .material-icons-outlined {
    grid-row: span 2;
    font-size: 19px;
    color: var(--ct-accent);
}

body:not(.login-body) .attendance-log-times small {
    font-size: 11px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .attendance-log-times strong {
    font-size: 13.5px;
    font-weight: 600;
}

body:not(.login-body) .attendance-log-status {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

/* ---- Charts ---- */

body:not(.login-body) .chart-container,
body:not(.login-body) .agency-chart-wrap {
    position: relative;
    min-height: 240px;
}

body:not(.login-body) .chart-container canvas,
body:not(.login-body) .agency-chart-wrap canvas {
    max-width: 100%;
}

body:not(.login-body) .empty-chart-note {
    padding: 30px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--ct-ink-faint);
    background: var(--ct-surface-sunken);
    border: 1px dashed var(--ct-line-strong);
    border-radius: 12px;
}

/* =====================================================================
   10. Forms, detail pages, modals
   ===================================================================== */

body:not(.login-body) .grid-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
    gap: 14px 16px;
}

body:not(.login-body) .grid-form label {
    display: grid;
    gap: 6px;
    align-content: start;
}

body:not(.login-body) .grid-form input,
body:not(.login-body) .grid-form select,
body:not(.login-body) .grid-form textarea {
    margin-top: 0;
    width: 100%;
}

body:not(.login-body) .full-width {
    grid-column: 1 / -1;
}

body:not(.login-body) .settings-card-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ct-line);
}

body:not(.login-body) .settings-card-heading h2 {
    font-size: 16px;
    margin: 0;
}

body:not(.login-body) .settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 16px;
}

body:not(.login-body) .alert {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.5;
}

body:not(.login-body) .alert-success {
    background: #E4EFE7;
    border-color: #CDE1D3;
    color: #2A5136;
}

body:not(.login-body) .alert-error {
    background: #FBF0EF;
    border-color: #F2DDDA;
    color: #8B3A34 !important;
}

body:not(.login-body) .modal-card {
    border-radius: 18px;
    border: 1px solid var(--ct-line);
    box-shadow: 0 30px 70px rgba(11, 79, 74, .22);
}

body:not(.login-body) .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--ct-line);
}

body:not(.login-body) .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    flex-wrap: wrap;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--ct-line);
}

body:not(.login-body) .profile-summary-card {
    border-radius: 13px;
    border: 1px solid var(--ct-line);
    box-shadow: none;
}

/* =====================================================================
   11. Mobile navigation — bottom tab bar
   Injected by crimtrack-ui.js from the sidebar links already on the page.
   ===================================================================== */

.ct-tabbar {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 6800;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.6) blur(10px);
    -webkit-backdrop-filter: saturate(1.6) blur(10px);
    border-top: 1px solid var(--ct-line);
    box-shadow: 0 -6px 20px rgba(11, 79, 74, .06);
}

.ct-tabbar-inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
}

.ct-tabbar a,
.ct-tabbar button,
.ct-tabbar button#ctTabMore {
    display: grid !important;
    justify-items: center;
    align-content: center;
    gap: 3px;
    min-height: 52px !important;
    padding: 6px 2px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--ct-ink-faint) !important;
    font-family: inherit;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    text-decoration: none;
    box-shadow: none !important;
    cursor: pointer;
}

.ct-tabbar .material-icons-outlined {
    font-size: 22px !important;
}

.ct-tabbar a.active,
.ct-tabbar a:hover,
.ct-tabbar button:hover,
.ct-tabbar button#ctTabMore:hover {
    background: var(--ct-tint) !important;
    color: var(--ct-accent) !important;
}

.ct-tabbar a.active {
    font-weight: 600 !important;
}

/* Scrim behind the drawer, replacing the body::after pseudo-element so it
   can be clicked and animated. */
.ct-scrim {
    position: fixed;
    inset: 0;
    z-index: 6900;
    background: rgba(12, 51, 47, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    border: 0;
    padding: 0;
}

body.sidebar-mobile-open .ct-scrim {
    opacity: 1;
    visibility: visible;
}

/* =====================================================================
   12. Responsive
   ===================================================================== */

/* ---- Tablet: narrower sidebar, tighter gutters ---- */
@media (max-width: 1180px) {
    :root {
        --ct-sidebar-w: 224px;
        --ct-gutter: 20px;
    }

    body:not(.login-body) .global-search-wrap {
        width: min(260px, 28vw);
    }

    body:not(.login-body) .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1000px) {
    body:not(.login-body) .profile-copy,
    body:not(.login-body) .profile-chevron {
        display: none;
    }

    body:not(.login-body) .profile-button {
        width: 42px !important;
        padding: 0 !important;
        justify-content: center;
    }
}

/* ---- Mobile: drawer + bottom tabs ---- */
@media (max-width: 900px) {
    :root {
        --ct-gutter: 16px;
    }

    body:not(.login-body) .layout {
        display: block !important;
    }

    body:not(.login-body) .layout > aside,
    body:not(.login-body) .layout > .sidebar,
    body:not(.login-body) .layout > aside.collapsed,
    body:not(.login-body) .layout > .sidebar.collapsed {
        position: fixed !important;
        inset: 0 auto 0 0 !important;
        width: min(80vw, 284px) !important;
        height: 100dvh !important;
        padding: 18px 14px !important;
        transform: translateX(-102%) !important;
        transition: transform .22s ease !important;
        z-index: 7000 !important;
        box-shadow: 18px 0 44px rgba(12, 51, 47, .24) !important;
    }

    body:not(.login-body).sidebar-mobile-open .layout > aside,
    body:not(.login-body).sidebar-mobile-open .layout > .sidebar {
        transform: translateX(0) !important;
    }

    /* The drawer always shows full labels, even if the desktop rail was collapsed. */
    body:not(.login-body) .layout > aside.collapsed .nav-text,
    body:not(.login-body) .layout > aside.collapsed .sidebar-brand div,
    body:not(.login-body) .layout > aside.collapsed .sidebar-filter {
        display: block !important;
    }

    body:not(.login-body) .layout > aside.collapsed .side-nav a {
        justify-content: flex-start;
        padding-inline: 12px;
    }

    body:not(.login-body) .layout > main,
    body:not(.login-body) .layout > aside.collapsed + main,
    body:not(.login-body).sidebar-collapsed .layout > main {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 var(--ct-gutter) 40px !important;
    }

    /* The built-in body::after scrim is replaced by .ct-scrim. */
    body.sidebar-mobile-open::after {
        display: none !important;
    }

    body:not(.login-body) .menu-btn {
        display: grid !important;
    }

    /* Header condenses to: menu · title · bell · avatar. Search moves into
       the content area so the bar stays one comfortable row. */
    body:not(.login-body) .page-header {
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 10px;
        min-height: 58px;
        padding: 9px var(--ct-gutter) !important;
        margin-bottom: 16px !important;
    }

    body:not(.login-body) .page-header h1 {
        font-size: 15px !important;
    }

    body:not(.login-body) .page-header p,
    body:not(.login-body) .page-header .header-left p {
        display: none !important;
    }

    /* Title and account controls share the top row; the search is relocated
       below the header by crimtrack-ui.js, which keeps the bar to one
       comfortable line instead of the three it would otherwise wrap to. */
    body:not(.login-body) .header-left {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    body:not(.login-body) .header-tools {
        width: auto !important;
        margin-left: auto !important;
        flex: 0 0 auto;
        gap: 4px !important;
        justify-content: flex-end !important;
    }

    body:not(.login-body) .ct-mobile-search {
        margin: 0 0 14px;
    }

    body:not(.login-body) .ct-mobile-search .global-search-wrap {
        width: 100%;
        height: 42px;
    }

    body:not(.login-body) .header-dropdown {
        position: fixed;
        top: 66px;
        left: 12px;
        right: 12px;
        width: auto;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* Stacked, comfortably tappable content */
    body:not(.login-body) .dashboard-stats,
    body:not(.login-body) .cards,
    body:not(.login-body) .dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px;
    }

    body:not(.login-body) .dashboard-welcome,
    body:not(.login-body) .analytics-summary {
        align-items: flex-start;
        justify-content: flex-start !important;
        text-align: left;
    }

    body:not(.login-body) .dashboard-welcome h2 {
        font-size: 21px;
    }

    body:not(.login-body) .welcome-year {
        width: 100%;
    }

    body:not(.login-body) .panel,
    body:not(.login-body) .card,
    body:not(.login-body) .dashboard-panel,
    body:not(.login-body) .settings-card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    body:not(.login-body) .section-title-row,
    body:not(.login-body) .panel-heading {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* style.css gives the title block `flex: 1 1 220px` for the side-by-side
       row. Once the row stacks, that basis becomes a 220px-tall empty gap
       between the heading and its action button. */
    body:not(.login-body) .section-title-row > div:first-child,
    body:not(.login-body) .panel-heading > div:first-child {
        flex: 0 0 auto !important;
    }

    body:not(.login-body) .section-title-row > .btn,
    body:not(.login-body) .section-title-row > button {
        width: 100% !important;
    }

    body:not(.login-body) .filter-toolbar,
    body:not(.login-body) .inline-actions,
    body:not(.login-body) .student-list-filter-row {
        width: 100%;
    }

    body:not(.login-body) .filter-toolbar input,
    body:not(.login-body) .filter-toolbar select,
    body:not(.login-body) .student-list-filter-row input,
    body:not(.login-body) .student-list-filter-row select,
    body:not(.login-body) .inline-actions .btn {
        flex: 1 1 160px;
        min-width: 0;
    }

    body:not(.login-body) .attendance-log-times {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Touch targets */
    body:not(.login-body) main button,
    body:not(.login-body) main .btn,
    body:not(.login-body) main input:not([type="checkbox"]):not([type="radio"]),
    body:not(.login-body) main select {
        min-height: 44px;
    }

    /* Tables scroll sideways rather than squashing or overflowing the page. */
    body:not(.login-body) .table-wrap,
    body:not(.login-body) .table-responsive {
        overflow-x: auto;
    }

    body:not(.login-body) .table-wrap table {
        min-width: 620px;
    }

    body:not(.login-body) th,
    body:not(.login-body) td {
        padding: 11px 13px !important;
        font-size: 13px !important;
    }

    body:not(.login-body) .grid-form,
    body:not(.login-body) .settings-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:not(.login-body) .modal-actions .btn,
    body:not(.login-body) .modal-actions button {
        flex: 1 1 100%;
    }
}

/* ---- Phone only: bottom tab bar ----
   Between 701px and 900px the drawer on its own is the right amount of
   navigation. A bottom tab bar at tablet width reads as a blown-up phone
   layout, which is what the brief asks us to avoid. */
@media (max-width: 700px) {
    .ct-tabbar {
        display: block;
    }

    body:not(.login-body) .layout > main,
    body:not(.login-body) .layout > aside.collapsed + main,
    body:not(.login-body).sidebar-collapsed .layout > main {
        padding-bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 560px) {
    body:not(.login-body) .dashboard-stats,
    body:not(.login-body) .cards,
    body:not(.login-body) .dashboard-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body:not(.login-body) .stat-card {
        padding: 14px;
        gap: 11px;
    }

    body:not(.login-body) .stat-card-top {
        flex-direction: column;
        gap: 10px;
    }

    body:not(.login-body) .stat-copy strong {
        font-size: 23px !important;
    }

    /* Two cards per row leaves no room for the footer's second label, and
       "View module" only restates that the whole card is already a link. */
    body:not(.login-body) .metric-caption span:last-child {
        display: none;
    }

    body:not(.login-body) .dashboard-welcome h2 {
        font-size: 19px;
    }
}

/* Never let anything push the page sideways. */
@media (max-width: 900px) {
    body:not(.login-body) img,
    body:not(.login-body) canvas,
    body:not(.login-body) video {
        max-width: 100%;
    }
}

/* =====================================================================
   13. Print — reports and exported views
   ===================================================================== */

@media print {
    body:not(.login-body) .layout > aside,
    body:not(.login-body) .page-header,
    .ct-tabbar,
    .ct-scrim {
        display: none !important;
    }

    body:not(.login-body) .layout > main {
        margin: 0 !important;
        width: 100% !important;
        padding: 0 !important;
    }

    body:not(.login-body) .panel {
        border: 1px solid #CCCCCC !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* =====================================================================
   14. Dark theme

   style.css ships a dark theme keyed off :root[data-theme="dark"], but it
   predates the components this layer introduces, so the tab bar, scrim and
   pagination need their own values. Everything else is already covered by
   that theme's own rules, which outrank this file.
   ===================================================================== */

:root[data-theme="dark"] {
    --ct-canvas: #173B39;
    --ct-surface: #1D4643;
    --ct-surface-sunken: #163937;
    --ct-line: #26433D;
    --ct-line-strong: #2F5450;
    --ct-ink: #DCE5E0;
    --ct-ink-soft: #A9C0B8;
    --ct-ink-faint: #89A99A;
    --ct-accent: #4C9490;
    --ct-accent-hover: #5BA9A4;
    --ct-tint: #21514D;
    --ct-tint-deep: #2A605B;
}

:root[data-theme="dark"] .ct-tabbar {
    background: rgba(23, 59, 57, .97);
    border-top-color: #26433D;
    box-shadow: 0 -6px 20px rgba(4, 18, 15, .34);
}

:root[data-theme="dark"] .ct-tabbar a,
:root[data-theme="dark"] .ct-tabbar button,
:root[data-theme="dark"] .ct-tabbar button#ctTabMore {
    color: #89A99A !important;
}

:root[data-theme="dark"] .ct-tabbar a.active,
:root[data-theme="dark"] .ct-tabbar a:hover,
:root[data-theme="dark"] .ct-tabbar button:hover,
:root[data-theme="dark"] .ct-tabbar button#ctTabMore:hover {
    background: #21514D !important;
    color: #A8C3B5 !important;
}

:root[data-theme="dark"] .ct-scrim {
    background: rgba(4, 18, 15, .58);
}

:root[data-theme="dark"] .ct-pagination button {
    background: #1D4643 !important;
    border-color: #2F5450 !important;
    color: #DCE5E0 !important;
}

:root[data-theme="dark"] .ct-pagination button:hover:not(:disabled) {
    background: #21514D !important;
    color: #A8C3B5 !important;
}

:root[data-theme="dark"] .ct-pagination button[aria-current="page"] {
    background: #4C9490 !important;
    border-color: #4C9490 !important;
    color: #0D2422 !important;
}

:root[data-theme="dark"] .ct-pagination-status {
    color: #89A99A;
}

/* The header had no background before this layer, so the shipped dark theme
   never needed to style one. */
:root[data-theme="dark"] body:not(.login-body) .page-header {
    background: rgba(23, 59, 57, .94) !important;
    border-bottom-color: #26433D !important;
}

/* Pre-existing dark-theme defect: <strong> inside table cells and name links
   keeps the light theme's ink (#173B39), which is the dark background colour,
   so student names render invisible. Inheriting fixes it in both themes. */
:root[data-theme="dark"] body:not(.login-body) td strong,
:root[data-theme="dark"] body:not(.login-body) .student-name-link strong,
:root[data-theme="dark"] body:not(.login-body) .attendance-log-person strong {
    color: inherit !important;
}

/* ---- Assigned Interns: per-row absent control ---------------------------- */

/* The name cell holds the avatar, the name, and one trailing control. The
   control is pushed to the far end so the buttons form a straight column
   regardless of how long each name is. */
body:not(.login-body) .student-profile-cell > .intern-absent-form,
body:not(.login-body) .student-profile-cell > .intern-day-state {
    margin-left: auto;
    flex: none;
}

body:not(.login-body) .intern-absent-form {
    margin: 0;
}

body:not(.login-body) .intern-absent-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: var(--ct-r-control) !important;
    font-size: 12.5px !important;
    white-space: nowrap;
}

body:not(.login-body) .intern-absent-btn .material-icons-outlined {
    font-size: 17px !important;
}

/* Hover reads as a warning, since the action records a negative mark. */
body:not(.login-body) .intern-absent-btn:hover {
    border-color: #C08A82 !important;
    background: #FBF1F0 !important;
    color: #8B3A34 !important;
}

body:not(.login-body) .intern-day-state {
    font-size: 11.5px !important;
}

/* Below tablet the table scrolls sideways, so a control pinned to the far end
   of the name cell would sit off-screen. Break it onto its own line under the
   name instead, at a full touch-target height. */
@media (max-width: 700px) {
    body:not(.login-body) .student-profile-cell {
        flex-wrap: wrap;
    }
    body:not(.login-body) .student-profile-cell > .intern-absent-form {
        margin-left: 44px;
        flex: 0 0 calc(100% - 44px);
    }
    /* The badge only reports state, so it stays inline at its natural width. */
    body:not(.login-body) .student-profile-cell > .intern-day-state {
        margin-left: 0;
        flex: 0 0 auto;
    }
    body:not(.login-body) .intern-absent-btn {
        min-height: 44px !important;
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   CrimTrack — shared component system
   ---------------------------------------------------------------------
   Appended to the existing UI layer. Everything below is a component the
   Admin, Agency and Intern panels all use, so the three roles resolve to
   one visual language instead of three.

   Presentation only. No selector here changes markup contracts, event
   handlers, form names, or data.
   ===================================================================== */

:root {
    /* Spacing scale — a single 4px rhythm, used everywhere below.
       Deliberately tight: the brief asks for compact, not airy. */
    --ct-s1: 4px;
    --ct-s2: 8px;
    --ct-s3: 12px;
    --ct-s4: 16px;
    --ct-s5: 20px;
    --ct-s6: 26px;

    /* Type scale */
    --ct-t-micro: 11px;
    --ct-t-small: 12px;
    --ct-t-body: 13.5px;
    --ct-t-lead: 15px;
    --ct-t-h3: 16px;
    --ct-t-h2: 18px;

    /* Semantic tones — one source for every status colour in the app */
    --ct-good: #1F6F5C;
    --ct-good-bg: #E7F2ED;
    --ct-warn: #8A5A22;
    --ct-warn-bg: #F8EEDD;
    --ct-bad: #8B3A34;
    --ct-bad-bg: #FBEEEC;
    --ct-info: #2F5A70;
    --ct-info-bg: #E5EFF4;
}

/* =====================================================================
   Metric groups + stat cards
   Used by admin analytics, and available to every dashboard.
   ===================================================================== */

body:not(.login-body) .ct-metric-groups {
    display: grid;
    gap: var(--ct-s5);
    margin-bottom: var(--ct-s5);
}

body:not(.login-body) .ct-group-title {
    display: flex;
    align-items: center;
    gap: var(--ct-s2);
    margin: 0 0 var(--ct-s3);
    font-size: var(--ct-t-small) !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ct-ink-soft) !important;
}

body:not(.login-body) .ct-group-title > .material-icons-outlined {
    font-size: 17px;
    color: var(--ct-ink-faint);
}

body:not(.login-body) .ct-stat-grid {
    display: grid;
    /* auto-fit with a floor keeps rows even instead of ragged */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--ct-s3);
}

body:not(.login-body) .ct-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ct-s4);
    background: var(--ct-surface);
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-r-card);
    box-shadow: var(--ct-shadow);
    overflow: hidden;
}

/* A 3px tone rail carries status without adding a second colour to the type. */
body:not(.login-body) .ct-stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--ct-line-strong);
}

body:not(.login-body) .ct-stat[data-tone="good"]::before { background: var(--ct-good); }
body:not(.login-body) .ct-stat[data-tone="warn"]::before { background: var(--ct-warn); }
body:not(.login-body) .ct-stat[data-tone="bad"]::before  { background: var(--ct-bad); }

body:not(.login-body) .ct-stat h3 {
    margin: 0 !important;
    font-size: var(--ct-t-small) !important;
    font-weight: 600 !important;
    color: var(--ct-ink-soft) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

body:not(.login-body) .ct-stat strong {
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ct-ink);
    font-variant-numeric: tabular-nums;
}

body:not(.login-body) .ct-stat p {
    margin: 0 !important;
    font-size: var(--ct-t-micro) !important;
    color: var(--ct-ink-faint) !important;
    line-height: 1.4;
}

/* =====================================================================
   Chart panels
   ===================================================================== */

body:not(.login-body) .analytics-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--ct-s4);
    margin-bottom: var(--ct-s4);
}

body:not(.login-body) .analytics-chart-grid > .panel {
    margin-bottom: 0;
    min-width: 0;
}

body:not(.login-body) .chart-container {
    position: relative;
    height: 260px;
    min-width: 0;
}

body:not(.login-body) .chart-container-small { height: 240px; }

body:not(.login-body) .empty-chart-note {
    margin: var(--ct-s3) 0 0 !important;
    padding: var(--ct-s3);
    text-align: center;
    font-size: var(--ct-t-small);
    color: var(--ct-ink-faint);
    background: var(--ct-surface-sunken);
    border-radius: var(--ct-r-control);
}

/* =====================================================================
   Empty states — one professional treatment, used everywhere
   ===================================================================== */

body:not(.login-body) .ct-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ct-s2);
    padding: 34px var(--ct-s5);
    text-align: center;
    color: var(--ct-ink-soft);
}

body:not(.login-body) .ct-empty > .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 23px;
    border-radius: 50%;
    background: var(--ct-tint);
    color: var(--ct-accent);
}

body:not(.login-body) .ct-empty strong {
    font-size: var(--ct-t-lead);
    color: var(--ct-ink);
}

body:not(.login-body) .ct-empty p {
    margin: 0 !important;
    max-width: 46ch;
    font-size: var(--ct-t-body);
    color: var(--ct-ink-faint) !important;
}

/* A table's empty row should read as an empty state, not a stray cell. */
body:not(.login-body) table tbody tr > td[colspan]:only-child {
    padding: var(--ct-s5) !important;
    text-align: center;
    color: var(--ct-ink-faint);
    font-size: var(--ct-t-body);
}

/* =====================================================================
   Compact form system
   Fixes the "Register Student" form: excessive vertical rhythm and an
   unbounded width. Two columns on desktop, one on mobile.
   ===================================================================== */

body:not(.login-body) .ct-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ct-s3) var(--ct-s4);
    align-items: start;
}

body:not(.login-body) .ct-form-grid > .ct-field-wide,
body:not(.login-body) .ct-form-grid > .ct-form-section {
    grid-column: 1 / -1;
}

/* Section heading inside a form, so related fields read as a group. */
body:not(.login-body) .ct-form-section {
    display: flex;
    align-items: center;
    gap: var(--ct-s2);
    margin-top: var(--ct-s2);
    padding-bottom: var(--ct-s2);
    border-bottom: 1px solid var(--ct-line);
    font-size: var(--ct-t-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ct-ink-soft);
}

body:not(.login-body) .ct-form-section:first-child { margin-top: 0; }

body:not(.login-body) .ct-form-grid label {
    display: block;
    margin: 0 !important;
    font-size: var(--ct-t-small);
    font-weight: 600;
    color: var(--ct-ink);
}

body:not(.login-body) .ct-form-grid label > span:first-child {
    display: block;
    margin-bottom: 5px;
}

/* Required marker: a red asterisk is the convention users already read. */
body:not(.login-body) .ct-req::after {
    content: " *";
    color: var(--ct-bad);
    font-weight: 700;
}

body:not(.login-body) .ct-form-grid input,
body:not(.login-body) .ct-form-grid select,
body:not(.login-body) .ct-form-grid textarea {
    width: 100%;
    margin: 0 !important;
    min-height: 38px;
    padding: 8px 11px !important;
    font-size: var(--ct-t-body);
}

body:not(.login-body) .ct-form-grid textarea { min-height: 74px; }

body:not(.login-body) .ct-field-hint {
    display: block;
    margin-top: 4px;
    font-size: var(--ct-t-micro);
    font-weight: 500;
    color: var(--ct-ink-faint);
}

/* Action row pinned to the end of a form. */
body:not(.login-body) .ct-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--ct-s2);
    margin-top: var(--ct-s4);
    padding-top: var(--ct-s3);
    border-top: 1px solid var(--ct-line);
}

@media (max-width: 720px) {
    body:not(.login-body) .ct-form-grid { grid-template-columns: minmax(0, 1fr); }
    body:not(.login-body) .ct-form-actions { flex-direction: column-reverse; }
    body:not(.login-body) .ct-form-actions > * { width: 100%; justify-content: center; }
}

/* =====================================================================
   Modal sizing — a form in a dialog needs a readable max width, not the
   full viewport.
   ===================================================================== */

body:not(.login-body) .modal-card {
    width: min(100%, 620px);
    max-height: min(88vh, 900px);
    overflow-y: auto;
}

body:not(.login-body) .modal-card.wide-modal { width: min(100%, 820px); }

/* =====================================================================
   Accessibility floor
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    body:not(.login-body) *,
    body:not(.login-body) *::before,
    body:not(.login-body) *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Screen-reader-only text, for icon-only controls. */
body:not(.login-body) .ct-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =====================================================================
   Register Student modal
   The form is seven short fields, so 720px left every input stretched
   well past a comfortable reading width and the rows carried more air
   than they needed. Narrowed and tightened; the field set, names,
   required flags and validation are unchanged.
   ===================================================================== */

body:not(.login-body) #studentRegisterModal .modal-header {
    align-items: flex-start;
    gap: var(--ct-s3);
    padding: var(--ct-s4) var(--ct-s5) var(--ct-s3) !important;
    border-bottom: 1px solid var(--ct-line);
}

body:not(.login-body) #studentRegisterModal .modal-header h2 {
    font-size: var(--ct-t-h2) !important;
    margin: 0 0 2px !important;
}

body:not(.login-body) #studentRegisterModal .modal-header p {
    margin: 0 !important;
    font-size: var(--ct-t-small) !important;
    color: var(--ct-ink-faint) !important;
}

/* =====================================================================
   Cross-panel unification
   ---------------------------------------------------------------------
   Admin, Agency and Intern each grew their own card component:
   .stat-card (admin dashboard + intern), .agency-kpi (agency) and
   .ct-stat (analytics). All three keep their own markup and links —
   only their appearance is unified here, so the three roles read as one
   application without touching any href, handler or query.
   ===================================================================== */

/* ---- Headings on dark surfaces -------------------------------------
   The UI layer sets a dark ink colour on every h1/h2/h3. On the agency
   hero — a dark teal gradient — that rendered the agency name at roughly
   1.3:1 against its own background, effectively invisible. Panels that
   paint a dark surface opt their headings back to white here. */

body:not(.login-body) .agency-hero h1,
body:not(.login-body) .agency-hero h2,
body:not(.login-body) .agency-hero h3,
body:not(.login-body) .system-overview h1,
body:not(.login-body) .system-overview h2,
body:not(.login-body) .system-overview h3,
body:not(.login-body) .student-hero h1,
body:not(.login-body) .student-hero h2,
body:not(.login-body) .student-hero h3 {
    color: #FFFFFF !important;
}

/* The hero gradient runs to #2F7770 at its lightest. Measured against that
   worst-case stop, the previous 82%/78% alphas fell to 3.7:1 and 3.3:1.
   Solid #E9F4EF gives 4.67:1 and 92% white gives 4.7:1 across the whole
   gradient. */
body:not(.login-body) .agency-hero p,
body:not(.login-body) .student-hero p {
    color: #E9F4EF !important;
}

body:not(.login-body) .agency-eyebrow,
body:not(.login-body) .agency-hero .agency-eyebrow {
    color: rgba(255, 255, 255, .92) !important;
    font-size: var(--ct-t-micro);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

body:not(.login-body) .agency-hero {
    padding: var(--ct-s5) var(--ct-s6);
    border-radius: var(--ct-r-card);
}

/* ---- One stat card, three markups ---------------------------------- */

body:not(.login-body) .dashboard-stats,
body:not(.login-body) .agency-kpis,
body:not(.login-body) .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--ct-s3);
}

body:not(.login-body) .stat-card,
body:not(.login-body) .agency-kpi {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--ct-s2) !important;
    padding: var(--ct-s4) !important;
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-line) !important;
    border-radius: var(--ct-r-card) !important;
    box-shadow: var(--ct-shadow) !important;
    color: inherit !important;
    text-decoration: none;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

/* These cards are links, so they need a real hover and focus affordance. */
body:not(.login-body) a.stat-card:hover,
body:not(.login-body) a.agency-kpi:hover {
    border-color: var(--ct-line-strong) !important;
    box-shadow: var(--ct-shadow-lift) !important;
    transform: translateY(-1px);
}

body:not(.login-body) a.stat-card:focus-visible,
body:not(.login-body) a.agency-kpi:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 2px;
}

/* Agency markup is <div><small><strong><span></div><i> — the icon is a
   sibling after the text, so it is pulled to the top-right corner to match
   the admin card's icon placement. */
body:not(.login-body) .agency-kpi > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

body:not(.login-body) .agency-kpi > .material-icons-outlined,
body:not(.login-body) .stat-card .stat-icon {
    position: absolute;
    top: var(--ct-s4);
    right: var(--ct-s4);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    font-size: 17px !important;
    border-radius: 9px;
    background: var(--ct-tint);
    color: var(--ct-accent);
}

body:not(.login-body) .stat-card .stat-icon > .material-icons-outlined {
    font-size: 17px !important;
}

/* Label */
body:not(.login-body) .agency-kpi small,
body:not(.login-body) .stat-card .stat-copy > span {
    display: block;
    padding-right: 36px;          /* clear the absolute icon */
    font-size: var(--ct-t-small) !important;
    font-weight: 600 !important;
    color: var(--ct-ink-soft) !important;
    line-height: 1.35;
}

/* Value */
body:not(.login-body) .agency-kpi strong,
body:not(.login-body) .stat-card .stat-copy > strong {
    display: block;
    font-size: 27px !important;
    font-weight: 700 !important;
    line-height: 1.15;
    color: var(--ct-ink) !important;
    font-variant-numeric: tabular-nums;
}

/* Supporting line */
body:not(.login-body) .agency-kpi span,
body:not(.login-body) .stat-card .metric-caption {
    font-size: var(--ct-t-micro) !important;
    color: var(--ct-ink-faint) !important;
    line-height: 1.4;
}

body:not(.login-body) .stat-card .stat-card-top {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: none !important;
}

body:not(.login-body) .stat-card .stat-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The admin dashboard's caption row put "Live database total" and
   "View module" side by side in a narrow card, which wrapped to three
   lines each. Stacked and sized down, it reads on one line. */
body:not(.login-body) .stat-card .metric-caption {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ct-s2);
    margin: 0 !important;
}

body:not(.login-body) .stat-card .metric-caption > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Share-of-total bar */
body:not(.login-body) .stat-card .metric-bar {
    height: 4px !important;
    margin: 2px 0 0 !important;
    border-radius: var(--ct-r-pill);
    background: var(--ct-tint-deep) !important;
    overflow: hidden;
}

body:not(.login-body) .stat-card .metric-bar > span {
    display: block;
    height: 100%;
    border-radius: var(--ct-r-pill);
    background: var(--ct-accent) !important;
}

/* ---- Partner brand chip -------------------------------------------
   Fixed to the bottom-right, it sat on top of the last quick-access card
   on the agency dashboard. It is decorative and already pointer-events:none,
   so the fix is to reserve a gutter for it rather than let content run
   underneath, and to stand it down on small screens where the space is
   needed for content. */

body.partner-watermarked main {
    padding-bottom: 72px;
}

body:not(.login-body) .agency-brand-chip {
    padding: 6px 12px !important;
    font-size: var(--ct-t-micro) !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, .92) !important;
    border-color: var(--ct-line) !important;
    box-shadow: var(--ct-shadow) !important;
}

@media (max-width: 900px) {
    body:not(.login-body) .agency-brand-chip { display: none !important; }
    body.partner-watermarked main { padding-bottom: var(--ct-s5); }
}

/* ---- Quick-access cards, shared by all three roles ------------------ */

body:not(.login-body) .quick-access-card,
body:not(.login-body) .student-action-grid > a {
    border-radius: var(--ct-r-card);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

body:not(.login-body) .quick-access-card:focus-visible,
body:not(.login-body) .student-action-grid > a:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 2px;
}

/* A two-line label (e.g. "Admin-Sent Documents") pushed its value below the
   others, breaking the row's baseline. Reserving two lines on every label
   aligns the numbers across the row regardless of label length. */
body:not(.login-body) .agency-kpi small,
body:not(.login-body) .stat-card .stat-copy > span,
body:not(.login-body) .ct-stat h3 {
    min-height: 2.7em;
}

@media (max-width: 620px) {
    body:not(.login-body) .agency-kpi small,
    body:not(.login-body) .stat-card .stat-copy > span,
    body:not(.login-body) .ct-stat h3 {
        min-height: 0;
    }
}

/* =====================================================================
   Tables — Reports and Documents
   ---------------------------------------------------------------------
   These two modules carry the densest tables in the app (10 columns).
   The goal is scannability: one consistent action affordance, badges that
   do not wrap, and dates that stay on one line.
   ===================================================================== */

body:not(.login-body) .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ct-r-control);
}

body:not(.login-body) table th {
    font-size: var(--ct-t-micro) !important;
    font-weight: 700 !important;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--ct-ink-soft) !important;
    white-space: nowrap;
}

body:not(.login-body) table td {
    font-size: var(--ct-t-body);
    vertical-align: middle;
}

/* A badge that wraps mid-word reads as broken. */
body:not(.login-body) .status-badge {
    white-space: nowrap;
    font-size: var(--ct-t-micro) !important;
    font-weight: 700 !important;
    padding: 4px 9px !important;
    border-radius: var(--ct-r-pill) !important;
}

body:not(.login-body) .status-badge.success { background: var(--ct-good-bg) !important; color: var(--ct-good) !important; }
body:not(.login-body) .status-badge.warning { background: var(--ct-warn-bg) !important; color: var(--ct-warn) !important; }
body:not(.login-body) .status-badge.danger  { background: var(--ct-bad-bg) !important;  color: var(--ct-bad) !important; }
body:not(.login-body) .status-badge.info    { background: var(--ct-info-bg) !important; color: var(--ct-info) !important; }

/* File actions: View / Download become a consistent pair of small
   controls rather than two stacked underlined links. */
body:not(.login-body) td .inline-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
}

body:not(.login-body) td .table-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border: 1px solid var(--ct-line);
    border-radius: 8px;
    background: var(--ct-surface);
    font-size: var(--ct-t-micro);
    font-weight: 600;
    color: var(--ct-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: background .16s ease, border-color .16s ease;
}

body:not(.login-body) td .table-link:hover {
    background: var(--ct-tint);
    border-color: var(--ct-line-strong);
}

body:not(.login-body) td .table-link:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 2px;
}

/* Row-level action buttons should not wrap their label. */
body:not(.login-body) td .secondary-btn,
body:not(.login-body) td button {
    white-space: nowrap;
}

/* Timestamps read better on one line; the cell can widen instead. */
body:not(.login-body) table td small {
    color: var(--ct-ink-faint);
    line-height: 1.4;
}

/* Zebra-free rows with a quiet hover, so the eye tracks across 10 columns. */
body:not(.login-body) table tbody tr:hover {
    background: var(--ct-surface-sunken);
}

/* Below tablet the widest tables scroll horizontally inside their card
   rather than forcing the page to scroll. */
@media (max-width: 900px) {
    body:not(.login-body) .table-wrap { margin-inline: 0; }
    body:not(.login-body) table { min-width: 620px; }
}

/* =====================================================================
   Approve / Reject hierarchy
   ---------------------------------------------------------------------
   Both actions rendered as identical solid dark buttons, which gave a
   destructive action the same visual weight as the affirmative one.
   The classes already existed in the markup; only their styling differs.
   ===================================================================== */

body:not(.login-body) .btn-approve {
    background: var(--ct-accent) !important;
    border: 1px solid var(--ct-accent) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

body:not(.login-body) .btn-approve:hover {
    background: var(--ct-accent-hover) !important;
    border-color: var(--ct-accent-hover) !important;
}

body:not(.login-body) .btn-decline {
    background: var(--ct-surface) !important;
    border: 1px solid var(--ct-line-strong) !important;
    color: var(--ct-bad) !important;
    box-shadow: none !important;
}

body:not(.login-body) .btn-decline:hover {
    background: var(--ct-bad-bg) !important;
    border-color: var(--ct-bad) !important;
}

body:not(.login-body) .btn-approve,
body:not(.login-body) .btn-decline {
    min-height: 32px;
    padding: 6px 12px !important;
    border-radius: 9px !important;
    font-size: var(--ct-t-small) !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

body:not(.login-body) .btn-approve:focus-visible,
body:not(.login-body) .btn-decline:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 2px;
}

/* =====================================================================
   Accessibility corrections
   ===================================================================== */

/* Checkboxes in bulk-action tables were 16–18px, below the 24px target
   floor. Selection is the primary interaction on those tables. */
body:not(.login-body) table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ct-accent);
    cursor: pointer;
}

/* The hit area is enlarged with padding on the cell so the visual size
   stays tidy while the target meets 24px. */
body:not(.login-body) table td:first-child:has(input[type="checkbox"]),
body:not(.login-body) table th:first-child:has(input[type="checkbox"]) {
    padding: var(--ct-s3) !important;
}

/* Inline record links sit in running text, so they keep their text size,
   but they get a clear focus ring and underline affordance on hover. */
body:not(.login-body) .student-name-link:focus-visible,
body:not(.login-body) .panel-link:focus-visible {
    outline: 2px solid var(--ct-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

body:not(.login-body) .student-name-link:hover {
    text-decoration: underline;
}

/* =====================================================================
   Upgrade v2 components (formerly crimtrack-upgrade.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade layer
   ---------------------------------------------------------------------
   Styles for components introduced by this upgrade:

     · Team Leader directory cards
     · Team Leader search / assigned-student panel (Assign Intern)
     · Searchable select
     · Shared date filter toolbar
     · Modular photo attendance cards
     · Kiosk "today" status strip

   This file loads LAST, after style.css, the role stylesheet and
   crimtrack-ui.css. It only adds new class names — no existing selector
   is redefined — so removing this one <link> cannot alter any screen
   that existed before the upgrade.

   Colours reference the project's legacy aliases (--white, --line,
   --text, --muted, --soft, --primary) because those are the tokens the
   dark theme re-declares, so every component below themes automatically.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Shared toolbar shell
   --------------------------------------------------------------------- */

.ct-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 16px;
    margin-bottom: 18px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.ct-toolbar label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
    flex: 1 1 170px;
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
}

.ct-toolbar label > span { color: var(--muted); font-weight: 600; }

.ct-toolbar input,
.ct-toolbar select {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    font-size: .9rem;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.ct-toolbar input:focus,
.ct-toolbar select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

.ct-toolbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.ct-toolbar-actions .btn,
.ct-toolbar-actions button,
.ct-toolbar-actions a.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ct-result-count {
    margin: 0 0 14px;
    font-size: .88rem;
    color: var(--muted);
}

.ct-result-count strong { color: var(--text); }

/* ---------------------------------------------------------------------
   Date filter
   --------------------------------------------------------------------- */

.ct-date-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
    padding: 16px;
    margin-bottom: 18px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.ct-date-filter-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    flex: 1 1 420px;
}

.ct-date-filter-fields label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 140px;
    min-width: 140px;
    margin: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}

.ct-date-filter-fields input {
    padding: 9px 11px;
    font: inherit;
    font-size: .9rem;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.ct-date-filter-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ct-date-filter-actions button,
.ct-date-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ct-date-filter-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-basis: 100%;
    margin: 0;
    font-size: .84rem;
    color: var(--muted);
}

.ct-date-filter-summary .material-icons-outlined { font-size: 1.05rem; }

.ct-date-filter-summary.is-active {
    font-weight: 600;
    color: var(--primary);
}

/* ---------------------------------------------------------------------
   Searchable select
   --------------------------------------------------------------------- */

.ct-searchable { display: flex; flex-direction: column; gap: 7px; }

.ct-searchable-search {
    position: relative;
    display: flex;
    align-items: center;
}

.ct-searchable-search .material-icons-outlined {
    position: absolute;
    left: 10px;
    font-size: 1.1rem;
    color: var(--muted);
    pointer-events: none;
}

.ct-searchable-input {
    width: 100%;
    padding: 9px 11px 9px 34px;
    font: inherit;
    font-size: .88rem;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.ct-searchable select { width: 100%; }

.ct-searchable-note {
    margin: 0;
    font-size: .8rem;
    color: #B4442F;
}

.ct-searchable-empty small { color: var(--muted); }

/* ---------------------------------------------------------------------
   Team Leader directory
   --------------------------------------------------------------------- */

.ct-leader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 18px;
}

.ct-leader-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.ct-leader-head {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.ct-leader-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--soft);
}

.ct-leader-identity { flex: 1 1 auto; min-width: 0; }

.ct-leader-identity h3 {
    margin: 0 0 3px;
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--text);
    word-break: break-word;
}

.ct-leader-contact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0 0;
    font-size: .82rem;
    color: var(--muted);
}

.ct-leader-contact span {
    display: flex;
    align-items: center;
    gap: 6px;
    word-break: break-word;
}

.ct-leader-contact .material-icons-outlined { font-size: 1rem; flex: 0 0 auto; }

.ct-leader-counts {
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    background: var(--soft);
    border-bottom: 1px solid var(--line);
}

.ct-leader-counts div {
    flex: 1;
    text-align: center;
}

.ct-leader-counts strong {
    display: block;
    font-size: 1.32rem;
    line-height: 1.2;
    color: var(--primary);
}

.ct-leader-counts small {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.ct-leader-students {
    flex: 1 1 auto;
    padding: 6px 0;
    max-height: 340px;
    overflow-y: auto;
}

.ct-leader-student {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 10px 18px;
    border-bottom: 1px solid var(--line);
}

.ct-leader-student:last-child { border-bottom: 0; }

.ct-leader-student img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    border-radius: 50%;
}

.ct-leader-student-info { flex: 1 1 auto; min-width: 0; }

.ct-leader-student-info strong {
    display: block;
    font-size: .88rem;
    color: var(--text);
}

.ct-leader-student-info small {
    display: block;
    font-size: .76rem;
    color: var(--muted);
}

.ct-leader-empty {
    padding: 22px 18px;
    text-align: center;
    font-size: .86rem;
    color: var(--muted);
}

.ct-leader-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: var(--soft);
}

.ct-leader-foot form { display: inline-flex; margin: 0; }

.ct-leader-foot button,
.ct-leader-foot .btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
}

/* ---------------------------------------------------------------------
   Assign Intern — Team Leader panel
   --------------------------------------------------------------------- */

.ct-tl-assign {
    display: grid;
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: 18px;
    align-items: start;
}

.ct-tl-assign-side {
    padding: 16px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.ct-tl-assign-side h3 {
    margin: 0 0 4px;
    font-size: .96rem;
    color: var(--text);
}

.ct-tl-assign-side p.muted {
    margin: 0 0 13px;
    font-size: .82rem;
}

.ct-tl-results {
    min-height: 120px;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.ct-tl-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

.ct-tl-selected h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
}

.ct-tl-selected small {
    display: block;
    font-weight: 400;
    font-size: .8rem;
    color: var(--muted);
}

.ct-tl-student-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-tl-student {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 11px;
    cursor: pointer;
}

.ct-tl-student:hover { border-color: var(--primary); }

.ct-tl-student input { flex: 0 0 auto; margin: 0; width: 17px; height: 17px; accent-color: var(--primary); }

.ct-tl-student-copy { flex: 1 1 auto; min-width: 0; }

.ct-tl-student-copy strong {
    display: block;
    font-size: .87rem;
    font-weight: 600;
    color: var(--text);
}

.ct-tl-student-copy small {
    display: block;
    font-size: .76rem;
    color: var(--muted);
}

.ct-tl-placeholder,
.ct-tl-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 26px 16px;
    text-align: center;
    font-size: .87rem;
    color: var(--muted);
}

.ct-tl-placeholder .material-icons-outlined,
.ct-tl-loading .material-icons-outlined {
    font-size: 2rem;
    color: var(--line);
}

.ct-tl-bulk {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.ct-tl-bulk button {
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ---------------------------------------------------------------------
   Photo attendance cards
   --------------------------------------------------------------------- */

.ct-attendance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
    gap: 18px;
}

.ct-attendance-card {
    display: grid;
    grid-template-columns: 132px 1fr;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.ct-attendance-photo {
    position: relative;
    background: var(--soft);
    border-right: 1px solid var(--line);
}

.ct-attendance-photo a {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 168px;
    position: relative;
}

.ct-attendance-photo img {
    width: 100%;
    height: 100%;
    min-height: 168px;
    object-fit: cover;
    display: block;
}

.ct-attendance-photo-zoom {
    position: absolute;
    right: 7px;
    bottom: 7px;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border-radius: 50%;
    color: #fff;
    background: rgba(11, 79, 74, .82);
}

.ct-attendance-photo-zoom .material-icons-outlined { font-size: 1.05rem; }

.ct-attendance-photo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 100%;
    min-height: 168px;
    color: var(--muted);
}

.ct-attendance-photo-empty .material-icons-outlined { font-size: 1.9rem; }

.ct-attendance-body { padding: 15px 16px; min-width: 0; }

.ct-attendance-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 11px;
    margin-bottom: 11px;
    border-bottom: 1px solid var(--line);
}

.ct-attendance-person {
    display: flex;
    gap: 9px;
    align-items: center;
    min-width: 0;
}

.ct-attendance-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    object-fit: cover;
    border-radius: 50%;
}

.ct-attendance-person strong {
    display: block;
    font-size: .92rem;
    line-height: 1.3;
    color: var(--text);
    word-break: break-word;
}

.ct-attendance-person small {
    display: block;
    font-size: .76rem;
    color: var(--muted);
}

.ct-attendance-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 9px 14px;
    margin: 0 0 12px;
}

.ct-attendance-meta div { min-width: 0; }

.ct-attendance-meta dt {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .71rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: var(--muted);
}

.ct-attendance-meta dt .material-icons-outlined { font-size: .92rem; }

.ct-attendance-meta dd {
    margin: 2px 0 0;
    font-size: .86rem;
    font-weight: 500;
    color: var(--text);
    word-break: break-word;
}

.ct-attendance-verify {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ct-attendance-verify .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .74rem;
}

.ct-attendance-verify .material-icons-outlined { font-size: .95rem; }

.ct-attendance-address {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    margin: 11px 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--muted);
}

.ct-attendance-address .material-icons-outlined { font-size: 1rem; flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   Kiosk — today's status strip
   --------------------------------------------------------------------- */

.ct-kiosk-today {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 15px 18px;
    margin-bottom: 18px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.ct-kiosk-today-item {
    display: flex;
    gap: 9px;
    align-items: center;
    flex: 1 1 165px;
}

.ct-kiosk-today-item .material-icons-outlined {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    color: var(--primary);
    background: var(--white);
    border: 1px solid var(--line);
}

.ct-kiosk-today-item small {
    display: block;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    color: var(--muted);
}

.ct-kiosk-today-item strong {
    display: block;
    font-size: .95rem;
    color: var(--text);
}

.ct-kiosk-history-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .85rem;
}

/* ---------------------------------------------------------------------
   Small helpers
   --------------------------------------------------------------------- */

.ct-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 42px 20px;
    text-align: center;
    color: var(--muted);
}

.ct-empty .material-icons-outlined { font-size: 2.4rem; color: var(--line); }

.ct-empty p { margin: 0; font-size: .92rem; }

.ct-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: flex-end;
}

.ct-inline-form > label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1 1 210px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
}

.ct-tl-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.ct-tl-cell .ct-tl-change {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    font-size: .76rem;
    color: var(--primary);
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: underline;
}

.ct-tl-cell .ct-tl-change .material-icons-outlined { font-size: .9rem; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .ct-tl-assign { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .ct-attendance-grid,
    .ct-leader-grid { grid-template-columns: 1fr; }

    .ct-attendance-card { grid-template-columns: 1fr; }

    .ct-attendance-photo { border-right: 0; border-bottom: 1px solid var(--line); }

    .ct-attendance-photo a,
    .ct-attendance-photo img,
    .ct-attendance-photo-empty { min-height: 200px; }

    .ct-date-filter-fields { flex-direction: column; }

    .ct-date-filter-actions,
    .ct-toolbar-actions { width: 100%; }

    .ct-date-filter-actions button,
    .ct-date-filter-actions .btn,
    .ct-toolbar-actions button,
    .ct-toolbar-actions .btn { flex: 1 1 auto; justify-content: center; }

    .ct-toolbar label { min-width: 100%; flex-basis: 100%; }

    .ct-tl-student-list { grid-template-columns: 1fr; }

    .ct-leader-counts { flex-wrap: wrap; }
}

/* Dark theme: the tokens above already flip, these fix the few fixed colours. */
:root[data-theme="dark"] .ct-attendance-photo-zoom { background: rgba(4, 18, 15, .85); }
:root[data-theme="dark"] .ct-searchable-note { color: #F0A28F; }

/* =====================================================================
   Upgrade v3 (formerly crimtrack-upgrade-v3.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade layer v3
   ---------------------------------------------------------------------
   Styles for this upgrade:

     1.  Responsive user profile (Admin / Agency / Student / Team Leader)
     2.  Student status tiles on the student profile
     3.  Compact icon row actions with tooltips
     4.  Password fields with a show/hide control
     5.  Merit and demerit recording and ledger
     6.  Performance evaluation form and export controls
     7.  Attendance kiosk Time In / Time Out toggle
     8.  Document recipient picker

   Loads after style.css, the role stylesheet, crimtrack-ui.css and
   crimtrack-upgrade.css.

   Sections 1 and 2 are the only places this file re-declares an
   existing selector, and it does so deliberately: .profile-summary-card
   is used by two unrelated components (the profile identity card and
   the student status tiles) whose rules currently overwrite each other.
   Those blocks are scoped to a parent so the two stop colliding.
   Everything else below introduces new class names only.

   Colours use the project's legacy aliases (--white, --line, --text,
   --muted, --soft, --primary) so every component themes automatically
   in dark mode.
   ===================================================================== */


/* =====================================================================
   1. Responsive user profile
   ---------------------------------------------------------------------
   The page markup is unchanged; only layout is corrected.

   The problem: .profile-summary-card is declared twice in style.css.
   The later declaration (display:flex; align-items:center; padding:16px)
   belongs to the small status tiles on student-profile.php, but it also
   matched the profile page's identity card, turning it into a one-row
   flex container. The gradient banner then shrank to its content width
   instead of filling the card, the "Available Features" list was pushed
   alongside it rather than beneath it, and an earlier
   "padding: 0 !important" stripped the padding from the status tiles in
   return. Scoping each component to its own parent resolves both.
   ===================================================================== */

body.profile-page .profile-layout > .profile-summary-card {
    display: block;
    align-items: initial;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
    min-width: 0;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 14px;
}

/* Sticky positioning is only safe where there is room beside the main
   column. Below the two-column breakpoint it pinned the card over the
   page header while scrolling. */
@media (min-width: 981px) {
    body.profile-page .profile-layout > .profile-summary-card {
        position: sticky;
        top: 18px;
    }
}

@media (max-width: 980px) {
    body.profile-page .profile-layout > .profile-summary-card {
        position: static;
        top: auto;
    }
}

body.profile-page .profile-identity-banner {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 26px 20px 22px;
}

body.profile-page .profile-identity-banner h2 {
    margin: 0 0 4px;
    font-size: clamp(1.05rem, 3.6vw, 1.3rem);
    line-height: 1.3;
    /* Long display names used to push the card wider than its column. */
    overflow-wrap: anywhere;
}

body.profile-page .profile-identity-banner .muted {
    margin: 0;
    font-size: .86rem;
    overflow-wrap: anywhere;
}

body.profile-page .profile-identity-banner .profile-avatar-large {
    display: block;
    width: clamp(88px, 26vw, 128px);
    height: clamp(88px, 26vw, 128px);
    margin: 0 auto 14px;
    object-fit: cover;
}

body.profile-page .profile-summary-card .profile-feature-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 18px;
    border-top: 1px solid var(--line);
}

body.profile-page .profile-summary-card .profile-feature-list strong {
    width: 100%;
    margin-bottom: 4px;
    font-size: .9rem;
}

/* The status badge is a flex child of the banner in some role
   stylesheets; force it back to an inline chip. */
body.profile-page .profile-role-badge {
    display: inline-block;
    max-width: 100%;
}

body.profile-page .profile-main-column {
    display: grid;
    gap: 18px;
    min-width: 0;
}

body.profile-page .settings-card {
    min-width: 0;
}

body.profile-page .settings-card-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

body.profile-page .settings-card-heading h2 {
    margin: 0;
    font-size: 1.04rem;
    line-height: 1.35;
}

body.profile-page .settings-card-heading p {
    margin: 2px 0 0;
    font-size: .84rem;
}

body.profile-page .settings-form label,
body.profile-page .profile-form-grid label {
    min-width: 0;
}

body.profile-page .settings-form input,
body.profile-page .settings-form select,
body.profile-page .settings-form textarea,
body.profile-page .profile-form-grid input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* A file input cannot shrink below the width of its button plus the
   file name, which is what pushed the profile form off-screen on
   narrow devices. */
body.profile-page .settings-form input[type="file"] {
    padding: 9px;
    font-size: .84rem;
}

@media (max-width: 980px) {
    body.profile-page .profile-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    body.profile-page .profile-secondary-grid,
    body.profile-page .settings-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    body.profile-page .profile-form-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.profile-page .settings-card,
    body.profile-page .panel {
        padding: 16px;
    }

    body.profile-page .settings-card-heading .material-icons-outlined {
        font-size: 22px;
    }

    /* Full-width, comfortably tappable primary actions. */
    body.profile-page .settings-form > button,
    body.profile-page .settings-form button[type="submit"] {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }

    body.profile-page .theme-setting-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    body.profile-page .theme-setting-row .theme-switch {
        align-self: flex-end;
    }
}

/* The mobile tab bar is fixed to the bottom; give the last card room so
   it is not covered on small screens. */
@media (max-width: 900px) {
    body.profile-page main {
        padding-bottom: 86px;
    }
}


/* =====================================================================
   2. Student status tiles (student-profile.php)
   Restores the padding the profile-page rule removed.
   ===================================================================== */

.profile-summary-metrics > .profile-summary-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px !important;
    text-align: left;
    border-radius: 14px;
}

.profile-summary-metrics > .profile-summary-card > div {
    min-width: 0;
}

@media (max-width: 640px) {
    .profile-summary-metrics {
        grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
        gap: 10px;
    }

    .profile-summary-metrics > .profile-summary-card {
        padding: 12px !important;
    }

    .profile-summary-metrics > .profile-summary-card strong {
        font-size: 1.15rem;
    }
}


/* =====================================================================
   3. Icon row actions
   ===================================================================== */

.ct-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.ct-icon-action-form {
    display: inline-flex;
    margin: 0;
}

.ct-icon-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 36px keeps the control inside a compact table row while staying
       within reach of a thumb; it grows to 44px on touch layouts below. */
    width: 36px;
    height: 36px;
    padding: 0;
    font: inherit;
    color: var(--muted);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease,
                border-color .15s ease, transform .15s ease;
}

.ct-icon-action .material-icons-outlined {
    font-size: 19px;
    line-height: 1;
}

.ct-icon-action:hover,
.ct-icon-action:focus-visible {
    transform: translateY(-1px);
}

.ct-icon-action:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.ct-icon-key:hover,
.ct-icon-key:focus-visible {
    color: #8A5A00;
    background: #FFF6E5;
    border-color: #E8C77A;
}

.ct-icon-view:hover,
.ct-icon-view:focus-visible {
    color: var(--primary);
    background: var(--soft);
    border-color: var(--primary);
}

.ct-icon-delete:hover,
.ct-icon-delete:focus-visible {
    color: #A32C2C;
    background: #FDECEC;
    border-color: #E9A7A7;
}

/* --- Tooltip -------------------------------------------------------
   Built from a data attribute so no extra markup is needed. Hidden on
   coarse pointers, where there is no hover state to reveal it and the
   aria-label already carries the meaning. */

.ct-icon-action[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(3px);
    z-index: 40;
    padding: 3px 7px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    color: #FFFFFF;
    background: #173B39;
    border-radius: 5px;
    box-shadow: 0 6px 18px rgba(7, 60, 57, .22);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.ct-icon-action[data-tooltip]::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    z-index: 40;
    width: 0;
    height: 0;
    transform: translateX(-50%) translateY(3px);
    border: 4px solid transparent;
    border-top-color: #173B39;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.ct-icon-action[data-tooltip]:hover::after,
.ct-icon-action[data-tooltip]:hover::before,
.ct-icon-action[data-tooltip]:focus-visible::after,
.ct-icon-action[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (hover: none) {
    .ct-icon-action[data-tooltip]::after,
    .ct-icon-action[data-tooltip]::before {
        display: none;
    }

    .ct-icon-action {
        width: 44px;
        height: 44px;
    }

    .ct-icon-action .material-icons-outlined {
        font-size: 21px;
    }
}


/* =====================================================================
   4. Password fields
   ===================================================================== */

.ct-password-field {
    min-width: 0;
}

.ct-password-input {
    position: relative;
    display: block;
    width: 100%;
}

.ct-password-input input {
    width: 100%;
    /* Room for the toggle button so the caret never runs under it. */
    padding-right: 46px !important;
    box-sizing: border-box;
}

.ct-password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.ct-password-toggle:hover,
.ct-password-toggle:focus-visible {
    color: var(--primary);
    background: var(--soft);
}

.ct-password-toggle .material-icons-outlined {
    font-size: 19px;
}


/* =====================================================================
   5. Merit and demerit
   ===================================================================== */

.ct-merit-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.ct-merit-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    min-width: 0;
}

.ct-merit-stat .material-icons-outlined {
    font-size: 26px;
    flex: 0 0 auto;
}

.ct-merit-stat div { min-width: 0; }

.ct-merit-stat small {
    display: block;
    margin-bottom: 2px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}

.ct-merit-stat strong {
    font-size: 1.4rem;
    line-height: 1.1;
}

.ct-merit-stat.is-merit .material-icons-outlined { color: #1F7A4D; }
.ct-merit-stat.is-demerit .material-icons-outlined { color: #A32C2C; }
.ct-merit-stat.is-net .material-icons-outlined { color: var(--primary); }
.ct-merit-stat.is-standing .material-icons-outlined { color: #8A5A00; }

.ct-merit-standing-value {
    font-size: 1.02rem !important;
    overflow-wrap: anywhere;
}

.ct-merit-overall {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    margin-bottom: 16px;
    font-size: .88rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--soft);
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
}

.ct-merit-overall .material-icons-outlined {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--primary);
}

/* --- Type chooser --------------------------------------------------- */

.ct-merit-type-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.ct-merit-type-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    background: var(--white);
    border: 2px solid var(--line);
    border-radius: 13px;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.ct-merit-type-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ct-merit-type-option .material-icons-outlined {
    font-size: 22px;
    color: var(--muted);
}

.ct-merit-type-option span.ct-merit-type-label {
    display: grid;
    gap: 1px;
    font-weight: 700;
    font-size: .92rem;
}

.ct-merit-type-option small {
    font-weight: 500;
    font-size: .74rem;
    color: var(--muted);
}

.ct-merit-type-option:has(input:checked).is-merit,
.ct-merit-type-option.is-merit.is-selected {
    border-color: #1F7A4D;
    background: #EDF7F1;
}

.ct-merit-type-option:has(input:checked).is-merit .material-icons-outlined,
.ct-merit-type-option.is-merit.is-selected .material-icons-outlined {
    color: #1F7A4D;
}

.ct-merit-type-option:has(input:checked).is-demerit,
.ct-merit-type-option.is-demerit.is-selected {
    border-color: #A32C2C;
    background: #FDECEC;
}

.ct-merit-type-option:has(input:checked).is-demerit .material-icons-outlined,
.ct-merit-type-option.is-demerit.is-selected .material-icons-outlined {
    color: #A32C2C;
}

.ct-merit-type-option input:focus-visible + .material-icons-outlined {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Ledger --------------------------------------------------------- */

.ct-merit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .01em;
    border-radius: 999px;
    white-space: nowrap;
}

.ct-merit-badge .material-icons-outlined { font-size: 14px; }

.ct-merit-badge.is-merit { color: #14603C; background: #DCF0E5; }
.ct-merit-badge.is-demerit { color: #8E2020; background: #FBE0E0; }

.ct-points-positive { color: #1F7A4D; font-weight: 700; white-space: nowrap; }
.ct-points-negative { color: #A32C2C; font-weight: 700; white-space: nowrap; }

.ct-merit-remark {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--muted);
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .ct-merit-summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
        gap: 10px;
    }

    .ct-merit-stat { padding: 12px; }
    .ct-merit-stat strong { font-size: 1.2rem; }

    .ct-merit-type-toggle {
        grid-template-columns: 1fr;
    }
}


/* =====================================================================
   6. Performance evaluation
   ===================================================================== */

.ct-criteria-list {
    display: grid;
    gap: 10px;
    margin: 0 0 16px;
}

.ct-criterion {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 16px;
    align-items: center;
    padding: 13px 15px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 13px;
}

.ct-criterion-info { min-width: 0; }

.ct-criterion-info strong {
    display: block;
    font-size: .92rem;
    line-height: 1.35;
}

.ct-criterion-info small {
    display: block;
    margin-top: 2px;
    font-size: .78rem;
    line-height: 1.45;
    color: var(--muted);
}

.ct-criterion-weight {
    display: inline-block;
    margin-top: 5px;
    padding: 2px 8px;
    font-size: .7rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--soft);
    border-radius: 999px;
}

.ct-rating-scale {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}

.ct-rating-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    font-size: .92rem;
    font-weight: 700;
    color: var(--muted);
    background: var(--white);
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.ct-rating-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ct-rating-option:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.ct-rating-option:has(input:checked),
.ct-rating-option.is-selected {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}

.ct-rating-option input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
}

.ct-scale-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 14px;
    font-size: .78rem;
    color: var(--muted);
}

.ct-scale-legend span { white-space: nowrap; }

/* --- Export --------------------------------------------------------- */

.ct-export-actions {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ct-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 9px;
    white-space: nowrap;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.ct-export-btn .material-icons-outlined { font-size: 17px; }

.ct-export-btn.is-pdf:hover,
.ct-export-btn.is-pdf:focus-visible {
    color: #A32C2C;
    background: #FDECEC;
    border-color: #E9A7A7;
}

.ct-export-btn.is-word:hover,
.ct-export-btn.is-word:focus-visible {
    color: #1B4F8A;
    background: #E8F0FB;
    border-color: #A9C4E8;
}

.ct-score-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 15px;
    margin-bottom: 14px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.ct-score-preview-row > span:first-child {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.ct-score-preview {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
}

.ct-score-preview.muted {
    font-size: .88rem;
    font-weight: 600;
    color: var(--muted);
}

.ct-score-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-weight: 700;
    white-space: nowrap;
}

.ct-score-pill small {
    font-weight: 500;
    font-size: .74rem;
    color: var(--muted);
}

@media (max-width: 760px) {
    .ct-criterion {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .ct-rating-scale {
        justify-content: space-between;
    }

    .ct-rating-option {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        height: 44px;
    }
}


/* =====================================================================
   7. Attendance kiosk toggle
   ===================================================================== */

.ct-kiosk-toggle-block {
    margin: 0 0 18px;
}

.ct-kiosk-toggle-label {
    display: block;
    margin-bottom: 9px;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

.ct-kiosk-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 7px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.ct-kiosk-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    /* Deliberately large: this is the kiosk's primary control and is
       often used on a phone, sometimes one-handed. */
    min-height: 60px;
    padding: 12px 14px;
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--white);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease,
                border-color .18s ease, box-shadow .18s ease;
}

.ct-kiosk-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ct-kiosk-option .material-icons-outlined {
    font-size: 23px;
}

.ct-kiosk-option:hover:not(.is-disabled) {
    color: var(--text);
}

.ct-kiosk-option:has(input:checked),
.ct-kiosk-option.is-selected {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(11, 79, 74, .22);
}

.ct-kiosk-option:has(input:checked).is-out,
.ct-kiosk-option.is-selected.is-out {
    background: #8A5A00;
    border-color: #8A5A00;
    box-shadow: 0 8px 20px rgba(138, 90, 0, .22);
}

.ct-kiosk-option input:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 4px;
}

/* A disabled option is still visible, so the student can see the action
   exists and read why it is unavailable, rather than it vanishing. */
.ct-kiosk-option.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    background: var(--soft);
}

.ct-kiosk-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    font-size: .83rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 11px;
}

.ct-kiosk-hint .material-icons-outlined {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--primary);
}

.ct-kiosk-hint.is-warning {
    color: #7A5A12;
    background: #FFF6E5;
    border-color: #E8C77A;
}

.ct-kiosk-hint.is-warning .material-icons-outlined { color: #8A5A00; }

@media (max-width: 560px) {
    .ct-kiosk-toggle {
        grid-template-columns: 1fr;
    }

    .ct-kiosk-option {
        min-height: 54px;
    }
}


/* =====================================================================
   8. Document recipient picker
   ===================================================================== */

.ct-recipient-field select {
    width: 100%;
    box-sizing: border-box;
}

.ct-recipient-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    font-size: .82rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 11px;
}

.ct-recipient-note .material-icons-outlined {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--primary);
}

.ct-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    font-size: .74rem;
    font-weight: 700;
    border-radius: 999px;
    white-space: nowrap;
}

.ct-recipient-chip .material-icons-outlined { font-size: 14px; }

.ct-recipient-chip.is-admin { color: #1B4F8A; background: #E8F0FB; }
.ct-recipient-chip.is-agency { color: #14603C; background: #DCF0E5; }


/* =====================================================================
   9. Shared helpers
   ===================================================================== */

/* Tables that must stay readable on a phone. The wrapper already
   scrolls; this stops individual cells collapsing to one character
   per line. */
.ct-table-compact th,
.ct-table-compact td {
    white-space: nowrap;
}

.ct-table-compact td.ct-cell-wrap,
.ct-table-compact th.ct-cell-wrap {
    white-space: normal;
    min-width: 200px;
}

.ct-empty-note {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 18px;
    font-size: .88rem;
    color: var(--muted);
    background: var(--soft);
    border: 1px dashed var(--line);
    border-radius: 12px;
}

.ct-empty-note .material-icons-outlined { font-size: 20px; }

.ct-section-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Dark theme: the fixed light backgrounds used by the semantic chips
   above stay legible, but the neutral surfaces must follow the theme. */
:root[data-theme="dark"] .ct-icon-action,
:root[data-theme="dark"] .ct-merit-stat,
:root[data-theme="dark"] .ct-criterion,
:root[data-theme="dark"] .ct-rating-option,
:root[data-theme="dark"] .ct-kiosk-option,
:root[data-theme="dark"] .ct-export-btn,
:root[data-theme="dark"] .ct-merit-type-option {
    background: var(--white);
    border-color: var(--line);
}

:root[data-theme="dark"] .ct-icon-action[data-tooltip]::after {
    background: #0F2B29;
}

/* =====================================================================
   Upgrade v4 (formerly crimtrack-upgrade-v4.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v4
   ---------------------------------------------------------------------
   Styles for the components added in v4. Uses the existing Deep Teal +
   Sage tokens from crimtrack-ui.css; no new palette, typeface or layout
   system is introduced.

     1. Base helpers        6. Documents (student, agency, admin)
     2. Dialogs + toast     7. Reports viewer + evaluation delete
     3. Date filter         8. Select Intern picker
     4. Photo verification  9. Attendance kiosk
     5. Attendance cards   10. Action icon colours   11. Dark theme
   ===================================================================== */

:root {
    --ct-act-view: #2F6690;
    --ct-act-edit: #946200;
    --ct-act-approve: #1F7A55;
    --ct-act-decline: #B4462B;
    --ct-act-delete: #B42318;
    --ct-act-download: #5B4BA0;
    --ct-act-search: #0B4F4A;
    --ct-act-add: #0B7285;
    --ct-act-settings: #56657A;
}

/* =====================================================================
   1. Base helpers
   ===================================================================== */

/* A button that opts out of the global solid-teal button rules (the
   exclusion lists in style.css / crimtrack-ui.css include .ct-bare). */
.ct-bare {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transform: none;
}

.ct-bare:hover { transform: none; }

.ct-date-hidden { display: none !important; }

.ct-inline-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ct-accent, #0B4F4A);
    text-decoration: none;
}

.ct-inline-link:hover { text-decoration: underline; }
.ct-inline-link .material-icons-outlined { font-size: 15px; }

/* =====================================================================
   2. Dialogs, confirmation, toast
   ===================================================================== */

.ct-dialog {
    position: fixed;
    inset: 0;
    z-index: 8000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(22, 54, 54, .48);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .16s ease;
}

.ct-dialog[hidden] { display: none !important; }
.ct-dialog.is-open { opacity: 1; }

.ct-dialog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
    max-height: min(90vh, 900px);
    max-height: min(90dvh, 900px);
    background: var(--ct-surface, #FFFFFF);
    color: var(--ct-ink, #12332F);
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(11, 79, 74, .22);
    overflow: hidden;
    transform: translateY(8px);
    transition: transform .18s ease;
    outline: none;
}

.ct-dialog.is-open .ct-dialog-card { transform: none; }

.ct-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--ct-line, #E3EBE7);
}

.ct-dialog-title { min-width: 0; }

body:not(.login-body) .ct-dialog-title h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
}

.ct-dialog-title p {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-dialog-close {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--ct-line, #E3EBE7);
    background: var(--ct-surface-sunken, #F4F8F6);
    color: var(--ct-ink, #12332F);
}

.ct-dialog-close:hover { background: var(--ct-tint-deep, #DDEAE4); }
.ct-dialog-close .material-icons-outlined { font-size: 20px; }

/* A dialog whose body and footer sit inside a <form> (Decline) needs the
   form to be the flex column, or the card's overflow clips the footer and
   its buttons cannot be reached. */
.ct-dialog-card > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

.ct-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ct-dialog-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--ct-line, #E3EBE7);
    background: var(--ct-surface-sunken, #F4F8F6);
}

.ct-dialog-foot[hidden] { display: none; }

.ct-dialog-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

body:not(.login-body) .ct-dialog-actions .btn-approve,
body:not(.login-body) .ct-dialog-actions .btn-decline,
body:not(.login-body) .ct-dialog-actions .action-danger,
body:not(.login-body) .ct-dialog-actions .secondary-btn {
    min-height: 40px;
    padding: 0 15px !important;
    font-size: 13.5px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ct-dialog.is-busy .ct-dialog-actions { opacity: .6; pointer-events: none; }

/* Confirmation */
.ct-confirm-card {
    width: min(100%, 440px);
    padding: 22px 22px 18px;
}

.ct-confirm-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: var(--ct-tint, #EEF5F1);
    color: var(--ct-accent, #0B4F4A);
}

.ct-confirm-icon.is-danger { background: #FBEEEC; color: var(--ct-act-delete); }

body:not(.login-body) .ct-confirm-card h2 { margin: 0 0 6px; font-size: 17px; }

.ct-confirm-message { font-size: 13.5px; line-height: 1.55; color: var(--ct-ink-soft, #5E7370); }
.ct-confirm-message p { margin: 0 0 8px; }

.ct-confirm-list {
    margin: 8px 0 10px;
    padding: 8px 12px 8px 28px;
    max-height: 160px;
    overflow-y: auto;
    border-radius: 10px;
    background: var(--ct-surface-sunken, #F4F8F6);
    color: var(--ct-ink, #12332F);
    font-size: 13px;
}

.ct-confirm-card .ct-dialog-actions { margin-top: 14px; }

body:not(.login-body) .ct-confirm-danger {
    border-radius: 11px !important;
    font-weight: 600 !important;
}

/* Toast */
.ct-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 8100;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: min(92vw, 420px);
    padding: 11px 16px;
    border-radius: 12px;
    background: #12332F;
    color: #FFFFFF;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: 0 12px 30px rgba(11, 79, 74, .28);
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
}

.ct-toast[hidden] { display: none; }
.ct-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ct-toast .material-icons-outlined { font-size: 19px; color: #8FD3B6; }
.ct-toast.is-error .material-icons-outlined { color: #F5A99F; }

/* =====================================================================
   3. Compact date filter
   ===================================================================== */

.ct-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 12px;
}

.ct-filter-count {
    margin: 0;
    font-size: 12.5px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-filter-count strong { color: var(--ct-ink, #12332F); }

.ct-datefilter {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--ct-line-strong, #D3E0DA);
    border-radius: 11px;
    background: var(--ct-surface, #FFFFFF);
}

.ct-datefilter.is-active {
    border-color: var(--ct-accent, #0B4F4A);
    background: var(--ct-tint, #EEF5F1);
}

.ct-datefilter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    min-width: 0;
    padding: 0 10px 0 11px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-ink, #12332F);
    white-space: nowrap;
}

.ct-datefilter-trigger > .material-icons-outlined:first-child {
    font-size: 19px;
    color: var(--ct-accent, #0B4F4A);
}

.ct-datefilter-label { overflow: hidden; text-overflow: ellipsis; }

.ct-datefilter-caret {
    font-size: 18px !important;
    color: var(--ct-ink-soft, #5E7370);
    transition: transform .16s ease;
}

.ct-datefilter.is-open .ct-datefilter-caret { transform: rotate(180deg); }

.ct-datefilter-clear {
    display: grid;
    place-items: center;
    width: 34px;
    border-left: 1px solid var(--ct-line-strong, #D3E0DA);
    border-radius: 0 10px 10px 0;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-datefilter-clear[hidden] { display: none; }
.ct-datefilter-clear:hover { color: var(--ct-act-delete); background: rgba(180, 35, 24, .06); }
.ct-datefilter-clear .material-icons-outlined { font-size: 17px; }

.ct-datefilter-trigger:focus-visible,
.ct-datefilter-clear:focus-visible {
    outline: 2px solid var(--ct-accent, #0B4F4A);
    outline-offset: 2px;
}

.ct-datefilter-pop {
    position: absolute;
    top: calc(100% + 6px);
    left: -1px;
    z-index: 900;
    width: 300px;
    padding: 12px;
    background: var(--ct-surface, #FFFFFF);
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(11, 79, 74, .18);
}

.ct-datefilter-pop[hidden] { display: none; }
.ct-datefilter-pop.align-right { left: auto; right: -1px; }

.ct-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ct-cal-title { font-size: 13.5px; font-weight: 700; color: var(--ct-ink, #12332F); }

.ct-cal-nav {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-cal-nav:hover { background: var(--ct-tint, #EEF5F1); color: var(--ct-accent, #0B4F4A); }

.ct-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px 0;
}

.ct-cal-dow {
    padding: 4px 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ct-ink-faint, #5D7774);
}

.ct-cal-day {
    position: relative;
    height: 36px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ct-ink, #12332F);
    border-radius: 9px;
}

.ct-cal-day:hover { background: var(--ct-tint, #EEF5F1); }
.ct-cal-day.is-outside { color: var(--ct-ink-faint, #5D7774); opacity: .55; }
.ct-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--ct-accent, #0B4F4A); }

/* A dot marks days that have attendance, so the student or agency can see
   where records are before they choose. */
.ct-cal-day.has-records::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--ct-accent, #0B4F4A);
}

.ct-cal-day.in-range { border-radius: 0; background: var(--ct-tint-deep, #DDEAE4); }

.ct-cal-day.is-start,
.ct-cal-day.is-end {
    background: var(--ct-accent, #0B4F4A);
    color: #FFFFFF;
    opacity: 1;
}

.ct-cal-day.is-start.in-range { border-radius: 9px 0 0 9px; }
.ct-cal-day.is-end.in-range { border-radius: 0 9px 9px 0; }
.ct-cal-day.is-start.has-records::after,
.ct-cal-day.is-end.has-records::after { background: #FFFFFF; }

.ct-cal-day:focus-visible {
    outline: 2px solid var(--ct-accent, #0B4F4A);
    outline-offset: 1px;
    z-index: 1;
}

.ct-cal-hint {
    margin: 8px 2px 10px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-cal-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--ct-line, #E3EBE7);
}

.ct-cal-presets { display: flex; flex-wrap: wrap; gap: 5px; }

.ct-chip {
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--ct-line-strong, #D3E0DA);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ct-ink, #12332F);
    white-space: nowrap;
}

.ct-chip:hover { border-color: var(--ct-accent, #0B4F4A); color: var(--ct-accent, #0B4F4A); }

.ct-cal-done {
    padding: 6px 12px;
    border-radius: 9px;
    background: var(--ct-accent, #0B4F4A);
    color: #FFFFFF;
    font-size: 12.5px;
    font-weight: 600;
}

.ct-cal-done:hover { background: var(--ct-accent-hover, #0E625C); }

/* Narrow phones: the calendar becomes a sheet pinned to the bottom edge. */
.ct-datefilter-pop.is-sheet {
    position: fixed;
    top: auto;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto;
    z-index: 7500;
    padding: 14px;
    box-shadow: 0 -8px 40px rgba(11, 79, 74, .28);
}

.ct-datefilter-pop.is-sheet .ct-cal-day { height: 40px; font-size: 13.5px; }

@media (max-width: 520px) {
    .ct-filter-bar { align-items: stretch; }
    .ct-datefilter { flex: 1 1 100%; }
    .ct-datefilter-trigger { flex: 1 1 auto; }
    .ct-datefilter-label { flex: 1 1 auto; text-align: left; }
}

/* =====================================================================
   4. Photo verification modal
   ===================================================================== */

.ct-photo-dialog { width: min(100%, 880px); }

.ct-pv-layout {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ct-pv-photo { margin: 0; position: sticky; top: 0; }

.ct-pv-photo img,
.ct-pv-nophoto {
    display: block;
    width: 100%;
    /* v22.14: attendance photos are 3:4 portrait (360 × 480). A square crop
       cut off the forehead and chin the reviewer needs to see; the whole
       photo is now shown (older square photos sit centred, not cropped). */
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: 14px;
    border: 1px solid var(--ct-line, #E3EBE7);
    background: #173B39;
}

.ct-pv-nophoto {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 8px;
    padding: 20px;
    text-align: center;
    background: var(--ct-surface-sunken, #F4F8F6);
    color: var(--ct-ink-soft, #5E7370);
    font-size: 13px;
}

.ct-pv-nophoto .material-icons-outlined { font-size: 34px; }

.ct-pv-photo figcaption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-pv-photo figcaption .material-icons-outlined { font-size: 16px; }

.ct-pv-details { display: grid; gap: 14px; min-width: 0; }

.ct-pv-person { display: flex; align-items: center; gap: 12px; }

.ct-pv-person img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ct-line, #E3EBE7);
}

.ct-pv-person > div { display: grid; gap: 1px; min-width: 0; }
.ct-pv-person strong { font-size: 15px; line-height: 1.3; }
.ct-pv-person small { font-size: 12px; color: var(--ct-ink-soft, #5E7370); }
.ct-pv-person .ct-inline-link { justify-self: start; margin-top: 2px; }

body:not(.login-body) .ct-pv-details h3 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-pv-list {
    display: grid;
    margin: 0;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 12px;
    overflow: hidden;
}

.ct-pv-list > div {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 12px;
    font-size: 13px;
}

.ct-pv-list > div + div { border-top: 1px solid var(--ct-line, #E3EBE7); }

.ct-pv-list dt {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-pv-list dt .material-icons-outlined { font-size: 16px; color: var(--ct-ink-faint, #5D7774); }
.ct-pv-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ct-ink, #12332F); }

.ct-pv-decision {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}

.ct-pv-decision .material-icons-outlined { font-size: 18px; margin-top: 1px; }
.ct-pv-decision.is-verified { background: var(--ct-good-bg, #E7F2ED); color: var(--ct-good, #1F6F5C); }
.ct-pv-decision.is-rejected { background: var(--ct-bad-bg, #FBEEEC); color: var(--ct-bad, #8B3A34); }

.ct-pv-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 48px 16px;
    text-align: center;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-pv-state .material-icons-outlined { font-size: 32px; }
.ct-pv-state.is-loading .material-icons-outlined { animation: ct-spin 1.2s linear infinite; }

@keyframes ct-spin { to { transform: rotate(360deg); } }

.ct-pv-reason { display: grid; gap: 5px; }
.ct-pv-reason[hidden] { display: none; }
.ct-pv-reason label { font-size: 12.5px; font-weight: 600; }

body:not(.login-body) .ct-pv-reason textarea {
    width: 100%;
    min-height: 58px;
    resize: vertical;
}

@media (max-width: 760px) {
    .ct-pv-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .ct-pv-photo { position: static; max-width: 340px; width: 100%; justify-self: center; }
}

@media (max-width: 600px) {
    .ct-dialog { padding: 10px; }
    .ct-dialog-card { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 14px; }
    .ct-dialog-head { padding: 14px 14px 12px; }
    .ct-dialog-body { padding: 14px; }
    .ct-dialog-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); }
    .ct-dialog-actions > * { flex: 1 1 0; justify-content: center; }
    .ct-pv-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* =====================================================================
   5. Attendance cards: verify triggers
   ===================================================================== */

/* Dashboard log card: the thumbnail link became a button that opens the
   modal. It keeps the look of the link it replaced. */
body:not(.login-body) button.attendance-photo-card-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px;
    text-align: left;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 12px;
    background: var(--ct-surface, #FFFFFF);
    color: var(--ct-ink, #12332F);
    font-size: 13px;
    font-weight: 600;
}

body:not(.login-body) button.attendance-photo-card-link:hover { background: var(--ct-tint, #EEF5F1); }

body:not(.login-body) button.attendance-photo-card-link img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: cover;
    border-radius: 9px;
}

body:not(.login-body) button.attendance-photo-card-link > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body:not(.login-body) button.ct-attendance-photo-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border-radius: inherit;
    overflow: hidden;
}

body:not(.login-body) button.ct-attendance-photo-btn img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ct-verify-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--ct-line-strong, #D3E0DA);
    border-radius: 9px;
    background: var(--ct-surface, #FFFFFF);
    color: var(--ct-ink, #12332F);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ct-verify-btn:hover { background: var(--ct-tint, #EEF5F1); border-color: var(--ct-accent, #0B4F4A); }
.ct-verify-btn:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 2px; }

.ct-attendance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ct-line, #E3EBE7);
}
.ct-verify-btn .material-icons-outlined { font-size: 17px; }

/* =====================================================================
   6. Documents
   ===================================================================== */

.ct-review-badge { white-space: nowrap; }
.ct-review-badge .material-icons-outlined { font-size: 15px !important; }

.ct-review-cell { display: grid; gap: 4px; justify-items: start; min-width: 150px; }
.ct-review-cell small { color: var(--ct-ink-faint, #5D7774); }

.ct-remarks {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 280px;
    margin: 2px 0 0;
    padding: 6px 9px;
    border-radius: 9px;
    background: var(--ct-bad-bg, #FBEEEC);
    color: var(--ct-bad, #8B3A34);
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
}

.ct-remarks .material-icons-outlined { font-size: 15px; margin-top: 1px; }
.ct-remarks.is-note { background: var(--ct-surface-sunken, #F4F8F6); color: var(--ct-ink-soft, #5E7370); }

.ct-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ct-row-actions form { margin: 0; display: contents; }

body:not(.login-body) .ct-row-actions .table-link,
body:not(.login-body) .ct-row-actions .btn-approve,
body:not(.login-body) .ct-row-actions .btn-decline,
body:not(.login-body) .ct-row-actions .ct-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 0 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
}

.ct-row-actions .material-icons-outlined { font-size: 16px !important; }

body:not(.login-body) .ct-send-btn {
    border: 1px solid var(--ct-accent, #0B4F4A);
    border-radius: 9px;
    background: var(--ct-surface, #FFFFFF);
    color: var(--ct-accent, #0B4F4A);
    font-weight: 600;
}

body:not(.login-body) .ct-send-btn:hover { background: var(--ct-tint, #EEF5F1); }

.ct-section-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ct-warn-bg, #F8EEDD);
    color: var(--ct-warn, #8A5A22);
    font-size: 12px;
    font-weight: 700;
    vertical-align: 2px;
}

.ct-decline-card { width: min(100%, 500px); }

.ct-decline-summary {
    margin: 0 0 12px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-decline-summary strong { color: var(--ct-ink, #12332F); }

.ct-field { display: grid; gap: 6px; }
.ct-field label { font-weight: 600; }

body:not(.login-body) .ct-field textarea { width: 100%; min-height: 96px; resize: vertical; }

.ct-field-error {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    font-size: 12.5px;
    color: var(--ct-bad, #8B3A34);
}

.ct-field-error[hidden] { display: none; }
.ct-field-error .material-icons-outlined { font-size: 16px; }

#incomingDocuments { min-width: 980px; }
#myDocs { min-width: 900px; }

/* =====================================================================
   7. Reports viewer + evaluation delete
   ===================================================================== */

.ct-report-dialog { width: min(100%, 860px); }

.ct-rv-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ct-line, #E3EBE7);
    background: var(--ct-surface-sunken, #F4F8F6);
}

.ct-rv-picker label { grid-column: 1 / -1; font-size: 12px; font-weight: 600; }
body:not(.login-body) .ct-rv-picker select { width: 100%; margin: 0; }
.ct-rv-position { font-size: 12px; color: var(--ct-ink-soft, #5E7370); white-space: nowrap; }

.ct-rv-student { display: flex; align-items: center; gap: 12px; }

.ct-rv-student img {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--ct-line, #E3EBE7);
}

.ct-rv-student > div { display: grid; min-width: 0; flex: 1 1 auto; }
.ct-rv-student small { color: var(--ct-ink-soft, #5E7370); font-size: 12px; }

body:not(.login-body) .ct-rv-title { margin: 14px 0 12px; font-size: 18px; line-height: 1.35; }

.ct-rv-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 16px;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 12px;
    background: var(--ct-line, #E3EBE7);
    overflow: hidden;
}

.ct-rv-meta > div { padding: 9px 12px; background: var(--ct-surface, #FFFFFF); }

.ct-rv-meta dt {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-rv-meta dt .material-icons-outlined { font-size: 15px; color: var(--ct-ink-faint, #5D7774); }
.ct-rv-meta dd { margin: 3px 0 0; font-size: 13px; color: var(--ct-ink, #12332F); overflow-wrap: anywhere; }

.ct-rv-section + .ct-rv-section { margin-top: 16px; }

body:not(.login-body) .ct-rv-section h4 {
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-rv-file {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 12px;
}

.ct-rv-file-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--ct-tint, #EEF5F1);
    color: var(--ct-accent, #0B4F4A);
}

.ct-rv-file-icon.is-pdf { background: #FBEEEC; color: #B42318; }
.ct-rv-file-icon.is-doc,
.ct-rv-file-icon.is-docx { background: #E5EFF4; color: #2F6690; }

.ct-rv-file-copy { display: grid; flex: 1 1 180px; min-width: 0; }
.ct-rv-file-copy strong { font-size: 13.5px; overflow-wrap: anywhere; }
.ct-rv-file-copy small { font-size: 12px; color: var(--ct-ink-soft, #5E7370); }
.ct-rv-file-actions { display: flex; gap: 6px; flex-wrap: wrap; }

body:not(.login-body) .ct-rv-file-actions .secondary-btn { min-height: 34px; padding: 0 11px; font-size: 12.5px !important; }

.ct-rv-preview {
    display: block;
    width: 100%;
    height: 420px;
    margin-top: 10px;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 12px;
    background: var(--ct-surface-sunken, #F4F8F6);
}

.ct-rv-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-rv-note .material-icons-outlined { font-size: 16px; }

.ct-rv-content {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ct-surface-sunken, #F4F8F6);
    font-size: 13.5px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ct-rv-foot { flex-direction: row; align-items: center; justify-content: flex-end; }
.ct-rv-foot form { margin: 0; }
.ct-rv-foot form[hidden] { display: none; }

@media (max-width: 700px) {
    .ct-rv-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-rv-preview { height: 320px; }
}

@media (max-width: 420px) {
    .ct-rv-meta { grid-template-columns: minmax(0, 1fr); }
    .ct-rv-picker { padding: 10px 14px; }
}

body:not(.login-body) .table-link.ct-view-btn {
    cursor: pointer;
    font: inherit;
}

/* Evaluation bulk delete */
.ct-bulk-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 12px;
}

.ct-bulk-bar form { margin: 0; }
.ct-bulk-count { font-size: 12.5px; color: var(--ct-ink-soft, #5E7370); }

body:not(.login-body) .ct-bulk-bar .action-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
}

body:not(.login-body) .ct-bulk-bar .action-danger:disabled { opacity: .45; cursor: not-allowed; }

body:not(.login-body) #evalTable tr.is-selected { background: rgba(180, 35, 24, .04); }

/* =====================================================================
   8. Select Intern picker
   ===================================================================== */

.ct-picker-tools {
    display: grid;
    gap: 10px;
    margin: 0 0 12px;
}

.ct-picker-tools .ct-searchable select { width: 100%; }

.ct-picker-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 11px;
    background: var(--ct-surface-sunken, #F4F8F6);
}

.ct-picker-all {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ct-ink, #12332F) !important;
    cursor: pointer;
}

.ct-picker-all input { width: 18px; height: 18px; margin: 0; accent-color: var(--ct-accent, #0B4F4A); }
.ct-picker-count { font-size: 12.5px; color: var(--ct-ink-soft, #5E7370); white-space: nowrap; }

#studentPickerModal .student-selection-list { max-height: min(46vh, 420px); gap: 6px; }
#studentPickerModal .student-option { padding: 10px 12px; }
#studentPickerModal .student-option[hidden] { display: none; }
#studentPickerModal .student-option.is-checked { border-color: var(--ct-accent, #0B4F4A); background: var(--ct-tint, #EEF5F1); }
#studentPickerModal .student-avatar { width: 38px; height: 38px; }
#studentPickerModal .student-avatar span { font-size: 22px; }
#studentPickerModal .student-info h4 { font-size: 14px; }
#studentPickerModal .student-info p { font-size: 12px; }

.ct-picker-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-picker-empty[hidden] { display: none; }

@media (max-width: 520px) {
    .ct-picker-bar { flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   9. Attendance kiosk (student)
   ===================================================================== */

/* The large Time In / Time Out bar is replaced by one slim row: a mode pill,
   a small switch button and the hint. The radios stay in the form. */
.ct-kiosk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.ct-kiosk-bar .ct-kiosk-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.ct-kiosk-mode-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 11px 0 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--ct-tint, #EEF5F1);
    color: var(--ct-accent, #0B4F4A);
}

.ct-kiosk-mode-pill .material-icons-outlined { font-size: 17px; }
.ct-kiosk-mode-pill.is-in { background: #0B4F4A; color: #FFFFFF; }
.ct-kiosk-mode-pill.is-out { background: #8A5A00; color: #FFFFFF; }
.ct-kiosk-mode-pill.is-idle { background: var(--ct-surface-sunken, #F4F8F6); color: var(--ct-ink-soft, #5E7370); }

.ct-kiosk-switch-wrap { position: relative; flex: 0 0 auto; }

.ct-kiosk-switch {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--ct-line-strong, #D3E0DA);
    background: var(--ct-surface, #FFFFFF);
    color: var(--ct-accent, #0B4F4A);
    transition: background .15s ease, border-color .15s ease;
}

.ct-kiosk-switch:hover { background: var(--ct-tint, #EEF5F1); border-color: var(--ct-accent, #0B4F4A); }
.ct-kiosk-switch .material-icons-outlined { font-size: 19px; }
.ct-kiosk-switch.is-blocked { color: var(--ct-ink-faint, #5D7774); }
.ct-kiosk-switch:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 2px; }

.ct-tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    z-index: 50;
    width: max-content;
    max-width: 200px;
    padding: 3px 7px;
    border-radius: 5px;
    background: #12332F;
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 3px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    pointer-events: none;
}

.ct-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: #12332F;
}

.ct-kiosk-switch:hover + .ct-tip,
.ct-kiosk-switch:focus-visible + .ct-tip,
.ct-kiosk-switch.show-tip + .ct-tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.ct-kiosk-bar .ct-kiosk-hint {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 6px 10px;
    font-size: 12.5px;
    border-radius: 9px;
}

.ct-kiosk-bar .ct-kiosk-hint .material-icons-outlined { font-size: 16px; }
.ct-kiosk-hint.is-flash { animation: ct-nudge .3s ease; }

@keyframes ct-nudge {
    0%, 100% { transform: translateX(0); }
    30% { transform: translateX(-3px); }
    60% { transform: translateX(3px); }
}

/* Page tightening, scoped to the kiosk so no other page moves. */
.ct-kiosk-compact .section-title-row { margin-bottom: 12px; }
.ct-kiosk-compact .kiosk-camera-area {
    grid-template-columns: repeat(2, minmax(0, 300px));
    justify-content: start;
    gap: 14px;
    margin: 0 0 14px;
}

body:not(.login-body) .ct-kiosk-compact .camera-card { padding: 12px !important; }
body:not(.login-body) .ct-kiosk-compact .camera-card h3 { margin: 0 0 8px; font-size: 13.5px; }

.ct-kiosk-compact .kiosk-camera-area video,
.ct-kiosk-compact .kiosk-camera-area #preview {
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
}

body:not(.login-body) .ct-kiosk-compact .kiosk-camera-area .secondary-btn { margin-top: 8px; min-height: 36px; }
.ct-kiosk-compact .camera-notice { margin-top: 8px; padding: 8px 10px; font-size: 12px; }
.ct-kiosk-compact .verification-note { margin-top: 0; padding: 10px 12px; gap: 10px; }
.ct-kiosk-compact .verification-note strong { font-size: 13px; }
.ct-kiosk-compact .verification-note p { font-size: 12.5px; }
.ct-kiosk-compact form > button[type="submit"] { margin-top: 12px; }

@media (max-width: 640px) {
    .ct-kiosk-bar { flex-wrap: wrap; gap: 8px; }
    .ct-kiosk-bar .ct-kiosk-hint { flex-basis: 100%; }
    .ct-kiosk-compact .kiosk-camera-area { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
    .ct-kiosk-compact .camera-card h3 { font-size: 12.5px; }
    body:not(.login-body) .ct-kiosk-compact .camera-card { padding: 8px !important; }
    .ct-kiosk-compact form > button[type="submit"] { width: 100%; }
}

@media (max-width: 360px) {
    .ct-kiosk-compact .kiosk-camera-area { grid-template-columns: minmax(0, 1fr) !important; }
}

/* =====================================================================
   10. Action icon colours (Admin)
   ===================================================================== */

.ct-act-view { color: var(--ct-act-view) !important; }
.ct-act-edit { color: var(--ct-act-edit) !important; }
.ct-act-approve { color: var(--ct-act-approve) !important; }
.ct-act-decline { color: var(--ct-act-decline) !important; }
.ct-act-delete { color: var(--ct-act-delete) !important; }
.ct-act-download { color: var(--ct-act-download) !important; }
.ct-act-search { color: var(--ct-act-search) !important; }
.ct-act-add { color: var(--ct-act-add) !important; }
.ct-act-settings { color: var(--ct-act-settings) !important; }

/* Text links that carry an action icon line up with it. */
body:not(.login-body) .table-link:has(.material-icons-outlined) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body:not(.login-body) .table-link .material-icons-outlined { font-size: 16px; }

/* =====================================================================
   11. Dark theme
   ===================================================================== */

:root[data-theme="dark"] {
    --ct-act-view: #86B9DC;
    --ct-act-edit: #E2B65A;
    --ct-act-approve: #74CDA2;
    --ct-act-decline: #F29A7F;
    --ct-act-delete: #F28B82;
    --ct-act-download: #B8ACEC;
    --ct-act-search: #83C9C2;
    --ct-act-add: #74C8D8;
    --ct-act-settings: #AEBACA;
}

:root[data-theme="dark"] .ct-dialog-card,
:root[data-theme="dark"] .ct-datefilter-pop,
:root[data-theme="dark"] .ct-rv-meta > div {
    background: #1D4643;
    color: #DCE5E0;
}

:root[data-theme="dark"] .ct-dialog-foot,
:root[data-theme="dark"] .ct-rv-picker,
:root[data-theme="dark"] .ct-rv-content,
:root[data-theme="dark"] .ct-picker-bar { background: #163937; }

:root[data-theme="dark"] .ct-remarks { background: rgba(242, 139, 130, .14); color: #F5B7B0; }
:root[data-theme="dark"] .ct-tip,
:root[data-theme="dark"] .ct-tip::after { background: #0B2624; border-top-color: #0B2624; }
:root[data-theme="dark"] .ct-tip::after { background: transparent; }
:root[data-theme="dark"] .ct-cal-day.is-start,
:root[data-theme="dark"] .ct-cal-day.is-end { color: #0B2624; }

@media (prefers-reduced-motion: reduce) {
    .ct-dialog, .ct-dialog-card, .ct-toast, .ct-tip { transition: none !important; }
    .ct-kiosk-hint.is-flash, .ct-pv-state.is-loading .material-icons-outlined { animation: none !important; }
}

/* =====================================================================
   Upgrade v5 (formerly crimtrack-upgrade-v5.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v5 styles
   Icon buttons, page search, teams, document viewer, certificates.
   Uses the tokens defined in crimtrack-ui.css so the dark theme follows.
   ===================================================================== */

/* ---------- Accessibility helpers ---------- */
.ct-sr {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* ---------- Icon-only buttons ---------- */
.ct-icon-only {
    position: relative;
    display: inline-flex !important; align-items: center; justify-content: center;
    gap: 0 !important;
    min-width: 40px; width: 40px; height: 40px;
    padding: 0 !important;
    border-radius: var(--ct-r-control, 11px) !important;
    flex: 0 0 auto;
}
.ct-icon-only > .material-icons-outlined,
.ct-icon-only > .material-icons { margin: 0 !important; font-size: 21px !important; line-height: 1; }
.ct-icon-only.table-link { width: 34px; min-width: 34px; height: 34px; }
body:not(.login-body) button.ct-icon-only:not(#ct-link), body:not(.login-body) .btn.ct-icon-only:not(#ct-link) {
    padding: 0 !important; min-height: 40px; width: 40px; gap: 0 !important;
}
.ct-icon-only[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 50%; bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
    padding: 3px 7px; border-radius: 5px;
    background: #12332F; color: #fff;
    font-family: inherit; font-weight: 600; font-size: 10.5px; line-height: 1.35; white-space: nowrap; letter-spacing: 0;
    pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s;
    z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.ct-icon-only[data-tip]:hover::after,
.ct-icon-only[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
/* Tooltips near the right edge of a toolbar open leftwards. */
.filter-toolbar > .ct-icon-only:last-child[data-tip]::after,
.section-title-row > .ct-icon-only:last-child[data-tip]::after,
.ct-dialog-actions > .ct-icon-only:last-child[data-tip]::after { left: auto; right: 0; transform: translate(0, 4px); }
.filter-toolbar > .ct-icon-only:last-child[data-tip]:hover::after,
.section-title-row > .ct-icon-only:last-child[data-tip]:hover::after,
.ct-dialog-actions > .ct-icon-only:last-child[data-tip]:hover::after { transform: none; }
/* A full-width submit button in a grid form stays compact. */
.grid-form > .ct-icon-only, .ct-form-grid > .ct-icon-only { justify-self: start; }

/* ---------- Header page search ---------- */
.global-search-wrap { position: relative; display: flex; align-items: center; }
.global-search-wrap > .material-icons-outlined {
    position: absolute; left: 11px; font-size: 19px; color: var(--ct-ink-faint, #5D7774); pointer-events: none;
}
.global-search-wrap #globalPageSearch { padding-left: 36px !important; padding-right: 34px !important; }
.global-search-wrap .ct-search-clear {
    position: absolute; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: var(--ct-ink-soft); cursor: pointer; box-shadow: none; padding: 0;
}
.global-search-wrap .ct-search-clear:hover { background: var(--ct-tint); }
body:not(.login-body) .global-search-wrap button.ct-search-clear[hidden]:not(#ct-link) { display: none !important; }
body:not(.login-body) .global-search-wrap button.ct-search-clear:not(#ct-link) {
    min-height: 0 !important; width: 26px; height: 26px; padding: 0 !important; border: 0 !important;
    background: transparent !important; color: var(--ct-ink-soft) !important;
}
.global-search-wrap .ct-search-clear .material-icons-outlined { font-size: 17px; }
.ct-search-count {
    position: absolute; top: calc(100% + 4px); left: 12px;
    font-size: 11.5px; font-weight: 600; color: var(--ct-ink-soft); white-space: nowrap;
}
.ct-search-count:empty { display: none; }
.ct-search-hit { outline: 2px solid color-mix(in srgb, var(--ct-accent) 32%, transparent); outline-offset: -2px; }
tr.ct-search-hit { outline-offset: -1px; }
.ct-search-empty { margin: 0 0 18px; }

/* ---------- Generic empty state / stats ---------- */
.ct-empty {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 30px 16px; text-align: center; color: var(--ct-ink-soft);
}
.ct-empty .material-icons-outlined { font-size: 34px; color: var(--ct-ink-faint); }
.ct-empty p { margin: 0; max-width: 520px; }

.ct-v5-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.ct-v5-stat {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px;
    background: var(--ct-surface); border: 1px solid var(--ct-line); border-radius: var(--ct-r-card, 16px);
    box-shadow: var(--ct-shadow);
}
.ct-v5-stat > .material-icons-outlined {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: var(--ct-tint); color: var(--ct-accent); font-size: 22px;
}
.ct-v5-stat strong { display: block; font-size: 22px; line-height: 1.1; color: var(--ct-ink); }
.ct-v5-stat small { color: var(--ct-ink-soft); font-weight: 600; }
.ct-v5-stat.is-warning > .material-icons-outlined { background: var(--ct-warn-bg, #FBF1E1); color: var(--ct-warn, #8A5A22); }

/* ---------- Checkboxes / checklists ---------- */
.ct-check { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.ct-check input { width: 17px !important; height: 17px; margin: 0; accent-color: var(--ct-accent); flex: 0 0 auto; }
.ct-check-field { align-items: flex-start !important; padding: 12px 14px; border: 1px solid var(--ct-line); border-radius: var(--ct-r-control); background: var(--ct-surface-sunken); }
.ct-check-field span { display: flex; flex-direction: column; gap: 2px; }
.ct-check-field small { color: var(--ct-ink-soft); font-weight: 500; }

.ct-checklist-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 6px 0 12px; }
.ct-inline-search {
    display: inline-flex !important; align-items: center; gap: 6px; flex: 1 1 220px;
    padding: 0 10px; border: 1px solid var(--ct-line-strong); border-radius: var(--ct-r-control); background: var(--ct-surface);
}
.ct-inline-search input { border: 0 !important; box-shadow: none !important; padding: 9px 0 !important; background: transparent !important; min-width: 0; flex: 1; }
.ct-inline-search .material-icons-outlined { color: var(--ct-ink-faint); font-size: 19px; }
.ct-checklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; max-height: 340px; overflow: auto; padding: 2px; }
.ct-checklist-item {
    display: flex !important; align-items: center; gap: 10px; padding: 9px 12px;
    border: 1px solid var(--ct-line); border-radius: 12px; background: var(--ct-surface); cursor: pointer;
    transition: border-color .12s, background .12s;
}
.ct-checklist-item:hover { border-color: var(--ct-line-strong); }
.ct-checklist-item.is-checked { border-color: var(--ct-accent); background: var(--ct-tint); }
.ct-checklist-item input { width: 17px; height: 17px; margin: 0; accent-color: var(--ct-accent); flex: 0 0 auto; }
.ct-checklist-item img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ct-checklist-item > span { display: flex; flex-direction: column; min-width: 0; }
.ct-checklist-item strong { font-size: 14px; color: var(--ct-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-checklist-item small { color: var(--ct-ink-soft); font-size: 12px; }
.ct-checklist-item[hidden] { display: none !important; }

/* ---------- Teams ---------- */
.ct-company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ct-company-card {
    display: flex; flex-direction: column; gap: 14px; padding: 18px;
    background: var(--ct-surface); border: 1px solid var(--ct-line); border-radius: var(--ct-r-card);
    box-shadow: var(--ct-shadow); transition: box-shadow .15s, transform .15s;
}
.ct-company-card:hover { box-shadow: var(--ct-shadow-lift); transform: translateY(-1px); }
.ct-company-card.is-inactive { opacity: .7; }
.ct-company-card header { display: flex; align-items: center; gap: 12px; }
.ct-company-card h3 { margin: 0; font-size: 17px; color: var(--ct-ink); }
.ct-company-card header small { color: var(--ct-ink-soft); }
.ct-company-card header .status-badge { margin-left: auto; }
.ct-company-emblem {
    width: 46px; height: 46px; border-radius: 12px; flex: 0 0 auto; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--ct-accent), var(--ct-accent-hover)); color: #fff; font-weight: 800; font-size: 20px;
    clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%);
}
.ct-company-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ct-company-counts div { padding: 10px 12px; border-radius: 10px; background: var(--ct-surface-sunken); }
.ct-company-counts dt { font-size: 12px; color: var(--ct-ink-soft); font-weight: 600; }
.ct-company-counts dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; color: var(--ct-ink); }
.ct-company-leaders { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; align-items: center; }
.ct-leader-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px;
    border-radius: 999px; background: var(--ct-tint); color: var(--ct-ink); font-size: 12.5px; font-weight: 600;
}
.ct-leader-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ct-company-card footer { margin-top: auto; flex-wrap: wrap; }
.ct-company-card footer form { margin: 0; }
.ct-company-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
    background: var(--ct-tint); color: var(--ct-accent); font-weight: 700; font-size: 12.5px;
}
.ct-company-chip .material-icons-outlined { font-size: 15px; }
.ct-leader-badge .material-icons-outlined { font-size: 15px; }
.ct-leader-mini { font-size: 11px; font-weight: 700; color: var(--ct-accent); background: var(--ct-tint); padding: 1px 6px; border-radius: 999px; margin-left: 4px; }
.ct-tl-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.ct-company-dialog { width: min(900px, 100%); }
.ct-dialog-section { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 15px; color: var(--ct-ink); }
.ct-dialog-section:first-child { margin-top: 0; }
.ct-dialog-section .material-icons-outlined { color: var(--ct-accent); font-size: 20px; }
.ct-leader-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.ct-leader-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ct-tint); }
.ct-leader-row img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.ct-leader-row strong { display: block; color: var(--ct-ink); }
.ct-leader-row small { color: var(--ct-ink-soft); }
.ct-assign-form .ct-dialog-actions { margin-top: 12px; justify-content: flex-end; }
.ct-row-actions form { margin: 0; display: inline-flex; }
.ct-picker-company { display: flex !important; align-items: center; gap: 8px; margin-bottom: 10px; }
.ct-picker-company select { flex: 1; }

/* ---------- Document review ---------- */
.ct-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px; background: var(--ct-surface-sunken); font-size: 13px; font-weight: 600; color: var(--ct-ink-soft); }
.ct-flow span { display: inline-flex; align-items: center; gap: 5px; }
.ct-flow .material-icons-outlined { font-size: 17px; color: var(--ct-accent); }
.ct-flow-arrow { color: var(--ct-ink-faint); font-size: 18px; }
.ct-doc-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-doc-counts span { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: var(--ct-surface-sunken); font-weight: 700; font-size: 12.5px; color: var(--ct-ink-soft); }
.ct-doc-counts .material-icons-outlined { font-size: 15px; }
.ct-doc-counts .is-warning { background: var(--ct-warn-bg, #FBF1E1); color: var(--ct-warn, #8A5A22); }
.ct-doc-counts .is-danger { background: var(--ct-bad-bg, #F8E6E4); color: var(--ct-bad, #8B3A34); }
.ct-doc-counts .is-success { background: var(--ct-good-bg, #E3F1EB); color: var(--ct-good, #1F6F5C); }
.ct-doc-counts .is-info { background: var(--ct-info-bg, #E5EFF4); color: var(--ct-info, #2F5A70); }
.ct-attention { display: flex; align-items: center; gap: 8px; }

.ct-doc-dialog { width: min(1180px, 100%); height: min(88vh, 900px); display: flex; flex-direction: column; }
.ct-dv-layout { display: grid; grid-template-columns: 300px 1fr; min-height: 0; flex: 1; border-top: 1px solid var(--ct-line); }
.ct-dv-list { overflow: auto; padding: 10px; border-right: 1px solid var(--ct-line); background: var(--ct-surface-sunken); display: flex; flex-direction: column; gap: 6px; }
body:not(.login-body) button.ct-dv-item:not(#ct-link),
.ct-dv-item {
    display: flex !important; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
    padding: 10px !important; border-radius: 12px !important; border: 1px solid transparent !important;
    background: transparent !important; color: var(--ct-ink) !important; box-shadow: none !important; cursor: pointer;
    font-weight: 500 !important;
}
body:not(.login-body) button.ct-dv-item:not(#ct-link):hover,
.ct-dv-item:hover { background: var(--ct-surface) !important; border-color: var(--ct-line) !important; }
body:not(.login-body) button.ct-dv-item.is-active:not(#ct-link),
.ct-dv-item.is-active { background: var(--ct-surface) !important; border-color: var(--ct-accent) !important; box-shadow: var(--ct-shadow) !important; }
.ct-dv-item-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--ct-tint); color: var(--ct-accent); flex: 0 0 auto; }
.ct-dv-item-icon.is-pdf { background: #FBE9E7; color: #B2402F; }
.ct-dv-item-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ct-dv-item { justify-content: flex-start !important; min-height: 0 !important; }
.ct-dv-item-copy strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-dv-item-copy small { font-size: 11.5px; color: var(--ct-ink-soft); }
.ct-dv-item-copy .status-badge { align-self: flex-start; font-size: 11px !important; }
.ct-dv-pane { overflow: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ct-dv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ct-dv-head h3 { margin: 0; font-size: 18px; color: var(--ct-ink); }
.ct-dv-head small { color: var(--ct-ink-soft); word-break: break-all; }
.ct-dv-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ct-dv-timeline li { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--ct-surface-sunken); color: var(--ct-ink-soft); }
.ct-dv-timeline li .material-icons-outlined { font-size: 20px; }
.ct-dv-timeline li strong { display: block; font-size: 13px; color: var(--ct-ink); }
.ct-dv-timeline li small { font-size: 11.5px; }
.ct-dv-timeline li.is-done { background: var(--ct-good-bg, #E3F1EB); }
.ct-dv-timeline li.is-done .material-icons-outlined { color: var(--ct-good, #1F6F5C); }
.ct-dv-timeline li.is-wait { background: var(--ct-warn-bg, #FBF1E1); }
.ct-dv-timeline li.is-wait .material-icons-outlined { color: var(--ct-warn, #8A5A22); }
.ct-dv-timeline li.is-bad { background: var(--ct-bad-bg, #F8E6E4); }
.ct-dv-timeline li.is-bad .material-icons-outlined { color: var(--ct-bad, #8B3A34); }
.ct-dv-preview { flex: 1; min-height: 340px; border: 1px solid var(--ct-line); border-radius: 12px; overflow: hidden; background: var(--ct-surface-sunken); display: flex; }
.ct-dv-frame { width: 100%; min-height: 460px; border: 0; background: #fff; }
.ct-dv-image { max-width: 100%; max-height: 560px; margin: auto; object-fit: contain; display: block; }
.ct-dv-nopreview { margin: auto; text-align: center; padding: 30px; color: var(--ct-ink-soft); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ct-dv-nopreview .material-icons-outlined { font-size: 38px; }
.ct-dv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; border-top: 1px solid var(--ct-line); padding-top: 14px; }
.ct-dv-actions form { margin: 0; display: inline-flex; }
.ct-dv-reject { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 12px; border: 1px solid var(--ct-bad-bg, #F1D3CF); background: color-mix(in srgb, var(--ct-bad-bg, #F8E6E4) 55%, var(--ct-surface)); }
.ct-dv-reject[hidden] { display: none; }
.ct-dv-reject textarea { width: 100%; }
.ct-dv-reject .ct-dialog-actions { justify-content: flex-end; }
.ct-dv-resubmit { gap: 8px; flex-wrap: wrap; align-items: center; }
.ct-dv-file { display: inline-flex !important; align-items: center; gap: 6px; padding: 6px 10px; border: 1px dashed var(--ct-line-strong); border-radius: 10px; font-size: 13px; cursor: pointer; }
.ct-dv-file input { max-width: 210px; font-size: 12px; }

/* ---------- Certificates ---------- */
.ct-cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ct-cert-template { display: flex; flex-direction: column; border: 1px solid var(--ct-line); border-radius: var(--ct-r-card); overflow: hidden; background: var(--ct-surface); box-shadow: var(--ct-shadow); }
.ct-cert-template.is-archived { opacity: .65; }
.ct-cert-thumb {
    aspect-ratio: 1.414 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: #FFFDF7; border-bottom: 1px solid var(--ct-line); color: var(--accent, #0B4F4A);
    box-shadow: inset 0 0 0 8px #FFFDF7, inset 0 0 0 10px var(--accent, #0B4F4A), inset 0 0 0 14px #FFFDF7, inset 0 0 0 15px var(--accent, #0B4F4A);
}
.ct-cert-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ct-cert-thumb .material-icons-outlined { font-size: 40px; }
.ct-cert-thumb-title { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-align: center; padding: 0 30px; font-size: 15px; }
.ct-cert-template-body { padding: 14px 16px 6px; }
.ct-cert-template-body h3 { margin: 0 0 2px; font-size: 16px; color: var(--ct-ink); }
.ct-cert-template-body small { color: var(--ct-ink-soft); }
.ct-cert-template-body p { margin: 8px 0 0; font-size: 13px; }
.ct-cert-template footer { padding: 10px 16px 16px; flex-wrap: wrap; margin-top: auto; }
.ct-template-dialog { width: min(860px, 100%); }
.ct-template-dialog form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ct-segment { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-segment legend { font-weight: 700; margin-bottom: 6px; font-size: 13px; }
.ct-segment label { display: flex !important; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--ct-line); border-radius: 12px; cursor: pointer; }
.ct-segment label:has(input:checked) { border-color: var(--ct-accent); background: var(--ct-tint); }
.ct-segment input { margin-top: 3px; accent-color: var(--ct-accent); }
.ct-segment span { display: flex; flex-direction: column; gap: 2px; }
.ct-segment small { color: var(--ct-ink-soft); font-weight: 500; }
.ct-placeholders div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ct-chip {
    padding: 4px 9px !important; border-radius: 999px !important; border: 1px solid var(--ct-line-strong) !important;
    background: var(--ct-surface) !important; color: var(--ct-accent) !important; box-shadow: none !important;
    font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; cursor: pointer;
}
.ct-chip:hover { background: var(--ct-tint) !important; }
.ct-cert-list { display: grid; gap: 10px; }
.ct-cert-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ct-line); border-radius: 14px; background: var(--ct-surface); }
.ct-cert-card > div { flex: 1; min-width: 0; }
.ct-cert-card strong { display: block; color: var(--ct-ink); }
.ct-cert-card small { color: var(--ct-ink-soft); }
.ct-cert-seal { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #FBF1DA; color: #A7741B; }
.ct-step { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: 15px; color: var(--ct-ink); }
.ct-step span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ct-accent); color: #fff; font-size: 13px; }
.ct-template-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.ct-template-option { display: flex !important; flex-direction: row !important; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ct-line); border-radius: 14px; cursor: pointer; background: var(--ct-surface); }
.ct-template-option > input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
.ct-template-option:has(input:checked) { border-color: var(--ct-accent); background: var(--ct-tint); }
.ct-template-option input { accent-color: var(--ct-accent); }
.ct-template-option-body { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.ct-template-option-body .material-icons-outlined { grid-row: 1 / span 2; color: var(--ct-accent); }
.ct-template-option-body strong, .ct-template-option-body small { grid-column: 2; }
.ct-template-option-body small { color: var(--ct-ink-soft); }
.ct-cert-candidates { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-height: 520px; overflow: auto; padding: 2px; }
.ct-candidate { align-items: flex-start !important; }
.ct-candidate img { width: 40px !important; height: 40px !important; }
.ct-candidate-copy { flex: 1; gap: 3px; min-width: 0; }
.ct-candidate-state { display: block !important; margin-top: 4px; }
.ct-candidate-state .status-badge { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 4px; }
.ct-candidate-state .status-badge { font-size: 11.5px !important; }
.ct-candidate-state .status-badge { white-space: nowrap; }
.ct-candidate-state .material-icons-outlined { font-size: 15px; }
.ct-progress { display: block !important; height: 6px; border-radius: 999px; background: var(--ct-tint-deep); overflow: hidden; margin: 3px 0 1px; }
.ct-progress > span { display: block; height: 100%; background: var(--ct-accent); border-radius: inherit; }
.ct-candidate.is-eligible .ct-progress > span { background: var(--ct-good, #1F6F5C); }
.ct-generate-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; padding: 14px 16px; border-radius: 14px; background: var(--ct-surface-sunken); }
.ct-generate-bar label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; }
.ct-generate-bar p { flex: 1 1 260px; margin: 0; font-size: 13px; }
.ct-inline-link, .ct-inline-form { display: inline-flex; }
.ct-inline-form { flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.ct-inline-form label:not(.ct-check) { display: flex; flex-direction: column; gap: 4px; min-width: 220px; }

@media (max-width: 860px) {
    .ct-dv-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .ct-dv-list { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--ct-line); max-height: none; }
    .ct-dv-item { min-width: 220px; }
    .ct-doc-dialog { height: calc(100dvh - 20px); }
    .ct-segment { grid-template-columns: 1fr; }
    .ct-cert-candidates { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ct-checklist { grid-template-columns: 1fr; }
    .ct-dv-pane { padding: 14px; }
}

/* ---------- Record action links (View, Edit, Download…) everywhere ----------
   The td-only rule in crimtrack-ui.css left the same control inside cards and
   dialogs looking like a solid primary button. One outline style for all. */
body:not(.login-body) .ct-row-actions .table-link,
body:not(.login-body) .ct-dv-actions .table-link,
body:not(.login-body) .ct-cert-card .table-link,
body:not(.login-body) .ct-template-option .table-link,
body:not(.login-body) .section-title-row .table-link,
/* crimtrack-ui.css paints every <button> solid through a selector with twelve
   :not() classes and !important. The :not(#ct-link) guard (an id no element
   has) lifts this rule above it without touching that file. */
body:not(.login-body) button.table-link:not(#ct-link) {
    display: inline-flex !important; align-items: center; gap: 4px;
    padding: 6px 10px !important; min-height: 0 !important; width: auto;
    border: 1px solid var(--ct-line) !important; border-radius: 8px !important;
    background: var(--ct-surface) !important; color: var(--ct-accent) !important;
    box-shadow: none !important; font-size: 13px !important; font-weight: 600 !important;
    text-decoration: none !important; white-space: nowrap; cursor: pointer; line-height: 1.2;
}
body:not(.login-body) .ct-row-actions .table-link:hover,
body:not(.login-body) .ct-dv-actions .table-link:hover,
body:not(.login-body) button.table-link:not(#ct-link):hover { background: var(--ct-tint) !important; border-color: var(--ct-line-strong) !important; }
body:not(.login-body) .table-link .material-icons-outlined { font-size: 17px !important; }
body:not(.login-body) .ct-row-actions .action-danger,
body:not(.login-body) .ct-dv-actions .action-danger,
body:not(.login-body) .ct-row-actions .btn-approve,
body:not(.login-body) .ct-row-actions .btn-decline,
body:not(.login-body) .ct-dv-actions .btn-approve,
body:not(.login-body) .ct-dv-actions .btn-decline {
    display: inline-flex !important; align-items: center; gap: 4px; padding: 6px 11px !important;
    min-height: 34px !important; height: auto !important; font-size: 13px !important; border-radius: 8px !important; white-space: nowrap;
}
body:not(.login-body) .ct-dv-actions button.btn-approve:not(#ct-link),
body:not(.login-body) .ct-row-actions button.btn-approve:not(#ct-link) { min-height: 34px !important; padding: 6px 12px !important; }
/* Chips and pickers are plain controls, not primary buttons. */
body:not(.login-body) button.ct-chip:not(#ct-link) { min-height: 0 !important; padding: 4px 9px !important; background: var(--ct-surface) !important; color: var(--ct-accent) !important; border: 1px solid var(--ct-line-strong) !important; }
.ct-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* ---------- Pre-existing fixes: compact row icons and "Edit team" link ----------
   The same legacy all-buttons rule painted the v3 icon actions (reset
   password, delete) as solid 40px buttons that wrapped onto two lines, and
   the Team Leader "Change" link as a large button. Restored as designed. */
body:not(.login-body) button.ct-icon-action:not(#ct-link),
body:not(.login-body) a.ct-icon-action:not(#ct-link) {
    width: 36px; height: 36px; min-height: 36px !important; padding: 0 !important;
    background: var(--ct-surface) !important; color: var(--ct-ink-soft) !important;
    border: 1px solid var(--ct-line) !important; border-radius: 10px !important;
}
body:not(.login-body) button.ct-icon-delete:not(#ct-link) { color: var(--ct-bad, #8B3A34) !important; }
body:not(.login-body) button.ct-icon-delete:not(#ct-link):hover { background: var(--ct-bad-bg, #F8E6E4) !important; border-color: #E4B4AE !important; }
body:not(.login-body) button.ct-icon-key:not(#ct-link):hover { background: #FFF6E5 !important; color: #8A5A00 !important; border-color: #E8C77A !important; }
td .ct-row-actions { flex-wrap: nowrap; }
body:not(.login-body) button.ct-tl-change:not(#ct-link) {
    min-height: 0 !important; padding: 2px 6px !important; gap: 3px;
    background: transparent !important; border: 0 !important; color: var(--ct-accent) !important;
    font-size: 12.5px !important; text-decoration: underline;
}
body:not(.login-body) button.ct-tl-change:not(#ct-link) .material-icons-outlined { font-size: 15px; }

/* =====================================================================
   Upgrade v6 (formerly crimtrack-upgrade-v6.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v6
   Uses the existing design tokens (Deep Teal accent, Poppins, card
   radius) so new pieces match the rest of the system. Loaded last.
   ===================================================================== */

/* ---------- Primary text buttons stay readable ---------- */
.ct-primary-text { white-space: nowrap; }
.ct-v6-primary-text { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Student List: Team Leader line ---------- */
.ct-v6-leader-line {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--ct-ink-soft, #4b5f5c); font-size: 12px; margin-top: 2px;
}
.ct-v6-leader-line .material-icons-outlined { font-size: 15px; }
.ct-v6-crew { display: block; color: var(--ct-ink-faint, #7a8b88); font-size: 12px; margin-top: 2px; }

/* ---------- Manage Teams inline Team Leader picker ---------- */
.ct-v6-inline-leader { display: flex; align-items: center; gap: 6px; }
.ct-v6-inline-leader select { min-width: 150px; max-width: 220px; padding: 6px 8px; }

/* ---------- Partner Agency name + key icon ---------- */
.ct-v6-agency-name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-v6-agency-name .ct-icon-action { width: 30px; height: 30px; min-width: 30px; }

/* ---------- Select Intern Student: Team Leader search ---------- */
.ct-v6-picker { display: grid; gap: 10px; margin: 4px 0 12px; }
.ct-v6-leader-search {
    display: flex; align-items: center; gap: 8px;
    border: 1px solid var(--ct-line-strong, #c9d6d2); border-radius: 12px;
    padding: 0 12px; background: var(--ct-surface, #fff);
}
.ct-v6-leader-search:focus-within { border-color: var(--ct-accent, #0b4f4a); box-shadow: 0 0 0 3px rgba(11, 79, 74, .12); }
.ct-v6-leader-search input { border: 0 !important; box-shadow: none !important; flex: 1; padding: 11px 0 !important; background: transparent; }
.ct-v6-leader-search .material-icons-outlined { color: var(--ct-accent, #0b4f4a); }
.ct-v6-leader-results { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; padding-right: 2px; }
.ct-v6-leader-option {
    display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
    width: 100%; text-align: left; padding: 8px 12px !important; min-height: 0 !important;
    border: 1px solid var(--ct-line, #dce5e0) !important; border-radius: 10px !important;
    background: var(--ct-surface, #fff) !important; color: var(--ct-ink, #173b39) !important;
    box-shadow: none !important; font-weight: 400 !important; cursor: pointer;
}
.ct-v6-leader-option:hover { border-color: var(--ct-accent, #0b4f4a) !important; }
.ct-v6-leader-option.is-active { border-color: var(--ct-accent, #0b4f4a) !important; background: var(--ct-tint, #e7f2ef) !important; }
.ct-v6-leader-option strong { display: block; font-size: 14px; }
.ct-v6-leader-option small { display: block; color: var(--ct-ink-faint, #7a8b88); font-size: 12px; }
.ct-v6-leader-option .material-icons-outlined { color: var(--ct-accent, #0b4f4a); }
.ct-v6-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ct-tint, #e7f2ef); color: var(--ct-accent, #0b4f4a); white-space: nowrap; }
.ct-v6-note { margin: 0; color: var(--ct-ink-faint, #7a8b88); font-size: 13px; }
.ct-v6-leader-summary {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px; background: var(--ct-tint, #e7f2ef);
    border: 1px solid var(--ct-line, #dce5e0);
}
.ct-v6-leader-summary[hidden] { display: none; }
.ct-v6-leader-summary > .material-icons-outlined { color: var(--ct-accent, #0b4f4a); }
.ct-v6-leader-summary small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ct-ink-faint, #7a8b88); }
.ct-v6-leader-summary strong { font-size: 14px; }
.ct-v6-leader-summary .ct-icon-action { margin-left: auto; }
.ct-v6-scope { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.ct-v6-scope label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---------- Team → Team Leader → Interns panel ---------- */
.ct-v6-group { margin-top: 12px; }
.ct-v6-group h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 13px; color: var(--ct-accent, #0b4f4a); }
.ct-v6-group h5 small { color: var(--ct-ink-faint, #7a8b88); font-weight: 500; }
.ct-v6-group h5 .material-icons-outlined { font-size: 17px; }

/* ---------- Formal evaluation form (web) ---------- */
.ct-eval-sheet { display: grid; gap: 16px; }
.ct-eval-letterhead {
    display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 12px;
    padding-bottom: 12px; border-bottom: 3px double var(--ct-accent, #0b4f4a); text-align: center;
}
.ct-eval-letterhead img { width: 56px; height: 56px; object-fit: contain; }
.ct-eval-letterhead h3 { margin: 0; letter-spacing: .08em; color: var(--ct-accent, #0b4f4a); }
.ct-eval-letterhead p { margin: 2px 0 0; font-size: 12.5px; color: var(--ct-ink-soft, #4b5f5c); }
.ct-eval-title { text-align: center; }
.ct-eval-title h3 { margin: 0; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.ct-eval-title p { margin: 4px 0 0; font-size: 12.5px; color: var(--ct-ink-faint, #7a8b88); }
.ct-eval-info {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--ct-line-strong, #c9d6d2); border-radius: 10px; overflow: hidden;
}
.ct-eval-info > div, .ct-eval-info > label {
    padding: 10px 12px; border-bottom: 1px solid var(--ct-line, #dce5e0); display: grid; gap: 4px; margin: 0;
}
.ct-eval-info > :nth-child(odd) { border-right: 1px solid var(--ct-line, #dce5e0); }
.ct-eval-info small, .ct-eval-info > label > span {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ct-ink-faint, #7a8b88);
}
.ct-eval-info strong { font-size: 14px; min-height: 20px; }
.ct-eval-instructions {
    border: 1px solid var(--ct-line, #dce5e0); border-left: 4px solid var(--ct-accent, #0b4f4a);
    border-radius: 8px; padding: 10px 14px; font-size: 13px; background: var(--ct-surface-sunken, #f6f9f8);
}
.ct-eval-instructions p { margin: 0 0 6px; }
.ct-eval-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.ct-eval-legend b { color: var(--ct-accent, #0b4f4a); }
.ct-eval-table-wrap { overflow-x: auto; border: 1px solid var(--ct-line-strong, #c9d6d2); border-radius: 10px; }
.ct-eval-table { width: 100%; min-width: 600px; border-collapse: collapse; }
.ct-eval-table th, .ct-eval-table td { border-bottom: 1px solid var(--ct-line, #dce5e0); padding: 8px 6px; vertical-align: middle; }
.ct-eval-table thead th { background: var(--ct-accent, #0b4f4a); color: #fff; font-size: 12.5px; text-align: center; position: sticky; top: 0; }
.ct-eval-table thead th:nth-child(2) { text-align: left; }
.ct-eval-table td:first-child { width: 34px; text-align: center; color: var(--ct-ink-faint, #7a8b88); font-size: 12.5px; }
.ct-eval-table td.ct-eval-crit strong { display: block; font-size: 14px; font-weight: 600; }
.ct-eval-table td.ct-eval-crit small { display: block; color: var(--ct-ink-faint, #7a8b88); font-size: 12px; }
.ct-eval-table td.ct-eval-opt { width: 52px; text-align: center; border-left: 1px solid var(--ct-line, #dce5e0); }
.ct-eval-cell { display: inline-grid; place-items: center; cursor: pointer; margin: 0; }
.ct-eval-cell input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-eval-box {
    width: 24px; height: 24px; border: 2px solid var(--ct-line-strong, #9fb3ae); border-radius: 5px;
    display: grid; place-items: center; transition: background .12s, border-color .12s;
}
.ct-eval-cell input:checked + .ct-eval-box { background: var(--ct-accent, #0b4f4a); border-color: var(--ct-accent, #0b4f4a); }
.ct-eval-cell input:checked + .ct-eval-box::after { content: "✓"; color: #fff; font-weight: 700; font-size: 15px; line-height: 1; }
.ct-eval-cell input:focus-visible + .ct-eval-box { outline: 3px solid rgba(11, 79, 74, .35); outline-offset: 2px; }
.ct-eval-table tr.is-overall td { background: var(--ct-tint, #e7f2ef); border-top: 2px solid var(--ct-accent, #0b4f4a); }
.ct-eval-table tr.is-overall strong { text-transform: uppercase; letter-spacing: .03em; }
.ct-eval-table tr.is-missing td { background: #fff3f1; }
.ct-eval-progress { font-size: 13px; color: var(--ct-ink-soft, #4b5f5c); text-align: right; }
.ct-eval-sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ct-eval-sign fieldset { border: 1px solid var(--ct-line, #dce5e0); border-radius: 10px; padding: 10px 12px; margin: 0; display: grid; gap: 8px; }
.ct-eval-sign legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ct-accent, #0b4f4a); padding: 0 4px; }
.ct-eval-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ct-eval-editing {
    display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
    background: var(--ct-warn-bg, #fff6e5); color: var(--ct-warn, #7a5a12); font-size: 13.5px;
}

@media (max-width: 720px) {
    .ct-eval-info { grid-template-columns: 1fr; }
    .ct-eval-info > :nth-child(odd) { border-right: 0; }
    .ct-eval-sign { grid-template-columns: 1fr; }
    .ct-eval-letterhead { grid-template-columns: 40px 1fr; }
    .ct-eval-letterhead img:last-child { display: none; }
    .ct-v6-inline-leader select { min-width: 120px; }
}

/* ---------- Picker: win over the global button / label rules ---------- */
#v6LeaderPicker button.ct-v6-leader-option,
body:not(.login-body) #v6LeaderPicker button.ct-v6-leader-option {
    display: grid !important; grid-template-columns: auto 1fr auto !important; justify-items: start;
    width: 100% !important; height: auto !important; min-height: 0 !important;
    padding: 8px 12px !important; text-align: left !important;
    background: var(--ct-surface, #fff) !important; color: var(--ct-ink, #173b39) !important;
    border: 1px solid var(--ct-line, #dce5e0) !important; border-radius: 10px !important;
    box-shadow: none !important; transform: none !important; font-weight: 400 !important;
}
#v6LeaderPicker button.ct-v6-leader-option:hover,
#v6LeaderPicker button.ct-v6-leader-option:focus-visible { border-color: var(--ct-accent, #0b4f4a) !important; background: var(--ct-tint, #e7f2ef) !important; }
#v6LeaderPicker button.ct-v6-leader-option.is-active { border-color: var(--ct-accent, #0b4f4a) !important; background: var(--ct-tint, #e7f2ef) !important; box-shadow: inset 3px 0 0 var(--ct-accent, #0b4f4a) !important; }
#v6LeaderPicker .ct-v6-leader-option strong { color: var(--ct-ink, #173b39) !important; }
#v6LeaderPicker .ct-v6-leader-option small { color: var(--ct-ink-soft, #4b5f5c) !important; }
#v6LeaderPicker .ct-v6-leader-option .ct-v6-pill { justify-self: end; }
#v6LeaderPicker .ct-v6-scope label {
    display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px;
    width: auto !important; margin: 0 !important; font-weight: 500; white-space: nowrap;
}
#v6LeaderPicker .ct-v6-scope input[type="radio"] { width: 16px !important; height: 16px !important; margin: 0 !important; flex: none; }
#v6LeaderPicker .ct-v6-leader-summary .ct-icon-action { width: 32px; height: 32px; min-width: 32px; }
@media (max-width: 520px) {
    #v6LeaderPicker .ct-v6-leader-summary { gap: 10px; }
    #v6LeaderPicker .ct-v6-scope { gap: 10px; }
}

/* ---------- Evaluation form on phones: every rating column stays in view ---------- */
@media (max-width: 600px) {
    .ct-eval-table-wrap table.ct-eval-table { min-width: 0 !important; width: 100% !important; table-layout: fixed; }
    .ct-eval-table th, .ct-eval-table td { padding: 6px 2px; }
    .ct-eval-table th:first-child, .ct-eval-table td:first-child { width: 22px; }
    .ct-eval-table td.ct-eval-opt, .ct-eval-table thead th:nth-child(n+3) { width: 34px; }
    .ct-eval-table thead th { font-size: 11px; }
    .ct-eval-table td.ct-eval-crit strong { font-size: 12.5px; }
    .ct-eval-table td.ct-eval-crit small { display: none; }
    .ct-eval-box { width: 22px; height: 22px; }
}
.ct-eval-table-wrap .ct-eval-table thead th { background: var(--ct-accent, #0b4f4a) !important; color: #fff !important; }
@media (max-width: 600px) {
    .ct-eval-table td.ct-eval-opt, .ct-eval-table thead th:nth-child(n+3) { width: 30px; }
    .ct-eval-table thead th { font-size: 10px; overflow: hidden; text-overflow: ellipsis; }
    .ct-eval-box { width: 20px; height: 20px; }
}

/* =====================================================================
   Upgrade v7 (formerly crimtrack-upgrade-v7.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack upgrade v7
   1. Certificate designer (Admin → Certificates → New / Edit template)
   2. Shared form fix: .form-actions-span spans the whole grid
   3. Register Student modal: one width, no sideways scrolling
   4. Page header: agency badge no longer overlaps the user menu
   5. Attendance photo verification (agency) touches
   ===================================================================== */

/* ---------- 2. Shared form fix ---------- */
body:not(.login-body) .ct-form-grid > .form-actions-span { grid-column: 1 / -1; }
.ct-check[hidden], [data-tf-remove-bg][hidden] { display: none !important; }

/* ---------- 1. Certificate designer ---------- */
.ct-dialog-card.ct-cd {
    width: min(1180px, 100%);
    max-height: min(94vh, 980px);
    max-height: min(94dvh, 980px);
    --cd-accent: #0B4F4A;
}
.ct-cd .ct-cd-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.ct-cd-form {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 22px 22px;
}
.ct-cd-section { padding: 16px 0; border-bottom: 1px solid var(--ct-line, #E3EBE7); display: grid; gap: 12px; }
.ct-cd-section:first-child { padding-top: 2px; }
.ct-cd-form > .ct-cd-section:last-child, .ct-tf-design > .ct-cd-section:last-child { border-bottom: 0; }
.ct-cd-section[hidden], .ct-tf-design[hidden] { display: none !important; }
body:not(.login-body) .ct-cd-section h3 {
    display: flex; align-items: center; gap: 9px;
    margin: 0; font-size: 14px; font-weight: 700; color: var(--ct-ink, #12332F);
}
.ct-cd-section h3 span {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ct-accent, #0B4F4A); color: #fff; font-size: 12px;
}
.ct-cd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.ct-cd-wide { grid-column: 1 / -1; }
.ct-cd-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 0 !important; }
.ct-cd-field > span, .ct-cd-field > label > span, .ct-cd-label {
    font-size: 13px; font-weight: 600; color: var(--ct-ink, #12332F);
}
.ct-cd-field > label { margin: 0 !important; }
body:not(.login-body) .ct-cd-field input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
body:not(.login-body) .ct-cd-field textarea {
    width: 100%; margin: 0 !important; min-height: 40px; padding: 8px 11px !important; font-size: 14px;
}
body:not(.login-body) .ct-cd-field textarea { min-height: 150px; line-height: 1.5; resize: vertical; }

/* Template kind: two compact cards */
.ct-cd-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ct-cd-kind label { position: relative; margin: 0 !important; cursor: pointer; }
.ct-cd-kind input { position: absolute; opacity: 0; pointer-events: none; }
.ct-cd-kind label > span {
    display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center;
    padding: 11px 13px; border: 1.5px solid var(--ct-line, #E3EBE7); border-radius: 12px;
    background: var(--ct-surface, #fff); transition: border-color .15s, background .15s;
}
.ct-cd-kind .material-icons-outlined { grid-row: 1 / span 2; color: var(--ct-accent, #0B4F4A); font-size: 24px; }
.ct-cd-kind strong { font-size: 13.5px; color: var(--ct-ink, #12332F); }
.ct-cd-kind small { font-size: 12px; color: var(--ct-ink-soft, #5E7370); font-weight: 500; }
.ct-cd-kind input:checked + span { border-color: var(--ct-accent, #0B4F4A); background: var(--ct-tint, #EEF5F1); box-shadow: inset 0 0 0 1px var(--ct-accent, #0B4F4A); }
.ct-cd-kind input:focus-visible + span { outline: 3px solid rgba(11, 79, 74, .28); outline-offset: 2px; }

/* Placeholder chips */
.ct-cd-chips { display: grid; gap: 6px; padding: 9px 10px; border-radius: 10px; background: var(--ct-surface-sunken, #F4F8F6); border: 1px dashed var(--ct-line-strong, #CFDCD6); }
.ct-cd-chips > div { display: flex; flex-wrap: wrap; gap: 5px; }
body:not(.login-body) .ct-cd-chips button.ct-chip:not(#ct-link) { font-size: 11.5px !important; padding: 3px 8px !important; }
body:not(.login-body) .ct-cd-chips button.ct-chip.is-copied:not(#ct-link) { background: var(--ct-tint-deep, #DDEAE4) !important; }

/* Design styles */
.ct-cd-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ct-cd-style {
    position: relative; display: flex !important; flex-direction: column; gap: 3px; margin: 0 !important;
    padding: 10px; border: 1.5px solid var(--ct-line, #E3EBE7); border-radius: 12px; cursor: pointer;
    background: var(--ct-surface, #fff);
}
.ct-cd-style input { position: absolute; opacity: 0; pointer-events: none; }
.ct-cd-style:has(input:checked) { border-color: var(--ct-accent, #0B4F4A); background: var(--ct-tint, #EEF5F1); box-shadow: inset 0 0 0 1px var(--ct-accent, #0B4F4A); }
.ct-cd-style:has(input:focus-visible) { outline: 3px solid rgba(11, 79, 74, .28); outline-offset: 2px; }
.ct-cd-style strong { font-size: 13px; color: var(--ct-ink, #12332F); }
.ct-cd-style small { font-size: 11.5px; line-height: 1.35; color: var(--ct-ink-soft, #5E7370); font-weight: 500; }
.ct-cd-swatch { display: block; aspect-ratio: 1.414; border-radius: 6px; margin-bottom: 5px; position: relative; overflow: hidden; }
.ct-cd-swatch i { position: absolute; left: 30%; right: 30%; top: 42%; height: 4px; border-radius: 2px; background: var(--cd-accent); }
.ct-cd-swatch i::after { content: ""; position: absolute; left: 10%; right: 10%; top: 9px; height: 2px; background: #C4A55A; }
.is-classic .ct-cd-swatch { background: #FFFDF7; box-shadow: inset 0 0 0 4px #FFFDF7, inset 0 0 0 6px var(--cd-accent), inset 0 0 0 8px #FFFDF7, inset 0 0 0 9px var(--cd-accent); }
.is-modern .ct-cd-swatch { background: linear-gradient(var(--cd-accent) 0 8%, #B08D3C 8% 11%, #fff 11% 89%, #B08D3C 89% 92%, var(--cd-accent) 92%); }
.is-formal .ct-cd-swatch { background: #FBF6E8; box-shadow: inset 0 0 0 5px var(--cd-accent), inset 0 0 0 7px #FBF6E8, inset 0 0 0 8.5px #B08D3C; }

/* Orientation toggle */
.ct-cd-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 11px; background: var(--ct-surface-sunken, #F4F8F6); border: 1px solid var(--ct-line, #E3EBE7); }
.ct-cd-toggle label { margin: 0 !important; cursor: pointer; }
.ct-cd-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ct-cd-toggle label > span { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ct-ink-soft, #5E7370); }
.ct-cd-toggle label > span .material-icons-outlined { font-size: 18px; }
.ct-cd-toggle input:checked + span { background: var(--ct-surface, #fff); color: var(--ct-accent, #0B4F4A); box-shadow: 0 1px 3px rgba(11, 79, 74, .18); }
.ct-cd-toggle input:focus-visible + span { outline: 2px solid var(--ct-accent, #0B4F4A); }

/* Accent colours */
.ct-cd-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 40px; }
body:not(.login-body) button.ct-cd-color:not(#ct-link) {
    width: 28px; height: 28px; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important;
    background: var(--c) !important; border: 2px solid var(--ct-surface, #fff) !important;
    box-shadow: 0 0 0 1px var(--ct-line-strong, #CFDCD6); cursor: pointer;
}
body:not(.login-body) button.ct-cd-color.is-active:not(#ct-link) { box-shadow: 0 0 0 2px var(--ct-ink, #12332F); }
.ct-cd-color-custom { position: relative; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; margin: 0 !important; cursor: pointer;
    background: conic-gradient(#e53935, #fdd835, #43a047, #1e88e5, #8e24aa, #e53935); box-shadow: 0 0 0 1px var(--ct-line-strong, #CFDCD6); }
.ct-cd-color-custom input { position: absolute; inset: -6px; width: 40px !important; height: 40px !important; opacity: 0; cursor: pointer; }

.ct-cd .ct-check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin: 0 !important; }

/* Preview column */
.ct-cd-preview {
    display: flex; flex-direction: column; gap: 12px; min-height: 0;
    padding: 18px 20px; background: var(--ct-surface-sunken, #F4F8F6); border-left: 1px solid var(--ct-line, #E3EBE7);
}
.ct-cd-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ct-cd-preview-head strong { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--ct-ink, #12332F); }
.ct-cd-preview-head .material-icons-outlined { font-size: 18px; color: var(--ct-accent, #0B4F4A); }
.ct-cd-status { font-size: 12px; font-weight: 600; color: var(--ct-ink-soft, #5E7370); padding: 3px 9px; border-radius: 999px; background: var(--ct-surface, #fff); border: 1px solid var(--ct-line, #E3EBE7); }
.ct-cd-stage {
    position: relative; width: 100%; margin: 0 auto; border-radius: 10px; overflow: hidden;
    background: #fff; box-shadow: 0 10px 30px rgba(11, 79, 74, .16), 0 0 0 1px var(--ct-line, #E3EBE7);
    transition: opacity .15s;
}
.ct-cd-stage.is-landscape { aspect-ratio: 842 / 595; }
.ct-cd-stage.is-portrait { aspect-ratio: 595 / 842; width: min(100%, 330px); }
.ct-cd-stage.is-busy { opacity: .6; }
.ct-cd-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.ct-cd-stage iframe[hidden] { display: none; }
.ct-cd-stage-msg { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 20px; text-align: center; color: var(--ct-ink-soft, #5E7370); font-size: 13px; }
.ct-cd-stage-msg[hidden] { display: none; }
.ct-cd-stage-msg .material-icons-outlined { font-size: 34px; color: var(--ct-accent, #0B4F4A); }
.ct-cd-stage-msg p { margin: 0; max-width: 32ch; }
body:not(.login-body) .ct-cd-open:not(#ct-link) { align-self: center; }
.ct-cd-open[hidden] { display: none !important; }
.ct-cd .ct-dialog-actions { justify-content: flex-end; }

@media (max-width: 960px) {
    .ct-cd .ct-cd-body { grid-template-columns: 1fr; overflow-y: auto; }
    .ct-cd-form { overflow: visible; }
    .ct-cd-preview { order: -1; border-left: 0; border-bottom: 1px solid var(--ct-line, #E3EBE7); }
    .ct-cd-stage.is-landscape { width: min(100%, 520px); }
}
@media (max-width: 600px) {
    .ct-cd-grid, .ct-cd-kind { grid-template-columns: 1fr; }
    .ct-cd-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .ct-cd-style small { display: none; }
    .ct-cd-form { padding: 14px; }
    .ct-cd-preview { padding: 14px; }
}
:root[data-theme="dark"] .ct-cd-stage { box-shadow: 0 0 0 1px var(--ct-line); }

/* ---------- 3. Modals: full-window backdrop, no sideways scrolling ----------
   (a) "main > div { max-width: 1460px }" (the page content width) also
       matched modal overlays placed inside <main>, so on wide screens the
       backdrop stopped short, the right edge stayed undimmed and the modal
       sat off-centre.
   (b) An icon button's tooltip is invisible (opacity 0) but still takes up
       space; the last button's tooltip reached past the card edge and gave
       every modal (and scrolling table) a horizontal scrollbar. Hidden
       tooltips are now taken out of layout entirely. */
body:not(.login-body) main > .modal-overlay,
body:not(.login-body) main > .document-modal-overlay,
body:not(.login-body) main > .ct-dialog,
body:not(.login-body) .layout > .modal-overlay,
body:not(.login-body) .layout > .ct-dialog {
    max-width: none !important;
}
.ct-icon-only[data-tip]:not(:hover):not(:focus-visible)::after { display: none; }
.modal-actions > .ct-icon-only:last-child[data-tip]::after,
.ct-form-actions > .ct-icon-only:last-child[data-tip]::after,
td .ct-row-actions > .ct-icon-only:last-child[data-tip]::after,
td .inline-actions > .ct-icon-only:last-child[data-tip]::after { left: auto; right: 0; transform: none; }

/* Register Student: one set of rules instead of four competing widths. */
body:not(.login-body) #studentRegisterModal { padding: 16px; }
body:not(.login-body) #studentRegisterModal .modal-card.register-student-modal {
    width: min(1180px, 100%) !important;
    max-width: 1180px !important;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 18px;
}
body:not(.login-body) #studentRegisterModal .register-student-modal .modal-header {
    margin: 0 !important;
    padding: 20px 24px 14px !important;
    background: var(--ct-surface, #fff) !important;
    box-shadow: 0 1px 0 var(--ct-line, #E3EBE7);
    border-bottom: 0 !important;
}
body:not(.login-body) #studentRegisterModal .register-student-modal form {
    margin: 0 !important;
    padding: 16px 24px 0 !important;
}
body:not(.login-body) #studentRegisterModal .register-student-modal .modal-actions {
    position: sticky; bottom: 0; z-index: 2;
    margin: 8px -24px 0 !important;
    padding: 12px 24px 16px !important;
    background: var(--ct-surface, #fff);
    border-top: 1px solid var(--ct-line, #E3EBE7);
}
@media (max-width: 620px) {
    body:not(.login-body) #studentRegisterModal { padding: 8px; }
    body:not(.login-body) #studentRegisterModal .register-student-modal .modal-header,
    body:not(.login-body) #studentRegisterModal .register-student-modal form { padding-left: 16px !important; padding-right: 16px !important; }
    body:not(.login-body) #studentRegisterModal .register-student-modal .modal-actions { margin-left: -16px !important; margin-right: -16px !important; padding-left: 16px !important; padding-right: 16px !important; }
}

/* Register Student — horizontal layout (v22.13).
   Student details · Rank, Team & Team Leader · Login account sit side by
   side as three columns; Student details uses two field columns inside.
   Fields, names and validation are unchanged. Small tablets show two columns
   (Login account moves under them); phones stack everything. */
body:not(.login-body) #studentRegisterModal .register-student-modal .modal-form-grid { grid-template-columns: minmax(0, 1fr); }
#studentRegisterModal .ct-reg-columns {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr);
    gap: 18px;
    align-items: stretch;
    min-width: 0;
}
#studentRegisterModal .ct-reg-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 14px;
    background: var(--ct-surface-sunken, #F7FAF8);
}
#studentRegisterModal .ct-reg-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#studentRegisterModal .ct-reg-section > .ct-form-section { grid-column: 1 / -1; margin: 0; }
#studentRegisterModal .ct-reg-section > label { min-width: 0; }
#studentRegisterModal .ct-reg-section > label[hidden] { display: none !important; }
:root[data-theme="dark"] #studentRegisterModal .ct-reg-section { background: rgba(255, 255, 255, .03); }
@media (max-width: 920px) {
    #studentRegisterModal .ct-reg-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #studentRegisterModal .ct-reg-details { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    #studentRegisterModal .ct-reg-columns { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #studentRegisterModal .ct-reg-section { padding: 12px; }
}
@media (max-width: 480px) {
    #studentRegisterModal .ct-reg-details { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 5. Attendance photo verification (agency only) ---------- */
.ct-verify-banner {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px;
    margin: 0 0 14px; padding: 12px 14px; border-radius: 12px;
    background: var(--ct-surface-sunken, #F4F8F6); border: 1px solid var(--ct-line, #E3EBE7);
}
.ct-verify-banner.has-pending { background: #FFF8E8; border-color: #EDD7A4; }
.ct-verify-banner > .material-icons-outlined { font-size: 26px; color: var(--ct-accent, #0B4F4A); }
.ct-verify-banner.has-pending > .material-icons-outlined { color: #8A5A00; }
.ct-verify-banner > div { flex: 1 1 320px; display: grid; gap: 2px; }
.ct-verify-banner strong { font-size: 14px; color: var(--ct-ink, #12332F); }
.ct-verify-banner small { font-size: 12.5px; color: var(--ct-ink-soft, #5E7370); }
.ct-verify-banner .ct-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; margin: 0 !important; cursor: pointer; }
.ct-face-cell { white-space: nowrap; }
.ct-face-cell .status-badge { display: inline-flex; align-items: center; gap: 4px; }
.ct-face-cell .status-badge .material-icons-outlined { font-size: 15px; }
body:not(.login-body) .ct-face-cell button.ct-verify-link:not(#ct-link) {
    display: flex; align-items: center; gap: 4px; margin-top: 6px; min-height: 30px !important;
    padding: 4px 10px !important; font-size: 12.5px !important; border-radius: 8px !important;
    background: var(--ct-surface, #fff) !important; color: var(--ct-accent, #0B4F4A) !important;
    border: 1px solid var(--ct-line-strong, #CFDCD6) !important;
}
body:not(.login-body) .ct-face-cell button.ct-verify-link.is-pending:not(#ct-link) {
    background: var(--ct-accent, #0B4F4A) !important; color: #fff !important; border-color: transparent !important;
}
.ct-face-cell .ct-verify-link .material-icons-outlined { font-size: 16px; }
tr.ct-row-filtered { display: none !important; }
.ct-pv-readonly {
    display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px;
    border-radius: 10px; background: var(--ct-surface-sunken, #F4F8F6); border: 1px solid var(--ct-line, #E3EBE7);
    font-size: 13px; color: var(--ct-ink-soft, #5E7370);
}
.ct-pv-readonly .material-icons-outlined { font-size: 18px; color: var(--ct-accent, #0B4F4A); }

/* An empty-state block marked [hidden] must stay hidden (a display rule on
   .ct-empty overrode the attribute, so "No attendance records fall within
   the selected dates" showed under a table that had records). */
.ct-empty[hidden] { display: none !important; }

/* =====================================================================
   Upgrade v8 (formerly crimtrack-upgrade-v8.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v8
   ---------------------------------------------------------------------
   A finishing layer over v1–v7. The Deep Teal + Sage palette, the
   typefaces and the layout are unchanged; this file refines depth,
   spacing, borders and states so the interface reads as one calm,
   premium product. Every colour below is an existing CrimTrack token.

     1. Tokens              6. Tables and badges
     2. Sidebar             7. Dialogs
     3. Page header         8. Agency intern list (new)
     4. Panels and cards    9. Document file cards (new)
     5. Controls           10. My Profile edit mode (new)
                           11. Dark theme, motion, print
   ===================================================================== */

/* =====================================================================
   1. Tokens (derived from the existing palette)
   ===================================================================== */

:root {
    --v8-shadow-sm: 0 1px 1px rgba(7, 60, 57, .04), 0 1px 3px rgba(7, 60, 57, .05);
    --v8-shadow: 0 1px 2px rgba(7, 60, 57, .04), 0 6px 16px -6px rgba(7, 60, 57, .08), 0 18px 40px -18px rgba(7, 60, 57, .10);
    --v8-shadow-lift: 0 2px 4px rgba(7, 60, 57, .05), 0 12px 28px -10px rgba(7, 60, 57, .16);
    --v8-shadow-dialog: 0 2px 6px rgba(7, 60, 57, .08), 0 32px 80px -20px rgba(7, 60, 57, .38);
    --v8-ring: 0 0 0 4px rgba(47, 119, 112, .16);
    --v8-hairline: rgba(11, 79, 74, .09);
    --v8-radius-card: 18px;
    --v8-ease: cubic-bezier(.2, .7, .2, 1);
}

/* =====================================================================
   2. Sidebar
   ===================================================================== */

html body:not(.login-body) .layout > aside,
html body:not(.login-body) #appSidebar {
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(175, 201, 190, .16) 0%, rgba(175, 201, 190, 0) 60%),
        linear-gradient(180deg, #0B4F4A 0%, #094642 55%, #073C39 100%) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06), 8px 0 30px -18px rgba(4, 30, 28, .45);
}

html body:not(.login-body) .sidebar-brand {
    border-bottom-color: rgba(255, 255, 255, .09) !important;
}

html body:not(.login-body) .sidebar-brand h2 {
    font-weight: 700 !important;
    letter-spacing: -.02em;
}

html body:not(.login-body) .side-nav a {
    position: relative;
    transition: background .18s var(--v8-ease), color .18s var(--v8-ease), box-shadow .18s var(--v8-ease) !important;
}

html body:not(.login-body) .side-nav a .material-icons-outlined {
    opacity: .82;
    transition: opacity .18s var(--v8-ease);
}

html body:not(.login-body) .side-nav a:hover .material-icons-outlined,
html body:not(.login-body) .side-nav a.active .material-icons-outlined { opacity: 1; }

html body:not(.login-body) .side-nav a.active {
    background: linear-gradient(90deg, rgba(221, 234, 228, .20) 0%, rgba(221, 234, 228, .08) 100%) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 6px 16px -8px rgba(0, 0, 0, .35) !important;
}

html body:not(.login-body) .side-nav a.active::before {
    content: "";
    position: absolute;
    left: -2px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: #AFC9BE;
}

html body:not(.login-body) .layout > aside.collapsed .side-nav a.active::before { display: none; }

html body:not(.login-body) .sidebar-filter form,
html body:not(.login-body) .sidebar-filter {
    border-color: rgba(255, 255, 255, .09);
}

/* =====================================================================
   3. Page header
   ===================================================================== */

html body:not(.login-body) .page-header {
    background: rgba(255, 255, 255, .82) !important;
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--v8-hairline) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 8px 24px -20px rgba(7, 60, 57, .35) !important;
}

html body:not(.login-body) .page-header h1 {
    letter-spacing: -.02em;
}

html body:not(.login-body) .global-search-wrap {
    box-shadow: var(--v8-shadow-sm);
    transition: box-shadow .18s var(--v8-ease), border-color .18s var(--v8-ease);
}

html body:not(.login-body) .global-search-wrap:focus-within {
    box-shadow: var(--v8-ring);
}

html body:not(.login-body) .header-dropdown {
    border-radius: 16px !important;
    border: 1px solid var(--v8-hairline) !important;
    box-shadow: var(--v8-shadow-dialog) !important;
}

/* =====================================================================
   4. Panels and cards
   ===================================================================== */

html body:not(.login-body) main {
    background:
        radial-gradient(900px 320px at 100% -80px, rgba(221, 234, 228, .55), rgba(221, 234, 228, 0) 70%),
        var(--ct-canvas, #F6F9F7);
}

html body:not(.login-body) .panel,
html body:not(.login-body) .card,
html body:not(.login-body) .dashboard-panel,
html body:not(.login-body) .settings-card {
    border-radius: var(--v8-radius-card) !important;
    border-color: var(--v8-hairline) !important;
    box-shadow: var(--v8-shadow) !important;
}

html body:not(.login-body) .section-title-row h2,
html body:not(.login-body) .panel-heading h2,
html body:not(.login-body) .panel > h2,
html body:not(.login-body) .settings-card-heading h2 {
    letter-spacing: -.015em;
}

html body:not(.login-body) .stat-card,
html body:not(.login-body) .agency-kpi,
html body:not(.login-body) .quick-action,
html body:not(.login-body) .agency-assignment-card {
    border-color: var(--v8-hairline) !important;
    box-shadow: var(--v8-shadow-sm) !important;
    transition: box-shadow .2s var(--v8-ease), transform .2s var(--v8-ease), border-color .2s var(--v8-ease) !important;
}

html body:not(.login-body) a.stat-card:hover,
html body:not(.login-body) .stat-card:hover,
html body:not(.login-body) a.agency-kpi:hover,
html body:not(.login-body) a.quick-action:hover {
    box-shadow: var(--v8-shadow-lift) !important;
    border-color: rgba(47, 119, 112, .22) !important;
    transform: translateY(-1px);
}

html body:not(.login-body) .agency-assignment-card {
    border-radius: 16px !important;
}

html body:not(.login-body) .empty-state,
html body:not(.login-body) .ct-empty {
    border-radius: 14px;
}

/* =====================================================================
   5. Controls
   ===================================================================== */

html body:not(.login-body) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html body:not(.login-body) select,
html body:not(.login-body) textarea {
    border-color: #D6E2DC !important;
    box-shadow: inset 0 1px 1px rgba(7, 60, 57, .03);
    transition: border-color .16s var(--v8-ease), box-shadow .16s var(--v8-ease), background-color .16s var(--v8-ease);
}

html body:not(.login-body) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):hover,
html body:not(.login-body) select:hover,
html body:not(.login-body) textarea:hover {
    border-color: #BFD3CA !important;
}

html body:not(.login-body) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
html body:not(.login-body) select:focus,
html body:not(.login-body) textarea:focus {
    border-color: var(--ct-accent, #0B4F4A) !important;
    box-shadow: var(--v8-ring) !important;
}

/* Primary buttons: the same teal, with a soft top light and depth. */
html body:not(.login-body) button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle):not(.btn-approve):not(.ct-dv-item),
html body:not(.login-body) .btn:not(.secondary-btn):not(.action-danger):not(.btn-decline) {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(7, 60, 57, .16), 0 6px 14px -6px rgba(11, 79, 74, .45) !important;
    transition: background-color .16s var(--v8-ease), box-shadow .18s var(--v8-ease), transform .18s var(--v8-ease) !important;
}

html body:not(.login-body) button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle):not(.btn-approve):not(.ct-dv-item):not(:disabled):hover,
html body:not(.login-body) .btn:not(.secondary-btn):not(.action-danger):not(.btn-decline):hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(7, 60, 57, .16), 0 10px 20px -8px rgba(11, 79, 74, .5) !important;
    transform: translateY(-1px) !important;
}

html body:not(.login-body) button:not(.ct-bare):active,
html body:not(.login-body) .btn:active { transform: translateY(0) !important; }

html body:not(.login-body) .secondary-btn,
html body:not(.login-body) .btn.secondary-btn {
    border-color: #D6E2DC !important;
    box-shadow: 0 1px 2px rgba(7, 60, 57, .05) !important;
    transition: background-color .16s var(--v8-ease), border-color .16s var(--v8-ease), box-shadow .16s var(--v8-ease) !important;
}

html body:not(.login-body) .secondary-btn:hover,
html body:not(.login-body) .btn.secondary-btn:hover {
    border-color: #AFC9BE !important;
    box-shadow: 0 2px 8px -2px rgba(7, 60, 57, .12) !important;
}

html body:not(.login-body) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--ct-accent, #0B4F4A);
    outline-offset: 2px;
}

html body:not(.login-body) :is(input, select, textarea):focus-visible { outline: none; }

/* Quiet scrollbars inside the app. */
html body:not(.login-body) * { scrollbar-width: thin; scrollbar-color: #C9D9D2 transparent; }
html body:not(.login-body) *::-webkit-scrollbar { width: 10px; height: 10px; }
html body:not(.login-body) *::-webkit-scrollbar-thumb { background: #C9D9D2; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
html body:not(.login-body) *::-webkit-scrollbar-track { background: transparent; }

/* =====================================================================
   6. Tables and badges
   ===================================================================== */

html body:not(.login-body) .table-wrap,
html body:not(.login-body) .table-responsive {
    border-radius: 14px;
}

html body:not(.login-body) table th {
    background: linear-gradient(180deg, #F4F8F6 0%, #EEF5F1 100%) !important;
    color: #45605C !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #DDE8E3 !important;
}

html body:not(.login-body) table thead tr th:first-child { border-top-left-radius: 12px; }
html body:not(.login-body) table thead tr th:last-child { border-top-right-radius: 12px; }

html body:not(.login-body) table td {
    border-bottom-color: #EDF3F0 !important;
    font-variant-numeric: tabular-nums;
}

html body:not(.login-body) tbody tr { transition: background-color .14s var(--v8-ease); }
html body:not(.login-body) tbody tr:hover td { background: rgba(238, 245, 241, .7) !important; }

html body:not(.login-body) .status-badge {
    box-shadow: inset 0 0 0 1px rgba(11, 79, 74, .06);
    letter-spacing: .005em;
}

html body:not(.login-body) .student-profile-avatar {
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px rgba(11, 79, 74, .08);
}

/* =====================================================================
   7. Dialogs
   ===================================================================== */

html body .ct-dialog {
    background: rgba(7, 34, 32, .46) !important;
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

html body .ct-dialog-card,
html body .modal-card {
    border-radius: 20px !important;
    border-color: var(--v8-hairline) !important;
    box-shadow: var(--v8-shadow-dialog) !important;
}

html body .ct-dialog-head {
    padding: 18px 22px 16px !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FBF9 100%);
    border-bottom-color: var(--v8-hairline) !important;
}

html body:not(.login-body) .ct-dialog-title h2 {
    font-size: 18px !important;
    letter-spacing: -.015em;
}

html body .ct-dialog-close {
    border-radius: 10px !important;
    transition: background-color .16s var(--v8-ease);
}

html body .modal-overlay {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* =====================================================================
   8. Agency intern list
   ===================================================================== */

html body:not(.login-body) .ct-agency-link {
    display: inline;
    padding: 0;
    font: inherit;
    font-weight: inherit;
    color: inherit;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: rgba(47, 119, 112, .35);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color .16s var(--v8-ease), text-decoration-color .16s var(--v8-ease);
}

html body:not(.login-body) .ct-agency-link:hover {
    color: var(--ct-accent-hover, #0E625C);
    text-decoration-color: currentColor;
}

html body:not(.login-body) .ct-agency-link:focus-visible {
    outline: 2px solid var(--ct-accent, #0B4F4A);
    outline-offset: 3px;
    border-radius: 4px;
}

.ct-ai-dialog {
    width: min(100%, 940px) !important;
    height: min(86vh, 780px);
    height: min(86dvh, 780px);
}

.ct-ai-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--v8-hairline);
    background: #FBFDFC;
}

.ct-ai-search {
    position: relative;
    flex: 1;
    min-width: 0;
    margin: 0 !important;
}

.ct-ai-search > .material-icons-outlined {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--ct-ink-soft, #5E7370);
    pointer-events: none;
}

html body:not(.login-body) .ct-ai-search input[type="search"] {
    width: 100%;
    min-height: 42px;
    padding-left: 42px !important;
    border-radius: 12px !important;
    background: #FFFFFF;
}

.ct-ai-print { flex: 0 0 auto; min-height: 42px; }

.ct-ai-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px 22px 22px;
}

.ct-ai-count {
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-ai-table-wrap {
    border: 1px solid var(--v8-hairline);
    border-radius: 14px;
    overflow: auto;
}

html body:not(.login-body) .ct-ai-table { width: 100%; margin: 0; }
html body:not(.login-body) .ct-ai-table th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
html body:not(.login-body) .ct-ai-table td { vertical-align: middle; }
.ct-ai-table td small { color: var(--ct-ink-soft, #5E7370); }
.ct-ai-num { width: 44px; color: var(--ct-ink-faint, #5D7774); font-weight: 600; }
.ct-ai-weeks { font-weight: 600; font-size: 13px; }

.ct-ai-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    min-height: 220px;
    text-align: center;
    color: var(--ct-ink-soft, #5E7370);
    border: 1px dashed #CFDFD8;
    border-radius: 16px;
    background: #FBFDFC;
}

.ct-ai-empty .material-icons-outlined { font-size: 34px; color: #8FB2A5; }
.ct-ai-empty p { margin: 0; font-size: 13.5px; }

@media (max-width: 640px) {
    .ct-ai-toolbar { padding: 12px 14px; }
    .ct-ai-body { padding: 12px 14px 16px; }
}

/* =====================================================================
   9. Document file cards
   ===================================================================== */

html body .ct-doc-dialog {
    width: min(960px, 100%) !important;
    height: auto !important;
    max-height: min(90vh, 900px);
    max-height: min(90dvh, 900px);
}

.ct-dv-files {
    flex: 1;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 22px 22px;
    background: #F8FBF9;
}

.ct-file-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
    background: var(--ct-surface, #FFFFFF);
    border: 1px solid var(--v8-hairline);
    border-radius: 16px;
    box-shadow: var(--v8-shadow-sm);
    transition: box-shadow .2s var(--v8-ease), border-color .2s var(--v8-ease);
}

.ct-file-card:hover { box-shadow: var(--v8-shadow-lift); border-color: rgba(47, 119, 112, .2); }
.ct-file-card.is-focus { border-color: var(--ct-accent, #0B4F4A); box-shadow: var(--v8-ring), var(--v8-shadow-sm); }

.ct-file-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
}

.ct-file-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 56px;
    border-radius: 6px 14px 6px 6px;
    background: var(--ct-tint, #EEF5F1);
    color: var(--ct-accent, #0B4F4A);
    box-shadow: inset 0 0 0 1px rgba(11, 79, 74, .08);
}

.ct-file-icon .material-icons-outlined { font-size: 22px; margin-top: -8px; }

.ct-file-icon b {
    position: absolute;
    left: 5px;
    right: 5px;
    bottom: 5px;
    padding: 1px 0;
    border-radius: 4px;
    background: var(--fc, #0B4F4A);
    color: #FFFFFF;
    font-size: 9px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    overflow: hidden;
}

.ct-file-icon.is-pdf { --fc: #B2402F; background: #FBEDEA; color: #B2402F; }
.ct-file-icon.is-doc { --fc: #2F6690; background: #EAF1F9; color: #2F6690; }
.ct-file-icon.is-img { --fc: #1F7A55; background: #EAF4EE; color: #1F7A55; }

.ct-file-copy { min-width: 0; }

html body:not(.login-body) .ct-file-copy h3 {
    margin: 1px 0 2px;
    font-size: 15.5px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--ct-ink, #12332F);
}

.ct-file-name {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-ink, #12332F);
    opacity: .78;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ct-file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-file-meta span + span::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    margin: 0 9px;
    vertical-align: -1px;
    background: #CFDFD8;
}

.ct-file-status { justify-self: end; }

.ct-file-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-file-steps li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 7px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    background: #F1F5F3;
    color: var(--ct-ink-soft, #5E7370);
}

.ct-file-steps li .material-icons-outlined { font-size: 15px; }
.ct-file-steps li.is-done { background: var(--ct-good-bg, #E6F4EC); color: var(--ct-good, #1F7A55); }
.ct-file-steps li.is-wait { background: var(--ct-warn-bg, #FFF4DE); color: var(--ct-warn, #8A5A12); }
.ct-file-steps li.is-bad  { background: var(--ct-bad-bg, #FDECEA); color: var(--ct-bad, #B42318); }

.ct-file-card .ct-remarks { margin: 0; }

html body .ct-file-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #EDF3F0 !important;
}

.ct-file-actions form { margin: 0; display: inline-flex; }
.ct-file-card .ct-dv-reject { margin-top: 2px; }

@media (max-width: 640px) {
    .ct-dv-files { padding: 12px; }
    .ct-file-main { grid-template-columns: auto minmax(0, 1fr); }
    .ct-file-status { grid-column: 1 / -1; justify-self: start; }
}

/* =====================================================================
   10. My Profile — Edit
   ===================================================================== */

.ct-profile-photo-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 4px;
    border: 1px solid var(--v8-hairline);
    border-radius: 14px;
    background: linear-gradient(180deg, #FBFDFC 0%, #F4F8F6 100%);
}

.ct-profile-photo {
    position: relative;
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
}

.ct-profile-photo img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px rgba(11, 79, 74, .12);
}

html body:not(.login-body) .ct-profile-photo-pick {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: none;
    place-items: center;
    width: 28px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--ct-accent, #0B4F4A) !important;
    color: #FFFFFF;
    box-shadow: 0 0 0 2px #FFFFFF, 0 4px 10px -2px rgba(7, 60, 57, .4);
}

html body:not(.login-body) .ct-profile-photo-pick .material-icons-outlined { font-size: 15px; }
html body:not(.login-body) .ct-profile-photo-pick:hover { background: var(--ct-accent-hover, #0E625C); }
.ct-profile-form.is-editing .ct-profile-photo-pick { display: grid; }

.ct-profile-photo-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.ct-profile-photo-copy strong { font-size: 13.5px; color: var(--ct-ink, #12332F); }
.ct-profile-photo-copy small { font-size: 12px; color: var(--ct-ink-soft, #5E7370); overflow-wrap: anywhere; }

html body:not(.login-body) .ct-profile-form .ct-profile-edit,
html body:not(.login-body) .ct-profile-form .ct-profile-actions button {
    flex: 0 0 auto;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
.ct-profile-edit[hidden] { display: none !important; }

/* Read-only fields look like settled values, not empty boxes. */
html body:not(.login-body) .ct-profile-form:not(.is-editing) input[readonly],
html body:not(.login-body) .ct-profile-form:not(.is-editing) textarea[readonly] {
    background: #F7FAF8 !important;
    border-color: #E6EEEA !important;
    box-shadow: none !important;
    color: var(--ct-ink, #12332F);
    cursor: default;
}

html body:not(.login-body) .ct-profile-form:not(.is-editing) textarea[readonly] { resize: none; }

.ct-profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.ct-profile-actions[hidden] { display: none !important; }

@media (max-width: 560px) {
    .ct-profile-photo-row { flex-wrap: wrap; }
    html body:not(.login-body) .ct-profile-form .ct-profile-edit { width: 100% !important; }
}

/* =====================================================================
   11. Dark theme, reduced motion, print
   ===================================================================== */

:root[data-theme="dark"] {
    --v8-hairline: rgba(220, 229, 224, .08);
    --v8-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 16px 36px -18px rgba(0, 0, 0, .5);
    --v8-shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --v8-shadow-lift: 0 12px 28px -10px rgba(0, 0, 0, .55);
    --v8-ring: 0 0 0 4px rgba(168, 195, 181, .18);
}

:root[data-theme="dark"] body:not(.login-body) main {
    background: radial-gradient(900px 320px at 100% -80px, rgba(76, 148, 144, .12), rgba(76, 148, 144, 0) 70%), var(--ct-canvas) !important;
}

:root[data-theme="dark"] body:not(.login-body) .page-header {
    background: rgba(23, 59, 57, .82) !important;
    box-shadow: 0 8px 24px -20px rgba(0, 0, 0, .7) !important;
}

:root[data-theme="dark"] body:not(.login-body) table th {
    background: #163937 !important;
    color: #A9C0B8 !important;
    border-bottom-color: #26433D !important;
}

:root[data-theme="dark"] body:not(.login-body) table td { border-bottom-color: #22403C !important; }
:root[data-theme="dark"] body:not(.login-body) tbody tr:hover td { background: rgba(7, 60, 57, .55) !important; }
:root[data-theme="dark"] body:not(.login-body) .student-profile-avatar { box-shadow: 0 0 0 2px #1D4643; }

:root[data-theme="dark"] body:not(.login-body) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
:root[data-theme="dark"] body:not(.login-body) select,
:root[data-theme="dark"] body:not(.login-body) textarea,
:root[data-theme="dark"] body:not(.login-body) .secondary-btn { border-color: #2F5450 !important; }

:root[data-theme="dark"] .ct-dialog-head,
:root[data-theme="dark"] .ct-ai-toolbar,
:root[data-theme="dark"] .ct-dv-files,
:root[data-theme="dark"] .ct-ai-empty,
:root[data-theme="dark"] .ct-profile-photo-row { background: var(--ct-surface-sunken, #163937) !important; }

:root[data-theme="dark"] body:not(.login-body) .ct-ai-search input[type="search"] { background: #071F1D; }
:root[data-theme="dark"] .ct-file-card { background: var(--ct-surface, #1D4643); }
:root[data-theme="dark"] .ct-file-steps li { background: rgba(255, 255, 255, .06); color: #A9C0B8; }
:root[data-theme="dark"] .ct-file-steps li.is-done { background: rgba(111, 207, 151, .14); color: #9FE0BC; }
:root[data-theme="dark"] .ct-file-steps li.is-wait { background: rgba(240, 180, 80, .14); color: #F2CD8A; }
:root[data-theme="dark"] .ct-file-steps li.is-bad  { background: rgba(240, 110, 100, .14); color: #F4AAA2; }
:root[data-theme="dark"] .ct-file-actions { border-top-color: #26433D !important; }
:root[data-theme="dark"] .ct-file-meta span + span::before { background: #2F5450; }
:root[data-theme="dark"] .ct-profile-photo img,
:root[data-theme="dark"] body:not(.login-body) .ct-profile-photo-pick { box-shadow: 0 0 0 3px #1D4643; }

:root[data-theme="dark"] body:not(.login-body) .ct-profile-form:not(.is-editing) input[readonly],
:root[data-theme="dark"] body:not(.login-body) .ct-profile-form:not(.is-editing) textarea[readonly] {
    background: #163937 !important;
    border-color: #26433D !important;
    color: var(--ct-ink);
}

@media (prefers-reduced-motion: reduce) {
    html body:not(.login-body) *,
    html body:not(.login-body) *::before,
    html body:not(.login-body) *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    html body:not(.login-body) a:hover,
    html body:not(.login-body) button:hover,
    html body:not(.login-body) .stat-card:hover { transform: none !important; }
}

@media print {
    html body:not(.login-body) .panel,
    html body:not(.login-body) .card { box-shadow: none !important; }
    html body:not(.login-body) main { background: #FFFFFF !important; }
}

/* =====================================================================
   Upgrade v9 (formerly crimtrack-upgrade-v9.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v9
   ---------------------------------------------------------------------
   Loaded after v8. Same Deep Teal + Sage palette and the same fonts;
   every colour here is an existing CrimTrack token or a darker/lighter
   step of one, used only where a hover state needed more contrast.

     1. Helpers
     2. Text-hover fixes (links, bare buttons, primary buttons)
     3. Agencies — Partner Agencies table, intern-count chip, brand cell
     4. Agency Analytics — header with School Year, no banner
     5. Certificates — logo panel
     6. Shared finishing (cards, floating agency chip)
     7. Responsive
     8. Dark theme
   ===================================================================== */

/* =====================================================================
   1. Helpers
   ===================================================================== */

.ct-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =====================================================================
   2. Text-hover fixes

   style.css has a global `button:hover { background: var(--accent) }`.
   Buttons marked .ct-bare opt out of the solid-teal button look, but that
   rule still reached the ones without their own hover background, so
   dark text sat on a teal fill and disappeared (agency names, the date
   filter). These rules give each of them an explicit, readable hover.
   ===================================================================== */

/* Clickable agency names: text stays on the row, only colour + underline change. */
html body:not(.login-body) button.ct-agency-link,
html body:not(.login-body) button.ct-agency-link:hover,
html body:not(.login-body) button.ct-agency-link:focus-visible,
html body:not(.login-body) button.ct-agency-link:active {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    border: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    padding: 0 !important;
    border-radius: 3px;
}

html body:not(.login-body) button.ct-agency-link {
    color: var(--ct-ink, #12332F) !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

html body:not(.login-body) button.ct-agency-link:hover {
    color: var(--ct-accent-hover, #0E625C) !important;
    text-decoration-color: currentColor !important;
}

/* Date filter trigger (Attendance Logs, History). */
html body:not(.login-body) button.ct-datefilter-trigger,
html body:not(.login-body) button.ct-datefilter-trigger:hover {
    transform: none !important;
    box-shadow: none !important;
}

html body:not(.login-body) button.ct-datefilter-trigger:hover {
    background: var(--ct-tint, #EEF5F1) !important;
    color: var(--ct-ink, #12332F) !important;
}

/* Safety net for any other bare button that has no hover of its own:
   never let the global teal fill appear behind its text. */
html body:not(.login-body) button.ct-bare:not(.ct-dialog-close):not(.ct-chip):not(.ct-cal-nav):not(.ct-verify-btn):not(.ct-profile-photo-pick):not(.ct-kiosk-switch):not(.ct-datefilter-clear):not(.ct-cd-color):not(.ct-cal-done):not(.ct-cal-day):not(.ct-attendance-photo-btn):not(.attendance-photo-card-link):not(.ct-datefilter-trigger):not(.ct-agency-link):not(.ct-v9-intern-chip):hover {
    background-color: transparent;
}

/* Text links inside tables and cards: colour shift + underline, never a fill. */
html body:not(.login-body) a.student-name-link:hover,
html body:not(.login-body) a.student-name-link:hover strong {
    color: var(--ct-accent-hover, #0E625C) !important;
}

html body:not(.login-body) a.student-name-link:hover strong {
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

/* A text link inside hint copy (Certificates dialog). */
html body:not(.login-body) .ct-inline-link {
    display: inline !important;
    padding: 0 !important;
    min-height: 0 !important;
    font-size: inherit !important;
    font-weight: 600;
    background: none !important;
    border: 0 !important;
    color: var(--ct-accent, #0B4F4A) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

html body:not(.login-body) .ct-inline-link:hover { color: var(--ct-accent-hover, #0E625C) !important; }

/* =====================================================================
   3. Agencies
   ===================================================================== */

html body:not(.login-body) .ct-v9-agency-head { margin-bottom: 14px; }
html body:not(.login-body) .ct-v9-agency-head h2 { margin: 0 0 4px; }
html body:not(.login-body) .ct-v9-agency-head p { margin: 0; }

/* Agency cell: name, intern chip and key button on one tidy line. */
html body:not(.login-body) .ct-v6-agency-name {
    align-items: center;
    gap: 8px 10px;
    min-height: 32px;
}

html body:not(.login-body) .ct-v6-agency-name > strong { font-weight: 700; }

html body:not(.login-body) .ct-v6-agency-name .ct-icon-action {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(7, 60, 57, .06) !important;
}

html body:not(.login-body) button.ct-v9-intern-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    min-height: 24px !important;
    width: auto !important;
    padding: 0 9px 0 7px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: var(--ct-tint, #EEF5F1) !important;
    color: var(--ct-accent, #0B4F4A) !important;
    box-shadow: none !important;
    transform: none !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease;
}

html body:not(.login-body) button.ct-v9-intern-chip .material-icons-outlined { font-size: 15px; }

html body:not(.login-body) button.ct-v9-intern-chip:hover {
    background: var(--ct-tint-deep, #DDEAE4) !important;
    border-color: rgba(11, 79, 74, .22) !important;
    color: var(--ct-accent, #0B4F4A) !important;
}

html body:not(.login-body) button.ct-v9-intern-chip.is-empty {
    background: #F2F5F4 !important;
    color: var(--ct-ink-soft, #5E7370) !important;
}

/* Brand cell: fixed 40 × 40 box; a missing image shows "Default brand"
   instead of broken-image alt text spilling out of the column. */
.ct-v9-brand { display: inline-flex; align-items: center; min-height: 40px; }
.ct-v9-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px rgba(11, 79, 74, .08);
    overflow: hidden;
    font-size: 0;
}
.ct-v9-brand-fallback { display: none; }
.ct-v9-brand.is-missing .ct-v9-brand-fallback { display: inline; }

/* =====================================================================
   4. Agency Analytics
   ===================================================================== */

.ct-v9-header-copy { min-width: 0; }

.ct-v9-header-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
}

html body:not(.login-body) .ct-v9-header-title h1 { margin: 0 !important; }

.ct-v9-year {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.ct-v9-year > .material-icons-outlined {
    position: absolute;
    left: 8px;
    font-size: 15px;
    color: var(--ct-accent, #0B4F4A);
    pointer-events: none;
}

html body:not(.login-body) .ct-v9-year select {
    width: auto !important;
    min-width: 0 !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 26px 0 27px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--ct-accent, #0B4F4A) !important;
    background-color: var(--ct-tint, #EEF5F1) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}

html body:not(.login-body) .ct-v9-year select:hover { border-color: rgba(11, 79, 74, .22) !important; }
html body:not(.login-body) .ct-v9-year select:focus { box-shadow: var(--v8-ring, 0 0 0 4px rgba(47, 119, 112, .16)) !important; }

/* With the banner gone, the KPI grid is the first thing under the header. */
html body:not(.login-body) main.ct-v9-analytics > .page-header + .agency-kpis { margin-top: 22px !important; }
html body:not(.login-body) main.ct-v9-analytics > .agency-kpis { margin-bottom: 16px !important; }
html body:not(.login-body) main.ct-v9-analytics > .agency-kpis.secondary { margin-bottom: 24px !important; }
html body:not(.login-body) main.ct-v9-analytics .agency-dashboard-grid { margin-top: 0 !important; margin-bottom: 24px !important; }
html body:not(.login-body) main.ct-v9-analytics .agency-dashboard-grid > .panel { margin: 0 !important; }
html body:not(.login-body) main.ct-v9-analytics .agency-kpi strong { font-variant-numeric: tabular-nums; }

/* =====================================================================
   5. Certificates — logo
   ===================================================================== */

.ct-cert-logo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid var(--v8-hairline, rgba(11, 79, 74, .09));
    border-radius: 16px;
    background: linear-gradient(180deg, #FBFDFC 0%, #F4F8F6 100%);
}

.ct-cert-logo-preview {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    padding: 8px;
    border-radius: 16px;
    background:
        conic-gradient(#F1F5F3 25%, #FFFFFF 0 50%, #F1F5F3 0 75%, #FFFFFF 0) 0 0 / 14px 14px;
    box-shadow: inset 0 0 0 1px rgba(11, 79, 74, .10), 0 1px 2px rgba(7, 60, 57, .05);
}

.ct-cert-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.ct-cert-logo-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct-cert-logo-copy strong { font-size: 14.5px; color: var(--ct-ink, #12332F); }
.ct-cert-logo-copy small { font-size: 12.5px; line-height: 1.5; color: var(--ct-ink-soft, #5E7370); }
.ct-cert-logo-copy .ct-cert-logo-file { color: var(--ct-accent, #0B4F4A); font-weight: 600; overflow-wrap: anywhere; }

.ct-cert-logo-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.ct-cert-logo-actions form { display: inline-flex; flex-wrap: wrap; gap: 8px; margin: 0; }

html body #certificateLogo [hidden] { display: none !important; }
html body:not(.login-body) .ct-cert-logo-actions form { align-items: center; }
html body:not(.login-body) .ct-cert-logo-actions .file-upload-control { margin: 0 !important; }

/* =====================================================================
   6. Shared finishing
   ===================================================================== */

/* The floating agency chip (bottom right) no longer covers the last card:
   pages leave room for it at the end of the scroll. */
html body.partner-watermarked:not(.login-body) main { padding-bottom: 84px !important; }


/* =====================================================================
   7. Responsive
   ===================================================================== */

@media (max-width: 760px) {
    .ct-cert-logo { grid-template-columns: auto minmax(0, 1fr); }
    .ct-cert-logo-actions { grid-column: 1 / -1; justify-content: flex-start; }
    .ct-v9-header-title { gap: 4px 8px; }
}

@media (max-width: 520px) {
    .ct-cert-logo { grid-template-columns: 1fr; justify-items: start; }
    .ct-cert-logo-actions, .ct-cert-logo-actions form { width: 100%; }
    html body:not(.login-body) .ct-cert-logo-actions form > button { width: 100% !important; }
}

/* Touch screens have no hover: keep the pressed state readable too. */
@media (hover: none) {
    html body:not(.login-body) button.ct-agency-link:active { color: var(--ct-accent-hover, #0E625C) !important; }
}

/* =====================================================================
   8. Dark theme
   ===================================================================== */

/* Primary buttons: the default dark hover (#5BA9A4) left white text at
   2.7:1. A deeper step of the same teal keeps it at 4.8:1. */
:root[data-theme="dark"] body:not(.login-body) button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle):not(.btn-approve):not(.ct-dv-item):not(:disabled):hover,
:root[data-theme="dark"] body:not(.login-body) .btn:not(.secondary-btn):not(.action-danger):not(.btn-decline):hover {
    background-color: #3A7C78 !important;
    border-color: #3A7C78 !important;
    color: #FFFFFF !important;
}

:root[data-theme="dark"] body:not(.login-body) button.ct-agency-link { color: var(--ct-ink, #DCE5E0) !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-agency-link:hover,
:root[data-theme="dark"] body:not(.login-body) a.student-name-link:hover,
:root[data-theme="dark"] body:not(.login-body) a.student-name-link:hover strong,
:root[data-theme="dark"] body:not(.login-body) .ct-inline-link,
:root[data-theme="dark"] body:not(.login-body) .ct-inline-link:hover { color: #9FD3CB !important; }

:root[data-theme="dark"] body:not(.login-body) button.ct-datefilter-trigger:hover {
    background: var(--ct-tint, #21514D) !important;
    color: var(--ct-ink, #DCE5E0) !important;
}

:root[data-theme="dark"] body:not(.login-body) .intern-absent-btn:hover {
    background: rgba(240, 110, 100, .14) !important;
    border-color: rgba(244, 170, 162, .45) !important;
    color: #F4AAA2 !important;
}

:root[data-theme="dark"] body:not(.login-body) button.ct-v9-intern-chip {
    background: var(--ct-tint, #21514D) !important;
    color: #B7E1DA !important;
}

:root[data-theme="dark"] body:not(.login-body) button.ct-v9-intern-chip:hover {
    background: var(--ct-tint-deep, #2A605B) !important;
    border-color: rgba(183, 225, 218, .3) !important;
    color: #B7E1DA !important;
}

:root[data-theme="dark"] body:not(.login-body) button.ct-v9-intern-chip.is-empty {
    background: rgba(255, 255, 255, .06) !important;
    color: var(--ct-ink-soft, #A9C0B8) !important;
}

:root[data-theme="dark"] body:not(.login-body) .ct-v9-year select {
    background-color: var(--ct-tint, #21514D) !important;
    color: #B7E1DA !important;
}

:root[data-theme="dark"] .ct-v9-year > .material-icons-outlined { color: #B7E1DA; }

:root[data-theme="dark"] .ct-cert-logo { background: var(--ct-surface-sunken, #163937); }
:root[data-theme="dark"] .ct-cert-logo-preview {
    background: conic-gradient(#E9EFEC 25%, #FFFFFF 0 50%, #E9EFEC 0 75%, #FFFFFF 0) 0 0 / 14px 14px;
}
:root[data-theme="dark"] .ct-cert-logo-copy .ct-cert-logo-file { color: #9FD3CB; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v9-intern-chip.is-empty,
:root[data-theme="dark"] .ct-v9-brand img { box-shadow: none; }

/* Icons that turn teal-on-tint on hover (icon-only View/Edit buttons,
   dashboard quick actions) were 2.5:1 in dark mode; a lighter step of
   the same sage keeps them above 5:1. */
:root[data-theme="dark"] body:not(.login-body) .table-link.ct-icon-only:hover,
:root[data-theme="dark"] body:not(.login-body) .table-link.ct-icon-only:hover .material-icons-outlined,
:root[data-theme="dark"] body:not(.login-body) a.quick-action:hover .material-icons-outlined,
:root[data-theme="dark"] body:not(.login-body) a.quick-action:hover span:first-child,
:root[data-theme="dark"] body:not(.login-body) button.table-link.ct-icon-only:not(#ct-link):hover,
:root[data-theme="dark"] body:not(.login-body) button.table-link.ct-icon-only:not(#ct-link):hover .material-icons-outlined,
:root[data-theme="dark"] body:not(.login-body) button.ct-kiosk-switch:not(#ct-link):hover,
:root[data-theme="dark"] body:not(.login-body) button.ct-kiosk-switch:not(#ct-link):hover .material-icons-outlined { color: #9FD3CB !important; }

/* =====================================================================
   Upgrade v10 (formerly crimtrack-upgrade-v10.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v10
   ---------------------------------------------------------------------
   Loaded after v9. Same Deep Teal + Sage palette and fonts.

     1. Agencies — Partner Agencies and Agency Login Accounts tables,
        laid out to match the reference screenshot
     2. Dark theme
   ===================================================================== */

/* =====================================================================
   1. Agencies
   ===================================================================== */

html body:not(.login-body) .ct-v10-table-wrap {
    border: 1px solid var(--ct-line, #E1EAE6);
    border-radius: 14px;
    overflow-x: auto;
    background: var(--ct-surface, #FFFFFF);
}

html body:not(.login-body) table.ct-v10-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

html body:not(.login-body) table.ct-v10-table thead th {
    background: var(--ct-tint, #EEF5F1);
    color: var(--ct-ink-soft, #3E5552);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    padding: 11px 10px !important;
    border-bottom: 1px solid var(--ct-line, #E1EAE6);
    white-space: nowrap;
}

html body:not(.login-body) table.ct-v10-table tbody td {
    padding: 8px 10px !important;
    font-size: 13px;
    color: var(--ct-ink, #1F2A2A);
    border-bottom: 1px solid var(--ct-line, #E9F0ED);
    vertical-align: middle;
}

html body:not(.login-body) table.ct-v10-table tbody tr:last-child td { border-bottom: 0; }
html body:not(.login-body) table.ct-v10-table tbody tr:hover td { background: rgba(11, 79, 74, .025); }

/* Building icon column */
html body:not(.login-body) table.ct-v10-table .ct-v10-col-icon {
    width: 44px;
    padding-right: 4px;
    text-align: center;
}
html body:not(.login-body) table.ct-v10-table .ct-v10-col-icon .material-icons-outlined {
    font-size: 20px;
    color: var(--ct-accent, #0B4F4A);
    vertical-align: middle;
}

/* Agency name with the small "open" icon, kept on one line */
html body:not(.login-body) .ct-v10-col-agency { min-width: 200px; }
html body:not(.login-body) button.ct-v10-agency-link {
    display: inline !important;
    padding: 0 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    text-align: left;
    white-space: nowrap;
    color: var(--ct-accent, #0B4F4A) !important;
}
html body:not(.login-body) .ct-v10-nowrap { white-space: nowrap; }
html body:not(.login-body) button.ct-v10-agency-link:hover { color: var(--ct-accent-hover, #0E625C) !important; }
html body:not(.login-body) button.ct-v10-agency-link .ct-v10-agency-text {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
html body:not(.login-body) button.ct-v10-agency-link .ct-v10-open-icon {
    font-size: 15px;
    color: var(--ct-ink-soft, #5E7370);
    text-decoration: none;
    margin-left: 5px;
    vertical-align: -3px;
}
html body:not(.login-body) button.ct-v10-agency-link:hover .ct-v10-open-icon { color: var(--ct-accent, #0B4F4A); }
/* v9 underlines the whole button; the underline now sits on the name only. */
html body:not(.login-body) button.ct-agency-link.ct-v10-agency-link,
html body:not(.login-body) button.ct-agency-link.ct-v10-agency-link:hover { text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; }

html body:not(.login-body) .ct-v10-col-interns,
html body:not(.login-body) .ct-v10-col-brand { white-space: nowrap; }
html body:not(.login-body) button.ct-v10-intern-chip { min-height: 26px !important; padding: 0 11px 0 8px !important; border-radius: 8px !important; }

/* Address stays on one line when there is room (as in the reference) and
   wraps only when the screen is too narrow, so the table does not scroll
   sideways on a normal laptop screen. */
html body:not(.login-body) .ct-v10-col-address { min-width: 150px; }
/* Very narrow laptop widths: long agency names may wrap rather than hide the Actions. */
@media (max-width: 1500px) { html body:not(.login-body) button.ct-v10-agency-link { white-space: normal; } html body:not(.login-body) .ct-v10-col-agency { min-width: 190px; } }

/* Actions: square icon buttons (key · delete · open) */
html body:not(.login-body) table.ct-v10-table .ct-v10-col-actions { width: 1%; white-space: nowrap; }
html body:not(.login-body) table.ct-v10-account-table .ct-v10-col-actions { text-align: right; }
html body:not(.login-body) .ct-v10-actions { display: inline-flex; align-items: center; gap: 6px; }
html body:not(.login-body) .ct-v10-actions form { margin: 0; display: inline-flex; }

html body:not(.login-body) button.ct-v10-act {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px !important;
    height: 28px !important;
    min-width: 34px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease;
}
html body:not(.login-body) button.ct-v10-act .material-icons-outlined { font-size: 17px; }

html body:not(.login-body) button.ct-v10-act-key { background: var(--ct-tint, #EEF5F1) !important; color: var(--ct-accent, #0B4F4A) !important; }
html body:not(.login-body) button.ct-v10-act-key:hover,
html body:not(.login-body) button.ct-v10-act-key:focus-visible { background: var(--ct-tint-deep, #DDEAE4) !important; border-color: rgba(11, 79, 74, .22) !important; color: var(--ct-accent, #0B4F4A) !important; }

html body:not(.login-body) button.ct-v10-act-delete { background: #FDECEC !important; color: #C62828 !important; }
html body:not(.login-body) button.ct-v10-act-delete:hover,
html body:not(.login-body) button.ct-v10-act-delete:focus-visible { background: #FAD9D9 !important; border-color: rgba(198, 40, 40, .25) !important; color: #B71C1C !important; }

html body:not(.login-body) button.ct-v10-act-open { background: #F1F4F3 !important; color: var(--ct-ink-soft, #3E5552) !important; }
html body:not(.login-body) button.ct-v10-act-open:hover,
html body:not(.login-body) button.ct-v10-act-open:focus-visible { background: #E4EAE8 !important; border-color: rgba(11, 79, 74, .16) !important; color: var(--ct-ink, #1F2A2A) !important; }

/* Agency Login Accounts header: shield + title + subtitle */
html body:not(.login-body) .ct-v10-section-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}
html body:not(.login-body) .ct-v10-section-head h2 { margin: 0 0 3px; }
html body:not(.login-body) .ct-v10-section-head p { margin: 0; font-size: 12.5px; }
html body:not(.login-body) .ct-v10-section-icon { font-size: 26px; color: var(--ct-ink, #1F2A2A); margin-top: 1px; }

/* Assigned agency: reads as plain text, still opens the intern list */
html body:not(.login-body) button.ct-v10-plain-link,
html body:not(.login-body) button.ct-v10-plain-link:hover {
    display: inline !important;
    padding: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    transform: none !important;
    color: inherit !important;
    font: inherit !important;
    text-align: left;
    cursor: pointer;
}
html body:not(.login-body) button.ct-v10-plain-link:hover,
html body:not(.login-body) button.ct-v10-plain-link:focus-visible {
    color: var(--ct-accent, #0B4F4A) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

/* =====================================================================
   2. Dark theme
   ===================================================================== */

:root[data-theme="dark"] body:not(.login-body) .ct-v10-table-wrap { border-color: rgba(255, 255, 255, .08); background: transparent; }
:root[data-theme="dark"] body:not(.login-body) table.ct-v10-table thead th { background: var(--ct-tint, #21514D); color: #B7E1DA; border-color: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] body:not(.login-body) table.ct-v10-table tbody td { color: var(--ct-ink, #DCE5E0); border-color: rgba(255, 255, 255, .06); }
:root[data-theme="dark"] body:not(.login-body) table.ct-v10-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
:root[data-theme="dark"] body:not(.login-body) table.ct-v10-table .ct-v10-col-icon .material-icons-outlined,
:root[data-theme="dark"] body:not(.login-body) .ct-v10-section-icon { color: #9FD3CB; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-agency-link .ct-v10-open-icon { color: #A9C0B8; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-agency-link,
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-agency-link:hover { color: #9FD3CB !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-act-key { background: var(--ct-tint, #21514D) !important; color: #B7E1DA !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-act-key:hover { background: var(--ct-tint-deep, #2A605B) !important; color: #D6F0EB !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-act-delete { background: rgba(240, 110, 100, .14) !important; color: #F4AAA2 !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-act-delete:hover { background: rgba(240, 110, 100, .24) !important; color: #F8C4BE !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-act-open { background: rgba(255, 255, 255, .07) !important; color: #C9D8D3 !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-act-open:hover { background: rgba(255, 255, 255, .13) !important; color: #FFFFFF !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v10-plain-link:hover { color: #9FD3CB !important; }

/* Icons keep their box even when the icon font has not loaded (offline XAMPP). */
html body:not(.login-body) table.ct-v10-table .material-icons-outlined { overflow: hidden; }
html body:not(.login-body) table.ct-v10-table .ct-v10-col-icon .material-icons-outlined { width: 20px; }
html body:not(.login-body) button.ct-v10-act .material-icons-outlined { width: 17px; }
html body:not(.login-body) button.ct-v10-agency-link .ct-v10-open-icon { width: 15px; }
html body:not(.login-body) button.ct-v10-intern-chip .material-icons-outlined { width: 15px; }

/* =====================================================================
   3. Forgot Password / Reset Password (same card as the login page)
   ===================================================================== */

.login-body .ct-auth-card .login-welcome-sub { margin-bottom: 18px; }
.login-body .ct-auth-card .alert { display: flex; gap: 8px; align-items: flex-start; }
.login-body .ct-auth-card .alert .material-icons-outlined { font-size: 20px; flex: none; }

.login-body .ct-auth-sent {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 6px 0 18px;
    padding: 16px;
    border-radius: 14px;
    background: #EEF5F1;
    border: 1px solid #D5E6DE;
    color: #1F2A2A;
    text-align: left;
}
.login-body .ct-auth-sent > .material-icons-outlined { font-size: 28px; color: #0B4F4A; flex: none; }
.login-body .ct-auth-sent strong { display: block; margin-bottom: 4px; color: #0B4F4A; font-size: 15px; }
.login-body .ct-auth-sent p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.login-body .ct-auth-sent p:last-child { margin-bottom: 0; }
.login-body .ct-auth-sent .muted { color: #56655F; font-size: 12.5px; }

/* The "Go to Login" / "Request a New Link" buttons are links. */
.login-body a.login-submit-btn.ct-auth-btn-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-sizing: border-box;
    width: 100%;
}

.login-body .ct-auth-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }

.login-body .ct-auth-card .alert-success { margin: 0 0 14px; color: #2A5136; background: #E4EFE7; border: 1px solid #CDE1D3; }

/* "Send a new code" posts a form but looks like the links beside it. */
.login-body .ct-auth-link-btn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--primary-medium, #2F7770);
    cursor: pointer;
}
.login-body .ct-auth-link-btn:hover { color: var(--primary, #0B4F4A); text-decoration: underline; }
.login-body .ct-auth-link-btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
:root[data-theme="dark"] .login-body .ct-auth-card .alert-success { background: rgba(74, 222, 128, .12); border-color: rgba(154, 240, 184, .35); color: #D9F8E4; }

.login-body .ct-auth-card .login-submit-btn[aria-busy="true"] { opacity: .75; pointer-events: none; }

:root[data-theme="dark"] .login-body .ct-auth-sent { background: #173F3C; border-color: #24524E; color: #DCE5E0; }
:root[data-theme="dark"] .login-body .ct-auth-sent strong,
:root[data-theme="dark"] .login-body .ct-auth-sent > .material-icons-outlined { color: #9FD3CB; }
:root[data-theme="dark"] .login-body .ct-auth-sent .muted { color: #A9C0B8; }

/* =====================================================================
   4. Settings — Password Reset Email (Gmail)
   ===================================================================== */

.ct-v10-mail-status {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 12px; padding: 10px 12px; border-radius: 11px;
    font-size: 13px; font-weight: 600;
}
.ct-v10-mail-status .material-icons-outlined { font-size: 19px; }
.ct-v10-mail-status.is-ready { background: #E7F4EC; color: #1E6B3C; }
.ct-v10-mail-status.is-off { background: #FDF3E4; color: #8A5300; }
.ct-v10-mail-note { margin: 0 0 12px; font-size: 12.5px; }
.ct-v10-mail-card .settings-form small { display: block; margin: -4px 0 6px; line-height: 1.45; }
.ct-v10-mail-test { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ct-line, #E1EAE6); }
:root[data-theme="dark"] .ct-v10-mail-status.is-ready { background: rgba(80, 180, 120, .15); color: #A8E0BD; }
:root[data-theme="dark"] .ct-v10-mail-status.is-off { background: rgba(240, 170, 60, .14); color: #F2C98A; }
:root[data-theme="dark"] .ct-v10-mail-test { border-color: rgba(255, 255, 255, .08); }

/* =====================================================================
   5. Certificates — Official design (agency Word certificate)
   ===================================================================== */

/* Four design styles: 2 × 2 on narrow dialogs, 4 across when wide. */
.ct-cd-styles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 720px) { .ct-cd-styles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Swatch: white page with the blue / gold / grey ribbons at the sides. */
.is-official .ct-cd-swatch {
    background:
        linear-gradient(100deg, #0A4F9C 0 5%, #F7B500 5% 9%, #6C6C6C 9% 13%, transparent 13%),
        linear-gradient(260deg, #0A4F9C 0 5%, #F7B500 5% 9%, #6C6C6C 9% 13%, transparent 13%),
        #FFFFFF;
    box-shadow: inset 0 0 0 1px #E3EBE7;
}
.is-official .ct-cd-swatch i { background: #1F2A2A; left: 32%; right: 32%; }
.is-official .ct-cd-swatch i::after { background: #9AA8A6; }

/* Template card thumbnail: the ribbon artwork with the title over it. */
.ct-cert-thumb:has(.ct-v10-thumb-title) { position: relative; box-shadow: none; background: #FFFFFF; }
.ct-cert-thumb img + .ct-v10-thumb-title {
    position: absolute; inset: auto 0 38% 0;
    color: #1F2A2A; font-weight: 400; font-size: 12px; letter-spacing: .04em;
}

/* Logos section */
.ct-v10-logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
@media (max-width: 560px) { .ct-v10-logos { grid-template-columns: 1fr; } }
.ct-v10-logo {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 12px; border: 1.5px solid var(--ct-line, #E3EBE7); border-radius: 12px;
    background: var(--ct-surface, #FFFFFF);
}
.ct-v10-logo-preview {
    flex: none; width: 72px; height: 72px; border-radius: 10px; display: grid; place-items: center;
    background: conic-gradient(#EEF2F0 25%, #FFFFFF 0 50%, #EEF2F0 0 75%, #FFFFFF 0) 0 0 / 12px 12px;
    box-shadow: inset 0 0 0 1px rgba(11, 79, 74, .08);
}
.ct-v10-logo-preview img { max-width: 62px; max-height: 62px; object-fit: contain; }
.ct-v10-logo-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ct-v10-logo-body strong { font-size: 13px; }
.ct-v10-logo-body small { color: var(--ct-ink-soft, #56655F); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere; }
.ct-v10-logo-pick input[type="file"] { max-width: 100%; font-size: 12px; }

:root[data-theme="dark"] .ct-v10-logo { background: transparent; border-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] .ct-v10-logo-body small { color: #A9C0B8; }

/* =====================================================================
   Upgrade v11 (formerly crimtrack-upgrade-v11.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v11 (loaded last). Uses the existing theme tokens.
   ===================================================================== */

/* ---------- Clickable files ---------- */
a.ct-v11-file-open {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: 10px;
}
a.ct-v11-file-open:hover .ct-file-name,
a.ct-v11-file-open:hover .ct-rv-file-copy strong,
a.ct-v11-file-open:focus-visible .ct-file-name,
a.ct-v11-file-open:focus-visible .ct-rv-file-copy strong { color: var(--ct-accent, #0B4F4A); text-decoration: underline; opacity: 1; }
a.ct-v11-file-open:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 3px; }
a.ct-v11-file-open .ct-file-copy { display: block; }
a.ct-v11-file-open .ct-file-copy > span { display: block; }
html body:not(.login-body) .ct-v11-h3 { display: block; margin: 1px 0 2px; font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--ct-ink, #12332F); }
.ct-rv-file a.ct-v11-file-open { align-items: center; flex: 1 1 180px; }

/* Student: My Submissions */
a.ct-v11-doc-file { display: inline-flex; align-items: flex-start; gap: 8px; color: inherit; text-decoration: none; }
a.ct-v11-doc-file > .material-icons-outlined { color: var(--ct-accent, #0B4F4A); font-size: 20px; margin-top: 1px; }
a.ct-v11-doc-file strong, a.ct-v11-doc-file small { display: block; }
a.ct-v11-doc-file small { color: var(--ct-ink-soft, #5E7370); }
a.ct-v11-doc-file:hover strong, a.ct-v11-doc-file:focus-visible strong { color: var(--ct-accent, #0B4F4A); text-decoration: underline; }

/* ---------- Files modal (Admin / Agency) ---------- */
.ct-v11-files-dialog { width: min(560px, calc(100vw - 32px)); }
.ct-v11-files { display: grid; gap: 10px; padding: 16px 20px 20px; }
a.ct-v11-file {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--ct-line, #DCE7E3);
    border-radius: 12px;
    background: var(--ct-surface, #FFFFFF);
    color: var(--ct-ink, #12332F);
    text-decoration: none;
}
a.ct-v11-file:hover, a.ct-v11-file:focus-visible { border-color: var(--ct-accent, #0B4F4A); background: var(--ct-tint, #EEF5F1); }
a.ct-v11-file:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 2px; }
a.ct-v11-file > .material-icons-outlined { margin-left: auto; color: var(--ct-accent, #0B4F4A); }
.ct-v11-file-copy { display: grid; min-width: 0; }
.ct-v11-file-copy strong { font-size: 14px; }
.ct-v11-file-copy small { font-size: 12.5px; color: var(--ct-ink-soft, #5E7370); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-v11-files-loading { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ct-ink-soft, #5E7370); font-size: 13px; }

/* ---------- Team → students ---------- */
.ct-v11-company-link { cursor: pointer; }
.ct-v11-company-link:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 3px; }
.ct-v11-company-link:hover { border-color: var(--ct-accent, #0B4F4A); }
.ct-company-chip[data-company-students] { cursor: pointer; }
.ct-company-chip[data-company-students]:hover,
.ct-company-chip[data-company-students]:focus-visible { text-decoration: underline; outline: none; box-shadow: 0 0 0 2px var(--ct-accent, #0B4F4A); }

/* ---------- Evaluation: merged Merit and Demerit ---------- */
.ct-v11-eval-sub { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ct-line, #DCE7E3); }
html body:not(.login-body) .ct-v11-eval-sub h3 { margin: 0 0 4px; font-size: 17px; color: var(--ct-ink, #12332F); }

/* ---------- Assign Intern modal (matches the reference photo) ---------- */
#studentPickerModal .ct-v11-picker-card {
    display: flex;
    flex-direction: column;
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 32px);
    padding: 18px 18px 16px;
    overflow: hidden;
}
#studentPickerModal .ct-v11-picker-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 14px;
    margin: 0 0 14px;
    border-bottom: 1px solid var(--ct-line, #DCE7E3);
}
#studentPickerModal .ct-v11-picker-head > div { flex: 1; min-width: 0; }
#studentPickerModal .ct-v11-picker-head h2 { margin: 0 0 2px; font-size: 18px; line-height: 1.3; }
#studentPickerModal .ct-v11-picker-head p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ct-ink-soft, #5E7370); }
.ct-v11-picker-badge {
    display: grid;
    place-items: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--ct-tint, #E7F2EF);
    color: var(--ct-accent, #0B4F4A);
}
html body:not(.login-body) #studentPickerModal button.ct-v11-picker-close {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0 !important;
    border: 1px solid var(--ct-line, #DCE7E3) !important;
    border-radius: 9px !important;
    background: var(--ct-surface, #FFFFFF) !important;
    color: var(--ct-ink, #12332F) !important;
    box-shadow: 0 1px 2px rgba(11, 79, 74, .08);
}
html body:not(.login-body) #studentPickerModal button.ct-v11-picker-close:hover { background: var(--ct-tint, #E7F2EF) !important; }
#studentPickerModal .ct-v11-picker-close .material-icons-outlined { font-size: 19px; }

#studentPickerModal .ct-v6-picker { gap: 8px; margin: 0 0 10px; }
#studentPickerModal .ct-v6-leader-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid var(--ct-line, #CFDDD9);
    border-radius: 10px;
    background: var(--ct-surface, #FFFFFF);
}
#studentPickerModal .ct-v6-leader-search .material-icons-outlined { color: var(--ct-ink-soft, #4B5F5C); font-size: 20px; }
#studentPickerModal .ct-v6-leader-search input { font-size: 13px; padding: 10px 0 !important; }

#studentPickerModal .ct-v6-leader-results { gap: 6px; max-height: 232px; padding: 0 2px 0 0; }
html body:not(.login-body) #v6LeaderPicker button.ct-v6-leader-option {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 6px 12px 6px 10px !important;
    border: 1px solid var(--ct-line, #DCE7E3) !important;
    border-radius: 10px !important;
    background: var(--ct-surface, #FFFFFF) !important;
    box-shadow: none !important;
    text-align: left;
}
html body:not(.login-body) #v6LeaderPicker button.ct-v6-leader-option.is-active {
    background: var(--ct-tint, #E7F2EF) !important;
    border-color: rgba(11, 79, 74, .28) !important;
    box-shadow: none !important;
}
.ct-v11-leader-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ct-tint, #E7F2EF);
    color: var(--ct-accent, #0B4F4A);
}
#v6LeaderPicker .ct-v6-leader-option.is-active .ct-v11-leader-avatar { background: var(--ct-surface, #FFFFFF); }
.ct-v11-leader-avatar .material-icons-outlined { font-size: 18px; }
.ct-v11-leader-copy { flex: 1; min-width: 0; }
#v6LeaderPicker .ct-v11-leader-copy strong { display: block; font-size: 13.5px; line-height: 1.3; }
#v6LeaderPicker .ct-v11-leader-copy small { display: block; font-size: 11.5px; line-height: 1.3; }
#v6LeaderPicker .ct-v6-leader-option .ct-v6-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
}
#v6LeaderPicker .ct-v6-leader-option .ct-v6-pill .material-icons-outlined { font-size: 15px; color: var(--ct-accent, #0B4F4A); }
#v6LeaderPicker .ct-v11-leader-chevron { flex: none; margin-left: 8px; font-size: 20px; color: var(--ct-ink, #173B39) !important; }

/* The open Team Leader row replaces the old summary bar; "Clear" is choosing it again. */
#studentPickerModal #leaderSummary { display: none !important; }

#v6LeaderPicker .ct-v11-scope { display: flex; gap: 8px; }
#v6LeaderPicker .ct-v11-scope label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px 5px 8px;
    border: 1px solid var(--ct-line, #DCE7E3);
    border-radius: 999px;
    background: var(--ct-surface, #FFFFFF);
    font-size: 12.5px;
    font-weight: 500;
}
#v6LeaderPicker .ct-v11-scope label:has(input:checked) { background: var(--ct-tint, #E7F2EF); border-color: rgba(11, 79, 74, .22); }
#v6LeaderPicker .ct-v11-scope label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
#v6LeaderPicker .ct-v11-scope input[type="radio"] { accent-color: var(--ct-accent, #0B4F4A); }

#studentPickerModal .ct-picker-bar {
    padding: 10px 14px;
    border: 1px solid rgba(11, 79, 74, .12);
    border-radius: 10px;
    background: var(--ct-tint, #EEF5F1);
}
#studentPickerModal .ct-picker-all { font-size: 13px; font-weight: 600; }

#studentPickerModal .student-selection-list {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: none;
    overflow-y: auto;
    padding: 10px;
    margin: 0;
    border: 1px solid var(--ct-line, #DCE7E3);
    border-radius: 12px;
    gap: 8px;
}
#studentPickerModal .student-option {
    align-items: center;
    padding: 10px 14px 10px 10px;
    border: 1px solid var(--ct-line, #DCE7E3);
    border-radius: 10px;
    background: var(--ct-surface, #FFFFFF);
    box-shadow: none;
}
#studentPickerModal .student-option.is-checked { background: var(--ct-surface, #FFFFFF); border-color: var(--ct-line, #DCE7E3); }
#studentPickerModal .student-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ct-tint, #E7F2EF); }
#studentPickerModal .student-avatar span { font-size: 20px; color: var(--ct-accent, #0B4F4A); }
#studentPickerModal .student-info h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; font-size: 13.5px; }
#studentPickerModal .student-info p { margin: 0; font-size: 11.5px; font-weight: 400; color: var(--ct-ink-soft, #5E7370); }
#studentPickerModal .student-info p strong { font-weight: 700; color: var(--ct-ink, #173B39); }
#studentPickerModal .ct-leader-mini { margin-left: 0; font-size: 10.5px; font-weight: 600; }
#studentPickerModal .student-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ct-accent, #0B4F4A); }
#studentPickerModal .modal-actions { margin-top: 12px; padding-top: 0; flex: none; }

@media (max-width: 560px) {
    #studentPickerModal .ct-v11-picker-card { padding: 14px 12px 12px; }
    #v6LeaderPicker .ct-v6-leader-option .ct-v6-pill { padding: 3px 7px; }
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] .ct-v11-picker-badge,
:root[data-theme="dark"] .ct-v11-leader-avatar,
:root[data-theme="dark"] #studentPickerModal .student-avatar { background: rgba(255, 255, 255, .08); color: #9FD8C9; }
:root[data-theme="dark"] #studentPickerModal .ct-picker-bar,
:root[data-theme="dark"] #v6LeaderPicker .ct-v11-scope label:has(input:checked),
:root[data-theme="dark"] body:not(.login-body) #v6LeaderPicker button.ct-v6-leader-option.is-active { background: #163937 !important; }
:root[data-theme="dark"] a.ct-v11-file:hover { background: #163937; }

/* Picker fine-tuning: one search box (the field itself carries no frame),
   even spacing between student cards. */
html body:not(.login-body) #studentPickerModal #leaderSearchInput,
html body:not(.login-body) #studentPickerModal #leaderSearchInput:focus {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    min-height: 0;
}
html body:not(.login-body) #studentPickerModal .student-selection-list > .student-option { margin: 0 !important; }
html body:not(.login-body) #v6LeaderPicker button.ct-v6-leader-option.is-active .ct-v6-pill { background: var(--ct-surface, #FFFFFF); }

/* =====================================================================
   Upgrade v12 (formerly crimtrack-upgrade-v12.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v12
   Uses the existing theme tokens; nothing here restyles older parts.
   ===================================================================== */

/* Dialogs */
.ct-v12-dialog { width: min(100%, 760px) !important; }
.ct-v12-dialog.ct-v12-wide { width: min(100%, 980px) !important; }
.ct-v12-dialog .ct-dialog-body { overflow: auto; }
.ct-v12-table td { vertical-align: middle; }

/* Status icons (agency response, report decision) */
.ct-v12-state {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.ct-v12-state .material-icons-outlined { font-size: 17px; }
.ct-v12-state.is-approved { background: #E6F4EC; color: #176B3A; }
.ct-v12-state.is-rejected { background: #FBEDEA; color: #B2402F; }
.ct-v12-state.is-pending  { background: #FBF1E1; color: #8A5A22; }
.ct-v12-state.is-sent     { background: var(--ct-tint, #EEF5F1); color: var(--ct-accent, #0B4F4A); }
.ct-v12-counts { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-v12-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.ct-v12-total { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ct-v12-total .material-icons-outlined { font-size: 18px; color: var(--ct-accent, #0B4F4A); }

/* Recipient / title buttons that open a modal */
button.ct-v12-recipient {
    display: inline-grid; gap: 1px; padding: 0; text-align: left;
    background: none; border: 0; color: inherit; cursor: pointer; font: inherit;
}
button.ct-v12-recipient strong { color: var(--ct-ink, #12332F); }
button.ct-v12-recipient small { display: inline-flex; align-items: center; gap: 3px; color: var(--ct-ink-soft, #5E7370); font-size: 12px; }
button.ct-v12-recipient small .material-icons-outlined { font-size: 15px; }
button.ct-v12-recipient:hover strong,
button.ct-v12-recipient:focus-visible strong { color: var(--ct-accent, #0B4F4A); text-decoration: underline; }

/* Document list inside the recipient modal */
.ct-v12-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ct-v12-docitem {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center;
    padding: 10px; border: 1px solid var(--ct-line, #DCE7E3); border-radius: 14px;
}
.ct-v12-docitem > a.ct-v11-file { border: 0; padding: 4px; }
.ct-v12-docside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ct-v12-docitem > .ct-v12-note,
.ct-v12-docitem > .ct-remarks { grid-column: 1 / -1; margin: 0; }
.ct-v12-note { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ct-ink-soft, #5E7370); }
.ct-v12-note .material-icons-outlined { font-size: 17px; }
@media (max-width: 640px) {
    .ct-v12-docitem { grid-template-columns: 1fr; }
    .ct-v12-docside { align-items: flex-start; }
}

/* Clickable file inside a table cell */
a.ct-v12-file-link small { word-break: break-all; }
.ct-v12-evalfile { display: grid; gap: 6px; }

/* Approve / Reject */
.ct-v12-decide { flex-wrap: wrap; }
.ct-v12-decide form { margin: 0; }
button.ct-v12-approve { background: #176B3A; }
.ct-v12-reason-for { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.ct-v12-reason-for .material-icons-outlined { color: var(--ct-accent, #0B4F4A); }
.ct-v12-reason-field { display: grid; gap: 6px; }
.ct-v12-reason-field textarea { width: 100%; }

/* Clickable tiles (Manage Teams, Analytics) */
.ct-v12-clickable { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.ct-v12-clickable:hover { box-shadow: 0 6px 18px rgba(11, 79, 74, .12); transform: translateY(-1px); }
.ct-v12-clickable:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 2px; }

/* Assign form (Students Without a Team) */
.ct-v12-assign-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; }
.ct-v12-assign-form label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; color: var(--ct-ink-soft, #5E7370); margin: 0; }
.ct-v12-assign-form label[hidden] { display: none; }
.ct-v12-assign-form select { min-width: 150px; }

/* Analytics */
.ct-v12-an-tools { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--ct-line, #DCE7E3); }
.ct-v12-an-tools .ct-ai-count { margin: 0; white-space: nowrap; }
.ct-v12-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ct-v12-chart-head h2 { margin: 0; }

/* Agency report modal */
.ct-v12-ar-status { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.ct-v12-files { padding: 8px 0 0; }

/* Edit icon in Partner Agencies */
.ct-v12-act-edit { color: var(--ct-accent, #0B4F4A); }

/* Dark theme */
:root[data-theme="dark"] .ct-v12-state.is-approved { background: #173a2a; color: #8fd4ac; }
:root[data-theme="dark"] .ct-v12-state.is-rejected { background: #3b1f1b; color: #f0a597; }
:root[data-theme="dark"] .ct-v12-state.is-pending  { background: #3a2e17; color: #e9c48a; }
:root[data-theme="dark"] button.ct-v12-recipient strong { color: inherit; }

/* =====================================================================
   Upgrade v13 (formerly crimtrack-upgrade-v13.css)
   ===================================================================== */
/* =====================================================================
   CrimTrack — upgrade v13
   Built on the existing theme tokens (crimtrack-ui.css). Nothing here
   changes colours, fonts or content; it adds the new modals and tidies
   spacing where the v13 changes touch the layout.
   ===================================================================== */

/* =====================================================================
   1. Header search bar — hover / focus fixes
   ---------------------------------------------------------------------
   Before: the 42px input overflowed its 38px pill, drew its own square
   focus ring inside the pill, showed the browser's own × beside ours,
   the clear button lifted on hover (primary-button hover leaked onto it)
   and the match count hung below the header over its bottom border.
   ===================================================================== */

html body:not(.login-body) .global-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 6px 0 0;
    overflow: hidden;
    transform: none !important;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

html body:not(.login-body) .global-search-wrap:hover:not(:focus-within) {
    border-color: var(--ct-line-strong) !important;
}

html body:not(.login-body) .global-search-wrap > .material-icons-outlined {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    pointer-events: none;
}

html body:not(.login-body) .global-search-wrap #globalPageSearch,
html body:not(.login-body) .global-search-wrap #globalPageSearch:hover,
html body:not(.login-body) .global-search-wrap #globalPageSearch:focus {
    flex: 1 1 auto;
    align-self: stretch;
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 6px 0 40px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    transition: none !important;
    line-height: normal;
}

/* One clear button only: hide the browser's built-in ×. */
html body:not(.login-body) #globalPageSearch::-webkit-search-cancel-button,
html body:not(.login-body) #globalPageSearch::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* The match count sits inside the pill instead of hanging below it. */
html body:not(.login-body) .global-search-wrap .ct-search-count {
    position: static;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--ct-r-pill, 999px);
    background: var(--ct-tint, #EEF5F1);
    color: var(--ct-accent, #0B4F4A);
    font-size: 11.5px;
    line-height: 1.5;
}
html body:not(.login-body) .global-search-wrap .ct-search-count:empty { display: none; }

/* The id outranks the long primary-button :not() chain, so the × keeps
   still on hover: no lift, no teal shadow, no gradient. */
html body:not(.login-body) .global-search-wrap #clearPageSearch.ct-search-clear,
html body:not(.login-body) .global-search-wrap #clearPageSearch.ct-search-clear:hover,
html body:not(.login-body) .global-search-wrap #clearPageSearch.ct-search-clear:active {
    position: static;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-image: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .14s ease, color .14s ease !important;
}
html body:not(.login-body) .global-search-wrap #clearPageSearch.ct-search-clear:hover,
html body:not(.login-body) .global-search-wrap #clearPageSearch.ct-search-clear:focus-visible {
    background-color: var(--ct-tint-deep, #DDEAE4) !important;
    color: var(--ct-ink, #12332F) !important;
}
html body:not(.login-body) .global-search-wrap #clearPageSearch[hidden] { display: none !important; }

/* Table search boxes: hover only recolours the border — no size or shadow change. */
html body:not(.login-body) .filter-toolbar input[type="search"],
html body:not(.login-body) .filter-toolbar input[type="search"]:hover {
    transform: none !important;
}

/* =====================================================================
   2. Header Logs button (Admin)
   ===================================================================== */

.ct-v13-logs-btn .material-icons-outlined { font-size: 21px; }

/* =====================================================================
   3. Shared modal pieces
   ===================================================================== */

.ct-v13-rv-head { display: flex; align-items: center; gap: 12px; }
.ct-v13-rv-head > div { min-width: 0; }
.ct-v13-rv-head h2 { overflow-wrap: anywhere; }
.ct-v13-rv-avatar {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--ct-tint, #EEF5F1);
    border: 1px solid var(--ct-line, #E3EBE7);
}

/* =====================================================================
   4. Student report viewer
   ===================================================================== */

.ct-dialog-card.ct-v13-rv-card {
    width: min(100%, 1120px);
    height: min(92vh, 880px);
    height: min(92dvh, 880px);
}

.ct-v13-rv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.ct-v13-rv-preview { display: grid; gap: 14px; min-width: 0; }

.ct-v13-rv-frame {
    height: clamp(340px, 64vh, 640px);
    height: clamp(340px, 64dvh, 640px);
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 14px;
    background: var(--ct-surface-sunken, #F4F8F6);
    overflow: hidden;
}
.ct-v13-rv-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #FFFFFF; }
.ct-v13-rv-frame.is-image { display: grid; place-items: center; padding: 12px; }
.ct-v13-rv-frame.is-image img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }

.ct-v13-rv-written .ct-dialog-section { margin-top: 0; }
.ct-v13-rv-text {
    padding: 18px 20px;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 14px;
    background: var(--ct-surface, #FFFFFF);
    color: var(--ct-ink, #12332F);
    font-size: 14.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ct-v13-rv-written.is-main .ct-v13-rv-text { min-height: 260px; }

.ct-v13-rv-nopreview {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 300px;
    padding: 28px 20px;
    border: 1px dashed var(--ct-line-strong, #D3E0DA);
    border-radius: 14px;
    background: var(--ct-surface-sunken, #F4F8F6);
    text-align: center;
}
.ct-v13-rv-nopreview > .material-icons-outlined { font-size: 40px; color: var(--ct-accent, #0B4F4A); }
.ct-v13-rv-nopreview strong { color: var(--ct-ink, #12332F); overflow-wrap: anywhere; }
.ct-v13-rv-nopreview p { margin: 0 0 6px; max-width: 42ch; color: var(--ct-ink-soft, #5E7370); font-size: 13.5px; }

.ct-v13-rv-meta {
    position: sticky;
    top: 0;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--ct-line, #E3EBE7);
    border-radius: 14px;
    background: var(--ct-surface-sunken, #F4F8F6);
}
.ct-v13-rv-dl { display: grid; gap: 12px; margin: 0; }
.ct-v13-rv-dl > div { display: grid; gap: 3px; }
.ct-v13-rv-dl > div + div { padding-top: 12px; border-top: 1px solid var(--ct-line, #E3EBE7); }
.ct-v13-rv-dl dt { font-size: 12px; font-weight: 600; color: var(--ct-ink-soft, #5E7370); }
.ct-v13-rv-dl dd { margin: 0; font-size: 13.5px; color: var(--ct-ink, #12332F); overflow-wrap: anywhere; }
.ct-v13-rv-dl dd small { display: block; font-size: 12px; color: var(--ct-ink-soft, #5E7370); }
.ct-v13-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ct-v13-rv-meta .ct-remarks { margin: 0; }

/* Footer: file links on the left, decisions on the right. */
html body .ct-dialog-foot.ct-v13-rv-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.ct-v13-rv-files, .ct-v13-rv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ct-v13-rv-actions form { margin: 0; }
.ct-v13-rv-actions form[hidden], .ct-v13-rv-actions button[hidden] { display: none !important; }
.ct-v13-rv-foot .btn, .ct-v13-rv-foot button { white-space: nowrap; }

html body:not(.login-body) button.ct-v13-btn-approve:not(#ct-link) { background-color: #176B3A !important; border-color: #176B3A !important; color: #FFFFFF !important; }
html body:not(.login-body) button.ct-v13-btn-approve:not(#ct-link):hover { background-color: #125A30 !important; }
html body:not(.login-body) button.ct-v13-btn-reject:not(#ct-link) { color: #B2402F !important; border-color: #EBC9C2 !important; }
html body:not(.login-body) button.ct-v13-btn-reject:not(#ct-link):hover { background: #FBEDEA !important; }

/* Report rows: the title and the Review button open the viewer. */
a.ct-v13-report-open { cursor: pointer; }
a.ct-v13-report-open:hover strong,
a.ct-v13-report-open:focus-visible strong { text-decoration: underline; text-underline-offset: 2px; }
.ct-v13-review-btn { white-space: nowrap; }

@media (max-width: 860px) {
    .ct-v13-rv { grid-template-columns: 1fr; }
    .ct-v13-rv-meta { position: static; }
    .ct-v13-rv-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    .ct-v13-rv-dl > div + div { padding-top: 0; border-top: 0; }
    .ct-v13-rv-frame { height: 58vh; height: 58dvh; }
}
@media (max-width: 560px) {
    .ct-dialog-card.ct-v13-rv-card { height: auto; }
    .ct-v13-rv-frame { height: 52vh; height: 52dvh; }
    html body .ct-dialog-foot.ct-v13-rv-foot { flex-direction: column; align-items: stretch; gap: 8px; }
    .ct-v13-rv-files, .ct-v13-rv-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; width: 100%; }
    .ct-v13-rv-actions form, .ct-v13-rv-actions form button, .ct-v13-rv-actions > button, .ct-v13-rv-files .btn { width: 100%; justify-content: center; }
    .ct-v13-rv-foot .btn, .ct-v13-rv-foot button { padding-left: 8px !important; padding-right: 8px !important; }
}

/* =====================================================================
   5. System Logs
   ===================================================================== */

.ct-dialog-card.ct-v13-logs-card {
    width: min(100%, 780px);
    height: min(88vh, 820px);
    height: min(88dvh, 820px);
}

.ct-v13-logs-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--ct-line, #E3EBE7);
}
.ct-v13-logs-search { position: relative; flex: 1 1 220px; display: flex; align-items: center; margin: 0; }
.ct-v13-logs-search > .material-icons-outlined {
    position: absolute; left: 11px; font-size: 19px; color: var(--ct-ink-faint, #5D7774); pointer-events: none;
}
html body:not(.login-body) .ct-v13-logs-search input { width: 100%; margin: 0; padding-left: 36px !important; }
html body:not(.login-body) .ct-v13-logs-tools select { width: auto; min-width: 132px; margin: 0; }

.ct-v13-logs-body { padding-top: 4px !important; }

.ct-v13-logs-day {
    position: sticky;
    top: -4px;
    z-index: 1;
    margin: 0;
    padding: 12px 0 6px;
    background: var(--ct-surface, #FFFFFF);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ct-ink-soft, #5E7370);
    border-bottom: 1px solid var(--ct-line, #E3EBE7);
}
body:not(.login-body) .ct-v13-logs-day { font-size: 12.5px; }

.ct-v13-logs-list { list-style: none; margin: 0 0 6px; padding: 0; }
.ct-v13-log {
    display: grid;
    grid-template-columns: 64px 28px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 9px 2px;
    border-bottom: 1px solid var(--ct-line, #E3EBE7);
}
.ct-v13-log:last-child { border-bottom: 0; }
.ct-v13-log time {
    padding-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ct-ink-soft, #5E7370);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.ct-v13-log-role {
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--ct-tint, #EEF5F1); color: var(--ct-accent, #0B4F4A);
}
.ct-v13-log-role .material-icons-outlined { font-size: 17px; }
.ct-v13-log.is-agency .ct-v13-log-role { background: #E3EEF3; color: #2F5A70; }
.ct-v13-log.is-student .ct-v13-log-role { background: #F7ECD9; color: #8A5A22; }
.ct-v13-log.is-system .ct-v13-log-role { background: #ECEFEE; color: #5E7370; }
.ct-v13-log-copy { min-width: 0; }
.ct-v13-log-copy p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ct-ink, #12332F); overflow-wrap: anywhere; }
.ct-v13-log-copy small { display: block; margin-top: 2px; font-size: 12px; color: var(--ct-ink-soft, #5E7370); }

.ct-v13-logs-more { display: flex; justify-content: center; padding: 12px 0 4px; }

.ct-v13-logs-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 40px 16px; text-align: center; color: var(--ct-ink-soft, #5E7370);
}
.ct-v13-logs-empty > .material-icons-outlined { font-size: 34px; color: var(--ct-ink-faint, #5D7774); }
.ct-v13-logs-empty p { margin: 0; }

@media (max-width: 560px) {
    .ct-v13-logs-tools { padding: 10px 14px; }
    html body:not(.login-body) .ct-v13-logs-tools select { flex: 1 1 40%; min-width: 0; }
    .ct-v13-log { grid-template-columns: 54px 26px minmax(0, 1fr); gap: 8px; }
}

/* =====================================================================
   6. Team Leaders (Manage Teams)
   ===================================================================== */

.ct-v13-leaders { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

html body:not(.login-body) button.ct-v13-leader {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    min-height: 0;
    padding: 4px 11px;
    border: 1px solid transparent;
    border-radius: var(--ct-r-pill, 999px);
    background: var(--ct-tint, #EEF5F1);
    color: var(--ct-accent, #0B4F4A);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color .14s ease, background-color .14s ease;
}
html body:not(.login-body) button.ct-v13-leader .material-icons-outlined { font-size: 16px; }
html body:not(.login-body) button.ct-v13-leader .ct-v13-leader-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body:not(.login-body) button.ct-v13-leader small { font-weight: 500; color: var(--ct-ink-soft, #5E7370); white-space: nowrap; }
html body:not(.login-body) button.ct-v13-leader small::before { content: "·"; margin-right: 5px; }
html body:not(.login-body) button.ct-v13-leader:hover,
html body:not(.login-body) button.ct-v13-leader:focus-visible {
    border-color: var(--ct-accent, #0B4F4A);
    background: var(--ct-tint-deep, #DDEAE4);
}
html body:not(.login-body) button.ct-v13-leader:hover .ct-v13-leader-name { text-decoration: underline; text-underline-offset: 2px; }
html body:not(.login-body) button.ct-v13-leader:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 2px; }

html body:not(.login-body) button.ct-v13-leader-more {
    padding: 4px 8px; border: 0; background: none; color: var(--ct-ink-soft, #5E7370);
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
html body:not(.login-body) button.ct-v13-leader-more:hover { color: var(--ct-accent, #0B4F4A); text-decoration: underline; }

/* In the team dialog the leader row reads name first, details under it. */
.ct-leader-row > div { display: grid; gap: 3px; justify-items: start; min-width: 0; }
html body:not(.login-body) .ct-leader-row button.ct-v13-leader,
html body:not(.login-body) .student-profile-cell button.ct-v13-leader {
    padding: 0; border: 0; border-radius: 4px; background: transparent; font-size: 14px;
}
html body:not(.login-body) .ct-leader-row button.ct-v13-leader:hover,
html body:not(.login-body) .student-profile-cell button.ct-v13-leader:hover { background: transparent; }

.ct-dialog-card.ct-v13-tl-card { width: min(100%, 640px); }

.ct-v13-tl-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 6px;
}
.ct-v13-tl-facts > div {
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--ct-surface-sunken, #F4F8F6);
    border: 1px solid var(--ct-line, #E3EBE7);
    min-width: 0;
}
.ct-v13-tl-facts dt { font-size: 12px; font-weight: 600; color: var(--ct-ink-soft, #5E7370); }
.ct-v13-tl-facts dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ct-ink, #12332F); overflow-wrap: anywhere; }

.ct-v13-tl-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--ct-line, #E3EBE7); border-radius: 14px; overflow: hidden; }
.ct-v13-tl-list li {
    display: grid;
    grid-template-columns: 22px 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}
.ct-v13-tl-list li + li { border-top: 1px solid var(--ct-line, #E3EBE7); }
.ct-v13-tl-num { font-size: 12px; font-weight: 600; color: var(--ct-ink-faint, #5D7774); text-align: right; font-variant-numeric: tabular-nums; }
.ct-v13-tl-list img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--ct-tint, #EEF5F1); }
.ct-v13-tl-copy { display: grid; min-width: 0; }
.ct-v13-tl-copy strong { overflow-wrap: anywhere; font-size: 14px; }
.ct-v13-tl-copy small { font-size: 12px; color: var(--ct-ink-soft, #5E7370); }
.ct-v13-tl-agency { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--ct-ink-soft, #5E7370); text-align: right; }
.ct-v13-tl-agency .material-icons-outlined { font-size: 15px; }
.ct-v13-tl-foot { margin: 14px 0 0; }

@media (max-width: 560px) {
    .ct-v13-tl-facts { grid-template-columns: 1fr 1fr; }
    .ct-v13-tl-list li { grid-template-columns: 36px minmax(0, 1fr); }
    .ct-v13-tl-num { display: none; }
    .ct-v13-tl-agency { grid-column: 2; justify-content: flex-start; text-align: left; }
}

/* =====================================================================
   7. Layout tidy-ups where v13 touches the page
   ===================================================================== */

/* Students Without a Team: Team · Rank · Team Leader · Assign on one line. */
.ct-v12-assign-form {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
    align-items: end;
    gap: 10px !important;
}
.ct-v12-assign-form label { min-width: 0; }
.ct-v12-assign-form select { width: 100%; min-width: 0 !important; }
.ct-v12-assign-form > button { white-space: nowrap; }
@media (max-width: 900px) {
    .ct-v12-assign-form { grid-template-columns: 1fr 1fr; }
    .ct-v12-assign-form > button { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 560px) {
    .ct-v12-assign-form { grid-template-columns: 1fr; }
    .ct-v12-assign-form > button { justify-self: stretch; justify-content: center; }
}

/* Dialog titles wrap instead of pushing the close button off-card. */
.ct-dialog-head .ct-dialog-title { flex: 1 1 auto; }

/* =====================================================================
   8. Dark theme
   ===================================================================== */

:root[data-theme="dark"] .ct-v13-rv-frame iframe { background: #FFFFFF; }
:root[data-theme="dark"] .ct-v13-log.is-agency .ct-v13-log-role { background: #1d3a47; color: #9cc6da; }
:root[data-theme="dark"] .ct-v13-log.is-student .ct-v13-log-role { background: #3a2e17; color: #e9c48a; }
:root[data-theme="dark"] .ct-v13-log.is-system .ct-v13-log-role { background: #24403d; color: #A9C0B8; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v13-btn-reject:not(#ct-link) { color: #f0a597 !important; border-color: #5a2e28 !important; }
:root[data-theme="dark"] body:not(.login-body) button.ct-v13-btn-reject:not(#ct-link):hover { background: #3b1f1b !important; }

@media (prefers-reduced-motion: reduce) {
    .ct-v13-leader, .global-search-wrap { transition: none !important; }
}

/* Student report rows: Review + Download share one Actions cell. */
.ct-v13-row-actions { flex-wrap: nowrap !important; align-items: center; gap: 6px; }
html body:not(.login-body) a.table-link.ct-v13-dl {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; min-width: 34px; padding: 0 !important; gap: 0 !important;
}
html body:not(.login-body) a.table-link.ct-v13-dl .material-icons-outlined { margin: 0 !important; font-size: 19px; }
#studentReports .ct-remarks { max-width: 230px; }
#coStatUnassigned .ct-dialog-card.ct-v12-dialog { width: min(100%, 1120px) !important; }
html body:not(.login-body) .global-search-wrap .ct-search-count { order: 2; }
html body:not(.login-body) .global-search-wrap #clearPageSearch { order: 3; }
@media (max-width: 900px) {
    html body:not(.login-body) .ct-mobile-search .global-search-wrap { height: 42px; width: 100%; }
}

/* Students Without a Team on phones: each student is a stacked card. */
@media (max-width: 700px) {
    #coStatUnassigned .table-wrap { overflow: visible; border: 0; }
    #coStatUnassigned table, #coStatUnassigned tbody, #coStatUnassigned tr, #coStatUnassigned td { display: block; width: 100% !important; min-width: 0 !important; }
    #coStatUnassigned thead { display: none; }
    #coStatUnassigned tbody tr {
        display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
        padding: 14px; margin-bottom: 10px;
        border: 1px solid var(--ct-line, #E3EBE7); border-radius: 14px; background: var(--ct-surface, #FFFFFF);
    }
    #coStatUnassigned tbody td { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
    #coStatUnassigned tbody td:nth-child(2) { width: auto; font-size: 12.5px; color: var(--ct-ink-soft, #5E7370); text-align: right; }
    #coStatUnassigned tbody td:nth-child(3) { grid-column: 1 / -1; }
    #coStatUnassigned tbody td.empty-state { grid-column: 1 / -1; text-align: center; }
}

/* =====================================================================
   v14: file list modal (evaluation files, submitted reports)
   ===================================================================== */
/* ---------- File list modal (evaluation files, submitted reports) ---------- */
.ct-v14-fl-card { width: min(640px, calc(100vw - 32px)); }
.ct-v14-fl { display: grid; gap: 12px; padding: 16px 20px 20px; overflow: auto; }
.ct-v14-fl-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--ct-tint, #EEF5F1); color: var(--ct-ink-soft, #5E7370); font-size: 13px; }
.ct-v14-fl-note .material-icons-outlined { font-size: 18px; color: var(--ct-accent, #0B4F4A); }
.ct-v14-fl-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ct-v14-fl-item { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.ct-v14-fl-item a.ct-v14-fl-file { flex: 1 1 auto; min-width: 0; }
.ct-v14-fl-item .ct-v14-fl-dl { flex: 0 0 auto; align-self: center; }
.ct-v14-fl-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.ct-v14-fl-status br { display: none; }
.ct-v14-fl-group { border: 1px solid var(--ct-line, #DCE7E3); border-radius: 12px; background: var(--ct-surface, #FFFFFF); }
.ct-v14-fl-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; cursor: pointer; list-style: none; border-radius: 12px; }
.ct-v14-fl-group > summary::-webkit-details-marker { display: none; }
.ct-v14-fl-group > summary:hover { background: var(--ct-tint, #EEF5F1); }
.ct-v14-fl-group > summary:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 2px; }
.ct-v14-fl-group > summary > .material-icons-outlined { color: var(--ct-accent, #0B4F4A); transition: transform .15s ease; }
.ct-v14-fl-group[open] > summary > .material-icons-outlined { transform: rotate(180deg); }
.ct-v14-fl-group[open] > summary { border-bottom: 1px solid var(--ct-line, #DCE7E3); border-radius: 12px 12px 0 0; }
.ct-v14-fl-group-name { display: grid; min-width: 0; }
.ct-v14-fl-group-name strong { font-size: 14px; color: var(--ct-ink, #12332F); }
.ct-v14-fl-group-name small { font-size: 12px; color: var(--ct-ink-soft, #5E7370); }
.ct-v14-fl-group > .ct-v14-fl-list { padding: 10px; }
.ct-v14-view { cursor: pointer; }
@media (max-width: 560px) {
    .ct-v14-fl { padding: 12px; }
    .ct-v14-fl-item a.ct-v14-fl-file { gap: 10px; padding: 10px; }
}

/* ---------- v15: per-student modals (Admin → Reports) ---------- */
.ct-v15-fl-item { flex-wrap: wrap; }
.ct-v15-fl-select { display: inline-flex; align-items: center; align-self: center; padding: 0 2px; cursor: pointer; }
.ct-v15-fl-select input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.ct-v15-fl-decide { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: -2px; }
.ct-v15-fl-decide form { margin: 0; }
.ct-v15-fl-decide button { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.ct-v14-fl-status .ct-remarks { flex: 1 1 100%; margin: 4px 0 0; }
.ct-v14-fl-status .metric-positive, .ct-v14-fl-status .metric-negative { font-size: 12.5px; font-weight: 700; }
html body:not(.login-body) button.ct-v15-student {
    display: block; width: auto; max-width: 100%; min-height: 0; padding: 0 !important; border: 0 !important;
    background: none !important; box-shadow: none !important; transform: none !important;
    color: inherit !important; font: inherit; font-weight: inherit; text-align: left; cursor: pointer;
}
html body:not(.login-body) button.ct-v15-student:hover .student-name-link,
html body:not(.login-body) button.ct-v15-student:focus-visible .student-name-link { text-decoration: underline; text-underline-offset: 2px; }
html body:not(.login-body) button.ct-v15-student:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 2px; border-radius: 8px; }
.ct-v15-fl-item > a.ct-v14-fl-file { flex: 1 1 0; }
.ct-v15-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (max-width: 560px) {
    .ct-v15-fl-item { justify-content: flex-end; }
    .ct-v15-fl-item > a.ct-v14-fl-file { flex: 1 1 calc(100% - 40px); }
    .ct-v15-fl-decide { justify-content: stretch; }
    .ct-v15-fl-decide > *, .ct-v15-fl-decide form button { flex: 1 1 0; width: 100%; justify-content: center; }
}

/* =====================================================================
   v16 — My Reports status, student document forwarding,
   Attendance Logs modal, team certificates, attendance kiosk
   ===================================================================== */

/* Student → Weekly Reports → My Reports: one status per report */
.ct-v12-state.is-draft { background: #E3EEF3; color: #2F5A70; }
:root[data-theme="dark"] .ct-v12-state.is-draft { background: #17313d; color: #9cc7dc; }
.ct-my-reports td { vertical-align: middle; }
.ct-my-reports th:nth-child(4), .ct-my-reports td.ct-report-status-cell { min-width: 170px; }
.ct-report-status-cell { line-height: 1.35; }
.ct-report-status-cell .ct-remarks { margin: 8px 0 0; max-width: 320px; }
.ct-report-state { vertical-align: middle; }
body:not(.login-body) .grid-form label > .optional-label { justify-self: start; width: max-content; margin: 0; }
body:not(.login-body) .grid-form .form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* Student → Documents: Forward to Agency */
body:not(.login-body) .ct-row-actions .ct-forward-btn,
body:not(.login-body) .ct-forward-btn {
    display: inline-flex; align-items: center; gap: 6px;
    width: auto; min-height: 34px; padding: 6px 12px !important;
    font-size: 12.5px !important; white-space: nowrap; border-radius: 10px;
}
.ct-forward-btn .material-icons-outlined { font-size: 17px; }
#myDocs td:last-child { min-width: 180px; }
#myDocs td { vertical-align: middle; }
body:not(.login-body) .grid-form > .form-actions { grid-column: 1 / -1; }
/* The floating agency chip no longer covers the last row of a page. */
@media (min-width: 901px) { body.partner-watermarked main { padding-bottom: 72px; } }

/* Student → Attendance Kiosk (screenshot fixes) */
.ct-kiosk-compact .section-title-row { align-items: flex-start; gap: 12px; }
body:not(.login-body) .ct-kiosk-compact .ct-kiosk-ready { flex: 0 0 auto; width: auto !important; justify-self: end; align-self: flex-start; }
.ct-kiosk-compact .kiosk-camera-area {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 720px;
    align-items: stretch;
}
body:not(.login-body) .ct-kiosk-compact .camera-card { display: flex; flex-direction: column; min-width: 0; }
.ct-kiosk-compact .kiosk-camera-area video,
.ct-kiosk-compact .kiosk-camera-area #preview { width: 100%; object-fit: cover; border-radius: 12px; }
/* No broken-image text before a photo is captured: show a placeholder instead. */
.ct-kiosk-compact .kiosk-camera-area #preview:not(.has-photo) { display: none; }
.ct-kiosk-compact .ct-preview-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    width: 100%; aspect-ratio: 1 / 1; padding: 12px; text-align: center;
    border: 2px dashed var(--line, #DCE5E0); border-radius: 12px;
    background: var(--ct-surface-sunken, #F8FAF8); color: var(--muted, #617572); font-size: 12.5px; font-weight: 600;
}
.ct-kiosk-compact .ct-preview-empty .material-icons-outlined { font-size: 30px; opacity: .7; }
.ct-kiosk-compact #preview.has-photo + .ct-preview-empty { display: none; }
body:not(.login-body) .ct-kiosk-compact .ct-kiosk-capture {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; margin-top: 10px; white-space: nowrap;
}

/* Location card: text wraps inside the card instead of running off the edge. */
.ct-kiosk-compact .reverse-location-note { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.ct-kiosk-compact .reverse-location-note > div { min-width: 0; }
.ct-kiosk-compact #locationStatus,
.ct-kiosk-compact #locationAddress { display: block; overflow-wrap: anywhere; white-space: normal; }
.ct-kiosk-compact .location-parts { display: flex !important; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.ct-kiosk-compact .location-parts span { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 5px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
body:not(.login-body) .ct-kiosk-compact .location-retry { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 7px 12px; }

/* Submit: a labelled button (the icon-only version's tooltip was cut off by the sidebar). */
body:not(.login-body) .ct-kiosk-compact .ct-kiosk-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: auto; min-width: 220px; min-height: 46px; margin-top: 14px; padding: 10px 22px;
    font-size: 14px; font-weight: 700; white-space: nowrap;
}
body:not(.login-body) .ct-kiosk-compact .ct-kiosk-submit[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
    .ct-kiosk-compact .reverse-location-note { grid-template-columns: auto minmax(0, 1fr); }
    body:not(.login-body) .ct-kiosk-compact .location-retry { grid-column: 2; justify-self: start; }
    body:not(.login-body) .ct-kiosk-compact .ct-kiosk-submit { width: 100%; min-width: 0; }
    body:not(.login-body) .ct-kiosk-compact .ct-kiosk-capture { font-size: 12.5px; padding: 8px; }
}

/* Agency → Certificates: each intern's team */
.ct-cert-team { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--ct-accent, #0B4F4A) !important; font-weight: 600; }
.ct-cert-team .material-icons-outlined { font-size: 15px; }

/* Header at tablet widths: the avatar-only profile button the ≤1080px rule
   intends (a later rule showed the name again, so it spilled over the bell). */
@media (max-width: 1080px) {
    body:not(.login-body) .profile-button .profile-copy,
    body:not(.login-body) .profile-button .profile-chevron { display: none !important; }
    body:not(.login-body) .profile-button { width: 44px !important; min-width: 44px !important; padding: 4px !important; justify-content: center; }
    body:not(.login-body) .header-tools { min-width: 0; }
    body:not(.login-body) .global-search-wrap { min-width: 0; flex: 0 1 auto; }
}

/* =====================================================================
   v16: Dark mode — readable text
   Every change below applies only in dark mode. Checked with an automated
   contrast audit of all Admin, Agency and Student pages (WCAG AA, 4.5:1).
   ===================================================================== */
:root[data-theme="dark"] {
    --text: #EEF5F2;
    --muted: #B9CEC7;
    --ct-ink: #EEF5F2;
    --ct-ink-soft: #C3D6D0;
    --ct-ink-faint: #AFC6BF;
    /* Buttons: a deeper teal so white labels stay readable. */
    --ct-accent: #1B7A70;
    --ct-accent-hover: #22897E;
    --primary: #1B7A70;
    /* Accent-coloured text (links, chips) needs a light teal instead. */
    --ct-accent-text: #8FE0D0;
    --line: #35574F;
    --ct-line: #35574F;
}

/* Body and secondary text */
html[data-theme="dark"] body:not(.login-body) main,
html[data-theme="dark"] body:not(.login-body) .ct-dialog-card { color: var(--ct-ink); }
html[data-theme="dark"] body:not(.login-body) :is(.muted, small, dt, .ct-dialog-title p, .panel-heading p, .section-title-row p, .ct-stat p, .ct-v14-ad-sub, .ct-logs-person small, .ct-logs-address, .welcome-year small, .ct-attendance-photo-empty, .ct-attendance-photo-empty small, .ct-pagination-status) { color: var(--ct-ink-soft) !important; }
html[data-theme="dark"] body:not(.login-body) :is(h1, h2, h3, h4, strong, th, legend, label) { color: var(--ct-ink); }
html[data-theme="dark"] body:not(.login-body) input::placeholder,
html[data-theme="dark"] body:not(.login-body) textarea::placeholder { color: #93AEA7 !important; opacity: 1; }
html[data-theme="dark"] body:not(.login-body) :is(input, select, textarea) { color-scheme: dark; color: var(--ct-ink) !important; }

/* Accent text: links, chips and labels drawn in the brand teal. */
html[data-theme="dark"] body:not(.login-body) :is(a.table-link, button.table-link, .table-link, .panel-link, .student-name-link, .ct-company-chip, .ct-v13-leader-name, .welcome-label, .ct-cert-team, .profile-role-badge, legend, .ct-tl-change, .ct-v14-view) { color: var(--ct-accent-text) !important; }
html[data-theme="dark"] body:not(.login-body) :is(.ct-company-chip, .welcome-label, .profile-role-badge) { background: rgba(143, 224, 208, .12) !important; border-color: rgba(143, 224, 208, .28) !important; }
html[data-theme="dark"] body:not(.login-body) .table-link .ct-sr,
html[data-theme="dark"] body:not(.login-body) .ct-tl-change .ct-sr { color: inherit !important; }
html[data-theme="dark"] body:not(.login-body) main b { color: var(--ct-accent-text); }
html[data-theme="dark"] body:not(.login-body) .student-progress-number { color: var(--ct-accent-text) !important; }

/* Primary buttons: white on deep teal. */
html[data-theme="dark"] body:not(.login-body) :is(.btn-approve, .ct-forward-btn, .ct-logs-open-btn, .ct-company-emblem, .ct-step > span, .ct-verify-link.is-pending) { background: var(--ct-accent) !important; border-color: var(--ct-accent) !important; color: #FFFFFF !important; }
html[data-theme="dark"] body:not(.login-body) .ct-pagination button[aria-current="page"] { background: #8FE0D0 !important; border-color: #8FE0D0 !important; color: #0B2624 !important; }

/* Status badges: tinted, not pastel blocks. */
html[data-theme="dark"] body:not(.login-body) .status-badge.success,
html[data-theme="dark"] body:not(.login-body) .ct-v12-state.is-approved { background: rgba(74, 222, 128, .14) !important; color: #9AF0B8 !important; border-color: rgba(154, 240, 184, .3) !important; }
html[data-theme="dark"] body:not(.login-body) .status-badge.warning,
html[data-theme="dark"] body:not(.login-body) .ct-v12-state.is-pending { background: rgba(251, 191, 36, .14) !important; color: #FCD980 !important; border-color: rgba(252, 217, 128, .3) !important; }
html[data-theme="dark"] body:not(.login-body) .status-badge.danger,
html[data-theme="dark"] body:not(.login-body) .ct-v12-state.is-rejected { background: rgba(248, 113, 113, .15) !important; color: #FDB0A8 !important; border-color: rgba(253, 176, 168, .3) !important; }
html[data-theme="dark"] body:not(.login-body) .status-badge.info,
html[data-theme="dark"] body:not(.login-body) .ct-v12-state.is-draft,
html[data-theme="dark"] body:not(.login-body) .ct-v12-state.is-sent { background: rgba(125, 211, 252, .14) !important; color: #A9DEFA !important; border-color: rgba(169, 222, 250, .3) !important; }
html[data-theme="dark"] body:not(.login-body) :is(.status-badge, .ct-v12-state) .material-icons-outlined { color: inherit !important; }

/* Counts coloured green / orange / red */
html[data-theme="dark"] body:not(.login-body) :is(.ct-logs-count.is-present, .ct-att-day-counts .is-present, .ct-v14-ad-chip.is-success) strong { color: #86EFAC !important; }
html[data-theme="dark"] body:not(.login-body) :is(.ct-logs-count.is-late, .ct-att-day-counts .is-late, .ct-v14-ad-chip.is-warning) strong { color: #FCD34D !important; }
html[data-theme="dark"] body:not(.login-body) :is(.ct-logs-count.is-absent, .ct-att-day-counts .is-absent, .ct-v14-ad-chip.is-danger) strong { color: #FCA5A5 !important; }

/* Light boxes that stayed light in dark mode (their text turned light). */
html[data-theme="dark"] .agency-brand-chip,
html[data-theme="dark"] body:not(.login-body) .agency-brand-chip { background: rgba(16, 44, 42, .94) !important; border-color: #35574F !important; color: #EEF5F2 !important; }
html[data-theme="dark"] body:not(.login-body) :is(.ct-merit-type-option, .ct-merit-type-label, .profile-identity-banner, .student-welcome-agency) { background: #1D4643 !important; color: var(--ct-ink) !important; border-color: #35574F !important; }
html[data-theme="dark"] body:not(.login-body) :is(.ct-merit-type-option, .profile-identity-banner, .student-welcome-agency) :is(span, small, strong, h2, p) { color: var(--ct-ink) !important; }
html[data-theme="dark"] body:not(.login-body) :is(.ct-merit-type-option, .student-welcome-agency) small { color: var(--ct-ink-soft) !important; }
/* Same weight as the existing :not(#ct-link) rules, so dark mode wins. */
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) :is(a.table-link, button.table-link, .table-link, .panel-link, .ct-tl-change, .ct-v14-view, .ct-verify-link:not(.is-pending)) { color: var(--ct-accent-text) !important; }
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) :is(a.table-link, button.table-link, .ct-tl-change) .ct-sr { color: inherit !important; }
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle):not(.table-link):not(.ct-v14-day-btn):not(.ct-icon-action):not(.ct-tl-change):not([aria-current]):not(:disabled),
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) .btn:not(.secondary-btn):not(.action-danger):not(.btn-decline) {
    background: #17695F !important; border-color: #17695F !important; color: #FFFFFF !important;
}
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) button:not(.secondary-btn):not(.close-btn):not(.menu-btn):not(.icon-btn):not(.header-icon-btn):not(.profile-button):not(.password-toggle):not(.icon-delete-btn):not(.action-danger):not(.btn-decline):not(.ct-bare):not(.ct-password-toggle):not(.table-link):not(.ct-v14-day-btn):not(.ct-icon-action):not(.ct-tl-change):not([aria-current]):not(:disabled):hover,
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) .btn:not(.secondary-btn):not(.action-danger):not(.btn-decline):hover { background: #1E7B70 !important; border-color: #1E7B70 !important; }
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) .ct-pagination button[aria-current="page"] { background: #8FE0D0 !important; border-color: #8FE0D0 !important; color: #0B2624 !important; }

/* Notices with a light background */
html[data-theme="dark"] body:not(.login-body) .ct-verify-banner,
html[data-theme="dark"] body:not(.login-body) .ct-verify-banner.has-pending { background: rgba(251, 191, 36, .12) !important; border-color: rgba(252, 217, 128, .35) !important; color: var(--ct-ink) !important; }
html[data-theme="dark"] body:not(.login-body) .ct-verify-banner :is(span, small, strong, label) { color: var(--ct-ink) !important; }
html[data-theme="dark"] body:not(.login-body) .alert.alert-success { background: rgba(74, 222, 128, .12) !important; border-color: rgba(154, 240, 184, .35) !important; color: #D9F8E4 !important; }
html[data-theme="dark"] body:not(.login-body) .alert.alert-error { background: rgba(248, 113, 113, .13) !important; border-color: rgba(253, 176, 168, .35) !important; color: #FFE1DD !important; }
html[data-theme="dark"] body:not(.login-body) .alert :is(strong, span, a) { color: inherit !important; }
html[data-theme="dark"] body:not(.login-body) .student-welcome-card :is(p, small, span:not(.material-icons-outlined)) { color: var(--ct-ink-soft) !important; }
html[data-theme="dark"] body:not(.login-body) .student-welcome-card :is(h1, h2, h3, strong) { color: var(--ct-ink) !important; }
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) .ct-verify-link.is-pending { background: #17695F !important; border-color: #17695F !important; color: #FFFFFF !important; }
/* Icon buttons stay subtle in dark mode; their icon keeps its own colour. */
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) :is(.ct-icon-action, .ct-tl-change) { background: #1D4643 !important; border-color: #35574F !important; }
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) :is(.ct-icon-action, .ct-tl-change):hover { background: #245651 !important; }
/* Dark mode switch */
html[data-theme="dark"] body:not(.login-body) .theme-setting-row { background: #163937 !important; border-color: #35574F !important; }
html[data-theme="dark"] body:not(.login-body) .theme-switch { background: transparent !important; border-color: #35574F !important; }
html[data-theme="dark"] body:not(.login-body) .theme-setting-row label.theme-switch { background: #0F2E2C !important; }
html[data-theme="dark"] body:not(.login-body):not(#ct-dark) .action-danger { background: rgba(248, 113, 113, .14) !important; border-color: rgba(253, 176, 168, .35) !important; color: #FDB0A8 !important; }

/* v16: Sidebar School Year — original design, readable text.
   The year was dark green text on the dark green sidebar in light mode. */
html body:not(.login-body) .layout > aside .sidebar-filter select { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF; font-weight: 600 !important; }
html body:not(.login-body) .layout > aside .sidebar-filter select option { color: #12332F; background: #FFFFFF; }
html body:not(.login-body) .layout > aside .sidebar-filter label,
html body:not(.login-body) .layout > aside .sidebar-filter label .nav-text { color: rgba(235, 245, 241, .92) !important; }

/* =====================================================================
   v16: Agency / Student Settings and My Profile, organized
   ===================================================================== */
html body:not(.login-body) .settings-grid.ct-settings-portal {
    display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
    gap: 20px !important; align-items: start;
}
.ct-settings-portal > *, .ct-profile-v16 > * { min-width: 0; }
.ct-settings-portal .ct-settings-stack, .ct-profile-v16 .ct-settings-stack { display: grid; gap: 20px; align-content: start; }
html body:not(.login-body) :is(.ct-settings-portal, .ct-profile-v16) .settings-card { margin: 0 !important; }
html body:not(.login-body) :is(.ct-settings-portal, .ct-profile-v16) .settings-card-heading {
    display: flex; align-items: flex-start; gap: 12px;
    margin: 0 0 16px; padding: 0 0 14px; border-bottom: 1px solid var(--ct-line, #E3EBE7);
}
html body:not(.login-body) :is(.ct-settings-portal, .ct-profile-v16) .settings-card-heading > .material-icons-outlined {
    flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: 12px; background: var(--ct-tint, #E6F0EC); color: var(--ct-accent, #0B4F4A); font-size: 22px;
}
html body:not(.login-body) :is(.ct-settings-portal, .ct-profile-v16) .settings-card-heading h2 { margin: 0 0 3px; font-size: 16.5px; }
html body:not(.login-body) :is(.ct-settings-portal, .ct-profile-v16) .settings-card-heading p { margin: 0; font-size: 13px; line-height: 1.5; }

/* Details as a tidy two-column list */
.ct-info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.ct-info-list > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--ct-line, #E3EBE7); border-radius: 12px; background: var(--ct-surface-sunken, #F6F9F7); }
.ct-info-list > div.is-wide { grid-column: 1 / -1; }
.ct-info-list dt { margin: 0 0 4px; color: var(--ct-ink-soft, #5E7370); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.ct-info-list dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.ct-info-list .agency-theme-preview { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.ct-account-links { display: flex; flex-wrap: wrap; gap: 10px; }
html body:not(.login-body) .ct-account-links .btn { display: inline-flex; align-items: center; gap: 7px; width: auto; }
html body:not(.login-body) :is(.ct-settings-portal, .ct-profile-v16) .theme-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border-radius: 12px; }
html body:not(.login-body) :is(.ct-settings-portal, .ct-profile-v16) .theme-setting-row small { display: block; margin-top: 3px; }

/* My Profile: fields use the full card width, no empty gap. */
html body:not(.login-body) .ct-profile-v16 { align-items: start; }
html body:not(.login-body) .ct-profile-v16 .profile-main-column { display: grid; gap: 20px; }
html body:not(.login-body) .ct-profile-v16 .ct-profile-form,
html body:not(.login-body) .ct-profile-v16 .ct-profile-form > *,
html body:not(.login-body) .ct-profile-v16 .ct-profile-photo-row,
html body:not(.login-body) .ct-profile-v16 .profile-form-grid,
html body:not(.login-body) .ct-profile-v16 .settings-form input,
html body:not(.login-body) .ct-profile-v16 .settings-form textarea,
html body:not(.login-body) .ct-profile-v16 .password-field { max-width: none !important; }
html body:not(.login-body) .ct-profile-v16 .settings-form input:not([type="checkbox"]):not([type="file"]),
html body:not(.login-body) .ct-profile-v16 .settings-form textarea { width: 100% !important; }
html body:not(.login-body) .ct-profile-v16 .profile-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
html body:not(.login-body) .ct-profile-v16 .profile-secondary-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; margin: 0 !important; align-items: start; }
html body:not(.login-body) .ct-profile-v16 .ct-set-submit { display: inline-flex; align-items: center; gap: 8px; justify-self: start; width: auto !important; min-height: 42px; padding: 9px 18px; }
html body:not(.login-body) .ct-profile-v16 .profile-summary-card { position: sticky; top: 84px; }

@media (max-width: 1100px) {
    html body:not(.login-body) .settings-grid.ct-settings-portal,
    html body:not(.login-body) .ct-profile-v16 .profile-secondary-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
    .ct-info-list, html body:not(.login-body) .ct-profile-v16 .profile-form-grid { grid-template-columns: minmax(0, 1fr); }
    html body:not(.login-body) .ct-profile-v16 .profile-summary-card { position: static; }
    .ct-account-links .btn { flex: 1 1 100%; justify-content: center; }
}
html[data-theme="dark"] .ct-info-list > div { background: #163937; border-color: #35574F; }

/* =====================================================================
   v16: Minor colour effects — sidebar and login
   Subtle only: soft glows, a warm accent on the active item, smooth
   hovers. Motion is switched off for users who prefer reduced motion.
   ===================================================================== */

/* Sidebar: a soft mint glow at the top and a gentle depth gradient. */
html body:not(.login-body) .layout > aside {
    background:
        radial-gradient(420px 260px at 0% 0%, rgba(143, 224, 208, .16), rgba(143, 224, 208, 0) 70%),
        radial-gradient(360px 300px at 100% 100%, rgba(255, 214, 107, .07), rgba(255, 214, 107, 0) 70%),
        linear-gradient(180deg, #0E5A53 0%, #0B4F4A 45%, #083C38 100%) !important;
}
html body:not(.login-body) .layout > aside .sidebar-brand img,
html body:not(.login-body) .layout > aside .brand img { box-shadow: 0 0 0 3px rgba(255, 255, 255, .10), 0 6px 18px -6px rgba(143, 224, 208, .55); border-radius: 50%; }
html body:not(.login-body) .layout > aside .side-nav a {
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
html body:not(.login-body) .layout > aside .side-nav a:not(.active):hover {
    background: linear-gradient(90deg, rgba(143, 224, 208, .16), rgba(143, 224, 208, .04)) !important;
    transform: translateX(3px);
}
html body:not(.login-body) .layout > aside .side-nav a:not(.active):hover .material-icons-outlined { color: #9FE8D8 !important; }
html body:not(.login-body) .layout > aside .side-nav a.active {
    background: linear-gradient(90deg, rgba(255, 255, 255, .20), rgba(143, 224, 208, .10)) !important;
    box-shadow: inset 3px 0 0 #FFD66B, 0 8px 20px -14px rgba(0, 0, 0, .6) !important;
}
html body:not(.login-body) .layout > aside .side-nav a.active .material-icons-outlined { color: #FFD66B !important; }
html body:not(.login-body) .layout > aside .sidebar-filter select:hover { border-color: rgba(143, 224, 208, .55) !important; }

/* Login: slowly drifting glows on the brand panel, a lively button. */
.login-body .login-brand-panel { position: relative; overflow: hidden; }
.login-body .login-brand-panel::before,
.login-body .login-brand-panel::after {
    content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(8px);
}
.login-body .login-brand-panel::before {
    width: 340px; height: 340px; top: -110px; right: -90px;
    background: radial-gradient(circle, rgba(143, 224, 208, .35), rgba(143, 224, 208, 0) 70%);
    animation: ct-login-drift 14s ease-in-out infinite alternate;
}
.login-body .login-brand-panel::after {
    width: 300px; height: 300px; bottom: -120px; left: -80px;
    background: radial-gradient(circle, rgba(255, 214, 107, .22), rgba(255, 214, 107, 0) 70%);
    animation: ct-login-drift 18s ease-in-out infinite alternate-reverse;
}
.login-body .login-brand-inner { position: relative; z-index: 1; }
.login-body .login-brand-logo { filter: drop-shadow(0 10px 24px rgba(143, 224, 208, .35)); transition: transform .3s ease; }
.login-body .login-brand-logo:hover { transform: scale(1.04) rotate(-2deg); }
.login-body .login-brand-name { background: linear-gradient(90deg, #FFFFFF, #CFF5EC 60%, #FFE9A8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-body .login-brand-keywords > * { transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.login-body .login-brand-keywords > *:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 214, 107, .55); transform: translateY(-2px); }
.login-body .login-card { position: relative; }
.login-body .login-card::before {
    content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 3px; border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, #0B4F4A, #3FB8A4, #FFD66B);
}
.login-body .login-input-wrap:focus-within { box-shadow: 0 0 0 4px rgba(63, 184, 164, .18); border-radius: 12px; }
.login-body .login-input-wrap:focus-within .login-input-icon { color: #1B8C7D !important; }
.login-body .login-submit-btn {
    background: linear-gradient(135deg, #0B4F4A 0%, #137267 55%, #1B8C7D 100%) !important;
    background-size: 160% 160% !important; background-position: 0% 50% !important;
    transition: background-position .4s ease, box-shadow .25s ease, transform .15s ease !important;
}
.login-body .login-submit-btn:hover { background-position: 100% 50% !important; box-shadow: 0 12px 26px -10px rgba(11, 79, 74, .65) !important; transform: translateY(-1px); }
.login-body .login-submit-btn:active { transform: translateY(0); }
.login-body .forgot-password { transition: color .2s ease; }
.login-body .forgot-password:hover { color: #1B8C7D !important; }

@keyframes ct-login-drift {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-30px, 24px) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    .login-body .login-brand-panel::before, .login-body .login-brand-panel::after { animation: none; }
    html body:not(.login-body) .layout > aside .side-nav a:not(.active):hover { transform: none; }
}

/* =====================================================================
   v17: dropdown arrows (all single-choice selects) + School Year filters
   ---------------------------------------------------------------------
   Every select sets appearance:none, which removes the browser's own
   arrow, and the drawn chevron (see "main select:not([multiple])" above)
   was wiped out by the older "input, select, textarea { background:
   #FFF !important }" and ".sidebar-filter select { background: ...
   !important }" shorthands. Only the background-image longhands are set
   here, so colours, borders and sizes from the existing theme stay as
   they were. appearance:none is repeated so a browser arrow and this one
   can never both show.
   ===================================================================== */
html body select:not([multiple]):not([size]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235E7370' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
    padding-right: 32px !important;
    text-overflow: ellipsis;
}
html body select:not([multiple]):not([size])::-ms-expand { display: none; }
html[data-theme="dark"] body select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23A9C4BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}

/* School Year filters: an accent-coloured arrow so the control reads as a dropdown. */
html body select.ct-year-select:not([multiple]) {
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%230B4F4A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
    padding-right: 34px !important;
    max-width: 100%;
}
html[data-theme="dark"] body select.ct-year-select:not([multiple]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23B7E1DA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}
/* Sidebar (white text on the dark green rail, both themes): light arrow. */
html body .layout > aside .sidebar-filter select.ct-year-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23EAF5F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 11px center !important;
}
/* Header pill (Analytics pages): compact arrow inside the pill. */
html body .ct-v9-year select.ct-year-select {
    padding-right: 28px !important;
    background-position: right 8px center !important;
    background-size: 14px 14px !important;
}

/* =====================================================================
   v17: header profile picture — a perfect circle on every screen
   ---------------------------------------------------------------------
   At ≤1080px the button shows only the photo, but the desktop rule
   "button#profileButton { padding: 0 9px 0 5px !important }" (an ID, so
   it beat the compact rules) left 28px of room for a 32px photo. The
   photo shrank to 28×32, an oval, and sat off-centre. The ID is repeated
   here so this rule wins. Desktop layout (photo + name) is unchanged.
   ===================================================================== */
html body:not(.login-body) button#profileButton img,
html body:not(.login-body) .profile-button img,
html body .profile-summary img {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1;
    object-fit: cover !important;
    object-position: center;
    border-radius: 50% !important;
    display: block;
}

@media (max-width: 1080px) {
    html body:not(.login-body) button#profileButton,
    html body:not(.login-body) .profile-button {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        gap: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        flex: 0 0 44px !important;
        box-sizing: border-box !important;
    }
    html body:not(.login-body) button#profileButton img,
    html body:not(.login-body) .profile-button img {
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
    }
}

/* =====================================================================
   v20 — Responsive & organization layer
   ---------------------------------------------------------------------
   One place for the all-device fixes, using one set of breakpoints:

       ≥ 1280  desktop / large monitor   (no rules needed: the base layout)
       ≤ 1279  small laptop
       ≤ 1024  tablet landscape          (sidebar becomes the drawer at 900)
       ≤  768  tablet portrait
       ≤  640  phone: tables become cards (labels from crimtrack-core.js §5)
       ≤  375  small phone

   Replaces, rather than repeats, older rules that fought each other:
   the stale "Dense tables" block (ten-column Reports/Documents tables that
   no longer exist), the nth-child rules on #studentReports, and three
   duplicate html/body overflow-x rules (one global rule remains, line ~727).
   Nothing here changes behaviour; only layout, wrapping and sizing.
   ===================================================================== */

/* ---------- 1. Long text never breaks the layout ---------- */
html body:not(.login-body) :is(main, .ct-dialog-card) :is(h1, h2, h3, h4, p, li, dd, dt, label, legend, figcaption, small, strong) {
    overflow-wrap: break-word;
}
/* Names stay readable but wrap instead of stretching tables sideways. */
html body:not(.login-body) .student-profile-cell { min-width: 0; flex-wrap: nowrap; }
html body:not(.login-body) .student-profile-cell > :not(img):not(.student-profile-avatar) { min-width: 0; }
/* In a table the name block keeps a readable width (about 22 characters);
   long names and e-mails wrap inside it instead of squeezing to a sliver. */
html body:not(.login-body) td .student-profile-cell > :not(img):not(.student-profile-avatar):not(form):not(.intern-day-state) { min-width: 10.5rem; }
html body:not(.login-body) .student-profile-cell strong {
    white-space: normal;
    max-width: 26ch;
    line-height: 1.3;
    overflow-wrap: break-word;
}
html body:not(.login-body) .student-profile-cell small {
    white-space: normal;
    overflow-wrap: anywhere;    /* e-mail addresses have no spaces to wrap at */
}
html body:not(.login-body) :is(td, dd, .ct-v11-file-copy small, .ct-dialog-title p) a[href^="mailto:"],
html body:not(.login-body) .profile-summary-card :is(p, small, span),
html body:not(.login-body) .student-detail-hero p {
    overflow-wrap: anywhere;
}
/* Long agency / report titles wrap instead of forcing one wide line. */
html body:not(.login-body) button.ct-v12-recipient { white-space: normal; min-width: 12rem; max-width: 34rem; }
html body:not(.login-body) td .status-badge,
html body:not(.login-body) td .ct-v12-state { white-space: nowrap; }
/* File names have no spaces (Memorandum_of_Agreement_…pdf): let them
   break anywhere so one long name cannot widen the whole table. */
html body:not(.login-body) td :is(.v12-file-link, .ct-v11-file, a[href*="file-access"]) :is(small, .ct-file-name),
html body:not(.login-body) a.ct-v11-doc-file small,
html body:not(.login-body) td.ct-cell-file,
html body:not(.login-body) .detail-list :is(strong, dd, a) { overflow-wrap: anywhere; }
html body:not(.login-body) td.ct-cell-file { min-width: 10rem; }
html body:not(.login-body) td a.ct-v11-doc-file > span:not(.material-icons-outlined) { min-width: 10rem; }
/* Compact tables keep short cells on one line, but the first column
   (agency or student) wraps instead of stretching the table. */
html body:not(.login-body) .ct-table-compact td:first-child { white-space: normal; min-width: 10rem; }
/* Column headings may take two lines rather than force a scroll. */
html body:not(.login-body) :is(.table-wrap, .table-responsive) > table > thead th { white-space: normal; }

/* Student Profile hero: long name, e-mail and agency pill stay inside. */
html body:not(.login-body) .student-detail-hero { min-width: 0; }
html body:not(.login-body) .student-detail-hero > div { min-width: 0; max-width: 100%; }
html body:not(.login-body) .student-detail-hero h2 { overflow-wrap: break-word; line-height: 1.2; }
html body:not(.login-body) .student-detail-hero :is(.status-badge, .ct-v12-state, span) { max-width: 100%; white-space: normal; text-align: left; }

/* Cards in grids never force a column wider than the screen. */
html body:not(.login-body) .analytics-chart-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
html body:not(.login-body) .ct-cert-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
html body:not(.login-body) .student-recent-date { min-width: 0; }
html body:not(.login-body) .student-recent-date > div { min-width: 0; }

/* Images keep their proportions everywhere. */
html body:not(.login-body) :is(.student-profile-avatar, .profile-avatar-large, .student-detail-hero > img, .ct-pv-person img) { object-fit: cover; aspect-ratio: 1 / 1; height: auto; }

/* ---------- 2. Admin → Reports: Student Weekly Reports ---------- */
html body:not(.login-body) #studentReports td.ct-col-date { white-space: nowrap; }
html body:not(.login-body) #studentReports td.ct-col-status { width: 1%; min-width: 9.5rem; }
html body:not(.login-body) #studentReports td.ct-col-actions { width: 1%; white-space: nowrap; }
html body:not(.login-body) #studentReports .ct-remarks { max-width: 230px; }
/* One chip per state, stacked in a fixed order and aligned in the column. */
html body:not(.login-body) .ct-report-status-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}
html body:not(.login-body) .ct-report-status-list .ct-v12-state { min-width: 7.5rem; }
html body:not(.login-body) .ct-report-status-list b { font-weight: 800; }
html body:not(.login-body) .ct-report-state { font-size: 12.5px; }

/* Per-student modal: each report is one card holding its file, status,
   rejection reason and its own buttons, so actions never float between
   two reports. */
html body:not(.login-body) .ct-v14-fl-list > li.ct-v15-fl-item {
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--ct-line, #DCE7E3);
    border-radius: 14px;
    background: var(--ct-surface, #FFFFFF);
}
html body:not(.login-body) .ct-v14-fl-list > li.ct-v15-fl-item > a.ct-v14-fl-file {
    border: 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
    background: transparent !important;
}
html body:not(.login-body) .ct-v15-fl-decide {
    margin-top: 0;
    padding-top: 10px;
    border-top: 1px solid var(--ct-line, #DCE7E3);
}
html body:not(.login-body) .ct-v14-fl-file .ct-v11-file-copy { min-width: 0; }
html body:not(.login-body) .ct-v14-fl-file .ct-v11-file-copy :is(strong, small) { overflow-wrap: anywhere; white-space: normal; }

/* ---------- 3. Modals fit every screen ---------- */
html body:not(.login-body) .ct-dialog-card {
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
}
html body:not(.login-body) .ct-dialog-head { min-width: 0; }
html body:not(.login-body) .ct-dialog-title { min-width: 0; }
html body:not(.login-body) .ct-dialog-title h2 { overflow-wrap: break-word; }
html body:not(.login-body) .ct-dialog-foot { flex-wrap: wrap; }

/* ---------- 4. Small laptop and tablet (≤ 1279 / ≤ 1024) ---------- */
@media (max-width: 1279px) {
    html body:not(.login-body) #myDocs,
    html body:not(.login-body) #incomingDocuments { min-width: 760px; }
}
@media (min-width: 1280px) {
    /* These two tables fit a desktop once their text wraps. */
    html body:not(.login-body) #myDocs,
    html body:not(.login-body) #incomingDocuments { min-width: 0; }
}
@media (max-width: 1024px) {
    html body:not(.login-body) .filter-toolbar { flex-wrap: wrap; }
    html body:not(.login-body) .filter-toolbar :is(input, select) { min-width: 0; flex: 1 1 11rem; }
    html body:not(.login-body) .section-title-row { flex-wrap: wrap; }
}

/* ---------- 5. Tablet portrait (≤ 768) ---------- */
@media (max-width: 768px) {
    html body:not(.login-body) .ct-dialog-card { max-height: calc(100dvh - 16px); }
    html body:not(.login-body) .ct-dialog-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    html body:not(.login-body) .ct-dialog-foot { position: sticky; bottom: 0; background: var(--ct-surface, #FFFFFF); z-index: 1; }
    html body:not(.login-body) .ct-dialog-foot :is(button, .btn, a.secondary-btn) { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 6. Phone (≤ 640): tables become labelled cards ---------- */
@media (max-width: 640px) {
    html body:not(.login-body) :is(.table-wrap, .table-responsive):has(> table.ct-cards) {
        overflow: visible;
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    html body:not(.login-body) table.ct-cards {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        border: 0;
        background: transparent;
    }
    /* Column names move into each cell; the header stays for screen readers. */
    html body:not(.login-body) table.ct-cards > thead {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    html body:not(.login-body) table.ct-cards > tbody { display: grid; gap: 10px; }
    html body:not(.login-body) table.ct-cards > tbody > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 14px;
        border: 1px solid var(--ct-line, #E3EBE7);
        border-radius: 14px;
        background: var(--ct-surface, #FFFFFF);
        box-shadow: none;
    }
    html body:not(.login-body) table.ct-cards > tbody > tr[hidden],
    html body:not(.login-body) table.ct-cards > tbody > tr.ct-page-hidden { display: none !important; }
    /* The label sits in a left gutter; the cell keeps its normal inline
       flow, so "3 reports<br>Weeks 1, 2" or a date and time stay together. */
    html body:not(.login-body) table.ct-cards > tbody > tr > td {
        display: block;
        position: relative;
        min-height: 1.2em;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 0 0 0 calc(34% + 10px) !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
        white-space: normal !important;
        font-size: 13.5px;
    }
    html body:not(.login-body) table.ct-cards > tbody > tr > td::before {
        content: attr(data-label);
        position: absolute;
        top: 2px;
        left: 0;
        width: 34%;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        line-height: 1.3;
        text-transform: uppercase;
        color: var(--ct-ink-soft, #5E7370);
    }
    /* First cell is the card's title: full width, divider underneath. */
    html body:not(.login-body) table.ct-cards > tbody > tr > td:first-child:not(:only-child) {
        padding-left: 0 !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid var(--ct-line, #E3EBE7) !important;
    }
    html body:not(.login-body) table.ct-cards > tbody > tr > td:first-child:not(:only-child)::before { display: none; }
    html body:not(.login-body) table.ct-cards > tbody > tr > td[data-label=""] { padding-left: 0 !important; }
    html body:not(.login-body) table.ct-cards > tbody > tr > td[data-label=""]::before { display: none; }
    /* "No records" rows. */
    html body:not(.login-body) table.ct-cards > tbody > tr > td:only-child { padding-left: 0 !important; text-align: center !important; }
    html body:not(.login-body) table.ct-cards > tbody > tr > td:only-child::before { display: none; }
    /* Action buttons: a comfortable row at the bottom of the card. */
    html body:not(.login-body) table.ct-cards :is(.ct-row-actions, .inline-actions, .ct-v10-actions) {
        flex-wrap: wrap !important;
        justify-content: flex-start;
        gap: 8px;
    }
    html body:not(.login-body) table.ct-cards :is(.ct-icon-action, .table-link) { min-width: 40px; min-height: 40px; }
    /* Chips sit side by side inside a card. */
    html body:not(.login-body) table.ct-cards .ct-report-status-list { flex-direction: row; flex-wrap: wrap; }
    html body:not(.login-body) table.ct-cards .ct-report-status-list .ct-v12-state { min-width: 0; }
    html body:not(.login-body) table.ct-cards .student-profile-cell strong { max-width: none; }
    /* Extra controls inside the name cell (Mark absent) drop to their own line. */
    html body:not(.login-body) table.ct-cards .student-profile-cell { flex-wrap: wrap; }
    html body:not(.login-body) table.ct-cards .student-profile-cell > :not(img):not(form):not(.intern-day-state) { flex: 1 1 0; }
    html body:not(.login-body) table.ct-cards .student-profile-cell > :is(form, .intern-day-state) { flex: 1 1 100%; }
    html body:not(.login-body) button.ct-v12-recipient { min-width: 0; }

    /* Forms and filters: full-width controls that are easy to tap. */
    html body:not(.login-body) main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) { font-size: 16px; } /* no iOS zoom */
    html body:not(.login-body) .filter-toolbar > :is(input, select, .secondary-btn, .table-link, button) { flex: 1 1 100%; }
    html body:not(.login-body) .filter-toolbar > button.secondary-btn[data-clear-filters] { flex: 1 1 100%; }

    /* Modal: full width sheet with the close button always reachable. */
    html body:not(.login-body) .ct-dialog { padding: 8px; align-items: flex-end; }
    html body:not(.login-body) .ct-dialog-card { width: 100% !important; max-width: 100% !important; border-radius: 18px; }
    html body:not(.login-body) .ct-dialog-head { position: sticky; top: 0; z-index: 2; background: var(--ct-surface, #FFFFFF); }
    html body:not(.login-body) .ct-v15-fl-decide > *,
    html body:not(.login-body) .ct-v15-fl-decide form button { flex: 1 1 8rem; }

    /* Attendance kiosk: Time In / Time Out labels never clip. */
    html body:not(.login-body) .ct-kiosk-option { min-width: 0; padding: 10px 8px; letter-spacing: .02em; font-size: .9rem; }
}

/* ---------- 7. Small phone (≤ 375) ---------- */
@media (max-width: 375px) {
    html body:not(.login-body) table.ct-cards > tbody > tr { padding: 12px; }
    html body:not(.login-body) table.ct-cards > tbody > tr > td { padding-left: 0 !important; }
    html body:not(.login-body) table.ct-cards > tbody > tr > td::before { position: static; display: block; width: auto; margin-bottom: 2px; }
    html body:not(.login-body) .ct-kiosk-option { flex-direction: column; gap: 2px; font-size: .82rem; }
}

/* =====================================================================
   v21 — exact attendance location + device responsiveness
   ---------------------------------------------------------------------
   Appended last so it wins over the earlier layers without new
   !important chains where a later, equally specific rule is enough.
   ===================================================================== */

/* ---------- Kiosk: exact location panel ---------- */
/* The display rules below must never override the hidden attribute. */
.ct-kiosk-compact :is(.location-exact, .location-actions, .location-map, .location-parts)[hidden] { display: none !important; }
.ct-kiosk-compact .location-exact {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
    margin: 8px 0 0;
}
.ct-kiosk-compact .location-coords {
    display: inline-flex; align-items: baseline; gap: 6px; min-width: 0;
    padding: 5px 9px; border: 1px solid var(--line, #DCE5E0); border-radius: 999px;
    background: var(--white, #FFFFFF); font-size: 12px;
    font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.ct-kiosk-compact .location-coords b { flex: none; white-space: nowrap; color: var(--muted, #617572); font-weight: 700; }
.ct-kiosk-compact .location-coords > span { min-width: 0; }
.ct-kiosk-compact .location-acc {
    display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
    background: #F7ECD9; color: #8A5A22;
}
.ct-kiosk-compact .location-acc.is-excellent { background: #E1EBE0; color: #2F5239; }
.ct-kiosk-compact .location-acc.is-good { background: #E3EEF3; color: #2F5A70; }
.ct-kiosk-compact .location-address { margin: 4px 0 8px; line-height: 1.45; font-weight: 600; color: var(--ink, #1F3A36); overflow-wrap: anywhere; }
.ct-kiosk-compact .location-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
body:not(.login-body) .ct-kiosk-compact .location-map-toggle {
    display: inline-flex; align-items: center; gap: 6px; width: auto !important;
    min-height: 34px; padding: 6px 12px; font-size: 12.5px;
}
.ct-kiosk-compact .location-map-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.ct-kiosk-compact .location-map-link .material-icons-outlined,
.ct-kiosk-compact .location-map-toggle .material-icons-outlined { font-size: 17px; }
.ct-kiosk-compact .location-map {
    margin-top: 10px; border: 1px solid var(--line, #DCE5E0); border-radius: 12px; overflow: hidden;
    aspect-ratio: 16 / 10; max-height: 320px; background: var(--ct-surface-sunken, #F3F6F4);
}
.ct-kiosk-compact .location-map iframe { display: block; width: 100%; height: 100%; border: 0; }
.ct-kiosk-compact .location-attribution { display: block; margin-top: 8px; font-size: 11px; opacity: .75; }
.ct-kiosk-compact .loc-tone-busy { color: var(--ink, #1F3A36); }

html[data-theme="dark"] .ct-kiosk-compact .location-coords { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
html[data-theme="dark"] .ct-kiosk-compact .location-acc { background: rgba(251,191,36,.14); color: #F7E3B0; }
html[data-theme="dark"] .ct-kiosk-compact .location-acc.is-excellent { background: rgba(74,222,128,.14); color: #BFF0CF; }
html[data-theme="dark"] .ct-kiosk-compact .location-acc.is-good { background: rgba(96,165,250,.14); color: #D6E8F7; }
html[data-theme="dark"] .ct-kiosk-compact .location-address { color: inherit; }

/* ---------- Kiosk on phones ---------- */
@media (max-width: 640px) {
    /* One column: a live view big enough to frame a face, the captured
       photo below it. Side by side, each was ~120 px wide on a 360 px phone. */
    .ct-kiosk-compact .kiosk-camera-area {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 440px;
        margin-inline: auto;
    }
    body:not(.login-body) .ct-kiosk-compact .camera-card { padding: 10px !important; }
    .ct-kiosk-compact .kiosk-camera-area video { aspect-ratio: 4 / 3; }
    .ct-kiosk-compact .kiosk-camera-area #preview.has-photo { aspect-ratio: 4 / 3; }
    /* Before a photo exists the placeholder only needs to say so. */
    .ct-kiosk-compact .ct-preview-empty { aspect-ratio: auto; min-height: 96px; flex-direction: row; }
    body:not(.login-body) .ct-kiosk-compact .ct-kiosk-capture { font-size: 14px; min-height: 44px; }

    /* Location: icon + text, with Retry on its own full-width row. */
    .ct-kiosk-compact .reverse-location-note { grid-template-columns: auto minmax(0, 1fr) !important; }
    body:not(.login-body) .ct-kiosk-compact .location-retry {
        grid-column: 1 / -1 !important; justify-self: stretch !important;
        justify-content: center; width: 100% !important; min-height: 42px;
    }
    .ct-kiosk-compact .location-parts span { font-size: 11px; }
    .ct-kiosk-compact .location-map { aspect-ratio: 4 / 3; }
}

/* ---------- Off-canvas menu (≤ 900px) ----------
   The closed drawer sits just left of the screen, but its 44px shadow
   still fell onto the page as a grey band along the left edge. It also
   stayed keyboard-focusable while hidden. Closed = no shadow and hidden
   (after the slide-out finishes); open = visible at once. */
@media (max-width: 900px) {
    html body:not(.login-body):not(.sidebar-mobile-open) .layout > aside,
    html body:not(.login-body):not(.sidebar-mobile-open) .layout > .sidebar,
    html body:not(.login-body):not(.sidebar-mobile-open) #appSidebar {
        box-shadow: none !important;
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s !important;
    }
    html body:not(.login-body).sidebar-mobile-open .layout > aside,
    html body:not(.login-body).sidebar-mobile-open .layout > .sidebar,
    html body:not(.login-body).sidebar-mobile-open #appSidebar {
        visibility: visible;
        transition: transform .22s ease, visibility 0s !important;
    }
}

/* ---------- Bottom tab bar (≤ 700px) ----------
   Columns may shrink below their content, so a long label or a slow icon
   font can no longer push the last tab ("More") off the screen. */
.ct-tabbar-inner { grid-auto-columns: minmax(0, 1fr); }
.ct-tabbar a > span:last-child,
.ct-tabbar button > span:last-child {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-tabbar { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }

/* ---------- Icon font still loading ----------
   Until "Material Icons Outlined" arrives, each icon is its ligature word
   ("photo_camera"), several times wider than the icon. On slow mobile data
   that pushed buttons and tabs out of place. crimtrack-core.js sets
   .ct-icons-pending until the font is ready (or 4 s pass). */
html.ct-icons-pending .material-icons-outlined,
html.ct-icons-pending .material-icons {
    display: inline-block; width: 1em; max-width: 1em; overflow: hidden; color: transparent !important;
}

/* ---------- Phones: general safety ---------- */
@media (max-width: 700px) {
    /* Long unbroken values (emails, addresses, file names) wrap instead of widening cards. */
    body:not(.login-body) main :is(p, td, dd, li, small, strong) { overflow-wrap: break-word; }
    /* Comfortable tap targets for icon-only actions. */
    body:not(.login-body) main .ct-bare.ct-v10-act { min-width: 40px; min-height: 40px; }
}

/* =====================================================================
   v21 — large screens (laptops, desktops, wide and QHD monitors)
   ---------------------------------------------------------------------
   Page content used to stop at 1460 px and hug the left edge, so a
   1920 or 2560 monitor showed a wide empty band on the right and the
   header's search/profile sat far from the content. The content column
   now grows with the screen up to a readable limit, is centred in the
   space beside the sidebar, and the header lines up with it.
   ===================================================================== */
:root { --ct-content-max: 1460px; }
@media (min-width: 1680px) { :root { --ct-content-max: 1560px; } }
@media (min-width: 1920px) { :root { --ct-content-max: 1680px; } }
@media (min-width: 2400px) { :root { --ct-content-max: 1960px; } }

@media (min-width: 901px) {
    body:not(.login-body) main > section,
    body:not(.login-body) main > div:not(.page-header):not(.modal-overlay):not(.document-modal-overlay):not(.ct-dialog) {
        max-width: var(--ct-content-max);
        margin-left: auto;
        margin-right: auto;
    }
    /* Header spans the full width (sticky bar) but its contents line up with the column. */
    body:not(.login-body) main > .page-header {
        padding-left: max(var(--ct-gutter, 26px), calc(var(--ct-gutter, 26px) + (100% - var(--ct-content-max)) / 2)) !important;
        padding-right: max(var(--ct-gutter, 26px), calc(var(--ct-gutter, 26px) + (100% - var(--ct-content-max)) / 2)) !important;
    }
}

/* Wide/QHD monitors: slightly larger type and controls so the bigger canvas
   is not filled with tiny text. Only text that is sized in px is touched
   through the base sizes; layout stays the same. */
@media (min-width: 2400px) {
    body:not(.login-body) main { font-size: 15.5px; }
    body:not(.login-body) main h2 { font-size: 1.32rem; }
    body:not(.login-body) main table { font-size: 14.5px; }
}

/* ---------- Attendance kiosk on laptops and desktops ----------
   Cameras on the left, the location card on the right, so neither leaves a
   blank area beside it. Submit stays under the cameras. */
@media (min-width: 1200px) {
    .ct-kiosk-compact #attendanceForm {
        display: grid;
        grid-template-columns: minmax(0, 760px) minmax(340px, 1fr);
        grid-template-areas: "bar bar" "cam loc" "submit loc";
        grid-template-rows: auto auto 1fr;
        column-gap: 20px;
        align-items: start;
    }
    .ct-kiosk-compact #attendanceForm > .ct-kiosk-bar { grid-area: bar; }
    .ct-kiosk-compact #attendanceForm > .kiosk-camera-area { grid-area: cam; max-width: none; margin-bottom: 0; }
    .ct-kiosk-compact #attendanceForm > .reverse-location-note { grid-area: loc; margin: 0 !important; height: 100%; align-content: start; }
    .ct-kiosk-compact #attendanceForm > .ct-kiosk-submit { grid-area: submit; justify-self: start; align-self: start; }
    /* In the narrower right column Retry sits under the text. */
    .ct-kiosk-compact #attendanceForm > .reverse-location-note { grid-template-columns: auto minmax(0, 1fr) !important; }
    body:not(.login-body) .ct-kiosk-compact #attendanceForm .location-retry { grid-column: 2 !important; justify-self: start !important; }
    .ct-kiosk-compact .location-map { aspect-ratio: auto; width: 100%; height: clamp(260px, 22vw, 440px); max-height: none; }
}
@media (min-width: 1920px) {
    .ct-kiosk-compact #attendanceForm { grid-template-columns: minmax(0, 880px) minmax(380px, 1fr); }
}

/* ---------- Tooltips: one bubble above the element ----------
   crimtrack-core.js shows a single bubble (position: fixed, in <body>)
   above the hovered or keyboard-focused element, so no scrolling table,
   card list or modal can cut it off and it never shifts the layout. While
   it is active the older per-button ::after tooltips and the kiosk's
   inline tip are hidden, so only one tooltip ever shows. */
.ct-floating-tip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483000;
    box-sizing: border-box;
    width: max-content;
    max-width: 240px;
    padding: 3px 7px;
    border-radius: 5px;
    background: #12332F;
    color: #FFFFFF;
    font-family: inherit;
    font-weight: 600;
    font-size: 10.5px;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    box-shadow: 0 6px 18px rgba(7, 60, 57, .22);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(3px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.ct-floating-tip.is-below { transform: translateY(-3px); }
.ct-floating-tip.is-visible { opacity: 1; visibility: visible; transform: none; }
.ct-floating-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--ct-tip-arrow, 50%);
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: #12332F;
}
.ct-floating-tip.is-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #12332F;
}
:root[data-theme="dark"] .ct-floating-tip { background: #0B2624; box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .ct-floating-tip::after { border-top-color: #0B2624; }
:root[data-theme="dark"] .ct-floating-tip.is-below::after { border-top-color: transparent; border-bottom-color: #0B2624; }
@media (prefers-reduced-motion: reduce) { .ct-floating-tip { transition: none; } }

html.ct-float-tips .ct-icon-action[data-tooltip]::after,
html.ct-float-tips .ct-icon-action[data-tooltip]::before,
html.ct-float-tips .ct-icon-only[data-tip]::after,
html.ct-float-tips .ct-kiosk-bar .ct-tip { display: none !important; }

/* ---------- Student List: Registered Students scrolls ----------
   The list sits in a fixed-height box that scrolls (mouse wheel, touch,
   keyboard once focused) with the column headings kept in view, instead of
   being split into pages. Search and filters still apply to every row. */
body:not(.login-body) .table-wrap.ct-scroll-list {
    max-height: min(70vh, 640px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}
/* The table clips its rounded corners with overflow: hidden, which would
   make it the sticky container; "clip" keeps the corners without that. */
body:not(.login-body) .table-wrap.ct-scroll-list > table { overflow: visible !important; overflow: clip !important; }
body:not(.login-body) .table-wrap.ct-scroll-list:focus-visible { outline: 2px solid var(--ct-accent, #0B4F4A); outline-offset: 2px; }
body:not(.login-body) .table-wrap.ct-scroll-list thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--ct-surface, #FFFFFF) !important;
    box-shadow: inset 0 -1px 0 var(--ct-line, #DCE7E3);
}
:root[data-theme="dark"] body:not(.login-body) .table-wrap.ct-scroll-list thead th { background-color: var(--ct-surface, #102826) !important; }
@media (max-width: 720px) {
    body:not(.login-body) .table-wrap.ct-scroll-list { max-height: 72vh !important; }
}

/* ---------- Manage Teams: compact cards, 5 per row ----------
   Cards are ~250–270 px wide and 180 px tall, five to a row (A–Z = 6 rows).
   The column count follows the width of the card area itself (a container
   query), so the sidebar is allowed for: 5 per row from 940 px of card area
   (1366 px laptops and wider; the cards are ~250–270 px from ~1600 px
   screens and narrower on laptops, where five 250 px cards do not fit
   beside the sidebar), then 4, 3, 2 and 1 on smaller screens. Content and
   actions are unchanged; long names and descriptions end with "…", and every
   label stays on one line so the actions always fit inside the card. */
.ct-company-grid-wrap { container-type: inline-size; }
.ct-company-grid-wrap .ct-company-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    justify-content: start;
}
@container (min-width: 860px) {
    .ct-company-grid-wrap .ct-company-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@container (min-width: 700px) and (max-width: 859.98px) {
    .ct-company-grid-wrap .ct-company-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (min-width: 540px) and (max-width: 699.98px) {
    .ct-company-grid-wrap .ct-company-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 340px) and (max-width: 539.98px) {
    .ct-company-grid-wrap .ct-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 339.98px) {
    .ct-company-grid-wrap .ct-company-grid { grid-template-columns: minmax(0, 1fr); }
}
html body:not(.login-body) .ct-company-grid-wrap .ct-company-card {
    height: 180px;
    min-width: 0;
    gap: 7px;
    padding: 11px 13px;
    overflow: hidden;
}
.ct-company-grid-wrap .ct-company-card header { gap: 10px; min-width: 0; }
.ct-company-grid-wrap .ct-company-card header > div { min-width: 0; flex: 1 1 auto; }
.ct-company-grid-wrap .ct-company-card h3,
.ct-company-grid-wrap .ct-company-card header small {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ct-company-grid-wrap .ct-company-card h3 { font-size: 14.5px; line-height: 1.3; }
.ct-company-grid-wrap .ct-company-card header small { font-size: 11.5px; line-height: 1.35; }
.ct-company-grid-wrap .ct-company-emblem { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
.ct-company-grid-wrap .ct-company-counts { gap: 5px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important; }
.ct-company-grid-wrap .ct-company-counts div { padding: 4px 6px; border-radius: 8px; min-width: 0; }
.ct-company-grid-wrap .ct-company-counts dt { font-size: 10px; line-height: 1.3; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-company-grid-wrap .ct-company-counts dd { margin: 0; font-size: 15px; line-height: 1.3; }
.ct-company-grid-wrap .ct-company-leaders {
    flex-wrap: nowrap; overflow: hidden; min-height: 24px; gap: 4px; font-size: 12px;
}
html body:not(.login-body) .ct-company-grid-wrap button.ct-v13-leader { flex: 0 1 auto; min-width: 0; max-width: 100%; font-size: 12px; }
.ct-company-grid-wrap .ct-v13-leader-more { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
.ct-company-grid-wrap .ct-company-card footer { flex-wrap: nowrap; gap: 4px; }
html body:not(.login-body) .ct-company-grid-wrap .ct-company-card footer .ct-icon-only {
    width: 30px; min-width: 30px; height: 30px; min-height: 30px;
}
html body:not(.login-body) .ct-company-grid-wrap .ct-company-card footer .ct-icon-only > .material-icons-outlined { font-size: 18px !important; }

/* v22.13 — Manage Teams → Teams: a 5 × 3 grid.
   Five equal columns on wide screens; the box shows three rows (15 teams)
   and scrolls for the rest, so the panel keeps the same height however
   many teams there are. Every card, button and the page search are
   unchanged. Narrower screens keep the 4 / 3 / 2-column steps above;
   phones list the cards normally (no inner scroll). */
@media (min-width: 900px) {
    .ct-company-grid-wrap {
        --ct-team-card-h: 180px;
        --ct-team-gap: 12px;
        max-height: calc(3 * var(--ct-team-card-h) + 2 * var(--ct-team-gap) + 8px);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
        padding: 3px 4px 5px 2px;
        margin: -3px -4px -5px -2px;
    }
    .ct-company-grid-wrap .ct-company-grid { grid-auto-rows: var(--ct-team-card-h); gap: var(--ct-team-gap); }
}
/* The four card actions share the footer evenly, so Delete never clips on narrow cards. */
html body:not(.login-body) .ct-company-grid-wrap .ct-company-card footer.ct-row-actions {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; justify-items: stretch;
}
.ct-company-grid-wrap .ct-company-card footer form { display: flex; min-width: 0; }
html body:not(.login-body) .ct-company-grid-wrap .ct-company-card footer :is(button, .ct-icon-only) { width: 100% !important; min-width: 0 !important; max-width: 40px; justify-self: center; }

/* ---------- v22.6: Student Reports modal — Reject and Download icons ----------
   Reject and Download are icon buttons beside each other, before Approve.
   They keep their 36px size on phones (the row's other buttons stretch). */
html body:not(.login-body) .ct-v15-fl-decide > .ct-icon-action:not(#ct-link) {
    flex: 0 0 auto !important; width: 36px !important; height: 36px !important;
    min-height: 36px !important; padding: 0 !important;
}
html body:not(.login-body) .ct-v15-fl-decide > button.ct-fl-reject:not(#ct-link) { color: #B2402F !important; border-color: #EBC9C2 !important; }
html body:not(.login-body) .ct-v15-fl-decide > button.ct-fl-reject:not(#ct-link):hover { background: #FBEDEA !important; }
:root[data-theme="dark"] body:not(.login-body) .ct-v15-fl-decide > button.ct-fl-reject:not(#ct-link) { color: #f0a597 !important; border-color: #5a2e28 !important; }
:root[data-theme="dark"] body:not(.login-body) .ct-v15-fl-decide > button.ct-fl-reject:not(#ct-link):hover { background: #3b1f1b !important; }

/* =====================================================================
   v22.12 — Compact cards in the Documents and Reports modals
   Same elements, colours and buttons as before; only size, spacing and
   arrangement change. Scoped to the two modals by id.
   ===================================================================== */

/* ---------- Documents modal (#docViewerDialog) ----------
   Row 1: file icon · type / file name / details · status badge
   Row 2: review steps on the left, action icons on the right
   Reasons and the reject form follow on their own full-width rows. */
html body:not(.login-body) #docViewerDialog .ct-dv-files { gap: 10px; padding: 14px 18px 18px; }
html body:not(.login-body) #docViewerDialog .ct-file-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 14px;
    padding: 12px 14px;
    border-radius: 14px;
}
html body:not(.login-body) #docViewerDialog .ct-file-card > * { min-width: 0; }
html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-main {
    grid-column: 1 / -1; order: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
}
html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-steps { grid-column: 1; order: 1; }
html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-actions {
    grid-column: 2; order: 2; justify-content: flex-end; gap: 6px;
    padding: 0 !important; border-top: 0 !important;
}
html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-remarks,
html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-dv-reject { grid-column: 1 / -1; order: 3; }
html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-dv-reject { order: 4; margin-top: 0; }
html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-steps:only-of-type { min-height: 0; }

html body:not(.login-body) #docViewerDialog .ct-file-icon { width: 40px; height: 46px; border-radius: 5px 12px 5px 5px; }
html body:not(.login-body) #docViewerDialog .ct-file-icon .material-icons-outlined { font-size: 19px; margin-top: -7px; }
html body:not(.login-body) #docViewerDialog .ct-file-icon b { left: 4px; right: 4px; bottom: 4px; font-size: 8.5px; }
html body:not(.login-body) #docViewerDialog a.ct-v11-file-open { align-items: center; gap: 12px; }
html body:not(.login-body) #docViewerDialog .ct-v11-h3 { margin: 0 0 1px; font-size: 14.5px; }
html body:not(.login-body) #docViewerDialog .ct-file-name { font-size: 12.5px; }
html body:not(.login-body) #docViewerDialog .ct-file-meta { margin-top: 3px; font-size: 11.5px; }
html body:not(.login-body) #docViewerDialog .ct-file-meta span + span::before { margin: 0 7px; height: 10px; }
html body:not(.login-body) #docViewerDialog .ct-file-status .status-badge { font-size: 11.5px; padding: 4px 10px; }

html body:not(.login-body) #docViewerDialog .ct-file-steps { gap: 5px; }
html body:not(.login-body) #docViewerDialog .ct-file-steps li { padding: 3px 9px 3px 6px; font-size: 11px; }
html body:not(.login-body) #docViewerDialog .ct-file-steps li .material-icons-outlined { font-size: 14px; }

/* Action buttons: one compact 34px size; buttons that still show a label
   (e.g. "Send to agency") keep it and simply sit at the same height. */
html body:not(.login-body) #docViewerDialog .ct-file-actions :is(.table-link, .btn-approve, .btn-decline, .action-danger):not(#ct-link) {
    min-height: 34px !important; height: 34px !important; min-width: 34px !important;
    padding-top: 0 !important; padding-bottom: 0 !important; border-radius: 9px !important;
    justify-content: center;
}
html body:not(.login-body) #docViewerDialog .ct-file-actions .ct-icon-only:not(#ct-link) {
    width: 34px !important; padding-left: 0 !important; padding-right: 0 !important;
}
html body:not(.login-body) #docViewerDialog .ct-file-actions .material-icons-outlined { font-size: 18px !important; }

@media (max-width: 640px) {
    html body:not(.login-body) #docViewerDialog .ct-dv-files { padding: 10px; }
    html body:not(.login-body) #docViewerDialog .ct-file-card { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-steps,
    html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-actions { grid-column: 1; }
    html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-actions {
        justify-content: flex-start; padding-top: 10px !important; border-top: 1px solid #EDF3F0 !important;
    }
    html body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-main { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 8px; }
    html body:not(.login-body) #docViewerDialog .ct-file-status { grid-column: 1; justify-self: start; }
}
:root[data-theme="dark"] body:not(.login-body) #docViewerDialog .ct-file-card > .ct-file-actions { border-top-color: #26433D !important; }

/* ---------- Files / Reports modal (#ctFileListDialog) ----------
   The Reject · Download · Approve buttons sit on the right of the report
   instead of on a second row, so each report is one compact line. */
html body:not(.login-body) #ctFileListDialog .ct-v14-fl { gap: 10px; padding: 14px 18px 18px; }
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-note { padding: 8px 12px; font-size: 12.5px; line-height: 1.45; }
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-list { gap: 8px; }
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-list > li.ct-v15-fl-item {
    flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px;
}
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-list > li.ct-v15-fl-item > a.ct-v14-fl-file {
    flex: 1 1 auto; align-items: center; gap: 12px; padding: 2px !important;
}
html body:not(.login-body) #ctFileListDialog .ct-v15-fl-decide {
    flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 0; border-top: 0;
}
html body:not(.login-body) #ctFileListDialog .ct-v15-fl-decide > .ct-icon-action:not(#ct-link) {
    width: 34px !important; height: 34px !important; min-height: 34px !important;
}
html body:not(.login-body) #ctFileListDialog .ct-v15-fl-decide button.ct-v13-btn-approve { min-height: 34px; padding: 0 12px; }
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-item .ct-v14-fl-dl { width: 34px; height: 34px; }
html body:not(.login-body) #ctFileListDialog .ct-file-icon { width: 40px; height: 46px; flex: 0 0 40px; border-radius: 5px 12px 5px 5px; }
html body:not(.login-body) #ctFileListDialog .ct-file-icon .material-icons-outlined { font-size: 19px; margin-top: -7px; }
html body:not(.login-body) #ctFileListDialog .ct-file-icon b { left: 4px; right: 4px; bottom: 4px; font-size: 8.5px; }
html body:not(.login-body) #ctFileListDialog .ct-v11-file-copy strong { font-size: 14px; line-height: 1.3; }
html body:not(.login-body) #ctFileListDialog .ct-v11-file-copy small { font-size: 12px; }
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-status { margin-top: 3px; gap: 5px; }
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-status .ct-report-state { padding: 2px 9px; font-size: 12px; }

/* A rejected report's reason or other long status keeps the row tidy:
   the buttons stay top-aligned with the file. */
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-list > li.ct-v15-fl-item:has(.ct-remarks) { align-items: flex-start; }
html body:not(.login-body) #ctFileListDialog .ct-v14-fl-list > li.ct-v15-fl-item:has(.ct-remarks) > .ct-v15-fl-decide { padding-top: 6px; }

@media (max-width: 640px) {
    html body:not(.login-body) #ctFileListDialog .ct-v14-fl { padding: 10px; }
    html body:not(.login-body) #ctFileListDialog .ct-v14-fl-list > li.ct-v15-fl-item { flex-wrap: wrap; }
    html body:not(.login-body) #ctFileListDialog .ct-v14-fl-list > li.ct-v15-fl-item > a.ct-v14-fl-file { flex: 1 1 calc(100% - 44px); }
    html body:not(.login-body) #ctFileListDialog .ct-v15-fl-decide {
        flex: 1 1 100%; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--ct-line, #DCE7E3);
    }
}


/* =====================================================================
   v22.16 — Smoother scrolling on every page
   A live blur (backdrop-filter) behind the sticky header and the phone
   tab bar is recalculated on every scrolled frame, which made long pages
   (Certificates, Students, Attendance) stutter, mostly on laptops without
   a strong graphics chip. They now use a solid background of the same
   colour. Long card lists skip rendering cards that are off screen.
   ===================================================================== */
html body:not(.login-body) .page-header,
html body:not(.login-body) .ct-tabbar,
.ct-tabbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body:not(.login-body) .page-header { background: #FFFFFF !important; }
.ct-tabbar { background: #FFFFFF; }
:root[data-theme="dark"] body:not(.login-body) .page-header { background: #173B39 !important; }
:root[data-theme="dark"] .ct-tabbar { background: #173B39; }
.ct-cert-grid > .ct-cert-template,
.ct-attendance-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 320px;
}

/* =====================================================================
   v22.16 — Attendance photos: Time-in and Time-out, both kept and labelled
   The verification modal shows the two photos side by side above the
   details. New photos are landscape (4:3); older portrait photos are shown
   whole (letterboxed), never cropped.
   ===================================================================== */
.ct-pv-layout:has(> .ct-pv-photos) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ct-pv-photos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ct-pv-photos.is-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-pv-photos .ct-pv-shot { position: static; margin: 0; min-width: 0; }
.ct-pv-photos .ct-pv-shot img,
.ct-pv-photos .ct-pv-shot .ct-pv-nophoto { aspect-ratio: 4 / 3; object-fit: contain; }
.ct-pv-photos .ct-pv-shot > a { display: block; border-radius: 14px; }
.ct-pv-photos .ct-pv-shot-label {
    display: flex; align-items: center; gap: 6px; margin: 0 0 6px;
    font-size: 13px; color: var(--ct-ink, #12332F);
}
.ct-pv-photos .ct-pv-shot-label strong { font-weight: 700; }
.ct-pv-photos .ct-pv-shot-label span:not(.material-icons-outlined) { color: var(--ct-ink-soft, #5E7370); margin-left: auto; font-size: 12px; }
.ct-pv-photos .ct-pv-shot-label .material-icons-outlined { font-size: 17px; color: var(--ct-accent, #0B4F4A); }
.ct-pv-photos .ct-pv-shot.is-out .ct-pv-shot-label .material-icons-outlined { color: #B26A12; }
@media (max-width: 560px) {
    .ct-pv-photos.is-pair { grid-template-columns: minmax(0, 1fr); }
}

/* Attendance Logs (Agency) and attendance cards: two labelled thumbnails. */
.ct-att-shots { display: flex; gap: 8px; align-items: flex-start; }
.ct-att-shot { display: grid; gap: 3px; justify-items: center; margin: 0; }
.ct-att-shot > small { font-size: 10.5px; font-weight: 700; color: var(--ct-ink-soft, #5E7370); white-space: nowrap; letter-spacing: .01em; }
.ct-att-shot .attendance-photo-link,
.ct-att-shot .ct-att-shot-btn { display: block; position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.ct-att-shot img {
    display: block; width: 64px; height: 48px; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--ct-line, #E3EBE7); background: var(--ct-surface-sunken, #F4F8F6);
}
.ct-att-shot-empty {
    display: grid; place-items: center; width: 64px; height: 48px; border-radius: 8px;
    border: 1px dashed var(--ct-line, #E3EBE7); color: var(--ct-ink-soft, #5E7370); font-size: 10.5px; text-align: center; line-height: 1.2;
}
.ct-attendance-photo .ct-att-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; height: 100%; }
.ct-attendance-photo .ct-att-pair > * { position: relative; min-width: 0; }
.ct-attendance-photo .ct-att-pair img { width: 100%; height: 100%; object-fit: cover; }
.ct-attendance-photo .ct-att-tag {
    position: absolute; left: 6px; top: 6px; z-index: 1; padding: 2px 7px; border-radius: 999px;
    background: rgba(9, 40, 38, .78); color: #fff; font-size: 10.5px; font-weight: 700; pointer-events: none;
}
/* v22.16: labelled Previous / Next page buttons */
.ct-pagination-pages { flex-wrap: wrap; }
.ct-pagination button { white-space: nowrap; }
.ct-attendance-photo .ct-att-pair { min-height: 168px; padding: 6px; box-sizing: border-box; }
.ct-attendance-photo .ct-att-pair img { min-height: 0; border-radius: 8px; }
.ct-attendance-photo .ct-att-pair .ct-attendance-photo-empty { min-height: 0; height: 100%; border-radius: 8px; }
.ct-attendance-photo .ct-attendance-photo-btn { display: block; width: 100%; height: 100%; }
/* v22.17: a missing attendance photo is shown as an icon only (reason on hover). */
.ct-att-shot-empty .material-icons-outlined { font-size: 22px; opacity: .55; }
.ct-pv-photos .ct-pv-nophoto .material-icons-outlined { font-size: 44px; opacity: .5; }

/* =====================================================================
   v22.21 — Certificate Templates: one consistent set of action icons
   Every action (Preview, Send, Edit, Archive/Restore, Delete) is the same
   40 x 40 rounded square with the same icon size and outline. Send is the
   primary (filled) action and Delete keeps a red tone; the rest share the
   neutral teal outline instead of mixed colours and widths.
   ===================================================================== */
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions form { display: inline-flex; margin: 0; }
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions :is(a, button):not(#ct-link) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-sizing: border-box !important;
    width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important;
    padding: 0 !important; gap: 0 !important; margin: 0 !important;
    border: 1px solid var(--ct-line-strong, #D3E0DA) !important; border-radius: 11px !important;
    background: var(--ct-surface, #FFFFFF) !important; color: var(--ct-accent, #0B4F4A) !important;
    box-shadow: none !important; font-size: 0 !important; line-height: 1 !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions :is(a, button):not(#ct-link) .material-icons-outlined {
    margin: 0 !important; font-size: 20px !important; line-height: 1 !important; color: inherit !important;
}
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions :is(a, button):not(#ct-link):hover {
    background: var(--ct-tint, #EEF5F1) !important; border-color: var(--ct-accent, #0B4F4A) !important;
}
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions .btn-approve:not(#ct-link) {
    background: var(--ct-accent, #0B4F4A) !important; border-color: var(--ct-accent, #0B4F4A) !important; color: #FFFFFF !important;
}
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions .btn-approve:not(#ct-link):hover { filter: brightness(1.08); }
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions .action-danger:not(#ct-link) {
    background: #FBEEEC !important; border-color: #EBC9C4 !important; color: #8B3A34 !important;
}
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions .action-danger:not(#ct-link):hover { background: #F6DEDA !important; border-color: #8B3A34 !important; }
/* the label text is kept for screen readers and the tooltip, never shown inline */
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions :is(a, button) > :not(.material-icons-outlined):not(.ct-sr) {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions [data-tip]::after { font-size: 12px; }
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions > :last-child [data-tip]::after,
html body:not(.login-body) .ct-cert-template footer.ct-cert-actions > [data-tip]:last-child::after { left: auto; right: 0; transform: none; }
:root[data-theme="dark"] body:not(.login-body) .ct-cert-template footer.ct-cert-actions :is(a, button):not(#ct-link):not(.btn-approve):not(.action-danger) {
    background: #173B39 !important; border-color: #2C5550 !important; color: #CFE6DF !important;
}
:root[data-theme="dark"] body:not(.login-body) .ct-cert-template footer.ct-cert-actions .action-danger:not(#ct-link) {
    background: #3A2321 !important; border-color: #6B3A35 !important; color: #F2B8B1 !important;
}