/* ==================================================================
   Deception Check — Shopkeep (App CSS)
   Restructured for readability
   - Variables & Base
   - Header/Footer
   - App Layout (Option B: .app-wrap)
   - Components (tables, tags, modals, etc.)
   - Print Styles
   ================================================================== */

/* ========== Variables & Base ========== */

/* Full-viewport base */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body.has-fixed-header {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.35 system-ui, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* ========== App Layout (Option B) ========== */
.app-wrap {
  flex: 1;                 /* fill remaining height under header/banner */
  display: flex;           /* two columns: sidebar + main */
  gap: 10px;
  padding: 6px;
  width: 100%;
  box-sizing: border-box;
}

.app-wrap > aside.col {
  width: 320px;            /* fixed controls sidebar */
  flex-shrink: 0;
}

.app-wrap > main.col {
  flex: 1;                 /* rest of the space */
  min-width: 0;            /* allow wide tables to shrink */
}

/* Optional: constrain header content only (footer uses its own wrap) */
.site-header .wrap.nav {
  max-width: 1200px;
  margin: 0 auto;
}

/* Banner */
.banner {
  background: rgba(234, 179, 8, .12);
  border-bottom: 1px solid rgba(250, 204, 21, .35);
  color: #facc15;
  padding: 8px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
}


/* ========== Rest of Component Styles (cleaned) ========== */

.banner {
background: rgba(234, 179, 8, .12);
 /* soft yellow background */
  border-bottom: 1px solid rgba(250, 204, 21, .35);
  color: #facc15;
 /* bright yellow text */
  padding: 8px 12px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
}

    :root {
--bg:#0b0b0d;
--panel:#121217;
--muted:#8b95a7;
--text:#e7ecf3;
--acc:#6ee7ff;
--card:#11141a;
--border:#222839;
--chip:#1b2131}

    * {
box-sizing:border-box}

html,body {
height:100%}

body {
margin:0;
background:var(--bg);
color:var(--text);
font:14px/1.35 system-ui,Segoe UI,Roboto,Inter,Arial}

    .page-header {
    position:sticky;
    top:0;
    background:linear-gradient(180deg,var(--panel),rgba(21,25,35,.85));
    backdrop-filter:blur(6px);
    z-index:5;
    border-bottom:1px solid var(--border);
    text-align:center}

    .page-header h1 {
    margin:0;
    padding:12px 14px;
    font-size:22px;
    letter-spacing:.4px}

    .wrap {
display:grid;
grid-template-columns:320px 1fr;
gap:10px;
padding:6px}

    .col {
background:var(--panel);
border:1px solid var(--border);
border-radius:10px}

    .col h2 {
font-size:13px;
margin:0;
padding:8px 10px;
border-bottom:1px solid var(--border);
color:#cfe7ff;
text-align:center}

    .section {
padding:6px 8px}

    .row {
display:flex;
gap:6px;
align-items:center;
flex-wrap:wrap;
margin-bottom:6px}

    .row.tight {
gap:4px;
margin-bottom:4px}

    .row>label {
font-size:11px;
color:var(--muted)}

    input[type=text],input[type=number],select,textarea {
background:var(--card);
border:1px solid var(--border);
color:var(--text);
padding:4px 6px;
border-radius:6px;
outline:none;
width:100%;
font-size:12px}

    input[type=number] {
max-width:100%}

input[type=range] {
accent-color:var(--acc)}

    button {
background:var(--chip);
border:1px solid var(--border);
color:var(--text);
padding:4px 8px;
border-radius:6px;
cursor:pointer;
font-size:12px}

    button.primary {
background:#1b2744;
border-color:#2a3a66}

    button.warn {
background:#3a2f12;
border-color:#6a5320;
color:#ffd889}

    button.danger {
background:#47202a;
border-color:#6a2a36;
color:#ffc1c7}

    .muted {
color:var(--muted)}

.grow {
flex:1}

    table {
width:100%;
border-collapse:collapse}

    th,td {
padding:4px;
border-bottom:1px solid var(--border);
vertical-align:top;
text-align:center;
font-size:12px}

    th {
position:sticky;
top:0;
background:var(--panel);
z-index:2}

    #stockTable th.coin-head {
font-size:11px;
text-transform:uppercase;
letter-spacing:.6px;
padding:6px 2px;
border-left:1px solid var(--border)}

    #stockTable td.coin-col {
width:64px;
min-width:60px;
padding:6px 4px;
vertical-align:middle;
border-left:1px solid var(--border)}

    #stockTable td.coin-col input {
padding:2px 4px;
font-size:11px;
text-align:center;
min-width:0}

    .right {
text-align:center}

    tr:hover {
background:#111725}

.tag {
display:inline-flex;
align-items:center;
gap:4px;
background:var(--chip);
border:1px solid var(--border);
padding:2px 6px;
border-radius:999px;
font-size:11px}

    .tag.rarity {
border-width:0;
font-weight:600;
color:#f9fafb}

    .rarity-common {
background:#4b5563}

    .rarity-uncommon {
background:#047857}

    .rarity-rare {
background:#1d4ed8}

    .rarity-very-rare {
background:#7c3aed}

    .rarity-legendary {
background:#ea580c}

    .rarity-default {
background:var(--chip);
color:var(--text)}

    .cards {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:8px}

    .card {
background:var(--card);
border:1px solid var(--border);
border-radius:10px;
padding:8px}

    .sticky-actions {
position:sticky;
bottom:0;
display:flex;
gap:6px;
padding:8px;
background:linear-gradient(0deg,var(--panel),transparent);
border-top:1px solid var(--border)}

    .mono {
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

    details {
border:1px solid var(--border);
border-radius:8px;
background:var(--card)}

details>summary {
cursor:pointer;
padding:6px 8px;
color:#bfe3ff;
font-size:12px}

    .hr {
height:1px;
background:var(--border);
margin:6px 0}

    .drop {
border:2px dashed #2a3550;
background:#0f1422;
border-radius:10px;
padding:8px;
text-align:center;
user-select:none;
font-size:12px}

    .drop.drag {
background:#0c1a33}

    .hidden {
display:none}

    .modalWrap {
position:fixed;
inset:0;
background:rgba(0,0,0,.6);
display:none;
align-items:center;
justify-content:center;
padding:12px;
z-index:50}

    .modal {
background:var(--panel);
border:1px solid var(--border);
border-radius:10px;
max-width:520px;
width:100%;
padding:12px}

    .modalHeader {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
font-size:13px}

    .grid2 {
display:grid;
grid-template-columns:1fr 1fr;
gap:8px}

    .itemControls {
display:flex;
gap:6px;
align-items:center;
flex-wrap:wrap}

    .itemControls button {
flex-shrink:0}

    .coin {
display:grid;
grid-template-columns:48px 42px 42px;
gap:6px;
justify-content:center}

    .coin input {
padding:2px 4px;
font-size:11px;
text-align:center;
min-width:0}

    #stockTable input.qty {
width:46px;
font-size:11px}

    #stockTable textarea.desc,#stockTable textarea.note {
width:100%;
height:64px;
resize:vertical;
font-size:12px}

    #stockTable th:last-child,#stockTable td:last-child {
width:18%}

    .weights label {
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
font-size:12px;
margin-bottom:4px}

    .weights input[type=range] {
flex:1;
margin-left:6px}

    @media print {
@page {
size:letter portrait;
margin:0.5in}

      body {
background:#fff;
color:#000}

      header,.wrap>.col:first-child,.sticky-actions,main>h2:first-of-type,main>.section:first-of-type {
display:none!important}

      .wrap {
display:block}

      .col {
border:none;
box-shadow:none;
background:transparent}

      .cards {
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:18px}

      .card {
background:#fff;
border:1px solid #000;
color:#000;
padding:18px;
break-inside:avoid;
page-break-inside:avoid;
min-height:320px}

      .card .row {
margin-bottom:10px}

      .tag {
background:#fff;
border:1px solid #000;
color:#000}

      .rarity-common,.rarity-uncommon,.rarity-rare,.rarity-very-rare,.rarity-legendary,.rarity-default {
background:#fff;
color:#000}

    }

  
.pill.mini {
font-size:11px;
 opacity:0.8;
 padding-right:2px}

#priceAdj {
text-align:right }

.site-header {
height: 64px;
               /* taller header bar */
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--panel), #0b0b0d);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap.nav {
display: flex;
  justify-content: space-between;
  align-items: center;
  width: 44%;
  max-width: 1200px;
          /* keeps content aligned */
  margin: 0 auto;
  padding: 0 1.5rem;          
}

.site-header .brand {
display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.0rem;
}

.site-header .nav-links {
display: flex;
  gap: 1.5rem;
  margin-left: 2rem;
  font-size: 1.0rem;          
}

.site-header .donate {
margin-left: auto;
}

.site-footer {
text-align: center;
}

.site-footer .wrap,
.site-footer .max-w-7xl {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

/* removed global .wrap override to preserve header/footer */


/* ==================================================================
   Header Fix Override (Pinned + Stable Height)
   ================================================================== */
:root {
  --header-h: 80px; /* adjust thickness as needed */
}

.site-header {
  position: fixed !important;  /* pin at top */
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  flex: 0 0 var(--header-h);   /* prevent shrinking */
  z-index: 1000;
}

.site-header .wrap.nav {
  height: 100%;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}

body.has-fixed-header {
  padding-top: var(--header-h); /* ensure app sits below header */
}