:root{--one-green:#0b3d2e;--one-green-2:#145a43;--one-green-3:#1d7a5a;--one-gold:#c9a227;--one-bg:#f3f5f4;--one-line:#e1e6e3;--one-text:#1f2a26;--sidebar-w:264px;--bottom-h:58px}
html,body{background:var(--one-bg);color:var(--one-text);font-size:.94rem}
body.app{padding-bottom:calc(var(--bottom-h) + env(safe-area-inset-bottom))}
@media(min-width:992px){body.app{padding-bottom:0}}
a{color:var(--one-green-2)}
.text-one{color:var(--one-green)!important}
.btn-one{background:var(--one-green);border-color:var(--one-green);color:#fff}
.btn-one:hover,.btn-one:focus{background:var(--one-green-2);border-color:var(--one-green-2);color:#fff}
.btn-gold{background:var(--one-gold);border-color:var(--one-gold);color:#1b1b1b}
.btn{border-radius:.55rem}.form-control,.form-select{border-radius:.55rem;border-color:#cfd8d3}
.form-control:focus,.form-select:focus{border-color:var(--one-green-3);box-shadow:0 0 0 .2rem rgba(29,122,90,.18)}
.form-label{font-weight:600;font-size:.82rem;color:#3b4a43;margin-bottom:.25rem}
.req::after{content:" *";color:#c0392b}
.card{border:1px solid var(--one-line);border-radius:.8rem}
.card-header{background:#fff;font-weight:600;border-bottom:1px solid var(--one-line)}

/* layout */
.sidebar{background:linear-gradient(180deg,var(--one-green) 0%,#082d22 100%)!important;color:#fff;width:var(--sidebar-w)!important;border:0!important}
@media(min-width:992px){.sidebar{height:auto!important;background:linear-gradient(180deg,var(--one-green) 0%,#082d22 100%)!important}.sidebar .offcanvas-body{flex-grow:1!important}}
@media(min-width:992px){.sidebar{position:fixed;inset:0 auto 0 0;z-index:1030;display:flex!important;flex-direction:column;visibility:visible!important;transform:none!important}.sidebar .offcanvas-body{overflow-y:auto;overflow-x:hidden}.main{margin-left:var(--sidebar-w);transition:margin-left .2s ease}}
.sidebar .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.1)}
.sidebar{transition:width .2s ease}
.brand{display:flex;align-items:center;gap:.7rem;padding:1rem 1.1rem;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1)}
.brand img{border-radius:50%;background:#fff;padding:2px}.brand b{display:block;letter-spacing:.1em;font-size:1.05rem}.brand small{color:var(--one-gold);letter-spacing:.35em;font-weight:700}
.side-nav{padding:.6rem .5rem;flex:1}
.side-head{font-size:.68rem;letter-spacing:.18em;color:#7fa294;padding:.9rem .9rem .3rem}
.nav-link-top{display:flex;align-items:center;gap:.7rem;padding:.55rem .85rem;margin:.1rem 0;color:#d6e6df;text-decoration:none;border-radius:.6rem;font-weight:500}
.nav-link-top i{width:1.2rem;text-align:center;color:var(--one-gold)}
.nav-link-top:hover{background:rgba(255,255,255,.08);color:#fff}.nav-link-top.active{background:rgba(201,162,39,.2);color:#fff}
.nav-link-admin{font-size:.88rem;padding:.42rem .85rem}
.side-foot{padding:.8rem 1rem;font-size:.72rem;color:#7fa294}
.main{min-height:100vh}
.topbar{position:sticky;top:0;z-index:1020;background:var(--one-green);display:flex;align-items:center;gap:.5rem;padding:.35rem .9rem;padding-top:calc(.35rem + env(safe-area-inset-top));box-shadow:0 2px 6px rgba(0,0,0,.15)}
.top-title{color:#fff;font-weight:700;letter-spacing:.14em}.top-right{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.notif-dot{position:absolute;top:0;right:-2px;font-size:.6rem}
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1025;background:#fff;border-top:1px solid var(--one-line);display:flex;height:calc(var(--bottom-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.68rem;color:#6b7a73;text-decoration:none;gap:2px}
.bottom-nav a i{font-size:1.15rem}.bottom-nav a.active{color:var(--one-green);font-weight:700}

/* portal cards */
.portal-card{position:relative;background:#fff;border:1px solid var(--one-line);border-radius:1rem;padding:1.3rem .8rem 1rem;text-align:center;height:100%;transition:transform .15s,box-shadow .15s,border-color .15s}
.portal-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(11,61,46,.14);border-color:var(--one-green-3)}
.portal-card.is-off{opacity:.8}
.portal-logo{border-radius:1rem;object-fit:contain;background:#fff;margin:0 auto .65rem;display:block}
.portal-logo-icon{display:flex!important;align-items:center;justify-content:center;color:#fff}
.portal-name{font-weight:700;color:var(--one-green);font-size:1.02rem}
.portal-desc{font-size:.8rem;color:#5a6a63;min-height:2.2em;line-height:1.15}
.portal-dept{font-size:.72rem;letter-spacing:.06em;color:var(--one-gold);font-weight:700;margin-top:.2rem;text-transform:uppercase;min-height:1em}
.portal-cta{margin-top:.6rem;font-size:.78rem;font-weight:700;letter-spacing:.07em;color:var(--one-green-2)}
.portal-tools{position:absolute;top:.4rem;left:.5rem;right:.5rem;display:flex;justify-content:space-between;z-index:3}
.portal-tools .tool{background:none;border:0;color:#9aa8a1;padding:.15rem .35rem;font-size:1rem;position:relative;z-index:3}
.portal-tools .tool:hover{color:var(--one-green)}.portal-tools .fav.on{color:var(--one-gold)}
.fav-form{margin-left:auto}
.section-title{font-size:.78rem;letter-spacing:.14em;font-weight:700;color:#6b7a73;text-transform:uppercase;margin:1.2rem 0 .6rem}
.hero{background:linear-gradient(120deg,var(--one-green) 0%,var(--one-green-3) 100%);color:#fff;border-radius:1rem;padding:1.3rem 1.4rem}
.hero h3{margin:0;font-weight:700}.hero p{margin:.2rem 0 0;color:#d6e6df}
.quick{display:flex;align-items:center;gap:.8rem;background:#fff;border:1px solid var(--one-line);border-radius:.9rem;padding:.8rem 1rem;text-decoration:none;color:var(--one-text);height:100%}
.quick:hover{border-color:var(--one-green-3)}.quick i{font-size:1.4rem;color:var(--one-green-3);width:1.8rem;text-align:center}
.ann{border-left:4px solid var(--one-gold);background:#fff;border-radius:.6rem;padding:.65rem .9rem;margin-bottom:.55rem;border-top:1px solid var(--one-line);border-right:1px solid var(--one-line);border-bottom:1px solid var(--one-line)}
.ann.maintenance{border-left-color:#e67e22}.ann.new_system{border-left-color:var(--one-green-3)}.ann.update{border-left-color:#2980b9}
.recent-item{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px dashed var(--one-line)}
.table thead th{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#5a6a63;background:#f8faf9;white-space:nowrap}
.stat{background:#fff;border:1px solid var(--one-line);border-radius:.9rem;padding:1rem;text-align:center}.stat b{display:block;font-size:1.8rem;color:var(--one-green)}.stat span{font-size:.78rem;color:#6b7a73}
.bar-row{display:flex;align-items:center;gap:.6rem;margin:.35rem 0}.bar-row .lbl{width:120px;font-size:.84rem;flex:none}.bar-row .bar{flex:1;background:#eef2f0;border-radius:.4rem;height:1.1rem;overflow:hidden}.bar-row .bar i{display:block;height:100%;background:var(--one-green-3)}.bar-row .val{width:48px;text-align:right;font-weight:700;font-size:.84rem}
.thread .msg{background:#fff;border:1px solid var(--one-line);border-radius:.7rem;padding:.7rem .9rem;margin-bottom:.6rem}.thread .msg.mine{background:#eef7f2}.thread .msg.internal{background:#fff8e1;border-color:#f1d98a}
.instr-body ul,.instr-body ol{padding-left:1.3rem}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--one-green) 0%,#082d22 60%);padding:1rem}
.login-card{width:100%;max-width:410px;border-radius:1.1rem;border:0}
.notif-unread{background:#f2faf6;border-left:3px solid var(--one-green-3)}
.matrix th,.matrix td{text-align:center;vertical-align:middle}.matrix td:first-child,.matrix th:first-child{text-align:left}
@media(max-width:575px){.portal-card{padding:1.1rem .5rem .8rem}.portal-name{font-size:.92rem}}
@media print{.sidebar,.topbar,.bottom-nav{display:none!important}.main{margin:0!important}}

/* ---- progress bar for AJAX loads ---- */
#ajaxBar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--one-gold);z-index:2000;opacity:0;pointer-events:none}
#ajaxBar.on{opacity:1;width:70%;transition:width 8s cubic-bezier(.1,.7,.2,1)}
#ajaxBar.done{opacity:0;width:100%;transition:width .15s,opacity .25s .1s}

/* ---- collapsible groups in the sidebar ---- */
.side-head{display:flex;align-items:center;gap:.7rem;width:100%;background:none;border:0;text-align:left;margin-top:.5rem;padding:.55rem .85rem;color:#9fc0b3;font-size:.7rem;font-weight:700;letter-spacing:.16em;border-radius:.6rem}
.side-head:hover{background:rgba(255,255,255,.06);color:#fff}
.side-head>i:first-child{width:1.2rem;text-align:center;color:var(--one-gold);font-size:.95rem}
.side-head .caret{font-size:.65rem;transition:transform .2s}
.side-group.open .side-head .caret{transform:rotate(180deg)}
.side-group-body{display:none;margin-left:.85rem;border-left:1px solid rgba(255,255,255,.15);padding-left:.25rem}
.side-group.open .side-group-body{display:block}
.side-group.open .grp-badge{display:none}
.nav-link-top .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-link-top:focus-visible,.side-head:focus-visible{outline:2px solid var(--one-gold);outline-offset:-2px}

/* ---- desktop: collapse to an icon rail (state remembered) ---- */
@media(min-width:992px){
  html.sb-collapsed{--sidebar-w:72px}
  html.sb-collapsed .brand{justify-content:center;padding:1rem .4rem}
  html.sb-collapsed .brand span,html.sb-collapsed .side-foot,html.sb-collapsed .nav-link-top .lbl,html.sb-collapsed .side-head .lbl,html.sb-collapsed .side-head .caret,html.sb-collapsed .side-head>span.ms-auto{display:none}
  html.sb-collapsed .nav-link-top,html.sb-collapsed .side-head{justify-content:center;padding-left:.4rem;padding-right:.4rem;position:relative}
  html.sb-collapsed .nav-link-top .nbadge,html.sb-collapsed .side-head .nbadge{position:absolute;top:2px;right:6px;margin:0!important;font-size:.6rem;padding:.2em .45em}
  html.sb-collapsed .side-group-body{margin-left:0;border-left:0;padding-left:0}
  html.sb-collapsed .nav-link-admin{padding-left:.4rem}
}
/* phones & tablets: the sidebar is an off-canvas drawer, never collapsed */
@media(max-width:991.98px){.sidebar{width:min(300px,86vw)!important}.topbar .top-title{font-size:.9rem}}
@media(max-width:380px){.topbar .top-title{display:none}}
.content{outline:0}