/*
 * © 2026 יגאל חביב חשמל ותעשיות בע״מ. כל הזכויות שמורות. אסור להעתיק, להפיץ או לשנות ללא אישור בכתב.
 * Copyright (c) 2026 Yigal Habib Electric and Industries Ltd. All rights reserved. Do not copy, distribute or modify without written permission.
 */
:root {
  --blue: #0a808c; --blue-d: #066670; --green: #2a9d4a; --red: #c0392b; --amber: #b45309;
  --ink: #0b3a4a; --muted: #4d6b73; --bg: #f3f7f7; --card: #fff; --line: #d5e3e3; --side: #0b3a4a;
}
.login .logo { display: block; width: 190px; margin: 0 auto 8px; }
.side { display: flex; flex-direction: column; overflow-y: auto; }
.side .logo { display: block; width: 190px; margin: 0 auto 18px; flex: none; }
.side .side-foot { margin-top: auto; padding-top: 14px; }
.side a, .side .bell, #storage { flex: none; }
@media (max-height: 820px) { .side .logo { width: 130px; margin-bottom: 8px; } .side a { padding: 8px 14px; } }
.side a { border-radius: 10px; padding: 11px 14px; }
.side a .lbl { display: flex; align-items: center; gap: 10px; }
.side a svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
th { background: #e8f1f1; }
td .tag, .tag { padding: 2px 10px; }
.card.empty { text-align: center; padding: 36px 16px; }
.card.empty img { width: 80px; height: 80px; display: block; margin: 0 auto 8px; } .card.empty h3 { margin: 0 0 4px; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-bg { animation: fadein .15s ease-out; } .modal { animation: pop .2s ease-out; }
.main > * { animation: fadein .2s ease-out; }
button { transition: background .15s, transform .08s; } button:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; } .chips:empty { display: none; }
.chips .tag { margin: 0; white-space: nowrap; }
/* a light grey line between one log and the next */
tr.row td { border-bottom: 2px solid #cfd6d6; }
/* the small bubbles in the log table get a black outline so they stand apart on the coloured rows */
td .tag.wait, td .tag.pic, td .tag.note, .lastedit.sm { border: 1px solid rgba(11, 58, 74, .5); box-shadow: 0 0 0 2px rgba(11, 58, 74, .12), 0 1px 4px rgba(11, 58, 74, .18); }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 Heebo, "Segoe UI", system-ui, Arial, sans-serif; background: var(--bg); color: var(--ink); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 8px; padding: 8px 16px; background: var(--blue); color: #fff; font-weight: 600; }
button:hover { background: var(--blue-d); }
button.ghost { background: #fff; color: var(--blue); border: 1.5px solid var(--blue); }
button.ghost:hover { background: #e3f3f4; }
button.red { background: var(--red); } button.green { background: var(--green); }
button.sm { padding: 4px 10px; font-size: 14px; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
textarea { width: 100%; min-height: 90px; }
label { font-weight: 600; font-size: 14px; color: var(--muted); display: block; margin: 10px 0 4px; }

.login { max-width: 380px; margin: 12vh auto; background: var(--card); padding: 32px; border-radius: 16px; box-shadow: 0 4px 20px #0002; }
.login h1 { margin-top: 0; } .login input { width: 100%; margin-bottom: 12px; } .login button { width: 100%; padding: 12px; }
.err { color: var(--red); font-weight: 600; margin-bottom: 10px; }

.app { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
.side { background: var(--side); color: #fff; padding: 20px 12px; position: sticky; top: 0; height: 100vh; }
.side h2 { font-size: 20px; margin: 0 8px 20px; }
.side a { display: flex; justify-content: space-between; align-items: center; color: #d6ebee; padding: 10px 12px; border-radius: 8px; text-decoration: none; cursor: pointer; margin-bottom: 4px; }
.side a.on, .side a:hover { background: #0a808c; color: #fff; }
.badge { background: var(--red); color: #fff; border-radius: 99px; padding: 0 8px; font-size: 13px; font-weight: 700; }
.main { padding: 24px 28px; min-width: 0; }
.main h1 { margin: 0 0 16px; font-size: 26px; }

.bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; background: var(--card); padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; box-shadow: 0 1px 3px #0001; }
.bar > div label { margin: 0 0 2px; }
.card { background: var(--card); border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px #0001; margin-bottom: 14px; }
table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px #0001; }
th, td { padding: 10px 12px; text-align: start; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: #f6f8fb; font-size: 14px; color: var(--muted); }
tr.row { cursor: pointer; } tr.row:hover td { background: #eef7f7; }
tr.group td { background: #dcecec; font-weight: 700; font-size: 17px; cursor: default; }
/* row colour: red = customer has not signed, yellow = signed but not approved by the office, green = signed and approved */
tr.row.rowred td { background: #fee2e2; } tr.row.rowred:hover td { background: #fecaca; }
tr.row.rowyellow td { background: #fef3c7; } tr.row.rowyellow:hover td { background: #fde68a; }
tr.row.rowgreen td { background: #dcfce7; } tr.row.rowgreen:hover td { background: #bbf7d0; }
/* a log nobody has opened yet: a blue stripe at the edge of the row (the row colour stays about status) */
tr.fresh td:first-child { box-shadow: inset -6px 0 0 #2563eb; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; margin: 0 0 10px; color: var(--muted); }
.legend .dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-inline-end: 5px; border: 1px solid #0003; }
.dot.red { background: #fee2e2; } .dot.yellow { background: #fef3c7; } .dot.green { background: #dcfce7; } .dot.blue { background: #2563eb; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 99px; margin-inline-end: 4px; }
.tag.edit { background: #fee2e2; color: var(--red); } .tag.new { background: #dcfce7; color: var(--green); } .tag.off { background: #e2e8f0; color: var(--muted); }

.lastedit { color: #6b4e00; background: #fff6d6; border-radius: 8px; padding: 4px 10px; font-weight: 600; margin: 4px 0 10px; display: inline-block; }
.lastedit.sm { font-size: 12px; font-weight: 500; padding: 1px 6px; margin: 4px 0 0; display: block; }
.tag.wait { background: #fef3c7; color: #92400e; } .tag.rej { background: #fee2e2; color: #b91c1c; }
.review { border-radius: 12px; padding: 10px 14px; margin: 8px 0 14px; } .review .actions { margin-top: 8px; }
.review.wait { background: #fff7d6; border: 2px solid #f5c542; } .review.rej { background: #fee2e2; border: 2px solid #f1a1a1; } .review.ok { background: #e6f8ee; color: #166534; }
#storage { margin: 14px 8px 0; padding: 8px 10px; border-radius: 8px; background: #14505f; color: #d6ebee; font-size: 14px; line-height: 1.35; }
#storage small { color: #9fb7d3; } #storage.warn { background: #92400e; color: #fff; } #storage.critical { background: #b91c1c; color: #fff; }
#storage.warn small, #storage.critical small { color: #ffe8d1; }
.storagebar { border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: 16px; }
.storagebar.warn { background: #fff4d6; border: 2px solid #f5a623; } .storagebar.critical { background: #fee2e2; border: 2px solid #dc2626; }
.tag.pic { background: #e0f2fe; color: #075985; }
.gallery { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
.gp { position: relative; width: 120px; height: 120px; border-radius: 10px; overflow: hidden; background: #e2e8f0; }
.gp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp .x { position: absolute; top: 4px; inset-inline-end: 4px; width: 26px; height: 26px; padding: 0; border-radius: 99px; background: #c0392b; font-size: 12px; }
.tag.sign { background: #ede9fe; color: #5b21b6; }
.review.sign { background: #f3efff; border: 2px solid #b9a7f0; }
.tag.note { background: #ede9fe; color: #6d28d9; }
.tag.chg { background: #fef3c7; color: var(--amber); }
.change { background: #fff8e1; border: 2px solid #f5c542; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; }
table.diff { box-shadow: none; margin: 8px 0; } table.diff td { white-space: pre-wrap; }
.frow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .frow.sub { padding-inline-start: 24px; }
.selbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #e3f3f4; border-radius: 10px; padding: 8px 14px; margin-bottom: 10px; }
.selbar span { margin-inline-end: auto; } button:disabled { background: #a8b3bf; cursor: not-allowed; }
input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }
.who { display: flex; gap: 10px; margin-bottom: 14px; } .who button { flex: 1; padding: 12px; font-size: 18px; } .who button.on { background: var(--blue); color: #fff; }
.comment { background: #f4f0ff; border-inline-start: 4px solid #7c5cd6; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.comment small { color: var(--muted); } .comment .x { float: inline-end; background: none; color: var(--red); padding: 0 6px; }
.sumbox { background: #eef6ff; border: 2px solid #b9d7f5; border-radius: 12px; padding: 12px 16px; margin-top: 14px; }
.sumbox .line { display: flex; justify-content: space-between; padding: 2px 0; } .sumbox .tot { font-size: 20px; font-weight: 800; border-top: 2px solid #b9d7f5; margin-top: 6px; padding-top: 6px; }
.wrow label.nc { display: flex; gap: 6px; align-items: center; margin: 0; white-space: nowrap; color: var(--ink); font-weight: 500; } .wrow label.nc input { width: auto; }
.wrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 8px; margin-bottom: 6px; align-items: center; } .wrow input { width: 100%; }
.folders { margin-bottom: 14px; }
.folder { background: var(--card); border: 2px dashed var(--line); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.folder.on { border-color: var(--blue); background: #e3f3f4; } .folder.over { border-color: var(--green); background: #e6f8ee; border-style: solid; }
.folder small { color: var(--muted); font-weight: 400; }

.modal-bg { position: fixed; inset: 0; background: #0007; display: grid; place-items: start center; overflow: auto; padding: 30px 12px; z-index: 50; }
.modal { background: var(--card); border-radius: 16px; width: min(860px, 100%); padding: 24px; }
.modal h2 { margin-top: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--line); margin: 14px 0 12px; }
.tab { background: none; color: var(--muted); border-radius: 8px 8px 0 0; padding: 9px 16px; font-weight: 600; margin-bottom: -2px; border-bottom: 3px solid transparent; }
.tab:hover { background: #e3f3f4; color: var(--ink); } .tab.on { color: var(--blue); border-bottom-color: var(--blue); background: #eaf6f7; }
.pane { display: none; } .pane.on { display: block; animation: fadein .15s ease-out; }
.trbox { background: #eef6f7; border: 1px solid #b9dcdf; border-inline-start: 4px solid var(--blue); border-radius: 10px; padding: 10px 14px; margin: 8px 0 12px; }
.trinline { margin: 6px 0 4px; padding: 6px 10px; background: #eef6f7; border-inline-start: 3px solid var(--blue); border-radius: 6px; font-size: 14px; white-space: pre-wrap; }
html[data-theme="dark"] .trinline { background: #1b3139; }
.trbox .trline { margin-top: 4px; white-space: pre-wrap; }
.tag.tr { background: #e3f3f4; color: var(--blue-d); font-weight: 500; }
.trusage { margin: 8px 8px 0; padding: 6px 10px; border-radius: 8px; background: #14505f; color: #d6ebee; font-size: 12px; line-height: 1.4; flex: none; }
html[data-theme="dark"] .trbox { background: #1b3139; border-color: #2e5560; }
.signmeta { font-size: 12px; color: var(--muted); margin-top: 4px; }
html[data-theme="dark"] .tab:hover, html[data-theme="dark"] .tab.on { background: #1d343c; }
.sec { margin: 26px 0 4px; padding: 6px 12px; background: #eaf3f3; border-inline-start: 4px solid var(--blue); border-radius: 6px; font-size: 16px; color: var(--ink); }
.sec.first { margin-top: 12px; }
.actions.stickybar { position: sticky; bottom: 0; margin: 22px -24px -24px; padding: 12px 24px; background: var(--card); border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; box-shadow: 0 -6px 12px -8px #0b3a4a33; z-index: 2; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .grid2 input, .grid2 select { width: 100%; }
.teamgrid { display: flex; flex-wrap: wrap; gap: 6px 16px; } .teamgrid label { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--ink); font-weight: 500; }
.mrow { display: grid; grid-template-columns: 3fr 1fr 1.1fr 1.2fr auto; gap: 8px; margin-bottom: 6px; } .mrow select { width: 100%; }
.sigimg { max-width: 320px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; display: block; }
.actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.hist { font-size: 14px; background: #f6f8fb; border-radius: 8px; padding: 8px 12px; margin-bottom: 6px; }
.bell { position: relative; }
.pop { position: absolute; top: 40px; inset-inline-start: 0; width: 360px; background: #fff; color: var(--ink); border-radius: 12px; box-shadow: 0 6px 24px #0004; z-index: 20; max-height: 420px; overflow: auto; }
.pop div { padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 14px; } .pop div.u { background: #fff8e1; font-weight: 600; }
.code { font: 700 20px/1 monospace; letter-spacing: 3px; direction: ltr; display: inline-block; }
.muted { color: var(--muted); }

/* ---------- dark mode (toggle in the side menu; remembered per browser) ---------- */
html[data-theme="dark"] { color-scheme: dark; --bg: #0e1a1f; --card: #16272e; --ink: #e3eeee; --muted: #9db4b6; --line: #2b434a; --side: #081f27; --blue: #12a0ae; --blue-d: #0d8590; }
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #1b3139; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] button.ghost { background: transparent; color: #5fd0da; border-color: #2a8a94; } html[data-theme="dark"] button.ghost:hover { background: #1b3139; }
html[data-theme="dark"] th { background: #1d343c; color: #a8c4c7; }
html[data-theme="dark"] tr.group td { background: #1f3a42; }
html[data-theme="dark"] tr.row:hover td { background: #1c3239; }
html[data-theme="dark"] tr.row.rowred td { background: #3b1d22; } html[data-theme="dark"] tr.row.rowred:hover td { background: #4a2429; }
html[data-theme="dark"] tr.row.rowyellow td { background: #3a3318; } html[data-theme="dark"] tr.row.rowyellow:hover td { background: #483f1c; }
html[data-theme="dark"] tr.row.rowgreen td { background: #173a26; } html[data-theme="dark"] tr.row.rowgreen:hover td { background: #1d4a31; }
html[data-theme="dark"] tr.row td, html[data-theme="dark"] tr.group td { border-bottom-color: #2b434a; }
html[data-theme="dark"] .sec { background: #1d343c; }
html[data-theme="dark"] .selbar, html[data-theme="dark"] .folder.on { background: #1d343c; }
html[data-theme="dark"] .folder { background: var(--card); }
html[data-theme="dark"] .sumbox { background: #1a3039; border-color: #2e5560; } html[data-theme="dark"] .sumbox .tot { border-top-color: #2e5560; }
html[data-theme="dark"] .hist { background: #1b3139; } html[data-theme="dark"] .comment { background: #241f3a; }
html[data-theme="dark"] .review.wait, html[data-theme="dark"] .change { background: #3a3318; }
html[data-theme="dark"] .review.rej { background: #3b1d22; } html[data-theme="dark"] .review.ok { background: #173a26; color: #9be0b4; }
html[data-theme="dark"] .review.sign { background: #241f3a; }
html[data-theme="dark"] .pop { background: var(--card); color: var(--ink); } html[data-theme="dark"] .pop div.u { background: #3a3318; }
html[data-theme="dark"] .lastedit { background: #3a3318; color: #f0d98a; }
html[data-theme="dark"] .login, html[data-theme="dark"] .modal { background: var(--card); }
html[data-theme="dark"] .sigimg { background: #fff; } html[data-theme="dark"] .login .logo { background: #fff; border-radius: 12px; padding: 6px; }
html[data-theme="dark"] .storagebar.warn { background: #3a3318; } html[data-theme="dark"] .storagebar.critical { background: #3b1d22; }