/* ── Variables ── */
:root {
  --pb:    #185FA5;
  --pm:    #378ADD;
  --pl:    #85B7EB;
  --pp:    #B5D4F4;
  --dark:  #0A0D14;
  --ps2:   #0F1320;
  --ps3:   #161B2A;
  --ps4:   #1E2535;
  --border:rgba(255,255,255,0.08);
  --text:  #F0F4FF;
  --muted: #8A95B0;
  --green: #22c55e;
  --red:   #ef4444;
  --amber: #f59e0b;
  --fh:    'Plus Jakarta Sans', sans-serif;
  --fb:    'DM Sans', sans-serif;
  --sw:    220px;
  --th:    56px;
  --r:     10px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body { background: var(--dark); color: var(--text); font-family: var(--fb); font-size: 14px; line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
input, select, textarea, button { font-family: var(--fb); }
img { max-width: 100%; display: block; }

/* ── Login ── */
.pos-login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.pos-login-wrap { width:100%; max-width:400px; padding:24px; }
.pos-login-card { background:var(--ps3); border:1px solid var(--border); border-radius:16px; padding:40px 36px; }
.pos-login-logo { height:40px; margin-bottom:24px; }
.pos-login-sub  { color:var(--muted); font-size:14px; margin-bottom:28px; }
.pos-login-form { display:flex; flex-direction:column; gap:18px; }

/* ── Shell ── */
.pos-shell { display:flex; min-height:100vh; }

/* ── Sidebar ── */
.pos-sidebar {
  width:var(--sw); background:var(--ps2); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; z-index:20;
  transition: transform 0.25s;
}
.pos-sidebar-logo { padding:16px 20px; border-bottom:1px solid var(--border); }
.pos-nav { flex:1; padding:12px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.pos-nav-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:8px; color:var(--muted); font-size:14px; font-weight:500;
  transition:background 0.15s, color 0.15s;
}
.pos-nav-item:hover { background:var(--ps4); color:var(--text); }
.pos-nav-item.active { background:rgba(55,138,221,0.12); color:var(--pl); }
.pos-nav-item svg { flex-shrink:0; }
.pos-sidebar-footer { padding:12px; border-top:1px solid var(--border); display:flex; align-items:center; gap:10px; }
.pos-user { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.pos-avatar { width:32px; height:32px; background:var(--pb); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--fh); font-size:13px; font-weight:700; flex-shrink:0; }
.pos-user-info span { display:block; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pos-user-info small { font-size:11px; color:var(--muted); text-transform:capitalize; }
.pos-logout { color:var(--muted); padding:6px; border-radius:6px; transition:color 0.15s, background 0.15s; }
.pos-logout:hover { color:var(--red); background:rgba(239,68,68,0.08); }

/* ── Main ── */
.pos-main { margin-left:var(--sw); flex:1; display:flex; flex-direction:column; }
.pos-topbar { height:var(--th); background:var(--ps2); border-bottom:1px solid var(--border); padding:0 24px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:10; }
.pos-menu-toggle { display:none; background:none; border:none; color:var(--text); cursor:pointer; padding:4px; }
.pos-page-title { font-family:var(--fh); font-size:17px; font-weight:700; flex:1; }
.pos-topbar-right { display:flex; align-items:center; gap:10px; }
.pos-time { font-size:13px; color:var(--muted); font-family:monospace; }
.pos-content { padding:24px; flex:1; }

/* ── Buttons ── */
.pos-btn { display:inline-flex; align-items:center; gap:6px; font-family:var(--fh); font-size:13px; font-weight:600; padding:9px 18px; border-radius:8px; border:none; cursor:pointer; transition:background 0.15s, color 0.15s, transform 0.1s; white-space:nowrap; }
.pos-btn:active { transform:scale(0.98); }
.pos-btn-primary { background:var(--pm); color:#fff; }
.pos-btn-primary:hover { background:var(--pb); }
.pos-btn-ghost { background:none; color:var(--muted); border:1px solid var(--border); }
.pos-btn-ghost:hover { color:var(--text); border-color:rgba(255,255,255,0.2); background:var(--ps4); }
.pos-btn-sm { padding:6px 14px; font-size:12px; }
.pos-btn-full { width:100%; justify-content:center; }
.pos-btn-danger { background:rgba(239,68,68,0.12); color:#fca5a5; border:1px solid rgba(239,68,68,0.2); }
.pos-btn-danger:hover { background:rgba(239,68,68,0.2); }

/* ── Alerts ── */
.pos-alert { padding:12px 16px; border-radius:var(--r); font-size:14px; margin-bottom:20px; }
.pos-alert p { margin:0; line-height:1.5; }
.pos-alert-success { background:rgba(34,197,94,0.1); border:1px solid rgba(34,197,94,0.25); color:#86efac; }
.pos-alert-error   { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.25); color:#fca5a5; }

/* ── Panel ── */
.pos-panel { background:var(--ps3); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.pos-panel-head { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--border); }
.pos-panel-head h2 { font-family:var(--fh); font-size:14px; font-weight:700; }
.pos-panel-link { font-size:12px; color:var(--pl); }
.pos-chart-wrap { padding:16px 20px 8px; }

/* ── Table ── */
.pos-table { width:100%; border-collapse:collapse; font-size:13px; }
.pos-table th { text-align:left; padding:10px 20px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase; border-bottom:1px solid var(--border); }
.pos-table td { padding:12px 20px; border-bottom:1px solid rgba(255,255,255,0.04); vertical-align:middle; }
.pos-table tr:last-child td { border-bottom:none; }
.pos-table tr:hover td { background:rgba(255,255,255,0.02); }
.pos-td-actions { display:flex; gap:10px; align-items:center; }

/* ── Stat cards ── */
.pos-stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-bottom:24px; }
.pos-stat-card { background:var(--ps3); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; display:flex; gap:14px; align-items:flex-start; }
.pos-stat-blue { border-color:rgba(55,138,221,0.3); background:rgba(55,138,221,0.06); }
.pos-stat-warn { border-color:rgba(245,158,11,0.3); background:rgba(245,158,11,0.06); }
.psc-icon { font-size:22px; flex-shrink:0; margin-top:2px; }
.psc-label { font-size:11px; color:var(--muted); letter-spacing:0.3px; margin-bottom:4px; }
.psc-value { font-family:var(--fh); font-size:24px; font-weight:800; line-height:1; }
.psc-sub { font-size:11px; color:var(--muted); margin-top:4px; }
.psc-sub a { color:var(--pl); }

/* ── Dashboard grid ── */
.pos-dash-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:24px; }

/* ── Bar chart ── */
.pos-bar-chart { display:flex; align-items:flex-end; gap:6px; height:160px; padding-bottom:28px; }
.pos-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative; }
.pos-bar-fill { width:100%; background:var(--pm); border-radius:4px 4px 0 0; min-height:2px; opacity:0.85; transition:height 0.3s; }
.pos-bar-fill:hover { opacity:1; }
.pos-bar-tip { position:absolute; top:-18px; font-size:10px; color:var(--muted); white-space:nowrap; }
.pos-bar-label { position:absolute; bottom:-22px; font-size:10px; color:var(--muted); white-space:nowrap; }

/* ── Badges ── */
.pos-badge { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }
.pos-badge-cash   { background:rgba(34,197,94,0.12); color:#86efac; }
.pos-badge-card   { background:rgba(55,138,221,0.12); color:var(--pl); }
.pos-badge-credit { background:rgba(245,158,11,0.12); color:#fcd34d; }
.pos-badge-other  { background:rgba(138,149,176,0.1); color:var(--muted); }
.pos-status { display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; }
.pos-status-completed { background:rgba(34,197,94,0.12); color:#86efac; border:1px solid rgba(34,197,94,0.2); }
.pos-status-refunded  { background:rgba(245,158,11,0.12); color:#fcd34d; border:1px solid rgba(245,158,11,0.2); }
.pos-status-void      { background:rgba(239,68,68,0.1); color:#fca5a5; border:1px solid rgba(239,68,68,0.15); }
.pos-status-draft     { background:rgba(138,149,176,0.1); color:var(--muted); border:1px solid var(--border); }
.pos-status-sent      { background:rgba(55,138,221,0.12); color:var(--pl); border:1px solid rgba(55,138,221,0.2); }
.pos-status-received  { background:rgba(34,197,94,0.12); color:#86efac; border:1px solid rgba(34,197,94,0.2); }
.pos-status-cancelled { background:rgba(239,68,68,0.1); color:#fca5a5; border:1px solid rgba(239,68,68,0.15); }
.pos-stock-badge { display:inline-block; font-size:12px; font-weight:700; padding:2px 10px; border-radius:999px; }
.stock-ok  { background:rgba(34,197,94,0.12); color:#86efac; }
.stock-low { background:rgba(245,158,11,0.12); color:#fcd34d; }
.stock-out { background:rgba(239,68,68,0.1); color:#fca5a5; }
.pos-ref   { font-family:monospace; font-size:12px; color:var(--pl); }
.pos-muted { color:var(--muted); }
.pos-mono  { font-family:monospace; }
.pos-green { color:var(--green); }
.pos-red   { color:var(--red); }
.pos-cat-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }

/* ── Forms ── */
.pos-form { max-width:900px; }
.pos-form-grid { display:flex; flex-direction:column; gap:24px; margin-bottom:28px; }
.pos-form-section { background:var(--ps3); border:1px solid var(--border); border-radius:var(--r); padding:24px; }
.pos-form-section-title { font-family:var(--fh); font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:20px; }
.pos-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pos-field { display:flex; flex-direction:column; gap:6px; }
.pos-field-full { grid-column:1/-1; }
.pos-field label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.3px; }
.pos-field label small { text-transform:none; font-weight:400; }
.pos-input, .pos-select, .pos-textarea {
  background:var(--ps4); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-family:var(--fb); font-size:14px; padding:10px 12px;
  transition:border-color 0.2s; outline:none; width:100%;
}
.pos-input::placeholder, .pos-textarea::placeholder { color:rgba(138,149,176,0.45); }
.pos-input:focus, .pos-select:focus, .pos-textarea:focus { border-color:var(--pm); }
.pos-select { appearance:none; cursor:pointer; }
.pos-textarea { resize:vertical; }
.pos-input-inline { background:var(--ps4); border:1px solid var(--border); border-radius:6px; color:var(--text); font-size:13px; padding:6px 10px; outline:none; width:100%; }
.pos-input-inline:focus { border-color:var(--pm); }
.pos-field-checkbox { justify-content:flex-end; }
.pos-checkbox-label { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--text); text-transform:none; letter-spacing:0; }
.pos-checkbox-label input[type="checkbox"] { width:16px; height:16px; accent-color:var(--pm); cursor:pointer; }
.pos-form-actions { display:flex; gap:12px; align-items:center; }
.pos-link       { color:var(--pl); font-size:13px; font-weight:600; cursor:pointer; }
.pos-link:hover { color:#fff; }
.pos-link-btn   { background:none; border:none; color:var(--pl); font-size:13px; font-weight:600; cursor:pointer; padding:0; }
.pos-link-btn:hover { color:#fff; }
.pos-link-strong { color:var(--text); font-weight:600; }
.pos-link-strong:hover { color:var(--pl); }
.pos-link-danger { color:#fca5a5 !important; }
.pos-link-danger:hover { color:var(--red) !important; }

/* ── Filter bar ── */
.pos-filter-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.pos-search-input { background:var(--ps3); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13px; padding:8px 14px; outline:none; flex:1; min-width:200px; }
.pos-search-input:focus { border-color:var(--pm); }
.pos-date-input { background:var(--ps3); border:1px solid var(--border); border-radius:8px; color:var(--text); font-size:13px; padding:8px 12px; outline:none; }
.pos-date-input:focus { border-color:var(--pm); }

/* ── Pagination ── */
.pos-pagination { display:flex; align-items:center; justify-content:center; gap:16px; padding:16px; border-top:1px solid var(--border); }
.pos-page-btn { font-size:13px; font-weight:600; color:var(--pl); padding:6px 14px; border:1px solid rgba(133,183,235,0.25); border-radius:7px; transition:background 0.15s; }
.pos-page-btn:hover { background:rgba(133,183,235,0.07); }

/* ── Empty states ── */
.pos-empty { padding:40px; text-align:center; color:var(--muted); font-size:14px; }
.pos-empty a { color:var(--pl); }

/* ── Modal (shared) ── */
.till-modal-overlay { display:flex; align-items:center; justify-content:center; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:200; }
.till-modal { background:var(--ps3); border:1px solid var(--border); border-radius:16px; width:95%; max-width:520px; max-height:90vh; overflow-y:auto; }
.till-modal-sm { max-width:380px; }
.till-modal-head { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--border); }
.till-modal-head h2 { font-family:var(--fh); font-size:16px; font-weight:700; }
.till-modal-close { background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; line-height:1; }
.till-modal-close:hover { color:var(--text); }
.till-modal-body { padding:20px 24px; }
.till-modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:16px 24px; border-top:1px solid var(--border); }

/* ── Responsive ── */
@media (max-width:900px) {
  .pos-sidebar { transform:translateX(-100%); }
  .pos-sidebar.open { transform:translateX(0); }
  .pos-main { margin-left:0; }
  .pos-menu-toggle { display:block; }
  .pos-dash-grid { grid-template-columns:1fr; }
  .pos-field-grid { grid-template-columns:1fr; }
  .pos-stat-grid { grid-template-columns:1fr 1fr; }
}

/* ── Support session notice ── */
.pos-support-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(245,158,11,0.1);
  border-bottom: 1px solid rgba(245,158,11,0.3);
  padding: 8px 24px;
  font-size: 13px;
  font-weight: 600;
  color: #fcd34d;
  position: relative;
  overflow: hidden;
}
.pos-support-notice-icon { font-size: 15px; flex-shrink: 0; }
.pos-support-notice-who  { color: rgba(252,211,77,0.7); font-weight: 400; }
.pos-support-notice-pulse {
  position: absolute;
  right: 24px;
  width: 8px; height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  animation: support-pulse 2s infinite;
}
@keyframes support-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.4); }
}