@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/barlow-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/barlow-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/barlow-semi-condensed-latin-700-normal.woff2) format("woff2"); }
/* Adoni Tech ERP - drawing-sheet look: paper, steel ink, blueprint blue; safety yellow only for priority */
:root {
  --paper: #f6f7f5;
  --sheet: #ffffff;
  --ink: #1d2b36;
  --ink-2: #4d5d6b;
  --blue: #037ac1;
  --blue-soft: #e6eef6;
  --line: #c9d1d8;
  --hair: #e3e8ec;
  --safety: #f2b705;
  --err: #b3261e;
  --ok: #2e7d4f;
  --head: "Barlow Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121a21; --sheet: #18222b; --ink: #e6ecf1; --ink-2: #9fb0bf;
    --blue: #6aa6dc; --blue-soft: #1d3346; --line: #34444f; --hair: #24313b;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--body); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Top bar */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .bar { background: #0b1116; } }
.brand { display: flex; gap: 10px; align-items: center; font: 600 18px/1 var(--head); letter-spacing: .01em; }
.bar-btn { font: 500 14px var(--body); color: #fff; background: none; border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px; padding: 6px 12px; cursor: pointer; }

main { max-width: 760px; margin: 0 auto; padding: 16px 16px 40px; }
h1 { font: 600 26px/1.15 var(--head); margin: 0 0 6px; }
h2 { font: 600 20px/1.2 var(--head); margin: 0; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.center { text-align: center; padding: 40px 0; }

/* Drawing sheet frame (login, password) */
.sheet { max-width: 440px; margin: 20px auto; background: var(--sheet); border: 2px solid var(--ink);
  position: relative; }
.sheet-inner { padding: 28px 24px 22px; position: relative; }

form label { display: block; margin-top: 16px; font: 500 14px var(--body); color: var(--ink-2); }
input { display: block; width: 100%; margin-top: 4px; padding: 12px; font: 400 17px var(--body); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
input:focus { border-color: var(--blue); outline: 1px solid var(--blue); }
.primary { display: block; width: 100%; margin-top: 22px; padding: 14px; cursor: pointer;
  font: 600 17px var(--head); letter-spacing: .02em; color: #fff; background: var(--blue); border: 0; border-radius: 4px; }
.primary:disabled { opacity: .6; }
.error { color: var(--err); min-height: 1.3em; margin: 12px 0 0; font-size: 14px; }

/* Title block - the signature element */
.tblock { display: grid; grid-template-columns: 2fr 1fr; gap: 1px; background: var(--ink); border: 2px solid var(--ink); margin-bottom: 18px; }
.tblock .cell { padding: 8px 10px 10px; background: var(--sheet); min-width: 0; }
.tblock span { display: block; font: 500 12px/1.2 var(--body); color: var(--ink-2); margin-bottom: 2px; }
.tblock b { display: block; font: 600 17px/1.25 var(--head); overflow-wrap: anywhere; }
.tblock b.big { font-size: 30px; line-height: 1; color: var(--blue); }
.tblock-foot { margin: 0; border-width: 2px 0 0; }

/* Modules */
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 26px; }
.module { display: flex; gap: 12px; align-items: center; padding: 14px; text-decoration: none; color: var(--ink);
  background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; }
.module:hover { border-color: var(--blue); }
.module svg { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 6px; background: var(--blue-soft); color: var(--blue); }
.module b { display: block; font: 600 17px/1.2 var(--head); }
.module span { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-2); }

@media (max-width: 639px) {
  .modules { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .module { flex-direction: column; gap: 6px; padding: 12px 6px; text-align: center; }
  .module span { display: none; }
}

/* Pending work */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.seg { display: flex; gap: 0; overflow-x: auto; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--sheet); scrollbar-width: none; }
.seg button { flex: 1 0 auto; white-space: nowrap; padding: 9px 12px; font: 500 14px var(--body); color: var(--ink-2);
  background: none; border: 0; border-right: 1px solid var(--hair); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-selected="true"] { background: var(--ink); color: #fff; }
@media (prefers-color-scheme: dark) { .seg button[aria-selected="true"] { background: var(--blue); color: #0b1116; } }
.seg .n { font-weight: 600; margin-left: 6px; font-variant-numeric: tabular-nums; }

.note { padding: 14px 16px; background: var(--sheet); border: 1px dashed var(--line); border-radius: 6px; }

.tasks { list-style: none; margin: 0; padding: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; }
.tasks:empty { display: none; }
.task { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--hair); position: relative; }
.task:last-child { border-bottom: 0; }
.task.pri::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: repeating-linear-gradient(-45deg, var(--safety) 0 6px, var(--ink) 6px 12px); }
.task .cust { font: 600 17px/1.25 var(--head); }
.task .val { font: 600 15px var(--head); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.task .item { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); }
.task .txt { grid-column: 1 / -1; font-size: 14px; }
.task .kind { color: var(--blue); font-weight: 600; }
.task .acts { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
.task .acts a { font: 500 14px var(--body); text-decoration: none; color: var(--blue); border: 1px solid var(--line);
  border-radius: 4px; padding: 6px 12px; }
.pri-label { font: 600 12px var(--body); color: #6b4e00; background: #fdf0c2; border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
@media (prefers-color-scheme: dark) { .pri-label { color: #1d2b36; background: var(--safety); } }
.more { display: block; width: 100%; margin-top: 10px; padding: 11px; font: 500 15px var(--body); color: var(--blue);
  background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }

/* Paresh / Vidya overview */
#summary { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin-bottom: 12px; overflow-x: auto; }
#summary h3 { font: 600 17px var(--head); margin: 0 0 6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { font: 500 13px var(--body); color: var(--ink-2); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ink); }
td { padding: 7px 8px; border-bottom: 1px solid var(--hair); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }

#adminBox, #ownersBox { margin-top: 26px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }
#adminBox summary, #ownersBox summary { cursor: pointer; font: 600 18px var(--head); min-height: 32px; }
.owners { list-style: none; margin: 8px 0 0; padding: 0; }
.owners > li { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.og-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.og-head b { font: 600 16px var(--head); margin-right: 6px; }
.og-head .muted { display: block; }
.og-own { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.who { font: 600 14px var(--head); padding: 4px 10px; border-radius: 4px; background: var(--blue-soft); color: var(--blue); }
.who.hold { background: #fdf0c2; color: #6b4e00; }
.imp { font: 600 12px var(--body); padding: 1px 6px; border: 1px solid var(--ink-2); border-radius: 3px; color: var(--ink-2); }
.og-edit, .og-acts button { min-height: 40px; font: 500 14px var(--body); padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--blue); cursor: pointer; }
.og-form { margin-top: 10px; padding: 12px; background: var(--paper); border-radius: 6px; }
.og-form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.og-form legend { width: 100%; margin-bottom: 4px; }
.pick { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--sheet); font-size: 15px; }
.pick input { width: 18px; height: 18px; margin: 0; }
.og-form label.small { display: block; margin-top: 10px; color: var(--ink-2); }
.og-acts { display: flex; gap: 8px; margin-top: 10px; }
.og-acts .save { background: var(--blue); color: #fff; border-color: var(--blue); }
.hist-h { font: 600 15px var(--head); margin: 16px 0 6px; }
.hist { margin: 0; padding-left: 18px; font-size: 14px; }
.hist li { margin-bottom: 4px; }
.users button { font: 500 13px var(--body); padding: 5px 10px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--ink); cursor: pointer; }
.ok { color: var(--ok); } .warn { color: #a0521a; }

@media (min-width: 640px) {
  .home .tblock { grid-template-columns: 2fr 1fr 2fr 1fr; }
  h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Touch: comfortable targets on phones, tablets and touch monitors */
.bar-btn, .seg button, .module, .more, .users button, .task .acts a, .primary { min-height: 44px; }
.task .acts a { display: inline-flex; align-items: center; }
@media (pointer: coarse) { .seg button { padding: 11px 14px; } }

/* Tablet portrait: modules in 3 columns */
@media (min-width: 640px) {
  main { max-width: 900px; padding: 20px 24px 48px; }
  .modules { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
/* Tablet landscape, computers, touch monitors: two columns */
@media (min-width: 1024px) {
  main { max-width: 1280px; padding: 24px 32px 56px; }
  .home { display: grid; grid-template-columns: 340px 1fr; gap: 28px; align-items: start; }
  .side { position: sticky; top: 72px; }
  .home > .flash { grid-column: 1 / -1; margin-bottom: 0; }
  .home .tblock { grid-template-columns: 1fr 1fr; }
  .home .tblock .cell.wide { grid-column: span 2; }
  .home .tblock .cell:nth-child(1) { order: 0; }
  .home .tblock .cell:nth-child(2) { order: 1; }
  .home .tblock .cell:nth-child(4) { order: 2; }
  .home .tblock .cell:nth-child(3) { order: 3; }
  .home .modules { grid-template-columns: 1fr; }
  .task { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Screen guard: watermark + no printing on protected screens */
.sg-mark { position: fixed; inset: 0; z-index: 50; pointer-events: none; background-repeat: repeat; }
@media (prefers-color-scheme: dark) { .sg-mark { filter: invert(1); } }
@media print { .sg-protected body { display: none !important; } }
.sg-protected #app { -webkit-user-select: none; user-select: none; }
.sg-protected input, .sg-protected textarea { -webkit-user-select: text; user-select: text; }

/* Avatars */
.av { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; object-fit: cover;
  color: #fff; font: 600 15px/1 var(--head); width: 32px; height: 32px; }
.av-sm { width: 22px; height: 22px; font-size: 10px; margin-right: 6px; vertical-align: middle; }
.av-md { width: 36px; height: 36px; font-size: 14px; }
.av-lg { width: 52px; height: 52px; font-size: 20px; }
.av-xl { width: 128px; height: 128px; font-size: 46px; }
.namecell { display: flex; gap: 10px; align-items: center; }
.av-btn { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; position: relative; min-height: 0; }
.av-btn::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f5f99' stroke-width='2.4'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3C/svg%3E") center/11px no-repeat;
  border: 1px solid var(--line); }
.who { display: inline-flex; align-items: center; }
.urow { display: flex; gap: 10px; align-items: center; }

dialog#picDlg { border: 2px solid var(--ink); border-radius: 6px; padding: 22px; width: min(420px, calc(100vw - 32px));
  background: var(--sheet); color: var(--ink); }
dialog#picDlg::backdrop { background: rgba(29, 43, 54, .55); }
.pic-preview { display: flex; justify-content: center; margin: 14px 0; }
.pic-upload { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px dashed var(--blue);
  border-radius: 6px; color: var(--blue); font: 600 16px var(--head); cursor: pointer; }
.pic-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pic-upload:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.swatches { border: 0; padding: 0; margin: 14px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.swatches legend { width: 100%; margin-bottom: 6px; }
.sw { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; padding: 0; }
.sw[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--sheet); }
.link { background: none; border: 0; color: var(--blue); font: 500 14px var(--body); padding: 10px 0; cursor: pointer; text-decoration: underline; }
.pic-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }
.pic-acts button { min-height: 44px; padding: 8px 16px; border-radius: 4px; font: 600 15px var(--head); cursor: pointer; border: 1px solid var(--line); background: none; color: var(--ink); }
.pic-acts .save { background: var(--blue); border-color: var(--blue); color: #fff; }
.av-c0{background:#1f5f99}.av-c1{background:#4d5d6b}.av-c2{background:#2e7d4f}.av-c3{background:#a0521a}.av-c4{background:#6b3f87}.av-c5{background:#1c7c7d}
.tblock span.av { display: inline-flex; margin: 0; color: #fff; font: 600 20px/1 var(--head); }

/* Owned by you: nameplates (like the plate riveted on every buffer) */
.owned, .week { margin: 0 0 22px; }
.owned h2, .week h2 { margin-bottom: 10px; }
.plate { position: relative; margin-bottom: 10px; padding: 12px 18px 12px; border-radius: 4px; color: #1d2b36;
  background: linear-gradient(180deg, #eef1f3 0%, #d9dfe4 100%); border: 1px solid #aab4bd; box-shadow: inset 0 1px 0 #fff; }
.plate::before, .plate::after { content: ""; position: absolute; top: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #8d98a2 70%); }
.plate::before { left: 7px; } .plate::after { right: 7px; }
.plate-top { display: flex; align-items: center; gap: 8px; }
.plate-top b { font: 700 17px/1.2 var(--head); letter-spacing: .02em; }
.plate-owner { font: 500 13px var(--body); color: #4d5d6b; margin: 2px 0 8px; }
.plate dl { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0; margin: 0; border-top: 1px solid #aab4bd; padding-top: 8px; }
.plate dl div + div { border-left: 1px solid #aab4bd; padding-left: 10px; }
.plate dt { font: 500 11px var(--body); color: #4d5d6b; }
.plate dd { margin: 0; font: 700 18px/1.2 var(--head); font-variant-numeric: tabular-nums; }
@media (prefers-color-scheme: dark) { .plate { background: linear-gradient(180deg, #2a3843, #1f2a33); color: #e6ecf1; border-color: #3d4e5b; box-shadow: none; }
  .plate-owner, .plate dt { color: #9fb0bf; } .plate dl, .plate dl div + div { border-color: #3d4e5b; } }

/* Coming week + flash */
.week ul, .flash ul { list-style: none; margin: 0; padding: 0; }
.week li, .flash li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.week li:last-child, .flash li:last-child { border-bottom: 0; }
.week li > div, .flash li > div { flex: 1; min-width: 0; }
.week li b, .flash li b { display: block; font: 600 15px/1.25 var(--head); }
.wish { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line);
  border-radius: 4px; color: var(--blue); text-decoration: none; font: 500 14px var(--body); }
.week { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }

.flash { position: relative; overflow: hidden; margin-bottom: 18px; padding: 16px 16px 12px; border: 2px solid var(--ink);
  background: var(--sheet); }
.flash::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
  background: repeating-linear-gradient(-45deg, var(--safety) 0 10px, var(--ink) 10px 20px); }
.flash h2 { font-size: 24px; margin: 6px 0 6px; }
.flash.mine h2 { color: var(--blue); }
.flash-close { position: absolute; top: 14px; right: 12px; min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--sheet); color: var(--ink); font: 500 13px var(--body); cursor: pointer; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti::before, .confetti::after { content: ""; position: absolute; top: -20px; width: 100%; height: 20px;
  background: radial-gradient(circle, var(--safety) 3px, transparent 4px) 0 0/38px 20px, radial-gradient(circle, var(--blue) 3px, transparent 4px) 19px 10px/38px 20px;
  animation: fall 2.4s ease-in 1 forwards; }
.confetti::after { animation-delay: .5s; opacity: .7; }
@keyframes fall { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(260px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* Dates dialog */
.link.mini { padding: 2px 0; font-size: 13px; min-height: 0; }
dialog#datesDlg { border: 2px solid var(--ink); border-radius: 6px; padding: 22px; width: min(560px, calc(100vw - 24px));
  background: var(--sheet); color: var(--ink); max-height: 92vh; }
dialog#datesDlg::backdrop { background: rgba(29, 43, 54, .55); }
.drow { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.drow > b { display: block; font: 600 16px var(--head); margin-bottom: 6px; }
.dfields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dfields select, .dfields input[name$=".year"], .drow.kid > input { min-height: 44px; padding: 8px; font: 400 16px var(--body); border: 1px solid var(--line);
  border-radius: 4px; background: var(--paper); color: var(--ink); }
.dfields input[name$=".year"] { width: 84px; }
.drow.kid > input { width: 100%; margin-bottom: 6px; }
.share { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); min-height: 44px; }
.share input { width: 18px; height: 18px; }
.spouse { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.kids-h { font: 600 16px var(--head); margin: 14px 0 0; }

/* Logos */
.brand img { display: block; height: 24px; width: auto; }
.brand span { font: 600 18px/1 var(--head); color: rgba(255,255,255,.75); padding-left: 8px; border-left: 1px solid rgba(255,255,255,.35); }
.sheet-logo { display: block; width: 190px; height: auto; margin: 0 0 18px; }
@media (prefers-color-scheme: dark) { .sheet-logo { filter: brightness(1.35); } }
.plate-co { display: flex; align-items: center; gap: 6px; margin-left: auto; font: 500 11px var(--body); color: #4d5d6b; }
.plate-co img { width: 26px; height: 26px; }
@media (prefers-color-scheme: dark) { .plate-co { color: #9fb0bf; } }
.plate-top { padding-right: 14px; }