/* ============================================================

   PARAPAT V2.13 — CSS FINAL

   Dashboard Analisis + Kalender Bulanan + Linimasa Harian

   ============================================================ */

:root{

  --navy-950:#071426;--navy-900:#0b1f3a;--navy-800:#102b4f;--blue-700:#1d4ed8;--blue-600:#2563eb;--blue-500:#3b82f6;--blue-100:#dbeafe;--blue-50:#eff6ff;

  --gray-950:#0f172a;--gray-900:#111827;--gray-800:#1f2937;--gray-700:#374151;--gray-600:#4b5563;--gray-500:#6b7280;--gray-400:#9ca3af;--gray-300:#d1d5db;--gray-200:#e5e7eb;--gray-100:#f3f4f6;--gray-50:#f8fafc;

  --green-700:#15803d;--green-600:#16a34a;--green-500:#22c55e;--green-100:#dcfce7;--green-50:#f0fdf4;

  --orange-600:#ea580c;--orange-500:#f97316;--orange-100:#ffedd5;--orange-50:#fff7ed;

  --red-700:#b91c1c;--red-600:#dc2626;--red-100:#fee2e2;--red-50:#fef2f2;

  --purple-600:#7c3aed;--purple-100:#ede9fe;--purple-50:#f5f3ff;--white:#fff;

  --sidebar-width:264px;--topbar-height:74px;--radius-sm:9px;--radius-md:14px;--radius-lg:20px;

  --shadow-sm:0 1px 2px rgba(15,23,42,.05);--shadow-md:0 10px 30px rgba(15,23,42,.08);--transition:.2s ease;

}

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,"Segoe UI",sans-serif;background:var(--gray-50);color:var(--gray-800);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}.hidden{display:none!important}



/* LOADING */

.app-loading{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,var(--navy-950),var(--navy-800));color:#fff}.app-loading-content{text-align:center}.app-loading-logo{width:70px;height:70px;margin:0 auto 20px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:28px}.app-loading-spinner{width:34px;height:34px;margin:0 auto 18px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite}.app-loading h2{margin:0 0 7px;font-size:21px}.app-loading p{margin:0;color:#bfdbfe}@keyframes spin{to{transform:rotate(360deg)}}



/* LOGIN */

.login-page{min-height:100vh;background:#eef3f9}.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,46%) 1fr}.login-brand-panel{display:flex;align-items:center;padding:56px;background:linear-gradient(145deg,#071426,#123a69);color:#fff}.login-brand-content{max-width:540px;margin:auto}.login-brand-logo,.login-mobile-logo{width:62px;height:62px;border-radius:17px;display:grid;place-items:center;background:rgba(255,255,255,.11);font-size:25px}.login-brand-content h1{font-size:42px;line-height:1.12;margin:16px 0}.login-brand-content>p{color:#cbd5e1;line-height:1.8}.login-feature-list{display:grid;gap:16px;margin-top:34px}.login-feature-item{display:flex;gap:14px;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.05)}.login-feature-item>i{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:rgba(96,165,250,.15);color:#93c5fd}.login-feature-item strong,.login-feature-item span{display:block}.login-feature-item span{margin-top:4px;color:#cbd5e1;font-size:12px;line-height:1.5}.login-form-panel{display:flex;align-items:center;justify-content:center;padding:40px}.login-card{width:min(430px,100%);padding:36px;background:#fff;border:1px solid var(--gray-200);border-radius:20px;box-shadow:var(--shadow-md)}.login-mobile-logo{display:none;margin-bottom:18px;background:var(--blue-50);color:var(--blue-600)}.login-card h2{margin:8px 0 8px;font-size:28px}.login-description{margin:0 0 25px;color:var(--gray-500)}.login-footer{margin-top:28px;padding-top:20px;border-top:1px solid var(--gray-200);text-align:center}.login-footer strong,.login-footer span{display:block}.login-footer strong{font-size:11px}.login-footer span{margin-top:4px;color:var(--gray-400);font-size:10px}.eyebrow{color:var(--blue-600);font-size:10px;font-weight:800;letter-spacing:1.5px}.eyebrow\.light{color:#bfdbfe}



/* FORM + BUTTONS */

.form-group{margin-bottom:18px}.form-group label{display:block;margin-bottom:7px;color:var(--gray-700);font-size:12px;font-weight:700}.required{color:var(--red-600)}input,select,textarea{width:100%;border:1px solid var(--gray-300);border-radius:10px;background:#fff;color:var(--gray-800);outline:none;transition:var(--transition)}input,select{min-height:43px;padding:0 12px}textarea{padding:11px 12px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.11)}.form-group small{display:block;margin-top:6px;color:var(--gray-500);font-size:11px}.input-icon-wrapper{position:relative}.input-icon-wrapper>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--gray-400)}.input-icon-wrapper input{padding-left:39px;padding-right:42px}.password-toggle{position:absolute;right:5px;top:5px;width:34px;height:34px;border:0;background:transparent;color:var(--gray-500)}.btn{min-height:41px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 16px;border:1px solid transparent;border-radius:10px;font-weight:700;font-size:12px;transition:var(--transition)}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--blue-600);color:#fff}.btn-primary:hover:not(:disabled){background:var(--blue-700)}.btn-secondary{background:#fff;color:var(--gray-700);border-color:var(--gray-300)}.btn-light{background:#fff;color:var(--navy-900)}.btn-danger{background:var(--red-600);color:#fff}.btn-success{background:var(--green-600);color:#fff}.btn-block{width:100%}.btn-sm,.btn-small{min-height:36px;padding:0 13px}.button-text,.button-loading{display:inline-flex;align-items:center;gap:8px}.form-grid.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}.alert{margin-bottom:18px;padding:12px 14px;border-radius:10px;font-size:12px}.alert-danger{color:#991b1b;background:var(--red-50);border:1px solid var(--red-100)}



/* SHELL / SIDEBAR */

.app-shell{min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1000;width:var(--sidebar-width);display:flex;flex-direction:column;background:linear-gradient(180deg,var(--navy-950),#0d2949);color:#fff}.sidebar-header{height:78px;display:flex;align-items:center;gap:11px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07)}.sidebar-logo{width:39px;height:39px;display:grid;place-items:center;border-radius:11px;background:rgba(59,130,246,.18);color:#93c5fd}.sidebar-brand strong,.sidebar-brand span{display:block}.sidebar-brand strong{font-size:14px;letter-spacing:.7px}.sidebar-brand span{margin-top:3px;color:#93c5fd;font-size:9px;letter-spacing:1px}.sidebar-close{display:none;margin-left:auto;border:0;background:transparent;color:#fff;font-size:18px}.sidebar-user{display:flex;align-items:center;gap:11px;margin:14px 12px 5px;padding:12px;border-radius:12px;background:rgba(255,255,255,.05)}.sidebar-avatar,.topbar-avatar{display:grid;place-items:center;border-radius:50%;font-weight:800}.sidebar-avatar{width:37px;height:37px;background:#1d4ed8}.sidebar-user-info{min-width:0}.sidebar-user-info strong,.sidebar-user-info span{display:block}.sidebar-user-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.sidebar-user-info span{margin-top:3px;color:#93c5fd;font-size:9px;font-weight:800}.sidebar-nav{flex:1;overflow-y:auto;padding:6px 12px 16px}.nav-section-title{margin:18px 10px 8px;color:rgba(255,255,255,.34);font-size:9px;font-weight:800;letter-spacing:1.4px}.nav-item{position:relative;width:100%;min-height:44px;display:flex;align-items:center;gap:11px;margin-bottom:4px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.7);text-align:left;font-size:12px}.nav-item:hover,.nav-item.active{background:rgba(59,130,246,.16);color:#fff}.nav-item.active:before{content:"";position:absolute;left:0;width:3px;height:22px;border-radius:0 4px 4px 0;background:#60a5fa}.nav-icon{width:22px;text-align:center}.nav-badge{margin-left:auto;min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px;border-radius:20px;background:var(--orange-500);font-size:9px}.sidebar-footer{padding:12px 14px 16px;border-top:1px solid rgba(255,255,255,.07)}.logout-item{color:#fecaca}.sidebar-version{display:flex;justify-content:space-between;padding:8px 12px 0;color:rgba(255,255,255,.35);font-size:8px}.sidebar-overlay{display:none;position:fixed;inset:0;z-index:950;background:rgba(7,20,38,.55)}



/* MAIN / TOPBAR */

.main-content{min-height:100vh;margin-left:var(--sidebar-width)}.topbar{position:sticky;top:0;z-index:800;height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;padding:0 28px;border-bottom:1px solid var(--gray-200);background:rgba(255,255,255,.95);backdrop-filter:blur(12px)}.topbar-left,.topbar-right,.topbar-profile,.topbar-date{display:flex;align-items:center}.topbar-left{gap:12px}.topbar-left h2{margin:0;font-size:17px}.topbar-left p{margin:4px 0 0;color:var(--gray-500);font-size:10px}.topbar-right{gap:12px}.topbar-date{gap:7px;color:var(--gray-500);font-size:10px}.topbar-profile{gap:9px;padding-left:12px;border-left:1px solid var(--gray-200)}.topbar-avatar{width:35px;height:35px;background:var(--blue-100);color:var(--blue-700)}.topbar-profile-text strong,.topbar-profile-text span{display:block}.topbar-profile-text strong{font-size:10px}.topbar-profile-text span{margin-top:2px;color:var(--gray-500);font-size:8px}.icon-button{width:38px;height:38px;display:inline-grid;place-items:center;border:1px solid var(--gray-200);border-radius:10px;background:#fff;color:var(--gray-600)}.sidebar-toggle{display:none}.content-area{padding:25px 28px 45px}.page-section{display:none}.page-section.active{display:block;animation:pageIn .2s ease}@keyframes pageIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}



/* DASHBOARD */

.welcome-card{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;padding:25px 28px;border-radius:17px;background:linear-gradient(135deg,#0b1f3a,#174b83);color:#fff;box-shadow:var(--shadow-md)}.welcome-card h1{margin:7px 0 7px;font-size:24px}.welcome-card p{margin:0;color:#cbd5e1;font-size:11px}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.stat-card{min-height:106px;display:flex;align-items:center;gap:13px;padding:17px;border:1px solid var(--gray-200);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}.stat-icon{width:45px;height:45px;flex:0 0 45px;display:grid;place-items:center;border-radius:12px;font-size:17px}.stat-icon.blue{color:var(--blue-600);background:var(--blue-50)}.stat-icon.orange{color:var(--orange-600);background:var(--orange-50)}.stat-icon.green{color:var(--green-600);background:var(--green-50)}.stat-icon.purple{color:var(--purple-600);background:var(--purple-50)}.stat-content span,.stat-content strong,.stat-content small{display:block}.stat-content span{color:var(--gray-500);font-size:10px}.stat-content strong{margin:4px 0;font-size:25px;color:var(--gray-950)}.stat-content small{color:var(--gray-400);font-size:9px}.section-card{margin-bottom:18px;padding:20px;border:1px solid var(--gray-200);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm)}.section-card-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.section-card-header.compact{margin-bottom:14px}.section-card-header h3{margin:0;color:var(--gray-900);font-size:15px}.section-card-header p{margin:5px 0 0;color:var(--gray-500);font-size:10px;line-height:1.5}.dashboard-analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.analytics-card{min-height:330px}.live-indicator{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:20px;background:var(--green-50);color:var(--green-700);font-size:9px;font-weight:800}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 4px rgba(34,197,94,.12)}.room-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.room-card{padding:13px;border:1px solid var(--gray-200);border-radius:12px;background:var(--gray-50)}.room-card.available{border-left:4px solid var(--green-500)}.room-card.busy{border-left:4px solid var(--orange-500)}.room-card-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.room-card-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#fff}.room-card h4{margin:10px 0 4px;font-size:11px}.room-card p{margin:0;color:var(--gray-500);font-size:9px}.room-card-booking{margin-top:8px;padding:8px;border-radius:8px;background:#fff;font-size:9px}.status-dot-label{font-size:8px;font-weight:800}.status-dot-label.available{color:var(--green-700)}.status-dot-label.busy{color:var(--orange-600)}.chart-container{position:relative;height:245px}.donut-container{max-width:430px;margin:auto}.chart-fallback{display:grid;gap:8px}.chart-fallback-row{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:10px;align-items:center;font-size:10px}.chart-fallback-bar{height:9px;border-radius:10px;background:var(--gray-100);overflow:hidden}.chart-fallback-fill{height:100%;background:var(--blue-500)}



/* TABLE / FILTER */

.table-wrapper{overflow:auto;border:1px solid var(--gray-200);border-radius:11px}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th,.data-table td{padding:11px 12px;border-bottom:1px solid var(--gray-100);text-align:left;vertical-align:middle}.data-table th{background:var(--gray-50);color:var(--gray-600);font-size:9px;text-transform:uppercase;letter-spacing:.5px}.data-table td{font-size:10px}.table-empty{text-align:center!important;color:var(--gray-400)!important;padding:28px!important}.table-actions{display:flex;gap:5px}.action-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--gray-200);border-radius:8px;background:#fff;color:var(--gray-600)}.action-button.edit{color:var(--blue-600)}.action-button.delete{color:var(--red-600)}.filter-bar{display:flex;gap:10px;margin-bottom:15px}.search-box{position:relative;flex:1}.search-box i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--gray-400)}.search-box input{padding-left:36px}.filter-bar select{width:190px}.status-badge,.role-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:20px;font-size:8px;font-weight:800}.status-pending{color:#9a3412;background:var(--orange-100)}.status-approved{color:#166534;background:var(--green-100)}.status-rejected,.status-cancelled{color:#991b1b;background:var(--red-100)}.status-completed{color:#3730a3;background:#e0e7ff}/* Legacy compatibility only: role USER dinonaktifkan sejak PARAPAT V2.13. */
.role-user{color:#1e40af;background:#dbeafe}.role-admin{color:#9a3412;background:#ffedd5}.role-superadmin{color:#6b21a8;background:#f3e8ff}



/* CALENDAR */

.calendar-section-card{padding:0;overflow:hidden}.calendar-header{padding:20px 20px 0}.calendar-actions,.timeline-controls,.calendar-legend,.timeline-legend,.calendar-filter{display:flex;align-items:center;gap:8px}.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 20px 16px;border-bottom:1px solid var(--gray-200)}.calendar-legend,.timeline-legend{flex-wrap:wrap;color:var(--gray-600);font-size:9px}.calendar-legend span,.timeline-legend span{display:inline-flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.legend-dot.approved{background:var(--green-500)}.legend-dot.pending{background:var(--orange-500)}.legend-dot.completed{background:#6366f1}.calendar-filter label{font-size:10px;font-weight:700}.calendar-filter select{min-height:35px;width:210px;font-size:10px}.month-calendar-wrapper{overflow:auto}.month-calendar{min-width:900px}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:var(--navy-900);color:#fff}.calendar-weekdays div{padding:10px;text-align:center;font-size:9px;font-weight:800;letter-spacing:.6px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));background:var(--gray-200);gap:1px}.calendar-loading{grid-column:1/-1;min-height:400px;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--gray-500)}.calendar-day{position:relative;min-height:135px;padding:8px;background:#fff;cursor:pointer;transition:var(--transition)}.calendar-day:hover{z-index:2;background:var(--blue-50);box-shadow:inset 0 0 0 2px var(--blue-500)}.calendar-day.other-month{background:#f8fafc;color:var(--gray-400)}.calendar-day.today{background:#f0f7ff}.calendar-day.today:after{content:"Hari ini";position:absolute;right:7px;top:8px;padding:2px 5px;border-radius:10px;background:var(--blue-600);color:#fff;font-size:7px;font-weight:800}.calendar-day.selected{box-shadow:inset 0 0 0 2px var(--blue-600)}.calendar-day-number{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;font-size:10px;font-weight:800}.calendar-day.today .calendar-day-number{background:var(--blue-600);color:#fff}.calendar-events{display:grid;gap:4px;margin-top:5px}.calendar-event{overflow:hidden;padding:5px 6px;border-radius:6px;border-left:3px solid transparent;font-size:8px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis}.calendar-event.approved{background:var(--green-50);border-color:var(--green-500);color:#166534}.calendar-event.pending{background:var(--orange-50);border-color:var(--orange-500);color:#9a3412}.calendar-event.completed{background:#eef2ff;border-color:#6366f1;color:#3730a3}.calendar-event-more{padding:2px 5px;color:var(--gray-500);font-size:8px;font-weight:700}.calendar-help,.timeline-help{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--gray-200);background:var(--gray-50);color:var(--gray-500);font-size:9px}



/* TIMELINE */

.timeline-section-card{padding:0;overflow:hidden}.timeline-header{padding:20px 20px 16px;border-bottom:1px solid var(--gray-200)}.timeline-controls input{width:145px;min-height:36px;font-size:10px}.timeline-legend{padding:10px 20px;border-bottom:1px solid var(--gray-200)}.timeline-scroll{overflow:auto}.timeline-board{min-width:1100px;background:#fff}.timeline-loading{min-height:360px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--gray-500)}.timeline-axis,.timeline-row{display:grid;grid-template-columns:210px 1fr}.timeline-axis{position:sticky;top:0;z-index:5;background:var(--gray-50);border-bottom:1px solid var(--gray-200)}.timeline-room-head{padding:11px 14px;font-size:9px;font-weight:800}.timeline-hours{position:relative;height:42px;background-image:linear-gradient(to right,var(--gray-200) 1px,transparent 1px);background-size:10% 100%}.timeline-hour-label{position:absolute;top:12px;transform:translateX(-50%);color:var(--gray-500);font-size:8px}.timeline-row{min-height:68px;border-bottom:1px solid var(--gray-100)}.timeline-room{padding:13px 14px;border-right:1px solid var(--gray-200)}.timeline-room strong,.timeline-room span{display:block}.timeline-room strong{font-size:10px}.timeline-room span{margin-top:4px;color:var(--gray-400);font-size:8px}.timeline-track{position:relative;min-height:68px;background-image:linear-gradient(to right,var(--gray-100) 1px,transparent 1px);background-size:10% 100%}.timeline-booking{position:absolute;top:10px;height:47px;overflow:hidden;padding:7px 8px;border-radius:8px;border-left:3px solid;box-shadow:0 2px 5px rgba(15,23,42,.06);cursor:pointer}.timeline-booking.approved{background:var(--green-50);border-color:var(--green-500);color:#166534}.timeline-booking.pending{background:var(--orange-50);border-color:var(--orange-500);color:#9a3412}.timeline-booking.completed{background:#eef2ff;border-color:#6366f1;color:#3730a3}.timeline-booking strong,.timeline-booking span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.timeline-booking strong{font-size:8px}.timeline-booking span{margin-top:3px;font-size:7px}.timeline-now-line{position:absolute;top:0;bottom:0;width:2px;background:var(--red-600);z-index:3}.timeline-now-line:before{content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--red-600)}



/* APPROVAL / MASTER / EMPTY / MODAL / TOAST */

.approval-list{display:grid;gap:10px}.approval-card{display:grid;grid-template-columns:1fr auto;gap:15px;padding:14px;border:1px solid var(--gray-200);border-radius:11px}.approval-card h4{margin:0 0 6px;font-size:12px}.approval-meta,.approval-purpose{margin:4px 0;color:var(--gray-500);font-size:9px}.approval-actions{display:flex;align-items:center;gap:7px}.master-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.master-list{display:grid;gap:8px}.master-item{display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--gray-200);border-radius:10px}.master-item-info strong,.master-item-info span{display:block}.master-item-info strong{font-size:10px}.master-item-info span{margin-top:4px;color:var(--gray-500);font-size:8px}.empty-state{grid-column:1/-1;padding:30px;text-align:center;color:var(--gray-400)}.empty-state i{font-size:25px}.empty-state h4{margin:10px 0 5px;color:var(--gray-600)}.empty-state p{margin:0;font-size:10px}.modal-backdrop{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(7,20,38,.6)}.modal-card{width:min(650px,100%);max-height:90vh;display:flex;flex-direction:column;border-radius:16px;background:#fff;box-shadow:0 25px 60px rgba(0,0,0,.25)}.modal-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:18px 20px;border-bottom:1px solid var(--gray-200)}.modal-header h3{margin:0;font-size:15px}.modal-header p{margin:4px 0 0;color:var(--gray-500);font-size:9px}.modal-body{overflow:auto;padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--gray-200)}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-item{padding:10px;border-radius:9px;background:var(--gray-50)}.detail-item span,.detail-item strong{display:block}.detail-item span{color:var(--gray-500);font-size:8px}.detail-item strong{margin-top:4px;font-size:10px}.toast-container{position:fixed;right:20px;bottom:20px;z-index:6000;display:grid;gap:8px;width:min(360px,calc(100vw - 40px))}.toast{padding:12px 14px;border:1px solid var(--gray-200);border-left:4px solid var(--blue-500);border-radius:10px;background:#fff;box-shadow:var(--shadow-md)}.toast-success,.toast.success{border-left-color:var(--green-500)}.toast-error,.toast.error{border-left-color:var(--red-600)}.toast-warning,.toast.warning{border-left-color:var(--orange-500)}.toast-content strong{display:block;font-size:10px}.toast-content p{margin:3px 0 0;color:var(--gray-500);font-size:9px}



/* RESPONSIVE */

@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-analytics-grid{grid-template-columns:1fr}.room-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(max-width:900px){:root{--sidebar-width:260px}.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{min-height:100vh}.login-mobile-logo{display:grid}.sidebar{transform:translateX(-100%);transition:transform .25s ease}.sidebar.open{transform:translateX(0)}.sidebar-close,.sidebar-toggle{display:inline-grid}.sidebar-overlay.active,.sidebar-overlay.show{display:block}.main-content{margin-left:0}.content-area{padding:20px}.topbar{padding:0 20px}.master-grid{grid-template-columns:1fr}.calendar-header,.timeline-header{align-items:flex-start;flex-direction:column}.calendar-toolbar{align-items:flex-start;flex-direction:column}.calendar-filter{width:100%}.calendar-filter select{flex:1;width:auto}}

@media(max-width:700px){.topbar-date,.topbar-profile-text{display:none}.welcome-card{align-items:flex-start;flex-direction:column;padding:22px}.welcome-card h1{font-size:21px}.stats-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{min-height:92px;padding:12px}.stat-icon{width:39px;height:39px;flex-basis:39px}.stat-content strong{font-size:20px}.room-status-grid{grid-template-columns:1fr}.section-card-header{align-items:flex-start;flex-direction:column}.form-grid.two-columns{grid-template-columns:1fr}.filter-bar{flex-direction:column}.filter-bar select{width:100%}.approval-card{grid-template-columns:1fr}.approval-actions{justify-content:flex-start}.detail-grid{grid-template-columns:1fr}.timeline-controls{width:100%;flex-wrap:wrap}.timeline-controls input{flex:1}.chart-container{height:220px}}

@media(max-width:480px){.login-form-panel{padding:18px}.login-card{padding:25px 20px}.content-area{padding:14px 11px 32px}.topbar{height:64px;padding:0 11px}.topbar-left h2{font-size:14px}.topbar-left p{display:none}.stats-grid{grid-template-columns:1fr}.welcome-card{border-radius:13px}.section-card{padding:15px;border-radius:11px}.calendar-section-card,.timeline-section-card{padding:0}.form-actions{flex-direction:column-reverse}.form-actions .btn{width:100%}.modal-backdrop{padding:10px}.modal-card{max-height:calc(100vh - 20px)}}





/* ============================================================

   PARAPAT V2.2 — DARK OFFICE THEME + LARGE READABLE TYPE

   ============================================================ */

:root{

  --navy-950:#07111f;--navy-900:#0b1728;--navy-800:#13243a;--navy-700:#1d334e;

  --gray-950:#f8fafc;--gray-900:#f1f5f9;--gray-800:#e2e8f0;--gray-700:#cbd5e1;--gray-600:#aebed1;--gray-500:#94a3b8;--gray-400:#7f91a7;--gray-300:#42536a;--gray-200:#314158;--gray-100:#24344a;--gray-50:#111f33;

  --white:#101d30;--blue-50:#102b48;--blue-100:#15385d;--green-50:#0d332d;--orange-50:#3a2818;--red-50:#3a1b23;--purple-50:#281d47;

  --shadow-sm:0 2px 8px rgba(0,0,0,.22);--shadow-md:0 14px 35px rgba(0,0,0,.28)

}

html{font-size:17px}body{background:#081426;color:#e5edf7;font-size:16px;line-height:1.55}.main-content{background:#081426}.content-area{padding:28px 32px 50px}.topbar{background:rgba(10,24,42,.97);border-bottom-color:#263950;color:#f8fafc}.topbar-left h2{font-size:21px;color:#f8fafc}.topbar-left p,.topbar-date,.topbar-profile-text span{font-size:13px;color:#9fb0c4}.topbar-profile{border-left-color:#314158}.sidebar{background:linear-gradient(180deg,#071426,#0a2745)}.sidebar-brand strong{font-size:16px}.sidebar-brand span{font-size:11px}.sidebar-user-info strong{font-size:15px}.sidebar-user-info span,.nav-section-title{font-size:11px}.nav-item{font-size:15px;min-height:48px}.nav-item:hover,.nav-item.active{background:#15385f}.section-card,.stat-card,.analytics-card,.form-card,.filter-card,.table-card,.approval-card,.master-item{background:#101f33;border-color:#314158;color:#e5edf7;box-shadow:var(--shadow-sm)}.section-card-header h3,.stat-content strong,.room-card h4,.approval-card h4,.master-item-info strong{color:#f8fafc}.section-card-header h3{font-size:18px}.section-card-header p,.stat-content span,.stat-content small,.room-card p,.approval-meta,.approval-purpose,.master-item-info span{font-size:13px;color:#9fb0c4}.welcome-card{background:linear-gradient(135deg,#102a46,#124b69)}.welcome-card h1{font-size:29px}.welcome-card p{font-size:15px}.stat-content strong{font-size:30px}.stat-content span{font-size:13px}.room-card{background:#13243a;border-color:#314158}.room-card-icon,.room-card-booking{background:#0b1728}.room-card h4{font-size:15px}.room-card p,.room-card-booking{font-size:13px}.status-dot-label{font-size:12px}.form-group label{font-size:15px;color:#dbe7f4}.form-group small{font-size:13px;color:#93a6bc}input,select,textarea{background:#0b1728;color:#f8fafc;border-color:#42536a;font-size:15px}input::placeholder,textarea::placeholder{color:#71849a}input:focus,select:focus,textarea:focus{border-color:#38bdf8;box-shadow:0 0 0 3px rgba(56,189,248,.15)}select option{background:#0b1728;color:#f8fafc}.btn{font-size:14px;min-height:44px}.btn-secondary,.btn-light{background:#172a42;color:#e5edf7;border-color:#42536a}.data-table th{background:#0b1728;color:#b9c8d8;font-size:12px}.data-table td{font-size:14px;color:#dce6f1;border-bottom-color:#273a51}.filter-bar,.table-wrapper{background:#101f33}.action-button{background:#15283f;border-color:#42536a;color:#dce6f1}.status-badge{font-size:12px}.modal-card{background:#101f33;color:#e5edf7}.modal-header,.modal-footer{border-color:#314158}.detail-item{background:#0b1728}.detail-item span{font-size:12px}.detail-item strong{font-size:14px}.toast{background:#13243a;color:#f8fafc}.toast-content strong{font-size:14px}.toast-content p{font-size:13px;color:#aebed1}



/* Kalender gelap — warna berdasarkan ruangan */

.calendar-section-card{background:#101f33}.calendar-toolbar,.calendar-help{border-color:#314158;background:#0e1d30}.calendar-weekdays{background:#0a233d}.calendar-weekdays div{font-size:14px;padding:12px}.calendar-grid{background:#314158;gap:2px}.calendar-day{min-height:150px;padding:10px;background:#111f33;color:#e5edf7;border:0}.calendar-day:hover{background:#172d47;box-shadow:inset 0 0 0 2px #22d3ee}.calendar-day-empty{background:#0b1728}.calendar-day.today{background:#123b3c}.calendar-day-number{font-size:14px;width:30px;height:30px}.calendar-day.today:after{font-size:10px;padding:3px 7px}.calendar-events{gap:5px;margin-top:8px}.calendar-event{padding:6px 8px;border-left:0;border-radius:5px;font-size:11px;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.18)}.calendar-event-more{font-size:11px;color:#b9c8d8}.calendar-filter label,.calendar-filter select,.calendar-legend,.calendar-help{font-size:13px}



/* Linimasa gelap dan slot jam interaktif */

.timeline-section-card{background:#101f33}.timeline-header,.timeline-legend,.timeline-help{border-color:#314158;background:#0e1d30}.timeline-header h3{font-size:19px}.timeline-controls input{font-size:14px}.timeline-legend,.timeline-help{font-size:13px}.timeline-board{min-width:1180px;background:#0b1728}.timeline-row{display:grid;grid-template-columns:250px 1fr;min-height:70px;border-bottom:1px solid #314158}.timeline-header-row{min-height:52px;background:#0a1728;position:sticky;top:0;z-index:8}.timeline-room-label{display:flex;align-items:center;gap:10px;padding:12px 14px;border-right:1px solid #314158;color:#e5edf7;font-size:14px;font-weight:700}.timeline-room-code{flex:0 0 25px;width:25px;height:25px;display:grid;place-items:center;border-radius:6px;color:#fff;font-size:12px;font-weight:900}.timeline-room-name{line-height:1.25}.timeline-scale{position:relative;min-height:52px;background:#0a1728}.timeline-hour{position:absolute;top:15px;transform:translateX(-50%);color:#c6d4e3;font-size:12px;font-weight:700}.timeline-track{position:relative;min-height:70px;background:#0b1728}.timeline-track:after{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,#304158 1px,transparent 1px);background-size:10% 100%;z-index:1}.timeline-slot{position:absolute;top:0;bottom:0;z-index:2;border:0;border-right:1px dashed rgba(116,144,175,.28);background:transparent;cursor:pointer}.timeline-slot:hover{background:rgba(45,212,191,.14);box-shadow:inset 0 0 0 1px rgba(45,212,191,.4)}.timeline-booking{top:8px;height:54px;z-index:4;padding:8px 10px;border:0;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.25);text-align:left;overflow:hidden}.timeline-booking strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-booking span{display:block;margin-top:4px;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-booking:hover{filter:brightness(1.12);transform:translateY(-1px)}



/* Login ikut tema gelap */

.login-page,.login-form-panel{background:#081426}.login-card,.login-box{background:#101f33;color:#e5edf7}.login-heading h2{color:#f8fafc}.login-heading p,.login-security{color:#9fb0c4}



@media(max-width:900px){html{font-size:16px}.content-area{padding:20px}.timeline-row{grid-template-columns:210px 1fr}.calendar-day{min-height:135px}.calendar-event{font-size:10px}}





/* ============================================================

   PARAPAT V2.3 — ROOM INFORMATION & CLICKABLE ROOM STATUS

   ============================================================ */

.room-status-card{position:relative;overflow:hidden;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}

.room-status-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.28)}

.room-status-card:focus-visible{outline:3px solid rgba(96,165,250,.55);outline-offset:3px}

.room-status-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--room-accent,#3b82f6)}

.room-status-card .room-status-icon,.room-status-card .room-icon{background:color-mix(in srgb,var(--room-accent,#3b82f6) 18%,transparent);color:var(--room-accent,#60a5fa)}

.room-status-card .room-status-action{margin-top:10px;color:#9fb0c4;font-size:12px;font-weight:700}

.room-status-card:hover .room-status-action{color:#e5edf7}



.room-info-intro{margin-bottom:18px}

.room-info-intro h3{margin:0 0 7px;color:#f8fafc;font-size:20px}

.room-info-intro p{margin:0;color:#9fb0c4;line-height:1.65}

.room-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px}

.room-info-card{--room-accent:#3b82f6;position:relative;overflow:hidden;border:1px solid #2a3b52;border-radius:18px;background:#101f33;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}

.room-info-card:hover{transform:translateY(-4px);border-color:var(--room-accent);box-shadow:0 18px 40px rgba(0,0,0,.3)}

.room-info-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--room-accent)}

.room-info-photo-wrap{position:relative;height:190px;background:linear-gradient(145deg,#0b1728,#172a42);overflow:hidden}

.room-info-photo{display:block;width:100%;height:100%;object-fit:cover}

.room-info-photo-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#8fa4ba;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--room-accent) 18%,transparent),transparent 55%),#0b1728}

.room-info-photo-placeholder i{font-size:42px;color:var(--room-accent)}

.room-info-photo-placeholder span{font-size:13px;font-weight:700}

.room-info-code{position:absolute;left:14px;bottom:14px;min-width:36px;height:36px;padding:0 10px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--room-accent);color:#fff;font-weight:800;box-shadow:0 5px 14px rgba(0,0,0,.3)}

.room-info-body{padding:19px}

.room-info-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}

.room-info-name{margin:0;color:#f8fafc;font-size:18px;line-height:1.35}

.room-info-type{display:inline-flex;margin-top:7px;padding:5px 9px;border-radius:999px;background:#172a42;color:#b8c8da;font-size:11px;font-weight:700}

.room-info-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:17px 0}

.room-info-meta-item{display:flex;gap:9px;align-items:center;padding:10px;border:1px solid #2a3b52;border-radius:11px;background:#0b1728;color:#dbe7f4;font-size:12px}

.room-info-meta-item i{width:17px;text-align:center;color:var(--room-accent)}

.room-info-facilities-title{margin:0 0 9px;color:#cbd9e8;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}

.room-facility-list{display:flex;flex-wrap:wrap;gap:7px;min-height:30px}

.room-facility-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid #304158;border-radius:999px;background:#13243a;color:#c8d6e5;font-size:11px;font-weight:650}

.room-facility-empty{color:#8498ad;font-size:12px;font-style:italic}

.room-info-actions{display:flex;gap:9px;margin-top:18px}

.room-info-book-button{width:100%;min-height:42px;border:0;border-radius:10px;background:var(--room-accent);color:#fff;font-weight:800;transition:filter .18s ease,transform .18s ease}

.room-info-book-button:hover{filter:brightness(1.1);transform:translateY(-1px)}

.room-info-empty{grid-column:1/-1;padding:45px 20px;border:1px dashed #34475f;border-radius:16px;text-align:center;color:#8fa4ba;background:#0b1728}

.room-info-empty i{display:block;margin-bottom:12px;font-size:34px;color:#647d99}



/* Dashboard chart containers remain readable when data is sparse. */

.chart-container,.chart-wrapper{position:relative;min-height:285px}

.chart-container canvas,.chart-wrapper canvas{max-height:300px}



@media(max-width:700px){

  .room-info-grid{grid-template-columns:1fr}

  .room-info-photo-wrap{height:175px}

  .room-info-meta{grid-template-columns:1fr}

}





/* ============================================================

   PARAPAT V2.3.1 — INDEX COMPATIBILITY / LOGIN LAYOUT FIX

   Menyamakan class Index.html V2.3 dengan CSS V2.3.

   ============================================================ */



/* Loading screen: Index uses loading-* while the base stylesheet also

   supports app-loading-* names. */

.loading-content{text-align:center;max-width:420px;padding:28px}

.loading-logo{width:72px;height:72px;margin:0 auto 20px;border-radius:20px;display:grid;place-items:center;background:rgba(255,255,255,.1);font-size:29px;box-shadow:0 16px 38px rgba(0,0,0,.18)}

.loading-spinner{width:36px;height:36px;margin:0 auto 18px;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite}

.loading-content h3{margin:0 0 7px;font-size:22px;color:#fff}.loading-content p{margin:0;color:#bfdbfe}



/* Login layout used by Index.html V2.3 */

.login-page{min-height:100vh;background:#081426;color:#e5edf7}

.login-container{min-height:100vh;display:grid;grid-template-columns:minmax(420px,46%) minmax(420px,54%);overflow:hidden}

.login-brand{position:relative;display:flex;align-items:center;justify-content:center;padding:64px 56px;background:linear-gradient(145deg,#071426 0%,#0b2442 52%,#123a69 100%);color:#fff;overflow:hidden}

.brand-decoration{position:absolute;border-radius:50%;pointer-events:none;filter:blur(1px)}

.decoration-1{width:420px;height:420px;right:-180px;top:-160px;background:rgba(59,130,246,.12)}

.decoration-2{width:320px;height:320px;left:-160px;bottom:-120px;background:rgba(20,184,166,.08)}

.login-brand-content{position:relative;z-index:1;width:min(540px,100%);margin:0 auto}

.brand-logo-large{width:68px;height:68px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12);font-size:28px;box-shadow:0 18px 40px rgba(0,0,0,.16)}

.brand-small-text{margin-top:18px;color:#93c5fd;font-size:12px;font-weight:800;letter-spacing:1.8px}

.login-brand-content h1{margin:13px 0 16px;font-size:44px;line-height:1.08;letter-spacing:-1.2px;color:#fff}

.login-brand-content>p{max-width:520px;margin:0;color:#cbd5e1;font-size:15px;line-height:1.75}

.brand-features{display:grid;gap:12px;margin-top:34px}.brand-feature{display:flex;align-items:center;gap:12px;color:#e2e8f0;font-size:14px}.feature-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:10px;background:rgba(59,130,246,.14);color:#93c5fd;border:1px solid rgba(147,197,253,.12)}

.login-panel{display:flex;align-items:center;justify-content:center;padding:46px;background:#081426}

.login-box{width:min(460px,100%);padding:38px;background:#101f33;border:1px solid #263b55;border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.28);color:#e5edf7}

.login-heading{margin-bottom:25px}.login-heading .eyebrow{margin-bottom:8px;color:#60a5fa;font-size:10px;font-weight:800;letter-spacing:1.5px}.login-heading h2{margin:0 0 9px;color:#f8fafc;font-size:28px;line-height:1.2}.login-heading p{margin:0;color:#9fb0c4;font-size:14px;line-height:1.6}

.login-box .form-group{margin-bottom:18px}.login-box .form-group label{display:block;margin-bottom:8px;color:#dbe7f5;font-size:13px;font-weight:700}.login-box .input-wrapper{position:relative}.login-box .input-wrapper>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#7890aa;pointer-events:none}.login-box .input-wrapper input{width:100%;min-height:48px;padding:0 44px 0 42px;border:1px solid #36506e;border-radius:11px;background:#0b192b;color:#f8fafc;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.login-box .input-wrapper input::placeholder{color:#6f87a1}.login-box .input-wrapper input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.14)}

.login-box .toggle-password{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border:0;background:transparent;color:#8da3ba;border-radius:8px}.login-box .toggle-password:hover{background:#162b43;color:#dbeafe}

.login-box .btn,.login-box button[type=submit]{min-height:46px}.login-box .btn-primary{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:6px;border:0;border-radius:11px;background:#2563eb;color:#fff;font-weight:800;box-shadow:0 10px 25px rgba(37,99,235,.22)}.login-box .btn-primary:hover{background:#1d4ed8;transform:translateY(-1px)}

.login-box .alert{margin-bottom:18px;padding:12px 14px;border-radius:10px;font-size:13px}.login-box .alert-danger{background:rgba(220,38,38,.12);border:1px solid rgba(248,113,113,.28);color:#fecaca}

.login-security,.login-footer{margin-top:22px;padding-top:18px;border-top:1px solid #263b55;color:#8fa4ba;text-align:center;font-size:11px;line-height:1.5}

.login-mobile-logo{display:none}



@media(max-width:900px){.login-container{grid-template-columns:1fr}.login-brand{display:none}.login-panel{min-height:100vh;padding:24px}.login-mobile-logo{display:grid;width:58px;height:58px;margin:0 0 20px;border-radius:16px;place-items:center;background:#132c49;color:#60a5fa;font-size:24px}.login-box{padding:30px}}

@media(max-width:520px){.login-panel{padding:16px}.login-box{padding:25px 20px;border-radius:17px}.login-heading h2{font-size:24px}}





/* =========================================================

   PARAPAT V2.3.2 - MAIN AREA / SIDEBAR COMPATIBILITY FIX

   Index.html V2.3 uses .main-area. Older CSS used .main-content.

   Keep both selectors so every page starts after the fixed sidebar.

   ========================================================= */

.main-area,

.main-content{

  min-height:100vh;

  margin-left:var(--sidebar-width);

  width:calc(100% - var(--sidebar-width));

  min-width:0;

  background:#081426;

}

.main-area .content-area,

.main-content .content-area{

  width:100%;

  min-width:0;

  box-sizing:border-box;

}

.main-area .page-section,

.main-content .page-section{

  width:100%;

  min-width:0;

}

.main-area .section-card,

.main-content .section-card{

  max-width:100%;

}

.calendar-section-card,

.timeline-section-card,

.table-wrapper,

.room-info-grid{

  max-width:100%;

}

.timeline-section-card{overflow:hidden}

.timeline-board-wrapper{max-width:100%;overflow-x:auto}



@media(max-width:900px){

  .main-area,

  .main-content{

    margin-left:0;

    width:100%;

  }

}





/* ============================================================

   PARAPAT V2.4 — COMPACT DASHBOARD, TIMELINE & REPORTS

   ============================================================ */

.dashboard-page-v24{height:calc(100vh - var(--topbar-height));overflow:hidden}

.dashboard-page-v24 .dashboard-v24{height:100%;display:grid;grid-template-rows:66px 188px minmax(0,1fr);gap:10px;padding-bottom:4px}

.dashboard-stats-v24{margin:0;gap:10px}.dashboard-stats-v24 .stat-card{min-height:66px;height:66px;padding:9px 12px}.dashboard-stats-v24 .stat-icon{width:38px;height:38px;flex-basis:38px}.dashboard-stats-v24 .stat-card span{font-size:12px}.dashboard-stats-v24 .stat-card strong{font-size:20px;margin:1px 0}

.dashboard-room-v24{margin:0;padding:12px 14px;overflow:hidden}.dashboard-room-v24 .section-card-header{margin-bottom:8px}.dashboard-room-v24 .section-card-header h3{font-size:15px}.dashboard-room-v24 .section-card-header p{font-size:11px;margin-top:2px}

.dashboard-room-grid-v24{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.dashboard-room-grid-v24 .room-card{min-height:67px;padding:8px 10px}.dashboard-room-grid-v24 .room-card-icon{width:26px;height:26px}.dashboard-room-grid-v24 .room-card h4{margin:3px 0 1px;font-size:11px;line-height:1.2}.dashboard-room-grid-v24 .room-card p,.dashboard-room-grid-v24 .room-card-booking{font-size:9px}.dashboard-room-grid-v24 .room-card-booking{margin-top:2px;padding:2px;background:transparent}.dashboard-room-grid-v24 .status-dot-label{font-size:9px}

.dashboard-bottom-v24{min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr) 128px;gap:10px}.dashboard-bottom-v24 .section-card{margin:0;min-height:0;padding:11px 13px}.dashboard-chart-v24{min-height:0}.dashboard-chart-v24 .section-card-header{margin-bottom:4px}.dashboard-chart-v24 h3{font-size:14px}.dashboard-chart-v24 p{font-size:10px}.dashboard-chart-wrap-v24{position:relative;height:calc(100% - 42px);min-height:145px}.dashboard-today-v24{grid-column:1/-1}.dashboard-today-v24 .section-card-header{margin-bottom:5px}.dashboard-today-table-v24{height:76px;overflow:auto}.dashboard-today-table-v24 th,.dashboard-today-table-v24 td{padding:5px 8px;font-size:10px}

.timeline-toolbar-v24{display:flex;align-items:center;gap:7px}.timeline-nav-btn{width:42px;padding:0}.timeline-today-btn{min-width:66px}.timeline-date-input{width:150px;min-height:42px}.timeline-date-heading{margin:8px 0;font-weight:700}

.report-page-v24{margin-bottom:0}.report-toolbar-v24{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:end;margin-bottom:14px}.report-toolbar-v24 .form-group{margin:0}.report-summary-v24{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}.report-summary-v24>div{padding:15px;border:1px solid #314158;border-radius:10px;background:#0b1728}.report-summary-v24 span,.report-summary-v24 strong{display:block}.report-summary-v24 span{font-size:12px;color:#2dd4bf;font-weight:800}.report-summary-v24 strong{margin-top:8px;font-size:18px;color:#e5edf7}.report-table-v24{max-height:calc(100vh - 365px);overflow:auto}.report-table-v24 thead{position:sticky;top:0;z-index:2}

@media(max-width:1200px){.dashboard-page-v24{height:auto;overflow:visible}.dashboard-page-v24 .dashboard-v24{height:auto;display:block}.dashboard-page-v24 .dashboard-v24>*{margin-bottom:12px}.dashboard-room-grid-v24{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-bottom-v24{display:grid;grid-template-columns:1fr 1fr}.dashboard-today-v24{grid-column:1/-1}.dashboard-chart-wrap-v24{height:210px}.report-toolbar-v24{grid-template-columns:1fr}.report-summary-v24{grid-template-columns:1fr}}





/* ============================================================

   PARAPAT V2.5 — DASHBOARD SESUAI CONTOH 2 x 2

   ============================================================ */

.dashboard-page-v25{height:calc(100vh - var(--topbar-height));overflow:hidden;padding:0!important}

.dashboard-example-v25{height:100%;min-height:0;display:grid;grid-template-rows:30px minmax(0,1fr);gap:10px}

.dashboard-example-title{font-size:18px;font-weight:800;color:#f8fafc;line-height:30px}

.dashboard-example-grid-v25{min-height:0;display:grid;grid-template-columns:1fr 1.28fr;grid-template-rows:1fr 1fr;gap:12px}

.dashboard-panel-v25{margin:0!important;min-height:0;padding:14px!important;border:1px solid #314158;background:#101c30;overflow:hidden}

.dashboard-panel-title-v25{height:31px;margin-bottom:8px;padding-bottom:8px;border-bottom:2px solid #34465f;color:#2dd4bf;font-size:14px;font-weight:800}

.dashboard-chart-area-v25{position:relative;height:calc(100% - 39px);min-height:0}

.dashboard-chart-area-v25 canvas{width:100%!important;height:100%!important;max-height:none!important}

.dashboard-status-list-v25{height:calc(100% - 39px);display:grid!important;grid-template-columns:1fr!important;grid-template-rows:repeat(8,minmax(0,1fr));gap:6px!important;overflow:hidden}

.dashboard-status-list-v25 .room-card{position:relative;min-height:0!important;height:auto!important;padding:5px 10px!important;border:1px solid #314158!important;border-left:4px solid var(--room-accent,#14b8a6)!important;border-radius:6px!important;background:#1a293e!important;display:flex!important;align-items:center!important;box-shadow:none!important}

.dashboard-status-list-v25 .room-card-icon{display:none!important}

.dashboard-status-list-v25 .room-card h4{margin:0!important;padding-right:82px;font-size:11px!important;line-height:1.2!important;color:#f8fafc!important;text-align:left!important}

.dashboard-status-list-v25 .room-card p,.dashboard-status-list-v25 .room-card-booking{display:none!important}

.dashboard-status-list-v25 .status-dot-label{position:absolute;right:9px;top:50%;transform:translateY(-50%);padding:4px 7px;border-radius:4px;background:#10b981;color:#fff!important;font-size:9px!important;font-weight:800}

.dashboard-status-list-v25 .room-card.is-busy .status-dot-label,.dashboard-status-list-v25 .room-card.busy .status-dot-label{background:#ef4444}

@media(max-width:1200px){.dashboard-page-v25{height:auto;overflow:visible}.dashboard-example-v25{height:auto}.dashboard-example-grid-v25{grid-template-columns:1fr;grid-template-rows:none}.dashboard-panel-v25{min-height:330px}.dashboard-status-panel-v25{min-height:430px}}







/* ============================================================

   PARAPAT V2.6 — NATIVE DASHBOARD + READABILITY

   ============================================================ */

.dashboard-native-chart{display:block!important;overflow:hidden}

.native-bar-chart-v26{height:100%;min-height:220px;padding:8px 4px 0}

.native-bar-plot-v26{height:100%;display:flex;align-items:stretch;gap:10px;border-left:1px solid #3a4b63;border-bottom:1px solid #3a4b63;padding:14px 10px 46px 12px;background:repeating-linear-gradient(to top,transparent 0,transparent 24%,rgba(148,163,184,.16) 25%)}

.native-bar-column-v26{position:relative;flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center}

.native-bar-v26{position:relative;width:min(58px,78%);min-height:0;border-radius:4px 4px 0 0;transition:height .25s ease;box-shadow:0 0 0 1px rgba(255,255,255,.04)}

.native-bar-value-v26{position:absolute;left:50%;top:-23px;transform:translateX(-50%);font-size:11px;font-weight:800;color:#e2e8f0;white-space:nowrap}

.native-bar-label-v26{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);width:110px;text-align:center;font-size:10px;line-height:1.15;color:#aebdd0;white-space:normal}

.native-donut-wrap-v26{height:100%;display:flex;align-items:center;justify-content:center;gap:36px;padding:10px}

.native-donut-v26{width:min(220px,48%);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1px #64748b}

.native-donut-hole-v26{width:52%;aspect-ratio:1;border-radius:50%;background:#101c30;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #94a3b8}.native-donut-hole-v26 strong{font-size:26px;color:#f8fafc}.native-donut-hole-v26 span{font-size:10px;color:#94a3b8}

.native-donut-legend-v26{display:grid;gap:12px;color:#dbe7f5;font-size:12px}.native-legend-row-v26{display:flex;align-items:center;gap:8px}.native-legend-dot-v26{width:14px;height:14px;border-radius:3px;flex:0 0 14px}

.dashboard-chart-empty-v26{height:100%;display:grid;place-items:center;color:#94a3b8;font-size:13px}

.dashboard-status-list-v25 .room-card h4.dashboard-room-name-v26{font-size:14px!important;font-weight:800!important;letter-spacing:.01em;padding-right:90px!important}

.dashboard-status-list-v25 .room-card-action,.dashboard-status-list-v25 .room-card i{display:none!important}

.room-info-facts{gap:8px!important}.room-info-body h3{font-size:19px!important;line-height:1.35!important}

\#superAdminMenuSection:not(.hidden){display:block}

@media(max-width:1200px){.native-bar-chart-v26{min-height:260px}.native-donut-wrap-v26{min-height:260px}.native-bar-label-v26{font-size:9px;width:90px}}





/* ============================================================

   PARAPAT V2.7 — DASHBOARD CHART.JS + READABILITY

   ============================================================ */

.dashboard-page-v25{height:auto!important;overflow:visible!important}

.dashboard-example-v25{height:auto!important;padding:14px!important}

.dashboard-example-title{font-size:22px!important;line-height:1.3!important;margin-bottom:14px!important}

.dashboard-panel-title-v25{font-size:17px!important;line-height:1.3!important;font-weight:800!important;padding-bottom:11px!important}

.dashboard-example-grid-v25{min-height:690px!important;grid-template-rows:335px 335px!important;gap:16px!important}

.dashboard-panel-v25{padding:16px!important;min-height:0!important}

.dashboard-chart-canvas-v27{position:relative;width:100%;height:275px;min-height:275px}

.dashboard-chart-canvas-v27 canvas{width:100%!important;height:100%!important}

.dashboard-status-list-v25{gap:8px!important}

.dashboard-status-list-v25 .room-card{min-height:31px!important;padding:8px 12px!important}

.dashboard-status-list-v25 .room-card h4.dashboard-room-name-v26{font-size:15px!important;line-height:1.25!important;font-weight:800!important;padding-right:90px!important}

.dashboard-status-list-v25 .status-dot-label{font-size:11px!important;padding:5px 9px!important}

.dashboard-today-v27{margin-top:16px;padding:16px!important}

.dashboard-today-header-v27{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}

.dashboard-today-header-v27 p{font-size:13px!important;color:#9fb0c6;margin:5px 0 0}

.dashboard-today-table-v27 table{font-size:14px!important}

.dashboard-today-table-v27 th{font-size:12px!important;padding:11px 12px!important}

.dashboard-today-table-v27 td{font-size:14px!important;padding:11px 12px!important}

\#page-dashboard .section-card{border-color:#34445b!important}

\#page-dashboard .dashboard-panel-title-v25{color:#2dd4bf!important}

@media(max-width:1200px){.dashboard-example-grid-v25{grid-template-columns:1fr!important;grid-template-rows:none!important}.dashboard-panel-v25{min-height:360px!important}.dashboard-chart-canvas-v27{height:300px}.dashboard-status-panel-v25{min-height:430px!important}}







/* ============================================================

   PARAPAT V2.9.1 — FIX STATUS KETERSEDIAAN DASHBOARD

   Menghilangkan teks detail yang bertumpuk di belakang nama ruangan.

   ============================================================ */

\#page-dashboard .dashboard-status-list-v25 .parapat-room-status-detail-v29 {

  display: none !important;

}

\#page-dashboard .dashboard-status-list-v25 .parapat-room-status-text-v29 {

  display: flex !important;

  align-items: center !important;

  min-width: 0 !important;

  flex: 1 1 auto !important;

}

\#page-dashboard .dashboard-status-list-v25 .room-card {

  min-height: 38px !important;

  height: 38px !important;

  overflow: hidden !important;

  padding: 7px 12px !important;

}

\#page-dashboard .dashboard-status-list-v25 .room-card h4.dashboard-room-name-v26 {

  margin: 0 !important;

  padding: 0 100px 0 0 !important;

  font-size: 15px !important;

  line-height: 1.2 !important;

  font-weight: 800 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}

\#page-dashboard .dashboard-status-list-v25 .status-dot-label {

  z-index: 2 !important;

}







/* ============================================================

   PARAPAT V2.10 — VIEWER, COPYRIGHT & SYARAT PEMINJAMAN

   ============================================================ */

.app-copyright{

  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);

  z-index:3;font-size:12px;font-weight:800;letter-spacing:.12em;

  color:#94a3b8;white-space:nowrap;pointer-events:none;opacity:.9;

}

.topbar{position:relative!important}

.booking-policy-notice{

  display:flex;gap:14px;align-items:flex-start;margin:0 0 20px;padding:16px 18px;

  border:1px solid rgba(45,212,191,.35);border-left:4px solid #2dd4bf;

  border-radius:12px;background:rgba(15,118,110,.10);color:#e2e8f0;

}

.booking-policy-icon{font-size:20px;color:#2dd4bf;line-height:1.2;padding-top:1px}

.booking-policy-notice h4{margin:0 0 7px;font-size:16px;color:#f8fafc}

.booking-policy-notice p{margin:0;font-size:14px;line-height:1.65;color:#cbd5e1}

body.viewer-mode .viewer-restricted{display:none!important}

body.viewer-mode .timeline-hint{display:none!important}

body.viewer-mode #page-timeline .section-card-header p{display:none!important}

@media(max-width:900px){.app-copyright{font-size:10px;top:10px;transform:translateX(-50%)}.topbar{padding-top:22px!important}}





/* PARAPAT V2.10.1 */

.viewer-login-separator{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:#7890aa;font-size:12px}.viewer-login-separator:before,.viewer-login-separator:after{content:"";height:1px;flex:1;background:#29415c}.btn-viewer-login{width:100%;justify-content:center;background:#162a40;border:1px solid #36516d;color:#e8f2ff}.btn-viewer-login:hover{background:#1d3854;border-color:#4f78a1}.viewer-login-note{margin:9px 2px 0;text-align:center;color:#8fa4bb;font-size:11px;line-height:1.45}.parapat-user-modal-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}.parapat-user-modal-form .form-group{margin:0}.parapat-user-modal-form label{display:block;margin-bottom:7px;font-weight:700;color:#dce8f5}.parapat-user-modal-form .form-control{width:100%;box-sizing:border-box;background:#0b1b2d;border:1px solid #38506a;color:#eef6ff;border-radius:8px;padding:11px 12px}.parapat-user-modal-form .form-group:first-child{grid-column:1/-1}@media(max-width:700px){.parapat-user-modal-form{grid-template-columns:1fr}.parapat-user-modal-form .form-group:first-child{grid-column:auto}}