/* ==========================================================================
   ALO GS MAK - Enterprise Admin Dashboard & Campaign Operations Console
   Brand Visual Direction:
   - Dark green shell (#064E3B, #043F31)
   - Mint workspace (#EDF6F1, #F1F8F4)
   - White content surfaces (#FFFFFF)
   - Emerald green primary actions (#087A55, #0A8F5A)
   - Low shadow, clean borders (#DCE7E1), high density & readability
   ========================================================================== */

:root {
    /* Primary dark greens */
    --green-950: #043F31;
    --green-900: #064E3B;
    --green-700: #087A55;
    --green-600: #0A8F5A;
    --green-hover: #08764B;
    --green-100: #DDF5E9;
    --green-50: #F1F8F4;

    /* Backgrounds & surfaces */
    --bg-page: #EDF6F1;
    --bg-mint: #F1F8F4;
    --surface: #FFFFFF;
    --surface-secondary: #F7FAF8;

    /* Borders */
    --border: #DCE7E1;
    --border-strong: #CBDAD2;
    --border-subtle: #E7EEEA;

    /* Typography */
    --text-primary: #111827;
    --text-secondary: #667085;
    --text-muted: #8A9490;

    /* States & Badges */
    --draft-bg: #EEF1F2;
    --draft-text: #667085;
    --success-bg: #DDF7E9;
    --success: #078950;
    --danger: #D64545;
    --danger-bg: #FDE8E8;
    --warning: #C97910;
    --warning-bg: #FEF3C7;

    /* Brand Accent (Strictly limited to MAK logo badge) */
    --brand-gold-border: #F59E0B;
    --brand-gold-text: #FBBF24;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 8px rgba(16, 24, 40, 0.04);
    --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.04);

    /* Fonts */
    --font-sans: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 0;
}

:focus-visible {
    outline: 3px solid var(--green-600);
    outline-offset: 3px;
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 16px;
    z-index: 200;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--green-950);
    transform: translateY(-150%);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ==========================================================================
   Top Header
   ========================================================================== */
.topbar {
    height: 64px;
    flex-shrink: 0;
    background: var(--green-900);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(4, 63, 49, 0.2);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border: 1.5px solid var(--brand-gold-border);
    border-radius: var(--radius-sm);
    color: var(--brand-gold-text);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
    line-height: 1.2;
}

.org {
    color: #D1E7DD;
    font-size: 14px;
    font-weight: 500;
}

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

.topbar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    cursor: default;
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D1E7DD;
}

.user-avatar svg {
    width: 17px;
    height: 17px;
}

.user-name {
    font-weight: 600;
    color: #FFFFFF;
}

.topbar-logout-form { margin: 0; display: inline-flex; }
.topbar-logout-form button { font: inherit; cursor: pointer; }
.topbar-logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-sm);
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.topbar-logout:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
}

.logout-svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
}

/* ==========================================================================
   Sidebar & App Shell Layout
   ========================================================================== */
.layout {
    display: flex;
    min-height: calc(100vh - 64px);
}

.sidebar {
    width: 236px;
    background: var(--green-950);
    flex-shrink: 0;
    padding: 16px 0;
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin: 2px 12px;
    border-radius: var(--radius-md);
    color: #B5D6C5;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.sidebar a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}

.sidebar a.is-active, .sidebar a[aria-current="page"] {
    background: #0A684D;
    color: #FFFFFF;
    font-weight: 600;
}

.sidebar .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    stroke: currentColor;
}

.content {
    flex: 1;
    padding: 24px 32px 48px;
    max-width: 1600px;
    min-width: 0;
    background: var(--bg-page);
}

/* ==========================================================================
   Page Header
   ========================================================================== */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-title-group {
    min-width: 0;
}

.page-title {
    margin: 0;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.page-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--text-secondary);
    font-size: 13.5px;
}

.page-sub-icon {
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.25;
}

.btn[aria-disabled="true"] {
    opacity: 0.65;
    cursor: wait;
    pointer-events: none;
}

.submit-status {
    margin: 8px 0 0;
    color: var(--green-700);
    font-size: 13px;
}

.btn-primary, .btn:not(.btn-outline):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.btn-manage):not(.secondary) {
    background: var(--green-700);
    color: #FFFFFF;
    border-color: var(--green-700);
}

.btn-primary:hover, .btn:not(.btn-outline):not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.btn-manage):not(.secondary):hover {
    background: var(--green-hover);
    border-color: var(--green-hover);
    color: #FFFFFF;
}

.btn-outline {
    background: #FFFFFF;
    border-color: var(--green-700);
    color: var(--green-700);
}

.btn-outline:hover {
    background: #EDF8F3;
    border-color: var(--green-hover);
    color: var(--green-hover);
}

.btn.secondary, .btn-secondary {
    background: #FFFFFF;
    border-color: #9ECBB8;
    color: var(--green-700);
}

.btn.secondary:hover, .btn-secondary:hover {
    background: #EDF8F3;
    color: var(--green-hover);
}

.btn-ghost {
    background: transparent;
    border-color: var(--green-700);
    color: var(--green-700);
}

.btn-ghost:hover {
    background: #EDF8F3;
}

.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #FFFFFF;
}

.btn-danger:hover {
    background: #B93636;
    border-color: #B93636;
}

.btn-manage {
    background: #FFFFFF;
    border: 1px solid #9ECBB8;
    color: var(--green-700);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-manage:hover {
    background: #EDF8F3;
    border-color: var(--green-700);
    color: var(--green-hover);
}

.btn-block {
    width: 100%;
}

.btn-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   KPI Summary
   ========================================================================== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 104px;
}

.kpi-icon-box {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: #E4F6ED;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-700);
    flex-shrink: 0;
}

.kpi-icon-box svg {
    width: 24px;
    height: 24px;
}

.kpi-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.kpi-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.2;
}

.kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Cards & Layout Grids
   ========================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
}

.dash-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-grid .card, .dash-side .card {
    margin-bottom: 0;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.card-head-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-head-title h2, .card-head-simple h2, .card-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.card-head-icon {
    width: 20px;
    height: 20px;
    color: var(--green-700);
    flex-shrink: 0;
}

.card-head-simple {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.side-head-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.card-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--green-700);
    text-decoration: none;
    transition: color 0.15s;
}

.card-link:hover {
    color: var(--green-hover);
    text-decoration: underline;
}

/* ==========================================================================
   Campaign Table
   ========================================================================== */
.table-wrap {
    overflow-x: auto;
}

.dash-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.dash-table th {
    background: #F5F9F7;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.dash-table td {
    padding: 14px 10px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    font-size: 14px;
    color: var(--text-primary);
}

.dash-table tbody tr:hover {
    background: #F7FBF9;
}

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

.cell-campaign {
    min-width: 190px;
}

.cell-title {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.cell-sub {
    display: block;
    font-size: 13px;
    color: #7B8781;
    margin-top: 3px;
}

.cell-rounds {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}

.dash-table .num {
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-weight: 500;
}

.actions-header, .actions-col {
    text-align: right;
    padding-right: 10px;
    width: 1%;
    white-space: nowrap;
}

.actions-cell {
    text-align: right;
}

.row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* ==========================================================================
   Status Pills & Badges
   ========================================================================== */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.2;
}

.pill-dot {
    font-size: 8px;
    line-height: 1;
}

.pill-active, .pill-open {
    background: var(--success-bg);
    color: var(--green-700);
}

.pill-draft, .pill-closed {
    background: var(--draft-bg);
    color: var(--draft-text);
}

.pill-warn {
    background: var(--warning-bg);
    color: var(--warning);
}

.pill-bad {
    background: var(--danger-bg);
    color: var(--danger);
}

/* ==========================================================================
   Next Draw Card
   ========================================================================== */
.card-next-round {
    padding: 20px;
}

.next-inner-card {
    background: var(--bg-mint);
    border: 1px solid #CFEBDD;
    border-left: 3px solid #18A66A;
    border-radius: var(--radius-sm);
    padding: 18px 16px;
}

.next-inner-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.next-kicker {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.next-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
}

.next-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.next-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13.5px;
    gap: 12px;
}

.meta-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-weight: 500;
}

.meta-label svg {
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.meta-val {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.next-action-wrap {
    margin-top: 4px;
}

.btn-draw {
    width: 100%;
    justify-content: center;
    height: 42px;
    font-size: 14px;
    font-weight: 600;
}

.btn-draw::before {
    content: "▶ ";
    font-size: 11px;
    margin-right: 4px;
}

.next-empty-box {
    background: var(--bg-mint);
    border: 1px solid #CFEBDD;
    border-radius: var(--radius-sm);
    padding: 18px;
    text-align: center;
}

.next-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.next-empty-hint {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0 0 16px;
    line-height: 1.4;
}

/* ==========================================================================
   Activity Timeline
   ========================================================================== */
.card-activity {
    padding: 20px;
}

.activity-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.activity-timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: #DDE6E1;
}

.timeline-item {
    display: flex;
    gap: 14px;
    padding: 10px 0;
    position: relative;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
    background: #CBDAD2;
    border: 2px solid var(--surface);
    z-index: 1;
}

.timeline-dot.dot-ok {
    background: #087A55;
}

.timeline-dot.dot-bad {
    background: #D64545;
}

.timeline-dot.dot-idle {
    background: #8A9490;
}

.timeline-body {
    flex: 1;
    min-width: 0;
}

.timeline-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.timeline-meta {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* ==========================================================================
   Global Form Controls & GridView
   ========================================================================== */
.field {
    margin: 14px 0;
}

.field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.field input:not([type]),
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="date"],
.field input[type="password"],
.field input[type="number"],
.field input[type="datetime-local"],
.field input[type="file"],
.field select,
.field textarea {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid #CDDAD3;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.field textarea {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--green-600);
    box-shadow: 0 0 0 3px rgba(10, 143, 90, 0.12);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 0 16px;
}

.form-grid .field {
    min-width: 0;
}

table.table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-top: 14px;
}

table.table th {
    background: #F5F9F7;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 14px;
    border: 1px solid var(--border);
    text-align: left;
}

table.table td {
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 14px;
    vertical-align: middle;
}

table.table tr:hover {
    background: #F7FBF9;
}

table.table a:not(.btn) {
    color: var(--green-700);
    font-weight: 600;
    text-decoration: none;
}

table.table a:not(.btn):hover {
    text-decoration: underline;
    color: var(--green-hover);
}

.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin: 14px 0;
    font-size: 14px;
    font-weight: 500;
}

.alert-error {
    background: var(--danger-bg);
    color: #9B1C1C;
    border: 1px solid #F8B4B4;
}

.alert-success {
    background: var(--success-bg);
    color: var(--green-700);
    border: 1px solid #A7F3D0;
}

.alert-warning {
    background: #FFF7E0;
    color: #7A5200;
    border: 1px solid #F3D78A;
}

.empty {
    padding: 24px 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.error {
    color: var(--danger);
    font-size: 13.5px;
    font-weight: 500;
    margin: 8px 0;
}

.help {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.4;
}

/* ==========================================================================
   Authentication Pages (Login / Logout)
   ========================================================================== */
.auth-page {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--green-900);
    font-family: var(--font-sans);
    color: var(--text-primary);
    padding: 24px;
}

.auth-shell {
    width: min(420px, 100%);
}

.auth-hero {
    text-align: center;
    margin-bottom: 24px;
}

.auth-wordmark {
    display: inline-block;
    padding: 6px 18px;
    border: 2px solid var(--brand-gold-border);
    border-radius: var(--radius-sm);
    color: var(--brand-gold-text);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.12em;
    background: rgba(0, 0, 0, 0.2);
}

.auth-org {
    margin: 10px 0 0;
    color: #D1E7DD;
    font-size: 14px;
    font-weight: 500;
}

.auth-card {
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.auth-card h1 {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.auth-card .help {
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 13.5px;
}

.auth-card .auth-remember {
    margin: 12px 0 20px;
    font-size: 13.5px;
    color: var(--text-secondary);
}

.auth-card .auth-remember label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
}

.auth-card .auth-remember input {
    width: 17px;
    height: 17px;
    accent-color: var(--green-700);
}

.auth-submit {
    width: 100%;
    height: 44px;
    margin-top: 8px;
}

.auth-error {
    display: block;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    border: 1px solid #F8B4B4;
    color: #9B1C1C;
    font-size: 13.5px;
    font-weight: 500;
}

.auth-error:empty {
    display: none;
}

/* ==========================================================================
   Utilities still used by individual admin pages (DrawRoundAllocation, RolePermissions, grids)
   ========================================================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.muted {
    color: var(--text-secondary);
}

.pager {
    margin-top: 10px;
}

.kpi-sub {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1200px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        padding: 10px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .sidebar nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }
    .sidebar a {
        margin: 2px 4px;
        padding: 8px 12px;
        font-size: 13px;
    }
    .content {
        padding: 16px;
    }
    .kpi-grid {
        grid-template-columns: 1fr;
    }
    .topbar {
        height: auto;
        min-height: 64px;
        padding: 12px 16px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .topbar-right {
        gap: 8px;
        flex-wrap: wrap;
    }
    .user-name {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .card {
        padding: 16px;
    }
    .lifecycle-pane {
        min-width: 0;
    }
    .lookup-result {
        overflow-wrap: anywhere;
    }
    .org {
        display: none;
    }
    .table-wrap {
        overflow-x: auto;
    }
    .page-title {
        font-size: 24px;
    }
}

/* ==========================================================================
   Sidebar stays put while a long page scrolls (all admin pages)
   ========================================================================== */
.sidebar {
    position: sticky;
    top: 64px;
    align-self: flex-start;
    height: calc(100vh - 64px);
    overflow-y: auto;
}

@media (max-width: 768px) {
    .sidebar {
        position: static;
        height: auto;
        align-self: stretch;
        overflow: visible;
    }
}

@media (max-width: 480px) {
    .topbar-right {
        width: 100%;
        justify-content: space-between;
    }
    .topbar-logout {
        padding: 8px;
    }
    .topbar-user {
        gap: 6px;
        min-width: 0;
    }
    .user-name {
        max-width: 90px;
    }
    .sidebar nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sidebar a {
        margin: 0;
        gap: 8px;
        padding: 10px 8px;
        min-height: 44px;
    }
    .sidebar a span {
        min-width: 0;
    }
    .field input, .field select, .field textarea {
        font-size: 16px;
    }
}

/* ==========================================================================
   Dashboard on ONE screen (desktop): the page itself does not scroll. The campaign table and the
   activity list scroll inside their own cards when there is more than fits. Small screens keep
   the normal flowing layout.
   ========================================================================== */
@media (min-width: 1201px) and (min-height: 620px) {
    body:has(.dash-fit, .list-fit) {
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    body:has(.dash-fit, .list-fit) > form {
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    body:has(.dash-fit, .list-fit) .layout {
        flex: 1;
        min-height: 0;
    }

    body:has(.dash-fit, .list-fit) .sidebar {
        position: static;
        height: auto;
        align-self: stretch;
    }

    body:has(.dash-fit, .list-fit) .content {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        padding: 18px 28px 20px;
    }

    .dash-fit, .dash-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .dash-fit .page-head {
        flex: none;
        margin-bottom: 14px;
    }

    .dash-fit .page-title {
        font-size: 26px;
    }

    .dash-fit .kpi-grid {
        flex: none;
        margin-bottom: 14px;
        gap: 14px;
    }

    .dash-fit .kpi-card {
        padding: 12px 18px;
    }

    .dash-fit .dash-grid {
        flex: 1;
        min-height: 0;
        gap: 14px;
        align-items: stretch;
        grid-template-rows: minmax(0, 1fr);
    }

    .dash-fit .dash-main {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 16px 20px;
    }

    .dash-fit .card-head {
        margin-bottom: 10px;
    }

    .dash-fit .table-wrap {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }

    .dash-fit .dash-table th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .dash-fit .dash-table td {
        padding: 10px;
    }

    .dash-fit .dash-side {
        min-height: 0;
        gap: 14px;
    }

    .dash-fit .card-next-round {
        flex: none;
        padding: 16px 20px;
    }

    .dash-fit .next-inner-card, .dash-fit .next-empty-box {
        padding: 14px;
    }

    .dash-fit .next-inner-top {
        margin-bottom: 10px;
    }

    .dash-fit .next-meta-list {
        gap: 8px;
        margin-bottom: 14px;
    }

    .dash-fit .card-head-simple {
        margin-bottom: 10px;
    }

    .dash-fit .card-activity {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 16px 20px;
    }

    .dash-fit .activity-timeline {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .dash-fit .timeline-item {
        padding: 5px 0;
    }
}

@media (min-width: 1201px) and (max-width: 1440px) and (min-height: 620px) {
    .dash-fit .dash-grid {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .dash-fit .cell-campaign {
        min-width: 150px;
    }

    .dash-fit .dash-table th, .dash-fit .dash-table td {
        padding-left: 6px;
        padding-right: 6px;
    }

    .dash-fit .dash-table .btn-manage {
        padding: 5px 10px;
    }

    body:has(.dash-fit, .list-fit) .content {
        padding: 16px 20px 18px;
    }
}

/* ==========================================================================
   List pages (Cơ cấu giải, Mã dự thưởng): header + filters stay put, the table scrolls inside the card,
   and a page selector sits under it. Same one-screen shell as the dashboard on desktop.
   ========================================================================== */
.list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.list-head h1 {
    margin: 0;
    font-size: 26px;
    letter-spacing: -0.02em;
}

.list-head select {
    max-width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--text-primary);
    font: inherit;
}

.list-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 16px;
}

.list-filters .field {
    margin: 8px 0;
}

.list-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
}

.list-actions .help {
    margin: 0 0 0 6px;
    flex: 1;
    min-width: 240px;
}

.form-compact {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 14px;
}

.form-compact .field {
    margin: 8px 0;
}

.form-compact .field-wide {
    grid-column: span 2;
}

.form-compact .field textarea {
    height: 42px;
    min-height: 42px;
    resize: none;
}

.list-scroll {
    overflow-x: auto;
}

.list-scroll table.table {
    margin-top: 0;
}

/* Page selector */
.pager-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    flex-wrap: wrap;
    padding-top: 12px;
    flex: none;
}

.pager-info {
    font-size: 13.5px;
    color: var(--text-secondary);
}

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

.pager-size {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.pager-size label {
    margin: 0;
    font-weight: 500;
}

.pager-size select {
    width: auto;
    height: 34px;
    padding: 4px 8px;
    border: 1px solid #CDDAD3;
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text-primary);
}

.pager-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pager-pages a, .pager-pages span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
    color: var(--text-primary);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pager-pages a.pager-btn:hover {
    background: #EDF8F3;
    border-color: #9ECBB8;
    color: var(--green-700);
}

.pager-pages .is-current {
    background: var(--green-700);
    border-color: var(--green-700);
    color: #FFFFFF;
}

.pager-pages [aria-disabled="true"] {
    opacity: 0.4;
}

.pager-pages .pager-gap {
    min-width: 20px;
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
}

@media (min-width: 1201px) and (min-height: 620px) {
    .list-fit {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    .list-fit > .card {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        padding: 16px 22px;
    }

    .list-fit .list-scroll {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }

    .list-fit .list-scroll table.table th {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .list-fit .list-scroll table.table th, .list-fit .list-scroll table.table td {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .perm-form {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }
}


/* ==========================================================================
   Phân quyền, báo cáo, tổng cộng
   ========================================================================== */
.perm-intro {
    margin: 0 0 10px;
}

.perm-guard {
    margin: 0 0 12px;
    padding: 10px 14px;
    background: #FFF8E6;
    border: 1px solid #FFD591;
    color: #7A4A00;
    font-size: 13.5px;
}

.perm-table th.perm-role-col, .perm-table td.perm-check {
    text-align: center;
    width: 120px;
}

.perm-table th.perm-name-col {
    min-width: 200px;
}

.perm-table td.perm-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
}

.perm-required {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    background: #FFF1D6;
    color: #9A5B00;
    font-size: 11.5px;
    font-weight: 700;
}

.perm-actions {
    margin-top: 12px;
    flex-shrink: 0;
}

.perm-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--green-700);
}

@media (max-width: 767.98px) {
    .perm-table input[type="checkbox"] {
        width: 24px;
        height: 24px;
    }

    .perm-table td.perm-check {
        min-width: 44px;
        text-align: center;
    }
}

table.table .num, table.table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.table tr.table-total td, table.table td.table-total, table.table tfoot td {
    font-weight: 700;
    background: #F5F9F7;
    border-top: 2px solid var(--border-strong);
}

.report-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #FFFFFF;
}

.report-tabs a {
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
}

.report-tabs a:hover {
    color: var(--green-700);
}

.report-tabs a.is-current {
    background: var(--green-700);
    color: #FFFFFF;
}

/* Long text in a table cell (e.g. campaign version label): one line, full text on hover */
.cell-clip {
    display: inline-block;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Several actions in one table cell */
.row-links {
    display: inline-flex;
    gap: 14px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.row-links a {
    color: var(--green-700);
    font-weight: 600;
    text-decoration: none;
}

.row-links a:hover {
    text-decoration: underline;
    color: var(--green-hover);
}

.list-scroll table.table th {
    white-space: nowrap;
}

.list-scroll table.table td:first-child {
    white-space: nowrap;
}

/* Kích hoạt chiến dịch: conditions and rounds side by side on desktop, stacked on small screens */
.lifecycle-help {
    margin: 0 0 6px;
}

.status-line {
    margin: 8px 0 0;
    font-weight: 700;
    color: var(--text-primary);
}

.lifecycle-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

.lifecycle-pane h2 {
    margin: 4px 0 8px;
    font-size: 17px;
}

.lifecycle-pane .form-actions {
    margin-top: 10px;
}

@media (min-width: 1201px) and (min-height: 620px) {
    .lifecycle-grid {
        flex: 1;
        min-height: 0;
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .lifecycle-pane {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .lifecycle-pane .list-scroll {
        flex: 1;
        min-height: 0;
    }
}

.lifecycle-pane table.table th, .lifecycle-pane table.table td {
    padding-left: 9px;
    padding-right: 9px;
}

@media (max-width: 1200px) {
    .lifecycle-pane table.table {
        min-width: 640px;
    }
}

.lifecycle-pane .alert {
    margin: 8px 0;
    padding: 8px 12px;
}

.lifecycle-pane .btn.secondary {
    padding: 6px 12px;
    font-size: 13px;
    white-space: nowrap;
}

/* Point distribution page: member lookup result and a muted tag for blocked dealers. */
.lookup-result {
    margin: 8px 0 14px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--success-bg);
    border: 1px solid #A7F3D0;
    font-size: 13px;
    line-height: 1.6;
}

.badge-muted {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #f1f1f1;
    color: #666;
    font-size: 11px;
}

/* Razor administration: preserve readable tables while narrow screens scroll inside the card. */
.perm-table { min-width: 1000px; }
.perm-table .perm-desc { min-width: 220px; }
.result-hash { overflow-wrap: anywhere; font-family: monospace; }
.record-details { display: grid; grid-template-columns: minmax(100px, 180px) minmax(0, 1fr); gap: 8px 16px; }
.record-details dt { font-weight: 700; }
.record-details dd { margin: 0; overflow-wrap: anywhere; }
.content fieldset { min-width: 0; border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.content fieldset:disabled { opacity: .8; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 1200px) {
    .content .list-scroll table.table { min-width: 640px; }
    .content .list-scroll table.perm-table { min-width: 1000px; }
}

.detail-list {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 8px 16px;
    margin: 16px 0;
}

.detail-list dt {
    color: var(--muted, #5b6770);
    font-weight: 600;
}

.detail-list dd {
    margin: 0;
}

@media (max-width: 575.98px) {
    .detail-list {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .detail-list dd {
        margin-bottom: 8px;
    }
}

/* Import pages: drop zone around the file input (the native input stays on top, transparent, so click, drop and validation keep working). */
.dropzone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 84px; padding: 12px 16px;
    border: 2px dashed #CDDAD3; border-radius: var(--radius-sm); background: var(--green-50); text-align: center; transition: border-color .15s, background .15s; }
.dropzone-hint { color: var(--text-secondary, #4B5D54); font-size: 14px; pointer-events: none; overflow-wrap: anywhere; }
.dropzone .dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: 0; }
.dropzone:focus-within { outline: 3px solid var(--green-600); outline-offset: 2px; }
.dropzone-over { border-color: var(--green-600); background: var(--green-100); }
.dropzone-has-file { border-style: solid; border-color: var(--green-600); }
.dropzone-has-file .dropzone-hint { color: var(--green-900); font-weight: 600; }
.dropzone-bad { border-color: #B42318; background: #FEF3F2; }
.dropzone-bad .dropzone-hint { color: #B42318; }
.results-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 8px 0; }

/* Create-staff form: login method / scope choices and the search-and-pick list of dealers */
.field input[type="search"] {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 8px 12px;
    border: 1px solid #CDDAD3;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-family: inherit;
    background: #FFFFFF;
    outline: none;
}

.field input[type="search"]:focus {
    border-color: var(--green-600);
    box-shadow: 0 0 0 3px rgba(10, 143, 90, 0.12);
}

fieldset.field {
    border: 0;
    padding: 0;
    margin: 14px 0;
    min-width: 0;
}

fieldset.field legend {
    padding: 0;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.inline-choice {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    font-weight: 500 !important;
    cursor: pointer;
}

.inline-choice input {
    width: 16px;
    height: 16px;
    margin: 0;
}

#dealerPicker {
    grid-column: 1 / -1;
}

#dealerPicker[hidden] {
    display: none;
}

.dealer-pick-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.dealer-pick-list {
    list-style: none;
    margin: 6px 0 12px;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #FFFFFF;
}

.dealer-pick-list li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-subtle);
}

.dealer-pick-list li:last-child {
    border-bottom: 0;
}

.dealer-pick-list li:not(:has(button)) {
    padding: 10px 12px;
    color: var(--text-muted);
}

.dealer-pick-item {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
}

.dealer-pick-item:hover,
.dealer-pick-item:focus-visible {
    background: #EDF6F1;
    outline: none;
}

.dealer-pick-chosen {
    min-height: 44px;
    background: #F7FBF9;
}

.dealer-pick-chosen:empty::before {
    content: "Chưa chọn đại lý nào";
    display: block;
    padding: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.field select[multiple] {
    height: auto;
    min-height: 120px;
}