/* =====================================================================
   DigiKey JTMK — shared stylesheet
   Brand palette: Midnight Navy, Deep Ocean Blue, Electric Blue,
   Teal Cyan, Soft Gold, Ivory White
   ===================================================================== */

:root {
    --midnight-navy: #0b1c3a;
    --deep-ocean: #12294f;
    --deep-ocean-light: #1a3660;
    --electric-blue: #2f7bf6;
    --teal-cyan: #17c3b2;
    --soft-gold: #f2a71b;
    --soft-gold-dark: #d68f0d;
    --ivory: #f5f6fa;
    --danger: #e2503c;
    --border-soft: rgba(255, 255, 255, 0.08);
    --muted: rgba(245, 246, 250, 0.55);
}

* { box-sizing: border-box; }
/* ===== Force Midnight Navy Background ===== */

html,
body {
    background-color: var(--midnight-navy) !important;
    color: var(--ivory) !important;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

.wrapper,
.content-wrapper,
.main-content,
.page-content,
.staff-container {
    background-color: transparent !important;
}

.container,
.container-fluid {
    background-color: transparent !important;
}

a { text-decoration: none; color: inherit; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 230px;
    flex-shrink: 0;
    background: var(--deep-ocean);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    padding: 20px 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 16px;
}
.sidebar-brand small { display: block; font-weight: 400; opacity: 0.6; font-size: 11px; }

.sidebar-profile {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 20px;
    margin: 0 12px 16px;
    background: var(--deep-ocean-light);
    border-radius: 10px;
}
.sidebar-profile .avatar {
    width: 28px; height: 28px; min-width: 28px; max-width: 28px; max-height: 28px;
    flex-shrink: 0; border-radius: 50%;
    background: var(--electric-blue);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 11px;
    overflow: hidden;
}
.avatar img, .avatar-lg img {
    width: 100%; height: 100%; max-width: 100%; max-height: 100%;
    border-radius: 50%;
    object-fit: cover; display: block;
}
.sidebar-profile .name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.sidebar-profile .role { font-size: 11px; opacity: 0.6; }

.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 8px;
    font-size: 14px; color: rgba(245,246,250,0.75)
    ;
}
.sidebar-nav a:hover { background: var(--deep-ocean-light); color: var(--ivory); }
.sidebar-nav a.active { background: var(--electric-blue); color: #fff; font-weight: 600; }
.sidebar-nav .icon { width: 18px; text-align: center; }

.quick-action,
.quick-action:link,
.quick-action:visited,
.quick-action:hover,
.quick-action:focus,
.quick-action:active {
    text-decoration: none !important;
}

.sidebar-nav a,
.sidebar-nav a:link,
.sidebar-nav a:visited,
.sidebar-nav a:hover,
.sidebar-nav a:focus,
.sidebar-nav a:active,
.sidebar-nav a.active {
    text-decoration: none !important;
}



.sidebar-signout {
    padding: 12px 20px 0;
    border-top: 1px solid var(--border-soft);
    margin-top: 12px;
}

.sidebar-signout a,
.sidebar-signout a:link,
.sidebar-signout a:visited,
.sidebar-signout a:hover,
.sidebar-signout a:focus,
.sidebar-signout a:active,
.topbar-actions a,
.topbar-actions a:link,
.topbar-actions a:visited,
.topbar-actions a:hover,
.topbar-actions a:focus,
.topbar-actions a:active {
    text-decoration: none !important;
}
.sidebar-signout a { font-size: 14px; opacity: 0.75; display: flex; gap: 8px; align-items: center; }
.sidebar-signout a:hover { opacity: 1; color: var(--danger); }

/* ---------- Main column ---------- */
.main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border-soft);
    position: relative;
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 18px; }
.bell-btn {
    position: relative; background: none; border: none; color: var(--ivory);
    font-size: 18px; cursor: pointer;
}
.bell-dot {
    position: absolute; top: -2px; right: -2px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--danger); border: 2px solid var(--midnight-navy);
}
.account-chip { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.account-chip .chip-avatar {
    width: 26px; height: 26px; min-width: 26px; max-width: 26px; max-height: 26px;
    flex-shrink: 0; border-radius: 50%; overflow: hidden;
    object-fit: cover; display: block;
}

.notif-dropdown {
    position: absolute; top: 54px; right: 28px; width: 300px;
    background: var(--deep-ocean); border: 1px solid var(--border-soft);
    border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,0.4);
    z-index: 40; display: none; overflow: hidden;
}
.notif-dropdown.show { display: block; }
.notif-dropdown .notif-head {
    padding: 12px 16px; font-weight: 600; font-size: 13px;
    border-bottom: 1px solid var(--border-soft);
    display: flex; justify-content: space-between; align-items: center;
}
.notif-dropdown .notif-item { padding: 10px 16px; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.notif-dropdown .notif-item strong { display: block; font-size: 13px; margin-bottom: 2px; }
.notif-dropdown .notif-item.unread { background: rgba(47,123,246,0.08); }
.notif-dropdown .notif-empty { padding: 18px 16px; opacity: 0.6; font-size: 13px; text-align: center; }

.content { padding: 24px 28px; flex: 1; }

/* ---------- Cards ---------- */
.panel {
    background: var(--deep-ocean);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 20px;
}
.panel-title { font-size: 14px; font-weight: 700; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.panel-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; }

.room-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.room-card {
    background: var(--deep-ocean-light);
    border-radius: 10px; padding: 12px 14px;
}
.room-card .room-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.room-card .room-floor { font-size: 11px; opacity: 0.6; margin-bottom: 8px; }
.status-badge { font-size: 11px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.status-badge.available { color: var(--teal-cyan); }
.status-badge.available::before { background: var(--teal-cyan); }
.status-badge.borrowed, .status-badge.overdue, .status-badge.occupied { color: var(--danger); }
.status-badge.borrowed::before, .status-badge.overdue::before, .status-badge.occupied::before { background: var(--danger); }

.quick-actions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.quick-action {
    background: var(--soft-gold);
    color: var(--midnight-navy);
    border-radius: 10px;
    padding: 16px 10px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    transition: transform .12s ease, background .12s ease;
}
.quick-action i, .quick-action .qa-icon { font-size: 20px; }
.quick-action:hover { background: var(--soft-gold-dark); transform: translateY(-2px); color: var(--midnight-navy); }

/* ---------- Golden focus glow ---------- */
@keyframes gold-shine {
    0%, 100% { box-shadow: 0 0 0 3px rgba(242,167,27,0.12), 0 0 10px rgba(242,167,27,0.25); }
    50%      { box-shadow: 0 0 0 4px rgba(242,167,27,0.22), 0 0 18px rgba(242,167,27,0.45); }
}

/* ---------- Tables ---------- */
.table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
.search-box {
    display: flex; align-items: center; gap: 8px; background: var(--deep-ocean-light);
    border-radius: 8px; padding: 8px 12px; min-width: 260px;
    border: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease;
}
.search-box:focus-within {
    border-color: var(--soft-gold);
    animation: gold-shine 2.2s ease-in-out infinite;
}
.search-box input { background: none; border: none; color: var(--ivory); outline: none; font-size: 13px; width: 100%; }

.btn { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 8px; padding: 9px 16px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: normal; cursor: pointer; }
.btn-gold { background: var(--soft-gold); color: var(--midnight-navy); }
.btn-gold:hover { background: var(--soft-gold-dark); }
.btn-outline { background: transparent; border: 1px solid var(--border-soft); color: var(--ivory); }
.btn-outline:hover { border-color: var(--soft-gold); color: var(--soft-gold); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-approve { background: var(--teal-cyan); color: var(--midnight-navy); }
.btn-reject { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 11.5px; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
    text-align: left; padding: 10px 12px; text-transform: uppercase;
    font-size: 11px; letter-spacing: 0.4px; opacity: 0.55; border-bottom: 1px solid var(--border-soft);
}
table.data-table td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
table.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.key-code { color: var(--soft-gold); font-weight: 700; }

.pagination-arrows { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.pagination-arrow {
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 12px; background: var(--deep-ocean-light);
}
.pagination-arrow.disabled { opacity: .35; pointer-events: none; }
.pagination-status { font-size: 12px; opacity: .75; white-space: nowrap; }

.role-pill { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.role-pill.lecturer { background: rgba(47,123,246,0.18); color: var(--electric-blue); }
.role-pill.staff { background: rgba(23,195,178,0.18); color: var(--teal-cyan); }
.role-pill.administrator { background: rgba(242,167,27,0.18); color: var(--soft-gold); }
.role-pill.approved { background: rgba(23,195,178,0.18); color: var(--teal-cyan); }
.role-pill.pending { background: rgba(242,167,27,0.18); color: var(--soft-gold); }
.role-pill.rejected { background: rgba(226,80,60,0.18); color: var(--danger); }
.role-pill + .role-pill { margin-left: 6px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.4px; }
.form-group input, .form-group select {
    background: var(--deep-ocean-light); border: 1px solid var(--border-soft);
    border-radius: 8px; padding: 10px 12px; color: var(--ivory); font-size: 13.5px; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-group input:focus, .form-group select:focus {
    border-color: var(--soft-gold);
    animation: gold-shine 2.2s ease-in-out infinite;
}
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

.profile-card { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.profile-card .avatar-lg {
    width: 60px; height: 60px; border-radius: 50%; background: var(--electric-blue);
    display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700;
    overflow: hidden;
}
.profile-card .meta-name { font-size: 15px; font-weight: 700; }
.profile-card .meta-role { font-size: 12px; opacity: 0.6; }

.tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.tabs a { padding: 8px 16px; border-radius: 8px; font-size: 13px; background: var(--deep-ocean-light); }
.tabs a.active { background: var(--electric-blue); color: #fff; font-weight: 600; }

.alert { padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert-success { background: rgba(23,195,178,0.15); color: var(--teal-cyan); }
.alert-error { background: rgba(226,80,60,0.15); color: var(--danger); }

.empty-state { text-align: center; padding: 40px 20px; opacity: 0.6; font-size: 13px; }

/* ---------- Popup overlay (Reminder Sent / Created / Approved / Rejected) ---------- */
.popup-overlay {
    position: fixed; inset: 0;
    background: rgba(60, 78, 110, 0.55);
    backdrop-filter: blur(1px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
}
.popup-card {
    width: 320px;
    background: var(--midnight-navy);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    padding: 28px 24px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.popup-icon {
    width: 54px; height: 54px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 14px;
    font-size: 24px;
}
.popup-icon.success { background: rgba(23,195,178,0.15); color: var(--teal-cyan); }
.popup-icon.error   { background: rgba(226,80,60,0.15); color: var(--danger); }
.popup-icon.info    { background: rgba(242,167,27,0.15); color: var(--soft-gold); }
.popup-title { font-size: 16px; font-weight: 800; margin-bottom: 6px; }
.popup-message { font-size: 12.5px; color: var(--soft-gold); opacity: 0.9; margin-bottom: 18px; line-height: 1.4; }
.popup-card .btn { width: 100%; justify-content: center; }

/* ---------- Add Card modal (Cupboard Access Log) ---------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(60, 78, 110, 0.55);
    backdrop-filter: blur(1px);
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    padding: 16px;
}
.modal-card {
    width: 100%; max-width: 380px;
    background: var(--midnight-navy);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
    overflow: hidden;
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--border-soft);
}
.modal-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-close {
    background: none; border: none; color: var(--ivory); opacity: 0.6;
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-close:hover { opacity: 1; }
.modal-body { padding: 20px 18px; }

.scan-state { display: flex; flex-direction: column; align-items: center; text-align: center; }
.scan-state .form-group, .scan-state .form-actions { width: 100%; text-align: left; }
.scan-hint { font-size: 12.5px; opacity: 0.65; margin: 0; }
.scan-spinner {
    width: 40px; height: 40px; margin-bottom: 16px;
    border: 3px solid var(--border-soft);
    border-top-color: var(--soft-gold);
    border-radius: 50%;
    animation: scan-spin 0.9s linear infinite;
}
@keyframes scan-spin { to { transform: rotate(360deg); } }

.detected-card {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    background: var(--deep-ocean-light);
    border-radius: 10px; padding: 12px 14px;
    margin-bottom: 16px;
}
.detected-card i { font-size: 26px; color: var(--soft-gold); }
.detected-label { font-size: 11px; text-transform: uppercase; opacity: 0.6; letter-spacing: 0.4px; }
.detected-uid { font-size: 15px; font-weight: 700; color: var(--soft-gold); word-break: break-all; }

/* ---------- Mobile sidebar (hamburger + off-canvas drawer) ---------- */
.sidebar-toggle {
    display: none;
    background: none; border: none; color: var(--ivory);
    font-size: 20px; cursor: pointer; padding: 4px 8px; margin-right: 4px;
}
.sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 45;
}
.sidebar-backdrop.show { display: block; }

@media (max-width: 900px) {
    .room-grid, .quick-actions-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: 1fr; }

    .sidebar-toggle { display: inline-block; }

    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        display: flex; /* override the old "display:none" hard-hide */
    }
    .sidebar.open { transform: translateX(0); }
}

/* ===== SETTINGS PAGE THEME ===== */

.settings-container,
.settings-card,
.settings-panel,
.settings-box,
.profile-container,
.profile-card,
.card,
.panel,
.content-box,
.main-content > div {
    background-color: var(--deep-ocean) !important;
    color: var(--ivory) !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* Input fields */
.settings-container input,
.settings-card input,
.settings-panel input,
.settings-box input {
    background-color: var(--midnight-navy);
    color: var(--ivory);
    border: 1px solid rgba(255,255,255,0.15);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.settings-container input:focus,
.settings-card input:focus,
.settings-panel input:focus,
.settings-box input:focus {
    outline: none;
    border-color: var(--soft-gold);
    animation: gold-shine 2.2s ease-in-out infinite;
}

/* Placeholder text */
.settings-container input::placeholder,
.settings-card input::placeholder {
    color: rgba(255,255,255,0.6);
}

.nav-link {
    text-decoration: none;
}

.nav-link:hover {
    text-decoration: none;
}

.nav-link:visited {
    text-decoration: none;
}

/* Create Room button on Create Key page */
.room-select-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.room-select-row select {
    flex: 1;
    min-width: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.room-select-row select:focus {
    outline: none;
    border-color: var(--soft-gold);
    animation: gold-shine 2.2s ease-in-out infinite;
}
.create-room-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    text-decoration: none;
    min-width: 125px;
}
.create-room-panel {
    max-width: 640px;
}
@media (max-width: 700px) {
    .room-select-row {
        flex-direction: column;
    }
}


/* ---------- Cupboard Access Calendar Filter ---------- */
.cupboard-toolbar {
    justify-content: flex-end;
    position: relative;
}
.access-log-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.calendar-filter-btn {
    text-decoration: none !important;
}
.calendar-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    padding: 14px;
    background: var(--deep-ocean-light);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
    z-index: 50;
}
.calendar-popover[hidden] { display: none; }
.calendar-header {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}
.calendar-nav, .calendar-title {
    border: 0;
    background: transparent;
    color: var(--ivory);
    cursor: pointer;
}
.calendar-nav {
    width: 32px;
    height: 32px;
    border-radius: 7px;
}
.calendar-nav:hover { background: rgba(255,255,255,.08); }
.calendar-title {
    font-weight: 700;
    font-size: 14px;
}
.calendar-title:hover { color: var(--soft-gold); }
.calendar-weekdays, .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.calendar-weekdays {
    margin-bottom: 4px;
    font-size: 10px;
    opacity: .55;
    text-align: center;
}
.calendar-day, .calendar-month {
    border: 0;
    background: transparent;
    color: var(--ivory);
    cursor: pointer;
    border-radius: 7px;
    min-height: 34px;
    font-size: 12px;
}
.calendar-day:hover, .calendar-month:hover {
    background: rgba(255,255,255,.08);
}
.calendar-day.selected, .calendar-month.selected {
    background: var(--soft-gold);
    color: var(--midnight-navy);
    font-weight: 700;
}
.calendar-blank { min-height: 34px; }
.month-grid {
    grid-template-columns: repeat(3, 1fr);
}
.calendar-month {
    min-height: 42px;
}
.calendar-hint {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    font-size: 10px;
    line-height: 1.4;
    opacity: .55;
    text-align: center;
}
.active-calendar-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,.04);
    font-size: 12px;
}
.active-calendar-filter a {
    color: var(--soft-gold);
    text-decoration: none;
}
.active-calendar-filter a:hover { text-decoration: underline; }

/* ===== Copyright Footer ===== */
.copyright-footer{
    background: linear-gradient(90deg, var(--midnight-navy) 0%, var(--deep-ocean) 50%, var(--midnight-navy) 100%);
    border-top: 1px solid var(--border-soft);
    padding: 28px 24px 20px;
    text-align: center;
}
.copyright-footer__divider{
    width: 90px;
    height: 3px;
    margin: 0 auto 16px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(242, 167, 27, 0) 0%,
        #f2a71b 50%,
        rgba(242, 167, 27, 0) 100%
    );
}
.copyright-footer__text{
    margin: 0;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 0.85rem;
    color: var(--muted);
}

/* Sticky-footer helper for the standalone auth pages (login, register,
   forgot/reset password) so the footer sits at the bottom of the
   viewport instead of immediately under the centered card. */
.auth-page-shell{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.auth-page-shell .auth-card-wrap{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.cupb-pagination { display:flex; align-items:center; gap:10px; justify-content:flex-end; margin-top:14px; }
.cupb-page-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:6px; font-size:16px; background:#1c2e4a; color:#fff; text-decoration:none; }
.cupb-disabled { opacity:.35; pointer-events:none; }
.cupb-page-status { font-size:12px; opacity:.75; white-space:nowrap; }

/* =====================================================================
   BORROW KEY page (public/staff/borrow_key.php)
   Namespaced bk-* so nothing here collides with the shared shell rules
   above. Variables alias the central palette at the top of this file,
   so Borrow Key always tracks the same colours as the rest of the app.
   Formerly assets/css/borrow-key.css — merged in here so every page
   pulls from one stylesheet.
   ===================================================================== */

:root {
    --bk-navy:        var(--deep-ocean);
    --bk-navy-light:  var(--deep-ocean-light);
    --bk-navy-panel:  var(--deep-ocean-light);
    --bk-accent:      var(--electric-blue);
    --bk-gold:        var(--soft-gold);
    --bk-gold-bright: var(--soft-gold-dark);
    --bk-text-muted:  var(--muted);
    --bk-danger:      var(--danger);
    --bk-success:     var(--teal-cyan);
    --bk-white:       var(--ivory);
}

.bk-wrap { max-width: 640px; }

/* ---------- Card shell ---------- */
.bk-card { background: var(--bk-navy); border-radius: 16px; padding: 28px; }

.bk-card h2 { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.bk-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.bk-card .bk-subtitle { color: var(--bk-text-muted); font-size: 13px; margin-bottom: 22px; }

/* ---------- Step indicator ---------- */
.bk-step-indicator { display: flex; align-items: center; margin-bottom: 26px; }
.bk-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.bk-step-dot {
    width: 26px; height: 26px; border-radius: 50%; background: var(--bk-navy-light);
    color: var(--bk-text-muted); display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.bk-step-label { font-size: 10px; color: var(--bk-text-muted); white-space: nowrap; }
.bk-step.active .bk-step-dot { background: var(--bk-gold); color: var(--midnight-navy); }
.bk-step.active .bk-step-label { color: var(--bk-white); }
.bk-step.completed .bk-step-dot { background: var(--bk-success); color: var(--bk-white); }
.bk-step-line { flex: 1; height: 2px; background: var(--bk-navy-light); margin: 0 6px 18px; }

.bk-section-label {
    color: var(--bk-gold-bright); font-weight: 600; font-size: 12px; text-transform: uppercase;
    letter-spacing: .06em; margin-bottom: 10px; display: block;
}

/* ---------- STEP 1: Select Room ---------- */
.bk-room-panel { background: var(--bk-navy-panel); border-radius: 12px; padding: 18px; margin-bottom: 22px; }

.bk-room-list { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; }
.bk-room-list-empty, .bk-room-list-loading {
    color: var(--bk-text-muted); font-size: 13px; padding: 8px 4px;
}

.bk-room-option {
    display: flex; align-items: center; gap: 12px; background: var(--bk-navy-light);
    border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; cursor: pointer;
    width: 100%; text-align: left; color: var(--bk-white); font: inherit;
}
.bk-room-option:hover { border-color: var(--bk-accent); }
.bk-room-option.selected { border-color: var(--bk-gold); background: rgba(242, 167, 27, 0.12); }

.bk-room-icon {
    width: 32px; height: 32px; border-radius: 8px; background: var(--bk-navy);
    display: flex; align-items: center; justify-content: center; color: var(--bk-text-muted);
    flex-shrink: 0;
}
.bk-room-option.selected .bk-room-icon { color: var(--bk-gold-bright); }

.bk-room-text { flex: 1; display: flex; flex-direction: column; }
.bk-room-name { font-weight: 600; font-size: 14px; color: var(--bk-white); }
.bk-room-floor { color: var(--bk-text-muted); font-size: 12px; }

.bk-room-radio {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bk-text-muted); flex-shrink: 0;
}
.bk-room-option.selected .bk-room-radio { border-color: var(--bk-gold); background: var(--bk-gold); }

.bk-duration-title { font-weight: 700; font-size: 15px; text-align: center; margin-bottom: 14px; }
.bk-duration-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.bk-duration-field { display: flex; flex-direction: column; gap: 6px; }
.bk-duration-field label { font-size: 11px; color: var(--bk-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bk-time-input {
    background: var(--bk-navy-light);
    border: 1px solid rgba(242, 167, 27, 0.35);
    color: var(--bk-white);
    border-radius: 8px; padding: 9px 12px; font-size: 14px; width: 160px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.bk-time-input:focus { outline: none; border-color: var(--bk-gold); }
.bk-time-input.has-value {
    background: linear-gradient(135deg, rgba(242, 167, 27, 0.18), rgba(70, 130, 220, 0.18));
    border-color: rgba(242, 167, 27, 0.55);
}
.bk-duration-sep { color: var(--bk-text-muted); margin-top: 18px; }

/* ---------- Shared wizard panel look (steps 2-4) ---------- */
.bk-panel { background: var(--bk-navy-panel); border-radius: 12px; padding: 24px; text-align: center; }
.bk-panel h3 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; }
.bk-panel .bk-muted { color: var(--bk-text-muted); font-size: 13px; }

.bk-icon-circle {
    width: 56px; height: 56px; border-radius: 50%; background: var(--bk-accent);
    display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 0 auto 10px;
    color: var(--bk-white);
}
.bk-icon-circle.success { background: rgba(23, 195, 178, 0.18); color: var(--bk-success); }

.bk-error { color: var(--bk-danger); font-size: 13px; margin-top: 10px; }

.bk-lock-info-row { display: flex; gap: 12px; margin: 18px 0; }
.bk-lock-info-box { flex: 1; background: var(--bk-navy-light); border-radius: 10px; padding: 14px; }
.bk-lock-info-label { font-size: 10px; color: var(--bk-text-muted); letter-spacing: .5px; margin-bottom: 6px; }
.bk-lock-info-value { font-size: 18px; font-weight: 700; color: var(--bk-gold-bright); }

.bk-confidential-note {
    background: rgba(226, 80, 60, 0.15); color: var(--danger); border-radius: 8px;
    padding: 10px 14px; font-size: 12px; display: flex; align-items: center; gap: 8px; text-align: left;
}

.bk-photo-warning {
    color: var(--soft-gold); font-size: 15px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; gap: 8px; margin-bottom: 4px;
}
.bk-photo-label {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    margin: 16px 0 10px; text-align: left;
}
.bk-photo-box {
    position: relative; background: var(--bk-navy-light); border: 2px dashed var(--bk-accent);
    border-radius: 12px; min-height: 180px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden;
}
.bk-photo-box video, .bk-photo-box img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; }
.bk-photo-placeholder, .bk-photo-captured { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--bk-text-muted); padding: 30px; }
.bk-photo-placeholder i { font-size: 26px; color: var(--bk-gold); }
.bk-photo-captured i { font-size: 26px; color: var(--bk-success); }
.bk-photo-captured div { color: var(--bk-success); font-weight: 700; }

/* ---------- Buttons ---------- */
.bk-btn-row { display: flex; gap: 12px; margin-top: 22px; }
.bk-btn {
    border: none; border-radius: 10px; padding: 13px 20px; font-weight: 700; font-size: 14px;
    cursor: pointer; transition: background-color .2s ease, transform .1s ease;
}
.bk-btn-primary { flex: 1; background: var(--bk-gold); color: var(--midnight-navy); }
.bk-btn-primary:hover:not(:disabled) { background: var(--bk-gold-bright); transform: translateY(-1px); }
.bk-btn-primary:disabled { background: var(--bk-navy-light); color: var(--bk-text-muted); cursor: not-allowed; }
.bk-btn-secondary { flex: 1; background: var(--bk-navy-light); color: var(--bk-white); }
.bk-btn-secondary:hover { background: var(--bk-accent); }
.bk-btn-wide { width: 100%; }

.d-none { display: none !important; }

/* =====================================================================
   RETURN KEY page (public/staff/return-key.php)
   Namespaced dk-* for the same reason as the bk-* block above.
   Formerly assets/css/return-key.css — merged in here so every page
   pulls from one stylesheet.
   ===================================================================== */

:root {
    --dk-navy-dark:   var(--deep-ocean);
    --dk-navy:        var(--deep-ocean);
    --dk-navy-light:  var(--deep-ocean-light);
    --dk-navy-panel:  var(--deep-ocean-light);
    --dk-accent:      var(--electric-blue);
    --dk-gold:        var(--soft-gold);
    --dk-gold-bright: var(--soft-gold-dark);
    --dk-text-muted:  var(--muted);
    --dk-danger:      var(--danger);
    --dk-success:     var(--teal-cyan);
    --dk-white:       var(--ivory);
}

/* ---------- RETURN CARD ---------- */
.return-card {
    background: var(--dk-navy); border-radius: 14px; padding: 28px; max-width: 640px;
}
.return-card h2 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.return-card .text-muted { color: var(--dk-text-muted) !important; font-size: 13px; }

/* ---------- STEP INDICATOR ---------- */
.step-indicator { display: flex; align-items: center; margin: 24px 0 28px; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.step-dot {
    width: 26px; height: 26px; border-radius: 50%; background: var(--dk-navy-light);
    color: var(--dk-text-muted); display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
}
.step-label { font-size: 10px; color: var(--dk-text-muted); white-space: nowrap; }
.step.active .step-dot { background: var(--dk-gold); color: var(--midnight-navy); }
.step.active .step-label { color: var(--dk-white); }
.step.completed .step-dot { background: var(--dk-success); color: var(--dk-white); }
.step-line { flex: 1; height: 2px; background: var(--dk-navy-light); margin: 0 6px 18px; }

/* ---------- SHARED WIZARD PANEL LOOK ---------- */
.select-key-panel, .pin-panel, .auth-success-panel, .photo-panel, .return-success-panel {
    background: var(--dk-navy-panel); border-radius: 12px; padding: 24px; text-align: center;
}
.select-key-panel { text-align: left; }
.select-key-panel h3 { font-size: 14px; font-weight: 700; margin-bottom: 16px; text-align: left; }

.wizard-step h3 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; }

/* ---------- STEP 1: KEY OPTION LIST ---------- */
.key-option-list { display: flex; flex-direction: column; gap: 12px; }
.key-option {
    display: flex; align-items: center; gap: 12px; background: var(--dk-navy-light);
    border: 1px solid transparent; border-radius: 10px; padding: 14px 16px; cursor: pointer;
}
.key-option:hover { border-color: var(--dk-accent); }
.key-option.selected { border-color: var(--dk-gold); }
.key-option input[type="radio"] { display: none; }

.key-option-icon {
    width: 32px; height: 32px; border-radius: 8px; background: var(--dk-navy-dark);
    display: flex; align-items: center; justify-content: center; color: var(--dk-gold);
}
.key-option-text { flex: 1; display: flex; flex-direction: column; }
.key-option-code { color: var(--dk-gold-bright); font-weight: 700; font-size: 13px; }
.key-option-room { color: var(--dk-text-muted); font-size: 12px; }

.key-option-radio {
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--dk-text-muted);
}
.key-option.selected .key-option-radio { border-color: var(--dk-gold); background: var(--dk-gold); }

/* ---------- STEP 2a: PIN ENTRY ---------- */
.lock-icon, .success-icon {
    width: 56px; height: 56px; border-radius: 50%; background: var(--dk-accent);
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    margin: 0 auto 10px;
}
.success-icon { background: rgba(23, 195, 178, 0.18); color: var(--dk-success); }
.lock-icon { color: var(--dk-white); }

.pin-error, .form-error { font-size: 13px; margin-top: 8px; }

/* ---------- STEP 2b: LOCK DISPLAY ---------- */
.lock-info-row { display: flex; gap: 12px; margin: 18px 0; }
.lock-info-box {
    flex: 1; background: var(--dk-navy-light); border-radius: 10px; padding: 14px;
}
.lock-info-label { font-size: 10px; color: var(--dk-text-muted); letter-spacing: .5px; margin-bottom: 6px; }
.lock-info-value { font-size: 18px; font-weight: 700; color: var(--dk-gold-bright); }

.confidential-note {
    background: rgba(226, 80, 60, 0.15); color: var(--danger); border-radius: 8px;
    padding: 10px 14px; font-size: 12px; display: flex; align-items: center; gap: 8px; text-align: left;
}

/* ---------- STEP 3: PHOTO CAPTURE ---------- */
.photo-warning {
    color: var(--soft-gold); font-size: 15px; font-weight: 700; display: flex; align-items: center;
    justify-content: center; gap: 8px; margin-bottom: 4px;
}
.photo-verification-label {
    display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
    margin: 16px 0 10px; text-align: left;
}

.photo-capture-box {
    position: relative; background: var(--dk-navy-light); border: 2px dashed var(--dk-accent);
    border-radius: 12px; min-height: 180px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; overflow: hidden;
}

.photo-capture-box video,
.photo-capture-box img {
    width: 100%; height: 220px; object-fit: cover; border-radius: 10px;
}

.photo-capture-placeholder, .photo-captured-state {
    display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--dk-text-muted);
    padding: 30px;
}
.photo-capture-placeholder i { font-size: 26px; color: var(--dk-gold); }
.photo-captured-state i { font-size: 26px; color: var(--dk-success); }
.photo-captured-state div { color: var(--dk-success); font-weight: 700; }

/* ---------- BUTTONS ---------- */
.btn-primary-wide, .btn-primary, .btn-secondary {
    border: none; border-radius: 10px; padding: 12px 20px; font-weight: 700; font-size: 14px;
}
.btn-primary-wide {
    width: 100%; margin-top: 20px; background: var(--dk-gold); color: var(--midnight-navy);
}
.btn-primary-wide:disabled { background: var(--dk-navy-light); color: var(--dk-text-muted); cursor: not-allowed; }
.btn-primary-wide:not(:disabled):hover { background: var(--dk-gold-bright); }

.btn-row { display: flex; gap: 12px; margin-top: 20px; }
.btn-secondary { flex: 1; background: var(--dk-navy-light); color: var(--dk-white); }
.btn-primary { flex: 1; background: var(--dk-gold); color: var(--midnight-navy); }
.btn-primary:hover { background: var(--dk-gold-bright); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- STEP 4: SUCCESS ---------- */
.return-success-panel p.text-success { color: var(--dk-success) !important; font-size: 13px; }

.text-danger { color: var(--danger) !important; }

/* =====================================================================
   PIN entry boxes — shared "gold hues" look for Borrow Key, Return Key,
   and anywhere else a 6-digit PIN is entered (.pin-box / .bk-pin-box).
   Each digit box is its own clearly separated gold-toned cell rather
   than a plain dark box, with a brighter gold glow as it fills in.
   ===================================================================== */
.pin-boxes, .bk-pin-boxes {
    display: flex; justify-content: center; gap: 14px; margin: 18px 0 8px;
}
.pin-box, .bk-pin-box {
    width: 44px; height: 52px; text-align: center; font-size: 22px; font-weight: 700;
    border-radius: 10px;
    border: 2px solid rgba(242, 167, 27, 0.35);
    background: linear-gradient(180deg, rgba(242, 167, 27, 0.14), rgba(242, 167, 27, 0.05));
    color: var(--soft-gold);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pin-box:focus, .bk-pin-box:focus {
    outline: none;
    border-color: var(--soft-gold);
    background: linear-gradient(180deg, rgba(242, 167, 27, 0.22), rgba(242, 167, 27, 0.08));
    box-shadow: 0 0 0 3px rgba(242, 167, 27, 0.18), 0 0 14px rgba(242, 167, 27, 0.35);
}

/* =========================================================================
   Password / PIN live-requirements checklist
   Shared component used by register.php and staff/settings.php so a new
   password or PIN shows the same "X -> check" criteria list as the person
   types, instead of only finding out what's wrong after submitting.
   ===================================================================== */
.field-label-row { display: flex; align-items: center; justify-content: space-between; }
.toggle-visibility {
    background: none; border: none; color: var(--soft-gold, #f2a71b);
    font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 0;
}
.toggle-visibility:hover { text-decoration: underline; }

.requirements-panel {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
    border-radius: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.req-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted, rgba(245,246,250,0.55));
    transition: color .15s ease;
}
.req-item .req-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    margin-top: 1px;
    background: rgba(255,255,255,0.08);
    color: var(--muted, rgba(245,246,250,0.55));
}
.req-item.req-met { color: var(--ivory, #f5f6fa); }
.req-item.req-met .req-icon { background: rgba(23,195,178,0.18); color: #17c3b2; }
.req-item.req-unmet .req-icon { background: rgba(226,80,60,0.15); color: var(--danger, #e2503c); }

.match-indicator { font-size: 12px; margin-top: 4px; min-height: 15px; }
.match-indicator.match-ok { color: #17c3b2; }
.match-indicator.match-bad { color: var(--danger, #e2503c); }

/* =========================================================================
   Phone-friendly Borrow / Return wizards
   - .dk-pin: ONE real input with six painted cells (see wizard-common.js).
     Cells share the row width, so the PIN fits any phone (the old six fixed
     44px boxes + gaps were 334px wide and pushed narrow screens sideways).
   - camera hint / fallback link
   - narrow-screen spacing so the step indicator and panels never force the
     page wider than the screen
   ===================================================================== */
.dk-pin { position: relative; width: 100%; max-width: 330px; margin: 18px auto 4px; }
.dk-pin-cells {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(6px, 2.4vw, 12px);
}
.dk-pin-cell {
    height: 52px; display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 700; line-height: 1;
    border-radius: 10px;
    border: 2px solid rgba(242, 167, 27, 0.35);
    background: linear-gradient(180deg, rgba(242, 167, 27, 0.14), rgba(242, 167, 27, 0.05));
    color: var(--soft-gold);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.dk-pin-cell.active {
    border-color: var(--soft-gold);
    background: linear-gradient(180deg, rgba(242, 167, 27, 0.22), rgba(242, 167, 27, 0.08));
    box-shadow: 0 0 0 3px rgba(242, 167, 27, 0.18), 0 0 14px rgba(242, 167, 27, 0.35);
}
/* The real input sits invisibly on top of the cells, so a tap anywhere on the
   PIN focuses it. font-size >= 16px stops iOS Safari zooming in on focus. */
.dk-pin-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; outline: none; background: transparent;
    opacity: 0; font-size: 16px; cursor: text; z-index: 1;
}
.dk-pin.invalid .dk-pin-cell { border-color: var(--danger); animation: dk-pin-shake .28s ease; }
@keyframes dk-pin-shake {
    0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}
.dk-pin-toggle-row { text-align: center; margin: 6px 0 0; }
.dk-pin-toggle {
    background: none; border: 0; padding: 6px 10px; cursor: pointer;
    color: var(--muted); font-size: 13px; text-decoration: underline;
}

.dk-photo-hint { text-align: center; font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.dk-photo-fallback { text-align: center; margin-top: 8px; }
.dk-linkbtn {
    background: none; border: 0; padding: 8px 6px; cursor: pointer;
    color: var(--soft-gold); font-size: 14px; text-decoration: underline;
}
.bk-photo-box, .photo-capture-box { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bk-photo-box video, .photo-capture-box video { background: #000; }

@media (max-width: 480px) {
    .content { padding: 16px 14px; }
    .bk-card, .return-card { padding: 18px 14px; }
    .bk-panel { padding: 16px 14px; }
    /* Show just the current step's name; the dots still show progress. */
    .bk-step:not(.active) .bk-step-label, .step:not(.active) .step-label { display: none; }
    .bk-step-label, .step-label { white-space: normal; text-align: center; max-width: 72px; }
    .bk-lock-info-row { flex-direction: column; }
}