/* ============================================================
   ITPI Accommodation — Premium SaaS Design System v2
   Pure CSS/JS restyle. No backend, routes, or logic touched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --primary:#2563EB;
  --primary-600:#1d4ed8;
  --primary-50:#eff6ff;
  --primary-100:#dbeafe;
  --secondary:#0F172A;
  --success:#16A34A;
  --success-bg:#dcfce7;
  --warning:#F59E0B;
  --warning-bg:#fef3c7;
  --danger:#DC2626;
  --danger-bg:#fee2e2;
  --info:#0891B2;
  --info-bg:#cffafe;
  --purple:#7C3AED;
  --purple-bg:#EDE9FE;

  --bg:#F8FAFC;
  --surface:#ffffff;
  --border:#E2E8F0;
  --border-soft:#EDF1F7;
  --text:#0F172A;
  --text-muted:#000000;
  --text-faint:#94A3B8;

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;
  --radius-xl:20px;

  --shadow-xs:0 1px 2px rgba(15,23,42,.04);
  --shadow-sm:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.04);
  --shadow-focus:0 0 0 4px rgba(37,99,235,.15);

  --sidebar-w:264px;
  --sidebar-w-collapsed:76px;
  --header-h:68px;

  --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  font-size:15px;
}
h1,h2,h3,h4{font-family:'Manrope','Inter',sans-serif;letter-spacing:-0.02em;color:var(--secondary);}
a{color:var(--primary);text-decoration:none;transition:color .15s var(--ease);}
a:hover{color:var(--primary-600);}
.container{max-width:1180px;margin:0 auto;padding:0 24px;}

::selection{background:var(--primary-100);color:var(--primary-600);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
}

/* ---------- Icons (inline SVG via CSS mask, no external library) ---------- */
.icon{display:inline-block;width:18px;height:18px;vertical-align:-3px;background:currentColor;flex-shrink:0;}
.icon-sm{width:14px;height:14px;vertical-align:-2px;}
.icon-lg{width:24px;height:24px;}

.i-home{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-users{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-calendar{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-bed{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4v16'/%3E%3Cpath d='M2 8h18a2 2 0 0 1 2 2v10'/%3E%3Cpath d='M2 17h20'/%3E%3Cpath d='M6 8V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-lock{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-chart{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='20' x2='18' y2='10'/%3E%3Cline x1='12' y1='20' x2='12' y2='4'/%3E%3Cline x1='6' y1='20' x2='6' y2='14'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-shield{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-bell{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-search{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-user{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-chevron-down{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-check{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-x{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-clock{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-door{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V4a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v17'/%3E%3Cpath d='M14 12v.01'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-block{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-file{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-plus{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-trash{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-eye{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-map{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-rupee{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='6' y1='3' x2='18' y2='3'/%3E%3Cline x1='6' y1='8' x2='18' y2='8'/%3E%3Cpath d='M6 13h3c4 0 4-5 0-5'/%3E%3Cline x1='6' y1='13' x2='15' y2='13'/%3E%3Cline x1='6' y1='13' x2='15' y2='21'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-log{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-logout{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpolyline points='16 17 21 12 16 7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-doc{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-sparkle{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M18 6l-2.5 2.5M8.5 15.5L6 18'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-inbox{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-menu{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-arrow-right{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-alert{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-sun{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cline x1='12' y1='1' x2='12' y2='3'/%3E%3Cline x1='12' y1='21' x2='12' y2='23'/%3E%3Cline x1='4.22' y1='4.22' x2='5.64' y2='5.64'/%3E%3Cline x1='18.36' y1='18.36' x2='19.78' y2='19.78'/%3E%3Cline x1='1' y1='12' x2='3' y2='12'/%3E%3Cline x1='21' y1='12' x2='23' y2='12'/%3E%3Cline x1='4.22' y1='19.78' x2='5.64' y2='18.36'/%3E%3Cline x1='18.36' y1='5.64' x2='19.78' y2='4.22'/%3E%3C/svg%3E") center/contain no-repeat;}
.i-moon{mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E") center/contain no-repeat;}

/* ================= APP SHELL (admin / member / reception) ================= */
body.app-shell{display:flex;min-height:100vh;}

/* Dark sidebar by default (professional admin look) */
.app-sidebar{
  width:var(--sidebar-w);background:#0B1220;color:#E2E8F0;flex-shrink:0;
  position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;
  transition:width .2s var(--ease);z-index:40;border-right:1px solid #1B2A42;
}
.app-sidebar.collapsed{width:var(--sidebar-w-collapsed);}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 22px;border-bottom:1px solid #1B2A42;min-height:var(--header-h);}
.sidebar-logo .mark{width:38px;height:38px;border-radius:10px;flex-shrink:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 4px 10px rgba(37,99,235,.25);}
.sidebar-logo .mark img{display:block;width:100%;height:100%;object-fit:contain;}
.sidebar-logo .brandtext{font-family:'Manrope';font-weight:800;color:#F1F5F9;font-size:14.5px;white-space:nowrap;overflow:hidden;line-height:1.3;}
.sidebar-logo .brandtext span{display:block;font-weight:500;font-size:10.5px;color:#94A3B8;letter-spacing:.02em;}
.app-sidebar.collapsed .brandtext{display:none;}

.sidebar-nav{padding:12px 12px;flex:1;}
.sidebar-section-label{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#64748B;padding:16px 12px 6px;}
.app-sidebar.collapsed .sidebar-section-label{display:none;}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius-sm);color:#94A3B8;font-size:13.5px;font-weight:600;margin-bottom:2px;transition:background .15s var(--ease),color .15s var(--ease);white-space:nowrap;overflow:hidden;position:relative;}
.sidebar-link .icon{color:#64748B;transition:color .15s var(--ease);background:currentColor;}
.sidebar-link:hover{background:rgba(255,255,255,.06);color:#F1F5F9;text-decoration:none;}
.sidebar-link:hover .icon{color:#60A5FA;}
.sidebar-link.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.35);}
.sidebar-link.active .icon{color:#fff;}
.app-sidebar.collapsed .sidebar-link span.label{display:none;}
.app-sidebar.collapsed .sidebar-link{justify-content:center;}
.sidebar-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:20px;flex-shrink:0;}
.sidebar-link.active .sidebar-badge{background:rgba(255,255,255,.25);}
.app-sidebar.collapsed .sidebar-badge{display:none;}

.sidebar-footer{padding:14px 16px;border-top:1px solid #1B2A42;}
.sidebar-user-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);margin-bottom:8px;}
.sidebar-user-card .user-avatar{position:relative;}
.sidebar-user-card .online-dot{position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid #0B1220;}
.sidebar-user-card .meta .name{font-size:12.5px;font-weight:700;color:#F1F5F9;}
.sidebar-user-card .meta .role{font-size:10.5px;color:#94A3B8;}
.app-sidebar.collapsed .sidebar-user-card .meta{display:none;}
.sidebar-collapse-btn-top{margin-left:auto;flex-shrink:0;color:#94A3B8;}
.sidebar-collapse-btn-top:hover{background:rgba(255,255,255,.08);color:#F1F5F9;border-color:transparent;}
.app-sidebar.collapsed .sidebar-logo{flex-direction:column;gap:8px;padding:16px 10px;}
.app-sidebar.collapsed .sidebar-collapse-btn-top{margin-left:0;}

.app-main{flex:1;min-width:0;display:flex;flex-direction:column;}
.app-header{height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30;box-shadow:var(--shadow-xs);gap:20px;}
.header-left{display:flex;align-items:center;gap:16px;min-width:0;flex:1;}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-muted);white-space:nowrap;}
.breadcrumb b{color:var(--secondary);font-weight:600;}
.header-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.icon-btn{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid transparent;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);position:relative;transition:all .15s var(--ease);}
.icon-btn:hover{background:var(--bg);color:var(--secondary);border-color:var(--border);}
.icon-btn .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--danger);border:1.5px solid var(--surface);}
.user-chip{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:var(--radius);cursor:pointer;transition:background .15s var(--ease);border:1px solid transparent;}
.user-chip:hover{background:var(--bg);border-color:var(--border);}
.user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#60a5fa);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;font-family:'Manrope';flex-shrink:0;}
.user-chip .meta{line-height:1.25;}
.user-chip .meta .name{font-size:13px;font-weight:600;color:var(--secondary);}
.user-chip .meta .role{font-size:11px;color:var(--text-muted);}

.app-body{padding:28px;flex:1;animation:fadeSlideUp .35s var(--ease);}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:14px;}
.page-head h1{font-size:22px;font-weight:800;margin:0 0 2px;}
.page-head p{margin:0;color:var(--text-muted);font-size:13.5px;}

/* ================= COMPONENTS ================= */
.card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:24px;margin-bottom:22px;box-shadow:var(--shadow-sm);transition:box-shadow .2s var(--ease),transform .2s var(--ease);}
.card.hoverable:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.card h2, .card h3{margin-top:0;}
.card h2{font-size:18px;font-weight:700;}
.card h3{font-size:15.5px;font-weight:700;}

.grid{display:grid;gap:18px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-dash{grid-template-columns:1fr 1.7fr 1fr;}
@media(max-width:1100px){.grid-dash{grid-template-columns:1fr;}}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}}

.stat{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease);animation:fadeSlideUp .4s var(--ease) backwards;}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.stat .stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.stat .stat-icon{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:var(--primary-50);color:var(--primary);}
.stat.success .stat-icon{background:var(--success-bg);color:var(--success);}
.stat.warning .stat-icon{background:var(--warning-bg);color:var(--warning);}
.stat.danger .stat-icon{background:var(--danger-bg);color:var(--danger);}
.stat.info .stat-icon{background:var(--info-bg);color:var(--info);}
.stat.purple .stat-icon{background:var(--purple-bg);color:var(--purple);}
.stat .num{font-family:'Manrope';font-size:26px;font-weight:800;color:var(--secondary);line-height:1;}
.stat .label{color:var(--text-muted);font-size:12.5px;margin-top:6px;font-weight:500;}
.stat .trend{font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;gap:3px;margin-top:8px;}
.stat .trend.up{color:var(--success);}
.stat .trend.down{color:var(--danger);}

.tabs{display:flex;gap:3px;margin-bottom:22px;padding:5px;background:var(--bg);border:1px solid var(--border-soft);border-radius:var(--radius);flex-wrap:wrap;}
.tabs a{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius-sm);color:var(--text-muted);font-weight:700;font-size:12.5px;border:1px solid transparent;transition:all .15s var(--ease);}
.tabs a:hover{color:var(--secondary);text-decoration:none;background:rgba(255,255,255,.7);}
.tabs a.active{background:var(--surface);color:var(--primary);border-color:var(--border-soft);box-shadow:var(--shadow-sm);}
.tabs a .tab-count{background:var(--border-soft);color:var(--text-muted);font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:20px;line-height:1.5;}
.tabs a.active .tab-count{background:var(--primary-100);color:var(--primary-600);}
@media(max-width:700px){.tabs{width:100%;}.tabs a{flex:1 1 auto;justify-content:center;}}

/* ================= MODAL (popup form) ================= */
.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);
  z-index:200;align-items:flex-start;justify-content:center;padding:5vh 20px;
  overflow-y:auto;animation:modalFadeIn .18s var(--ease);
}
.modal-overlay.open{display:flex;}
@keyframes modalFadeIn{from{opacity:0;}to{opacity:1;}}
.modal-box{
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:680px;overflow:hidden;animation:modalSlideIn .22s var(--ease);flex-shrink:0;
}
.modal-box.modal-sm{max-width:480px;}
@keyframes modalSlideIn{from{opacity:0;transform:translateY(-14px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;border-bottom:1px solid var(--border-soft);}
.modal-head h3{margin:0;font-size:16px;}
.modal-head p{margin:2px 0 0;font-size:12.5px;color:var(--text-muted);font-weight:500;}
.modal-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--bg);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s var(--ease);flex-shrink:0;padding:0;}
.modal-close:hover{background:var(--danger-bg);color:var(--danger);}
.modal-body{padding:22px 24px 24px;max-height:75vh;overflow-y:auto;}
.modal-body form{margin:0;}
@media(max-width:640px){.modal-overlay{padding:0;align-items:flex-end;}.modal-box{max-width:100%;border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:92vh;overflow-y:auto;}}

.list-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:2px;flex-wrap:wrap;}
.list-toolbar h2{margin:0;}

/* ================= Professional form sections (registration, etc.) ================= */
.form-section{margin-bottom:10px;}
.form-section:last-of-type{margin-bottom:0;}
.form-section-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1px;padding-bottom:9px;border-bottom:1.5px solid var(--border-soft);}
.form-section-title .icon{width:14px;height:14px;background:var(--primary);flex-shrink:0;}

.segmented-toggle{display:flex;border:1.5px solid var(--border-soft);border-radius:var(--radius);overflow:hidden;background:var(--bg);margin-bottom:6px;}
.segmented-toggle input{position:absolute;opacity:0;width:0;height:0;}
.segmented-toggle label{flex:1;text-align:center;padding:3px 6px;font-size:12.5px;font-weight:700;color:var(--text-muted);cursor:pointer;margin:0;transition:all .15s var(--ease);display:flex;align-items:center;justify-content:center;gap:6px;}
.segmented-toggle label:first-of-type{border-right:1.5px solid var(--border-soft);}
.segmented-toggle input:checked + label{background:var(--primary);color:#fff;}

.info-box{background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--radius-sm);padding:9px 12px;font-size:11.5px;font-weight:600;color:var(--primary-600);display:flex;gap:7px;align-items:flex-start;margin-top:8px;line-height:1.5;}
.info-box .icon{flex-shrink:0;margin-top:1px;background:var(--primary-600);}
.optional-badge{display:inline-block;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;background:var(--border-soft);color:var(--text-muted);padding:2px 7px;border-radius:20px;margin-left:6px;vertical-align:middle;}

/* ================= Member "View" modal: field grid + doc previews ================= */
.view-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;}
.view-field-grid .vf-label{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-faint);margin-bottom:3px;}
.view-field-grid .vf-val{display:block;font-size:13.5px;font-weight:600;color:var(--secondary);word-break:break-word;}
@media(max-width:520px){.view-field-grid{grid-template-columns:1fr;}}

.doc-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:520px){.doc-preview-grid{grid-template-columns:1fr;}}
.doc-preview-card{border:1px solid var(--border-soft);border-radius:var(--radius);padding:12px;background:var(--bg);}
.doc-preview-label{font-size:11.5px;font-weight:700;color:var(--text-muted);margin-bottom:8px;}
.doc-preview-img{width:100%;max-height:220px;object-fit:contain;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--border-soft);display:block;}
.doc-preview-pdf{width:100%;height:220px;border-radius:var(--radius-sm);border:1px solid var(--border-soft);}
.doc-preview-fallback{width:100%;height:120px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius-sm);}
.doc-preview-fallback .icon{width:32px;height:32px;background:var(--text-faint);}
.doc-preview-link{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;}

form label{display:block;font-weight:600;margin:14px 0 6px;font-size:13px;color:var(--secondary);}
form .field-icon-wrap{position:relative;}
form .field-icon-wrap .icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none;}
form .field-icon-wrap input{padding-left:38px;}

input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=number],input[type=date],input[type=month],select,textarea{
  width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:14px;background:var(--surface);color:var(--text);font-family:inherit;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
input::placeholder, textarea::placeholder{color:var(--text-faint);}
input:hover, select:hover, textarea:hover{border-color:#CBD5E1;}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-focus);}
input[type=file]{border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:16px 14px;background:var(--bg);cursor:pointer;font-size:13px;}
input[type=file]:hover{border-color:var(--primary);background:var(--primary-50);}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
@media(max-width:700px){.form-row{grid-template-columns:1fr;}}
.helptext{color:var(--text-muted);font-size:12.5px;margin-top:5px;display:flex;align-items:center;gap:5px;}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--primary);color:#fff;border:none;padding:10px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:13.5px;cursor:pointer;transition:all .15s var(--ease);font-family:inherit;box-shadow:0 1px 2px rgba(37,99,235,.15);}
.btn:hover{background:var(--primary-600);text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 10px rgba(37,99,235,.25);}
.btn:active{transform:translateY(0);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn.accent{background:linear-gradient(135deg,var(--primary),#3b82f6);}
.btn.success{background:var(--success);box-shadow:0 1px 2px rgba(22,163,74,.2);}
.btn.success:hover{background:#15803d;box-shadow:0 4px 10px rgba(22,163,74,.25);}
.btn.danger{background:var(--danger);box-shadow:0 1px 2px rgba(220,38,38,.2);}
.btn.danger:hover{background:#b91c1c;box-shadow:0 4px 10px rgba(220,38,38,.25);}
.btn.outline{background:var(--surface);color:var(--primary);border:1.5px solid var(--border);box-shadow:none;}
.btn.outline:hover{border-color:var(--primary);background:var(--primary-50);transform:translateY(-1px);box-shadow:none;}
.btn.small{padding:6px 13px;font-size:12.5px;}
.btn.loading{position:relative;color:transparent !important;pointer-events:none;}
.btn.loading::after{content:'';position:absolute;width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .6s linear infinite;}
.btn.outline.loading::after{border:2px solid rgba(37,99,235,.25);border-top-color:var(--primary);}
@keyframes spin{to{transform:rotate(360deg);}}

.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border-soft);}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:13.5px;}
table th{background:#F1F5F9;color:var(--secondary);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:12px 16px;position:sticky;top:0;border-bottom:1px solid var(--border);}
table td{padding:13px 16px;border-bottom:1px solid var(--border-soft);color:var(--text);vertical-align:middle;}
table tr:last-child td{border-bottom:none;}
table tbody tr:nth-child(even){background:#FAFCFF;}
table tbody tr{transition:background .15s var(--ease);}
table tbody tr:hover{background:var(--primary-50);}

.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:20px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
.badge-pending{background:var(--warning-bg);color:#92400E;}
.badge-underreview{background:#E0E7FF;color:#3730A3;}
.badge-review{background:#E0E7FF;color:#3730A3;}
.badge-approved,.badge-active,.badge-available{background:var(--success-bg);color:#166534;}
.badge-rejected,.badge-cancelled,.badge-blocked{background:var(--danger-bg);color:#991B1B;}
.badge-checkedin{background:var(--info-bg);color:#155E75;}
.badge-checkedout{background:#E2E8F0;color:#475569;}
.badge-maintenance{background:var(--warning-bg);color:#92400E;}
.badge-occupied{background:#FFE4E6;color:#9F1239;}

.alert{display:flex;align-items:flex-start;gap:10px;padding:13px 16px;border-radius:var(--radius);margin-bottom:18px;font-size:13.5px;border:1px solid transparent;animation:fadeSlideUp .3s var(--ease);}
.alert-success{background:var(--success-bg);color:#166534;border-color:#bbf7d0;}
.alert-error{background:var(--danger-bg);color:#991B1B;border-color:#fecaca;}

#toast-region{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;max-width:360px;}
.toast{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:14px 16px;display:flex;gap:10px;align-items:flex-start;animation:toastIn .3s var(--ease);font-size:13.5px;}
.toast.success{border-left:3px solid var(--success);}
.toast.error{border-left:3px solid var(--danger);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

.empty-state{text-align:center;padding:48px 20px;color:var(--text-muted);}
.empty-state .icon{width:52px;height:52px;color:var(--text-faint);margin-bottom:14px;}
.empty-state h3{color:var(--secondary);margin-bottom:6px;}
.empty-state p{margin:0 0 18px;font-size:13.5px;}

.skeleton{background:linear-gradient(90deg,#EDF1F7 25%,#E2E8F0 37%,#EDF1F7 63%);background-size:400% 100%;animation:skeleton 1.4s ease infinite;border-radius:6px;}
@keyframes skeleton{0%{background-position:100% 50%;}100%{background-position:0 50%;}}

/* ---------- Public marketing pages ---------- */
.hero{background:linear-gradient(135deg,var(--secondary) 0%,#1e293b 60%,var(--primary) 150%);color:#fff;padding:72px 32px;border-radius:var(--radius-xl);margin-bottom:36px;text-align:center;position:relative;overflow:hidden;}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 20%, rgba(37,99,235,.35), transparent 45%);}
.hero h1{color:#fff;margin:0 0 12px;font-size:2.4rem;font-weight:800;position:relative;}
.hero p{color:#CBD5E1;max-width:600px;margin:0 auto 28px;font-size:15.5px;position:relative;}
.hero-actions{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hero-actions a{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;padding:13px 28px;border-radius:var(--radius-sm);font-weight:700;font-size:14px;box-shadow:0 8px 20px rgba(37,99,235,.4);transition:all .2s var(--ease);}
.hero-actions a:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 12px 24px rgba(37,99,235,.5);}
.hero-actions a.secondary{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);box-shadow:none;}

.site-header{background:var(--surface);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:50;box-shadow:var(--shadow-xs);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1180px;margin:0 auto;position:relative;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Manrope';font-weight:800;font-size:16px;color:var(--secondary);flex-shrink:0;}
.brand .mark{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#60a5fa);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;box-shadow:0 4px 10px rgba(37,99,235,.3);}
.brand span{font-weight:400;color:var(--text-muted);}
.main-nav{display:flex;align-items:center;gap:6px;}
.main-nav a{color:var(--text-muted);font-weight:600;font-size:13.5px;padding:9px 6px;border-radius:var(--radius-sm);transition:all .15s var(--ease);}
.main-nav a:hover{color:var(--primary);background:var(--primary-50);text-decoration:none;}
.main-nav a.btn-link{background:var(--secondary);color:#fff;padding:9px 16px;text-decoration: none;}
.main-nav a.btn-link:hover{background:#7d44e8;color:#fff;}

.nav-toggle-btn{display:none;width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--border-soft);background:var(--bg);align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
.nav-toggle-btn:hover{background:var(--primary-50);border-color:var(--primary-100);}
.nav-toggle-btn .icon{background:var(--secondary);}

@media(max-width:720px){
  .header-inner{padding:14px 16px;}
  .brand span{}
  .brand-sub{font-size:8px !important}
  .nav-toggle-btn{display:flex;}
  .main-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--surface);border:1px solid var(--border-soft);border-top:none;
    border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-md);
    padding:10px;
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:12px 14px;text-align:left;}
  .main-nav a.btn-link{text-align:center;margin-top:4px;}
}

.page-main{padding:36px 24px 60px;min-height:60vh;max-width:1180px;margin:0 auto;}
.site-footer{background:var(--secondary);color:#94A3B8;padding:24px 0;text-align:center;font-size:13px;margin-top:40px;}

.two-col{display:flex;gap:30px;flex-wrap:wrap;}
.two-col > div{flex:1;min-width:280px;}

.auth-wrap{display:flex;justify-content:center;padding:20px 0;}
.auth-card{max-width:440px;width:100%;}
.auth-card.wide{max-width:800px;}

/* ================= Auth split-screen shell (login / register / staff login) ================= */
.auth-shell{display:flex;min-height:100vh;width:100%;}
.auth-visual{
  flex:0 0 44%;max-width:600px;min-width:0;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0f172a 0%,#111c30 55%,#152238 100%);
  display:flex;flex-direction:column;justify-content:space-between;padding:44px 48px;color:#fff;
}
.auth-visual::before{
  content:'';position:absolute;inset:0;
  background:url('../images/bg1.webp') center/cover no-repeat;opacity:.32;
}
.auth-visual::after{
  content:'';position:absolute;inset:0; 
}
.auth-visual-top{position:relative;z-index:1;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.auth-visual-top .logo-badge{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.auth-visual-top .logo-badge img{width:80px;height:80px;object-fit:contain;}
.auth-visual-brand{font-family:'Manrope',sans-serif;font-weight:800;font-size:30px;letter-spacing:.03em;text-transform:uppercase;word-break:break-word;}
.auth-visual-content{position:relative;z-index:1;max-width:100%;}
.auth-visual-content h1{color:#fff;font-size:2rem;line-height:1.2;font-weight:800;margin:0 0 14px;word-break:break-word;}
.auth-visual-content p{color:#CBD5E1;font-size:14.5px;line-height:1.65;max-width:440px;margin:0;}
.auth-panel{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 24px 40px;position:relative;}
.auth-panel-home{position:absolute;top:24px;font-size:12.5px;font-weight:700;color:var(--text-muted);display:flex;align-items:center;gap:6px;white-space:nowrap;}
.auth-panel-home:hover{color:var(--primary);}
.auth-panel-inner{width:100%;max-width:460px;padding:0px 0;min-width:0;}
.auth-panel-inner-wide{max-width:820px;}
.auth-panel-inner .auth-card.wide{max-width:100%;}
@media(max-width:900px){
  .auth-shell{flex-direction:column;min-height:auto;}
  .auth-visual{flex:none;max-width:none;padding:28px 20px;min-height:150px;}
  .auth-visual-content h1{font-size:1.35rem;}
  .auth-visual-content p{display:none;}
  .auth-panel{padding:52px 16px 48px;}
}
@media(max-width:420px){
  .auth-visual{padding:20px 16px;min-height:120px;}
  .auth-visual-brand{font-size:25.5px;}
  .auth-visual-content h1{font-size:1.15rem;}
  .auth-panel-home{top:16px;right:16px;font-size:11.5px;}
  .auth-panel-home span.icon{display:none;}
  .auth-panel{padding:46px 12px 40px;}
}
:root[data-theme="dark"] .auth-visual{background:linear-gradient(160deg,#080d17 0%,#0b1220 100%);}

.member-id-row{display:flex;gap:8px;flex-wrap:wrap;}
.member-id-row select{min-width:90px;}
.member-id-row .field-icon-wrap{min-width:160px;}

/* ================= Member profile: two-column card layout ================= */
.profile-grid{display:grid;grid-template-columns:270px 1fr;gap:22px;align-items:start;}
@media(max-width:860px){.profile-grid{grid-template-columns:1fr;}}
.profile-grid > *{min-width:0;}
.profile-side-card{text-align:center;}
.profile-avatar-lg{
  width:104px;height:104px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--primary),#60a5fa);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;
  box-shadow:0 8px 20px rgba(37,99,235,.3);
}
.profile-side-card .pname{font-size:16.5px;font-weight:800;color:var(--secondary);word-break:break-word;}
.profile-side-card .prole{font-size:12.5px;color:var(--text-muted);margin-top:2px;}
.profile-side-card .pcode{font-size:12px;color:var(--primary-600);font-weight:700;margin-top:2px;word-break:break-word;}
.profile-meta-list{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);text-align:left;}
.profile-meta-list .row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:7px 0;}
.profile-meta-list .row .k{color:var(--text-faint);font-weight:600;flex-shrink:0;}
.profile-meta-list .row .v{color:var(--secondary);font-weight:700;text-align:right;word-break:break-word;}
.profile-tabs{display:flex;gap:26px;border-bottom:1.5px solid var(--border-soft);margin-bottom:22px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.profile-tabs a{padding:0 0 12px;font-size:13.5px;font-weight:700;color:var(--text-faint);border-bottom:2.5px solid transparent;white-space:nowrap;margin-bottom:-1.5px;}
.profile-tabs a:hover{color:var(--primary);text-decoration:none;}
.profile-tabs a.active{color:var(--primary);border-color:var(--primary);}
.profile-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;}
@media(max-width:600px){.profile-field-grid{grid-template-columns:1fr;}}
.profile-field-grid label{margin-top:14px;}
.profile-field-grid input{width:100%;}
input[readonly]{background:var(--bg);color:var(--text-muted);cursor:default;}

.text-muted{color:var(--text-muted);}
.mt-0{margin-top:0;}
.flex{display:flex;align-items:center;}
.gap-8{gap:8px;}
.gap-12{gap:12px;}

/* ---------- Dashboard: hero banner ---------- */
.dash-hero{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:22px;
  min-height:180px;display:flex;align-items:flex-end;padding:28px 32px;
  background-color:#0F172A;
  background-image:url('../images/hero-banner-bg1.jpeg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.dash-hero::before{
  /* Dark gradient overlay so the welcome text stays readable over any photo placed here.
     To use your own ITPI building photo, just replace assets/images/hero-banner.jpg
     with your image (same filename) — this overlay will automatically apply on top. */
  content:'';position:absolute;inset:0;
  /*background:linear-gradient(120deg, rgba(15,23,42,.88) 0%, rgba(30,58,95,.75) 55%, rgba(37,99,235,.55) 130%); */
}
.dash-hero::after{
  content:'';position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle at 15% 20%, rgba(255,255,255,.12) 0, transparent 40%),
                    radial-gradient(circle at 85% 75%, rgba(255,255,255,.1) 0, transparent 45%);
}
.dash-hero-content{position:relative;color:#fff;z-index:1;}
.dash-hero-content h1{color:#fff;font-size:1.6rem;margin:0 0 6px;}
.dash-hero-content p{color:#CBD5E1;margin:0;font-size:13.5px;}

/* ---------- Dashboard: donut chart (pure CSS conic-gradient, no JS/library) ---------- */
.donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;}
.donut{
  width:150px;height:150px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.donut::after{content:'';position:absolute;inset:20px;background:var(--surface);border-radius:50%;}
.donut-center{position:relative;text-align:center;z-index:1;}
.donut-center .num{font-family:'Manrope';font-size:22px;font-weight:800;color:var(--secondary);line-height:1;}
.donut-center .label{font-size:10.5px;color:var(--text-muted);margin-top:3px;}
.donut-legend{display:flex;flex-direction:column;gap:10px;}
.donut-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;}
.donut-legend-item .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.donut-legend-item .val{font-weight:700;color:var(--secondary);margin-left:2px;}
.donut-legend-item .pct{color:var(--text-muted);}

/* ---------- Dashboard: progress bars (room status) ---------- */
.progress-row{margin-bottom:16px;}
.progress-row:last-child{margin-bottom:0;}
.progress-row .progress-label{display:flex;justify-content:space-between;font-size:12.5px;font-weight:600;color:var(--secondary);margin-bottom:6px;}
.progress-row .progress-label .count{color:var(--text-muted);font-weight:500;}
.progress-track{height:7px;background:var(--border-soft);border-radius:20px;overflow:hidden;}
.progress-fill{height:100%;border-radius:20px;transition:width .4s var(--ease);}

/* ---------- Dashboard: mini summary cards (2-column grid, matches Quick Actions) ---------- */
.mini-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mini-stat-grid.cols-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:480px){.mini-stat-grid.cols-3{grid-template-columns:1fr;}}
.mini-stat{display:flex;align-items:center;justify-content:space-between;padding:14px;border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--surface);transition:all .15s var(--ease);}
.mini-stat:hover{border-color:var(--primary);transform:translateY(-1px);}
.mini-stat .mini-label{font-size:12px;color:var(--text-muted);margin-bottom:4px;}
.mini-stat .mini-num{font-family:'Manrope';font-size:19px;font-weight:800;color:var(--secondary);}
.mini-stat .mini-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
@media(max-width:480px){.mini-stat-grid{grid-template-columns:1fr;}}

/* ---------- Dashboard: revenue area chart (pure SVG) ---------- */
.chart-tooltip{fill:var(--secondary);font-size:10px;font-family:'Inter',sans-serif;}
.chart-tooltip-box{
  position:absolute;pointer-events:none;background:var(--secondary);color:#fff;
  padding:8px 12px;border-radius:8px;font-size:12px;line-height:1.4;
  box-shadow:var(--shadow-md);opacity:0;transform:translate(-50%,-100%) translateY(-8px);
  transition:opacity .1s var(--ease);white-space:nowrap;z-index:20;
}
.chart-tooltip-box.visible{opacity:1;}
.chart-tooltip-box b{font-weight:700;}
.chart-tooltip-box .tt-value{color:#93C5FD;font-weight:700;}

/* ---------- Dashboard: quick actions grid ---------- */
.quick-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.quick-action-btn{
  display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--radius-sm);
  border:1px solid var(--border-soft);background:var(--surface);color:var(--secondary);
  font-size:12.5px;font-weight:700;transition:all .15s var(--ease);
}
.quick-action-btn:hover{border-color:var(--primary);background:var(--primary-50);text-decoration:none;transform:translateY(-1px);}
.quick-action-btn .qa-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ---------- Dashboard: notifications feed ---------- */
.notif-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-soft);align-items:flex-start;}
.notif-item:last-child{border-bottom:none;}
.notif-item .notif-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;}
.notif-item .notif-text{font-size:12.5px;color:var(--text);flex:1;}
.notif-item .notif-time{font-size:11px;color:var(--text-faint);white-space:nowrap;}

/* ---------- Header: date/time widget ---------- */
.header-datetime{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius);font-size:12.5px;color:var(--text-muted);white-space:nowrap;}
.header-datetime b{color:var(--secondary);}

/* ============ DataTables — reskinned to match app design ============ */
.dt-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:14px;}
.dt-toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.dt-length label, .dt-search label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);font-weight:500;margin:0;white-space:nowrap;}
.dt-length select{padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:var(--surface);color:var(--text);font-family:inherit;}
.dt-length select:focus{outline:none;border-color:var(--primary);}

.dt-search input.dt-input{padding:8px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:13px;background:var(--surface);color:var(--text);width:200px;font-family:inherit;transition:border-color .15s var(--ease),box-shadow .15s var(--ease);}
.dt-search input.dt-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--shadow-focus);}
.dt-search input.dt-input::placeholder{color:var(--text-faint);}

.dt-buttons{display:flex;gap:8px;}
.dt-button{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);color:var(--primary);border:1.5px solid var(--border);
  padding:7px 14px;border-radius:var(--radius-sm);font-weight:600;font-size:12.5px;
  cursor:pointer;transition:all .15s var(--ease);font-family:inherit;
}
.dt-button .icon{background:var(--primary);}
.dt-button:hover{border-color:var(--primary);background:var(--primary-50);transform:translateY(-1px);}

table.dataTable{border-collapse:collapse !important;width:100% !important;font-size:13.5px;}
table.dataTable thead th{
  background:#F1F5F9 !important;color:var(--secondary);font-weight:700;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.04em;padding:12px 16px !important;border-bottom:1px solid var(--border);
}
table.dataTable thead th.dt-orderable-asc:hover, table.dataTable thead th.dt-orderable-desc:hover{color:var(--primary);}
table.dataTable tbody td{padding:13px 16px !important;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
table.dataTable tbody tr:hover{background:var(--primary-50);}
table.dataTable.no-footer{border-bottom:none;}

.dt-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:16px;}
.dt-info{font-size:12.5px;color:var(--text-muted);}
.dt-paging{display:flex;gap:4px;}
.dt-paging .dt-paging-button{
  padding:6px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text-muted);font-size:12.5px;font-weight:600;cursor:pointer;
  transition:all .15s var(--ease);
}
.dt-paging .dt-paging-button.current{background:var(--primary);border-color:var(--primary);color:#fff;}
.dt-paging .dt-paging-button:hover:not(.disabled):not(.current){border-color:var(--primary);color:var(--primary);}
.dt-paging .dt-paging-button.disabled{opacity:.4;cursor:not-allowed;}
.dt-container{width:100%;}
@media(max-width:700px){
  .dt-toolbar, .dt-toolbar-right, .dt-footer{flex-direction:column;align-items:stretch;}
  .dt-search input.dt-input{width:100%;}
}

.mobile-toggle-btn{display:none;}
/* ---------- Mobile responsiveness for app shell ---------- */
@media(max-width:900px){
  .app-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s var(--ease);box-shadow:var(--shadow-lg);}
  .app-sidebar.mobile-open{transform:translateX(0);}
  .app-body{padding:18px;}
  .app-header{padding:0 16px;}
  .header-datetime{display:none;}
  .user-chip .meta{display:none;}
  .mobile-toggle-btn{display:flex;}
  .donut-wrap{flex-direction:column;}
  .quick-action-grid{grid-template-columns:1fr;}
}

/* ================= Avatar chips (table rows) ================= */
.avatar-chip{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;font-family:'Manrope',sans-serif;flex-shrink:0;line-height:1;}
.avatar-row{display:flex;align-items:center;gap:10px;}
.avatar-row .meta{line-height:1.3;}
.avatar-row .meta .name{font-weight:600;color:var(--text);}
.avatar-row .meta .sub{font-size:11.5px;color:var(--text-muted);display:block;}

/* ================= Status stepper ================= */
.stepper{display:flex;align-items:flex-start;gap:0;margin:14px 0 6px;}
.stepper .step{flex:1;text-align:center;position:relative;min-width:0;}
.stepper .step .dot{
  width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--text-faint);
  display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-weight:800;font-size:12.5px;
  border:2px solid var(--border);transition:all .2s var(--ease);position:relative;z-index:2;
}
.stepper .step .label{font-size:11px;font-weight:700;color:var(--text-faint);padding:0 4px;overflow-wrap:break-word;}
.stepper .step::before{content:'';position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--border);z-index:1;}
.stepper .step:first-child::before{display:none;}
.stepper .step.done .dot{background:var(--success);border-color:var(--success);color:#fff;}
.stepper .step.done .label{color:var(--success);}
.stepper .step.done::before{background:var(--success);}
.stepper .step.current .dot{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-100);}
.stepper .step.current .label{color:var(--primary);}
.stepper.stopped .step.stopped-here .dot{background:var(--danger);border-color:var(--danger);color:#fff;}
.stepper.stopped .step.stopped-here .label{color:var(--danger);font-weight:800;}
.stepper.stopped .step.stopped-here::before{background:var(--danger);}
@media(max-width:560px){.stepper .step .label{font-size:9.5px;}.stepper .step .dot{width:26px;height:26px;font-size:11px;}}

/* ---------- Simple wizard step-indicator (booking form) ---------- */
.wizard-steps{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.wizard-steps .wstep{display:flex;align-items:center;gap:8px;padding:9px 16px 9px 10px;border-radius:var(--radius);background:var(--bg);border:1px solid var(--border-soft);flex:1;min-width:170px;transition:all .2s var(--ease);}
.wizard-steps .wstep .num{width:24px;height:24px;border-radius:50%;background:var(--border-soft);color:var(--text-faint);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11.5px;flex-shrink:0;}
.wizard-steps .wstep .txt{font-size:12.5px;font-weight:700;color:var(--text-faint);}
.wizard-steps .wstep.active{background:var(--primary-50);border-color:var(--primary-100);}
.wizard-steps .wstep.active .num{background:var(--primary);color:#fff;}
.wizard-steps .wstep.active .txt{color:var(--primary);}
.wizard-steps .wstep.done .num{background:var(--success);color:#fff;}
.wizard-steps .wstep.done .txt{color:var(--success);}

/* ---------- Marketing "how it works" flow chips ---------- */
.flow-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.flow-steps .fchip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg);border:1px solid var(--border-soft);border-radius:20px;font-size:12.5px;font-weight:700;color:var(--secondary);white-space:nowrap;}
.flow-steps .fchip .num{width:18px;height:18px;border-radius:50%;background:var(--primary-100);color:var(--primary-600);font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.flow-steps .arrow{color:var(--text-faint);flex-shrink:0;}

/* ================= Dashboard Rooms Overview tile grid ================= */
.room-tile-legend{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 16px;font-size:11.5px;color:var(--text-muted);}
.room-tile-legend .chip{display:inline-flex;align-items:center;gap:6px;}
.room-tile-legend .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.room-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
.room-tile{
  border-radius:14px;padding:14px;cursor:pointer;color:#fff;min-height:112px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
  box-shadow:0 2px 6px rgba(0,0,0,.08);position:relative;overflow:hidden;
}
.room-tile:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.16);}
.room-tile.available{background:linear-gradient(135deg,#16A34A,#22C55E);}
.room-tile.occupied,.room-tile.arrived{background:linear-gradient(135deg,#DC2626,#F43F5E);}
.room-tile.partial{background:linear-gradient(135deg,#D97706,#F59E0B);}
.room-tile.blocked{background:linear-gradient(135deg,#6D28D9,#8B5CF6);}
.room-tile.maintenance{background:linear-gradient(135deg,#475569,#64748B);}
.room-tile .rnum{font-size:19px;font-weight:800;line-height:1.1;}
.room-tile .rtype{font-size:10.5px;opacity:.85;text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.room-tile .guest{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.room-tile .dates{font-size:10px;opacity:.9;margin-top:1px;}
.room-tile .pill{display:inline-block;background:rgba(255,255,255,.25);padding:3px 10px;border-radius:20px;font-size:9.5px;font-weight:800;margin-top:7px;text-transform:uppercase;letter-spacing:.02em;}
#roomTileSearch{max-width:200px;}

/* ================= Member booking: room/bed tile picker ================= */
.tile-picker-status{
  display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:var(--radius);
  font-size:13px;font-weight:700;margin-bottom:16px;border:1.5px solid transparent;transition:all .15s var(--ease);
}
.tile-picker-status.need-more{background:var(--warning-bg);color:#92400E;border-color:#FDE68A;}
.tile-picker-status.ready{background:var(--success-bg);color:#166534;border-color:#BBF7D0;}
.tile-picker-status .icon{flex-shrink:0;}
.tile-picker-amount{margin-left:auto;font-size:14.5px;font-weight:800;white-space:nowrap;}
.floor-group-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);margin:16px 0 8px;padding-top:4px;border-top:1px solid var(--border-soft);}
.floor-group-label:first-child{margin-top:0;border-top:none;padding-top:0;}
.pick-tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;}
.pick-tile{
  position:relative;border-radius:12px;padding:12px 10px;min-height:88px;
  border:2px solid var(--border-soft);background:var(--surface);
  display:flex;flex-direction:column;justify-content:space-between;transition:all .15s var(--ease);
}
.pick-tile.available{cursor:pointer;}
.pick-tile.available:hover{border-color:var(--primary-100);transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.pick-tile.selected{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 3px var(--primary-100);}
.pick-tile.unavailable{background:var(--danger-bg);border-color:transparent;cursor:not-allowed;opacity:.85;}
.pick-tile .pt-num{font-size:14.5px;font-weight:800;color:var(--secondary);line-height:1.2;}
.pick-tile.unavailable .pt-num{color:#991B1B;}
.pick-tile .pt-sub{font-size:10px;color:var(--text-faint);font-weight:600;text-transform:uppercase;letter-spacing:.02em;margin-top:1px;}
.pick-tile .pt-rate{font-size:10.5px;color:var(--primary-600);font-weight:700;margin-top:6px;}
.pick-tile .pt-conflict{font-size:9.5px;color:#991B1B;font-weight:700;margin-top:6px;line-height:1.4;}
.pick-tile .pt-check{
  position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;
  background:var(--primary);display:none;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
}
.pick-tile.selected .pt-check{display:flex;}
.pick-tile .pt-check .icon{width:11px;height:11px;background:#fff;}
.dorm-block{border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;background:#fbfcfe;}
.dorm-block-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px;}

/* ================= Report bar-chart rows (reuses progress bar look) ================= */
.bar-row{display:grid;grid-template-columns:150px 1fr 90px;align-items:center;gap:12px;margin-bottom:10px;font-size:12.5px;}
.bar-row:last-child{margin-bottom:0;}
.bar-row .bar-label{color:var(--secondary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bar-row .bar-track{height:10px;background:var(--border-soft);border-radius:20px;overflow:hidden;}
.bar-row .bar-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--primary),#60a5fa);transition:width .4s var(--ease);}
.bar-row .bar-value{text-align:right;font-weight:700;color:var(--secondary);}
@media(max-width:600px){.bar-row{grid-template-columns:90px 1fr 70px;font-size:11.5px;}}

/* ================= Mobile: tables become stacked cards ================= */
@media(max-width:760px){
  table.data-table thead{display:none;}
  table.data-table, table.data-table tbody, table.data-table tr, table.data-table td{display:block;width:100%;}
  table.data-table tr{margin-bottom:14px;border:1px solid var(--border-soft);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow-xs);background:var(--surface);}
  table.data-table td{border:none;padding:7px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;text-align:right;border-bottom:1px solid var(--border-soft);}
  table.data-table td:last-child{border-bottom:none;}
  table.data-table td::before{content:attr(data-label);font-weight:700;color:var(--text-muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;text-align:left;flex-shrink:0;padding-top:2px;}
  table.data-table td:empty{display:none;}
  table.data-table td.no-export{justify-content:flex-start;flex-wrap:wrap;gap:8px;}
  table.data-table td.no-export::before{display:none;}
  table.data-table tbody tr:nth-child(even){background:var(--surface);}
}

/* ================= Dark mode ================= */
:root[data-theme="dark"]{
  --primary:#3B82F6;
  --primary-600:#2563EB;
  --primary-50:#152238;
  --primary-100:#1E3A5F;
  --secondary:#F1F5F9;
  --bg:#0B1220;
  --surface:#111A2C;
  --border:#22304A;
  --border-soft:#1B2A42;
  --text:#E2E8F0;
  --text-muted:#94A3B8;
  --text-faint:#64748B;
  --success-bg:#0F2E1E;
  --warning-bg:#3A2A0C;
  --danger-bg:#3A1418;
  --info-bg:#0B2A33;
  --purple-bg:#241B3F;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 3px rgba(0,0,0,.35);
  --shadow-md:0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
}
:root[data-theme="dark"] table.dataTable thead th{background:#16233A !important;}
:root[data-theme="dark"] table th{background:#16233A;}
:root[data-theme="dark"] .badge-checkedout{background:#1E293B;color:#CBD5E1;}
:root[data-theme="dark"] input[type=file]{background:var(--bg);}
:root[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.7);}
:root[data-theme="dark"] .skeleton{background:linear-gradient(90deg,#1B2A42 25%,#22304A 37%,#1B2A42 63%);background-size:400% 100%;}
.theme-toggle-btn .i-sun, .theme-toggle-btn .i-moon{display:none;}
:root[data-theme="dark"] .theme-toggle-btn .i-sun{display:inline-block;}
:root:not([data-theme="dark"]) .theme-toggle-btn .i-moon{display:inline-block;}

/* ================= Rooms & Beds page ================= */
.rooms-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:20px;
}
.room-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease);
}
.room-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);}
.room-card-head{
  padding:16px 18px;
  border-bottom:1px solid var(--border-soft);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  background:linear-gradient(180deg,var(--bg) 0%,var(--surface) 100%);
}
.room-card-head h3{
  margin:0;
  font-size:15.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.room-card-meta{
  margin:6px 0 0;
  font-size:12.5px;
  color:var(--text-muted);
  line-height:1.45;
}
.room-card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column;gap:14px;}
.room-card-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:420px){.room-card-actions{grid-template-columns:1fr;}}
.room-card-actions form{margin:0;}
.room-card-actions label{font-size:11.5px;font-weight:600;color:var(--text-muted);margin-bottom:4px;display:block;}
.room-card-actions select,
.room-card-actions input[type=number]{
  width:100%;
  font-size:13px;
  padding:8px 10px;
}
.room-card-footer{
  padding:12px 18px;
  border-top:1px solid var(--border-soft);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--bg);
}
.beds-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px;}
.beds-table th{
  text-align:left;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-faint);
  padding:6px 8px;
  border-bottom:1px solid var(--border-soft);
}
.beds-table td{padding:8px;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
.beds-table tr:last-child td{border-bottom:none;}
.beds-table select{font-size:12.5px;padding:5px 8px;min-width:110px;}
.room-type-pill{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
  background:var(--primary-50);
  color:var(--primary);
}
.rate-row{display:flex;gap:8px;align-items:flex-end;}
.rate-row > div{flex:1;}
.rate-row .btn{flex-shrink:0;margin-bottom:1px;}

/* ================= Room photos ================= */
.room-photo-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:4px;
  height:var(--photo-h,140px);overflow:hidden;background:var(--bg);
}
.room-photo-thumb{display:block;height:100%;overflow:hidden;}
.room-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s var(--ease);}
.room-photo-thumb:hover img{transform:scale(1.05);}
.room-photo-placeholder{
  display:flex;align-items:center;justify-content:center;background:var(--bg);
  color:var(--text-faint);border-radius:0;
}
.room-photo-placeholder .icon{width:36px;height:36px;opacity:.45;}
.room-card-photos{border-bottom:1px solid var(--border-soft);}
.room-card-photos .room-photo-strip,
.room-card-photos .room-photo-placeholder{border-radius:0;}
.photo-upload-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:6px;}
.photo-upload-slot{flex:1;min-width:120px;}
.photo-upload-slot input[type=file]{font-size:12px;width:100%;}
.photo-preview{width:100%;height:72px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border-soft);margin-bottom:4px;display:block;}
.photo-remove{font-size:11px;color:var(--danger);display:flex;align-items:center;gap:4px;margin-bottom:4px;cursor:pointer;}
.room-photos-form{padding-top:4px;border-top:1px dashed var(--border-soft);}

/* ================= Home page ================= */
.hero-home{
  text-align:left;padding:56px 48px;margin-bottom:40px;
  min-height:340px;display:flex;align-items:center;
  border-radius:20px;
  /* Lobby photo full-bleed — same feel as reference design */
  background:#0B1B3A url('../images/bg1.webp') right center/cover no-repeat;
  position:relative;overflow:hidden;
  box-shadow:0 20px 50px rgba(15,23,42,.18);
}
.hero-home::before{
  /* Deep navy-blue LEFT for text, fades out so RIGHT photo stays clear */
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    #0B1B3A 0%,
    #0B1B3A 18%,
    rgba(11,27,58,.95) 32%,
    rgba(15,40,90,.75) 48%,
    rgba(20,50,110,.35) 62%,
    rgba(20,50,110,.08) 78%,
    transparent 100%);
}
.hero-home::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 15% 50%, rgba(37,99,235,.28), transparent 55%);
  pointer-events:none;
}
.hero-home-inner{position:relative;z-index:1;max-width:520px;}
.hero-badge{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#93C5FD;background:rgba(255,255,255,.1);border:1px solid rgba(147,197,253,.25);
  padding:6px 14px;border-radius:20px;margin-bottom:20px;backdrop-filter:blur(6px);
}
.hero-home h1{
  font-size:clamp(1.85rem,3.8vw,2.55rem);line-height:1.18;margin:0 0 14px;
  color:#fff;font-weight:800;letter-spacing:-.02em;
}
.hero-home h1 .hero-accent{color:#3B82F6;display:inline;}
.hero-home p{color:#CBD5E1;font-size:15px;max-width:440px;margin:0 0 28px;line-height:1.65;}
.hero-home .hero-actions{justify-content:flex-start;gap:10px;}
.hero-home .hero-actions a{
  padding:12px 20px;font-size:13.5px;border-radius:10px;
}
.hero-actions a.ghost{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);
  box-shadow:none;
}
.hero-actions a.ghost:hover{background:rgba(255,255,255,.1);color:#fff;}
.hero-actions a.secondary{
  background:rgba;color:#fff;border:1px solid rgba(255,255,255,.4);
  box-shadow:none;
}
.hero-actions a.secondary:hover{background:rgba(255,255,255,.12);color:#fff;}
@media(max-width:720px){
  .hero-home{padding:40px 24px;min-height:300px;background-position:center;}
  .hero-home::before{
    background:linear-gradient(180deg,
      rgba(11,27,58,.95) 0%,
      rgba(11,27,58,.88) 55%,
      rgba(11,27,58,.55) 100%);
  }
}

.home-section{margin-bottom:48px;}
.section-head{margin-bottom:22px;}
.section-head h2{margin:0 0 6px;font-size:1.35rem;font-weight:800;text-align:center}
.section-head p{margin:0;color:var(--text-muted);font-size:14px;text-align:center}

.feature-card{text-align:left;}
.feature-icon{
  width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  background:var(--primary-50);color:var(--primary);margin-bottom:14px;
}
.feature-icon.success{background:var(--success-bg);color:var(--success);}
.feature-icon.info{background:var(--info-bg);color:var(--info);}
.feature-card h3{margin:0 0 8px;font-size:16px;}
.feature-card p{margin:0;color:var(--text-muted);font-size:13.5px;line-height:1.55;}

.room-showcase-card{padding:0;overflow:hidden;}
.room-showcase-card .room-photo-strip,
.room-showcase-card .room-photo-placeholder{border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
.room-showcase-body{padding:16px 18px 18px;}
.room-showcase-body h3{margin:0 0 6px;font-size:15.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.room-showcase-amenities{font-size:13px;color:var(--text-muted);margin:6px 0 0;}
.room-showcase-rates{
  display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin-top:12px;
  font-size:13px;color:var(--text-muted);
}
.room-showcase-rates strong{color:var(--secondary);font-size:15px;font-weight:800;}
.room-showcase-rates .per-night{font-size:11.5px;color:var(--text-faint);}

.home-cta{
  background:linear-gradient(135deg,var(--secondary),#1e3a5f);
  border-radius:var(--radius-xl);padding:48px 32px;text-align:center;margin-bottom:20px;
  color:#fff;position:relative;overflow:hidden;
}
.home-cta-inner{position:relative;z-index:1;}
.home-cta h2{color:#fff;margin:0 0 8px;font-size:1.5rem;}
.home-cta p{color:#94A3B8;margin:0 0 22px;}

/* Public site header polish */
.site-header{background:var(--surface);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:50;box-shadow:var(--shadow-xs);}
.header-inner{max-width:1180px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{display:flex;align-items:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;color:var(--secondary);text-decoration:none;}
.brand:hover{color:var(--secondary);text-decoration:none;}
.page-main{max-width:1180px;margin:0 auto;padding:28px 24px 48px;min-height:60vh;}

/* Site footer */
.site-footer{
  background:var(--secondary);color:#94A3B8;padding:28px 24px;margin-top:auto;
  font-size:13px;text-align:center;
}
.site-footer a{color:#CBD5E1;}
.site-footer a:hover{color:#fff;}
.site-footer-inner{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;}
.site-footer strong{color:#F1F5F9;}

@media(max-width:700px){
  .hero-home{padding:40px 22px;}
  .home-cta{padding:36px 20px;}
}

.pick-tile .pt-thumb{width:100%;height:64px;border-radius:8px;overflow:hidden;margin-bottom:8px;background:var(--bg);}
.pick-tile .pt-thumb img{width:100%;height:100%;object-fit:cover;display:block;}

/* ================= Room detail (catalog) layout ================= */
.room-detail-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:22px;
  align-items:start;
}
@media(max-width:960px){
  .room-detail-layout{grid-template-columns:1fr;}
}
.room-gallery-card{padding:16px;}
.room-gallery-main{
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg);
  aspect-ratio:16/10;
  max-height:380px;
}
.room-gallery-main img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.room-gallery-thumbs{
  display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;
}
.room-thumb{
  width:72px;height:56px;border-radius:10px;overflow:hidden;padding:0;
  border:2px solid transparent;background:var(--bg);cursor:pointer;
  transition:border-color .15s var(--ease);
}
.room-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.room-thumb.active{border-color:var(--primary);}
.room-thumb-add{
  border:2px dashed var(--border);color:var(--text-faint);font-size:22px;font-weight:300;
  display:flex;align-items:center;justify-content:center;
}
.room-thumb-add:hover{border-color:var(--primary);color:var(--primary);}

.room-side-card{padding:20px;}
.room-side-status{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-bottom:14px;border-bottom:1px solid var(--border-soft);
}
.status-live{
  display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;
}
.status-live .dot{width:8px;height:8px;border-radius:50%;background:currentColor;}
.status-live.status-available{color:var(--success);}
.status-live.status-occupied{color:#9F1239;}
.status-live.status-maintenance{color:#92400E;}
.status-live.status-blocked{color:var(--danger);}

.room-side-price{
  font-family:'Manrope',sans-serif;font-size:2rem;font-weight:800;color:var(--secondary);line-height:1.1;
}
.room-side-price span{font-size:14px;font-weight:600;color:var(--text-muted);}

.room-cal-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;
}
.room-cal-nav{display:flex;gap:4px;}
.room-month-cal{width:100%;border-collapse:collapse;table-layout:fixed;}
.room-month-cal th{
  font-size:11px;font-weight:700;color:var(--text-faint);padding:6px 2px;text-align:center;
}
.room-month-cal td{
  text-align:center;padding:8px 2px;font-size:12.5px;font-weight:600;
  border-radius:8px;color:var(--text-muted);
}
.room-month-cal td.empty{background:transparent;}
.room-month-cal td.free{color:var(--secondary);}
.room-month-cal td.booked{
  background:var(--primary-50);color:var(--primary-600);
}
.room-month-cal td.blocked{
  background:var(--danger-bg);color:var(--danger);
}
.room-month-cal td.today{
  outline:2px solid var(--primary);outline-offset:-2px;
}
.room-cal-legend{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11.5px;color:var(--text-muted);
}
.room-cal-legend .lg{
  display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:middle;
}
.room-cal-legend .lg.free{background:var(--border);}
.room-cal-legend .lg.booked{background:var(--primary-100);}
.room-cal-legend .lg.blocked{background:var(--danger-bg);}

/* ================= Booking guided wizard ================= */
.wizard-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
.wizard-card-head h2{margin:0;}
.wizard-collapsed{opacity:.92;}
.wizard-collapsed .summary-chips{margin-top:4px;}

.summary-chips{display:flex;flex-wrap:wrap;gap:8px;}
.schip{
  background:var(--bg);border:1px solid var(--border-soft);border-radius:20px;
  padding:6px 12px;font-size:12.5px;color:var(--text-muted);
}
.schip strong{color:var(--secondary);margin-right:4px;}

.need-hint{
  background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13.5px;color:var(--primary-600);
}

.info-box{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--info-bg);border:1px solid #A5F3FC;border-radius:var(--radius);
  padding:12px 14px;font-size:13px;color:var(--text);line-height:1.5;
}
.info-box .icon{flex-shrink:0;margin-top:2px;}

.stay-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px;}
@media(max-width:700px){.stay-type-grid{grid-template-columns:1fr;}}
.stay-type-card{
  display:block;padding:22px 20px;border:1.5px solid var(--border-soft);border-radius:var(--radius-lg);
  background:var(--surface);text-decoration:none;color:inherit;transition:all .2s var(--ease);
  box-shadow:var(--shadow-sm);
}
.stay-type-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none;color:inherit;}
.stay-type-card.disabled{opacity:.55;pointer-events:none;box-shadow:none;}
.stay-type-card h3{margin:0 0 8px;font-size:17px;}
.stay-type-card p{margin:0 0 8px;font-size:13.5px;color:var(--text-muted);line-height:1.5;}
.stc-icon{
  width:44px;height:44px;border-radius:12px;background:var(--primary-50);color:var(--primary);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.stc-icon.info{background:var(--info-bg);color:var(--info);}

.floor-label{
  font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint);margin:16px 0 8px;
}

.booking-sticky-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:18px;padding:14px 16px;background:var(--bg);border:1px solid var(--border-soft);
  border-radius:var(--radius);position:sticky;bottom:12px;z-index:5;box-shadow:var(--shadow-md);
}
.bsb-right{display:flex;align-items:center;gap:12px;}
.bsb-total{font-family:'Manrope',sans-serif;font-size:1.25rem;font-weight:800;color:var(--secondary);}

.review-panel{
  margin-top:20px;padding:20px;border:1.5px solid var(--primary-100);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--primary-50) 0%,var(--surface) 40%);
}
.review-panel h3{margin:0 0 14px;font-size:16px;}
.review-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;
}
@media(max-width:560px){.review-grid{grid-template-columns:1fr;}}
.rv-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);margin-bottom:2px;}
.rv-val{font-size:14px;font-weight:600;color:var(--secondary);line-height:1.45;}
.rv-total{font-size:1.35rem;font-weight:800;color:var(--primary);}


/* Larger room picker tiles (booking wizard) */
.pick-tile-grid-lg{
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:14px;
}
.pick-tile-grid-lg .pick-tile{
  min-height:132px;
  padding:14px 14px 12px;
  border-radius:14px;
}
.pick-tile-grid-lg .pick-tile .pt-num{font-size:16px;}
.pick-tile-grid-lg .pick-tile .pt-sub{font-size:11px;line-height:1.35;margin-top:3px;}
.pick-tile-grid-lg .pick-tile .pt-rate{font-size:12.5px;margin-top:8px;}
.pick-tile-grid-lg .pick-tile .pt-conflict{font-size:11px;margin-top:8px;}
.pick-tile-grid-lg .pt-thumb{height:80px;border-radius:10px;margin-bottom:10px;}


/* ================= Admin dashboard improvements ================= */
.dash-hero-content{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.dash-hero-actions{display:flex;gap:8px;flex-wrap:wrap;}

.dash-attention{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,#FFF7ED,#FEF3C7);
  border:1px solid #FCD34D;border-radius:var(--radius-lg);
  padding:12px 16px;margin-bottom:16px;
}
.dash-attention-title{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:800;color:#92400E;text-transform:uppercase;letter-spacing:.04em;
}
.dash-attention-items{display:flex;flex-wrap:wrap;gap:8px;flex:1;}
.dash-attention-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;border:1px solid #FDE68A;border-radius:20px;
  padding:6px 12px;font-size:12.5px;color:#78350F;text-decoration:none;font-weight:600;
  transition:all .15s ease;
}
.dash-attention-chip:hover{border-color:#F59E0B;box-shadow:0 2px 8px rgba(245,158,11,.2);text-decoration:none;color:#78350F;}
.dash-attention-chip.warn{border-color:#FDBA74;color:#9A3412;}
.dash-attention-chip.info{border-color:#A5F3FC;color:#0E7490;background:#ECFEFF;}
.dash-attention-chip strong{font-weight:800;}

.dash-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-bottom:16px;
}
@media(max-width:1100px){.dash-stat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.dash-stat-grid{grid-template-columns:1fr 1fr;gap:8px;}}

.dash-stat-grid .stat{
  text-decoration:none;color:inherit;display:block;
  transition:transform .15s ease,box-shadow .15s ease;
}
.dash-stat-grid a.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);text-decoration:none;color:inherit;}
.dash-stat-grid .stat.primary .stat-icon{background:var(--primary-50);color:var(--primary);}
.stat-link{
  display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;color:var(--primary);
}

.qa-badge{
  display:inline-block;min-width:18px;padding:1px 6px;border-radius:10px;
  background:var(--primary);color:#fff;font-size:10.5px;font-weight:800;font-style:normal;
  margin-left:4px;vertical-align:middle;
}
.qa-badge.warn{background:var(--warning);}
.qa-badge.ok{background:var(--success);}


/* ================= Admin Rooms Overview — photo cards 3-col ================= */
.room-card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media(max-width:1000px){.room-card-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.room-card-grid{grid-template-columns:1fr;gap:12px;}}

.room-card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.room-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--primary-100);
}
.room-card:focus{outline:2px solid var(--primary);outline-offset:2px;}

.rc-photo{
  position:relative;
  height:140px;
  background:linear-gradient(135deg,#E2E8F0,#F1F5F9);
  overflow:hidden;
}
.rc-photo img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.rc-photo-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#EEF2FF,#E0E7FF);
  color:var(--primary);
  opacity:.85;
}
.rc-photo-placeholder .icon{width:36px;height:36px;}

.rc-status{
  position:absolute;top:10px;right:10px;
  padding:4px 10px;border-radius:20px;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:#fff;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);
}
.room-card.available .rc-status{background:#16A34A;}
.room-card.occupied .rc-status,
.room-card.arrived .rc-status{background:#DC2626;}
.room-card.partial .rc-status{background:#D97706;}
.room-card.blocked .rc-status{background:#7C3AED;}
.room-card.maintenance .rc-status{background:#64748B;}

/* Left accent strip via border for status without covering photo */
.room-card.available{border-bottom:3px solid #16A34A;}
.room-card.occupied,
.room-card.arrived{border-bottom:3px solid #DC2626;}
.room-card.partial{border-bottom:3px solid #D97706;}
.room-card.blocked{border-bottom:3px solid #7C3AED;}
.room-card.maintenance{border-bottom:3px solid #64748B;}

.rc-body{padding:12px 14px 14px;flex:1;display:flex;flex-direction:column;gap:4px;}
.rc-name{font-family:'Manrope',sans-serif;font-size:16px;font-weight:800;color:var(--secondary);line-height:1.2;}
.rc-meta{font-size:11.5px;color:var(--text-faint);font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}
.rc-guest{font-size:13px;font-weight:600;color:var(--text);margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rc-dates{font-size:11.5px;color:var(--text-muted);}


/* Phase A extras */
.bulk-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 12px;margin-bottom:12px;
  background:var(--primary-50);border:1px solid var(--primary-100);border-radius:var(--radius-sm);
}
.bulk-check-all{font-size:13px;font-weight:600;color:var(--secondary);display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.link-pay{font-weight:800;color:var(--success);}
.btn-link{
  background:none;border:none;padding:0;font:inherit;cursor:pointer;color:var(--primary);text-decoration:underline;
}
.btn-link.danger{color:var(--danger);}
tr.row-highlight{background:linear-gradient(90deg,#FFF7ED,#fff);}

/* ================= Public availability calendar ================= */
.avail-layout{align-items:start;}
@media(max-width:900px){.avail-layout{grid-template-columns:1fr;}}
.avail-cal-head{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  margin-bottom:6px;text-align:center;
  font-size:11px;font-weight:700;color:var(--text-faint);text-transform:uppercase;
}
.avail-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.avail-day{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:52px;border-radius:10px;text-decoration:none;color:inherit;
  border:1px solid var(--border-soft);background:var(--bg);font-size:12px;
  transition:transform .12s ease,box-shadow .12s ease;
}
a.avail-day:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;}
.avail-day.empty{border:none;background:transparent;min-height:52px;}
.avail-day.disabled{opacity:.4;pointer-events:none;}
.avail-day.selected{outline:2px solid var(--primary);outline-offset:1px;}
.avail-day .ad-num{font-weight:800;font-size:13px;}
.avail-day .ad-free{font-size:10px;font-weight:700;opacity:.85;}
.avail-day.level-high{background:#DCFCE7;border-color:#86EFAC;color:#166534;}
.avail-day.level-mid{background:#FEF9C3;border-color:#FDE047;color:#854D0E;}
.avail-day.level-low{background:#FFEDD5;border-color:#FDBA74;color:#9A3412;}
.avail-day.level-none{background:#FEE2E2;border-color:#FCA5A5;color:#991B1B;}
.avail-day.level-out{background:var(--bg);}
.avail-cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11.5px;color:var(--text-muted);}
.avail-cal-legend .lg{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:middle;border:1px solid rgba(0,0,0,.08);}
.avail-cal-legend .lg.high{background:#DCFCE7;}
.avail-cal-legend .lg.mid{background:#FEF9C3;}
.avail-cal-legend .lg.low{background:#FFEDD5;}
.avail-cal-legend .lg.none{background:#FEE2E2;}


/* Brand subtitle under ITPI-HRC ABMS */
.sidebar-logo .brandtext .brand-sub{
  display:block;font-weight:500;font-size:8.5px;color:#94A3B8;letter-spacing:.01em;
  white-space:normal;line-height:1.25;max-width:150px;margin-top:1px;
}
.sidebar-logo .brandtext .brand-role{
  display:block;font-weight:500;font-size:10.5px;color:#64748B;letter-spacing:.02em;margin-top:2px;
}
.brand.brand-with-sub{display:flex;align-items:center;gap:10px;}
.brand .brand-logo{width:52px;height:auto;flex-shrink:0;}
.brand .brand-text-wrap{display:flex;flex-direction:column;line-height:1.2;}
.brand .brand-title{font-family:'Manrope',sans-serif;font-weight:800;font-size:15.5px;color:var(--secondary);}
.brand .brand-sub{font-size:10.5px;font-weight:500;color:var(--text-muted);letter-spacing:.01em;margin-top:2px;}
.auth-visual-brand .brand-sub{display:block;font-size:11px;font-weight:500;opacity:.85;margin-top:4px;letter-spacing:.02em;}