/* Department page body (/departments/<slug>) inside the OneGIG shell.
   Rendered by js/dept-page.js; header, footer, title and back link come from
   the shell (js/app.js). Everything here is scoped under .dp-page. */
.dp-page{--wpp:#003D44; --wpt:#02373D; --wpg:#48822A; --wpl:#C1FA00; --wps:#F5F7F7; --wph:#F7FBEB; --wpb:#E4E9EA; --wpm:rgba(2,55,61,.72); --danger:#B4241C; --wpe:120ms cubic-bezier(.2,.6,.2,1);
  color:var(--wpt); padding-block-end:48px;}
.dp-page *, .dp-page *::before, .dp-page *::after{box-sizing:border-box;}
.dp-page [hidden]{display:none !important;}
.dp-page h2, .dp-page h3{margin:0; color:var(--wpp); font-weight:700; line-height:1.25;}
.dp-page button{font:inherit; cursor:pointer;}
.cc-eyebrow.dp-ent{display:inline-flex; align-items:center; gap:8px;}
.cc-eyebrow.dp-ent::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--dp-ent, #48822A);}

/* Notice banner (set by the department's admins), above the introduction */
.dp-page .dp-notice{display:flex; align-items:flex-start; gap:12px; margin:0 0 18px; padding:14px 16px; border-radius:12px; border:1px solid rgba(0,61,68,.18); border-inline-start:4px solid var(--wpp); background:rgba(0,61,68,.06); color:var(--wpt); font-size:15px; line-height:1.6; max-width:80ch;}
.dp-page .dp-notice svg{flex:0 0 auto; margin-block-start:3px; color:var(--wpp);}
.dp-page .dp-notice p{margin:0; white-space:pre-line; overflow-wrap:anywhere;}
.dp-page .dp-notice.important{border-color:#E8C46A; border-inline-start-color:#B98900; background:#FFF6DC; color:#4A3500;}
.dp-page .dp-notice.important svg{color:#B98900;}

/* Introduction + request links */
.dp-page .dp-intro p{margin:0; color:var(--wpm); font-size:16px; max-width:80ch;}
.dp-page .dp-intro p:empty{display:none;}
.dp-page .dept-reqs{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.dp-page .dept-req{display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border-radius:12px; background:#C1FA00; color:#003D44; font-weight:700; text-decoration:none; font-size:15px; box-shadow:0 1px 2px rgba(2,55,61,.08);}
.dp-page .dept-req:hover{background:#b2e800; text-decoration:none;}
.dp-page .dept-req small{display:block; font-weight:500; font-size:12px; color:rgba(0,61,68,.75);}

/* Documents section header + filters */
.dp-page .sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; border-block-start:1px solid #EEF1F2; padding-block-start:22px; margin-block:22px 4px;}
.dp-page .sec-head h2{font-size:22px;}
.dp-page .sec-tools{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.dp-page .doc-count{font-size:14px; color:var(--wpm);}
.dp-page .toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-block:18px 14px;}
.dp-page .filters{display:flex; flex-wrap:wrap; gap:8px;}
.dp-page .chip{display:inline-flex; align-items:center; border:1px solid var(--wpb); background:#fff; color:var(--wpt); border-radius:999px; min-height:44px; padding:10px 18px; font-size:14.5px; font-weight:600; transition:background var(--wpe), border-color var(--wpe);}
.dp-page .chip:hover{background:var(--wph);}
.dp-page .chip.on{background:rgba(193,250,0,.4); color:var(--wpp); border-color:transparent; font-weight:700;}

/* Buttons + badges */
.dp-page .btn{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; border-radius:999px; min-height:44px; padding:8px 20px; border:1px solid var(--wpp); background:var(--wpp); color:#fff; text-decoration:none; transition:background var(--wpe), color var(--wpe), border-color var(--wpe);}
.dp-page .btn:hover{background:#0B4E55; color:#fff;}
.dp-page .btn.ghost{background:#fff; color:var(--wpp); border-color:var(--wpb);}
.dp-page .btn.ghost:hover{background:var(--wph); border-color:var(--wpg);}
.dp-page .btn.sm{min-height:38px; padding:6px 15px; font-size:13px;}
.dp-page .btn.danger{background:#fff; color:var(--danger); border-color:#E9CFCC;}
.dp-page .btn.danger:hover{background:#FBEDEC; border-color:var(--danger);}
.dp-page .btn:disabled{opacity:.5; cursor:default;}
.dp-page .badge{font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--wps); color:var(--wpt); border:1px solid var(--wpb); white-space:nowrap;}
.dp-page .badge.feat{background:var(--wpl); color:var(--wpp); border-color:var(--wpl); font-weight:700;}
.dp-page :focus-visible{outline:2px solid var(--wpg); outline-offset:2px; border-radius:6px;}

/* Document cards */
.dp-page .docs{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:16px;}
@media (min-width:1200px){.dp-page .docs{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.dp-page .docs{grid-template-columns:1fr;}}
.dp-page .doc{position:relative; background:#fff; border:1px solid var(--wpb); border-radius:12px; padding:18px 20px; display:grid; grid-template-columns:44px 1fr; column-gap:14px; row-gap:8px; align-content:start; transition:background var(--wpe), border-color var(--wpe);}
.dp-page .doc:hover{background:var(--wph); border-color:rgba(72,130,42,.4);}
.dp-page .doc > *{grid-column:2; min-width:0;}
.dp-page .doc-ic{display:grid; grid-column:1; grid-row:1 / span 6; place-items:center; width:44px; height:44px; border-radius:10px; background:rgba(193,250,0,.32); color:var(--wpp);}
.dp-page .doc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.dp-page .doc h3{font-size:16.5px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.dp-page .doc-sum{margin:0; font-size:14px; color:var(--wpm);}
.dp-page .doc .meta{display:flex; align-items:center; gap:10px; margin-block-start:auto; padding-block-start:6px; flex-wrap:wrap;}
.dp-page .doc .upd{font-size:13px; color:var(--wpm);}
.dp-page .ver-list{margin-top:10px; border-top:1px solid rgba(2,55,61,.12); padding-top:8px; font-size:13px;}
.dp-page .ver-row{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; padding:3px 0;}
.dp-page .ver-note{color:var(--wpm);}
.dp-page .state{grid-column:1 / -1; background:#fff; border:1px solid var(--wpb); border-radius:12px; padding:40px 24px; text-align:center;}
.dp-page .state p{color:var(--wpm); margin:6px 0 0;}
.dp-page .skel{background:#fff; border:1px solid var(--wpb); border-radius:12px; height:120px; position:relative; overflow:hidden;}
.dp-page .skel::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(0,61,68,.06), transparent); transform:translateX(-100%); animation:dpShimmer 1.3s infinite;}
@keyframes dpShimmer{to{transform:translateX(100%);}}

/* Rep manage drawer */
.dp-page .drawer-back{position:fixed; inset:0; background:rgba(2,42,48,.45); display:none; z-index:160;}
.dp-page .drawer-back.show{display:block;}
.dp-page .drawer{position:fixed; inset-block:0; inset-inline-end:0; width:min(480px,95vw); background:#fff; z-index:165; box-shadow:-18px 0 44px rgba(2,55,61,.14); transform:translateX(110%); visibility:hidden; transition:transform .22s ease, visibility 0s linear .22s; display:flex; flex-direction:column;}
html[dir="rtl"] .dp-page .drawer{transform:translateX(-110%); box-shadow:18px 0 44px rgba(2,55,61,.14);}
.dp-page .drawer.show{transform:translateX(0) !important; visibility:visible; transition:transform .22s ease;}
.dp-page .d-head{background:#fff; color:var(--wpp); border-block-end:1px solid var(--wpb); padding:12px 20px; display:flex; align-items:center; justify-content:space-between;}
.dp-page .d-head b{font-size:17px;}
.dp-page .d-head button{background:transparent; border:0; color:var(--wpp); font-size:1.3rem; min-width:44px; min-height:44px;}
.dp-page .d-body{padding:18px 20px; overflow-y:auto; flex:1;}
.dp-page .d-note{font-size:13px; color:var(--wpm); margin:0 0 12px;}
.dp-page .d-foot{padding:12px 20px; border-block-start:1px solid var(--wpb); display:flex; gap:8px; justify-content:flex-end;}
.dp-page .field{margin-block-end:12px;}
.dp-page .field label{display:block; font-size:13px; font-weight:700; margin-block-end:5px; color:var(--wpp);}
.dp-page .field input, .dp-page .field select{width:100%; border:1px solid var(--wpb); border-radius:10px; min-height:44px; padding:9px 11px; font-size:15px; font-family:inherit; background:#fff; color:var(--wpt);}
.dp-page .field input:focus, .dp-page .field select:focus{border-color:var(--wpg); outline:none; box-shadow:0 0 0 2px rgba(72,130,42,.18);}
.dp-page .form-row{display:flex; gap:10px; flex-wrap:wrap;}
.dp-page .form-row .field{flex:1; min-width:130px;}
.dp-page .ed-row{border:1px solid var(--wpb); border-radius:12px; padding:12px; margin-block-end:10px;}
.dp-page .ed-row.inactive{opacity:.6;}
.dp-page .ed-top{display:flex; justify-content:space-between; gap:8px; align-items:center; font-size:14.5px;}
.dp-page .btn-row{display:flex; gap:8px; flex-wrap:wrap; margin-block-start:8px;}
.dp-page details summary{cursor:pointer; color:var(--wpm); font-size:13px;}
.dp-page .up-zone{border:2px dashed rgba(2,55,61,.25); border-radius:12px; padding:16px; text-align:center; cursor:pointer; background:#fff;}
.dp-page .up-zone:hover, .dp-page .up-zone.drag{border-color:#48822A; background:#F7FBEB;}
.dp-page .up-idle b{display:block; color:#003D44;}
.dp-page .up-idle small{display:block; color:rgba(2,55,61,.7); font-size:12.5px;}
.dp-page .up-state{text-align:start;}
.dp-page .up-bar{height:6px; border-radius:3px; background:#EEF1F2; overflow:hidden; margin:8px 0;}
.dp-page .up-bar i{display:block; height:100%; background:linear-gradient(90deg,#C1FA00,#48822A); width:0%; transition:width .2s;}

/* Media Library picker + department archive dialogs */
.dp-page .ml-back, .dp-page .arch-back{position:fixed; inset:0; background:rgba(2,42,48,.5); display:none; z-index:180; align-items:center; justify-content:center; padding:18px;}
.dp-page .ml-back.show, .dp-page .arch-back.show{display:flex;}
.dp-page .ml-modal{background:#fff; border:1px solid var(--wpb); border-radius:14px; width:min(760px,96vw); max-height:86vh; display:flex; flex-direction:column; overflow:hidden;}
.dp-page .ml-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-block-end:1px solid var(--wpb);}
.dp-page .ml-head input{flex:1; border:1px solid var(--wpb); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:14px;}
.dp-page .ml-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; padding:16px; overflow-y:auto;}
.dp-page .ml-item{border:1px solid var(--wpb); border-radius:10px; overflow:hidden; cursor:pointer; background:#fff;}
.dp-page .ml-item:hover{border-color:var(--wpp);}
.dp-page .ml-th{aspect-ratio:16/10; background:#E3EDEC center/cover no-repeat; display:grid; place-items:center; color:var(--wpp); font-weight:700; font-size:12px;}
.dp-page .ml-nm{padding:7px 9px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dp-page .ml-none{padding:20px; color:var(--wpm); font-size:14px;}
.dp-page .arch{background:#fff; border:1px solid var(--wpb); border-radius:14px; max-width:860px; width:100%; max-height:85vh; overflow:auto; padding:18px 20px;}
.dp-page .arch-top{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.dp-page .arch-top h3{flex:1;}
.dp-page .arch-row{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; border-bottom:1px solid #EEF1F2; font-size:14px;}
.dp-page .arch-row:hover{background:#F7FBEB;}
.dp-page .arch-row small{color:rgba(2,55,61,.7);}

.dp-page .dp-toast{position:fixed; inset-block-end:24px; inset-inline:0; margin-inline:auto; width:max-content; max-width:80vw; background:var(--wpp); color:#fff; padding:11px 18px; border-radius:999px; font-size:14px; opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s; z-index:200;}
.dp-page .dp-toast.show{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.dp-page .skel::after, .dp-page .drawer, .dp-page .doc, .dp-page .btn, .dp-page .chip{animation:none; transition:none;}}