/* ===================================================================== Shared theme. --primary is set inline in by common.js from APP_CONFIG.PRIMARY_COLOR, so every client re-skins automatically without touching this file. ===================================================================== */ :root{ --primary: #2F6F4F; --primary-dark: color-mix(in srgb, var(--primary) 80%, black); --primary-light: color-mix(in srgb, var(--primary) 12%, white); --ink: #14201B; --ink-soft: #414D49; --paper: #FAFAF8; --line: #E4E2DC; --card: #FFFFFF; --warn: #B4491E; --warn-bg: #FBEAE2; --ok: #2F6F4F; --radius: 10px; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--paper);color:var(--ink)} body{font-size:15px;line-height:1.45} h1,h2,h3,h4{font-family: Georgia, "Iowan Old Style", serif; font-weight:600; letter-spacing:-0.01em; margin:0 0 .4em} h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem} a{color:var(--primary-dark)} button, .btn{ font:inherit; cursor:pointer; border:1px solid var(--primary); background:var(--primary); color:#fff; padding:.6em 1.1em; border-radius:var(--radius); transition:opacity .15s; } button:hover, .btn:hover{opacity:.88} button.secondary, .btn.secondary{background:transparent; color:var(--primary-dark)} button.ghost, .btn.ghost{background:transparent; border-color:var(--line); color:var(--ink)} button.danger{background:var(--warn); border-color:var(--warn)} button:disabled{opacity:.5; cursor:not-allowed} input, select, textarea{ font:inherit; padding:.55em .7em; border:1px solid var(--line); border-radius:8px; width:100%; background:#fff; color:var(--ink); } label{display:block; font-size:.85rem; color:var(--ink-soft); margin:.6em 0 .25em} .app-header{ display:flex; align-items:center; gap:.75em; padding:.85em 1.2em; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; } .app-header img.logo{height:34px; width:auto; border-radius:6px} .app-header .company-name{font-weight:700; font-size:1.05rem} .app-header .portal-tag{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:var(--primary); padding:.2em .6em; border-radius:999px; } .app-header .spacer{flex:1} .app-header .who{font-size:.85rem; color:var(--ink-soft)} .app-header .back-btn{padding:.4em .8em; font-size:.85rem} .container{max-width:1100px; margin:0 auto; padding:1.4em} .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1em; margin-bottom:1em} .grid{display:grid; gap:1em} .grid.cols-2{grid-template-columns:repeat(2,1fr)} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} @media (max-width:760px){ .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr} } table{width:100%; border-collapse:collapse; font-size:.9rem} th,td{text-align:left; padding:.55em .6em; border-bottom:1px solid var(--line)} th{color:var(--ink-soft); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em} tr:hover td{background:var(--primary-light)} .badge{display:inline-block; padding:.15em .55em; border-radius:999px; font-size:.72rem; font-weight:600} .badge.proposed{background:#FDF3D9; color:#8A6300} .badge.confirmed{background:var(--primary-light); color:var(--primary-dark)} .badge.completed{background:#E3EFE9; color:#2F6F4F} .badge.cancelled{background:var(--warn-bg); color:var(--warn)} .badge.alert{background:var(--warn-bg); color:var(--warn)} .modal-backdrop{ position:fixed; inset:0; background:rgba(20,20,18,.45); display:flex; align-items:center; justify-content:center; z-index:100; padding:1em; } .modal{background:#fff; border-radius:var(--radius); padding:1.4em; max-width:420px; width:100%} .modal h3{margin-bottom:.6em} .modal .actions{display:flex; gap:.6em; margin-top:1em; justify-content:flex-end} .toast{ position:fixed; bottom:1.2em; right:1.2em; background:var(--ink); color:#fff; padding:.75em 1.1em; border-radius:8px; font-size:.88rem; z-index:200; max-width:320px; } .version-footer{ text-align:center; color:var(--ink-soft); font-size:.75rem; padding:1.5em 1em 2em; } .empty-state{text-align:center; color:var(--ink-soft); padding:2em 1em} .stat{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1em} .stat .num{font-size:1.6rem; font-weight:700; font-family:Georgia,serif} .stat .lbl{font-size:.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em} .tabs{display:flex; gap:.4em; border-bottom:1px solid var(--line); margin-bottom:1em; flex-wrap:wrap} .tabs button{background:none; border:none; color:var(--ink-soft); padding:.6em .9em; border-radius:0; border-bottom:2px solid transparent} .tabs button.active{color:var(--primary-dark); border-bottom-color:var(--primary); font-weight:600}