@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700&display=swap');
:root{--ink:#17332d;--forest:#123a32;--green:#2f806a;--mint:#e8f3ee;--gold:#c99b55;--paper:#f5f3ee;--white:#fff;--line:#e7e4dc;--muted:#718079;--red:#b85146;--blue:#437a91}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}button,input,select{font:inherit}.hidden{display:none!important}.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}.brand-panel{background:var(--forest);color:white;padding:54px 8vw;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.brand-panel:after{content:'';position:absolute;width:560px;height:560px;border:1px solid #ffffff1f;border-radius:50%;right:-210px;bottom:-240px;box-shadow:0 0 0 70px #ffffff08,0 0 0 140px #ffffff06}.brand{display:flex;align-items:center;gap:12px;letter-spacing:.22em;font:700 20px Manrope}.mark{display:grid;place-items:center;width:38px;height:38px;background:var(--gold);color:white;border-radius:10px;font-size:18px;letter-spacing:0}.brand-panel h1{font:700 clamp(42px,5vw,72px)/1.08 Manrope;margin:12px 0 22px;max-width:760px}.lead{font-size:18px;line-height:1.6;color:#d1ded9;max-width:570px}.eyebrow{margin:0 0 8px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.15em}.eyebrow.light{color:#c9a86f}.quote{position:relative;z-index:1;color:#b8cbc4;max-width:500px;font-size:14px}.login-panel{display:grid;place-items:center;padding:40px;background:#faf9f6}.login-card{width:min(410px,100%)}.login-card h2,.title-row h2{font:700 30px Manrope;margin:0 0 7px}.muted{color:var(--muted);margin:0}.login-card label,.form-grid label{display:grid;gap:8px;font-weight:600;font-size:13px;margin-top:24px}.login-card input,.form-grid input,.form-grid select{border:1px solid #d9ddd9;border-radius:10px;background:white;padding:13px 14px;outline:none}.login-card input:focus,.form-grid input:focus,.form-grid select:focus{border-color:var(--green);box-shadow:0 0 0 3px #2f806a1c}.primary{background:var(--forest);color:white;border:0;border-radius:10px;padding:13px 18px;font-weight:700;cursor:pointer}.login-card>.primary{width:100%;margin-top:28px;display:flex;justify-content:space-between}.error{min-height:18px;color:var(--red);font-size:12px}.demo{text-align:center;color:#99a19e;font-size:11px;margin-top:24px}.app{min-height:100vh;display:grid;grid-template-columns:244px 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;background:var(--forest);color:white;padding:28px 18px;display:flex;flex-direction:column;z-index:3}.brand.small{padding:0 12px 25px;border-bottom:1px solid #ffffff18}.sidebar nav{overflow:auto;padding-top:16px;flex:1}.sidebar nav p{font-size:9px;letter-spacing:.16em;color:#78928a;margin:24px 12px 8px}.nav{width:100%;border:0;background:transparent;color:#afc1bb;text-align:left;padding:10px 12px;border-radius:8px;cursor:pointer;display:flex;gap:12px;align-items:center;font-size:13px}.nav:hover,.nav.active{background:#ffffff13;color:white}.nav.active{box-shadow:inset 3px 0 var(--gold)}.nav span{width:17px;text-align:center}.user{border-top:1px solid #ffffff18;padding:19px 8px 0;display:flex;align-items:center;gap:10px}.avatar{width:34px;height:34px;border-radius:50%;background:#d8b97d;color:var(--forest);display:grid;place-items:center;font-size:11px;font-weight:700}.user div{display:grid;flex:1}.user strong{font-size:11px}.user small{color:#92aaa2;font-size:10px}.user button{border:0;background:transparent;color:#9ab0a9;cursor:pointer}.app main{grid-column:2}.app header{height:78px;background:#fff;border-bottom:1px solid var(--line);padding:0 34px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2}.crumb{display:grid;gap:2px}.crumb small{font-size:10px;color:var(--muted)}.crumb select{border:0;font-weight:700;color:var(--ink);outline:0;background:transparent}.header-actions{display:flex;gap:10px;align-items:center}.icon-btn{background:transparent;border:1px solid var(--line);width:38px;height:38px;border-radius:9px;color:var(--ink);cursor:pointer}.notification{position:relative}.notification i{position:absolute;width:6px;height:6px;background:var(--gold);border-radius:50%;right:7px;top:7px}.content{padding:34px;max-width:1500px;margin:auto}.title-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px}.period{border:1px solid var(--line);background:white;border-radius:9px;padding:10px 14px;color:var(--ink)}.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.kpi{background:white;border:1px solid var(--line);border-radius:14px;padding:20px}.kpi>div{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.kpi .kicon{width:33px;height:33px;border-radius:9px;background:var(--mint);color:var(--green);display:grid;place-items:center}.kpi strong{display:block;font:700 24px Manrope;margin:16px 0 6px}.kpi small{color:var(--muted)}.kpi small.positive{color:var(--green)}.grid-main{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:16px}.card{background:white;border:1px solid var(--line);border-radius:14px;padding:22px}.card-head{display:flex;justify-content:space-between;align-items:flex-start}.card h3{font:700 17px Manrope;margin:0}.card-head button{border:0;background:transparent;color:var(--green);font-size:12px;cursor:pointer}.legend{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:6px}.legend i{width:7px;height:7px;border-radius:50%;margin-left:8px}.green{background:var(--green)}.gold{background:var(--gold)}.chart{height:220px;display:grid;grid-template-columns:32px 1fr;margin-top:25px}.ylabels{display:flex;flex-direction:column;justify-content:space-between;font-size:9px;color:#9ca5a1;padding-bottom:25px}.bars{border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,#fff 0,#fff 48px,#eeece7 49px);display:flex;justify-content:space-around;align-items:flex-end;padding:0 18px}.bars>div{height:100%;display:flex;align-items:flex-end;gap:5px;position:relative;padding-bottom:25px}.bars i,.bars b{display:block;width:15px;border-radius:5px 5px 1px 1px;background:var(--green)}.bars b{background:#d7b16d}.bars span{position:absolute;bottom:5px;left:3px;font-size:9px;color:var(--muted)}.attention-list>div{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #efede8}.attention-list>div:last-child{border:0}.attention-list p{display:grid;flex:1;margin:0}.attention-list strong{font-size:12px}.attention-list small{font-size:10px;color:var(--muted);margin-top:3px}.badge{width:31px;height:31px;border-radius:9px;display:grid;place-items:center}.badge.red{background:#f8e9e6;color:var(--red)}.badge.gold{background:#f8f0e2;color:#a87835}.badge.blue{background:#e7f0f4;color:var(--blue)}.badge.green{background:var(--mint);color:var(--green)}.entries-card{margin-top:16px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;margin-top:12px;font-size:12px}th{text-align:left;color:#88938e;font-size:9px;letter-spacing:.1em;padding:10px;border-bottom:1px solid var(--line)}td{padding:13px 10px;border-bottom:1px solid #f0eee9}td strong{display:block}.right{text-align:right}.status{padding:4px 8px;border-radius:20px;font-size:9px;background:#edf1ef;color:#60706a}.status.scheduled{background:#edf4ef;color:#39725f}.status.draft{background:#f5eee2;color:#9a6e2e}.income{color:var(--green);font-weight:700}.expense{color:var(--ink);font-weight:700}dialog{border:0;border-radius:16px;padding:0;box-shadow:0 30px 80px #10231e44;width:min(680px,calc(100% - 30px))}dialog::backdrop{background:#10231e99}.modal-head{display:flex;justify-content:space-between;padding:24px 26px 10px}.modal-head h2{margin:0;font:700 23px Manrope}.modal-head button{border:0;background:transparent;font-size:25px;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:0 26px}.form-grid label{margin-top:16px}.form-grid .full{grid-column:1/-1}.modal-actions{display:flex;justify-content:flex-end;gap:10px;padding:22px 26px;background:#faf9f6;margin-top:22px}.modal-actions>button:not(.primary){border:1px solid var(--line);background:white;border-radius:9px;padding:11px 16px}.modal-head~.error{padding:0 26px}.toast{position:fixed;right:24px;bottom:24px;background:var(--forest);color:white;padding:14px 18px;border-radius:10px;box-shadow:0 12px 30px #10231e44;transform:translateY(120px);transition:.25s;z-index:5}.toast.show{transform:translateY(0)}#menu{display:none}
@media(max-width:1000px){.kpi-grid{grid-template-columns:1fr 1fr}.grid-main{grid-template-columns:1fr}.login-shell{grid-template-columns:1fr}.brand-panel{display:none}}@media(max-width:720px){.app{display:block}.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.app main{display:block}.app header{padding:0 15px}.header-actions>.icon-btn,.header-actions>.primary{display:none}#menu{display:block}.content{padding:22px 15px}.kpi-grid{grid-template-columns:1fr}.title-row{align-items:flex-start;gap:15px;flex-direction:column}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}}
#periodReopenForm{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}#periodReopenForm label{display:grid;gap:8px;font-size:13px;font-weight:600}#periodReopenReason{width:100%;font:inherit;border:1px solid var(--line);border-radius:10px;padding:12px;resize:vertical}#periodReopenReason:focus{outline:2px solid var(--green);outline-offset:2px}#reopenPeriod{margin:12px 0;padding:10px 16px;border:1px solid var(--line);border-radius:9px;background:white;cursor:pointer}#reopenPeriod:disabled{cursor:default;opacity:.6}#periodHistory{margin-top:24px;overflow-wrap:anywhere}
#dashboardFilters{padding:0;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:16px}#dashboardFilters button{margin-bottom:1px;padding:12px;border:1px solid var(--line);border-radius:9px;background:white;cursor:pointer}.kpi{min-width:0;overflow-wrap:anywhere}.kpi strong{font-size:22px}#dashboardReference{font-size:12px;line-height:1.6}#dashboardSources{overflow-wrap:anywhere}#dashboardSources td small{display:block;font-size:10px;margin-top:6px}details.card{margin-top:16px}details summary{cursor:pointer;font-weight:600}@media(max-width:1000px){#dashboardFilters{grid-template-columns:1fr 1fr}}@media(max-width:720px){#dashboardFilters{grid-template-columns:1fr}}
.app main{min-width:0}.crumb{min-width:0;max-width:100%}.crumb select{min-width:0;max-width:100%;text-overflow:ellipsis}@media(max-width:720px){.crumb{flex:1;margin-left:12px}.crumb select{width:100%}}

/* COB-01: preserve readability of UUIDs and immutable calculation memory. */
#collectionsView { overflow-wrap: anywhere; min-width: 0; }
#collectionsView .card { padding: 20px; margin: 16px 0; min-width: 0; }
#collectionsView pre { max-width: 100%; overflow: auto; white-space: pre-wrap; }
#collectionsView input[type="checkbox"] { width: auto; margin-right: 8px; }
#collectionsView [data-preview] { padding: 16px 0; }
#collectionsView form { display: grid; gap: 12px; margin: 16px 0; max-width: 680px; }
#collectionsView label { display: grid; gap: 6px; font-size: 14px; }
#collectionsView input:not([type="checkbox"]), #collectionsView select, #collectionsView textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid #d8d8cc; border-radius: 7px; background: white; font: inherit; }
#collectionsView button { width: fit-content; max-width: 100%; padding: 9px 13px; border: 1px solid #c8d3cc; border-radius: 7px; color: #123a32; background: #fff; font: inherit; cursor: pointer; }
#collectionsView button:disabled { opacity: .6; cursor: wait; }
#collectionsView [data-action="confirm"] { background: #123a32; color: white; }

#suppliersView article{margin-block:1rem;padding:1rem} #suppliersView button{margin:.25rem} .supplier-history{white-space:pre-wrap;overflow-wrap:anywhere;max-height:24rem;overflow:auto} #suppliersView input,#suppliersView select,#suppliersView textarea{max-width:100%} #suppliersView h3:focus{outline:2px solid #123a32}
#suppliersView { overflow-wrap:anywhere; }
#suppliersView h2 { margin-top:0; }
#suppliersView h3 { margin-bottom:.75rem; }
#suppliersView label { display:grid; gap:8px; margin-block:12px; font-size:13px; font-weight:600; min-width:0; }
#suppliersView input,#suppliersView select,#suppliersView textarea { width:100%; min-width:0; box-sizing:border-box; padding:10px; border:1px solid var(--line); border-radius:8px; background:white; font:inherit; }
#suppliersView button { max-width:100%; padding:10px 14px; border:1px solid #c8d3cc; border-radius:8px; background:white; color:var(--forest); font:inherit; cursor:pointer; }
#suppliersView button.primary { background:var(--forest); color:white; }
#suppliersView button:disabled { opacity:.6; cursor:wait; }
#suppliersView :is(button,input,select,textarea,summary):focus-visible { outline:3px solid var(--green); outline-offset:2px; }
#suppliersView form { padding:0; gap:12px; margin-block:16px; }
#suppliersView form button { align-self:end; }
/* Maintenance records remain readable on narrow screens and with long descriptions. */
#maintenanceView article,#maintenanceView details,#maintenanceView p{overflow-wrap:anywhere;min-width:0}
#maintenanceView details{margin:.65rem 0}
#maintenanceView fieldset{min-width:0}
#maintenanceView input[type=checkbox]{width:auto}

/* OS journey: visible keyboard focus, long historical text and narrow viewports. */
#workOrdersView{overflow-wrap:anywhere;min-width:0}
#workOrdersView :is(article,details,p,fieldset){min-width:0}
#workOrdersView article{margin-block:1rem;padding:1rem}
#workOrdersView label{display:grid;gap:8px;margin-block:12px;font-weight:600;min-width:0}
#workOrdersView :is(input,select,textarea){width:100%;min-width:0;padding:10px;border:1px solid var(--line);border-radius:8px;font:inherit;background:white}
#workOrdersView button{max-width:100%;margin:.25rem;padding:10px 14px;border:1px solid #c8d3cc;border-radius:8px;background:white;color:var(--forest);font:inherit;cursor:pointer}
#workOrdersView button:disabled{opacity:.6;cursor:wait}
#workOrdersView :is(button,input,select,textarea,summary):focus-visible{outline:3px solid var(--green);outline-offset:2px}
#workOrdersView form{padding:0;gap:12px;margin-block:16px}
#workOrdersView td{min-width:7rem;max-width:22rem;overflow-wrap:anywhere}
#workOrdersView details{margin-block:.75rem}
@media(max-width:720px){#workOrdersView .form-grid{grid-template-columns:minmax(0,1fr)}}

/* OPS-01: native controls, readable histories and narrow viewports. */
#operationsView form,#operationsPanel form{display:flex;flex-wrap:wrap;gap:1rem;align-items:end;margin:1rem 0}#operationsView label,#operationsPanel label{display:flex;flex-direction:column;gap:.35rem;max-width:100%;flex:1 1 180px}#operationsView textarea{min-height:100px}#operationsView .full{flex-basis:100%}#operationsView input,#operationsView select,#operationsView textarea,#operationsPanel select{max-width:100%;min-width:0;padding:.6rem}#operationsView pre{white-space:pre-wrap;overflow-wrap:anywhere}#operationsView .ops-actions{display:flex;gap:.5rem;flex-wrap:wrap}#operationsView button,#operationsPanel button{padding:.6rem;cursor:pointer}#operationsView .ops-detail{margin-top:1.5rem}#operationsView p{overflow-wrap:anywhere}

#operationsView button,#operationsPanel button{border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--forest)}#operationsView button:hover,#operationsPanel button:hover{background:var(--mint)}#operationsView :focus-visible,#operationsPanel :focus-visible{outline:2px solid var(--green);outline-offset:3px}#operationsView button:disabled,#operationsPanel button:disabled{opacity:.6;cursor:wait}#operationsView textarea{font:inherit;border:1px solid var(--line);border-radius:8px;padding:.6rem}#operationsView td small,#operationsPanel td small{display:block;margin-top:.3rem}#operationsView details{padding:.5rem 0;border-bottom:1px solid var(--line)}#operationsPanel{margin-bottom:2rem}
@media(max-width:720px){#operationsView table,#operationsView tbody,#operationsPanel table,#operationsPanel tbody{display:block;min-width:0}#operationsView thead,#operationsPanel thead{display:none}#operationsView tbody tr,#operationsPanel tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;margin:.8rem 0;background:var(--white);border:1px solid var(--line);border-radius:10px}#operationsView td,#operationsPanel td{display:block;padding:0;border:0;overflow-wrap:anywhere}#operationsView td::before,#operationsPanel td::before{content:attr(data-label);display:block;font-size:.7rem;color:var(--muted);margin-bottom:.35rem}#operationsView td:first-child,#operationsPanel td:first-child{grid-column:1/-1}}

#operationsView dl{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,3fr);gap:.4rem 1rem}#operationsView dt{color:var(--muted)}#operationsView dd{margin:0;overflow-wrap:anywhere}
