body{
    font-family:'Prompt',sans-serif !important;
    margin:0;
    padding:0;
}

html,
body{
    min-height:100%;
}

body{
    overflow-x:hidden;
}

:root{
    --sidebar-width:264px;
}

/* =====================================================
   PAGE LAYOUT
   ===================================================== */

.page-layout{
    display:flex;
    align-items:stretch;
    width:100%;
    min-height:100vh;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =====================================================
   SIDEBAR
   ===================================================== */

.page-layout > .user-sidebar-wrapper{
    width:var(--sidebar-width) !important;
    min-width:var(--sidebar-width) !important;
    max-width:var(--sidebar-width) !important;
    flex:0 0 var(--sidebar-width) !important;
    align-self:stretch !important;
    min-height:100vh;
    height:auto;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box;
}

/* =====================================================
   MAIN
   ===================================================== */

.main-area{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
}

.main-content{
    flex:1 0 auto;
    width:100%;
    min-width:0;
    padding:30px;
    box-sizing:border-box;
}

/* กัน Calendar / ตารางที่กว้างเกินจอทำให้ทั้งเว็บล้น */
.main-content #calendar{
    width:100%;
    max-width:100%;
}

/* =====================================================
   FOOTER
   ===================================================== */

.site-footer{
    width:100%;
    padding:30px 20px;
    margin-top:auto;
    text-align:center;
    font-size:14px;
    color:#555;
    flex-shrink:0;
    box-sizing:border-box;
}

.footer-content{
    font-size:13px;
    line-height:1.8;
}

.footer-title{
    font-weight:600;
    margin-bottom:4px;
}

.footer-text{
    font-size:13px;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width:767.98px){

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

    .page-layout{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        min-height:0;
    }

    .page-layout > .user-sidebar-wrapper{
        display:block;
        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;
        flex:none !important;
        min-height:0 !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
    }

    .main-area{
        display:block;
        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;
    }

    .main-content{
        width:100% !important;
        max-width:100% !important;
        padding:20px 16px 0 !important;
        box-sizing:border-box;
    }

    .site-footer{
        width:100%;
        padding:24px 16px;
        box-sizing:border-box;
    }
}

/* จอมือถือเล็กมาก */
@media (max-width:380px){

    .main-content{
        padding-left:12px !important;
        padding-right:12px !important;
    }
}

/* =====================================================
   USER TOPBAR
   ===================================================== */

.user-desktop-topbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    padding:10px 20px 0;
    box-sizing:border-box;
}

/* Mobile ใช้ account bar ที่อยู่ใน Sidebar อยู่แล้ว */
@media (max-width:767.98px){

    .user-desktop-topbar{
        display:none !important;
    }
}

.user-topbar-account{
    display:flex;
    align-items:center;
    gap:10px;
    background:#fff;
    border:1px solid #e8edf3;
    border-radius:16px;
    padding:8px 14px 8px 8px;
    box-shadow:0 4px 18px rgba(15,23,42,.06);
}

.user-topbar-icon{
    width:38px;
    height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#f4f7fb;
    border-radius:10px;
    text-decoration:none;
    font-size:20px;
    transition:.2s ease;
}

.user-topbar-icon:hover{
    background:#eaf0f8;
}

.user-topbar-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    object-fit:cover;
    flex:0 0 44px;
    background:#e9eef5;
}

.user-topbar-avatar-default{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.user-topbar-info{
    min-width:130px;
    line-height:1.25;
}

.user-topbar-name{
    color:#172033;
    font-size:15px;
    font-weight:800;
    white-space:nowrap;
}

.user-topbar-role{
    margin-top:3px;
    color:#64748b;
    font-size:12px;
    white-space:nowrap;
}

@media (max-width:767.98px){
    .user-desktop-topbar{
        width:100%;
        padding:8px 16px 0;
        justify-content:flex-end;
        box-sizing:border-box;
    }

    .user-topbar-account{
        max-width:100%;
        padding:6px 9px 6px 6px;
        gap:7px;
        border-radius:13px;
    }

    .user-topbar-icon{
        width:34px;
        height:34px;
        font-size:17px;
        border-radius:9px;
    }

    .user-topbar-avatar{
        width:38px;
        height:38px;
        flex-basis:38px;
    }

    .user-topbar-info{
        min-width:0;
        max-width:120px;
    }

    .user-topbar-name{
        font-size:12px;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    .user-topbar-role{
        font-size:9px;
        overflow:hidden;
        text-overflow:ellipsis;
    }
}

@media (max-width:380px){
    .user-desktop-topbar{
        padding-left:10px;
        padding-right:10px;
    }

    .user-topbar-info{
        display:none;
    }

    .user-topbar-account{
        gap:5px;
    }

    .user-topbar-icon{
        width:32px;
        height:32px;
    }

    .user-topbar-avatar{
        width:34px;
        height:34px;
        flex-basis:34px;
    }
}

/* =====================================================
   HIDE DESKTOP TOPBAR ON MOBILE
   Mobile ใช้ Account Bar จาก Sidebar แทน
   ===================================================== */

@media screen and (max-width: 767.98px) {

    .main-area .user-desktop-topbar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
}

/* =====================================================
   ROOM COLOR LEGEND
   ===================================================== */

.room-calendar-legend{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid #e9edf3;
}

.room-calendar-legend-title{
    font-size:14px;
    font-weight:700;
    color:#172033;
    margin-bottom:10px;
}

.room-calendar-legend-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
}

.room-calendar-legend-item{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:13px;
    color:#334155;
}

.room-calendar-legend-color{
    width:14px;
    height:14px;
    border-radius:4px;
    display:inline-block;
    flex:0 0 14px;
}

/* Mobile */
@media (max-width:767.98px){

    .room-calendar-legend{
        margin-top:16px;
        padding-top:14px;
    }

    .room-calendar-legend-list{
        gap:8px 14px;
    }

    .room-calendar-legend-item{
        font-size:12px;
    }

}

.user-main-content{
    display:flex;
    flex-direction:row;
    align-items:stretch;
    width:100%;
    min-height:100vh;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.user-content{
    flex:1 1 auto;
    min-width:0;
    width:auto;
}

.user-main-content > .user-sidebar-wrapper{
    flex:0 0 264px;
    width:264px;
}

.user-main-content{
    display:flex;
    flex-direction:row;
}


/* =========================================================
   SRU LC ROOM BOOKING — MODERN BLUE THEME
   Inspired by supplied SRU booking reference.
   Font: Prompt
   ========================================================= */
:root{
    --sru-navy:#14295f;
    --sru-navy-2:#1a3272;
    --sru-blue:#2563eb;
    --sru-blue-2:#1d4ed8;
    --sru-sky:#eff6ff;
    --sru-bg:#f6f8fc;
    --sru-text:#172033;
    --sru-muted:#64748b;
    --sru-border:#e2e8f0;
    --sru-radius:14px;
    --sru-shadow:0 8px 28px rgba(15,23,42,.06);
}
html,body{
    font-family:'Prompt',sans-serif !important;
    background:var(--sru-bg);
    color:var(--sru-text);
}
body,button,input,select,textarea,.form-control,.form-select,
.dropdown-menu,.modal,.table,.btn{font-family:'Prompt',sans-serif !important}

/* Main canvas */
.user-page,.user-content,.main-content,.permission-page{
    background:var(--sru-bg) !important;
}

/* Sidebar */
.user-sidebar{
    background:linear-gradient(180deg,var(--sru-navy) 0%,#102352 100%) !important;
    box-shadow:8px 0 28px rgba(15,23,42,.08);
}
.user-sidebar-header{padding:24px 18px 18px !important}
.user-sidebar-header img{
    height:72px !important;
    max-width:138px !important;
    margin-bottom:12px !important;
}
.user-sidebar-title{font-size:16px !important;font-weight:700 !important}
.user-sidebar-subtitle{color:rgba(255,255,255,.72) !important}
.user-sidebar-divider{border-top-color:rgba(255,255,255,.12) !important}
.user-sidebar-menu{padding:0 12px !important}
.user-sidebar .nav-link{
    min-height:44px !important;
    padding:10px 13px !important;
    margin-bottom:4px !important;
    border-radius:11px !important;
    color:rgba(255,255,255,.84) !important;
    font-size:14px !important;
    font-weight:500 !important;
}
.user-sidebar .nav-link:hover{
    background:rgba(255,255,255,.09) !important;
    color:#fff !important;
    transform:translateX(2px);
}
.user-sidebar .nav-link.active,
.user-sidebar .nav-link[aria-current="page"]{
    background:linear-gradient(135deg,#2563eb,#3b82f6) !important;
    color:#fff !important;
    box-shadow:0 6px 18px rgba(37,99,235,.25);
}
.sidebar-menu-badge{
    background:#ef4444 !important;
    box-shadow:0 0 0 2px rgba(20,41,95,.8);
}
.user-sidebar-bottom{padding:12px 12px 18px !important}
.user-sidebar .logout-link{
    background:rgba(255,255,255,.08) !important;
    color:rgba(255,255,255,.86) !important;
    border:1px solid rgba(255,255,255,.10);
}
.user-sidebar .logout-link:hover{
    background:rgba(220,38,38,.18) !important;
    border-color:rgba(248,113,113,.25);
}

/* Content */
.user-content{padding:24px 30px 30px !important}
@media(max-width:767.98px){.user-content{padding:16px 16px 24px !important}}

/* Account bar */
.user-topbar-account,.user-desktop-topbar > div{
    border:1px solid var(--sru-border) !important;
    border-radius:14px !important;
    box-shadow:var(--sru-shadow) !important;
}
.user-topbar-icon{
    background:var(--sru-sky) !important;
    color:var(--sru-blue) !important;
}

/* Typography */
h1,h2,h3,h4,h5,h6{color:var(--sru-text);letter-spacing:-.15px}
h1{font-weight:700} h2,h3,h4{font-weight:600}

/* Cards */
.card,.permission-card,.booking-card,.dashboard-card,.stat-card,.summary-card{
    border:1px solid var(--sru-border) !important;
    border-radius:var(--sru-radius) !important;
    box-shadow:var(--sru-shadow) !important;
    background:#fff !important;
}

/* Buttons */
.btn{
    border-radius:10px !important;
    font-weight:500 !important;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-primary{
    background:var(--sru-blue) !important;
    border-color:var(--sru-blue) !important;
    box-shadow:0 4px 12px rgba(37,99,235,.16);
}
.btn-primary:hover,.btn-primary:focus{
    background:var(--sru-blue-2) !important;
    border-color:var(--sru-blue-2) !important;
    transform:translateY(-1px);
}
.btn-outline-primary{
    color:var(--sru-blue) !important;
    border-color:#bfdbfe !important;
    background:#fff !important;
}
.btn-outline-primary:hover{
    color:#fff !important;background:var(--sru-blue) !important;
    border-color:var(--sru-blue) !important;
}

/* Forms */
.form-control,.form-select{
    border:1px solid #dbe3ef !important;
    border-radius:10px !important;
    min-height:42px;
    color:var(--sru-text);
    background:#fff;
}
.form-control:focus,.form-select:focus{
    border-color:#60a5fa !important;
    box-shadow:0 0 0 3px rgba(37,99,235,.10) !important;
}

/* Tables */
.table{--bs-table-border-color:#e9eef5;color:var(--sru-text)}
.table thead th{
    background:#f8fafc !important;
    color:#475569 !important;
    font-weight:600 !important;
    border-bottom:1px solid var(--sru-border) !important;
}
.table tbody tr:hover{background:#f8fbff !important}

/* Alerts */
.alert{border-radius:12px !important;border-width:1px !important}

/* Notifications */
.notification-dropdown,.settings-dropdown{
    border:1px solid var(--sru-border) !important;
    border-radius:15px !important;
    box-shadow:0 18px 45px rgba(15,23,42,.14) !important;
}
.notification-tabs button.active{
    background:#eaf2ff !important;color:var(--sru-blue) !important;
}
.notification-item.unread{background:#f5f9ff !important}
.notification-item-icon{background:#eaf2ff !important;color:var(--sru-blue)}

/* Calendar */
.fc{font-family:'Prompt',sans-serif !important}
.fc .fc-button-primary{
    background:var(--sru-blue) !important;
    border-color:var(--sru-blue) !important;
    border-radius:9px !important;
}
.fc .fc-button-primary:hover{
    background:var(--sru-blue-2) !important;
    border-color:var(--sru-blue-2) !important;
}
.fc .fc-daygrid-day.fc-day-today{background:#eff6ff !important}
.fc .fc-event{border-radius:7px !important;border:0 !important;padding:2px 5px !important}

/* Footer */
.site-footer{color:#94a3b8 !important;padding:26px 20px !important}
.footer-title{color:#64748b}

/* Mobile */
.mobile-drawer-trigger{background:var(--sru-blue) !important;border-radius:11px !important}
a{color:var(--sru-blue)} a:hover{color:var(--sru-blue-2)}
::selection{background:#dbeafe;color:#172033}



/* =========================================================
   SRU ROOM BOOKING — TABLER UI OVERRIDES
   Visual layer only. Existing PHP/DB/booking logic untouched.
   Font: Prompt
   ========================================================= */
:root{
    --tblr-primary:#206bc4;
    --sru-primary:#0d6efd;
    --sru-bg:#f6f8fb;
    --sru-border:#e6eaf0;
    --sru-text:#182433;
    --sru-muted:#667085;
    --sru-sidebar:#ffffff;
    --sru-sidebar-width:256px;
}

html, body{
    font-family:'Prompt',sans-serif !important;
    background:var(--sru-bg) !important;
    color:var(--sru-text);
}

body{
    min-width:0 !important;
    overflow-x:hidden !important;
}

*, *::before, *::after{
    font-family:inherit;
}

a{ color:inherit; }

/* Page canvas */
.user-main-content,
.user-page-content,
.admin-main,
.date-main{
    background:var(--sru-bg);
}

.user-main-content,
.user-page-content{
    min-width:0 !important;
}

/* Generic cards/forms get Tabler-like treatment without changing markup */
.card{
    border:1px solid var(--sru-border) !important;
    border-radius:12px !important;
    box-shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.03);
}

.form-control,
.form-select{
    border-color:#d9dee7 !important;
    border-radius:8px !important;
    min-height:42px;
}

.form-control:focus,
.form-select:focus{
    border-color:#80aef2 !important;
    box-shadow:0 0 0 .2rem rgba(32,107,196,.12) !important;
}

.btn{
    border-radius:8px !important;
    font-weight:500;
}

.table{
    --bs-table-bg:transparent;
}

.alert{
    border-radius:10px !important;
}

/* Mobile: prevent accidental page-wide horizontal scrolling */
@media (max-width: 767.98px){
    .container,
    .container-fluid{
        max-width:100% !important;
    }
}

/* =====================================================
   SRU ROOM BOOKING — DARK MODE
   UI only: no backend / database changes
   ===================================================== */
html[data-theme="dark"]{
    color-scheme:dark;
    --sru-bg:#111827;
    --sru-text:#e5e7eb;
    --sru-muted:#9ca3af;
    --sru-border:#374151;
    --sru-sky:#172554;
    --sru-shadow:0 10px 30px rgba(0,0,0,.24);
}

html[data-theme="dark"],
html[data-theme="dark"] body{
    background:#111827 !important;
    color:#e5e7eb !important;
}

html[data-theme="dark"] .main-content,
html[data-theme="dark"] .user-content,
html[data-theme="dark"] .user-page,
html[data-theme="dark"] .user-main-content,
html[data-theme="dark"] .main-area,
html[data-theme="dark"] .permission-page{
    background:#111827 !important;
    color:#e5e7eb !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6{
    color:#f3f4f6 !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .permission-card,
html[data-theme="dark"] .booking-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu{
    background:#1f2937 !important;
    color:#e5e7eb !important;
    border-color:#374151 !important;
    box-shadow:var(--sru-shadow) !important;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small,
html[data-theme="dark"] .user-topbar-role,
html[data-theme="dark"] .footer-text,
html[data-theme="dark"] .site-footer{
    color:#9ca3af !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select{
    background:#111827 !important;
    color:#e5e7eb !important;
    border-color:#4b5563 !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#6b7280 !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus{
    border-color:#60a5fa !important;
    box-shadow:0 0 0 3px rgba(96,165,250,.14) !important;
}

html[data-theme="dark"] .table{
    --bs-table-bg:#1f2937;
    --bs-table-color:#e5e7eb;
    --bs-table-border-color:#374151;
    color:#e5e7eb !important;
}

html[data-theme="dark"] .table thead th{
    background:#18212f !important;
    color:#d1d5db !important;
    border-color:#374151 !important;
}

html[data-theme="dark"] .table tbody tr:hover{
    background:#273449 !important;
}

html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light{
    background:#1f2937 !important;
    color:#e5e7eb !important;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom{
    border-color:#374151 !important;
}

html[data-theme="dark"] .user-topbar-account{
    background:#1f2937 !important;
    border-color:#374151 !important;
    box-shadow:0 4px 18px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .user-topbar-icon{
    color:#d1d5db !important;
}

html[data-theme="dark"] .user-topbar-icon:hover{
    background:#374151 !important;
    color:#93c5fd !important;
}

html[data-theme="dark"] .user-topbar-name{
    color:#f3f4f6 !important;
}

html[data-theme="dark"] .notification-dropdown,
html[data-theme="dark"] .settings-dropdown{
    background:#1f2937 !important;
    color:#e5e7eb !important;
    border-color:#374151 !important;
    box-shadow:0 18px 45px rgba(0,0,0,.38) !important;
}

html[data-theme="dark"] .notification-header,
html[data-theme="dark"] .settings-header{
    border-color:#374151 !important;
}

html[data-theme="dark"] .notification-header h3,
html[data-theme="dark"] .settings-header h3,
html[data-theme="dark"] .settings-item-title,
html[data-theme="dark"] .notification-item-title{
    color:#f3f4f6 !important;
}

html[data-theme="dark"] .notification-item-message,
html[data-theme="dark"] .notification-item-time,
html[data-theme="dark"] .settings-item-subtitle{
    color:#9ca3af !important;
}

html[data-theme="dark"] .notification-item.unread{
    background:#172554 !important;
}

html[data-theme="dark"] .settings-item:hover{
    background:#374151 !important;
}

html[data-theme="dark"] .settings-item-icon,
html[data-theme="dark"] .notification-item-icon{
    background:#172554 !important;
    color:#93c5fd !important;
}

html[data-theme="dark"] .notification-footer{
    border-color:#374151 !important;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer{
    border-color:#374151 !important;
}

html[data-theme="dark"] .btn-close{
    filter:invert(1) grayscale(1);
}

html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-outline-secondary{
    background:#374151 !important;
    color:#e5e7eb !important;
    border-color:#4b5563 !important;
}

html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-outline-secondary:hover{
    background:#4b5563 !important;
}

html[data-theme="dark"] .alert-light{
    background:#1f2937 !important;
    color:#e5e7eb !important;
    border-color:#374151 !important;
}

html[data-theme="dark"] .fc{
    color:#e5e7eb !important;
}

html[data-theme="dark"] .fc-theme-standard td,
html[data-theme="dark"] .fc-theme-standard th,
html[data-theme="dark"] .fc-theme-standard .fc-scrollgrid{
    border-color:#374151 !important;
}

html[data-theme="dark"] .fc .fc-col-header-cell-cushion,
html[data-theme="dark"] .fc .fc-daygrid-day-number,
html[data-theme="dark"] .fc .fc-list-day-text,
html[data-theme="dark"] .fc .fc-list-day-side-text{
    color:#d1d5db !important;
}

html[data-theme="dark"] .fc .fc-daygrid-day,
html[data-theme="dark"] .fc .fc-timegrid-slot,
html[data-theme="dark"] .fc .fc-list-event:hover td{
    background:#1f2937 !important;
}

html[data-theme="dark"] .fc .fc-daygrid-day.fc-day-today{
    background:#172554 !important;
}

html[data-theme="dark"] .fc .fc-list-empty{
    background:#1f2937 !important;
}

html[data-theme="dark"] .locked-input{
    background:#374151 !important;
    color:#9ca3af !important;
}

/* Keep sidebar visually strong in both themes */
html[data-theme="dark"] .user-sidebar{
    box-shadow:8px 0 28px rgba(0,0,0,.25);
}

/* Theme transition only for UI surfaces */
html.theme-transition,
html.theme-transition *{
    transition:background-color .18s ease,color .18s ease,border-color .18s ease !important;
}


/* SRU Theme Toggle - UI only */
.sru-theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--tblr-border-color, #dfe3e8);
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #1f2937);
    border-radius: 8px;
    padding: .45rem .7rem;
    font: inherit;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sru-theme-toggle:hover {
    background: var(--tblr-bg-surface-secondary, #f5f7fb);
}
[data-theme="dark"] .sru-theme-toggle {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
}

/* =========================================================
   FINAL SRU UI PATCH — Prompt / Theme / Dropdown / Calendar
   Visual layer only. Booking rules and database flow untouched.
   ========================================================= */

html, body, body *, button, input, select, textarea, option,
.table, .table *, .form-control, .form-select, .modal, .modal * {
    font-family:'Prompt',sans-serif !important;
}

/* FullCalendar: override its bundled font everywhere */
.fc, .fc *, .fc button, .fc input, .fc select, .fc textarea,
.fc .fc-toolbar-title, .fc .fc-button, .fc .fc-col-header-cell-cushion,
.fc .fc-daygrid-day-number, .fc .fc-event, .fc .fc-list-event,
.fc .fc-list-day-text, .fc .fc-list-day-side-text {
    font-family:'Prompt',sans-serif !important;
}

/* Bootstrap / Tabler / native table text */
table, table *, .table, .table *, .dataTable, .dataTable * {
    font-family:'Prompt',sans-serif !important;
}

/* Desktop account bar */
.user-desktop-topbar{
    position:relative !important;
    z-index:10050 !important;
    width:100% !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    padding:10px 0 18px !important;
    margin:0 !important;
}
.user-topbar-account{
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    padding:7px 10px 7px 7px !important;
    background:rgba(255,255,255,.82) !important;
    border:1px solid rgba(214,223,236,.92) !important;
    border-radius:16px !important;
    box-shadow:0 8px 26px rgba(15,23,42,.07) !important;
    backdrop-filter:blur(14px) saturate(130%);
    -webkit-backdrop-filter:blur(14px) saturate(130%);
}
.user-topbar-icon{
    width:38px !important;
    height:38px !important;
    border:0 !important;
    border-radius:11px !important;
    background:#f1f5fb !important;
    color:#1e293b !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    cursor:pointer !important;
    font-size:19px !important;
    line-height:1 !important;
    box-shadow:none !important;
}
.user-topbar-icon:hover{background:#e8eef8 !important;transform:translateY(-1px);}
.user-topbar-avatar{width:44px !important;height:44px !important;flex:0 0 44px !important;border-radius:50% !important;object-fit:cover !important;background:#e8eef7 !important;}
.user-topbar-info{min-width:140px !important;line-height:1.25 !important;}
.user-topbar-name{font-size:14px !important;font-weight:700 !important;color:#172033 !important;white-space:nowrap !important;}
.user-topbar-role{font-size:11px !important;color:#64748b !important;margin-top:3px !important;white-space:nowrap !important;}

/* One source of truth for dropdown position/interaction */
.user-desktop-topbar .notification-dropdown,
.user-desktop-topbar .settings-dropdown{
    position:fixed !important;
    width:min(380px,calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    z-index:2147483000 !important;
}
.user-desktop-topbar .settings-dropdown{width:min(300px,calc(100vw - 24px)) !important;}

.notification-dropdown,
.settings-dropdown{
    border:1px solid rgba(215,225,238,.90) !important;
    border-radius:20px !important;
    box-shadow:0 22px 55px rgba(15,23,42,.16) !important;
    background:rgba(255,255,255,.88) !important;
    backdrop-filter:blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(150%) !important;
    overflow:hidden !important;
}
.notification-dropdown.show,
.settings-dropdown.show{pointer-events:auto !important;}
.notification-header,.settings-header{border-color:rgba(226,232,240,.82) !important;}
.notification-header h3,.settings-header h3{font-family:'Prompt',sans-serif !important;color:#172033 !important;}
.notification-list{max-height:min(430px,calc(100vh - 220px)) !important;overscroll-behavior:contain;}
.notification-item{background:rgba(255,255,255,.45) !important;padding:13px 16px !important;}
.notification-item:hover{background:rgba(239,246,255,.76) !important;}
.notification-item.unread{background:rgba(239,246,255,.86) !important;}
.notification-item-icon{background:rgba(232,242,255,.88) !important;}
.notification-unread-dot{background:#1877f2 !important;}

/* Theme menu */
.settings-item{min-height:58px !important;}
.settings-item-icon{background:#edf4ff !important;}
.settings-item-title{font-family:'Prompt',sans-serif !important;}
.settings-item-subtitle{font-family:'Prompt',sans-serif !important;}

/* All fields */
input, textarea, select, .form-control, .form-select, .form-check-label,
.form-label, .input-group-text {
    font-family:'Prompt',sans-serif !important;
}

/* Logout is always white on the red button */
.user-sidebar .logout-link,
.user-sidebar .logout-link span,
.user-sidebar .logout-link i{
    color:#fff !important;
}

/* Approval page cards */
.admin-page, .admin-page *{font-family:'Prompt',sans-serif !important;}
.admin-page .admin-topbar{position:relative;z-index:10050;}
.approval-card{overflow:visible !important;}

/* Mobile liquid-glass quick actions: notification + setting + hamburger */
@media (max-width:767.98px){
    .mobile-header-actions{
        top:10px !important;
        right:60px !important;
        gap:5px !important;
        z-index:2147483001 !important;
    }
    .mobile-header-actions .notification-btn,
    .mobile-header-actions .settings-btn,
    .mobile-drawer-trigger{
        width:42px !important;
        height:42px !important;
        border-radius:13px !important;
        background:rgba(13,110,253,.82) !important;
        border:1px solid rgba(255,255,255,.18) !important;
        box-shadow:0 10px 28px rgba(13,110,253,.24) !important;
        backdrop-filter:blur(16px) saturate(140%) !important;
        -webkit-backdrop-filter:blur(16px) saturate(140%) !important;
    }
    .mobile-drawer-trigger{top:10px !important;right:10px !important;z-index:2147483002 !important;}
    .mobile-header-actions .notification-dropdown,
    .mobile-header-actions .settings-dropdown{
        width:min(380px,calc(100vw - 20px)) !important;
        max-width:calc(100vw - 20px) !important;
        max-height:calc(100dvh - 84px) !important;
        border-radius:22px !important;
        background:rgba(255,255,255,.84) !important;
        backdrop-filter:blur(24px) saturate(150%) !important;
        -webkit-backdrop-filter:blur(24px) saturate(150%) !important;
        box-shadow:0 24px 65px rgba(15,23,42,.22) !important;
    }
    .mobile-header-actions .notification-list{max-height:min(420px,calc(100dvh - 260px)) !important;}
    .mobile-header-actions .notification-item{padding:14px 15px !important;}
    .mobile-header-actions .notification-header{padding:16px 16px 10px !important;}
    .mobile-header-actions .settings-menu{padding:7px !important;}
    .mobile-header-actions .settings-item{padding:11px !important;}

    /* Drawer itself: no page scroll/extra blank space */
    .user-sidebar-wrapper{overflow:visible !important;}
    .user-sidebar{max-height:calc(100dvh - 20px) !important;}
}

/* Small mobile */
@media (max-width:380px){
    .mobile-header-actions{right:54px !important;}
    .mobile-header-actions .notification-btn,
    .mobile-header-actions .settings-btn,
    .mobile-drawer-trigger{width:40px !important;height:40px !important;border-radius:12px !important;}
}

/* Dark theme — consistent across the new dropdowns */
html[data-theme="dark"] .user-topbar-account{background:rgba(31,41,55,.82) !important;border-color:rgba(75,85,99,.82) !important;}
html[data-theme="dark"] .user-topbar-icon{background:#263244 !important;color:#f3f4f6 !important;}
html[data-theme="dark"] .user-topbar-icon:hover{background:#334155 !important;}
html[data-theme="dark"] .user-topbar-name{color:#f8fafc !important;}
html[data-theme="dark"] .notification-dropdown,
html[data-theme="dark"] .settings-dropdown{background:rgba(31,41,55,.90) !important;border-color:#374151 !important;}
html[data-theme="dark"] .notification-item{background:rgba(31,41,55,.50) !important;color:#e5e7eb !important;}
html[data-theme="dark"] .notification-item:hover{background:rgba(51,65,85,.75) !important;}
html[data-theme="dark"] .notification-item.unread{background:rgba(30,58,138,.55) !important;}
html[data-theme="dark"] .notification-header h3,
html[data-theme="dark"] .settings-header h3,
html[data-theme="dark"] .settings-item-title{color:#f8fafc !important;}
html[data-theme="dark"] .settings-item-subtitle,
html[data-theme="dark"] .notification-item-message,
html[data-theme="dark"] .notification-item-time{color:#aeb8c7 !important;}
html[data-theme="dark"] .settings-item:hover{background:#334155 !important;}

/* Avoid horizontal scroll from cards/tables/calendars */
html,body{overflow-x:hidden !important;}
.main-content,.user-content,.admin-content{min-width:0 !important;max-width:100% !important;}
.fc,.table-responsive{max-width:100%;}


/* =========================================================
   FINAL GLOBAL OVERRIDES
   ========================================================= */
*, *::before, *::after { box-sizing:border-box; }
body, button, input, select, textarea, table, th, td, .form-control, .form-select, .fc, .fc * { font-family:'Prompt',sans-serif !important; }
.user-sidebar-bottom .logout-link,
.user-sidebar-bottom .logout-link span,
.user-sidebar-bottom .logout-link i { color:#fff !important; }