:root {
  color-scheme: light;
  --ink: #190019;
  --plum: #2b124c;
  --plum-mid: #522b5b;
  --mauve: #854f6c;
  --blush: #dfb6b2;
  --cream: #fbe4d8;
  --page: #fff8f5;
  --panel: #fffdfc;
  --muted: #806c7a;
  --border: #ead8d8;
  --green: #16836b;
  --orange: #b87635;
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
}

body { background: var(--page); }

button { color: var(--plum); border-color: var(--border); background: var(--panel); }
button:hover { border-color: var(--blush); background: #fff3ef; }
button.primary, .primary { background: var(--plum); border-color: var(--plum); color: #fff; }
button.primary:hover, .primary:hover { background: var(--plum-mid); }
input, select, textarea { border-color: #e6d3d6; color: var(--ink); background: #fffdfc; }
input:focus, select:focus, textarea:focus { border-color: var(--mauve); box-shadow: 0 0 0 3px #854f6c1c; }
.eyebrow { color: var(--mauve); }

/* Login: premium plum brand panel with a warm, quiet sign-in surface. */
.login-screen { background: var(--cream); grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr); }
.login-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, #190019a8, #2b124c30),
    linear-gradient(0deg, #190019eb 0%, #19001966 44%, #19001926 72%, #19001988 100%),
    url('/static/login-scrap.png') center / cover no-repeat #2b124c;
  padding: 52px clamp(34px, 6vw, 96px);
}
.login-story::before {
  display: none;
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -5% 0 0;
  height: 40%;
  opacity: .19;
  background:
    linear-gradient(transparent 48%, #dfb6b2 49% 50%, transparent 51%),
    repeating-linear-gradient(90deg, transparent 0 7%, #dfb6b2 7.2% 7.5%, transparent 7.7% 13%),
    linear-gradient(0deg, #190019 0 20%, transparent 20%);
  clip-path: polygon(0 45%, 7% 45%, 7% 20%, 14% 20%, 14% 42%, 22% 42%, 22% 4%, 30% 4%, 30% 44%, 37% 44%, 37% 27%, 45% 27%, 45% 44%, 53% 44%, 53% 12%, 60% 12%, 60% 44%, 68% 44%, 68% 26%, 77% 26%, 77% 44%, 85% 44%, 85% 13%, 92% 13%, 92% 44%, 100% 44%, 100% 100%, 0 100%);
}
.login-story::after {
  display: none;
  content: "";
  position: absolute;
  z-index: -1;
  width: 42vw;
  height: 42vw;
  right: -20vw;
  top: 28%;
  border: 1px solid #fbe4d81c;
  border-radius: 50%;
  box-shadow: 0 0 0 38px #fbe4d80a, 0 0 0 76px #fbe4d808;
}
.login-story .wordmark { font-size: 19px; }
.login-story .wordmark b { color: var(--blush); }
.login-story .brandmark { color: var(--ink); background: var(--cream); box-shadow: 0 7px 24px #19001945; }
.login-story .eyebrow { color: var(--blush); }
.login-story h1 { max-width: 650px; font-size: clamp(40px, 4.6vw, 67px); line-height: 1.08; }
.login-story p { color: #f0dfe4; }
.story-grid { color: var(--blush); border-color: #fbe4d833; }
.story-grid b { color: #fff5f0; }
.login-story > small { color: #dfb6b2b3; }
.login-panel {
  max-width: 520px;
  padding: 58px clamp(30px, 5vw, 76px);
  background: linear-gradient(145deg, #fffaf7, var(--cream));
  border-left: 1px solid #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-panel h2 { color: var(--ink); font-size: 31px; }
.login-panel p, .login-panel small { color: var(--muted); }
.login-panel .eyebrow { color: var(--mauve); }
.login-panel form { gap: 18px; }
.login-panel label { color: var(--plum-mid); }
.login-panel input { padding: 13px 14px; border-radius: 9px; }
.login-panel .primary { box-shadow: 0 9px 22px #2b124c26; border-radius: 9px; }

/* Main system: plum navigation, warm ivory work area, rose-toned separators. */
aside { background: linear-gradient(180deg, var(--plum), var(--ink)); color: #f0dfe7; }
aside .brandmark { background: var(--cream); color: var(--ink); }
aside .wordmark small { color: var(--blush); }
aside .nav-caption { color: #c69eae; }
nav button { color: #e4cbd5; }
nav button:hover { background: #ffffff12; color: #fff; }
nav button.active { background: #854f6c; color: #fff8f5; border-left-color: var(--cream); }
.aside-bottom { color: var(--blush); }
.aside-bottom small { color: #c7a9b8; }
.workspace { background: var(--page); }
.topbar { background: #fffaf8; border-color: var(--border); }
.topbar .live-dot { background: var(--mauve); box-shadow: 0 0 0 3px #854f6c1a; }
.local-tag { border-color: var(--border); color: var(--mauve); }
.profile { background: #f5e4e4; color: var(--plum); }
main { background: var(--page); }
.page-heading .eyebrow { color: var(--mauve); }
.card, .panel, .report-card { background: var(--panel); border-color: var(--border); box-shadow: 0 4px 16px #522b5b08; }
.card.featured { background: linear-gradient(135deg, var(--plum), var(--plum-mid)); border-color: var(--plum); }
.mini-icon, .report-card .report-icon { color: var(--mauve); }
.flow-index { background: #f7e9e7; color: var(--plum-mid); }
th { color: var(--mauve); background: #fbf1ee; border-color: var(--border); }
td { border-color: #f1e5e3; }
tbody tr:hover { background: #fff6f2; }
.row-link, .report-card a { color: var(--plum-mid); }
.badge { background: #f5e9e8; color: var(--plum-mid); }
.notice { border-color: #e4c9ca; background: #fbefec; color: #68485b; }
.notice.amber { background: #fff5e9; border-color: #efd8bd; color: #8e643a; }
.app-footer { border-color: var(--border); }
.line-grid { background: #fff8f5; }
.scale-strip { background: #f7eeec; border-color: #e4c9ca; }
input[readonly] { background: #f5e9e8; border-color: var(--blush); }
.receipt-summary, .receipt-evidence-status { background: #fff8f5; }
.receipt-metric { background: #fffdfc; border-color: var(--border); }
.receipt-metric.deduction { background: #fff5e9; }
.receipt-metric.payable { background: #f4e4e9; border-color: var(--blush); }
.role-access-preview { background: #fff8f5; border-color: var(--border); }
.camera-tile, .receipt-live-tile { background: var(--ink); border-color: var(--plum-mid); }
.camera-view, .receipt-photo-grid img { background-color: #261426; }
dialog { color: var(--ink); }
.dialog-head { border-color: var(--border); }
#toast { background: var(--plum); }

@media (max-width: 720px) {
  .login-screen { grid-template-columns: 1fr; }
  .login-story { min-height: 300px; }
  .login-panel { min-height: auto; border-left: 0; border-top: 1px solid #fff; }
}

/* Official ATMZ emblem blends into the interface background. */
.atmz-brand .atmz-brand-logo{display:block;object-fit:contain;background:transparent;border-radius:10px;flex-shrink:0;max-width:100%}
aside .atmz-brand-sidebar{justify-content:center;margin-bottom:20px}
aside .atmz-brand-sidebar .atmz-brand-logo{width:110px;height:110px}
.login-story .atmz-brand-login{align-self:flex-start}
.login-story .atmz-brand-login .atmz-brand-logo{width:140px;height:140px;filter:drop-shadow(0 6px 12px #19001960)}
@media(max-width:720px){.login-story .atmz-brand-login .atmz-brand-logo{width:100px;height:100px}}

/* Keep every module reachable within the desktop viewport. */
@media (min-width:721px) {
  #app > aside { height:100vh;height:100dvh;overflow:hidden; }
  #app > aside > .wordmark,
  #app > aside > .nav-caption,
  #app > aside > .aside-bottom { flex-shrink:0; }
  #app > aside > .wordmark { padding-bottom:12px;margin-bottom:12px; }
  #app > aside > nav {
    flex:1 1 0;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    align-content:start;
    scrollbar-width:thin;
    scrollbar-color:var(--mauve) transparent;
    overscroll-behavior-y:contain;
    padding-right:4px;
  }
  #app > aside > nav::-webkit-scrollbar { width:6px; }
  #app > aside > nav::-webkit-scrollbar-thumb { background:var(--mauve);border-radius:6px; }
  #app > aside > nav button { flex-shrink:0; }
  #app > aside > .aside-bottom { margin-top:12px;padding-top:12px; }
}
/* Make the product name readable against the login photo. */
.login-story .login-system-name {
  display:block;
  font-size:clamp(18px,1.6vw,24px);
  font-weight:700;
  line-height:1.4;
  letter-spacing:1.5px;
  color:#fff;
  text-shadow:0 2px 6px #190019b3;
}
.login-language{display:flex;justify-content:flex-end;gap:8px;margin-bottom:28px;flex-wrap:wrap}
.login-language button{font-size:14px;padding:9px 14px}
.login-language button[aria-pressed=true]{background:var(--plum);border-color:var(--plum);color:#fff}
/* Larger module labels, with wrapping inside the existing sidebar. */
#nav button{font-size:15px;font-weight:600;line-height:1.4}
#nav .icon{font-size:20px;flex:0 0 20px}
@media(min-width:721px){
  #nav{grid-auto-rows:max-content}
  #nav button{white-space:normal;overflow-wrap:anywhere;padding-top:13px;padding-bottom:13px;min-height:48px}
}
@media(max-width:720px){
  #nav button{font-size:14px;flex:0 0 auto}
}
#sidebar-toggle{align-self:flex-end;flex-shrink:0;background:#ffffff12;color:#fff;border:1px solid #ffffff30;font-size:21px;line-height:1;padding:8px 10px;margin-bottom:10px}
@media(min-width:721px){
  body.sidebar-collapsed #app>aside{width:76px;padding-left:8px;padding-right:8px}
  body.sidebar-collapsed .workspace{margin-left:76px}
  body.sidebar-collapsed #app>aside>.wordmark{padding:0;margin:0 0 14px}
  body.sidebar-collapsed aside .atmz-brand-sidebar .atmz-brand-logo{width:52px;height:52px}
  body.sidebar-collapsed aside .nav-caption{display:none}
  body.sidebar-collapsed #nav button{font-size:0;gap:0;justify-content:center;padding:12px 6px;min-height:46px}
  body.sidebar-collapsed #nav button.active{padding-left:3px}
  body.sidebar-collapsed #nav .icon{font-size:22px}
}
@media(max-width:720px){
  #sidebar-toggle{float:right;margin:0}
  body.sidebar-collapsed #nav{display:none}
}