@import url("fonts.css");
:root{--navy:#101d35;--blue:#2563eb;--gold:#d4a853;--bg:#f5f7fb;--text:#1e293b;--muted:#718096;--border:#e8edf5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px Inter,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:0}svg{width:19px;height:19px;flex-shrink:0}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:var(--navy);color:white;display:flex;flex-direction:column;z-index:5}.logo{display:flex;gap:12px;align-items:center;padding:24px 19px;font-size:14px;font-weight:800;letter-spacing:.4px}.logo b{color:var(--gold)}.logo small{display:block;font-size:10px;color:#9eabc2;font-weight:500;letter-spacing:0;margin-top:4px}.brandicon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,#3977fa,#a0b9ff);color:white;font-size:24px;font-weight:800}.sidebar nav{overflow:auto;padding:0 12px 18px;flex:1}.navgroup{font-size:10px;font-weight:800;letter-spacing:1.3px;color:#7f91b0;margin:22px 13px 9px}.navitem{display:flex;gap:12px;align-items:center;text-decoration:none;color:#bdc8db;padding:11px 12px;border-radius:10px;margin:3px 0;font-weight:500}.navitem.active{color:white;background:#294267}.navitem.disabled{opacity:.65;cursor:not-allowed}.navitem svg{width:17px;height:17px}.navitem .soon{width:12px;height:12px;margin-left:auto;opacity:.5}.sidebarfoot{padding:19px;color:#8193b1;border-top:1px solid #253651;font-size:11px}.main{margin-left:260px;min-height:100vh;display:flex;flex-direction:column}.topbar{height:76px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;gap:15px;position:sticky;top:0;z-index:3}.pagetitle{display:flex;gap:12px;align-items:center;font-weight:800;font-size:16px}.pagetitle svg{color:var(--blue)}.topactions{display:flex;align-items:center;gap:15px}.branchform,.clock{display:flex;align-items:center;gap:8px;color:#516176}.branchform select{max-width:160px;border:1px solid var(--border);padding:9px;border-radius:9px;background:#f8faff}.clock{font-size:12px}.popover{position:relative}.popover summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}.popover summary::-webkit-details-marker{display:none}.popover summary>svg{color:#42536c}.badge{background:#ef4444;color:white;border-radius:30px;padding:2px 5px;font-size:10px}.profiletext{font-weight:700;font-size:12px}.profiletext small{display:block;font-weight:500;color:var(--muted);margin-top:3px}.dropdown{position:absolute;right:0;top:35px;width:260px;background:white;box-shadow:0 12px 45px #162b4d20;border:1px solid var(--border);padding:17px;border-radius:14px;z-index:10}.dropdown p{color:var(--muted);line-height:1.6}.logout{display:flex;gap:8px;align-items:center;background:#fff1f2;color:#be123c;border-radius:9px;padding:10px 13px;font-weight:700}.content{padding:30px;flex:1}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.heading h1{font-size:27px;letter-spacing:-.8px;margin:4px 0 8px}.heading p{color:var(--muted);margin:0}.eyebrow{font-size:10px!important;letter-spacing:2px;color:var(--blue)!important;font-weight:800}.pill{display:flex;gap:7px;align-items:center;background:#e8f3ee;color:#087f58;border-radius:30px;padding:10px 14px;font-size:11px;font-weight:700}.pill svg{width:15px;height:15px}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card,.panel{background:white;border:1px solid var(--border);border-radius:16px;box-shadow:0 5px 20px #172b4d07}.card{padding:21px;min-height:155px}.cardtop{display:flex;justify-content:space-between;align-items:center}.iconbox{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#edf3ff;color:var(--blue);flex-shrink:0}.muted{color:#aab7ca}.card p{color:var(--muted);font-size:12px;margin:17px 0 7px}.card strong{font-size:25px;letter-spacing:-.6px}.panel{padding:24px;margin-top:22px}.paneltitle{display:flex;gap:14px;align-items:center}.paneltitle h2{font-size:17px;margin:0 0 6px}.paneltitle p{color:var(--muted);margin:0;font-size:12px}.formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}.formgrid label,.authbox label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700}.formgrid input,.authbox input{padding:13px;border:1px solid #dce4ef;border-radius:10px;outline-color:var(--blue);width:100%}.primary,.authbox button{background:var(--blue);color:white;padding:12px 17px;border-radius:10px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}.formgrid .primary{align-self:end}footer{display:flex;justify-content:space-between;gap:15px;padding:20px 30px;color:#8a97aa;font-size:11px;border-top:1px solid var(--border)}.auth{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 70% 10%,#1c3b69,var(--navy))}.authbox{width:min(430px,92vw);background:white;padding:36px;border-radius:22px;box-shadow:0 24px 70px #0003;display:flex;flex-direction:column;gap:17px}.authbox h1{margin:0;font-size:27px}.authbox p{color:var(--muted);margin:0 0 5px}.authbox button{width:100%;margin-top:6px}.alert{padding:12px;background:#fff1f2;color:#be123c;border-radius:9px}.success{padding:12px;background:#dcfce7;color:#166534;border-radius:9px;margin-bottom:18px}@media(max-width:1000px){.sidebar{width:72px}.logo{padding:18px}.logo>span:last-child,.navgroup,.navitem span,.navitem .soon,.sidebarfoot{display:none}.navitem{justify-content:center}.main{margin-left:72px}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.clock{display:none}}@media(max-width:620px){.sidebar{width:55px}.logo{padding:10px}.brandicon{width:34px;height:34px}.main{margin-left:55px}.topbar{padding:0 12px;height:65px}.topactions{gap:8px}.pagetitle span,.profiletext,.logout span{display:none}.branchform select{max-width:95px;font-size:11px}.content{padding:16px}.cards{grid-template-columns:1fr;gap:11px}.card{min-height:125px}.heading{align-items:flex-start;flex-direction:column}.heading h1{font-size:23px}.formgrid{grid-template-columns:1fr}footer{padding:15px;flex-direction:column}.logout{padding:9px}}
/* Hospitality Pro premium dark analytics — user-approved reference */
.hp-analytics{margin-top:25px;color:#eaf4ff}.hp-analytics-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}.hp-analytics-heading span{font-size:11px;letter-spacing:1.5px;color:#7894b8}.hp-analytics-heading h2{margin:4px 0;font-size:25px;color:#eef6ff}.hp-analytics-heading em{font-style:normal;color:#4197ff}.hp-period{padding:11px 16px;border:1px solid #294363;border-radius:10px;background:#172943;color:#d0def1;font-size:13px}.hp-graph-card{background:linear-gradient(145deg,#172a46,#0e1d34);border:1px solid #2b4a71;border-radius:16px;padding:23px;box-shadow:0 14px 40px #0612242b;min-width:0}.hp-graph-card h3{color:#f0f6ff;margin:0 0 5px;font-size:17px}.hp-graph-card p,.hp-graph-title span{color:#8fa8c8;font-size:12px;margin:4px 0 14px}.hp-graph-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.hp-graph-number{font-size:34px;font-weight:750;letter-spacing:-1px;margin-top:9px}.hp-graph-sub{color:#77c8a5;font-size:12px}.hp-chart-wrap{height:310px;margin:16px 0 8px}.hp-graph-totals{border-top:1px solid #304765;display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;padding-top:18px}.hp-graph-totals div{padding:5px 14px;text-align:center;border-right:1px solid #304765}.hp-graph-totals div:last-child{border:0}.hp-graph-totals span{display:block;color:#9cb1cf;font-size:12px}.hp-graph-totals strong{display:block;color:#f3f8ff;font-size:18px;margin-top:7px}.hp-lower-charts{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.hp-donut-wrap{height:230px;max-width:300px;position:relative;margin:12px auto}.hp-donut-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.hp-donut-label span{font-size:11px;color:#8fa8c8}.hp-donut-label strong{font-size:22px;color:white}.hp-method-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px;font-size:12px;color:#c9d9ed}.hp-method-legend>div{display:flex;align-items:center;gap:7px}.hp-dot{display:inline-block;width:9px;height:9px;border-radius:50%}.hp-bars{padding:16px 0;min-height:220px}.hp-bar-row{margin-bottom:20px}.hp-bar-caption{display:flex;justify-content:space-between;gap:8px;color:#c9d9ed;font-size:13px;margin-bottom:9px}.hp-bar-caption strong{color:#f0f6ff}.hp-bar-track{height:13px;background:#253b5b;border-radius:20px;overflow:hidden}.hp-bar-track div{height:100%;border-radius:20px}.hp-note{color:#91a6c2;font-size:11px;border-top:1px solid #2b4261;padding-top:12px}@media(max-width:900px){.hp-lower-charts{grid-template-columns:1fr}.hp-graph-totals strong{font-size:14px}}@media(max-width:580px){.hp-graph-card{padding:15px}.hp-graph-totals{grid-template-columns:1fr}.hp-graph-totals div{border-right:0;border-bottom:1px solid #304765}.hp-chart-wrap{height:250px}.hp-graph-number{font-size:26px}}

/* Analytics period filter */
.hp-period{display:flex;align-items:center;gap:10px;color:#b9cbe5}.hp-period select{appearance:auto;border:1px solid #2a4569;border-radius:10px;background:#12233f;color:#f2f7ff;padding:9px 12px;cursor:pointer;max-width:180px}.hp-period select:focus-visible{outline:2px solid #55aaff;outline-offset:2px}

/* Standalone setup and connection screens share the same type, spacing and controls. */
.auth{padding:24px;background:radial-gradient(ellipse at 90% 90%,#24416d,transparent 65%),#101d35}
.auth .authbox{width:min(560px,100%);padding:32px;border-radius:16px;border:1px solid #e4e9f2;box-shadow:0 20px 70px #08132730;gap:16px}
.authbox h1{color:#101d35;font-size:26px;font-weight:650;letter-spacing:-.6px}
.authbox p{line-height:1.65;font-size:12px;color:#64748b}
.authbox form{display:grid;gap:16px;min-width:0}
.authbox label{font-size:12px;color:#475569;font-weight:500;min-width:0}
.authbox input,.authbox select{min-height:42px;padding:10px 12px;border:1px solid #d8e0ed;border-radius:8px;min-width:0;max-width:100%;font:inherit}
.authbox button{min-height:42px;border-radius:8px;font-size:12px}
@media(max-width:620px){.auth{padding:16px}.auth .authbox{padding:24px}}