/* Joker 8888_Des – owner views (Thống kê, Nhân viên). Loaded by index.html. */
.adm-view{--ink2:#6B675F;--rule:#F0EBE1;--bd:#D8D2C6;display:flex;flex-direction:column;gap:24px}
.adm-view h1{margin:0;font-size:26px;line-height:1.25}
.adm-view h1:focus{outline:none}
.adm-view h2{margin:0;font-size:17px}
.adm-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.adm-head .lead{margin:4px 0 0;font-size:14px;color:var(--ink2)}
.adm-ctrl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.adm-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.adm-card-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px}
.muted{color:var(--ink2)}
.adm-msg{border-radius:10px;padding:10px 14px;font-size:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.adm-msg.err{background:var(--err-soft);color:#9E2A1D;border:1px solid #F0CFC9}
.adm-msg.ok{background:#E3F3EA;color:#17643A;border:1px solid #BFE0CC}
.adm-msg:empty{display:none}

/* segmented range buttons */
.rseg{display:flex;border:1px solid var(--bd);border-radius:10px;overflow:hidden;background:#fff;flex-wrap:wrap}
.rseg button{height:40px;padding:0 16px;border:0;border-left:1px solid var(--line);background:#fff;font-size:14px;color:var(--text);cursor:pointer}
.rseg button:first-child{border-left:0}
.rseg button:hover{background:var(--gold-soft)}
.rseg button[aria-pressed="true"]{background:var(--gold);color:#1F1A0A;font-weight:700}
.btn-out{height:40px;padding:0 16px;border:1px solid var(--bd);background:#fff;border-radius:10px;font-size:14px;color:var(--text);display:inline-flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn-out:hover:not(:disabled){border-color:var(--gold);background:var(--gold-soft)}
.btn-out:disabled{opacity:.5;cursor:not-allowed}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.kpi .k-l{font-size:13px;color:var(--ink2);font-weight:600}
.kpi .k-v{font-size:34px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.kpi .k-v small{font-size:20px;color:var(--ink2);font-weight:600}
.kpi .k-s{font-size:13px;color:var(--ink2)}
.kpi .k-s.up{color:#1F7A45}
.kpi.dark{background:#2A2A2A;border-color:#2A2A2A;color:#F6F4EF}
.kpi.dark .k-l,.kpi.dark .k-s{color:#D8D2C6}
.kpi.dark .k-v{color:#E2C15A}
.kpi.loading .k-v{color:transparent;background:linear-gradient(90deg,#F1EEE7,#E9E4D9,#F1EEE7);border-radius:6px;width:60%}
.kpi.dark.loading .k-v{background:#3a3a3a}

/* stacked bar chart */
.legend{display:flex;gap:14px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw.a{background:#A8861B}.sw.b{background:#E7D9A6}
.chart{position:relative}
.bars{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:10px;align-items:end;height:220px;border-bottom:1px solid var(--line);padding-bottom:2px}
.col{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.col .val{font-size:11px;color:var(--ink2);text-align:center;line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap}
.col .stack{display:flex;flex-direction:column;justify-content:flex-end;border-radius:4px 4px 0 0;overflow:hidden;min-height:0}
.col .sg{background:#E7D9A6}
.col .sl{background:#A8861B}
.col.today .sl{background:#8A6D12}
.col.today .stack{outline:2px solid #2A2A2A;outline-offset:2px}
.xlabels{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:10px;font-size:12px;color:var(--ink2);text-align:center;margin-top:8px}
.xlabels span{white-space:nowrap;overflow:hidden;text-overflow:clip}
.xlabels .t{color:var(--text);font-weight:700}
.chart-empty{position:absolute;inset:0 0 28px 0;display:grid;place-items:center;color:var(--ink2);font-size:14px;pointer-events:none}
.chart-empty span{background:#fff;padding:6px 12px;border-radius:8px;border:1px solid var(--line)}

/* tables */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px}
.tbl-wrap:focus-visible{outline:3px solid var(--gold)}
table.tbl{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.tbl th{padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;text-align:left;color:var(--ink2);font-size:13px;white-space:nowrap}
.tbl td{padding:12px;border-bottom:1px solid var(--rule);vertical-align:middle}
.tbl .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .b{font-weight:700}
.tbl tr.total td{font-weight:700;border-bottom:0}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.empty-cell{text-align:center;color:var(--ink2);padding:28px 12px}
.tbl .sub{font-size:12px;color:var(--ink2);white-space:nowrap}
.tbl td.acc{min-width:150px}
.me-tag{white-space:nowrap}
.tbl .fname{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-cell{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{width:32px;height:32px;border-radius:50%;background:#F3EEDC;color:#6E5710;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.live{color:#1F7A45}
.badge{display:inline-block;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:600;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.badge.ok{background:#E3F3EA;color:#17643A}
.badge.err{background:#FBE7E4;color:#9E2A1D}
.badge.run{background:#FBF6E4;color:#7D6413}
.badge.owner{background:#2A2A2A;color:#F6F4EF;font-size:12px;font-weight:700}
.badge.staff{background:#F3EEDC;color:#5E4A0B;font-size:12px;font-weight:700}
.badge.off{background:#F1F0EC;color:#55524B;font-size:12px;font-weight:700}
.st-on{color:#17643A;font-weight:600;white-space:nowrap}
.st-off{color:#9E2A1D;font-weight:600;white-space:nowrap}
tr.locked td{color:var(--ink2)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.sel{height:38px;border:1px solid var(--bd);border-radius:8px;padding:0 10px;font-size:14px;background:#fff;color:var(--text);max-width:100%}
.sel:focus,.ainput:focus{border-color:var(--gold);outline:none;box-shadow:0 0 0 3px rgba(201,162,39,.25)}

/* staff management */
.users-grid{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.users-grid>.form-card{flex:1 1 340px;max-width:400px;gap:16px}
.users-grid>.list-card{flex:999 1 560px}
.ff{display:flex;flex-direction:column;gap:6px}
.ff>label,.ff>.lbl{font-size:14px;font-weight:600}
.ainput{height:44px;border:1px solid var(--bd);border-radius:10px;padding:0 12px;font-size:15px;background:#fff;width:100%;min-width:0}
.ainput.mono,.mono{font-family:ui-monospace,Consolas,"Cascadia Mono",monospace}
.ainput[aria-invalid="true"]{border-color:var(--err)}
.hint{font-size:12px;color:var(--ink2)}
.ferr{font-size:13px;color:var(--err);margin:0}
.ferr:empty{display:none}
.row2{display:flex;gap:8px}
.row2 .ainput{flex:1 1 auto}
.btn-o{height:44px;padding:0 12px;border:1px solid var(--bd);background:#fff;border-radius:10px;font-size:14px;color:var(--text);cursor:pointer;white-space:nowrap}
.btn-o:hover:not(:disabled){border-color:var(--gold);background:var(--gold-soft)}
.roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.roles button{height:44px;border:1px solid var(--bd);background:#fff;border-radius:10px;font-size:14px;color:var(--text);cursor:pointer}
.roles button[aria-pressed="true"]{border:2px solid #A8861B;background:#FBF6E6;font-weight:700;color:#5E4A0B}
.btn-create{height:48px;border:0;border-radius:10px;background:var(--gold);color:#1F1A0A;font-size:16px;font-weight:700;cursor:pointer}
.btn-create:hover:not(:disabled){background:#BD981F}
.btn-create:disabled{opacity:.6;cursor:progress}
.created{background:#E3F3EA;border:1px solid #BFE0CC;border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;color:#17643A}
.created p{margin:0;font-size:14px}
.cred{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px;color:var(--text);margin:0}
.cred dt{color:var(--ink2)}
.cred dd{margin:0;font-family:ui-monospace,Consolas,monospace;font-weight:700;overflow-wrap:anywhere}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.search{height:40px;width:200px;max-width:100%;border:1px solid var(--bd);border-radius:10px;padding:0 12px;font-size:14px}
.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.abtn{height:36px;padding:0 12px;border:1px solid var(--bd);background:#fff;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap}
.abtn:hover:not(:disabled){border-color:var(--gold);background:var(--gold-soft)}
.abtn.danger{border-color:#E8C2BC;color:#9E2A1D}
.abtn.danger:hover:not(:disabled){background:#FBE7E4;border-color:#C0392B}
.abtn.solid-danger{background:#C0392B;border-color:#A93226;color:#fff}
.abtn.solid-danger:hover:not(:disabled){background:#A93226}
.abtn.gold{background:var(--gold);border-color:var(--gold-dark);color:#1F1A0A;font-weight:700}
.abtn.gold:hover:not(:disabled){background:#BD981F}
.abtn:disabled{opacity:.5;cursor:not-allowed}
tr.editor td{background:#FBF8EF;border-bottom:1px solid var(--line)}
.ed{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ed .ainput{height:36px;width:180px;font-size:14px}
.ed label{font-weight:600;font-size:14px}
.ed .txt{font-size:14px;flex:1 1 260px}
.ed.warn .txt{color:#9E2A1D}
.foot-note{margin:0;font-size:13px;color:var(--ink2)}
.me-tag{font-size:12px;color:#7D6413;font-weight:600}

@media (max-width:520px){
  .adm-view{gap:16px}
  .adm-view h1{font-size:22px}
  .adm-card{padding:16px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{padding:14px}
  .kpi .k-v{font-size:26px}
  .kpi .k-v small{font-size:16px}
  .bars,.xlabels{gap:4px}
  .bars{height:180px}
  .col .val{font-size:9.5px}
  .xlabels{font-size:10px}
  .xlabels span:nth-child(even):not(.t),.xlabels span:nth-child(13){visibility:hidden}
  .xlabels .t{overflow:visible;display:flex;justify-content:flex-end}
  .rseg button{padding:0 12px}
  .users-grid>.form-card{max-width:none}
  .search{width:100%}
}
@media (max-width:360px){ .kpis{grid-template-columns:1fr} }