: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}

/* ======================= MIEDECO DOCUMENT HUB additions ======================= */
.top-search{position:relative;flex:1 1 auto;max-width:520px;margin:0 .5rem}
.top-search>i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:#b9d3c8;pointer-events:none;font-size:.85rem}
.top-search input{width:100%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:2rem;padding:.38rem .9rem .38rem 2.2rem;font-size:.9rem}
.top-search input::placeholder{color:#b9d3c8}.top-search input:focus{outline:0;background:#fff;color:#1f2a26;border-color:var(--one-gold)}.top-search input:focus::placeholder{color:#7a8a83}
.top-search input::-webkit-search-cancel-button{filter:none}
.search-suggest{position:absolute;left:0;right:0;top:calc(100% + .35rem);background:#fff;border:1px solid var(--one-line);border-radius:.8rem;box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden;z-index:1060}
.suggest-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .75rem;color:var(--one-text);text-decoration:none;border-bottom:1px solid var(--one-line);min-width:0}
.suggest-item:hover{background:#f2faf6}.suggest-item small{font-size:.74rem}
.suggest-empty{padding:.8rem;color:#6b7a73;font-size:.88rem}.suggest-all{display:block;padding:.5rem .75rem;text-align:center;font-weight:600;font-size:.84rem;text-decoration:none;background:#f8faf9}

.doc-icon{flex:none;width:2.4rem;height:2.4rem;border-radius:.7rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;color:#fff}
.doc-icon.is-file{background:var(--one-green-3)}.doc-icon.is-link{background:#2980b9}
.doc-icon.sm{width:1.9rem;height:1.9rem;font-size:.85rem;border-radius:.55rem}.doc-icon.lg{width:3.6rem;height:3.6rem;font-size:1.6rem;border-radius:1rem}
.doc-table td,.doc-table th{vertical-align:middle}
.doc-main{display:flex;align-items:flex-start;gap:.7rem;min-width:220px}.doc-main-text{min-width:0}
.doc-title{font-weight:600;color:var(--one-green);text-decoration:none;word-break:break-word}.doc-title:hover{text-decoration:underline}
.tag-chip{display:inline-block;font-size:.7rem;background:#eef2f0;color:#3b4a43;border-radius:1rem;padding:.05rem .5rem;margin:0 .2rem .15rem 0;text-decoration:none}
a.tag-chip:hover{background:#dfeee6}
.cat-chip{display:inline-block;font-size:.76rem;font-weight:600;color:var(--c,#145a43);border:1px solid var(--c,#145a43);border-radius:1rem;padding:.05rem .55rem}
.cat-icon{display:inline-flex;width:1.9rem;height:1.9rem;border-radius:.55rem;background:var(--c,#145a43);color:#fff;align-items:center;justify-content:center;font-size:.85rem}
.btn-icon{background:none;border:0;color:#6b7a73;padding:.25rem .4rem;font-size:1rem;border-radius:.4rem;text-decoration:none;display:inline-block;line-height:1}
.btn-icon:hover{background:#eef2f0;color:var(--one-green)}.btn-icon.fav.on{color:var(--one-gold)}
.btn.is-busy{opacity:.7;pointer-events:none}
.hub-tabs .nav-link{color:var(--one-green);font-weight:600;font-size:.88rem;padding:.35rem .9rem}.hub-tabs .nav-link.active{background:var(--one-green);color:#fff}
.mini-list{list-style:none;margin:0;padding:0}.mini-list li{display:flex;align-items:center;gap:.65rem;padding:.5rem 0;border-bottom:1px dashed var(--one-line)}.mini-list li:last-child{border-bottom:0}
.mini-text{flex:1;min-width:0}.mini-text a{font-weight:600;color:var(--one-green);text-decoration:none;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mini-text a:hover{text-decoration:underline}
.stat-tile{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border:1px solid var(--one-line);border-radius:.9rem;padding:.9rem .5rem;text-decoration:none;color:var(--one-text);height:100%;transition:transform .15s,box-shadow .15s}
.stat-tile:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(11,61,46,.12)}.stat-tile i{color:var(--one-gold);font-size:1.2rem}.stat-tile b{font-size:1.7rem;color:var(--one-green);line-height:1.2}.stat-tile span{font-size:.76rem;color:#6b7a73}
.cat-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem}
.cat-tile{display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--one-line);border-left:4px solid var(--c);border-radius:.7rem;padding:.55rem .7rem;text-decoration:none;color:var(--one-text)}
.cat-tile:hover{border-color:var(--c);box-shadow:0 4px 12px rgba(0,0,0,.08)}.cat-tile .cat-icon{background:var(--c)}.cat-name{font-weight:600;font-size:.88rem;flex:1}.cat-n{font-weight:700;color:var(--c)}
.folder-chip{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--one-line);border-radius:2rem;padding:.3rem .8rem;font-size:.85rem;color:var(--one-green);text-decoration:none;font-weight:600}
.folder-chip i{color:var(--one-gold)}.folder-chip:hover{border-color:var(--one-green-3);background:#f2faf6}
.breadcrumb{font-size:.86rem;margin-bottom:.4rem}.breadcrumb a{text-decoration:none}
.ftree,.ftree ul{list-style:none;margin:0;padding-left:.9rem}.ftree{padding-left:0}
.ftree-row{display:flex;align-items:center}
.ftree-toggle,.ftree-toggle-spacer{width:1.3rem;flex:none;text-align:center;font-size:.65rem;color:#6b7a73;background:none;border:0;padding:.2rem 0}
.ftree-toggle i{transition:transform .15s}.ftree li.open>.ftree-row .ftree-toggle i{transform:rotate(90deg)}
.ftree li:not(.open)>ul{display:none}
.ftree-link{display:flex;align-items:center;gap:.4rem;flex:1;min-width:0;padding:.28rem .5rem;border-radius:.5rem;color:var(--one-text);text-decoration:none;font-size:.88rem}
.ftree-link i{color:var(--one-gold)}.ftree-link:hover{background:#eef2f0}.ftree-link.active{background:rgba(201,162,39,.2);font-weight:700}
.ftree-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ftree-count{font-size:.72rem;color:#6b7a73;background:#eef2f0;border-radius:1rem;padding:0 .45rem}
.ftree-all{margin-bottom:.2rem;padding-left:1.8rem}
.preview-frame{width:100%;height:72vh;border:0;display:block;background:#f3f5f4}
.preview-img{max-width:100%;max-height:72vh;display:block;margin:0 auto}
.timeline{list-style:none;margin:0;padding:0 0 0 .3rem;border-left:2px solid var(--one-line)}.timeline li{position:relative;padding:0 0 .8rem 1rem;font-size:.88rem}
.timeline li::before{content:"";position:absolute;left:-.42rem;top:.35rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--one-green-3)}
.detail-list dt{color:#6b7a73;font-weight:600}.detail-list dd{margin-bottom:.45rem}
.hub-toasts{z-index:2100}
.invalid-feedback.hub-err{display:block}
.rules-panel{border-top:1px solid var(--one-line);padding-top:.5rem}
.matrix .form-switch .form-check-input{float:none;margin:0}
.modal-body .form-label{margin-bottom:.2rem}
@media(max-width:991.98px){.top-search{max-width:none}.doc-main{min-width:0}}
@media(max-width:575.98px){.top-search input{font-size:.85rem}.hero{padding:1rem}.hero h3{font-size:1.2rem}}
@media print{.top-search,.hub-toasts{display:none!important}}

/* =====================================================================================
   v1.1  Responsive + plain-language redesign
   ===================================================================================== */
:root{--focus:#0f6b4d;--muted:#56655e}
.text-muted,.form-text{color:var(--muted)!important}
.small.text-muted a{color:inherit}
/* ---- accessibility ---- */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:.3rem}
.topbar :focus-visible,.sidebar :focus-visible,.bottom-nav :focus-visible{outline-color:var(--one-gold)}
.form-control:focus-visible,.form-select:focus-visible{outline:0}
.skip-link{position:absolute;left:.5rem;top:-4rem;background:#fff;color:var(--one-green);padding:.6rem 1rem;border-radius:.5rem;z-index:3000;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.skip-link:focus{top:.5rem}
.link-touch{display:inline-block;padding:.5rem 0}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
h1,h2,h3,h4,h5{overflow-wrap:anywhere}
.section-title{font-size:.8rem;font-weight:700;margin:1.2rem 0 .6rem}
h2.section-title{margin-top:1.2rem}

/* ---- sidebar sections ---- */
.side-nav{padding-bottom:1rem}
.side-group-body{margin-left:0;border-left:0;padding-left:0}
.side-head{margin-top:.35rem;color:#a9c9bc}
.side-head .lbl{letter-spacing:.14em}
.nav-link-top{width:100%;background:none;border:0;text-align:left;font-size:.95rem}
.nav-link-top.active{box-shadow:inset 3px 0 0 var(--one-gold);font-weight:700}
.nav-link-admin{font-size:.95rem;padding:.55rem .85rem}
.side-group-body .nav-link-top{padding-left:1.1rem}
html.sb-collapsed .side-group-body .nav-link-top{padding-left:.4rem}

/* ---- top bar + bottom bar ---- */
.topbar-btn{display:inline-flex;align-items:center;justify-content:center}
.bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;color:#556860;text-decoration:none;gap:2px;background:none;border:0;min-width:0;padding:0}
.bottom-nav button i{font-size:1.15rem}
.bottom-nav .active{color:var(--one-green);font-weight:700;box-shadow:inset 0 3px 0 var(--one-green)}
:root{--bottom-h:62px}

/* ---- dashboard ---- */
.hero{padding:1.2rem 1.3rem}.hero h3{font-size:1.45rem}.hero p{font-size:1.02rem;max-width:60rem}
.quick-action{display:flex;align-items:center;gap:.8rem;width:100%;min-height:76px;text-align:left;background:#fff;border:1px solid var(--one-line);border-radius:.9rem;padding:.7rem .9rem;color:var(--one-text);text-decoration:none;height:100%;font:inherit}
.quick-action:hover{border-color:var(--one-green-3);box-shadow:0 4px 12px rgba(11,61,46,.1);color:var(--one-text)}
.quick-action>i{flex:none;width:2.6rem;height:2.6rem;border-radius:.8rem;background:var(--one-green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.quick-action b{display:block;font-size:.98rem;line-height:1.2;color:var(--one-green)}.quick-action small{display:block;color:var(--muted);font-size:.8rem;line-height:1.25;margin-top:.15rem}
.stat-tile{padding:1rem .6rem}.stat-tile b{font-size:1.9rem}.stat-tile span{font-size:.88rem;color:var(--muted);font-weight:600}

/* ---- library: search card, filters, table -> cards ---- */
.view-help{font-size:.95rem;max-width:56rem}
.filter-card{padding:.85rem}
.search-row{display:flex;gap:.5rem;align-items:stretch}
.filter-toggle{white-space:nowrap}
.btn[aria-expanded=true] .when-closed,.btn[aria-expanded=false] .when-open{display:none}
.more-toggle[aria-expanded=true] .caret{transform:rotate(180deg)}
.doc-list-wrap{overflow-x:auto}
.doc-table{min-width:0}
.doc-table .doc-main{display:flex;align-items:flex-start;gap:.75rem;min-width:240px}
.doc-title{display:inline-block;overflow-wrap:anywhere;line-height:1.3;font-size:1rem}
.doc-main-text{min-width:0;overflow-wrap:anywhere}
.doc-type{margin:.15rem 0}
.type-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;color:#33433c;background:#eef2f0;border-radius:2rem;padding:.12rem .6rem;max-width:100%}
.type-badge small{font-weight:500;color:var(--muted);font-size:.76rem}.type-badge small::before{content:"· "}
.type-badge.is-link i{color:#1f6fa6}.type-badge.is-file i{color:var(--one-green-3)}
.doc-table .doc-status{white-space:nowrap;width:1%}
.doc-table .doc-status .badge{font-size:.76rem;padding:.4em .6em}
.doc-table .doc-updated{white-space:nowrap;width:1%}
.doc-table .doc-actions{white-space:nowrap;text-align:right;width:1%}
.doc-actions>*{vertical-align:middle}
.doc-primary{min-width:8.6rem}
.btn-icon{padding:.4rem .55rem;font-size:1.05rem}
.cat-tile{cursor:pointer;font:inherit;text-align:left;width:100%}
.cat-tile.active{background:#eaf5ef;border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset}
.folder-chip{min-height:2.4rem}
.back-link{border:1px solid var(--one-line)}
.toast-link{color:#fff;font-weight:700;text-decoration:underline;display:inline-block;padding:.3rem 0}
.hub-toasts .toast{max-width:100%}

@media(max-width:767.98px){
  .doc-list-wrap{overflow:visible}
  .doc-table,.doc-table tbody{display:block;width:100%}
  .doc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .doc-table tr{display:block}
  .doc-table td{display:block;border:0;padding:0;width:auto!important}
  .doc-table tr[data-doc]{padding:.9rem .9rem .8rem;border-bottom:1px solid var(--one-line)}
  .doc-table tr[data-doc]:last-child{border-bottom:0}
  .doc-table tr:not([data-doc]) td{padding:1rem}
  .doc-table .doc-main{min-width:0}
  .doc-table .doc-status{margin:.5rem 0 .2rem;display:flex;flex-wrap:wrap;gap:.35rem}
  .doc-table .doc-updated{margin-bottom:.5rem}
  .doc-table .doc-actions{display:flex;align-items:center;gap:.35rem;margin-top:.4rem}
  .doc-table .doc-actions .doc-primary{flex:1 1 auto}
  .doc-table .doc-actions .dropdown{margin-left:0}
  .doc-icon{width:2.6rem;height:2.6rem}
  .search-row .input-group-lg>.form-control,.search-row .input-group-lg>.input-group-text{font-size:1rem}
}

/* ---- guided forms ---- */
.form-section h3{font-size:.9rem;font-weight:700;color:var(--one-green);margin:.6rem 0 0;padding-bottom:.35rem;border-bottom:2px solid var(--one-line)}
.form-section p{margin:.3rem 0 0;font-size:.85rem;color:var(--muted)}
.form-intro{background:#eef7f2;border-left:4px solid var(--one-green-3);border-radius:.5rem;padding:.7rem .9rem;font-size:.92rem}
.dropzone{position:relative;border:2px dashed #8fb3a3;border-radius:.9rem;background:#f6faf8;min-height:128px;display:flex;align-items:center;justify-content:center;padding:1rem;text-align:center;transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone:focus-within{border-color:var(--one-green-3);background:#eef7f2}
.dropzone.drag{border-color:var(--one-green);background:#e2f2e9}
.dropzone.is-invalid{border-color:#c0392b;background:#fdf3f2}
.dropzone.has-file{border-style:solid;border-color:var(--one-green-3);background:#f2faf6}
.dropzone-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:0}
.dz-empty>i,.dz-chosen>i{font-size:2rem;color:var(--one-green-3);display:block;margin-bottom:.4rem}
.dz-or{color:var(--muted)}
.dz-btn{pointer-events:none}
.dz-chosen{display:flex;align-items:center;gap:.8rem;text-align:left;width:100%}.dz-chosen>i{margin:0;flex:none}
.dz-info{min-width:0;flex:1}.dz-name{display:block;overflow-wrap:anywhere;word-break:break-all}.dz-size{color:var(--muted)}
.dz-change{pointer-events:none;flex:none}
.modal-footer .btn{min-width:6.5rem}

/* ---- tables that become cards on phones (admin pages): labels are filled in by hub.js ---- */
@media(max-width:767.98px){
  .stack-sm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .stack-sm,.stack-sm tbody{display:block;width:100%}
  .stack-sm tr{display:block;padding:.75rem .9rem;border-bottom:1px solid var(--one-line)}
  .stack-sm tr:last-child{border-bottom:0}
  .stack-sm tbody td{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.3rem 0;border:0;text-align:left!important;overflow-wrap:anywhere}
  .stack-sm tbody td.d-none{display:flex!important}
  .stack-sm tbody td[data-label]::before{content:attr(data-label);flex:none;font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;max-width:45%}
  .stack-sm tbody td:first-child{display:block;font-weight:700;font-size:1rem}
  .stack-sm tbody td:first-child::before{display:none}
  .stack-sm tbody td:last-child:not(:first-child){justify-content:flex-start;flex-wrap:wrap;padding-top:.5rem}
  .stack-sm tbody td:last-child::before{display:none}
  .stack-sm tbody td[colspan]{display:block;text-align:center!important}
  .stack-sm tbody td[colspan]::before{display:none}
}
.matrix .form-switch{padding:0;margin:0;display:flex;justify-content:center}
.matrix .form-check-input{float:none;margin:0}
.matrix td{padding-top:.5rem;padding-bottom:.5rem}
@media(max-width:767.98px){.matrix .form-switch{justify-content:flex-end}.matrix tbody td:first-child{background:#f8faf9;margin:-.75rem -.9rem .4rem;padding:.6rem .9rem;border-bottom:1px solid var(--one-line)}}

/* ---- touch comfort: everything tappable is at least 44 x 44 on phones and tablets ---- */
@media(max-width:1023.98px),(pointer:coarse){
  .btn,.btn-sm,.btn-lg,.form-control,.form-select,.form-control-sm,.form-select-sm,.input-group-text,.nav-link,.dropdown-item,.page-link,.topbar-btn,.side-head,.nav-link-top,.btn-icon,.folder-chip,.ftree-link,.ftree-toggle{min-height:44px}
  .btn,.btn-sm{padding-top:.45rem;padding-bottom:.45rem;display:inline-flex;align-items:center;justify-content:center;gap:.25rem}
  .btn-icon,.topbar-btn,.ftree-toggle{min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .page-link{min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .dropdown-item{padding-top:.65rem;padding-bottom:.65rem;display:flex;align-items:center}
  .top-search input{min-height:44px}
  .form-check{min-height:44px;display:flex;align-items:center;gap:.6rem;padding-left:0}
  .form-check .form-check-input{float:none;margin:0;flex:none;width:1.6rem;height:1.6rem}
  .form-check.form-switch .form-check-input{width:3rem;height:1.6rem}
  .perm-toggle{width:3rem!important;height:1.6rem!important}
  .breadcrumb a{display:inline-block;padding:.65rem .25rem}
  .tag-chip{padding:.35rem .7rem}
  .btn-close{width:44px;height:44px;background-size:1em;opacity:.7}
  .hub-tabs .nav-link,.nav-tabs .nav-link{display:flex;align-items:center}
  .bottom-nav a,.bottom-nav button{min-height:48px}
  .modal-body .form-label{margin-bottom:.3rem;font-size:.9rem}
  .form-select,.form-control{font-size:1rem}
  .doc-title{min-height:44px;display:inline-flex;align-items:center;padding:.2rem 0}
  .btn,.btn-sm{min-width:44px}
  a.tag-chip{display:inline-flex;align-items:center;min-height:44px}
  .mini-text a{min-height:44px;display:flex;align-items:center;white-space:normal}
  .link-touch{min-height:44px;display:inline-flex;align-items:center}
  .breadcrumb a{min-height:44px;display:inline-flex;align-items:center;padding:0 .35rem}
  a.suggest-item,.suggest-all{min-height:48px}
}
/* phones: forms and previews use the whole screen */
@media(max-width:575.98px){
  .modal-footer{position:sticky;bottom:0;background:#fff;gap:.5rem}
  .modal-footer .btn{flex:1 1 40%}
  .modal-dialog-scrollable .modal-content{max-height:100%}
  #hubModal .modal-body{padding:1rem}
  .toast-container{left:0;right:0;padding:.75rem!important}
  .page-title-actions .btn{flex:1}
}
.page-head{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
@media(max-width:575.98px){#ajax-main>.d-flex.flex-wrap.align-items-center>.ms-auto{width:100%;margin-left:0!important}#ajax-main>.d-flex.flex-wrap.align-items-center>.ms-auto>.btn{flex:1 1 auto}}

@media(max-width:575.98px){
  .doc-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;-webkit-overflow-scrolling:touch}.doc-pills .nav-link{white-space:nowrap}
  .sub-folders{flex-wrap:nowrap!important;overflow-x:auto;padding-bottom:.4rem}.sub-folders .folder-chip{white-space:nowrap;flex:none}
  .modal-footer .btn-light{flex:0 0 auto}.modal-footer .btn-one,.modal-footer .btn-danger{flex:1 1 auto}
}
