/* ============================================================================
   StudentHub — TailAdmin UI/UX clone (lavender brand)
   Faithful clone of TailAdmin's design language on the existing Bootstrap markup.
   Presentation only — no logic changes. Font: Outfit (same as TailAdmin).
   ============================================================================ */
:root, [data-bs-theme=light] {
    --brand-25:#F6F4FE; --brand-50:#EEEAFE; --brand-100:#E0D9FC; --brand-200:#C9BEF8;
    --brand-300:#A99BF2; --brand-400:#8F7DEC; --brand-500:#7C6CE7; --brand-600:#6958D5;
    --brand-700:#5747B8; --brand-800:#473A96; --brand-900:#362C74;
    --gray-25:#FCFCFD; --gray-50:#F9FAFB; --gray-100:#F2F4F7; --gray-200:#E4E7EC;
    --gray-300:#D0D5DD; --gray-400:#98A2B3; --gray-500:#667085; --gray-600:#475467;
    --gray-700:#344054; --gray-800:#1D2939; --gray-900:#101828; --black:#101828;
    --success-50:#ECFDF3; --success-500:#12B76A; --success-600:#039855; --success-700:#027A48;
    --error-50:#FEF3F2; --error-500:#F04438; --error-600:#D92D20; --error-700:#B42318;
    --warning-50:#FFFAEB; --warning-500:#F79009; --warning-600:#DC6803; --warning-700:#B54708;
    --bluelight-50:#F0F9FF; --bluelight-500:#0BA5EC; --bluelight-600:#0086C9;
    --radius-lg:8px; --radius-xl:12px; --radius-2xl:16px; --radius-3xl:24px;
    --shadow-xs:0 1px 2px 0 rgba(16,24,40,.05);
    --shadow-sm:0 1px 3px 0 rgba(16,24,40,.10),0 1px 2px 0 rgba(16,24,40,.06);
    --shadow-md:0 4px 8px -2px rgba(16,24,40,.10),0 2px 4px -2px rgba(16,24,40,.06);
    --shadow-lg:0 12px 16px -4px rgba(16,24,40,.08),0 4px 6px -2px rgba(16,24,40,.03);
    --shadow-xl:0 20px 24px -4px rgba(16,24,40,.08),0 8px 8px -4px rgba(16,24,40,.03);
    --sh-primary:var(--brand-500); --sh-primary-hover:var(--brand-600); --sh-primary-soft:var(--brand-50);
    --sh-primary-rgb:124,108,231;
    --sh-navy:var(--gray-800); --sh-bg:var(--gray-50); --sh-surface:#fff; --sh-border:var(--gray-200);
    --sh-text:var(--gray-800); --sh-muted:var(--gray-500);
    --sh-success:var(--success-500); --sh-warning:var(--warning-500); --sh-danger:var(--error-500); --sh-info:var(--bluelight-500);
    --sh-success-soft:var(--success-50); --sh-warning-soft:var(--warning-50); --sh-danger-soft:var(--error-50); --sh-info-soft:var(--bluelight-50);
    --sh-radius-sm:var(--radius-lg); --sh-radius-md:var(--radius-xl); --sh-radius-lg:var(--radius-2xl);
    --sh-shadow-sm:var(--shadow-xs); --sh-shadow-md:var(--shadow-lg); --sh-shadow-lg:var(--shadow-xl);
    --theme-default:#7C6CE7 !important; --theme-secondary:#A99BF2 !important;
    --bs-primary:#7C6CE7; --bs-primary-rgb:124,108,231; --bs-link-color:#7C6CE7; --bs-link-hover-color:#6958D5;
    --bs-body-font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
}
body { background-color:var(--gray-50) !important; font-family:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif !important; color:var(--gray-800); font-size:14px; -webkit-font-smoothing:antialiased; }
.page-body,.page-wrapper .page-body-wrapper .page-body { background-color:var(--gray-50) !important; }
h1,h2,h3,h4,h5,h6 { color:var(--gray-800); font-weight:600; }
a { color:var(--brand-500);} a:hover{ color:var(--brand-600);}
.text-muted{ color:var(--gray-500) !important;}
.font-primary,.txt-primary,.text-primary{ color:var(--brand-500) !important;}
.bg-primary,.badge.bg-primary{ background-color:var(--brand-500) !important;}
::selection{ background:var(--brand-50); color:var(--gray-900);}
::-webkit-scrollbar{ width:8px; height:8px;} ::-webkit-scrollbar-thumb{ background:var(--gray-300); border-radius:20px;} ::-webkit-scrollbar-thumb:hover{ background:var(--gray-400);}
.tap-top{ background:var(--brand-500) !important; border:none !important; box-shadow:var(--shadow-lg);} .tap-top svg{ stroke:#fff;}

/* ============================== SIDEBAR ============================== */
.page-sidebar{ background:#fff !important; border-right:1px solid var(--gray-200) !important; box-shadow:none !important;}
.page-sidebar #sidebar-menu{ padding:0;}
.page-sidebar .sidebar-menu{ padding:8px 16px 24px;}
.mobile-logo{ padding:20px 6px 10px;} .mobile-logo img{ max-height:40px; width:auto;}
.sidebar-menu .sh-nav-section,.sidebar-menu .menu-group-title,.sidebar-menu .sidebar-title{
    list-style:none; font-size:12px; font-weight:500; line-height:20px; text-transform:uppercase;
    letter-spacing:.6px; color:var(--gray-400); padding:16px 12px 8px; margin:0; pointer-events:none; user-select:none;}
.sidebar-menu .sh-nav-section:first-child{ padding-top:8px;}
.sidebar-menu .sidebar-list{ margin:2px 0;}
.sidebar-menu .sidebar-list .sidebar-link{
    position:relative; display:flex; align-items:center; gap:12px; border-radius:var(--radius-lg) !important;
    padding:9px 12px !important; margin:0; font-size:14px; font-weight:500; color:var(--gray-700) !important;
    transition:background .15s,color .15s;}
.sidebar-menu .sidebar-list .sidebar-link span{ color:inherit !important; font-weight:500;}
.sidebar-menu .sidebar-list .sidebar-link .stroke-icon,
.sidebar-menu .sidebar-list .sidebar-link svg,
.sidebar-menu .sidebar-list .sidebar-link > i{
    width:22px; height:22px; min-width:22px; margin:0; display:inline-flex; align-items:center; justify-content:center;
    stroke:var(--gray-500); fill:var(--gray-500); color:var(--gray-500); font-size:16px; transition:.15s;}
.sidebar-menu .sidebar-list .sidebar-link:hover{ background:var(--gray-100) !important; color:var(--gray-700) !important;}
.sidebar-menu .sidebar-list .sidebar-link.active{ background:var(--brand-50) !important; color:var(--brand-500) !important; box-shadow:none;}
.sidebar-menu .sidebar-list .sidebar-link.active .stroke-icon,
.sidebar-menu .sidebar-list .sidebar-link.active svg,
.sidebar-menu .sidebar-list .sidebar-link.active > i{ stroke:var(--brand-500) !important; fill:var(--brand-500) !important; color:var(--brand-500) !important;}
.sidebar-menu .sidebar-list .sidebar-link::before{ display:none !important;}
.sidebar-menu .sidebar-list .sidebar-link .feather{ stroke:var(--gray-400); width:16px; height:16px;}
.sidebar-menu .sidebar-submenu{ margin:4px 0 6px; padding-left:0; list-style:none;}
.sidebar-menu .sidebar-submenu li a{
    display:flex; align-items:center; gap:10px; border-radius:var(--radius-lg) !important;
    padding:8px 12px 8px 34px !important; font-size:13.5px; font-weight:500; color:var(--gray-500) !important; transition:.15s;}
.sidebar-menu .sidebar-submenu li a .svg-menu{ stroke:var(--gray-400); width:14px; height:14px;}
.sidebar-menu .sidebar-submenu li a:hover,
.sidebar-menu .sidebar-submenu li.active > a,
.sidebar-menu .sidebar-submenu li a.active{ background:var(--brand-50) !important; color:var(--brand-500) !important;}
.sidebar-menu .sidebar-submenu li a:hover .svg-menu,
.sidebar-menu .sidebar-submenu li.active > a .svg-menu{ stroke:var(--brand-500);}
.left-arrow,.right-arrow{ color:var(--brand-500);} .left-arrow svg,.right-arrow svg{ stroke:var(--brand-500);}

/* ============================== HEADER ============================== */
.page-header{ position:sticky; top:0; z-index:8; background:#fff !important; border-bottom:1px solid var(--gray-200) !important; box-shadow:none !important;}
.page-main-header,.page-header .page-main-header{ background:transparent !important; box-shadow:none !important;}
.page-header .logo-wrapper{ padding-left:8px;} .page-header .logo-wrapper img,.header .logo-wrapper img{ max-height:42px; width:auto;}
.toggle-sidebar .line{ background-color:var(--gray-700) !important;} .close-btn:hover .toggle-sidebar{ transform:scale(1.05);}
.page-header .header-search{ display:flex; align-items:center; gap:8px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-lg); padding:9px 44px 9px 16px; min-width:300px; color:var(--gray-400); position:relative; transition:.15s;}
.page-header .header-search:focus-within{ border-color:var(--brand-300); box-shadow:0 0 0 3px rgba(var(--sh-primary-rgb),.10);}
.page-header .header-search input{ border:none; background:transparent; outline:none; width:100%; font-size:14px; color:var(--gray-800);}
.page-header .header-search i{ color:var(--gray-400);}
.page-header .header-search::after{ content:"⌘K"; position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:500; color:var(--gray-400); background:#fff; border:1px solid var(--gray-200); border-radius:6px; padding:2px 8px; line-height:1.4;}
.page-header .sh-icon-btn{ width:44px; height:44px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center; background:var(--gray-50); border:1px solid var(--gray-200); color:var(--gray-500); position:relative; transition:.15s; text-decoration:none;}
.page-header .sh-icon-btn:hover{ background:var(--gray-100); color:var(--gray-700);}
.page-header .sh-icon-btn .sh-dot{ position:absolute; top:10px; right:12px; width:8px; height:8px; border-radius:50%; background:var(--error-500); border:2px solid #fff;}
.page-header .header-right{ align-items:center; gap:12px;}
.profile-dropdown.custom-dropdown > .d-flex{ padding:4px 8px 4px 4px; border-radius:9999px; transition:background .15s;}
.profile-dropdown.custom-dropdown:hover > .d-flex{ background:var(--gray-50);}
.profile-dropdown img{ border-radius:9999px; border:1px solid var(--gray-200);}
.profile-dropdown h5{ color:var(--gray-800) !important; font-weight:600; font-size:14px;}
.profile-dropdown span{ color:var(--gray-500) !important; font-size:12px;}
.profile-dropdown .sh-caret{ color:var(--gray-400); margin-left:6px; font-size:12px; transition:transform .2s;}
.profile-dropdown:hover .sh-caret{ transform:rotate(180deg);}
.custom-dropdown .custom-menu{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); padding:8px; overflow:hidden;}
.custom-dropdown .custom-menu ul li{ border-radius:var(--radius-lg); transition:background .15s;}
.custom-dropdown .custom-menu ul li:hover{ background:var(--gray-100);}
.custom-dropdown .custom-menu a{ color:var(--gray-700); font-size:14px;}
.header-right .svg-color{ fill:var(--gray-500); stroke:var(--gray-500);}
.serchinput .search-form input{ border-radius:var(--radius-lg); border:1px solid var(--gray-200);}
@media (max-width:991px){ .page-header .header-search{ display:none !important;} }

/* ============================ PAGE TITLE / BREADCRUMB ============================ */
.row.page-title{ align-items:center; padding:22px 4px 20px;}
.row.page-title h3{ font-size:22px; font-weight:600; color:var(--gray-800); margin:0;}
.breadcrumb{ background:transparent; padding:4px 0 0; margin:0; font-size:14px;}
.breadcrumb .breadcrumb-item{ color:var(--gray-500);}
.breadcrumb .breadcrumb-item.active{ color:var(--brand-500); font-weight:500;}
.breadcrumb .breadcrumb-item a .svg-color{ fill:var(--gray-400); stroke:var(--gray-400);}
.breadcrumb .breadcrumb-item a:hover .svg-color{ fill:var(--brand-500); stroke:var(--brand-500);}
.breadcrumb-item+.breadcrumb-item::before{ color:var(--gray-300);}

/* ================================ CARDS (rounded-2xl) ================================ */
.card{ background:#fff !important; border:1px solid var(--gray-200) !important; border-radius:var(--radius-2xl) !important; box-shadow:var(--shadow-xs) !important; transition:box-shadow .2s;}
.card:hover{ box-shadow:var(--shadow-sm) !important;}
.card .card-header{ background:transparent !important; border-bottom:1px solid var(--gray-100) !important; padding:20px 24px !important; border-radius:var(--radius-2xl) var(--radius-2xl) 0 0 !important; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.card .card-header h5,.card .card-header h4{ font-weight:600; color:var(--gray-800); margin:0; font-size:18px;}
.card .card-header p{ color:var(--gray-500);}
.card .card-body{ padding:24px !important;}
.card > .card-header > *:only-child{ margin-left:auto;}
.card > .card-header h5+.btn,.card > .card-header h4+.btn,.card > .card-header .btn{ margin-left:auto;}
.chart-area{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xs);}
.chart-area .header h3,.chart-area h3{ color:var(--gray-800); font-weight:600;}
.card.card-h-100,.card-h-100{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xs); height:100%; transition:box-shadow .2s;}
.card-h-100:hover{ box-shadow:var(--shadow-sm);}

/* =========================== KPI METRIC CARDS (TailAdmin) =========================== */
/* TailAdmin: icon box (48px rounded-xl gray-100) on top, label sm gray-500, big value */
.row.first-row-boxs{ margin:0 -12px; row-gap:24px;}
.row.first-row-boxs [class*="col-"]{ padding:0 12px;}
.first-row-boxs .card-h-100{ border:1px solid var(--gray-200); border-radius:var(--radius-2xl); box-shadow:var(--shadow-xs); overflow:hidden;}
.first-row-boxs .card-body[class*="boxs"]{
    background:#fff !important; border-radius:var(--radius-2xl) !important; padding:24px !important;
    position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:20px; min-height:150px;}
.first-row-boxs .card-body[class*="boxs"]::before{
    content:"\f0d6"; font-family:"Font Awesome 6 Free"; font-weight:900;
    width:48px; height:48px; border-radius:var(--radius-xl);
    display:flex; align-items:center; justify-content:center; font-size:20px;
    background:var(--gray-100); color:var(--gray-800);}
.first-row-boxs .card-body.boxs4::before{ content:"\f0d6";} /* income - money */
.first-row-boxs .card-body.boxs8::before{ content:"\f53a";}
.first-row-boxs .card-body.boxs2::before{ content:"\f017";} /* pending - clock */
.first-row-boxs .card-body.boxs3::before{ content:"\f1ad";} /* hostels - building */
.first-row-boxs .card-body.boxs5::before{ content:"\f0c0";} /* students */
.first-row-boxs .card-body.boxs1::before{ content:"\f236";} /* beds */
.first-row-boxs .card-body.boxs6::before{ content:"\f200";}
.first-row-boxs .card-body.boxs7::before{ content:"\f201";}
.first-row-boxs .card-body[class*="boxs"] .col-12,
.first-row-boxs .card-body[class*="boxs"] .row{ display:flex; flex-direction:column; align-items:flex-start !important; gap:8px; width:100%; margin:0;}
.first-row-boxs .card-body[class*="boxs"] .col-12 span,
.first-row-boxs .card-body[class*="boxs"] > span{ color:var(--gray-500) !important; font-size:14px !important; font-weight:400 !important; margin:0 !important; order:1;}
.first-row-boxs .card-body[class*="boxs"] .col-12 h4,
.first-row-boxs .card-body[class*="boxs"] > h4{ color:var(--gray-800) !important; font-size:30px !important; line-height:38px; font-weight:700 !important; letter-spacing:-.4px; margin:0 !important; order:2;}
.first-row-boxs .card-body[class*="boxs"] .col-12 h4 span,
.first-row-boxs .card-body[class*="boxs"] > h4 span{ font-size:30px !important; color:var(--gray-800) !important;}
.counter-value{ display:inline-block;}
.welcome-container{ background:linear-gradient(135deg,var(--brand-500),var(--brand-700)) !important; border-radius:var(--radius-2xl) !important; box-shadow:var(--shadow-md);}

/* ================================ BUTTONS ================================ */
.btn{ border-radius:var(--radius-lg); font-weight:500; font-size:14px; padding:10px 16px; box-shadow:none; transition:all .15s;}
.btn:active{ transform:translateY(1px);}
.btn-primary,.btn-submit,.btn-next,.btn-tertiary,.btn-gold,.open-bill-modal{
    background:var(--brand-500) !important; background-image:none !important; border:1px solid var(--brand-500) !important; color:#fff !important; box-shadow:var(--shadow-xs) !important;}
.btn-primary:hover,.btn-submit:hover,.btn-next:hover,.btn-tertiary:hover,.open-bill-modal:hover{ background:var(--brand-600) !important; border-color:var(--brand-600) !important; color:#fff !important;}
.btn-primary.text-black{ color:#fff !important;}
.btn-secondary{ background:#fff !important; border:1px solid var(--gray-300) !important; color:var(--gray-700) !important; box-shadow:var(--shadow-xs) !important;}
.btn-secondary:hover{ background:var(--gray-50) !important; border-color:var(--gray-300) !important; color:var(--gray-800) !important;}
.btn-air-light,.btn-outline,.btn-outline-secondary,.btn-back{ background:#fff !important; border:1px solid var(--gray-300) !important; color:var(--gray-700) !important; box-shadow:var(--shadow-xs) !important;}
.btn-air-light:hover,.btn-outline:hover,.btn-outline-secondary:hover,.btn-back:hover{ background:var(--gray-50) !important; border-color:var(--gray-300) !important; color:var(--gray-800) !important;}
.btn-ghost{ background:transparent !important; border:1px solid transparent !important; color:var(--brand-500) !important;}
.btn-ghost:hover{ background:var(--brand-50) !important; color:var(--brand-600) !important;}
.btn-success,.btn-approve{ background:var(--success-500) !important; border-color:var(--success-500) !important; color:#fff !important;}
.btn-success:hover,.btn-approve:hover{ filter:brightness(.96); color:#fff !important;}
.btn-danger,.btn-reject,.btn-delete-image{ background:var(--error-500) !important; border-color:var(--error-500) !important; color:#fff !important;}
.btn-danger:hover,.btn-reject:hover{ filter:brightness(.96); color:#fff !important;}
.btn-dark{ background:var(--gray-800) !important; border-color:var(--gray-800) !important;} .btn-dark:hover{ background:var(--gray-900) !important;}
.btn-warning{ background:var(--warning-500) !important; border-color:var(--warning-500) !important; color:#fff !important;}
.btn.btn-sm{ border-radius:var(--radius-lg); padding:6px 10px;}
.action-btn,.btn-icon,td .btn-sm.btn-light,.table td .btn-light{ border:1px solid var(--gray-200) !important; background:#fff !important; color:var(--gray-500) !important;}
.action-btn:hover,.btn-icon:hover{ background:var(--brand-50) !important; color:var(--brand-500) !important; border-color:var(--brand-50) !important;}

/* ============================ BADGES / STATUS CHIPS ============================ */
.badge{ font-weight:500; border-radius:9999px; padding:4px 10px; font-size:12px; letter-spacing:0; line-height:18px;}
.badge.bg-success,.badge-approved{ background:var(--success-50) !important; color:var(--success-700) !important;}
.badge.bg-danger,.badge-rejected{ background:var(--error-50) !important; color:var(--error-700) !important;}
.badge.bg-warning,.badge-pending{ background:var(--warning-50) !important; color:var(--warning-700) !important;}
.badge.bg-info{ background:var(--bluelight-50) !important; color:var(--bluelight-600) !important;}
.badge.bg-primary{ background:var(--brand-50) !important; color:var(--brand-500) !important;}
.badge.bg-secondary{ background:var(--brand-50) !important; color:var(--brand-500) !important;}
.badge.bg-light,.badge-status{ background:var(--gray-100) !important; color:var(--gray-700) !important;}
.sh-delta{ display:inline-flex; align-items:center; gap:3px; font-size:13px; font-weight:500; padding:2px 8px; border-radius:9999px;}
.sh-delta.up{ background:var(--success-50); color:var(--success-600);} .sh-delta.down{ background:var(--error-50); color:var(--error-600);}

/* ================================ TABLES ================================ */
.product-table,.table-responsive{ border-radius:var(--radius-xl);}
table.dataTable,table.display,.table{ border-collapse:separate !important; border-spacing:0; color:var(--gray-700);}
table.dataTable thead th,table.display thead th,.table thead th{
    background:var(--gray-50) !important; color:var(--gray-500) !important; font-weight:500 !important;
    font-size:12px !important; text-transform:uppercase; letter-spacing:.4px;
    border-bottom:1px solid var(--gray-100) !important; border-top:none !important; padding:13px 20px !important; vertical-align:middle;}
table.dataTable tbody td,table.display tbody td,.table tbody td{
    padding:15px 20px !important; border-top:1px solid var(--gray-100) !important; color:var(--gray-700); font-size:14px; vertical-align:middle;}
table.dataTable tbody tr,.table tbody tr{ transition:background .12s;}
table.dataTable tbody tr:hover,table.display tbody tr:hover,.table-hover tbody tr:hover{ background:var(--gray-50) !important;}
.product-table h4{ font-weight:600; color:var(--gray-800); font-size:14px;}
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{
    border:1px solid var(--gray-300) !important; border-radius:var(--radius-lg) !important; padding:8px 12px !important; height:auto; color:var(--gray-700); outline:none; box-shadow:var(--shadow-xs); transition:.15s;}
.dataTables_wrapper .dataTables_filter input:focus,.dataTables_wrapper .dataTables_length select:focus{ border-color:var(--brand-300) !important; box-shadow:0 0 0 3px rgba(var(--sh-primary-rgb),.10) !important;}
.dataTables_wrapper .dataTables_info{ color:var(--gray-500); font-size:13px;}
.dataTables_wrapper .dataTables_paginate .paginate_button{ border-radius:var(--radius-lg) !important; border:1px solid var(--gray-200) !important; color:var(--gray-700) !important; background:#fff !important; margin:0 3px; padding:7px 13px !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{ background:var(--brand-50) !important; border-color:var(--brand-50) !important; color:var(--brand-500) !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{ background:var(--brand-500) !important; border-color:var(--brand-500) !important; color:#fff !important;}
.dataTables_empty{ color:var(--gray-500); padding:34px 0 !important; font-size:14px;}

/* ============================ PAGINATION ============================ */
.pagination{ gap:6px;}
.pagination .page-link{ border:1px solid var(--gray-200) !important; color:var(--gray-700) !important; background:#fff !important; border-radius:var(--radius-lg) !important; padding:8px 13px; transition:.15s;}
.pagination .page-link:hover{ background:var(--brand-50) !important; color:var(--brand-500) !important; border-color:var(--brand-50) !important;}
.pagination .page-item.active .page-link{ background:var(--brand-500) !important; border-color:var(--brand-500) !important; color:#fff !important;}
.pagination .page-item.disabled .page-link{ opacity:.5;}

/* ================================ FORMS (h-11 rounded-lg) ================================ */
.form-label,.col-form-label{ color:var(--gray-700); font-weight:500; font-size:14px; margin-bottom:6px;}
.form-control,.form-select,textarea.form-control{
    border:1px solid var(--gray-300) !important; border-radius:var(--radius-lg) !important; color:var(--gray-800) !important;
    background:#fff !important; min-height:44px; padding:10px 16px; font-size:14px; box-shadow:var(--shadow-xs) !important; transition:border-color .15s,box-shadow .15s;}
textarea.form-control{ min-height:90px;}
.form-control::placeholder{ color:var(--gray-400);}
.form-control:focus,.form-select:focus,textarea.form-control:focus{ border-color:var(--brand-300) !important; box-shadow:0 0 0 3px rgba(var(--sh-primary-rgb),.10) !important; background:#fff !important;}
.form-control:disabled,.form-control[readonly]{ background:var(--gray-50) !important; color:var(--gray-500) !important;}
.input-group-text{ background:var(--gray-50); border:1px solid var(--gray-300); color:var(--gray-500); border-radius:var(--radius-lg);}
.form-check-input{ border:1.5px solid var(--gray-300);}
.form-check-input:checked{ background-color:var(--brand-500) !important; border-color:var(--brand-500) !important;}
.form-check-input:focus{ border-color:var(--brand-300); box-shadow:0 0 0 3px rgba(var(--sh-primary-rgb),.15);}
.checkbox-solid-info .form-check-input:checked,.form-switch .form-check-input:checked{ background-color:var(--brand-500) !important; border-color:var(--brand-500) !important;}
.form-control.is-invalid{ border-color:var(--error-500) !important;} .invalid-feedback{ color:var(--error-500); font-size:12.5px;}

/* ============================ SELECT2 / CHOICES / FLATPICKR ============================ */
.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{ border:1px solid var(--gray-300) !important; border-radius:var(--radius-lg) !important; min-height:44px !important; background:#fff; display:flex; align-items:center;}
.select2-container--default .select2-selection--single .select2-selection__rendered{ color:var(--gray-800); line-height:42px; padding-left:14px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:42px;}
.select2-container--default.select2-container--focus .select2-selection--single,.select2-container--default.select2-container--open .select2-selection--single{ border-color:var(--brand-300) !important; box-shadow:0 0 0 3px rgba(var(--sh-primary-rgb),.10) !important;}
.select2-dropdown{ border:1px solid var(--gray-200) !important; border-radius:var(--radius-xl) !important; box-shadow:var(--shadow-lg); overflow:hidden;}
.select2-container--default .select2-results__option--highlighted[aria-selected],.select2-container--default .select2-results__option--highlighted{ background:var(--brand-500) !important; color:#fff !important;}
.select2-container--default .select2-results__option[aria-selected=true]{ background:var(--brand-50) !important; color:var(--brand-500) !important;}
.select2-container--default .select2-selection--multiple .select2-selection__choice{ background:var(--brand-50) !important; border:1px solid var(--brand-100) !important; color:var(--brand-500) !important; border-radius:6px;}
.choices__inner{ border:1px solid var(--gray-300) !important; border-radius:var(--radius-lg) !important; min-height:44px; background:#fff;}
.choices.is-focused .choices__inner{ border-color:var(--brand-300) !important; box-shadow:0 0 0 3px rgba(var(--sh-primary-rgb),.10);}
.choices__list--dropdown,.choices__list[aria-expanded]{ border:1px solid var(--gray-200) !important; border-radius:var(--radius-xl) !important; box-shadow:var(--shadow-lg);}
.choices__list--dropdown .choices__item--selectable.is-highlighted{ background:var(--brand-50) !important; color:var(--brand-500);}
.choices__list--multiple .choices__item{ background:var(--brand-500) !important; border:1px solid var(--brand-500) !important; border-radius:6px;}
.flatpickr-calendar{ border-radius:var(--radius-xl); box-shadow:var(--shadow-lg) !important; border:1px solid var(--gray-200);}
.flatpickr-day.selected,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.endRange{ background:var(--brand-500) !important; border-color:var(--brand-500) !important; color:#fff !important;}
.flatpickr-day:hover{ background:var(--brand-50) !important; color:var(--brand-500);}
.flatpickr-day.today{ border-color:var(--brand-500) !important;}
.flatpickr-months .flatpickr-month,.flatpickr-weekdays,span.flatpickr-weekday{ color:var(--gray-700);}
.flatpickr-monthDropdown-months,.numInput{ color:var(--gray-800) !important;}

/* ================================ TABS ================================ */
.nav-tabs{ border-bottom:1px solid var(--gray-200);}
.nav-tabs .nav-link{ color:var(--gray-500); border:none; font-weight:500; border-radius:8px 8px 0 0;}
.nav-tabs .nav-link:hover{ color:var(--brand-500);}
.nav-tabs .nav-link.active{ color:var(--brand-500) !important; background:transparent; border-bottom:2px solid var(--brand-500);}
.nav-pills .nav-link.active{ background:var(--brand-500) !important; color:#fff;} .nav-pills .nav-link{ color:var(--gray-700);}
.accordion-button:not(.collapsed){ background:var(--brand-50); color:var(--brand-500); box-shadow:none;}
.accordion-button:focus{ border-color:var(--brand-300); box-shadow:0 0 0 3px rgba(var(--sh-primary-rgb),.10);}
.accordion-item{ border:1px solid var(--gray-200); border-radius:var(--radius-xl); overflow:hidden;}

/* ============================ DROPDOWN MENUS ============================ */
.dropdown-menu{ border:1px solid var(--gray-200); border-radius:var(--radius-2xl); box-shadow:var(--shadow-lg); padding:8px;}
.dropdown-item{ border-radius:var(--radius-lg); color:var(--gray-700); padding:8px 12px; font-size:14px;}
.dropdown-item:hover,.dropdown-item:focus{ background:var(--gray-100); color:var(--gray-800);}
.dropdown-item.active,.dropdown-item:active{ background:var(--brand-500); color:#fff;}

/* ============================ ALERTS / TOASTS ============================ */
.alert{ background:#fff !important; border:1px solid var(--gray-200) !important; border-left:4px solid var(--brand-500) !important; border-radius:var(--radius-xl) !important; box-shadow:var(--shadow-lg) !important; color:var(--gray-700) !important;}
.alert .message-notify{ padding:14px 16px;}
.alert .message-icon{ width:36px; height:36px; min-width:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; margin-right:12px; background:var(--brand-50); color:var(--brand-500);}
.alert.alert-success,.alert-success{ border-left-color:var(--success-500) !important;}
.alert.alert-success .message-icon,.alert-success .message-icon{ background:var(--success-50); color:var(--success-600);}
.alert.alert-danger,.alert-danger{ border-left-color:var(--error-500) !important;}
.alert.alert-danger .message-icon,.alert-danger .message-icon{ background:var(--error-50); color:var(--error-600);}
.alert.alert-warning,.alert-warning{ border-left-color:var(--warning-500) !important;}
.alert.alert-warning .message-icon,.alert-warning .message-icon{ background:var(--warning-50); color:var(--warning-600);}
.alert.alert-info,.alert-info{ border-left-color:var(--bluelight-500) !important;}
.alert .close{ color:var(--gray-400) !important;}

/* ============================ MODALS (rounded-2xl) ============================ */
.modal-content{ border:none !important; border-radius:var(--radius-2xl) !important; box-shadow:var(--shadow-xl) !important; overflow:hidden;}
.modal-header{ background:#fff !important; background-image:none !important; border-bottom:1px solid var(--gray-100) !important; padding:20px 24px !important; color:var(--gray-800) !important;}
.modal-header .modal-title,.modal-title{ font-weight:600; color:var(--gray-800) !important;}
.modal-header .btn-close{ filter:none !important;}
.modal-body{ padding:24px !important; color:var(--gray-700);}
.modal-footer{ border-top:1px solid var(--gray-100) !important; padding:16px 24px !important;}
.modal .btn-close{ background:var(--gray-100); border-radius:8px; opacity:1; padding:10px; transition:background .15s;}
.modal .btn-close:hover{ background:var(--error-50);}
.modal-backdrop.show{ opacity:.4; background:#101828;}
.swal2-popup{ border-radius:var(--radius-2xl) !important;}
.swal2-styled.swal2-confirm{ background:var(--brand-500) !important; border-radius:var(--radius-lg) !important; box-shadow:none !important;}
.swal2-styled.swal2-cancel{ background:var(--gray-100) !important; color:var(--gray-700) !important; border-radius:var(--radius-lg) !important;}
.modal_close{ background:var(--error-500) !important; border-color:var(--error-500) !important; color:#fff !important;}
.bg-secondary{ background-color:var(--brand-500) !important;}
.badge.bed-type-badge.bg-secondary,span.badge.bed-type-badge{ background:var(--brand-50) !important; color:var(--brand-500) !important;}
.tooltip-inner{ background:var(--gray-900); border-radius:8px; font-size:12px;}
.tooltip .tooltip-arrow::before{ border-top-color:var(--gray-900);}

/* ============================ CONTENT RHYTHM ============================ */
.page-body{ padding:4px 16px 40px !important;}
.page-body > .container-fluid{ max-width:1536px; margin-inline:auto;}
.page-body .container-fluid + .container-fluid{ margin-top:4px;}

/* ============================ EMPTY STATE ============================ */
.sh-empty,.empty-state{ text-align:center; padding:48px 20px; color:var(--gray-500);}
.sh-empty .sh-empty-icon,.empty-state i{ width:64px; height:64px; border-radius:var(--radius-xl); margin:0 auto 14px; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-50); color:var(--brand-500); font-size:26px;}
.sh-empty h6,.empty-state h6{ color:var(--gray-800); font-weight:600; margin-bottom:4px;}

/* ============================ HOSTEL LAYOUT (.hl-scope) ============================ */
.hl-scope{
    --hl-gold:#7C6CE7 !important; --hl-gold-dark:#6958D5 !important; --hl-gold-soft:#EEEAFE !important; --hl-gold-line:#E0D9FC !important;
    --hl-ink:#1D2939 !important; --hl-muted:#667085 !important; --hl-line:#E4E7EC !important; --hl-bg:#F9FAFB !important;
    --hl-shadow:0 1px 3px rgba(16,24,40,.10) !important; --hl-shadow-lg:0 12px 16px -4px rgba(16,24,40,.08) !important;}
.hl-scope .hl-page-title .hl-badge-icon i,.hl-scope .hl-btn-gold,.hl-scope .hl-btn-gold:hover,
.hl-scope button.hl-btn.hl-btn-beds,.hl-scope button.hl-btn.hl-btn-beds i{ color:#fff !important;}
.hl-scope .hl-btn-gold,.hl-scope button.hl-btn.hl-btn-beds{ background:linear-gradient(135deg,var(--brand-500),var(--brand-600)) !important; box-shadow:0 6px 16px rgba(124,108,231,.3) !important;}
.hl-scope button.hl-btn.hl-btn-items{ border:1.5px solid var(--brand-500) !important; color:var(--brand-500) !important; background:#fff !important;}
.hl-scope button.hl-btn.hl-btn-items:hover{ background:var(--brand-50) !important;}
.hl-scope button.hl-btn.hl-btn-items i{ color:var(--brand-500) !important;}
.hl-scope .hl-badge-icon{ background:linear-gradient(135deg,var(--brand-500),var(--brand-600)) !important; box-shadow:0 6px 16px rgba(124,108,231,.35) !important;}
.hl-scope .bed-available,.hl-scope .status-available,.hl-scope .chip-available{ background:var(--success-50) !important; color:var(--success-700) !important;}
.hl-scope .bed-occupied,.hl-scope .status-occupied,.hl-scope .chip-occupied{ background:var(--brand-50) !important; color:var(--brand-500) !important;}

/* ============================ MEAL SUMMARY ============================ */
.meal-summary-wrap .ms-seg button.active,#msSeg button.active{ background:var(--brand-500) !important; color:#fff !important; box-shadow:var(--shadow-xs) !important;}
.meal-summary-wrap .ms-head-icon{ background:var(--brand-50) !important; color:var(--brand-500) !important;}
#mealTakeInModal .modal-header{ background:#fff !important; color:var(--gray-800) !important;}
#mealTakeInModal table thead th{ background:var(--gray-50) !important; color:var(--gray-500) !important;}
#mealTakeInModal .mti-subbar{ background:var(--brand-50) !important; border-bottom:1px solid var(--gray-200) !important;}
#mealTakeInModal .badge-count{ background:var(--brand-500) !important; color:#fff !important;}

/* ============================ PREMIUM CONFIRM MODAL ============================ */
#tooltipmodal .modal-dialog,.sh-confirm .modal-dialog{ max-width:420px !important;}
#tooltipmodal .modal-content,.sh-confirm .modal-content{ text-align:center; padding:8px 8px 4px;}
#tooltipmodal .modal-header,.sh-confirm .modal-header{ border:none !important; padding:20px 24px 0 !important; justify-content:center; position:relative;}
#tooltipmodal .modal-header .btn-close,.sh-confirm .modal-header .btn-close{ position:absolute; top:14px; right:14px;}
#tooltipmodal .sh-confirm-icon,.sh-confirm .sh-confirm-icon{ width:64px; height:64px; border-radius:var(--radius-2xl); margin:8px auto 4px; display:flex; align-items:center; justify-content:center; font-size:26px; background:var(--error-50); color:var(--error-500);}
#tooltipmodal .modal-title,.sh-confirm .modal-title{ width:100%; font-size:19px; font-weight:600;}
#tooltipmodal .modal-body,.sh-confirm .modal-body{ padding:6px 28px 8px !important;}
#tooltipmodal .modal-body h5,.sh-confirm .modal-body h5{ font-size:14px; font-weight:400; color:var(--gray-500); line-height:1.6;}
#tooltipmodal .modal-footer,.sh-confirm .modal-footer{ border:none !important; justify-content:center; gap:10px; padding:8px 24px 22px !important;}
#tooltipmodal .modal-footer .btn,.sh-confirm .modal-footer .btn{ min-width:120px; padding:10px 18px;}

/* ============================ LOGIN (TailAdmin signin) ============================ */
.login_design{ min-height:100vh; background:#fff;}
.login-card,.login-card.login-dark{ background:#fff !important; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 30px;}
.login-card .login-main{ width:100%; max-width:400px; box-shadow:none; padding:0; background:transparent;}
.login-card .logo{ margin-bottom:32px; text-align:center;}
.login-card .logo img{ max-width:210px !important; width:auto;}
.login-card .login-main h2{ font-size:30px; line-height:38px; font-weight:600; color:var(--gray-800); margin-bottom:8px; text-align:left !important;}
.login-card .login-main > form > p.text-center{ text-align:left !important; color:var(--gray-500); margin-bottom:28px; font-size:14px;}
.login-card .theme-form .form-group{ margin-bottom:20px;}
.login-card .theme-form label{ color:var(--gray-700); font-weight:500; font-size:14px;}
.login-card .theme-form input.form-control{ min-height:44px; border-radius:var(--radius-lg);}
.login-card .theme-form .show-hide{ top:62%; right:16px;} .login-card .theme-form .show-hide span{ color:var(--gray-400);}
.login-card .btn-primary.btn-block{ min-height:48px; border-radius:var(--radius-lg); font-weight:500; font-size:15px;}
.login_design .auth-bg,.login_design .col-md-8 .auth-bg{ position:relative; overflow:hidden; background:linear-gradient(140deg,#7C6CE7 0%,#6958D5 45%,#4B3FB0 100%) !important;}
.login_design .auth-bg .bg-overlay.bg-yellow,.login_design .auth-bg .bg-overlay,.login_design .auth-bg .bg-overlay.bg-primary.bg-yellow{ background:transparent !important; background-color:transparent !important; opacity:1 !important;}
.login_design .auth-bg::before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%); top:-160px; right:-120px;}
.login_design .auth-bg::after{ content:""; position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%); bottom:-160px; left:-100px;}
.login_design .bg-bubbles li{ background:rgba(255,255,255,.12) !important; border-radius:14px;}
.login_design .testi-contain h4{ font-weight:400 !important; line-height:1.6 !important;}
.login_design .testi-contain i.fa-quote-left{ color:rgba(255,255,255,.55); font-size:30px;}
.login_design .carousel-indicators [data-bs-target]{ background:rgba(255,255,255,.5); border-radius:40px; height:6px;}
.login_design .carousel-indicators .active{ background:#fff; width:26px;}

/* ============================ RESPONSIVE ============================ */
@media (max-width:991px){ .login-card,.login-card.login-dark{ min-height:auto; padding:40px 20px;} .row.page-title h3{ font-size:20px;} .card .card-body{ padding:20px !important;} }
@media (max-width:575px){ .row.page-title{ padding:16px 4px 12px;} table.dataTable thead th,.table thead th{ padding:12px !important; font-size:11px;} .first-row-boxs .card-body[class*="boxs"]{ min-height:auto;} }

/* ============================================================================
   AUTH — brand-new sign-in layout (TailAdmin signin structure)
   ============================================================================ */
.sh-auth{ display:flex; min-height:100vh; background:#fff; }
.sh-auth__form{ flex:1 1 50%; display:flex; align-items:center; justify-content:center; padding:40px 28px; }
.sh-auth__form-inner{ width:100%; max-width:400px; }
.sh-auth__brand{ margin-bottom:44px; }
.sh-auth__brand img{ max-height:44px; width:auto; }
.sh-auth__head h1{ font-size:30px; line-height:38px; font-weight:600; color:var(--gray-800); margin:0 0 8px; }
.sh-auth__head p{ font-size:14px; color:var(--gray-500); margin:0 0 28px; }
.sh-auth__fields .sh-field{ margin-bottom:20px; }
.sh-auth__fields label{ display:block; font-size:14px; font-weight:500; color:var(--gray-700); margin-bottom:6px; }
.sh-auth__fields .sh-req{ color:var(--error-500); margin-left:2px; }
.sh-auth__fields .form-control{ height:44px; border-radius:var(--radius-lg); border:1px solid var(--gray-300); box-shadow:var(--shadow-xs); }
.sh-auth .sh-pass{ position:relative; }
.sh-auth .sh-pass .show-hide{ position:absolute; top:50%; right:16px; transform:translateY(-50%); cursor:pointer; z-index:3; }
.sh-auth .sh-pass .show-hide span{ color:var(--gray-400); }
.sh-auth__row{ display:flex; align-items:center; justify-content:space-between; margin:6px 0 24px; gap:12px; }
.sh-auth__row .sh-remember{ display:flex; align-items:center; gap:8px; padding:0; margin:0; min-height:auto; }
.sh-auth__row .sh-remember .form-check-input{ float:none; margin:0; width:20px; height:20px; }
.sh-auth__row .sh-remember .form-check-label{ font-size:14px; color:var(--gray-600); margin:0; cursor:pointer; }
.sh-auth__forgot{ font-size:14px; color:var(--brand-500); font-weight:500; text-decoration:none; }
.sh-auth__forgot:hover{ color:var(--brand-600); }
.sh-auth__submit{ height:48px; border-radius:var(--radius-lg); font-size:15px; font-weight:500; box-shadow:var(--shadow-xs); }
.sh-auth__foot{ margin-top:32px; font-size:13px; color:var(--gray-400); text-align:center; }

/* right brand panel */
.sh-auth__aside{ position:relative; flex:1 1 50%; overflow:hidden;
    background:linear-gradient(150deg,#7C6CE7 0%,#6958D5 48%,#4B3FB0 100%);
    display:flex; align-items:center; justify-content:center; }
.sh-auth__grid{ position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:40px 40px; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%); }
.sh-auth__aside::before{ content:""; position:absolute; width:460px; height:460px; border-radius:50%; top:-140px; right:-120px; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); }
.sh-auth__aside::after{ content:""; position:absolute; width:380px; height:380px; border-radius:50%; bottom:-140px; left:-110px; background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%); }
.sh-auth__aside-inner{ position:relative; z-index:2; max-width:420px; padding:40px; color:#fff; text-align:center; }
.sh-auth__mark{ width:84px; height:84px; margin:0 auto 26px; border-radius:22px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.sh-auth__mark img{ width:52px; height:auto; filter:brightness(0) invert(1); }
.sh-auth__aside-inner h2{ color:#fff; font-size:30px; font-weight:700; margin:0 0 12px; }
.sh-auth__aside-inner p{ color:rgba(255,255,255,.82); font-size:15px; line-height:1.7; margin:0 0 28px; }
.sh-auth__feats{ list-style:none; padding:0; margin:0; text-align:left; display:inline-flex; flex-direction:column; gap:14px; }
.sh-auth__feats li{ display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.92); font-size:14.5px; }
.sh-auth__feats li span{ width:34px; height:34px; min-width:34px; border-radius:10px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
.sh-auth__form-inner{ animation:shFadeUp .6s cubic-bezier(.22,.61,.36,1) both; }
.sh-auth__aside-inner{ animation:shFadeIn .8s ease both; }

@media (max-width:991px){
    .sh-auth__aside{ display:none; }
    .sh-auth__form{ flex-basis:100%; }
}

/* ============================================================================
   REUSABLE PREMIUM COMPONENTS (design-system, opt-in, no per-page risk)
   Use these classes in any Blade to get consistent premium structure.
   ============================================================================ */

/* ---- page header (title + subtitle + actions) ---- */
.sh-page-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:20px 4px 18px; }
.sh-page-header .sh-ph-title{ font-size:24px; font-weight:600; color:var(--gray-800); margin:0; letter-spacing:-.2px; }
.sh-page-header .sh-ph-sub{ font-size:14px; color:var(--gray-500); margin:4px 0 0; }
.sh-page-header .sh-ph-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }

/* ---- form sections (grouped fields inside a card) ---- */
.form-section{ padding:22px 0; border-top:1px solid var(--gray-100); }
.form-section:first-child{ border-top:none; padding-top:4px; }
.form-section-title{ font-size:15px; font-weight:600; color:var(--gray-800); margin:0 0 4px; }
/* when used as a full-width divider inside a .row form */
.col-12 > .form-section-title{ margin:14px 0 16px; padding-bottom:10px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; gap:8px; }
.col-12 > .form-section-title::before{ content:""; width:4px; height:16px; border-radius:4px; background:var(--brand-500); display:inline-block; }
.row > .col-12:first-child > .form-section-title{ margin-top:0; }
.form-section-desc{ font-size:13px; color:var(--gray-500); margin:0 0 18px; }
.form-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding-top:18px; margin-top:6px; border-top:1px solid var(--gray-100); }
.form-actions.sticky{ position:sticky; bottom:0; background:#fff; z-index:2; }

/* ---- detail key/value rows ---- */
.sh-kv{ display:grid; grid-template-columns:180px 1fr; gap:10px 16px; }
.sh-kv dt{ color:var(--gray-500); font-size:13.5px; font-weight:500; }
.sh-kv dd{ color:var(--gray-800); font-size:14px; margin:0; font-weight:500; }
.sh-detail-hero{ display:flex; align-items:center; gap:18px; padding:22px 24px; }
.sh-detail-hero .sh-avatar{ width:64px; height:64px; border-radius:16px; background:var(--brand-50); color:var(--brand-500); display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:600; overflow:hidden; }
.sh-detail-hero .sh-avatar img{ width:100%; height:100%; object-fit:cover; }
.sh-detail-hero h4{ margin:0; font-size:20px; font-weight:600; color:var(--gray-800); }
.sh-detail-hero .sh-detail-sub{ color:var(--gray-500); font-size:13.5px; }

/* ---- skeleton loaders ---- */
.sh-skeleton{ background:#eef0f6; background-image:linear-gradient(90deg,#eef0f6 0px,#f7f8fc 40px,#eef0f6 80px); background-size:600px 100%; animation:shShimmer 1.3s linear infinite; border-radius:8px; }
.sh-skeleton.line{ height:12px; margin:8px 0; } .sh-skeleton.line.sm{ width:40%; } .sh-skeleton.line.lg{ width:80%; }
.sh-skeleton.card{ height:120px; border-radius:var(--radius-2xl); }

/* ---- side drawer (contextual panel) ---- */
.sh-drawer{ position:fixed; top:0; right:0; height:100vh; width:440px; max-width:92vw; background:#fff; box-shadow:var(--shadow-xl); border-left:1px solid var(--gray-200); z-index:1055; transform:translateX(100%); transition:transform .25s cubic-bezier(.22,.61,.36,1); display:flex; flex-direction:column; }
.sh-drawer.open{ transform:none; }
.sh-drawer__header{ padding:20px 24px; border-bottom:1px solid var(--gray-100); display:flex; align-items:center; justify-content:space-between; }
.sh-drawer__body{ padding:24px; overflow-y:auto; flex:1; }
.sh-drawer__footer{ padding:16px 24px; border-top:1px solid var(--gray-100); display:flex; gap:10px; justify-content:flex-end; }
.sh-drawer-backdrop{ position:fixed; inset:0; background:rgba(16,24,40,.4); z-index:1054; opacity:0; visibility:hidden; transition:opacity .2s; }
.sh-drawer-backdrop.open{ opacity:1; visibility:visible; }

/* ---- toast (top-right stack) ---- */
.sh-toast{ background:#fff; border:1px solid var(--gray-200); border-left:4px solid var(--brand-500); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:14px 16px; display:flex; gap:12px; align-items:flex-start; min-width:300px; }
.sh-toast.success{ border-left-color:var(--success-500);} .sh-toast.error{ border-left-color:var(--error-500);} .sh-toast.warning{ border-left-color:var(--warning-500);}
.sh-toast .sh-toast-ic{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--brand-50); color:var(--brand-500); }
.sh-toast.success .sh-toast-ic{ background:var(--success-50); color:var(--success-600);} .sh-toast.error .sh-toast-ic{ background:var(--error-50); color:var(--error-600);} .sh-toast.warning .sh-toast-ic{ background:var(--warning-50); color:var(--warning-600);}
.sh-toast h6{ margin:0 0 2px; font-size:14px; font-weight:600; color:var(--gray-800);} .sh-toast p{ margin:0; font-size:13px; color:var(--gray-500);}

/* ---- responsive: key/value + page header stack on mobile ---- */
@media (max-width:575px){
    .sh-kv{ grid-template-columns:1fr; gap:2px 0; } .sh-kv dt{ margin-top:10px; }
    .sh-page-header .sh-ph-actions{ margin-left:0; width:100%; }
}

/* ============================ DASHBOARD greeting header ============================ */
.sh-dash-head{ align-items:flex-start; }
.sh-dash-head h3{ font-size:24px; font-weight:600; color:var(--gray-800); margin:0; letter-spacing:-.3px; }
.sh-dash-sub{ color:var(--gray-500); font-size:14px; margin:5px 0 0; }
.sh-dash-head .breadcrumb{ padding-top:8px; }

/* dashboard section headings consistency */
#chart-design .card-header h5, #chart-design .chart-area h3 { font-size:16px; font-weight:600; color:var(--gray-800); }
.chart-area{ padding:6px; }

/* KPI grid: tighten to feel like a metric grid */
.first-row-boxs .card-h-100{ transition:box-shadow .2s ease, transform .2s ease; }
.first-row-boxs .card-h-100:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }

/* ---- detail page (hl-scope) final polish ---- */
.hl-scope .hl-tile:hover{ border-color:var(--brand-200) !important; background:var(--brand-25) !important; }
.hl-scope .hl-tile{ border-radius:var(--radius-lg) !important; }
.hl-scope .hl-detail-card{ border-radius:var(--radius-2xl) !important; box-shadow:var(--shadow-xs) !important; border:1px solid var(--gray-200) !important; }
.hl-scope .hl-detail-head{ font-weight:600; }
.hl-scope .hl-tile .hl-tile-label{ color:var(--gray-500) !important; }
.hl-scope .hl-tile .hl-tile-value{ color:var(--gray-800) !important; }
.hl-scope .hl-verify-yes{ background:var(--success-50) !important; color:var(--success-700) !important; }
.hl-scope .hl-verify-no{ background:var(--error-50) !important; color:var(--error-700) !important; }

/* ============================================================================
   FIXES from live screenshots
   ============================================================================ */

/* ---- Sidebar icons: force uniform gray (was multicolored template icons) ---- */
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link:not(.active) .stroke-icon,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link:not(.active) .stroke-icon *,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link:not(.active) > svg,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link:not(.active) > svg *{
    stroke: var(--gray-500) !important;
}
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link:not(.active) svg [fill]:not([fill="none"]){ fill: var(--gray-500) !important; }
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active .stroke-icon,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active .stroke-icon *,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active > svg,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active > svg *{ stroke: var(--brand-500) !important; }
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active svg [fill]:not([fill="none"]){ fill: var(--brand-500) !important; }
/* submenu icons uniform */
.page-sidebar .sidebar-submenu li a .svg-menu, .page-sidebar .sidebar-submenu li a .svg-menu *{ stroke: var(--gray-400) !important; }
.page-sidebar .sidebar-submenu li.active > a .svg-menu, .page-sidebar .sidebar-submenu li a.active .svg-menu,
.page-sidebar .sidebar-submenu li a:hover .svg-menu{ stroke: var(--brand-500) !important; }

/* ---- Table ACTION buttons: compact + soft-tinted (was noisy colored blocks) ---- */
table.dataTable td .btn, .product-table td .btn, .table td .btn{
    padding:7px 9px !important; border-radius:8px !important; box-shadow:none !important;
    font-size:13px; line-height:1; margin:2px; display:inline-flex; align-items:center; justify-content:center; min-width:32px; min-height:32px;
    border:1px solid transparent !important;
}
table.dataTable td .btn i, .table td .btn i{ font-size:13px; }
/* default any colored/gold/unknown action btn -> subtle gray */
table.dataTable td .btn, .table td .btn{ background:var(--gray-100) !important; color:var(--gray-600) !important; }
/* semantic soft tints */
table.dataTable td .btn-success, .table td .btn-success{ background:var(--success-50) !important; color:var(--success-600) !important; }
table.dataTable td .btn-danger,  .table td .btn-danger { background:var(--error-50) !important;   color:var(--error-600) !important; }
table.dataTable td .btn-warning, .table td .btn-warning{ background:var(--warning-50) !important;  color:var(--warning-700) !important; }
table.dataTable td .btn-primary, .table td .btn-primary{ background:var(--brand-50) !important;    color:var(--brand-500) !important; }
table.dataTable td .btn-info,    .table td .btn-info   { background:var(--bluelight-50) !important;color:var(--bluelight-600) !important; }
table.dataTable td .btn-dark,    .table td .btn-dark,
table.dataTable td .btn-secondary,.table td .btn-secondary{ background:var(--gray-100) !important; color:var(--gray-700) !important; }
table.dataTable td .btn-gold, .table td .btn-gold{ background:var(--brand-50) !important; color:var(--brand-500) !important; }
/* hover: solidify tint slightly */
table.dataTable td .btn:hover, .table td .btn:hover{ filter:brightness(.97); transform:translateY(-1px); }
/* keep toggle switches (active/inactive) untouched visually beyond brand */
table.dataTable td .form-switch .form-check-input, .table td .form-check-input:checked{ background-color:var(--success-500) !important; border-color:var(--success-500) !important; }

/* ============================================================================
   DENSITY / COMPACT PASS — tighter enterprise spacing (less "zoomed")
   Appended last so it wins. Purely spacing/size — no colour/logic change.
   ============================================================================ */
body{ font-size:13.5px; }
.page-body{ padding:2px 14px 30px !important; }
.page-body > .container-fluid + .container-fluid{ margin-top:0; }

/* cards */
.card{ border-radius:14px !important; }
.card .card-header{ padding:13px 18px !important; }
.card .card-header h5,.card .card-header h4{ font-size:15px !important; }
.card .card-body{ padding:18px !important; }

/* page title */
.row.page-title{ padding:14px 4px 12px !important; }
.row.page-title h3{ font-size:19px !important; }
.sh-dash-head h3{ font-size:20px !important; } .sh-dash-sub{ font-size:13px; margin-top:3px; }
.breadcrumb{ font-size:12.5px; }
.sh-page-header{ padding:14px 4px 12px; } .sh-page-header .sh-ph-title{ font-size:19px; } .sh-page-header .sh-ph-sub{ font-size:13px; }

/* KPI metric cards — compact (bulletproof !important) */
.row.first-row-boxs{ margin:0 -8px !important; row-gap:14px !important; }
.row.first-row-boxs [class*="col-"]{ padding:0 8px !important; }
.first-row-boxs .card-h-100{ min-height:0 !important; }
.first-row-boxs .card-body[class*="boxs"]{ padding:15px 16px !important; min-height:0 !important; gap:10px !important; justify-content:center !important; }
.first-row-boxs .card-body[class*="boxs"]::before{ width:38px !important; height:38px !important; font-size:15px !important; border-radius:10px !important; }
.first-row-boxs .card-body[class*="boxs"] .col-12,
.first-row-boxs .card-body[class*="boxs"] .row{ gap:4px !important; }
.first-row-boxs .card-body[class*="boxs"] .col-12 span,
.first-row-boxs .card-body[class*="boxs"] > span{ font-size:12.5px !important; margin:0 !important; }
.first-row-boxs .card-body[class*="boxs"] .col-12 h4,
.first-row-boxs .card-body[class*="boxs"] > h4,
.first-row-boxs .card-body[class*="boxs"] .col-12 h4 span,
.first-row-boxs .card-body[class*="boxs"] > h4 span{ font-size:22px !important; line-height:28px !important; margin:0 !important; }

/* forms */
.form-control,.form-select,textarea.form-control{ min-height:40px; padding:8px 13px; font-size:13.5px !important; }
textarea.form-control{ min-height:80px; }
.form-label,.col-form-label{ font-size:13px; margin-bottom:5px; }
.mb-3{ margin-bottom:.85rem !important; }
.form-section{ padding:16px 0; }
.col-12 > .form-section-title{ margin:8px 0 12px; padding-bottom:8px; font-size:14px; }
.form-actions{ padding-top:14px; }
.select2-container--default .select2-selection--single,.choices__inner{ min-height:40px !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height:38px; }

/* tables — denser */
table.dataTable thead th,table.display thead th,.table thead th{ padding:10px 16px !important; font-size:11px !important; }
table.dataTable tbody td,table.display tbody td,.table tbody td{ padding:11px 16px !important; font-size:13px; }
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select{ padding:7px 11px !important; font-size:13px; }

/* buttons — compact */
.btn{ padding:8px 14px; font-size:13.5px; }
.btn.btn-sm{ padding:6px 10px; font-size:12.5px; }

/* badges */
.badge{ padding:3px 9px; font-size:11px; }

/* modals */
.modal-header{ padding:16px 20px !important; } .modal-body{ padding:20px !important; } .modal-footer{ padding:14px 20px !important; }
.modal-header .modal-title{ font-size:16px; }

/* sidebar — compact */
.page-sidebar .sidebar-menu{ padding:6px 12px 20px; }
.sidebar-menu .sidebar-list .sidebar-link{ padding:8px 11px !important; font-size:13.5px; gap:11px; }
.sidebar-menu .sh-nav-section{ padding:12px 11px 6px; font-size:11px; }
.sidebar-menu .sidebar-list{ margin:1px 0; }
.sidebar-menu .sidebar-submenu li a{ padding:7px 11px 7px 32px !important; font-size:13px; }

/* header — compact */
.page-header .header-search{ min-width:260px; padding:7px 42px 7px 14px; }
.page-header .sh-icon-btn{ width:40px; height:40px; }
.profile-dropdown h5{ font-size:13.5px; } .profile-dropdown span{ font-size:11.5px; }

/* detail tiles compact */
.hl-scope .hl-detail-card{ margin-bottom:16px !important; }
.sh-kv{ grid-template-columns:160px 1fr; gap:8px 14px; }

/* ============================================================================
   PREMIUM TOAST (bootstrap-notify) + animate.css fallback
   ============================================================================ */
.alert[data-notify]{
    min-width:320px; max-width:380px; padding:0 !important;
    background:#fff !important; border:1px solid var(--gray-200) !important;
    border-radius:14px !important; box-shadow:var(--shadow-xl) !important;
    border-left:none !important; overflow:hidden;
}
.alert[data-notify] .message-notify{ display:flex; align-items:flex-start; gap:12px; padding:14px 40px 14px 16px; }
.alert[data-notify] [data-notify="dismiss"]{
    position:absolute; top:10px; right:12px; font-size:16px; line-height:1;
    color:var(--gray-400); opacity:1; background:transparent; border:none; font-weight:400;
}
.alert[data-notify] [data-notify="dismiss"]:hover{ color:var(--gray-700); }
.alert[data-notify] .message-icon{ width:34px; height:34px; min-width:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px; }
.alert[data-notify] .progress{ height:3px; border-radius:0; background:var(--gray-100); margin:0; }
.alert[data-notify] .progress .progress-bar{ background:var(--brand-500); }
/* status accents */
.alert[data-notify].alert-success .message-icon{ background:var(--success-50); color:var(--success-600); }
.alert[data-notify].alert-success .progress-bar{ background:var(--success-500); }
.alert[data-notify].alert-danger .message-icon,.alert[data-notify].alert-error .message-icon{ background:var(--error-50); color:var(--error-600); }
.alert[data-notify].alert-danger .progress-bar,.alert[data-notify].alert-error .progress-bar{ background:var(--error-500); }
.alert[data-notify].alert-warning .message-icon{ background:var(--warning-50); color:var(--warning-700); }
.alert[data-notify].alert-warning .progress-bar{ background:var(--warning-500); }
.alert[data-notify].alert-info .message-icon{ background:var(--bluelight-50); color:var(--bluelight-600); }

/* animate.css classes referenced by notify (fallback so toasts slide nicely) */
.animated{ animation-duration:.5s; animation-fill-mode:both; }
@keyframes fadeInDown{ from{opacity:0; transform:translate3d(0,-24px,0);} to{opacity:1; transform:none;} }
@keyframes fadeOutUp{ from{opacity:1;} to{opacity:0; transform:translate3d(0,-24px,0);} }
.animated.fadeInDown{ animation-name:fadeInDown; }
.animated.fadeOutUp{ animation-name:fadeOutUp; }

/* ============================================================================
   CHART / SUMMARY cards — premium containers (data untouched)
   ============================================================================ */
#chart-design .chart-area, #chart-design .card{ border-radius:14px !important; border:1px solid var(--gray-200) !important; box-shadow:var(--shadow-xs) !important; }
.chart-area{ padding:8px; }
.chart-area canvas{ max-height:300px; }
/* section header inside chart/complaint/hostel cards */
.card-header .card-header-title, #chart-design h5, #chart-design h4{ font-size:15px; font-weight:600; color:var(--gray-800); }
/* complaint + hostel legend chips */
.dashboard-3 .legend, .chart-legend, .complaint-legend{ font-size:12px; color:var(--gray-500); }
/* meal summary cards compact */
.meal-summary-wrap .ms-card, .meal-card{ border-radius:12px !important; border:1px solid var(--gray-200) !important; }
.meal-summary-wrap .ms-head-icon{ width:38px; height:38px; border-radius:10px; }

/* ============================================================================
   PREMIUM LOADER — hub-icon motif (orbiting nodes + brand pulse)
   Mirrors the StudentHub logo mark: a core node with satellites orbiting it.
   ============================================================================ */
.loader-wrapper{ background:var(--gray-50) !important; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.loader-wrapper .loader{
    width:64px !important; height:64px !important; border:none !important; border-radius:50% !important; background:transparent !important;
    position:relative; animation:none !important;
}
/* soft conic halo behind the orbit, for depth */
.loader-wrapper .loader::before{
    content:""; position:absolute; inset:6px; border-radius:50%;
    background:conic-gradient(from 90deg, rgba(124,108,231,.35), rgba(124,108,231,.02), rgba(124,108,231,.35));
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
            mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
    animation:shOrbitSpin 1.4s linear infinite reverse;
}
/* core hub node */
.loader-wrapper .loader::after{
    content:""; position:absolute; inset:24px; border-radius:50%;
    background:var(--gray-900); animation:shLoadPulse 1s ease-in-out infinite;
}
.loader-wrapper .loader .sh-orbit{ position:absolute; inset:0; animation:shOrbitSpin 1.1s linear infinite; }
.loader-wrapper .loader .sh-orbit i{
    position:absolute; width:9px; height:9px; border-radius:50%; background:var(--brand-500);
    top:50%; left:50%; margin:-4.5px; animation:shDotPulse 1s ease-in-out infinite;
}
.loader-wrapper .loader .sh-orbit i:nth-child(1){ transform:rotate(0deg) translateX(28px); }
.loader-wrapper .loader .sh-orbit i:nth-child(2){ transform:rotate(120deg) translateX(28px); animation-delay:.15s; }
.loader-wrapper .loader .sh-orbit i:nth-child(3){ transform:rotate(240deg) translateX(28px); animation-delay:.3s; }
@keyframes shDotPulse{ 0%,100%{ opacity:.45;} 50%{ opacity:1;} }
.loader-wrapper::after{
    content:"StudentHub"; margin-top:104px; position:absolute;
    font-family:"Outfit",sans-serif; font-weight:700; font-size:14px; letter-spacing:.4px; color:var(--brand-500);
    animation:shLoadPulse 1.2s ease-in-out infinite;
}
@keyframes shOrbitSpin{ to{ transform:rotate(360deg);} }
@keyframes shLoadPulse{ 0%,100%{ opacity:.4; transform:scale(.85);} 50%{ opacity:1; transform:scale(1);} }

/* ============================================================================
   DASHBOARD CHARTS / SUMMARY — new premium card design (data untouched)
   ============================================================================ */
#chart-design .shadow-boxs{
    background:#fff !important; border:1px solid var(--gray-200) !important; border-radius:14px !important;
    box-shadow:var(--shadow-xs) !important; padding:18px 18px 20px !important; margin-bottom:16px; height:calc(100% - 16px);
}
#chart-design .chart-area{ padding:0 !important; border:none !important; box-shadow:none !important; background:transparent !important; }
#chart-design .chart-area .header{ margin-bottom:4px; }
#chart-design .chart-area .header h3{ font-size:15px !important; font-weight:600 !important; color:var(--gray-800) !important; margin:0; }
#chart-design .legend{ display:flex !important; flex-wrap:wrap; gap:8px 16px; margin:10px 0 14px; padding:0; }
#chart-design .legend .legend-item{ margin:0 !important; }
#chart-design .legend .legend-item h4{ font-size:12.5px !important; font-weight:500 !important; color:var(--gray-500) !important; margin:0; display:flex; align-items:center; gap:7px; }
#chart-design .legend .legend-item h4::before{ content:""; width:9px; height:9px; border-radius:3px; display:inline-block; background:var(--gray-300); }
#chart-design .legend .pendind-ch h4::before{ background:var(--warning-500); }
#chart-design .legend .inpro-ch h4::before{ background:var(--bluelight-500); }
#chart-design .legend .reso-ch h4::before{ background:var(--success-500); }
#chart-design .legend .unoccupied-ch h4::before{ background:#5EC2C2; }
#chart-design .legend .pending-ch h4::before,#chart-design .legend .pendind-ch2 h4::before{ background:var(--brand-500); }
#chart-design .flex-design,#chart-design .market{ max-height:290px; }
#chart-design canvas{ max-height:290px !important; }

/* beds selector block premium */
#beds_select .beds-select-block{ background:#fff; border:1px solid var(--gray-200); border-radius:14px; box-shadow:var(--shadow-xs); padding:18px; margin-top:4px; }
#beds_select .top_boxs .ava-btnbox ul{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }
#beds_select .ava-btnbox li{ font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:40px; background:var(--gray-100); color:var(--gray-700); }
#beds_select .ava-btnbox li.first-li{ background:var(--success-50); color:var(--success-700); }
#beds_select .ava-btnbox li.second-li{ background:var(--brand-50); color:var(--brand-500); }
#beds_select .ava-btnbox li span{ font-weight:700; }

/* ---- custom cursor CSS (relaxed gate; JS decides creation) ---- */
.sh-cursor-dot,.sh-cursor-ring{ position:fixed; top:0; left:0; border-radius:50%; pointer-events:none; z-index:2147483000; }
.sh-cursor-dot{ width:7px; height:7px; background:var(--brand-500); transform:translate(-50%,-50%); box-shadow:0 0 0 2px rgba(255,255,255,.6); }
.sh-cursor-ring{ width:32px; height:32px; border:2px solid rgba(124,108,231,.55); transform:translate(-50%,-50%); transition:width .18s,height .18s,border-color .18s,background-color .18s; }
.sh-cursor-ring.hover{ width:46px; height:46px; border-color:var(--brand-500); background:rgba(124,108,231,.10); }
body.sh-has-cursor{ cursor:none; }
body.sh-has-cursor a,body.sh-has-cursor button,body.sh-has-cursor .btn,body.sh-has-cursor input,body.sh-has-cursor select,body.sh-has-cursor textarea,body.sh-has-cursor .sidebar-link{ cursor:none; }