/* ============================================================
   Rupiyo Superadmin · design system
   ============================================================ */
:root {
    --r-primary: #6366f1;
    --r-primary-600: #4f46e5;
    --r-primary-700: #4338ca;
    --r-primary-50: #eef2ff;
    --r-accent: #06b6d4;

    --r-bg: #f6f7fb;
    --r-surface: #ffffff;
    --r-border: #e6e8ef;
    --r-border-strong: #d1d5db;
    --r-text: #0f172a;
    --r-text-muted: #64748b;
    --r-text-subtle: #94a3b8;

    --r-success: #10b981;
    --r-success-bg: #ecfdf5;
    --r-danger: #ef4444;
    --r-danger-bg: #fef2f2;
    --r-warning: #f59e0b;
    --r-warning-bg: #fffbeb;
    --r-info: #3b82f6;
    --r-info-bg: #eff6ff;

    --r-radius-sm: 6px;
    --r-radius: 10px;
    --r-radius-lg: 14px;
    --r-radius-xl: 20px;

    --r-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --r-shadow: 0 2px 6px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --r-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
    --r-shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);

    --r-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --r-gradient-soft: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #fdf2f8 100%);
}

* { box-sizing: border-box; }

/* ASP.NET inserts <div class="aspNetHidden"> wrapping __VIEWSTATE etc.
   Hide it so it never appears as a visible/grid item. */
.aspNetHidden { display: none !important; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--r-text);
    background: var(--r-bg);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--r-primary-600); text-decoration: none; transition: color .15s; }
a:hover { color: var(--r-primary-700); }

/* ===== Admin layout ====================================== */
.admin-shell { display: flex; flex-direction: column; min-height: 100vh; }

/* Top navigation bar */
.admin-topbar {
    background: var(--r-surface);
    border-bottom: 1px solid var(--r-border);
    box-shadow: var(--r-shadow-sm);
    position: sticky; top: 0; z-index: 50;
}
.admin-topbar-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    height: 64px;
}

/* Row 2: dedicated nav row below the logo. Gives us horizontal space to grow as
   the menu list expands. Has its own faint divider on top so it visually separates
   from the brand row. */
.admin-nav-row {
    border-top: 1px solid var(--r-border);
    background: var(--r-surface);
}
.admin-nav-row .admin-nav {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 28px;
    height: 48px;
    margin-left: auto;   /* override the legacy single-row left margin */
}

.admin-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; font-size: 16px;
    color: var(--r-text);
}
.admin-brand img { height: 32px; width: auto; }
.admin-brand .brand-mark {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--r-gradient);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 14px;
    letter-spacing: 0.5px;
}

.admin-nav {
    display: flex; align-items: center; gap: 2px;
    flex-wrap: wrap;
}
.admin-nav a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--r-text-muted);
    font-weight: 500; font-size: 13.5px;
    transition: background .15s, color .15s;
    position: relative;
}
.admin-nav a:hover { background: var(--r-primary-50); color: var(--r-primary-700); }
.admin-nav a.active {
    background: var(--r-primary-50);
    color: var(--r-primary-700);
    font-weight: 600;
}
.admin-nav a.active::after {
    content: '';
    position: absolute; left: 14px; right: 14px; bottom: -8px;
    height: 2px;
    background: var(--r-primary);
    border-radius: 2px 2px 0 0;
}

/* Nav dropdowns (Masters / Reports / Settings)
   Hover bridging: a 14px tall ::after pseudo-element sits between the trigger and the
   visible dropdown. Because the ::after is part of .nav-group, hovering it keeps
   :hover active so the cursor can cross the gap into the dropdown without it closing. */
.nav-group { position: relative; }
.nav-group-toggle { user-select: none; cursor: pointer; }
.nav-group-toggle .caret {
    font-size: 9px; margin-left: 2px; opacity: 0.7;
    transition: transform .15s;
}
.nav-group.open .nav-group-toggle .caret { transform: rotate(180deg); }
.nav-group.open .nav-group-toggle,
.nav-group:hover .nav-group-toggle {
    background: var(--r-primary-50);
    color: var(--r-primary-700);
}

/* Invisible bridge so the cursor never leaves .nav-group while moving onto the dropdown */
.nav-group:hover::after,
.nav-group.open::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    height: 14px;
    z-index: 59;
}

.nav-dropdown {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--r-border);
    border-radius: 10px;
    box-shadow: var(--r-shadow-lg);
    padding: 6px;
    display: none;
    z-index: 60;
}
.nav-dropdown::before {
    content: '';
    position: absolute; top: -6px; left: 20px;
    width: 12px; height: 12px;
    background: #fff;
    border-top: 1px solid var(--r-border);
    border-left: 1px solid var(--r-border);
    transform: rotate(45deg);
}
.nav-group:hover .nav-dropdown,
.nav-group.open .nav-dropdown { display: block; animation: ddIn .15s ease-out; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.nav-dropdown a {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    color: var(--r-text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s;
}
.nav-dropdown a:hover { background: var(--r-primary-50); color: var(--r-primary-700); }

/* Level 2+ - side-flyout submenu inside a dropdown. */
.nav-subgroup { position: relative; }
.nav-submenu-toggle {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px !important;
    border-radius: 6px;
    color: var(--r-text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s;
    cursor: pointer;
    user-select: none;
}
.nav-subgroup .caret-right {
    font-size: 10px;
    margin-left: 10px;
    opacity: 0.55;
    transition: transform .15s;
}
.nav-subgroup:hover .nav-submenu-toggle,
.nav-subgroup.open .nav-submenu-toggle,
.nav-submenu-toggle.active {
    background: var(--r-primary-50);
    color: var(--r-primary-700);
}
.nav-subgroup:hover .caret-right,
.nav-subgroup.open .caret-right { opacity: 0.9; }

.nav-submenu {
    position: absolute;
    top: -7px;            /* aligns with parent row (offsets dropdown's 6px padding + 1px border) */
    left: 100%;           /* flush right edge - no gap to cross */
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--r-border);
    border-radius: 10px;
    box-shadow: var(--r-shadow-lg);
    padding: 6px;
    display: none;
    z-index: 70;
}
.nav-submenu::before {
    content: '';
    position: absolute; top: 14px; left: -6px;
    width: 12px; height: 12px;
    background: #fff;
    border-bottom: 1px solid var(--r-border);
    border-left: 1px solid var(--r-border);
    transform: rotate(45deg);
}
.nav-subgroup:hover > .nav-submenu,
.nav-subgroup.open > .nav-submenu {
    display: block;
    animation: ddIn .15s ease-out;
}
.nav-submenu a {
    display: block;
    padding: 9px 14px;
    border-radius: 6px;
    color: var(--r-text);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .12s;
}
.nav-submenu a.active {
    background: var(--r-primary-50);
    color: var(--r-primary-700);
}
.nav-submenu a:hover { background: var(--r-primary-50); color: var(--r-primary-700); }

/* Mobile: stack submenus instead of flying out to the side */
@media (max-width: 900px) {
    .nav-submenu {
        position: static;
        margin: 4px 0 4px 16px;
        box-shadow: none;
        border-radius: 6px;
    }
    .nav-submenu::before { display: none; }
}

.admin-user {
    display: flex; align-items: center; gap: 12px;
}
.admin-user .user-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    transition: background .12s;
}
.admin-user .user-chip:hover { background: var(--r-primary-50); }
.admin-user .avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--r-gradient);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px;
}
.admin-user .meta { display: flex; flex-direction: column; line-height: 1.2; }
.admin-user .user-name { font-weight: 600; font-size: 13.5px; color: var(--r-text); }
.admin-user .user-role { font-size: 11.5px; color: var(--r-text-muted); }
.admin-user .logout-link {
    margin-left: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid var(--r-border);
    color: var(--r-text-muted);
    font-size: 13px;
    transition: all .15s;
}
.admin-user .logout-link:hover {
    border-color: var(--r-danger);
    background: var(--r-danger-bg);
    color: var(--r-danger);
}

/* Page header (under topbar) */
.page-header {
    background: var(--r-surface);
    border-bottom: 1px solid var(--r-border);
}
.page-header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 28px;
}
.page-header .eyebrow {
    color: var(--r-text-subtle);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin: 0 0 4px;
}
.page-header h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--r-text); }

/* Content area */
.admin-content {
    flex: 1;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 28px 56px;
}

/* ===== Panels / cards ===================================== */
.panel {
    background: var(--r-surface);
    border: 1px solid var(--r-border);
    border-radius: var(--r-radius);
    box-shadow: var(--r-shadow);
    margin-bottom: 20px;
    overflow: hidden;
}
.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--r-border);
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
    background: linear-gradient(180deg, #fafbff 0%, #ffffff 100%);
}
.panel-header h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--r-text); }
.panel-body { padding: 20px; }

/* ===== Metric cards ====================================== */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}
.metric-card {
    position: relative;
    background: var(--r-surface);
    border: 1px solid var(--r-border);
    border-radius: var(--r-radius);
    padding: 20px;
    box-shadow: var(--r-shadow);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
}
.metric-card:hover { transform: translateY(-2px); box-shadow: var(--r-shadow-md); }
.metric-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--r-primary);
}
.metric-card.accent-success::before { background: var(--r-success); }
.metric-card.accent-danger::before  { background: var(--r-danger); }
.metric-card.accent-warning::before { background: var(--r-warning); }
.metric-card.accent-info::before    { background: var(--r-info); }

.metric-card .label {
    color: var(--r-text-muted);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex; align-items: center; gap: 8px;
}
.metric-card .label .icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--r-primary-50);
    color: var(--r-primary-600);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
    font-weight: 700;
}
.metric-card.accent-success .label .icon { background: var(--r-success-bg); color: var(--r-success); }
.metric-card.accent-danger  .label .icon { background: var(--r-danger-bg);  color: var(--r-danger); }
.metric-card.accent-warning .label .icon { background: var(--r-warning-bg); color: var(--r-warning); }
.metric-card.accent-info    .label .icon { background: var(--r-info-bg);    color: var(--r-info); }

.metric-card .value {
    font-size: 30px; font-weight: 700; color: var(--r-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.metric-card .trend { font-size: 12px; color: var(--r-text-muted); margin-top: 6px; }

/* ===== Forms ============================================== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full-width { grid-column: 1 / -1; }

.form-field label {
    font-size: 12px; font-weight: 600;
    color: var(--r-text);
    letter-spacing: 0.02em;
}
.form-field .req { color: var(--r-danger); margin-left: 2px; }

/* Side-by-side fields inside a single panel: behaves like .filter-row but is
   used inside the form, not in the filter bar. */
.form-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.form-row > .form-field { margin-bottom: 0; min-width: 0; }

/* Small inline help text under inputs. */
.help-text { display: block; margin-top: 4px; font-size: 12px; color: var(--r-text-muted); }
.help-text strong { color: var(--r-text); }

/* Monospace chip - used to display short codes like 'SD', 'AG' in grids. */
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: #f1f5f9;
    color: var(--r-text);
    letter-spacing: 0.5px;
}

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

.form-control, .form-select, textarea.form-control {
    width: 100%;
    padding: 10px 13px;
    border: 1px solid var(--r-border-strong);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--r-text);
    transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--r-text-subtle); }
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    outline: none;
    border-color: var(--r-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}
textarea.form-control { resize: vertical; min-height: 80px; }

.form-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.form-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--r-primary); cursor: pointer; }

.field-error { color: var(--r-danger); font-size: 12px; margin-top: 4px; }

/* Product thumbnail (lists, reports, edit form preview) */
.product-thumb {
    width: 44px; height: 44px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--r-bg);
    border: 1px solid var(--r-border);
    display: inline-block;
    flex-shrink: 0;
}
.product-thumb.empty {
    background: linear-gradient(135deg, #eef2ff, #fdf2f8);
}

/* Rate-chart table - tighter padding so the inputs don't bloat the row height */
.rate-chart-table th { background: #fbfcfe; }
.rate-chart-table td { padding: 8px 10px; }
.rate-chart-table input.form-control,
.rate-chart-table .form-select { padding: 6px 10px; font-size: 13.5px; }

/* Read-only display: looks like a form-control but is just text, no input. */
.readonly-field {
    padding: 10px 13px;
    border: 1px dashed var(--r-border-strong);
    border-radius: 8px;
    background: #f9fafb;
    color: var(--r-text);
    font-size: 14px;
    min-height: 41px;
    line-height: 1.4;
    display: flex; align-items: center;
}
.readonly-field:empty::before {
    content: '\2014';   /* em-dash, encoding-safe Unicode escape */
    color: var(--r-text-subtle);
}
.text-muted { color: var(--r-text-muted); }
.text-success { color: var(--r-success); }
.text-danger  { color: var(--r-danger); }
.text-end { text-align: right; }

/* Menu tree (hierarchical checkbox list for employee menu permissions) */
.menu-tree {
    border: 1px solid var(--r-border-strong);
    border-radius: 8px;
    background: #fff;
    padding: 8px;
    max-height: 360px;
    overflow-y: auto;
}
.menu-tree-toolbar {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 10px 10px;
    border-bottom: 1px dashed var(--r-border);
    margin-bottom: 6px;
    font-size: 12px;
}
.menu-tree-toolbar .tree-link {
    color: var(--r-primary-600);
    font-weight: 600;
    cursor: pointer;
}
.menu-tree-toolbar .tree-link:hover { text-decoration: underline; }
.menu-tree-toolbar .sep { color: var(--r-text-subtle); }
.menu-tree-node {
    position: relative;
    padding: 2px 0;
}
.menu-tree-node label {
    display: flex !important; align-items: center; gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--r-text);
    transition: background .12s;
}
.menu-tree-node label:hover { background: var(--r-primary-50); }
.menu-tree-node input[type="checkbox"] {
    accent-color: var(--r-primary);
    width: 16px; height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.menu-tree-node .menu-node-label { font-weight: 600; color: var(--r-text); }
.menu-tree-node .menu-node-url {
    color: var(--r-text-subtle);
    font-size: 11.5px;
    font-family: "JetBrains Mono", Consolas, monospace;
    margin-left: auto;
}
.menu-tree-node.is-parent .menu-node-label { color: var(--r-primary-700); }

/* indentation per level with a thin connector */
.menu-tree-node.level-1 { padding-left: 26px; }
.menu-tree-node.level-2 { padding-left: 52px; }
.menu-tree-node.level-3 { padding-left: 78px; }
.menu-tree-node.level-4 { padding-left: 104px; }

.menu-tree-node.level-1::before,
.menu-tree-node.level-2::before,
.menu-tree-node.level-3::before,
.menu-tree-node.level-4::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 0; bottom: 0;
    width: 1px;
    background: var(--r-border);
}
.menu-tree-node.level-1::after,
.menu-tree-node.level-2::after,
.menu-tree-node.level-3::after,
.menu-tree-node.level-4::after {
    content: '';
    position: absolute;
    left: 14px;
    top: 18px;
    width: 12px;
    height: 1px;
    background: var(--r-border);
}
.menu-tree-node.level-2::before { left: 40px; }
.menu-tree-node.level-2::after  { left: 40px; }
.menu-tree-node.level-3::before { left: 66px; }
.menu-tree-node.level-3::after  { left: 66px; }
.menu-tree-node.level-4::before { left: 92px; }
.menu-tree-node.level-4::after  { left: 92px; }

/* ===== Buttons ============================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    font-weight: 600; font-size: 13.5px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, transform .05s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--r-primary-600); color: #fff; }
.btn-primary:hover { background: var(--r-primary-700); color: #fff; }
.btn-secondary { background: #fff; color: var(--r-text); border-color: var(--r-border-strong); }
.btn-secondary:hover { background: var(--r-bg); }
.btn-danger { background: var(--r-danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-block { width: 100%; padding: 12px; font-size: 14px; }

/* ===== Tables ============================================= */
.table-wrap { overflow-x: auto; }
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
.admin-table th {
    text-align: left;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid var(--r-border);
    color: var(--r-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
}
.admin-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--r-border);
    vertical-align: middle;
}
.admin-table tbody tr { transition: background .12s; }
.admin-table tbody tr:hover { background: #fafbff; }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .text-end { text-align: right; }

/* ===== Status badges ====================================== */
.badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.active     { background: var(--r-success-bg); color: var(--r-success); }
.badge.inactive   { background: var(--r-danger-bg);  color: var(--r-danger); }
.badge.success    { background: var(--r-success-bg); color: var(--r-success); }
.badge.pending    { background: var(--r-warning-bg); color: var(--r-warning); }
.badge.failed     { background: var(--r-danger-bg);  color: var(--r-danger); }
.badge.info       { background: var(--r-info-bg);    color: var(--r-info); }

/* ===== Filter row ========================================= */
.filter-row {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
    padding: 16px 20px;
    border-bottom: 1px solid var(--r-border);
    background: #fbfcfe;
}
.filter-row .form-field { min-width: 180px; }
.filter-row .actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }

/* Filter "grid" - better than flex when there are many filters. */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--r-border);
    background: #fbfcfe;
}
.filter-grid .form-field { min-width: 0; }
.filter-grid .filter-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

/* ===== Pagination ========================================= */
.pager {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--r-border);
    font-size: 13px;
    color: var(--r-text-muted);
    background: #fbfcfe;
}
.pager-buttons { display: flex; gap: 6px; }
.pager-buttons a, .pager-buttons span {
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--r-border);
    background: #fff;
    color: var(--r-text);
    font-weight: 500;
    text-decoration: none;
    transition: background .12s;
}
.pager-buttons a:hover { background: var(--r-primary-50); border-color: var(--r-primary); color: var(--r-primary-700); }
.pager-buttons .current { background: var(--r-primary); border-color: var(--r-primary); color: #fff; }
.pager-buttons .disabled { color: #cbd5e1; pointer-events: none; }

/* ===== Empty state ======================================== */
.empty-state {
    text-align: center;
    padding: 56px 20px;
    color: var(--r-text-muted);
}
.empty-state h3 { margin: 0 0 8px; color: var(--r-text); font-size: 16px; }

/* ===== Alerts ============================================= */
.alert {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    margin-bottom: 16px;
    font-size: 13.5px;
}
.alert-success { background: var(--r-success-bg); border-color: #a7f3d0; color: #065f46; }
.alert-danger  { background: var(--r-danger-bg);  border-color: #fecaca; color: #991b1b; }
.alert-warning { background: var(--r-warning-bg); border-color: #fde68a; color: #92400e; }
.alert-info    { background: var(--r-info-bg);    border-color: #bfdbfe; color: #1e40af; }

/* ===== Toast ============================================== */
.toast-container {
    position: fixed; bottom: 24px; right: 24px;
    display: flex; flex-direction: column; gap: 10px; z-index: 9999;
}
.toast {
    min-width: 280px;
    padding: 14px 18px;
    border-radius: 10px;
    background: #1f2937; color: #fff;
    box-shadow: var(--r-shadow-lg);
    animation: toastIn .25s ease-out;
    font-size: 13.5px; font-weight: 500;
}
.toast.success { background: var(--r-success); }
.toast.error   { background: var(--r-danger); }
.toast.warning { background: var(--r-warning); }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Split layout (form on left, grid on right) ========= */
.split-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 20px;
    align-items: start;
}
.split-layout .panel { margin-bottom: 0; }
.split-form .form-field { margin-bottom: 14px; }
.split-form .actions { display: flex; gap: 8px; margin-top: 6px; }

@media (max-width: 1100px) {
    .split-layout { grid-template-columns: 1fr; }
}

/* ===== Login screen ======================================= */
.login-screen {
    min-height: 100vh;
    background: var(--r-bg);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}

.login-hero {
    position: relative;
    background: var(--r-gradient);
    color: #fff;
    padding: 56px 64px;
    display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden;
}
.login-hero::before {
    content: '';
    position: absolute; top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.login-hero::after {
    content: '';
    position: absolute; bottom: -150px; left: -50px;
    width: 350px; height: 350px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
}
.login-hero .hero-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.login-hero .hero-brand .brand-mark {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 18px;
}
.login-hero .hero-brand .brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.login-hero .hero-content { position: relative; z-index: 1; max-width: 460px; }
.login-hero .kicker {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    padding: 5px 12px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 18px;
}
.login-hero h1 {
    font-size: 38px; font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin: 0 0 18px;
}
.login-hero p.lead {
    font-size: 16px; opacity: 0.92;
    line-height: 1.6; margin: 0 0 28px;
}
.login-hero .feature-list { display: flex; flex-direction: column; gap: 12px; }
.login-hero .feature-list .feature {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px;
}
.login-hero .feature-list .check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.login-hero .hero-footer {
    position: relative; z-index: 1;
    font-size: 12px; opacity: 0.75;
}

.login-form-pane {
    background: var(--r-surface);
    padding: 56px 64px;
    display: flex; flex-direction: column; justify-content: center;
}
.login-form-card { max-width: 420px; width: 100%; margin: 0 auto; }
.login-form-card .form-eyebrow {
    color: var(--r-primary-600);
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0 0 8px;
}
.login-form-card h2 {
    font-size: 30px; font-weight: 700;
    color: var(--r-text);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}
.login-form-card .subtitle {
    color: var(--r-text-muted);
    margin: 0 0 32px;
    font-size: 14.5px;
}
.login-form-card .form-field { margin-bottom: 18px; }
.login-form-card .form-control { padding: 12px 14px; font-size: 14.5px; }
.login-form-card .remember-row {
    display: flex; justify-content: space-between; align-items: center;
    margin: 8px 0 24px;
    font-size: 13px;
}
.login-form-card .remember-row a { font-weight: 500; }
.login-form-card .login-footer {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--r-border);
    text-align: center;
    font-size: 12px;
    color: var(--r-text-muted);
}

/* Location-status pill shown above the Sign-in button.
   The button is disabled until JS sets this to .success. */
.location-status {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    margin: 4px 0 16px;
    font-size: 13px;
    line-height: 1.4;
}
.location-status .location-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--r-text-subtle);
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
}
.location-status.loading {
    background: var(--r-info-bg);
    border-color: #bfdbfe;
    color: #1e40af;
}
.location-status.loading .location-dot {
    background: var(--r-info);
    animation: locationPulse 1.4s infinite;
}
.location-status.success {
    background: var(--r-success-bg);
    border-color: #a7f3d0;
    color: #065f46;
}
.location-status.success .location-dot { background: var(--r-success); }
.location-status.error {
    background: var(--r-danger-bg);
    border-color: #fecaca;
    color: #991b1b;
}
.location-status.error .location-dot { background: var(--r-danger); }
@keyframes locationPulse {
    0%   { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(59, 130, 246, 0);    }
}

/* Disabled button feedback when location is blocked */
.btn-primary[disabled] {
    background: var(--r-primary-50);
    color: var(--r-primary);
    cursor: not-allowed;
    opacity: 0.65;
}
.btn-primary[disabled]:hover {
    background: var(--r-primary-50);
    color: var(--r-primary);
}

/* OTP input - large, spaced characters */
.otp-input {
    font-size: 28px !important;
    text-align: center;
    letter-spacing: 14px;
    font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
    padding: 14px 12px !important;
}

@media (max-width: 960px) {
    .login-screen { grid-template-columns: 1fr; }
    .login-hero { padding: 40px 28px; min-height: auto; }
    .login-hero h1 { font-size: 28px; }
    .login-form-pane { padding: 40px 28px; }
}

/* ===== Utility ============================================ */
.d-flex { display: flex; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mt-2 { margin-top: 8px; }
.w-100 { width: 100%; }

/* ===== Responsive nav ===================================== */
@media (max-width: 900px) {
    .admin-topbar-inner { padding: 0 16px; gap: 12px; }
    .admin-nav-row .admin-nav { padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .admin-nav a { white-space: nowrap; }
    .admin-user .meta { display: none; }
    .page-header-inner, .admin-content { padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   Global page loader.
   Shown on every postback / link navigation by app.js. Sits above
   everything (z-index 9999) and accepts no pointer events when hidden.
   Animations are short (180ms fade-in, 600ms spinner cycle) so it feels
   responsive instead of intrusive.
   ============================================================ */
.global-loader {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);     /* slate-900 @ 45% */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.global-loader.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s;
}
.global-loader-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 22px 28px 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    display: flex; flex-direction: column; align-items: center;
    min-width: 200px;
}
.global-loader-spinner {
    width: 38px; height: 38px;
    border: 3px solid var(--r-primary-50);
    border-top-color: var(--r-primary);
    border-radius: 50%;
    animation: rupiyo-spin .6s linear infinite;
    margin-bottom: 12px;
}
.global-loader-label {
    font-size: 13.5px;
    color: var(--r-text);
    font-weight: 600;
    letter-spacing: 0.02em;
}
@keyframes rupiyo-spin {
    to { transform: rotate(360deg); }
}

/* Reduced-motion: keep the spinner stationary, just show the card. */
@media (prefers-reduced-motion: reduce) {
    .global-loader-spinner { animation: none; }
    .global-loader, .global-loader.is-visible { transition: none; }
}