/*
  The POS Portal shell: the Office Portal's structure — dark sidebar with labelled groups, a topbar
  with breadcrumb and theme toggle, a page wrapper, a footer — on a base colour of #6ec485.

  Bootstrap stays for the pages themselves (cards, tables, forms); this file owns only the shell
  and re-points Bootstrap's primary at the palette. Tokens first, so the palette is one block.
*/

:root {
  --sidebar-bg: #182720;
  --sidebar-w: 252px;
  --sidebar-hover: rgba(255, 255, 255, 0.04);
  --sidebar-active: rgba(110, 196, 133, 0.16);
  --sidebar-text: #8da697;
  --sidebar-text-hover: #cfe3d6;
  --sidebar-text-active: #ffffff;
  --sidebar-border: rgba(255, 255, 255, 0.06);

  --primary: #6ec485;
  --primary-lt: rgba(110, 196, 133, 0.12);
  --primary-dk: #4fae69;
  --primary-ink: #0b2615;          /* text on the primary colour; white would not read on this green */
  --link: #3f9a5c;

  --body-bg: #f4f8f5;
  --bg-surface: #ffffff;
  --bg-surface-secondary: #f7faf8;
  --border-color: #e3e9e5;
  --text: #1e2633;
  --text-secondary: #5f6d64;
  --text-muted: #7e8a82;

  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Bootstrap reads these. */
  --bs-primary: #6ec485;
  --bs-primary-rgb: 110, 196, 133;
  --bs-link-color: #3f9a5c;
  --bs-link-color-rgb: 63, 154, 92;
  --bs-link-hover-color: #2f7f49;
  --bs-link-hover-color-rgb: 47, 127, 73;
  --bs-body-bg: #f4f8f5;
  --bs-body-color: #1e2633;
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 0.9rem;
}
[data-theme="dark"] {
  --body-bg: #0f1a14;
  --bg-surface: #182720;
  --bg-surface-secondary: #13211a;
  --border-color: #2a3a31;
  --text: #e6ebe8;
  --text-secondary: #a9b7ae;
  --text-muted: #8c9a92;
  --primary-lt: rgba(110, 196, 133, 0.18);
  --bs-body-bg: #0f1a14;
  --bs-body-color: #e6ebe8;
  --bs-tertiary-bg: #13211a;
  --bs-secondary-bg: #182720;
  --bs-border-color: #2a3a31;
}
[data-theme="dark"] .portal .card { --bs-card-bg: var(--bg-surface); --bs-card-border-color: var(--border-color); color: var(--text); }
[data-theme="dark"] .portal .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--border-color); }
[data-theme="dark"] .portal .form-control, [data-theme="dark"] .portal .form-select { background: #1e3027; color: var(--text); border-color: #35483d; }
[data-theme="dark"] .portal .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .portal .modal-content, [data-theme="dark"] .portal .list-group-item { background: var(--bg-surface); color: var(--text); border-color: var(--border-color); }

html, body { font-family: var(--font); background: var(--body-bg); color: var(--text); }
/* The sign-in card is always light: it has no shell to belong to and reads better on the gradient. */
.login-card, .login-card .form-control { color-scheme: light; background-color: #ffffff; color: #1e2633; border-color: #c9d3cd; }

/* ── primary, in the palette ─────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-color: var(--primary-ink);
  --bs-btn-hover-bg: var(--primary-dk);
  --bs-btn-hover-border-color: var(--primary-dk);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--primary-dk);
  --bs-btn-active-border-color: var(--primary-dk);
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-disabled-color: var(--primary-ink);
  --bs-btn-focus-shadow-rgb: 110, 196, 133;
}
.btn-outline-primary {
  --bs-btn-color: var(--link);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--primary-ink);
  --bs-btn-active-bg: var(--primary-dk);
  --bs-btn-active-color: #ffffff;
}
a, .btn-link { color: var(--link); }
.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(110, 196, 133, 0.35); border-color: var(--primary); }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
.nav-pills .nav-link.active { background: var(--primary); color: var(--primary-ink); }
.badge.bg-primary { background: var(--primary) !important; color: var(--primary-ink); }
.text-primary { color: var(--link) !important; }

/* ── the shell ───────────────────────────────────────────────────────────── */
.portal { min-height: 100vh; display: flex; flex-direction: column; }
.portal > .main { flex: 1 0 auto; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; z-index: 40;
  transform: translateX(-100%); transition: transform .18s ease;
}
.sidebar.open { transform: none; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 18px 20px 14px; border-bottom: 1px solid var(--sidebar-border); }
.brand-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--primary); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.brand-icon img { width: 22px; height: 22px; border-radius: 4px; }
.brand-name { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .01em; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 12px 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; }
/* The menu's scrollbar in the sidebar's own colours: a thin thumb on a bare track, brighter under the pointer. */
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 8px; border: 2px solid var(--sidebar-bg); }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: var(--primary); }
.nav-group { margin-bottom: 14px; }
.nav-label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-text); opacity: .75; padding: 10px 10px 6px; }
/* A group heading is a button: click it and the items beneath fold away. */
.nav-group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.nav-group-toggle:hover { opacity: 1; color: var(--sidebar-text-hover); }
.nav-group-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; border-radius: 4px; }
.nav-group-chev { font-size: 10px; transition: transform .15s ease; }
.nav-group.collapsed .nav-group-chev { transform: rotate(-90deg); }
.nav-group.collapsed .nav-group-items { display: none; }
.nav-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  color: var(--sidebar-text); font-size: 13.5px; text-decoration: none; width: 100%; border: 0; background: none; text-align: left;
}
.nav-link .bi { width: 18px; text-align: center; font-size: 15px; opacity: .9; }
.nav-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text-hover); }
.nav-link.active { background: var(--sidebar-active); color: var(--sidebar-text-active); box-shadow: inset 2px 0 0 var(--primary); }
.sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--sidebar-border); }
.sidebar-user { display: flex; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.sidebar-user-info { min-width: 0; }
.sidebar-user-info .name { color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info .role { font-size: 11.5px; color: var(--sidebar-text); }

.topbar {
  position: sticky; top: 0; z-index: 30; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 8px; }
.tb-btn { border: 0; background: none; color: var(--text-secondary); width: 36px; height: 36px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.tb-btn:hover { background: var(--bg-surface-secondary); color: var(--text); }
.breadcrumb-nav { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-secondary); }
.breadcrumb-nav a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb-nav a:hover { color: var(--link); }
.breadcrumb-nav .current { color: var(--text); font-weight: 500; }
.breadcrumb-nav .sep { opacity: .5; }

.main { padding: 0; }
.page-wrapper { padding: 20px 24px 40px; }
.page-wrapper h1 { font-size: 1.45rem; font-weight: 600; margin-bottom: 1rem; }
.footer { display: flex; justify-content: space-between; padding: 12px 24px; font-size: 12px; color: var(--text-muted); border-top: 1px solid var(--border-color); }

.card { border-color: var(--border-color); box-shadow: var(--shadow-card); }
.card .card-header { background: var(--bg-surface); border-bottom-color: var(--border-color); font-weight: 600; }

.sidebar-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 39; display: none; }
.sidebar-scrim.open { display: block; }

@media (min-width: 992px) {
  .sidebar { transform: none; }
  .main, .topbar, .footer { margin-left: var(--sidebar-w); }
  .sidebar-toggle { display: none; }
  .sidebar-scrim { display: none !important; }
}

/* ── theme icons ─────────────────────────────────────────────────────────── */
[data-theme="dark"] .theme-icon-light, :root:not([data-theme="dark"]) .theme-icon-dark { display: none; }

/* ── Profile Information: the authenticator QR code, its key, and the code box ───────────────── */
.auth-code { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.auth-qr { max-width: 220px; background: #fff; border-radius: 8px; padding: 8px; }
.auth-qr svg { display: block; width: 100%; height: auto; }
.auth-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .06em; word-break: break-all; background: var(--bg-surface-secondary); padding: 8px 12px; border-radius: 6px; }