/* Crafts N Creations Web Admin — desktop window on a "desk", 240px sidebar + content. */
body{background:var(--desk)}

.desk{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;
  padding:40px 24px 64px;
}
.desk__head{text-align:center;margin-bottom:26px;max-width:680px}
.desk__kicker{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:3px;color:var(--gold);text-transform:uppercase}
.desk__head h1{font-family:'Playfair Display',serif;font-weight:600;font-size:36px;color:var(--tp);margin:10px 0 6px}
.desk__head p{color:var(--ts);font-size:13px;line-height:1.6;margin:0}

/* The application window */
.window{
  width:min(1440px, 100%);
  height:min(880px, calc(100vh - 60px));
  background:var(--bg);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 70px rgba(17,24,39,.16);
  border:1px solid var(--div);
  position:relative;
}

/* Login overlay */
.login-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.login-wrap .grain{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(114,6,18,.05) 1px,transparent 1px);background-size:22px 22px}

/* App shell (sidebar + content) */
.shell{position:absolute;inset:0;display:none}
.shell.active{display:flex}
.login-screen.hidden{display:none}

/* Sidebar */
.sidebar{width:240px;flex-shrink:0;height:100%;background:var(--surface);border-right:1px solid var(--div);display:flex;flex-direction:column}
.sidebar__brand{padding:22px 20px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--div)}
.sidebar__nav{flex:1;padding:12px 0;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 20px;cursor:pointer;font-size:14px;
          border-left:3px solid transparent;color:var(--ts);font-weight:400}
.nav-item .dot{width:5px;height:5px;flex-shrink:0;background:var(--border)}
.nav-item:hover{background:rgba(114,6,18,.04)}
.nav-item.active{border-left-color:var(--gold);background:rgba(114,6,18,.09);color:var(--gold-lt);font-weight:600}
.nav-item.active .dot{background:var(--gold)}
.sidebar__foot{padding:16px 20px;border-top:1px solid var(--div);display:flex;align-items:center;gap:11px;cursor:pointer}

/* Content region */
.content{flex:1;position:relative;overflow:hidden}
.apage{display:none;width:100%;height:100%}
.apage.active{display:flex}
.sv{scrollbar-width:thin}
.sv::-webkit-scrollbar{width:8px;height:8px}
.sv::-webkit-scrollbar-thumb{background:#cfcecb;border-radius:4px}
.sv::-webkit-scrollbar-track{background:transparent}

/* Invoice tabs */
.inv-tab{border-radius:6px;padding:8px 14px;font-size:12px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--ts)}
.inv-tab.active{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
.inv-doc{display:none}
.inv-doc.active{display:block}

/* Modals */
.modal-overlay{display:none;position:absolute;inset:0;background:rgba(0,0,0,.6);align-items:center;justify-content:center;z-index:100}
.modal-overlay.active{display:flex}
.modal{display:none}
.modal.active{display:block}

/* ---- Print: show only the active invoice/dispatch document ---- */
@media print {
  .desk__head, .desk__sidebar, .sidebar, .anav, .inv-tab, .noprint,
  .desk__nav, nav, [data-logout] { display: none !important; }
  .desk, .desk__body, .apage, .sv { all: unset !important; display: block !important; }
  .apage:not(.active) { display: none !important; }
  .inv-doc { display: none !important; }
  .inv-doc.active { display: block !important; box-shadow: none !important; }
  .inv-doc.active > div { box-shadow: none !important; margin: 0 auto !important; }
  body { background: #fff !important; }
}