/* Poster Boost — єдина система стилів для всіх сторінок. Кольорова гама перемикається атрибутом data-theme на . */ /* ---------- Теми ---------- */ :root, :root[data-theme="cafebook"] { --bg: #0d0c0a; --card: #16140f; --card-2: #201d16; --border: #2b2820; --border-soft: #23201a; --text: #ece7dc; --muted: #8d867a; --accent: #cfa952; --accent-hover: #b8923d; --accent-fg: #171204; --accent-soft: rgba(207,169,82,.14); --input-bg: #eef1fb; --input-text: #1d2733; --green: #4cc38a; --red: #e05b5b; --blue: #6ea8ff; --amber: #d8ab48; --supply: #6ea8ff; --manufacture: #b28cf5; --writeoff: #e05b5b; --moving: #45c2c8; --butchery: #d98c3f; --font-display: Georgia, "Times New Roman", serif; --shadow: 0 18px 50px rgba(0,0,0,.5); --row-hover: #1c1913; } :root[data-theme="light"] { --bg: #f4f6f9; --card: #ffffff; --card-2: #f8fafc; --border: #dde3ea; --border-soft: #e7ecf2; --text: #1d2733; --muted: #6b7a8c; --accent: #2e7cf6; --accent-hover: #1f5fc4; --accent-fg: #ffffff; --accent-soft: rgba(46,124,246,.1); --input-bg: #ffffff; --input-text: #1d2733; --green: #22a06b; --red: #d64545; --blue: #4472b8; --amber: #b8860b; --supply: #2e7cf6; --manufacture: #8a5cf5; --writeoff: #d64545; --moving: #17a2a8; --butchery: #c2691a; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --shadow: 0 10px 30px rgba(20,35,60,.16); --row-hover: #f6f9fd; } :root[data-theme="dark"] { --bg: #0f1419; --card: #161c23; --card-2: #1d252e; --border: #2a333d; --border-soft: #232b34; --text: #e4e9ef; --muted: #8b97a5; --accent: #4d9fff; --accent-hover: #3d8ae6; --accent-fg: #06101c; --accent-soft: rgba(77,159,255,.14); --input-bg: #e8edf4; --input-text: #131a21; --green: #46c58a; --red: #e2686a; --blue: #4d9fff; --amber: #d5a544; --supply: #4d9fff; --manufacture: #a683f7; --writeoff: #e2686a; --moving: #35bfc4; --butchery: #e0913f; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --shadow: 0 18px 50px rgba(0,0,0,.45); --row-hover: #1b232c; } :root[data-theme="emerald"] { --bg: #f2f7f3; --card: #ffffff; --card-2: #f5faf6; --border: #d5e4d9; --border-soft: #e2eee5; --text: #16241c; --muted: #62776a; --accent: #1f8a5f; --accent-hover: #16694a; --accent-fg: #ffffff; --accent-soft: rgba(31,138,95,.12); --input-bg: #ffffff; --input-text: #16241c; --green: #1f8a5f; --red: #c94a4a; --blue: #2f6fb5; --amber: #b07d1a; --supply: #2f6fb5; --manufacture: #7a5cd0; --writeoff: #c94a4a; --moving: #0e8f9c; --butchery: #b06a12; --font-display: Georgia, "Times New Roman", serif; --shadow: 0 10px 30px rgba(22,60,40,.14); --row-hover: #f2f9f4; } /* Нейтрально-сірі гами: без синього відтінку, який є у «Світлій» і «Темній». Кольори типів документів залишені помітно різними (лише притишені) — по них з першого погляду видно, де постачання, а де списання. */ /* Фон тут помітно темніший за «Світлу» (світлота 68 проти 92) — інакше «сіра» гама виглядала просто білою. Картки світліші за фон, щоб читались як панелі. Кольори тексту темніші, ніж у «Світлій»: фон під ними вже не білий. */ :root[data-theme="grey"] { --bg: #d4d8dc; --card: #e9ecef; --card-2: #dfe3e7; --border: #b7bec5; --border-soft: #c6ccd2; --text: #191d22; --muted: #555d66; --accent: #3f4954; --accent-hover: #2b333c; --accent-fg: #ffffff; --accent-soft: rgba(63,73,84,.12); --input-bg: #fbfcfd; --input-text: #191d22; --green: #1f6b43; --red: #b83b36; --blue: #3d5f88; --amber: #75520e; --supply: #3d5f88; --manufacture: #5f5090; --writeoff: #b83b36; --moving: #226f77; --butchery: #9a5a10; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --shadow: 0 10px 30px rgba(30,35,40,.18); --row-hover: #e2e6ea; } /* Фон світліший за «Темну» (світлота 2.8 проти 0.7) — це графіт, а не чорний. Акценти відповідно яскравіші: фон під ними вже не майже чорний. */ :root[data-theme="graphite"] { --bg: #2b2f34; --card: #35393f; --card-2: #3e434a; --border: #4d535b; --border-soft: #43484f; --text: #eaecef; --muted: #a9b1ba; --accent: #c2cbd4; --accent-hover: #a8b2bc; --accent-fg: #1c2024; --accent-soft: rgba(194,203,212,.16); --input-bg: #eceef1; --input-text: #1a1d21; --green: #5cc994; --red: #f08585; --blue: #93b8e0; --amber: #dfb662; --supply: #93b8e0; --manufacture: #b3a3dd; --writeoff: #f08585; --moving: #5ec3c8; --butchery: #e2a05c; --font-display: -apple-system, "Segoe UI", Roboto, sans-serif; --shadow: 0 18px 50px rgba(0,0,0,.45); --row-hover: #3a3f46; } /* ---------- База ---------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; } .spacer { flex: 1; } .muted { color: var(--muted); } .empty { text-align: center; color: var(--muted); padding: 60px 0; } a { color: var(--accent); } a.back { color: var(--muted); text-decoration: none; font-size: 13px; } a.back:hover { color: var(--accent); } h1, h2, h3, .display { font-family: var(--font-display); } .page-head { display: flex; align-items: flex-start; gap: 20px; margin: 18px 0 24px; flex-wrap: wrap; } .page-head h1 { font-size: 32px; font-weight: 700; margin: 0; } .page-head .sub { color: var(--muted); margin-top: 4px; } /* ---------- Кнопки ---------- */ button { font: inherit; cursor: pointer; border-radius: 9px; padding: 8px 14px; border: 1px solid var(--border); background: var(--card-2); color: var(--text); } button:hover { border-color: var(--accent); } button:disabled { opacity: .5; cursor: default; } button.primary, .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 700; } button.primary:hover, .btn-accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); } button.ghost { border: none; background: none; color: var(--muted); padding: 4px 8px; } button.ghost:hover { color: var(--red); } .icon-btn { padding: 7px 11px; border-radius: 9px; } .icon-btn.del { background: transparent; border-color: color-mix(in srgb, var(--red) 50%, transparent); color: var(--red); } .icon-btn.del:hover { border-color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); } /* ---------- Поля ---------- */ input, select, textarea { font: inherit; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; background: var(--input-bg); color: var(--input-text); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } input:disabled { opacity: .6; } .field { display: flex; flex-direction: column; gap: 2px; } .field label { font-size: 11px; color: var(--muted); } /* ---------- Картки й таблиці ---------- */ .sheet { background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .tbl { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; } .tbl table { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--card-2); white-space: nowrap; } .tbl td { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .tbl tbody tr:last-child td { border-bottom: none; } .tbl td.num { text-align: right; white-space: nowrap; } .tbl td.acts { text-align: right; white-space: nowrap; } .tbl td.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); } /* ---------- Бейджі ---------- */ .badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 14px; white-space: nowrap; } .badge .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle; background: currentColor; } .badge.role-admin { color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); } .badge.role-staff { color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 32%, transparent); } .badge.on { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); } .badge.off { color: var(--muted); background: color-mix(in srgb, var(--muted) 10%, transparent); border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); } .st-ok { color: var(--green); font-weight: 700; white-space: nowrap; } .st-err { color: var(--red); font-weight: 700; white-space: nowrap; } /* ---------- Діалоги ---------- */ dialog { border: 1px solid var(--border); border-radius: 14px; padding: 0; max-width: 560px; width: 92vw; background: var(--card); color: var(--text); box-shadow: var(--shadow); } dialog::backdrop { background: rgba(0,0,0,.55); } dialog .dlg-body { padding: 22px 24px 6px; } dialog .dlg-body h3 { margin: 0 0 12px; font-size: 21px; } dialog .dlg-body label { display: block; color: var(--muted); font-size: 13px; margin: 14px 0 5px; } dialog .dlg-body input, dialog .dlg-body select { width: 100%; font-size: 15px; padding: 10px 12px; } dialog .dlg-err { color: var(--red); min-height: 20px; margin-top: 10px; font-size: 13px; } dialog .dlg-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 24px 20px; } /* ---------- Підсвітка помилок у полях ---------- */ .err-field, .err-field input { border-color: var(--red) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--red) 22%, transparent) !important; } .field-err { color: var(--red); font-size: 11px; line-height: 1.25; margin-top: 3px; max-width: 240px; } /* ---------- Небезпечні дії ---------- */ button.danger-solid { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; } button.danger-solid:hover { background: color-mix(in srgb, var(--red) 85%, black); border-color: color-mix(in srgb, var(--red) 85%, black); } /* ---------- Сайдбар (спільний для всіх сторінок) ---------- */ #sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 216px; z-index: 70; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; padding: 10px 9px; overflow-y: auto; } /* компактна шапка: значок + назва в один рядок, статус — дрібним у плашці */ #sidebar .sb-top { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; } #sidebar .sb-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--accent-soft); display: grid; place-items: center; font-size: 14px; flex: none; } #sidebar h1 { font-size: 14.5px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; font-family: inherit; letter-spacing: .2px; } #sidebar .sb-collapse { font-size: 14px; padding: 2px 6px; flex: none; width: auto; } #sidebar .sb-collapse:hover { color: var(--accent); } #sidebar .status { color: var(--muted); font-size: 10.5px; line-height: 1.35; background: var(--card-2); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; } #sidebar .sec { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin: 8px 0 2px; padding-left: 8px; } /* кнопки-пункти списку: без рамок, з підсвіткою активного */ #sidebar button { width: 100%; text-align: left; border: none; background: transparent; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 9px; } #sidebar button:hover { background: var(--card-2); border-color: transparent; } #sidebar button.nav-active { background: var(--accent-soft); color: var(--accent); font-weight: 700; box-shadow: inset 3px 0 0 var(--accent); } /* пункти «за типом»: знак у кольорі типу — той самий, що в таблиці історії й на сторінці внесення. Колір несе знак, а не назва: назва лишається основним кольором і тому читається за будь-якої гами. */ #sidebar .nav-ic { font-style: normal; font-size: 14px; line-height: 1; width: 17px; text-align: center; flex: none; } #sidebar .nav-supply .nav-ic { color: var(--supply); } #sidebar .nav-manufacture .nav-ic { color: var(--manufacture); } #sidebar .nav-writeoff .nav-ic { color: var(--writeoff); } #sidebar .nav-moving .nav-ic { color: var(--moving); } #sidebar .nav-butchery .nav-ic { color: var(--butchery); } /* активний пункт цілком у кольорі акценту — знак не має з ним спорити */ #sidebar button.nav-active .nav-ic { color: inherit; } #sidebar .user-chip { padding: 8px 10px; color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 9px; border-top: 1px solid var(--border-soft); margin-top: 4px; } #sidebar .sb-bottom-row { display: flex; flex-direction: column; gap: 3px; } #sidebar .sb-bottom-row .danger-solid { color: #fff; background: var(--red); justify-content: center; font-weight: 600; margin-top: 3px; } #sidebar .sb-bottom-row .danger-solid:hover { background: color-mix(in srgb, var(--red) 85%, black); } body { padding-left: 216px; } body.no-sidebar { padding-left: 0; } /* згорнутий сайдбар — вузька панель з іконками, не зникає повністю */ body.sb-collapsed { padding-left: 56px; } body.sb-collapsed #sidebar { width: 56px; padding: 10px 6px; overflow-x: hidden; } body.sb-collapsed #sidebar .sb-top { flex-direction: column; gap: 8px; padding-bottom: 4px; } body.sb-collapsed #sidebar .sb-txt, body.sb-collapsed #sidebar h1, body.sb-collapsed #sidebar .status { display: none; } /* підписи груп у вузькій панелі не влазять, але й прибирати їх не можна: без них сім значків злипаються в один стовпчик. Лишаємо саму риску. */ body.sb-collapsed #sidebar .sec { font-size: 0; height: 0; padding: 0; margin: 7px 8px; border-top: 1px solid var(--border-soft); } body.sb-collapsed #sidebar button { justify-content: center; padding: 9px 4px; gap: 0; } body.sb-collapsed #sidebar button.nav-active { box-shadow: none; } body.sb-collapsed #sidebar .user-chip { justify-content: center; padding: 8px 0; } body.sb-collapsed .bottom-bar { left: 56px; } @media (max-width: 860px) { body { padding-left: 0; } #sidebar { position: static; width: auto; border-right: none; border-bottom: 1px solid var(--border); } .bottom-bar { left: 0 !important; } } /* ---------- Комбобокс і випадні списки ---------- */ .combo { position: relative; } .combo input { width: 100%; padding-right: 26px; } .combo .combo-arrow { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 11px; } .dropdown { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 120; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); max-height: 280px; overflow-y: auto; min-width: 220px; } .dropdown .opt { padding: 7px 10px; display: flex; gap: 8px; align-items: baseline; cursor: pointer; color: var(--text); } .dropdown .opt.active, .dropdown .opt:hover { background: var(--accent-soft); } .dropdown .opt.current { font-weight: 700; } .dropdown .opt .nm { flex: 1; } .dropdown .opt .check { color: var(--accent); } .dropdown .opt.none { color: var(--muted); cursor: default; } .dropdown .opt .meta { color: var(--muted); font-size: 11px; white-space: nowrap; } /* ---------- Модальні вікна (PB_confirm / PB_alert / PB_prompt) ---------- */ dialog.pb-modal { max-width: 430px; } dialog.pb-modal .pb-modal-msg { color: var(--muted); margin: 4px 0 0; white-space: pre-wrap; } dialog.pb-modal input { width: 100%; margin-top: 14px; font-size: 15px; padding: 10px 12px; } /* ---------- Нижня панель (сторінка внесення) ---------- */ .bottom-bar { position: fixed; bottom: 0; left: 216px; right: 0; background: var(--card); border-top: 1px solid var(--border); padding: 8px 16px; display: flex; align-items: center; gap: 8px; z-index: 60; flex-wrap: wrap; } .bottom-bar .summary { color: var(--muted); font-size: 13px; } .bottom-bar .spacer { flex: 1; } .bottom-bar button.primary { padding: 10px 26px; font-size: 15px; } .bottom-bar .add-row { display: flex; gap: 8px; flex-wrap: wrap; } .bottom-bar .add-row button { font-weight: 600; } .bottom-bar .add-row button::before { content: "+ "; } .add-supply { color: var(--supply); } .add-manufacture { color: var(--manufacture); } .add-writeoff { color: var(--writeoff); } .add-moving { color: var(--moving); } .add-butchery { color: var(--butchery); } /* транзакція — не складський документ, тому нейтральний колір тексту */ .add-transaction { color: var(--text); } /* ---------- Тост ---------- */ .toast { position: fixed; top: 20px; right: 18px; background: var(--card); color: var(--text); border: 1px solid var(--border); padding: 11px 16px; border-radius: 10px; z-index: 300; box-shadow: var(--shadow); max-width: 380px; white-space: pre-wrap; }