/*
 * UD theme — color scheme ported from /acc/admin/index.php.
 * Palette is exposed as CSS custom properties so future pages/components can
 * reuse the same tokens instead of hard-coding hex values.
 */
:root {
    /* Surfaces & text */
    --bg:            #1a1a1a;   /* page background (near-black) */
    --surface:       #242424;   /* raised surface: cards, panels */
    --border:        #3a3a3a;   /* subtle borders on dark surfaces */
    --text:          #e0e0e0;   /* default body text (light gray) */

    /* Brand / primary accent */
    --accent:        #1f487e;   /* dark blue — buttons, headers, theme-color */
    --accent-text:   #ffffff;

    /* Hover (inverts to light) */
    --hover-bg:      #e0e0e0;
    --hover-text:    #000000;

    /* Danger */
    --danger:        #cc0000;   /* admin badge */
    --danger-flash:  #ff1a1a;   /* attention/alert flash */

    /* Warning / alert surfaces */
    --warning-bg:     #fff3cd;
    --warning-border: #ffeeba;
    --warning-text:   #000000;

    /* Disabled */
    --disabled-bg:   #95a5a6;
    --disabled-text: #7f8c8d;

    /* Lines */
    --divider:        #333333;
    --divider-dotted: #cccccc;

    /* Misc */
    --modal-overlay: rgba(0, 0, 0, 0.6);
    --font-mono:     "Courier New", Courier, monospace;
    --radius:        4px;
}

* {
    font-family: var(--font-mono);
}

body {
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a {
    color: var(--text);
    text-decoration: none;
}
a:hover {
    color: var(--hover-bg);
    text-decoration: underline;
}

hr {
    height: 1px;
    border: none;
    color: var(--divider);
    background-color: var(--divider);
}

/* Primary button */
.btn {
    background-color: var(--accent);
    border: none;
    color: var(--accent-text);
    padding: 3px 4px;
    font-size: 17px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    min-width: 170px;
    text-align: center;
    border-radius: var(--radius);
}
.btn:hover {
    background-color: var(--hover-bg);
    color: var(--hover-text);
}
.btn-small {
    min-width: auto;
    padding: 4px 10px;
    font-size: 14px;
}
.btn-disabled {
    background-color: var(--disabled-bg);
    color: var(--disabled-text);
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

/* Red pill badge */
.badge {
    background-color: var(--danger);
    color: var(--accent-text);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.8em;
}

/* Warning / alert panel */
.alert {
    background-color: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius);
    padding: 8px 12px;
}

/* ---- Site chrome: header / main / footer ---- */
.site-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    background-color: #ffffff;
    border-bottom: 3px solid var(--accent);
    width: 100%;
    box-sizing: border-box;
}
.site-logo {
    height: 64px;
    width: auto;
    display: block;
    flex-shrink: 0;
}
.site-title {
    flex: 1;
    font-size: 1.7em;
    font-weight: bold;
    color: var(--accent);
    line-height: 1.2;
    text-align: center;
}

@media (max-width: 600px) {
    .site-header {
        flex-direction: column;
        text-align: center;
        padding: 12px 16px;
        gap: 8px;
    }
    .site-logo {
        height: 48px;
    }
    .site-title {
        font-size: 1.1em;
    }
    .btn {
        width: 100%;
        box-sizing: border-box;
        min-width: unset;
    }
    .menu {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }
    .login-card {
        padding: 20px 16px;
        max-width: 100%;
    }
    .site-main {
        padding: 16px;
    }
    .site-user {
        margin-left: 0;
        justify-content: center;
    }
}
.site-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 24px;
    box-sizing: border-box;
    min-height: 0;
}
.site-footer {
    flex-shrink: 0;
    padding: 8px 20px;
    border-top: 1px solid var(--border);
}
.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.page-title {
    margin: 0;
    color: var(--text);
}

/* ---- Admin / content pages ---- */
.site-main--content {
    justify-content: flex-start;
    align-items: stretch;
    padding: 24px;
}
.panel {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px;
    margin-bottom: 20px;
}
.panel h2 {
    margin: 0 0 16px;
    font-size: 1.1em;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}
.warning-text {
    color: var(--danger);
    font-weight: bold;
    margin-bottom: 12px;
}
.msg-success {
    background-color: #1a3a1a;
    color: #7ec87e;
    border: 1px solid #2d5a2d;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.msg-error {
    background-color: #3a1a1a;
    color: #e07e7e;
    border: 1px solid #5a2d2d;
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.form-group label {
    font-size: 0.85em;
    color: var(--text);
}
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"] {
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 15px;
    font-family: var(--font-mono);
    box-sizing: border-box;
}
.form-group input:focus {
    outline: none;
    border-color: var(--accent);
}
.input-error  { border-color: var(--danger) !important; }
.input-success { border-color: #3a7a3a !important; }
.field-warning {
    font-size: 0.8em;
    color: #e07e7e;
    display: none;
}
.field-warning.show { display: block; }
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 4px;
}
.radio-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
    cursor: pointer;
}
.btn-danger {
    background-color: var(--danger);
    border: none;
    color: #ffffff;
    padding: 8px 16px;
    font-size: 15px;
    cursor: pointer;
    border-radius: var(--radius);
    font-family: var(--font-mono);
    width: 100%;
    box-sizing: border-box;
}
.btn-danger:hover {
    background-color: #aa0000;
}
/* Dark-theme data table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}
.data-table th,
.data-table td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}
.data-table th {
    background-color: var(--accent);
    color: #ffffff;
    font-weight: bold;
}
.data-table tr:nth-child(even) td { background-color: #1f1f1f; }
.data-table tr:hover td { background-color: #2a2a2a; }
.role-god     { color: #f0b429; font-weight: bold; }
.role-admin   { color: #e67e22; font-weight: bold; }
.role-uo      { color: #58d68d; font-weight: bold; }
.role-teacher { color: #a569bd; font-weight: bold; }
.role-visitor { color: #aab7b8; font-weight: bold; }

/* ---- Header user identity ---- */
.site-user {
    font-size: 0.82em;
    color: #333333;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
}

/* ---- Date picker ---- */
.date-wrap {
    position: relative;
    display: inline-block;
    width: 130px;
}
.date-wrap .date-display {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding-right: 28px;
}
.date-wrap .date-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1em;
    color: var(--disabled-bg);
}
/* Anchored at the bottom of the wrap — showPicker() opens the calendar below the field */
.date-wrap input[type="date"] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    opacity: 0;
    pointer-events: none;
    border: none;
    padding: 0;
}

/* ---- Log / filter table ---- */
.data-table .filter-row th {
    background-color: var(--surface);
    padding: 6px 4px;
}
.filter-input {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 8px;
    font-size: 1em;
    font-family: var(--font-mono);
}
.filter-input:focus { outline: none; border-color: var(--accent); }
.filter-select {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 8px;
    font-size: 1em;
    font-family: var(--font-mono);
}
.log-success { color: #58d68d; font-weight: bold; }
.log-fail    { color: var(--danger); font-weight: bold; }
.log-null    { color: var(--disabled-bg); font-style: italic; }
.filter-bar  {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-bottom: 14px;
}
.filter-bar label { font-size: 0.95em; display: flex; flex-direction: column; gap: 3px; }
.badge-count {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.78em;
    margin-left: 6px;
}

@media (max-width: 600px) {
    .site-main--content { padding: 12px; }
    .data-table { font-size: 0.78em; }
    .data-table th, .data-table td { padding: 6px 8px; }
    .radio-group { flex-direction: column; gap: 8px; }
}

/* ---- Login form (inverted: light card on dark page) ---- */
.login-card {
    background-color: #f0f0f0;
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 28px 32px;
    width: 100%;
    max-width: 340px;
    box-sizing: border-box;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}
.login-card h1 {
    margin: 0 0 4px;
    font-size: 1.4em;
    color: #111111;
}
.login-card .sub {
    margin: 0 0 20px;
    color: #555555;
    font-size: 0.85em;
}
.form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 14px;
}
.form-row label {
    font-size: 0.85em;
    color: #111111;
}
.form-row input {
    background-color: #ffffff;
    color: #111111;
    border: 1px solid #bbbbbb;
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 15px;
    font-family: var(--font-mono);
}
.form-row input:focus {
    outline: none;
    border-color: var(--accent);
}
.login-card .btn {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 8px;
}
.back-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 0.8em;
    color: #333333;
    text-decoration: none;
}
.back-link:hover {
    text-decoration: underline;
}

/* ---- Admin layout utilities (replace all inline styles) ---- */
.h2-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.btn-row    { display:flex; gap:8px; align-items:center; }
.form-inline { margin:0; }
.menu--start { justify-content:flex-start; margin-top:16px; }
.panel-sm   { max-width:420px; margin:0 auto; }
.panel-md   { max-width:520px; margin:0 auto; }
.panel-flush { margin-top:0; }
.overflow-x { overflow-x:auto; }
.nowrap     { white-space:nowrap; }
.cell-ua    { font-size:0.85em; word-break:break-all; }
.cell-empty { text-align:center; color:var(--disabled-bg); }
.text-center { text-align:center; }
.label-end  { justify-content:flex-end; }
.hint       { color:var(--disabled-bg); }
.btn-submit { width:100%; padding:8px; margin-top:4px; }
.filter-input--sm  { width:120px; }
.filter-input--lg  { width:180px; }
.filter-select--sm { width:120px; }