/*
 * PROJECT      : Ezi2Rooming
 * MODULE       : User Interface
 * FILE         : app.css
 * VERSION      : v1.1.0
 * BUILD        : 2026.08.06.001
 * STATUS       : Development
 * ACTION       : Sprint 2A upgrade
 * DESCRIPTION  : Enterprise responsive UI.
 */
:root{--bg:#f3f6fb;--surface:#fff;--soft:#f8fafc;--text:#172033;--muted:#667085;--border:#e2e8f0;--primary:#0f766e;--primary-dark:#0b4f4a;--primary-soft:#e9f8f6;--sidebar:#0a2f2c;--shadow:0 12px 34px rgba(15,23,42,.07)}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}a{color:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:270px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--sidebar);color:#fff;z-index:30}.brand{display:flex;align-items:center;gap:12px;padding:24px 20px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.1);font-size:22px}.brand strong,.brand span{display:block}.brand span{margin-top:3px;color:#b9d6d3;font-size:12px}.nav-menu{padding:18px 12px;overflow:auto}.nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:4px;border-radius:10px;color:#d8e7e5;text-decoration:none}.nav-item:hover{background:rgba(255,255,255,.08)}.nav-item.active{background:#fff;color:var(--primary-dark)}.nav-item span{width:22px;text-align:center}.nav-item b{font-size:14px}.nav-label{margin:20px 14px 8px;color:#7fa9a5;font-size:11px;font-weight:800;letter-spacing:.12em}.sidebar-footer{margin-top:auto;padding:16px;border-top:1px solid rgba(255,255,255,.08)}.user-mini{display:flex;align-items:center;gap:10px}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--primary-dark);font-weight:800}.user-mini strong,.user-mini span{display:block}.user-mini strong{font-size:13px}.user-mini span{margin-top:2px;color:#a9cbc8;font-size:11px}.sidebar-footer>a{display:inline-block;margin-top:14px;color:#ffd7d2;font-size:12px;text-decoration:none}.main-panel{min-width:0}.topbar{min-height:88px;display:flex;align-items:center;gap:16px;padding:18px 28px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.topbar h1{margin:0;font-size:25px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:13px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.top-actions>a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--border);border-radius:10px;text-decoration:none}.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:#fff}.system-badge{display:inline-block;padding:7px 10px;border-radius:99px;background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:800}.content{width:min(1450px,calc(100% - 48px));margin:24px auto 60px}.hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.hero-card{min-height:150px;display:flex;justify-content:space-between;gap:16px;padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}.hero-card.primary{background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff;border:0}.hero-card span,.hero-card small{display:block}.hero-card span{color:var(--muted);font-size:13px}.hero-card.primary span,.hero-card.primary small{color:#c9e6e3}.hero-card strong{display:block;margin:12px 0 8px;font-size:34px}.hero-card small{color:var(--muted);font-size:12px}.hero-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--soft);font-size:24px}.hero-card.primary .hero-icon{background:rgba(255,255,255,.13)}.content-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:18px;margin-top:18px}.panel{margin-top:18px;padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.panel-head h2{margin:0;font-size:18px}.panel-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.text-link{color:var(--primary);text-decoration:none;font-size:13px;font-weight:700}.mini-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.mini-stat{padding:16px;border-radius:12px;background:var(--soft);border:1px solid var(--border)}.mini-stat span{display:block;color:var(--muted);font-size:12px}.mini-stat strong{display:block;margin-top:7px;font-size:24px}.progress-block{margin-top:20px}.progress-title{display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px}.progress-track{height:10px;overflow:hidden;border-radius:99px;background:#e7eef4}.progress-bar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary-dark),var(--primary))}.progress-block small{display:block;margin-top:8px;color:var(--muted)}.quick-actions{display:grid;gap:10px}.quick-actions a{display:flex;gap:12px;align-items:center;padding:13px;border:1px solid var(--border);border-radius:12px;text-decoration:none;background:var(--soft)}.quick-actions a:hover{border-color:#9ccbc6;background:var(--primary-soft)}.quick-actions a>span{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#fff}.quick-actions strong,.quick-actions small{display:block}.quick-actions strong{font-size:13px}.quick-actions small{margin-top:3px;color:var(--muted);font-size:11px}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th,.data-table td{padding:13px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:13px}.data-table th{color:var(--muted);font-size:11px;text-transform:uppercase}.status-pill{display:inline-block;padding:5px 8px;border-radius:99px;background:#eef2f6;font-size:10px;font-weight:800}.status-pill.active{background:#ecfdf3;color:#067647}.status-pill.draft{background:#fff7ed;color:#b54708}.empty-state{padding:34px 20px;text-align:center}.empty-state>div{font-size:38px}.empty-state h3{margin:12px 0 6px}.empty-state p{margin:0;color:var(--muted)}.btn{display:inline-block;margin-top:16px;padding:11px 16px;border-radius:10px;background:var(--primary);color:#fff;text-decoration:none;font-weight:700;font-size:13px}.roadmap{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}.roadmap-item{min-height:115px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--soft)}.roadmap-item>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e7eef4;font-size:12px;font-weight:800}.roadmap-item strong,.roadmap-item small{display:block}.roadmap-item strong{margin-top:12px;font-size:12px}.roadmap-item small{margin-top:4px;color:var(--muted);font-size:10px}.roadmap-item.done{background:#ecfdf3;border-color:#abefc6}.roadmap-item.done>span{background:#067647;color:#fff}.roadmap-item.current{background:#fff7ed;border-color:#fed7aa}.roadmap-item.current>span{background:#f59e0b;color:#fff}.module-placeholder{max-width:860px;margin:40px auto;padding:42px;text-align:center}.module-icon{font-size:50px}.module-placeholder h2{margin:16px 0 8px;font-size:28px}.module-placeholder p{color:var(--muted)}.placeholder-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px 0}.placeholder-grid>div{padding:16px;border-radius:12px;background:var(--soft);border:1px solid var(--border)}.placeholder-grid span,.placeholder-grid strong{display:block}.placeholder-grid span{color:var(--muted);font-size:10px}.placeholder-grid strong{margin-top:7px;font-size:12px;color:var(--primary-dark)}.sidebar-overlay{display:none}
@media(max-width:1180px){.hero-grid{grid-template-columns:repeat(2,1fr)}.roadmap{grid-template-columns:repeat(3,1fr)}}@media(max-width:980px){.app-shell{display:block}.sidebar{position:fixed;left:0;top:0;width:280px;transform:translateX(-100%);transition:.2s}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-overlay{position:fixed;inset:0;z-index:25;background:rgba(15,23,42,.45)}.sidebar-open .sidebar-overlay{display:block}.menu-toggle{display:grid;place-items:center}.content-grid{grid-template-columns:1fr}}@media(max-width:720px){.content{width:calc(100% - 24px);margin-top:14px}.topbar{padding:14px 16px}.topbar h1{font-size:20px}.topbar p,.system-badge{display:none}.hero-grid{grid-template-columns:1fr}.mini-grid{grid-template-columns:repeat(2,1fr)}.roadmap{grid-template-columns:1fr 1fr}.placeholder-grid{grid-template-columns:1fr}}