@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@400;500;600;700&display=swap');
:root { color-scheme:light; --navy:#14263f; --navy2:#203a58; --primary:#0e7294; --primary-dark:#075878; --mint:#e9f6f6; --bg:#f5f7fb; --surface:#fff; --text:#1b293c; --muted:#768496; --line:#e5ebf1; --radius:14px; }
*{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:'Prompt',system-ui,sans-serif;color:var(--text);background:var(--bg);font-size:14px} button,input,textarea,select{font:inherit} button{cursor:pointer} .hidden{display:none!important} .muted{color:var(--muted)} .mini{font-size:12px} .eyebrow{font-size:10px;font-weight:700;color:#7f93a9;letter-spacing:1.3px;margin:0 0 5px} h1,h2,h3,p{margin-top:0} h1{font-size:23px;line-height:1.4} h2{font-size:18px;margin-bottom:3px} h3{font-size:16px} a{color:var(--primary)}
.center-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px}.auth-card{width:min(100%,460px);padding:36px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 45px #1c355113;border-radius:20px;text-align:center}.auth-card h1{margin:8px 0}.auth-card .muted{line-height:1.8}.logo{width:43px;height:43px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(140deg,#40a8af,#0c587c);color:#fff;font-weight:700;font-size:17px;flex:none}.logo.large{width:62px;height:62px;border-radius:16px;font-size:25px;margin:0 auto 18px}.auth-tabs{display:flex;gap:5px;background:#f0f4f8;border-radius:10px;margin:28px 0 20px;padding:4px}.tab{flex:1;border:0;background:transparent;padding:10px;border-radius:8px;color:#728396}.tab.active{background:white;color:var(--navy);font-weight:600;box-shadow:0 1px 6px #13264112}.form-stack{display:grid;gap:14px}.form-stack label,.dialog-body label{display:grid;gap:6px;text-align:left;color:#3c4a5f;font-size:12px;font-weight:600}.form-stack input,.dialog-body input,.dialog-body textarea,.dialog-body select{width:100%;min-height:41px;padding:11px 12px;background:#fff;border:1px solid #dce4eb;border-radius:9px;outline:none;color:var(--text)}.form-stack input:focus,.dialog-body input:focus,.dialog-body textarea:focus,.dialog-body select:focus,.filters input:focus,.filters select:focus{border-color:#22a0bd;box-shadow:0 0 0 3px #22a0bd13}.notice{font-size:11px;color:#758396;line-height:1.7}.btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:9px;border:1px solid #dae3ec;background:#fff;font-weight:600;white-space:nowrap}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary-dark)}.btn.quiet:hover{background:#f3f7fa}.btn.full{width:100%;margin-top:4px}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-icon{background:transparent;border:0;font-size:18px;color:#8290a0;padding:8px;line-height:1}
.app-layout{display:flex;min-height:100vh}.sidebar{width:250px;flex:none;background:var(--navy);color:#fff;display:flex;flex-direction:column;padding:24px 16px;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;padding:0 9px 36px}.brand b{font-size:15px;display:block}.brand small{font-size:10px;color:#91a6b8;display:block;letter-spacing:.2px}.sidebar-label{font-size:10px;letter-spacing:1.2px;color:#819ab0;padding:0 15px;margin:0 0 12px}.nav{display:grid;gap:6px}.nav-btn{background:transparent;color:#c3cfdd;border:0;border-radius:9px;display:flex;align-items:center;text-align:left;gap:12px;padding:13px 15px;width:100%;font-size:13px}.nav-btn span{font-size:20px;width:21px;text-align:center}.nav-btn.active,.nav-btn:hover{background:#2a4563;color:#fff}.sidebar-bottom{margin-top:auto;padding:16px 8px 0;border-top:1px solid #37506a;display:flex;align-items:center;gap:9px}.avatar{width:35px;height:35px;display:grid;place-items:center;background:#3a657a;border-radius:50%;font-weight:600}.identity{min-width:0;flex:1}.identity b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.identity small{font-size:10px;color:#adc0d0}.main-area{flex:1;min-width:0}.topbar{background:#fff;border-bottom:1px solid var(--line);padding:26px 36px;display:flex;align-items:center;justify-content:space-between}.topbar h1{font-size:23px;margin:0}.topbar-right{display:flex;align-items:center;gap:14px;font-size:12px}.page{padding:30px 36px;max-width:1440px;margin:0 auto}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:21px}.section-head .muted{font-size:12px;margin:3px 0 0}.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding:18px 19px;box-shadow:0 1px 10px #1b335105}.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.searchbox{border:1px solid #dfe6ed;border-radius:9px;display:flex;align-items:center;gap:7px;flex:1;min-width:230px;padding:0 11px}.searchbox span{font-size:24px;color:#93a0ad}.searchbox input{border:none;outline:none;height:42px;min-width:0;flex:1;background:transparent;font-size:12px}.filters select{height:43px;border:1px solid #dfe6ed;border-radius:9px;padding:0 11px;background:white;color:#445368;outline:none;font-size:12px}.table-note{font-size:11px;color:#97a2b0;margin:15px 0 8px}.table-scroll{width:100%;overflow-x:auto} table{border-collapse:collapse;width:100%;text-align:left} th{color:#8090a2;background:#f7f9fc;font-weight:500;font-size:11px;padding:13px 12px;white-space:nowrap} td{border-bottom:1px solid #ecf0f4;padding:15px 12px;font-size:12px;color:#4b5a69;vertical-align:middle} tr:last-child td{border-bottom:0}.doc-title{font-weight:600;color:#253a52;max-width:320px}.doc-sub{font-size:11px;color:#96a0ac;margin-top:4px}.pill{border-radius:50px;padding:4px 9px;display:inline-block;font-size:10px;font-weight:600;background:#eef3f8;color:#4c6580;white-space:nowrap}.pill.completed,.pill.active{background:#e2f7ee;color:#16855d}.pill.draft,.pill.pending{background:#fff3da;color:#a8710a}.pill.disabled{background:#fce8e8;color:#b44b4b}.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.action{border:0;background:#eef6fa;color:#0d7391;padding:6px 8px;border-radius:6px;font-weight:600;font-size:10px}.action.danger{background:#fff0f0;color:#be5353}.action:hover{filter:brightness(.95)}.action:disabled{opacity:.4}.empty{color:#8b98a7;text-align:center;padding:45px!important}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat{background:#fff;border:1px solid var(--line);padding:22px;border-radius:var(--radius)}.stat .big{font-size:29px;font-weight:700;margin-top:7px;color:#23435f}.stat .muted{font-size:12px}.stat .badge-icon{background:#e7f5f7;color:#0d7b99;width:35px;height:35px;border-radius:9px;display:grid;place-items:center;font-size:18px}.recent-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line)}.recent-item b{font-size:12px}.recent-item small{color:#9ba4ad}
.doc-dialog{width:min(96vw,675px);max-height:93vh;border:1px solid var(--line);border-radius:17px;box-shadow:0 20px 90px #0e284038;padding:0}.doc-dialog::backdrop{background:#11253d88}.dialog-head{padding:24px 27px 17px;display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line)}.dialog-head h2{margin-bottom:0;font-size:20px}.dialog-body{max-height:65vh;overflow-y:auto;display:grid;gap:16px;padding:22px 27px}.dialog-body input[type=file]{padding:10px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}.required{color:#d26360}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);padding:16px 27px}.toast{position:fixed;right:20px;bottom:20px;z-index:100;background:#203a55;color:#fff;border-radius:10px;box-shadow:0 10px 35px #132a4033;max-width:400px;padding:13px 18px;line-height:1.6;display:none}.toast.visible{display:block}.toast.error{background:#9a353c}.spinner{height:30px;width:30px;border-radius:50%;border:3px solid #dcebf0;border-top-color:var(--primary);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:950px){.sidebar{width:76px;padding:18px 9px}.brand{padding:0 7px 28px}.brand>div:last-child,.sidebar-label,.nav-btn{font-size:0}.nav-btn span{font-size:23px}.sidebar-bottom .identity,.sidebar-bottom .btn-icon{display:none}.sidebar-bottom{justify-content:center}.topbar{padding:22px}.page{padding:22px}.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.app-layout{display:block}.sidebar{position:static;width:100%;height:auto;padding:11px 12px}.brand{padding:0}.brand b{font-size:14px}.brand small{font-size:9px}.nav{display:flex;overflow-x:auto;padding-top:11px}.nav-btn{padding:8px 10px;font-size:11px;white-space:nowrap;width:auto}.nav-btn span{font-size:16px;width:auto}.sidebar-bottom,.sidebar-label{display:none}.topbar{padding:17px 15px}.topbar h1{font-size:19px}.topbar-right #userGreeting{display:none}.page{padding:18px 12px}.section-head{align-items:start}.section-head h2{font-size:16px}.section-head .muted{font-size:11px}.panel{padding:10px}.searchbox{min-width:100%}.filters select{flex:1}.stats-grid{gap:10px}.stat{padding:15px}.stat .big{font-size:25px}.two-cols{grid-template-columns:1fr}.dialog-head,.dialog-body,.dialog-actions{padding-left:17px;padding-right:17px}.auth-card{padding:24px}}
/* v2: routing, approval, incoming/outgoing registers */
.nav-count{margin-left:auto;font-size:10px;background:#355775;color:#dff5fa;padding:2px 7px;border-radius:30px}.nav-btn.active .nav-count{background:#1c8294;color:white}
.stat-link{display:block;text-align:left;width:100%;cursor:pointer}.stat-link:hover{border-color:#89cbd7;box-shadow:0 8px 18px #0c789415}
.registration{color:#087a94;font-size:13px}.pill.approved{background:#e1f6eb;color:#127351}.pill.rejected{background:#fce5e5;color:#b73f48}.pill.pending{background:#fdf0d5;color:#996706}.pill.draft{background:#eef2f6;color:#6f8297}
.small-label{font-size:11px;color:#99a8b7}.section-head.small{margin-bottom:6px;align-items:center}.recent-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.recent-item .doc-sub{max-width:550px}
.department-form{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:0 0 23px;border-bottom:1px solid #eaf0f3;margin:0 0 12px}.department-form label{display:grid;gap:7px;min-width:150px;flex:1;font-size:12px;color:#43546b}.department-form input{padding:10px 11px;border:1px solid #dce4eb;border-radius:8px;min-height:41px}
.member-department,.member-role,.member-status{max-width:200px;padding:7px;border:1px solid #dce3ea;border-radius:7px;background:white;font-size:11px}
.helper-banner{background:#eef7fa;border:1px solid #d6edf2;border-radius:11px;padding:12px 14px;display:grid;gap:3px;color:#12667e;font-size:12px}.helper-banner span{color:#6b8a99;font-size:11px}.route-box{border:1px solid #e0eaf0;border-radius:11px;padding:15px;background:#fbfcfe}.route-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.route-title strong{font-size:13px}.route-title span{font-size:11px;color:#8997a8}.route-box .muted{margin:12px 0 0}.recipient-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;max-height:172px;overflow:auto}.recipient-item{display:flex!important;flex-direction:row!important;align-items:center!important;padding:9px 10px!important;gap:9px!important;border:1px solid #e4ebf1;border-radius:8px;background:white;font-size:12px!important;cursor:pointer}.recipient-item:has(input:checked){background:#eaf8fb;border-color:#72c3d0;color:#11677f}.recipient-item input{width:16px!important;height:16px!important;min-height:0!important;accent-color:#0c7b97;margin:0;padding:0}
#registerNumberPreview{background:#f4f7fa;opacity:.9}.doc-dialog{width:min(96vw,760px)}.detail-dialog{width:min(96vw,820px)}.detail-body{padding:20px 26px 5px;overflow-y:auto;max-height:35vh}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.detail-grid>div{display:flex;flex-direction:column;gap:5px;min-width:0}.detail-grid small,.doc-info small{color:#8999a8;font-size:11px}.detail-grid strong{font-size:13px;overflow-wrap:anywhere;font-weight:600}.doc-info{margin-top:20px;padding-top:12px;border-top:1px solid #eef2f6}.doc-info p{margin:5px 0;font-size:12px;white-space:pre-wrap}.preview-holder{border-top:1px solid #eef2f6;background:#f6f9fa;margin-top:14px;min-height:65px;max-height:36vh;overflow:auto;display:grid;place-items:center;color:#778799;font-size:12px}.preview-holder iframe{width:100%;height:34vh;border:0;background:white}.preview-holder img{max-width:100%;max-height:34vh;object-fit:contain}.btn.danger{background:#fff0f1;color:#b63b47;border-color:#f3d1d5}
@media(max-width:1050px){.nav-count{display:none}}
@media(max-width:620px){.nav-count{display:inline-block}.nav-btn{white-space:nowrap}.stat .big{font-size:23px}.recent-actions{gap:3px}.recent-item{gap:9px}.recent-item b{display:block;max-width:180px}.recipient-grid{grid-template-columns:1fr}.dialog-actions{flex-wrap:wrap;justify-content:stretch}.dialog-actions .btn{flex:1}.detail-grid{grid-template-columns:1fr}.detail-body{max-height:45vh}.topbar-right .topbar-logout{display:none}.department-form{display:grid}.department-form>*{width:100%}}

/* Offline demonstration banner */
.demo-banner{position:fixed;top:0;left:0;right:0;z-index:999;background:#ffedb5;color:#664d06;min-height:40px;padding:7px 20px;display:flex;align-items:center;justify-content:center;gap:22px;font-size:12px;font-weight:600;box-shadow:0 3px 12px #2222}.demo-banner select{margin-left:8px;border-radius:7px;background:white;border:1px solid #bb9c40;padding:5px;font-size:12px}.demo-layout{padding-top:40px}.demo-layout .sidebar{top:40px;height:calc(100vh - 40px)}@media(max-width:620px){.demo-banner{position:sticky;flex-wrap:wrap;gap:5px;padding:7px}.demo-layout{padding-top:0}.demo-layout .sidebar{height:auto}}
/* V3: staged approvals and delegated archive permissions */
.approval-chain{display:grid;gap:9px;margin-bottom:10px}
.approval-step-row{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:9px;background:#fff;border:1px solid #e2eaf1;padding:8px 10px;border-radius:9px}
.approval-step-row select{width:100%;padding:9px 8px;border:1px solid #dce3ea;border-radius:8px;font-size:12px;background:white}
.approval-step-row .order{font-weight:700;color:#16819a;font-size:12px}
.approval-step-row button{min-width:58px}
.member-archive{width:18px;height:18px;accent-color:#078198;cursor:pointer}
.authority-title{min-width:170px;max-width:290px;width:100%;padding:8px;border-radius:7px;border:1px solid #dce3ea;font-size:12px}
.authority-note{font-size:12px;color:#72849a;margin-top:5px}
.workflow-steps{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.workflow-steps li{border:1px solid #e5ebf2;border-radius:10px;padding:10px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;background:#fff}
.workflow-steps li.current-step{background:#edfaff;border-color:#91cfde}
.workflow-steps .step-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.workflow-steps .step-title{font-weight:600;font-size:12px;color:#2b4960}
.workflow-steps .step-detail{font-size:11px;color:#8494a3}
.workflow-reassign{display:flex;align-items:center;gap:5px}
.workflow-reassign select{max-width:200px;border:1px solid #dce5eb;border-radius:8px;padding:7px;font-size:11px}
@media(max-width:620px){.approval-step-row{grid-template-columns:34px minmax(0,1fr) auto}.workflow-steps li{align-items:flex-start}.workflow-reassign{width:100%}}

/* Improve visibility of approval steps in document detail */
.detail-dialog .detail-body{max-height:54vh}
.detail-dialog .workflow-steps{margin-top:10px}
@media(max-width:620px){.detail-dialog .detail-body{max-height:48vh}}

/* ---------- Mobile-first extension (compatible with V3 Supabase schema) ---------- */
.mobile-bottom-nav,.mobile-fab,.mobile-menu-toggle,.mobile-backdrop,.mobile-documents-list{display:none}
.mobile-drawer-open{overflow:hidden}
:focus-visible{outline:3px solid #1ca2c6;outline-offset:2px}
.attachment-feedback{font-size:12px;color:#537a8b;background:#eef8fb;border-radius:9px;padding:10px 12px;margin:-9px 0 0}
.attachment-feedback.is-error{color:#a83443;background:#fff0f2}
.mobile-documents-list{gap:12px}
@media (max-width: 680px){
 html,body{width:100%;min-width:0;overflow-x:hidden;-webkit-text-size-adjust:100%;font-size:14px}
 button,input,textarea,select{font-size:16px}
 .center-screen{min-height:100dvh;padding:18px 15px}
 .auth-card{padding:28px 20px;border-radius:20px;box-shadow:0 12px 36px #19385512}
 .auth-card h1{font-size:21px}
 .auth-tabs .tab{min-height:47px;font-size:14px}
 .form-stack input,.form-stack .btn{min-height:49px;font-size:16px}
 .notice{font-size:12px}
 .app-layout{display:block;min-height:100dvh}
 .main-area{min-height:100dvh}
 .mobile-backdrop{display:block;position:fixed;inset:0;background:#091c328c;z-index:70}
 .sidebar{position:fixed;top:0;left:0;bottom:0;width:min(86vw,340px);height:100dvh;z-index:71;transform:translateX(-110%);transition:transform .23s ease;background:var(--navy);padding:calc(22px + env(safe-area-inset-top)) 17px calc(25px + env(safe-area-inset-bottom));box-shadow:14px 0 40px #0c1b332c;overflow-y:auto}
 .sidebar.is-open{transform:translateX(0)}
 .sidebar .brand{padding:0 6px 24px}
 .sidebar .brand>div:last-child,.sidebar .sidebar-label,.sidebar .nav-btn{font-size:13px}
 .sidebar .sidebar-label{display:block;font-size:10px}
 .sidebar .nav{display:grid;overflow:visible;gap:5px;padding:0}
 .sidebar .nav-btn{display:flex;width:100%;min-height:49px;padding:12px 13px;white-space:normal;text-align:left}
 .sidebar .nav-btn span{font-size:19px;width:25px}
 .sidebar .sidebar-bottom{display:flex;justify-content:start;margin-top:28px}
 .sidebar .sidebar-bottom .identity,.sidebar .sidebar-bottom .btn-icon{display:block}
 .sidebar .sidebar-bottom .btn-icon{font-size:22px;min-height:48px;min-width:48px}
 .sidebar .nav-count{display:inline-block}
 .mobile-menu-toggle{display:grid;place-items:center;min-width:45px;height:45px;border:1px solid #dce9ee;background:#eef6f9;border-radius:12px;color:#214d67;font-size:21px;flex-shrink:0}
 .topbar{padding:12px 16px;gap:10px;position:sticky;top:0;z-index:30;box-shadow:0 2px 10px #153b5310}
 .topbar>div:first-of-type{min-width:0;flex:1}
 .topbar .eyebrow{display:none}
 .topbar h1{font-size:17px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .topbar-right{gap:0}
 .topbar-right #userGreeting,.topbar-right .topbar-logout{display:none}
 .topbar-right #refreshButton{padding:8px 9px;min-width:40px;min-height:43px;font-size:12px}
 .page{padding:17px 14px calc(168px + env(safe-area-inset-bottom));max-width:none}
 .section-head{align-items:start;margin-bottom:14px;gap:10px}
 .section-head h2{font-size:17px}
 .section-head .muted{font-size:12px;line-height:1.6}
 .section-head .btn[data-new-doc],#newDocButton{display:none!important}
 .panel{border-radius:17px;padding:16px 13px;box-shadow:0 3px 16px #24435b0a}
 .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:15px}
 .stat{border-radius:15px;padding:16px 13px;min-height:122px}
 .stat .big{font-size:27px;margin:5px 0 0}
 .stat .muted{font-size:12px;line-height:1.5}
 .stat .badge-icon{width:34px;height:34px}
 .recent-item{align-items:flex-start;gap:7px;padding:13px 0}
 .recent-item>div:first-child{min-width:0;flex:1}
 .recent-item b{font-size:13px;max-width:100%;overflow-wrap:anywhere}
 .recent-item .doc-sub{font-size:11px;line-height:1.5}
 .recent-actions{flex-direction:column;align-items:flex-end;gap:7px}
 .recent-actions .action{min-height:34px;min-width:53px}
 .filters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px}
 .searchbox{grid-column:span 2;min-width:0;min-height:46px}
 .searchbox input{font-size:16px}
 .filters select{width:100%;min-width:0;height:46px;font-size:14px}
 .table-note{font-size:12px;margin:12px 2px}
 .documents-desktop-table{display:none}
 .mobile-documents-list{display:grid}
 .mobile-doc-card{border:1px solid #e5ebf1;border-radius:14px;padding:14px;background:white;box-shadow:0 3px 11px #15334908}
 .mobile-doc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
 .mobile-doc-reg{font-size:12px;font-weight:700;color:#067b98;overflow-wrap:anywhere}
 .mobile-doc-title{font-size:15px;line-height:1.55;margin:0 0 6px;overflow-wrap:anywhere;color:#233a51}
 .mobile-doc-meta{margin:2px 0;color:#74889a;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
 .mobile-doc-footer{display:flex;gap:7px;flex-wrap:wrap;padding-top:12px;margin-top:10px;border-top:1px solid #eef2f6}
 .mobile-doc-footer .action{min-height:42px;font-size:12px;padding:9px 12px}
 .mobile-doc-footer .mobile-view{flex:1;background:#e5f6fa;color:#09637b}
 .mobile-empty{min-height:170px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;color:#8797a6}
 .mobile-empty span{font-size:33px}.mobile-empty b{font-size:14px;color:#4f6575}.mobile-empty small{font-size:12px}
 .mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;padding:8px 5px calc(7px + env(safe-area-inset-bottom));min-height:calc(70px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e1e9ef;box-shadow:0 -7px 24px #19395512}
 .mobile-nav-item{border:0;background:transparent;color:#8292a0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1px;min-height:52px;padding:2px 0;border-radius:10px}
 .mobile-nav-item>span{font-size:23px;line-height:1.3;font-weight:600}
 .mobile-nav-item small{font-size:10px;line-height:1.4;white-space:nowrap}
 .mobile-nav-item.active{color:#057996;background:#e9f7fa;font-weight:700}
 .mobile-icon-wrap{position:relative}.mobile-approval-badge{position:absolute;top:-3px;right:-13px;font-size:10px!important;color:#fff;background:#e04e56;border-radius:20px;padding:1px 5px;font-style:normal;line-height:1.4}
 .mobile-fab{display:flex;align-items:center;gap:8px;position:fixed;z-index:46;right:15px;bottom:calc(83px + env(safe-area-inset-bottom));padding:11px 17px;min-height:51px;background:#087d97;border:0;border-radius:17px;color:white;font-weight:700;font-size:13px;box-shadow:0 9px 25px #045c7c50}
 .mobile-fab span:first-child{font-size:23px;line-height:1}
 .doc-dialog,.detail-dialog{inset:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border:0;border-radius:0;overflow:hidden;background:white}
 .doc-dialog .dialog-form{height:100%;display:flex;flex-direction:column;min-height:0}
 .dialog-head{flex:none;padding:calc(13px + env(safe-area-inset-top)) 17px 13px;align-items:center;background:#fff}
 .dialog-head h2{font-size:17px;line-height:1.4}
 .dialog-head .eyebrow{font-size:9px}
 .dialog-head .btn-icon{min-width:45px;min-height:45px;border:1px solid #e6edf0;border-radius:12px;color:#3d6173}
 .dialog-body{flex:1;min-height:0;max-height:none;overflow-y:auto;display:grid;gap:14px;padding:18px 16px 25px;align-content:start;overscroll-behavior:contain}
 .dialog-body label{font-size:13px;gap:7px}
 .dialog-body input,.dialog-body select,.dialog-body textarea{font-size:16px;min-height:49px;border-radius:10px}
 .dialog-body input[type=file]{width:100%;font-size:14px;line-height:1.5;min-height:53px;white-space:normal;overflow-wrap:anywhere}
 .dialog-body input[type=file]::file-selector-button{border:0;background:#d8edf3;color:#0b627e;padding:9px 12px;border-radius:8px;margin-right:8px}
 .two-cols{grid-template-columns:1fr;gap:14px}
 .helper-banner{line-height:1.7;padding:12px}
 .recipient-grid{grid-template-columns:1fr;max-height:210px}
 .recipient-item{min-height:50px;font-size:13px!important}
 .recipient-item input{width:19px!important;height:19px!important}
 .route-box{padding:14px 12px}
 .route-title{gap:9px}
 .approval-step-row{grid-template-columns:30px minmax(0,1fr);gap:8px}
 .approval-step-row .action{grid-column:2;justify-self:end;min-height:36px}
 .approval-step-row select{font-size:15px;min-height:47px}
 .dialog-actions{flex:none;display:flex;justify-content:stretch;flex-wrap:wrap;gap:9px;padding:11px 14px calc(13px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -4px 16px #1c354210}
 .dialog-actions .btn{flex:1 1 42%;min-height:48px;padding:9px 12px;font-size:13px;white-space:normal}
 #cancelDialog{display:none}
 .detail-dialog{display:flex;flex-direction:column}
 .detail-dialog:not([open]){display:none}
 .detail-dialog .detail-body{flex:1;min-height:0;max-height:none;overflow:auto;padding:17px 16px 8px}
 .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .detail-grid small,.doc-info small{font-size:11px}
 .detail-grid strong{font-size:12px}
 .doc-info{margin-top:14px}
 .preview-holder{flex:0 0 auto;max-height:28dvh;min-height:40px;overflow:auto;margin-top:0}
 .preview-holder iframe{height:26dvh}
 .preview-holder img{max-height:26dvh}
 .detail-dialog .dialog-actions{display:grid;grid-template-columns:1fr 1fr;max-height:none;overflow:visible}
 .detail-dialog .dialog-actions .btn{width:100%;font-size:13px;min-height:46px;padding:8px 9px}
 .workflow-reassign{flex-wrap:wrap}.workflow-reassign select{max-width:100%;flex:1;font-size:14px;min-height:44px}
 .toast{bottom:calc(83px + env(safe-area-inset-bottom));left:14px;right:14px;max-width:none;width:auto;padding:11px 14px;z-index:180}
 .doc-dialog[open]~.toast{bottom:20px}
 /* Mobile administration: show each row as a readable card instead of side-scrolling. */
 #usersPage .table-scroll,#approverAdminPage .table-scroll,#departmentsPage .table-scroll{overflow:visible}
 #usersPage table,#approverAdminPage table,#departmentsPage table,
 #usersPage tbody,#approverAdminPage tbody,#departmentsPage tbody,
 #usersPage tr,#approverAdminPage tr,#departmentsPage tr{display:block;width:100%}
 #usersPage thead,#approverAdminPage thead,#departmentsPage thead{display:none}
 #usersPage tr,#approverAdminPage tr,#departmentsPage tr{margin:11px 0;border:1px solid #e5ebf1;border-radius:13px;padding:8px 12px;background:white}
 #usersPage td,#approverAdminPage td,#departmentsPage td{display:grid;grid-template-columns:103px minmax(0,1fr);gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid #eef2f5;overflow-wrap:anywhere;font-size:13px}
 #usersPage td:last-child,#approverAdminPage td:last-child,#departmentsPage td:last-child{border-bottom:0}
 #usersPage td::before,#approverAdminPage td::before,#departmentsPage td::before{content:attr(data-label);color:#7b8d9f;font-size:11px;font-weight:600}
 #usersPage td .member-department,#usersPage td .member-role,#usersPage td .member-status,#approverAdminPage td .authority-title{min-height:42px;width:100%;max-width:100%;font-size:14px}
 .department-form{display:grid;grid-template-columns:1fr;gap:12px}.department-form label{font-size:13px}
 .department-form input,.department-form select,.department-form .btn{width:100%;min-height:46px;font-size:15px}
 .section-head.small .small-label{display:none}
}
@media (max-width:360px){.mobile-nav-item small{font-size:9px}.page{padding-left:10px;padding-right:10px}.mobile-doc-card{padding:12px}}
@media (prefers-reduced-motion:reduce){.sidebar{transition:none}}

@media (max-width:680px){#closeDetailFooter{display:none!important}}

/* V3 colorful branding customization */
:root{--brand-1:#06b6d4;--brand-2:#2563eb;--brand-3:#0e7490}
:root[data-theme="sunset"]{--brand-1:#fb923c;--brand-2:#ef4444;--brand-3:#c2410c}
:root[data-theme="violet"]{--brand-1:#a855f7;--brand-2:#ec4899;--brand-3:#9333ea}
:root[data-theme="forest"]{--brand-1:#10b981;--brand-2:#059669;--brand-3:#047857}
.btn.primary,#saveSettingsButton,.mobile-fab{background:linear-gradient(130deg,var(--brand-1),var(--brand-2))!important;color:white!important;border:0!important;box-shadow:0 5px 15px color-mix(in srgb,var(--brand-2) 28%, transparent)}
.btn.primary:hover,.mobile-fab:hover{filter:brightness(1.06);transform:translateY(-1px)}
.nav-btn.active,.mobile-nav-item.active{background:linear-gradient(130deg,var(--brand-1),var(--brand-2))!important;color:#fff!important}
.auth-card .logo,.settings-logo{background:linear-gradient(135deg,var(--brand-1),var(--brand-2))!important}
.app-logo{display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.brand-logo-image{width:100%;height:100%;object-fit:contain;border-radius:inherit;background:white}
.settings-panel{max-width:780px}.settings-preview{display:flex;align-items:center;gap:16px;padding:17px;border-radius:17px;background:linear-gradient(115deg,#e0f2fe,#f5f3ff);margin-bottom:24px}
.settings-logo{width:76px;height:76px;border-radius:17px;color:#fff;font-weight:800;font-size:28px}
.settings-preview strong{display:block;font-size:18px;overflow-wrap:anywhere}.settings-preview p{margin:6px 0 0}
.settings-check{display:flex!important;flex-direction:row!important;align-items:center;gap:8px}.settings-check input{width:18px;height:18px;min-height:0}
.palette-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:9px}
.palette-row label{cursor:pointer;display:block}.palette-row input{position:absolute;opacity:0}.palette{display:block;text-align:center;border:3px solid transparent;border-radius:12px;padding:13px 7px;color:white;font-weight:700;font-size:13px}
.palette.ocean{background:linear-gradient(115deg,#06b6d4,#2563eb)}.palette.sunset{background:linear-gradient(115deg,#fb923c,#ef4444)}.palette.violet{background:linear-gradient(115deg,#a855f7,#ec4899)}.palette.forest{background:linear-gradient(115deg,#10b981,#059669)}
.palette-row input:checked+.palette{outline:3px solid #243b53;outline-offset:2px}
@media(max-width:680px){.settings-panel{padding:16px}.settings-preview strong{font-size:15px}.settings-logo{width:62px;height:62px}.palette{font-size:12px}.settings-panel input{font-size:16px}}

/* Color identity per navigation destination; does not change document status colors. */
[data-page="dashboard"]{--menu-start:#0891b2;--menu-end:#2563eb;--menu-tint:#e0f2fe;--menu-ink:#075985}
[data-page="incoming"]{--menu-start:#2563eb;--menu-end:#3b82f6;--menu-tint:#dbeafe;--menu-ink:#1d4ed8}
[data-page="outgoing"]{--menu-start:#f97316;--menu-end:#f59e0b;--menu-tint:#ffedd5;--menu-ink:#c2410c}
[data-page="inbox"]{--menu-start:#0d9488;--menu-end:#14b8a6;--menu-tint:#ccfbf1;--menu-ink:#0f766e}
[data-page="approvals"]{--menu-start:#9333ea;--menu-end:#c084fc;--menu-tint:#f3e8ff;--menu-ink:#7e22ce}
[data-page="documents"]{--menu-start:#475569;--menu-end:#64748b;--menu-tint:#e2e8f0;--menu-ink:#334155}
[data-page="approverAdmin"]{--menu-start:#7c3aed;--menu-end:#a855f7;--menu-tint:#ede9fe;--menu-ink:#6d28d9}
[data-page="departments"]{--menu-start:#16a34a;--menu-end:#22c55e;--menu-tint:#dcfce7;--menu-ink:#15803d}
[data-page="users"]{--menu-start:#d97706;--menu-end:#f59e0b;--menu-tint:#fef3c7;--menu-ink:#92400e}
[data-page="settings"]{--menu-start:#db2777;--menu-end:#f472b6;--menu-tint:#fce7f3;--menu-ink:#be185d}
/* Distinct, clearly labeled menu buttons on desktop and mobile drawer. */
.nav .nav-btn[data-page]{border-left:3px solid var(--menu-start);background:color-mix(in srgb,var(--menu-start) 14%,#14263f);color:#f8fafc}
.nav .nav-btn[data-page]>span:first-child{display:inline-grid;place-items:center;min-width:29px;width:29px;height:29px;border-radius:9px;background:var(--menu-tint);color:var(--menu-ink);font-weight:800}
.nav .nav-btn[data-page]:hover{background:color-mix(in srgb,var(--menu-start) 33%,#14263f)}
.nav .nav-btn[data-page].active{background:linear-gradient(120deg,var(--menu-start),var(--menu-end))!important;border-left-color:#fff;color:white!important;box-shadow:0 5px 14px #0b1b3440}
.nav .nav-btn[data-page].active>span:first-child{background:#ffffff30;color:#fff}
/* Bottom tabs keep their own color even when global branding theme changes. */
.mobile-bottom-nav .mobile-nav-item[data-page]{color:var(--menu-ink);background:var(--menu-tint);margin:0 2px}
.mobile-bottom-nav .mobile-nav-item[data-page].active{background:linear-gradient(140deg,var(--menu-start),var(--menu-end))!important;color:white!important;box-shadow:0 4px 12px color-mix(in srgb,var(--menu-start) 28%,transparent)}
.mobile-bottom-nav #mobileMoreMenu{background:#fce7f3;color:#be185d;margin:0 2px}
.mobile-bottom-nav #mobileMoreMenu[aria-expanded="true"]{background:linear-gradient(140deg,#db2777,#f472b6);color:white}
.mobile-bottom-nav .mobile-nav-item{transition:background .16s ease, transform .16s ease;min-height:54px}
.mobile-bottom-nav .mobile-nav-item:active,.nav .nav-btn:active{transform:scale(.96)}
.nav-btn:focus-visible,.mobile-nav-item:focus-visible{outline:3px solid #facc15;outline-offset:2px}
@media(max-width:360px){.mobile-bottom-nav .mobile-nav-item[data-page],.mobile-bottom-nav #mobileMoreMenu{margin:0 1px}}
@media(prefers-reduced-motion:reduce){.mobile-bottom-nav .mobile-nav-item{transition:none}}

/* Member admin actions – responsive */
.member-buttons{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.member-buttons button{white-space:normal;min-height:40px}.member-filter{display:inline-flex;gap:8px;align-items:center;margin:10px 0 14px}.member-email{font-size:13px;overflow-wrap:anywhere}.member-buttons .danger{background:#fff0f2;color:#be123c;border:1px solid #fecdd3}.member-buttons .danger:hover{background:#ffe4e6}
@media(max-width:680px){.member-buttons{width:100%}.member-buttons button{flex:1 1 135px}.member-email{font-weight:650}}

.recovery-dialog{border:0;border-radius:20px;padding:24px;max-width:420px;width:calc(100% - 32px);box-shadow:0 16px 50px #0004}.recovery-dialog::backdrop{background:#08233ba9}.recovery-form{display:grid;gap:16px}.recovery-form label{display:grid;gap:7px}.recovery-form input{width:100%;min-height:46px;padding:10px;border:1px solid #b8c5d5;border-radius:9px}.recovery-form button{border-radius:11px;min-height:48px;background:linear-gradient(110deg,#2563eb,#8b5cf6);color:white;border:0;font-weight:700}

/* Branding settings: make the selected saved theme visible on the preview panel.
   Destination navigation colors remain distinct by design. */
.settings-preview{background:linear-gradient(110deg,color-mix(in srgb,var(--brand-1) 14%,white),color-mix(in srgb,var(--brand-2) 12%,white));border:1px solid color-mix(in srgb,var(--brand-1) 22%,white)}
.settings-panel #saveSettingsButton:focus-visible{outline:3px solid var(--brand-3);outline-offset:3px}

/* Member administration form fields */
#usersBody .member-name,#usersBody .member-email-edit,#usersBody .member-phone{min-width:150px;max-width:230px;width:100%;border:1px solid #d6e2ef;border-radius:10px;padding:10px;background:#fff;color:#193453;font-size:14px}#usersBody .member-email-edit{min-width:205px}#usersBody .member-name:focus,#usersBody .member-email-edit:focus,#usersBody .member-phone:focus{outline:2px solid #38bdf8;outline-offset:1px}#usersBody input:disabled{background:#eff3f8;color:#71849d} @media(max-width:768px){#usersBody .member-name,#usersBody .member-email-edit,#usersBody .member-phone{max-width:100%;min-width:0;width:100%}}

/* Self-service profile for mobile and desktop */
.profile-panel{max-width:720px;margin:auto}.profile-photo-wrap{display:flex;justify-content:center;align-items:center;min-height:142px}.profile-photo,.profile-fallback{width:128px;height:128px;border-radius:50%;object-fit:cover;border:4px solid #dbeafe;box-shadow:0 6px 18px #0b45751b}.profile-fallback{display:grid;place-items:center;font-size:48px;background:#e0f2fe}.profile-panel input[type=file]{width:100%;min-height:48px;padding:10px}.profile-panel .btn{min-height:50px}.sidebar-bottom .avatar{background-repeat:no-repeat}

/* Member directory: compact private avatar thumbnails for desktop and mobile. */
.member-identity{display:flex;align-items:center;gap:10px;min-width:190px}
.member-identity-fields{flex:1;min-width:0}
.member-avatar-wrap{width:46px;height:46px;flex:0 0 46px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#0ea5e9,#8b5cf6);display:grid;place-items:center;box-shadow:0 2px 8px #33415520;border:2px solid #fff}
.member-avatar{width:100%;height:100%;object-fit:cover;display:block}
.member-avatar-fallback{width:100%;height:100%;display:grid;place-items:center;color:white;font-size:18px;font-weight:800}
@media(max-width:768px){.member-identity{min-width:0}.member-avatar-wrap{width:52px;height:52px;flex-basis:52px}}

/* Document file quick actions + inline preview + print: V3 print extension */
.document-file-actions .action{padding:8px 10px;font-size:11px;min-height:34px}
.action.file-preview{background:#e8f4ff;color:#1460ae}
.action.file-download,.btn.file-download{background:#e4f9f2;color:#067b5b;border-color:#bcebdd}
.action.file-print,.btn.file-print{background:#fff0dd;color:#a74e08;border-color:#fcd7ad}
.doc-preview-section{background:#f6f9ff;border-top:1px solid #e6edf6;min-height:0}
.doc-preview-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px 5px;color:#244e7d;font-size:13px}
.doc-preview-head small{font-size:11px;color:#70859b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.doc-preview-section .preview-holder{margin-top:0;border:0;min-height:105px;max-height:37vh}
.doc-preview-section .preview-holder iframe{height:35vh;min-height:180px}
.doc-preview-section .preview-holder img{max-height:35vh}
.doc-preview-hint{padding:5px 18px 10px;margin:0;font-size:11px;line-height:1.65;color:#647b94}
@media(max-width:680px){
 .mobile-doc-footer .file-preview{flex:1 1 100%;min-height:46px;font-size:13px}
 .mobile-doc-footer .file-download,.mobile-doc-footer .file-print{flex:1 1 calc(50% - 7px);min-height:44px;font-size:12px}
 .mobile-doc-footer .action{border-radius:11px}
 .doc-preview-section{flex:none;max-height:40dvh;overflow:auto}
 .doc-preview-section .preview-holder{max-height:30dvh;min-height:80px}
 .doc-preview-section .preview-holder iframe{height:27dvh;min-height:140px}
 .doc-preview-section .preview-holder img{max-height:27dvh}
 .doc-preview-hint{padding:4px 13px 8px}
 .doc-preview-head{padding:10px 13px 4px}
 .detail-dialog .dialog-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .detail-dialog .dialog-actions #openAttachmentButton,.detail-dialog .dialog-actions #downloadDetailButton,.detail-dialog .dialog-actions #printDetailButton{font-weight:700}
}

/* Passkeys: mobile-friendly security controls */
.passkey-divider{display:flex;align-items:center;gap:12px;color:#8091a4;font-size:12px;justify-content:center;margin:3px 0}
.passkey-divider::before,.passkey-divider::after{content:"";height:1px;background:#dbe5ee;flex:1}
.passkey-login{background:linear-gradient(110deg,#0f84b8,#7455d3);color:#fff;border:0;white-space:normal;text-align:center;padding:12px 14px;line-height:1.5;min-height:48px;box-shadow:0 7px 18px #236ca52a}
.passkey-login:hover{filter:brightness(1.06)}
.passkey-login-hint{text-align:center;margin:-4px 0 0;line-height:1.55}
.passkey-panel{margin-top:18px;padding:22px;display:grid;gap:18px}
.passkey-heading{display:flex;align-items:flex-start;gap:13px}
.passkey-heading h3{font-size:16px;margin:0 0 5px;color:#143651}
.passkey-heading p{margin:0;line-height:1.6}
.passkey-symbol{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;background:#e9e6ff;font-size:26px}
.passkey-actions{display:flex;gap:10px;flex-wrap:wrap}
.passkey-list{display:grid;gap:10px}
.passkey-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;background:#f7faff;border:1px solid #e4ebf4;border-radius:12px}
.passkey-entry-main{display:flex;gap:12px;align-items:center;min-width:0}
.passkey-entry-main>span{font-size:23px}
.passkey-entry-main strong{font-size:13px;display:block;overflow-wrap:anywhere}
.passkey-entry-main small{font-size:11px;color:#678095}
.passkey-empty{background:#f5f9fc;border:1px dashed #cbd9e7;padding:17px;border-radius:12px;font-size:13px;color:#597389}
.passkey-empty small{color:#7b93a4}
.passkey-error{background:#fff2f3;border:1px solid #f6cdd2;border-radius:10px;color:#a72d3f;padding:12px;font-size:12px}
.passkey-remove{color:#b03646;border-color:#f0cfda}
@media(max-width:680px){.passkey-panel{padding:17px}.passkey-actions{display:grid;grid-template-columns:1fr}.passkey-actions button{min-height:49px}.passkey-entry{padding:12px;gap:8px}.passkey-remove{white-space:normal}.passkey-login{font-size:14px!important}}

/* V4: independent menu for approved documents, actual signer audit, Thai digital clock */
[data-page="approved"]{--menu-start:#059669;--menu-end:#10b981;--menu-tint:#d1fae5;--menu-ink:#065f46}
.brand{flex-wrap:wrap;align-items:center;column-gap:10px;row-gap:8px}
.sidebar-clock{margin-left:45px;display:flex;flex-direction:column;gap:1px;padding:5px 9px;border-radius:10px;border:1px solid #ffffff2c;background:#0d1f344a;color:#e1f9fe;white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.sidebar-clock-time{font-size:16px;font-weight:800;letter-spacing:1px;line-height:1.35}
.sidebar-clock small{font-size:9px;color:#b6ddec}
.signed-summary{display:flex;flex-direction:column;gap:3px;background:#effaf5;border-left:3px solid #10b981;border-radius:6px;padding:7px 9px;margin:7px 0;font-size:11px;line-height:1.5;max-width:340px}
.signed-summary b{color:#065f46}.signed-summary small{color:#385d55;font-size:11px}
.mobile-approval-summary{margin:7px 0}
.actual-signer{background:#e8f8ef;border:1px solid #a3dfb8;border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:3px;margin-top:7px}
.actual-signer b{font-size:12px;color:#13633d}.actual-signer span{font-size:11px;color:#375a4a}.actual-signer em{font-size:11px;color:#7a4c0c;font-style:normal}
.stage-fields{display:flex;flex-direction:column;gap:7px;min-width:0}.stage-primary-label{font-size:11px;color:#61778a}
.stage-primary-label select{display:block;width:100%;margin-top:4px}
.alternates-picker,.admin-alternates{padding:8px 10px;border-radius:9px;background:#f0f6ff;border:1px solid #d4e4fd;color:#214c83}
.alternates-picker summary,.admin-alternates summary{font-size:12px;font-weight:650;cursor:pointer;min-height:28px;display:flex;align-items:center}
.alternates-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:7px;margin:10px 0}
.alternates-options label{background:white;color:#294763;display:flex;gap:8px;align-items:center;padding:9px;border:1px solid #dce6f0;border-radius:8px;font-size:12px;min-height:42px}
.alternates-options input{width:17px;height:17px;accent-color:#2563eb}
.admin-alternates{flex:1 0 100%;margin-top:8px}
.admin-alternates button{min-height:39px}
@media(min-width:1080px){.brand{gap:8px}.brand>div:nth-child(2){flex:1;min-width:110px}.sidebar-clock{margin-left:0;align-self:center}}
@media(max-width:950px) and (min-width:681px){.sidebar-clock{display:none}}
@media(max-width:680px){.sidebar .brand{display:flex;flex-wrap:wrap}.sidebar-clock{margin:6px 0 0 48px;padding:6px 12px}.sidebar-clock-time{font-size:18px}.stage-fields{width:100%}.alternates-options{grid-template-columns:1fr}.signed-summary{max-width:100%}}

/* E-Document V5: notifications and acknowledgement */
.bell-button{position:relative;border:1px solid #d7e3ed;background:#eef7ff;border-radius:14px;min-width:46px;min-height:44px;cursor:pointer;font-size:23px}
.bell-count{position:absolute;top:-8px;right:-7px;background:#e11d48;color:white;font-size:11px;font-weight:800;border-radius:30px;min-width:19px;padding:2px 5px}
.notification-list{display:flex;flex-direction:column;gap:10px}
.notification-card{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid #e0e8f1;border-radius:14px;background:#fff}
.notification-unread{border-color:#7dd3fc;background:#effaff}
.notice-icon{font-size:24px;background:#ecf3ff;border-radius:12px;padding:9px}
.notice-content{flex:1;min-width:0}.notice-content strong{display:block;font-size:14px;color:#16324f}.notice-content small{display:block;color:#6c8095;margin:5px 0 10px}
.notice-actions{display:flex;gap:9px;flex-wrap:wrap}
.ack-entry{display:flex;gap:12px;justify-content:space-between;padding:8px 0;border-bottom:1px solid #e8eef4;font-size:12px}
.ack-done{color:#087d4f}.ack-wait{color:#ad6500}.ack-action{background:linear-gradient(125deg,#059669,#10b981);color:white;border:none}
.detail-ack-actions{padding:10px 20px;display:flex;gap:10px;align-items:center}
.chief-settings{margin-bottom:22px;border-bottom:1px solid #dce5ed;padding-bottom:18px}.chief-settings h3{color:#124a68}
@media(max-width:680px){.topbar-right .bell-button{min-width:42px;min-height:42px}.notification-card{padding:12px}.ack-entry{flex-wrap:wrap}.detail-ack-actions{flex-direction:column;align-items:stretch}}

.approval-cc-panel{padding:16px 20px;background:#f0fdf4;border-top:1px solid #bbf7d0}.approval-cc-panel strong{color:#047857}.approval-cc-panel .recipient-grid{max-height:150px;overflow:auto;margin-top:10px}


/* V5.1 Sidebar fix: independently scrollable menu and fixed profile/footer. */
.sidebar{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  padding-top:16px;
  padding-bottom:14px;
}
.sidebar > .brand{
  flex:0 0 auto;
  margin:0 0 8px;
  padding:8px 7px 14px;
  border-bottom:1px solid #ffffff22;
}
.sidebar-menu-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#6e91af transparent;
  overscroll-behavior:contain;
  padding:4px 4px 12px;
}
.sidebar-menu-scroll::-webkit-scrollbar{width:6px}
.sidebar-menu-scroll::-webkit-scrollbar-thumb{border-radius:8px;background:#6e91af}
.sidebar .nav{display:flex;flex-direction:column;gap:5px;overflow:visible;padding:0}
.sidebar-section-label{font-size:10px;letter-spacing:.08em;color:#9fbbcf;margin:9px 10px 3px;font-weight:650}
.sidebar .nav-btn{
  flex:none;
  min-height:40px;
  padding:6px 9px;
  gap:8px;
  border-radius:10px;
  font-size:12px;
  line-height:1.4;
  white-space:normal;
  width:100%;
}
.sidebar .nav-btn[data-page]>span:first-child{
  width:28px;
  min-width:28px;
  height:28px;
  font-size:17px;
}
.nav-group{border:1px solid #58738a48;border-radius:12px;margin-top:5px;padding:3px 3px 5px;background:#ffffff07}
.nav-group-title{display:flex;align-items:center;gap:9px;min-height:42px;padding:7px 9px;cursor:pointer;border-radius:9px;list-style:none;color:#e1edf8;font-size:12px;font-weight:650}
.nav-group-title::-webkit-details-marker{display:none}
.nav-group-title:hover{background:#ffffff17}
.nav-group-title:focus-visible{outline:2px solid #96dff3;outline-offset:1px}
.nav-group-icon{font-size:17px;line-height:1}
.nav-chevron{margin-left:auto;transition:transform .18s ease;font-size:18px;color:#b5d1e4}
.nav-group[open] .nav-chevron{transform:rotate(180deg)}
.nav-group-links{display:grid;gap:4px;padding:2px 0 0}
.nav-group-links .nav-btn{padding-left:10px}
.sidebar > .sidebar-bottom{
  flex:0 0 auto;
  margin-top:8px;
  padding:12px 7px 4px;
  border-top:1px solid #607b9661;
  background:var(--navy);
}
/* A condensed icon rail between desktop and phone widths. */
@media(min-width:681px) and (max-width:950px){
 .sidebar{width:76px;padding:12px 7px}
 .sidebar > .brand{padding:0 5px 12px;margin-bottom:6px}
 .sidebar-section-label,.nav-group-name,.nav-chevron{display:none}
 .nav-group{padding:3px 0}
 .nav-group-title{justify-content:center;padding:9px 2px}
 .sidebar .nav-btn{justify-content:center;padding:7px 3px;font-size:0;min-height:42px;gap:0}
 .sidebar .nav-btn[data-page]>span:first-child{width:31px;min-width:31px;height:31px;font-size:20px}
 .sidebar .nav-count{display:none}
 .sidebar .nav-group-links .nav-btn{padding-left:3px}
 .sidebar .sidebar-bottom{justify-content:center;padding:11px 0 4px}
}
@media(max-width:680px){
 .sidebar{
   display:flex;
   flex-direction:column;
   height:100vh;
   height:100dvh;
   overflow:hidden;
   padding:calc(12px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
 }
 .sidebar > .brand{padding:4px 5px 12px;margin:0 0 5px}
 .sidebar-menu-scroll{overflow-y:auto;min-height:0;flex:1 1 auto;padding:3px 4px 10px}
 .sidebar .nav{display:flex;flex-direction:column;gap:6px;overflow:visible;padding:0}
 .sidebar .nav-btn{font-size:13px;min-height:46px;padding:9px 12px;gap:10px}
 .sidebar .nav-btn[data-page]>span:first-child{font-size:18px;height:29px;width:29px;min-width:29px}
 .nav-group-title{font-size:13px;min-height:46px}
 .sidebar .sidebar-bottom{display:flex;flex:0 0 auto;margin:8px 0 0;padding:9px 4px 1px}
 .sidebar .sidebar-bottom .identity,.sidebar .sidebar-bottom .btn-icon{display:block}
}
@media (prefers-reduced-motion:reduce){.nav-chevron{transition:none}}


/* V5.2 — Developer credit appears immediately below the application name/logo.
   Sidebar is independently scrollable; no changes to data or permissions. */
.sidebar > .brand > .developer-credit{
  order:2;
  flex:0 0 100%;
  min-width:0;
  color:#c9ecfc;
  font-size:10.5px;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0;
  padding:3px 0 3px 10px;
  margin:2px 0 0;
  border-left:3px solid #47d2ea;
  overflow-wrap:anywhere;
}
.sidebar > .brand > .sidebar-clock{order:3}
.developer-credit-login{
  font-size:12px;
  font-weight:600;
  color:#257b98;
  line-height:1.5;
  margin:3px 0 10px;
}
@media(min-width:681px) and (max-width:950px){
  .sidebar > .brand > .developer-credit{display:none}
}
@media(max-width:680px){
  .sidebar > .brand > .developer-credit{font-size:11px;padding-left:9px}
}

/* Document-type sub-classification: retains legacy register numbering */
.book-type-tag{font-weight:700;color:var(--ink,#24364b);margin-top:5px;white-space:normal;line-height:1.5}
.type-admin-panel{margin-top:18px}
.type-admin-panel h3{margin:0 0 8px;font-size:1.1rem}
.type-admin-form{display:flex;align-items:end;flex-wrap:wrap;gap:12px;margin:14px 0 20px}
.type-admin-form label{flex:1;min-width:200px}
.type-admin-form input{width:100%;margin-top:5px}
.type-admin-panel .type-name-input{width:100%;min-width:180px}
@media(max-width:680px){.type-admin-panel{padding:16px}.type-admin-form .btn{width:100%}.type-admin-panel .table-scroll{overflow-x:auto}.book-type-tag{font-size:12px}}

/* V5 - Submission purpose inline field, registry and mobile label */
.submission-purpose-field select { width:100%; }
.purpose-tag { color:var(--text-muted, #52657a); line-height:1.55; }
@media (max-width: 640px) {
  .submission-purpose-field select { min-height:44px; }
  .mobile-doc-meta.purpose-tag { margin-top:0.35rem; }
}

/* E-Document V5.3: instructions entered by the actual approver before decision */
.approval-instruction-panel{margin:16px 22px 18px;padding:17px 18px 15px;border:1px solid #b5d9f5;background:linear-gradient(140deg,#f0f8ff,#fbfaff);border-radius:14px}
.approval-instruction-title{display:flex;align-items:flex-start;gap:11px;margin-bottom:13px}
.instruction-badge{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#d9eeff;color:#12629d;flex:none;font-size:22px}
.approval-instruction-title h3{margin:0 0 5px;color:#183952;font-size:16px;line-height:1.5}
.approval-instruction-title p{color:#52708a;margin:0;font-size:12px;line-height:1.6}
.approval-instruction-label{display:block;font-size:13px;font-weight:700;color:#294760;margin-bottom:8px}
#approvalInstructionText{width:100%;display:block;min-height:102px;max-height:270px;resize:vertical;border:1px solid #a9c8df;background:#fff;border-radius:11px;padding:12px;font:inherit;font-size:15px;line-height:1.7;color:#172c3e}
#approvalInstructionText:focus{outline:3px solid #7bb8e85c;border-color:#278bd3}
.instruction-counter{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#536d81;font-size:11px;line-height:1.55;margin:7px 0 11px}
.instruction-counter span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.instruction-suggestions{display:flex;flex-wrap:wrap;gap:8px}
.instruction-template{border:1px solid #c7d8ed;border-radius:99px;padding:7px 12px;background:#fff;color:#195b85;font-size:12px;white-space:normal;text-align:left;font-weight:600}
.instruction-template:hover{background:#e8f3ff}
.instruction-warning{margin:12px 0 0;color:#6d607c;font-size:11px;line-height:1.7}
.approval-note-audit{width:100%;padding:11px 13px;border-radius:10px;border-left:4px solid #428acf;background:#edf7ff;color:#254867;margin:9px 0 2px;white-space:normal;min-width:0;overflow-wrap:anywhere}
.approval-note-audit b{display:block;font-size:12px;margin:0 0 5px}
.approval-note-audit p{font-size:13px;line-height:1.7;white-space:pre-wrap;margin:0;overflow-wrap:anywhere}
@media (max-width:680px){.approval-instruction-panel{margin:12px 12px 15px;padding:14px 12px}.approval-instruction-title h3{font-size:15px}#approvalInstructionText{font-size:16px;min-height:116px}.instruction-template{font-size:12px;min-height:40px}.instruction-counter{flex-wrap:wrap}}

/* V5.4 department/specialization rename with Thai abbreviations (admin only) */
.dept-explainer{color:#415671;background:#eff7ff;border:1px solid #d6eafa;border-radius:12px;padding:12px 15px;margin:0 0 19px;font-size:13px;line-height:1.8}
.dept-explainer strong{white-space:nowrap;color:#0c608d}
.dept-code-tag{display:inline-flex;align-items:center;min-height:33px;padding:5px 11px;border-radius:10px;background:#e0f2fe;color:#075985;font-size:13px;font-weight:800;max-width:100%;overflow-wrap:anywhere}
.dept-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dept-edit-code,.dept-edit-name{width:100%;min-width:110px;min-height:41px;padding:9px 10px;border:1px solid #aac7df;background:#fff;border-radius:9px;color:#123b54;font:inherit;font-size:14px}
.dept-edit-code:focus,.dept-edit-name:focus{outline:3px solid #93c5fd69;border-color:#0284c7}
.dept-save-action{background:linear-gradient(105deg,#059669,#14b8a6)!important;color:#fff!important;border:0!important;font-weight:800}
.recipient-dept-code{color:#57758a;font-size:11px}
@media(max-width:680px){.dept-edit-code,.dept-edit-name{width:100%;min-width:0;min-height:46px;font-size:16px}.dept-actions .action{min-height:42px}.dept-explainer{font-size:12px}}

/* V5: Personal unread document badges. No collision with notification/approval counts. */
[data-page="unread"]{--menu-start:#dc2626;--menu-end:#f97316;--menu-tint:#fff1f2;--menu-ink:#be123c}
.unread-document-chip{display:inline-flex;align-items:center;vertical-align:middle;padding:3px 7px;margin-left:5px;border-radius:999px;background:#ffe4e6;color:#9f1239;font-size:10px;white-space:nowrap;font-weight:750;border:1px solid #fecdd3}
.unread-topbar-button{display:flex;align-items:center;gap:5px;padding:7px 10px;background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;border-radius:11px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}
.unread-topbar-count{display:inline-block;min-width:19px;padding:1px 6px;border-radius:999px;background:#dc2626;color:#fff;text-align:center;font-size:11px}
.mobile-doc-title .unread-document-chip{font-size:10px;padding:3px 6px}
.nav-count.hidden,.unread-topbar-count.hidden,.mobile-approval-badge.hidden{display:none!important}
@media (max-width:520px){.unread-topbar-button{font-size:0;padding:7px}.unread-topbar-button .unread-topbar-count{font-size:11px}.unread-topbar-button:before{content:'📄';font-size:18px}}

/* Register-only guidance: small, readable red captions below fields. */
#registerForm .registration-hint {
  display: block;
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  font-weight: 500;
  color: #bf2640;
  text-align: left;
}
@media (max-width: 620px) {
  #registerForm .registration-hint { font-size: 11px; }
}

/* Rank / separated legal names / live password requirements in the signup form. */
#registerForm select {width:100%;min-height:49px;padding:11px 12px;background:#fff;border:1px solid #dce4eb;border-radius:9px;outline:none;color:var(--text);font-size:16px}
#registerForm select:focus {border-color:#22a0bd;box-shadow:0 0 0 3px #22a0bd13}
#registerForm .registration-name-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#registerForm .registration-name-grid input{min-width:0;width:100%}
#registerForm .registration-hint {color:#bf2640;font-size:11px;text-align:left;display:block;font-weight:500;line-height:1.6}
#registerForm .password-rules {padding:12px 14px;border:1px solid #e4ebf2;border-radius:11px;background:#f8fafc;text-align:left;display:grid;gap:7px;margin-top:-6px}
#registerForm .password-rules-title {font-size:12px;font-weight:700;margin:0;color:#36475f}
#registerForm .password-rules span {display:block;font-size:11px;color:#b45360;line-height:1.5;transition:color .15s}
#registerForm .password-rules .is-valid{color:#12734b;font-weight:600}
#registerForm .registration-confirm-hint{font-size:11px;color:#b45360;text-align:left;font-weight:500}
#registerForm .registration-confirm-hint.is-valid{color:#12734b}
@media(max-width:400px){#registerForm .registration-name-grid{grid-template-columns:1fr}}

#registerForm .registration-field-caption{display:inline-flex;align-items:baseline;gap:4px}


/* V5.7: profile photo next to notifications in the top toolbar. */
.topbar-right{gap:10px}
.header-profile-button{
  flex:none;
  width:46px;height:46px;
  display:grid;place-items:center;
  padding:3px;
  border:1px solid #cbdde9;
  border-radius:50%;
  background:#f0f8ff;
  cursor:pointer;
  transition:box-shadow .15s ease,transform .15s ease;
}
.header-profile-button:hover{box-shadow:0 0 0 3px #d9edff;transform:translateY(-1px)}
.header-profile-button:focus-visible{outline:3px solid #2e93ce;outline-offset:2px}
.header-avatar{
  height:38px;width:38px;
  display:grid;place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#286f93;
  color:#fff;
  font-size:18px;
  line-height:1;
  font-weight:800;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
/* The former sidebar profile photo and identity block are removed;
   keep a sign-out button in the mobile drawer for accessibility. */
.sidebar > .sidebar-bottom{padding:10px 7px 3px}
.sidebar-logout{
  width:100%;min-height:44px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid #ffffff36;
  border-radius:10px;
  color:#d8e6f1;background:#ffffff12;
  font:inherit;font-size:12px;cursor:pointer;
}
.sidebar-logout:hover{background:#ffffff25;color:#fff}
.sidebar-logout:focus-visible{outline:2px solid #93c5fd;outline-offset:2px}
.sidebar-logout>span:first-child{font-size:21px;line-height:1}
@media (min-width:681px) and (max-width:950px){
 .sidebar .sidebar-logout{width:44px;min-height:44px;margin:auto;padding:0}
 .sidebar .sidebar-logout-label{display:none}
 .topbar-right #userGreeting{display:none}
}
@media (max-width:680px){
 .topbar{gap:8px}
 .topbar-right{gap:6px;flex-shrink:0}
 .header-profile-button{width:42px;height:42px;padding:3px}
 .header-avatar{width:34px;height:34px;font-size:16px}
 .sidebar .sidebar-bottom{display:flex;justify-content:center;padding:9px 4px 3px}
 .sidebar .sidebar-logout{width:100%;min-height:46px}
}
@media (max-width:390px){
 .topbar-right{gap:4px}
 .header-profile-button{width:39px;height:39px}
 .header-avatar{width:31px;height:31px}
}
/* Extra-small screens: put toolbar icons on their own row instead of
   squeezing the page title or hiding the notification/profile controls. */
@media (max-width:420px){
 .topbar{display:grid;grid-template-columns:45px minmax(0,1fr);align-items:center;gap:4px 10px}
 .topbar>.mobile-menu-toggle{grid-column:1;grid-row:1}
 .topbar>div:first-of-type{grid-column:2;grid-row:1}
 .topbar-right{grid-column:1/-1;grid-row:2;justify-self:end;gap:8px}
 .topbar-right #refreshButton{min-height:39px}
}

/* Signup mobile phone input: keep helper legible on small phones */
.registration-phone-hint{font-size:11px;font-weight:400;color:#586f85;line-height:1.6;letter-spacing:0}
#registerMobilePhone:invalid:not(:placeholder-shown){border-color:#cd6262}
@media(max-width:680px){.registration-phone-hint{font-size:11px}}

/* Telegram personal notification controls (profile page) */
.telegram-panel{display:grid;gap:13px;margin-top:16px;border-color:#cde9f8}
.telegram-panel-header{display:flex;align-items:center;gap:13px}
.telegram-panel-header h3{margin:0 0 4px}
.telegram-mark{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:#e7f6ff;color:#178ac2;display:grid;place-items:center;font-size:24px}
.telegram-state{border:1px solid #d8e7f0;border-radius:10px;background:#f4f9fd;padding:12px 14px;font-size:13px;margin:0;overflow-wrap:anywhere}
.telegram-actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.telegram-actions .btn{white-space:normal;text-align:center}
.telegram-launch{display:inline-flex;text-decoration:none;color:white!important;background:#168fc5;border-color:#168fc5}
.telegram-launch:hover{background:#087eae}
.telegram-panel .notice{margin:0}
@media(max-width:600px){.telegram-panel{margin-top:12px}.telegram-panel-header{align-items:flex-start}.telegram-actions>*{flex:1 1 100%}}

/* Send to departments: select all, clear and live selection count */
.recipient-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 11px}
.recipient-toolbar .recipient-tool{font-size:12px!important;min-height:34px;padding:6px 12px;line-height:1.25;white-space:nowrap;border:1px solid #cddde7;background:#fff;color:#175c75}
.recipient-toolbar .recipient-select-all{background:#e9f6fb;border-color:#9dcfdf;color:#07536d}
.recipient-toolbar .recipient-tool:hover:not(:disabled){background:#d9eff7;border-color:#68adc4}
.recipient-toolbar .recipient-tool:disabled{opacity:.46;cursor:not-allowed}
.recipient-count{font-size:12px;color:#537084;font-weight:650;margin-left:auto;white-space:nowrap}
@media(max-width:460px){.recipient-toolbar{gap:7px}.recipient-toolbar .recipient-tool{flex:1 1 auto;padding:8px 9px;font-size:11px!important}.recipient-count{flex-basis:100%;text-align:right;margin-left:0}}

/* E-Document search buttons in the inbound/outbound document registry. */
.doc-search-controls{display:flex;align-items:stretch;gap:8px;flex:1 1 100%;min-width:0;flex-wrap:wrap}.doc-search-controls .searchbox{flex:1 1 260px;min-width:180px}.doc-search-controls>.btn{min-height:43px}.doc-search-controls .searchbox input{width:100%}@media(max-width:620px){.doc-search-controls .searchbox{flex:1 1 100%;min-width:0}.doc-search-controls>.btn{flex:1 1 auto}}

.doc-pagination{display:flex;align-items:center;justify-content:center;gap:14px;padding:16px 8px;flex-wrap:wrap}.doc-pagination.hidden{display:none}.doc-pagination .btn:disabled{opacity:.4;cursor:not-allowed}

/* Compact member administration — scoped to member list only */
#usersPage.page{padding-top:18px}
#usersPage .section-head{margin-bottom:11px}
#usersPage .section-head h2{font-size:20px;line-height:1.25}
#usersPage .panel{padding:11px 12px}
#usersPage .member-filter{margin:6px 0 9px;font-size:12px}
#usersPage .panel > .muted.mini{font-size:11px;margin:3px 0}
#usersPage th{padding:8px 7px;font-size:10px}
#usersPage td{padding:8px 7px;font-size:11px}
#usersPage .member-identity{gap:6px;min-width:140px}
#usersPage .member-avatar-wrap{width:32px;height:32px;flex:0 0 32px;border-width:1px}
#usersPage .member-avatar-fallback{font-size:13px}
#usersBody .member-name,#usersBody .member-email-edit,#usersBody .member-phone{padding:6px 7px;font-size:12px;min-width:100px;max-width:170px;border-radius:7px;min-height:32px}
#usersBody .member-email-edit{min-width:145px;max-width:215px}
#usersBody .member-department,#usersBody .member-role,#usersBody .member-status{font-size:11px;min-height:32px;padding:5px 7px;max-width:170px}
#usersPage .member-buttons{gap:4px}
#usersPage .member-buttons button{min-height:29px;padding:5px 7px;font-size:10px;line-height:1.2}
@media(max-width:768px){
 #usersPage.page{padding:12px 11px 95px}
 #usersPage .panel{padding:9px}
 #usersPage tr{padding:6px 9px;margin:7px 0;border-radius:10px}
 #usersPage td{grid-template-columns:85px minmax(0,1fr);gap:6px;padding:5px 0;font-size:12px}
 #usersPage td::before{font-size:10px}
 #usersPage .member-avatar-wrap{width:34px;height:34px;flex-basis:34px}
 #usersPage .member-identity{min-width:0}
 #usersBody .member-name,#usersBody .member-email-edit,#usersBody .member-phone{max-width:100%;min-width:0;width:100%;min-height:36px;padding:7px;font-size:13px}
 #usersBody .member-department,#usersBody .member-role,#usersBody .member-status{min-height:36px!important;max-width:100%;font-size:13px!important}
 #usersPage .member-buttons button{min-height:34px;font-size:11px}
}

/* Printable reports page */
.report-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin-bottom:14px;align-items:end}
.report-filters label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
.report-filters input,.report-filters select{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:9px;background:var(--card,#fff);color:inherit}
.report-buttons{display:flex;flex-wrap:wrap;gap:7px;grid-column:1/-1}.report-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}.report-stat{padding:12px;border-radius:10px;background:#edf4f8;text-align:center;color:#1a324b}.report-stat b{display:block;font-size:23px}.report-stat small{display:block;font-size:12px}.report-table{min-width:1260px;font-size:12px}.report-table th,.report-table td{padding:8px;vertical-align:top}.report-table td small{display:block;color:#64748b;margin-top:4px}@media(max-width:680px){.report-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.report-filters{grid-template-columns:1fr 1fr}.report-buttons{grid-column:1/-1}}


/* V5 document type colors - theme aware */
:root{
 --doc-accent-1-bg:color-mix(in srgb,var(--brand-1) 10%, #ffffff);
 --doc-accent-1-border:color-mix(in srgb,var(--brand-1) 42%, #ffffff);
 --doc-accent-1-ink:color-mix(in srgb,var(--brand-1) 82%, #0f172a);
 --doc-accent-2-bg:color-mix(in srgb,var(--brand-2) 10%, #ffffff);
 --doc-accent-2-border:color-mix(in srgb,var(--brand-2) 42%, #ffffff);
 --doc-accent-2-ink:color-mix(in srgb,var(--brand-2) 82%, #0f172a);
 --doc-accent-3-bg:color-mix(in srgb,var(--brand-3) 12%, #ffffff);
 --doc-accent-3-border:color-mix(in srgb,var(--brand-3) 46%, #ffffff);
 --doc-accent-3-ink:color-mix(in srgb,var(--brand-3) 82%, #0f172a);
 --doc-accent-4-bg:color-mix(in srgb,var(--brand-1) 8%, #fff7ed);
 --doc-accent-4-border:color-mix(in srgb,var(--brand-1) 35%, #fdba74);
 --doc-accent-4-ink:#b45309;
 --doc-accent-5-bg:color-mix(in srgb,var(--brand-2) 8%, #f5f3ff);
 --doc-accent-5-border:color-mix(in srgb,var(--brand-2) 32%, #c4b5fd);
 --doc-accent-5-ink:#7c3aed;
 --doc-accent-6-bg:color-mix(in srgb,var(--brand-3) 8%, #ecfeff);
 --doc-accent-6-border:color-mix(in srgb,var(--brand-3) 34%, #67e8f9);
 --doc-accent-6-ink:#0f766e;
}
.doc-type-badge,.doc-type-mini{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.2;border:1px solid transparent;white-space:nowrap}
.doc-type-mini{padding:4px 9px;font-size:10px}
.book-type-tag{margin-top:6px}
.recent-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:6px}
.recent-reg{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;background:#f3f6fa;color:#526476;font-size:11px;font-weight:600}
.doc-date-inline{font-size:11px;color:#6b7c8f}
.recent-item{border-radius:14px;padding:14px 16px;margin:10px 0;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.recent-item:first-child{margin-top:0}.recent-item:last-child{margin-bottom:0}
.doc-row td{transition:background-color .15s ease}
.doc-row td:first-child{border-left:4px solid transparent}
.mobile-doc-card{border:1px solid var(--line)}
.doc-row.doc-accent-1 td,.recent-item.doc-accent-1,.mobile-doc-card.doc-accent-1{background:var(--doc-accent-1-bg)}
.doc-row.doc-accent-1 td:first-child,.recent-item.doc-accent-1,.mobile-doc-card.doc-accent-1{border-left-color:var(--doc-accent-1-border)}
.doc-type-badge.doc-accent-1,.doc-type-mini.doc-accent-1{background:var(--doc-accent-1-bg);border-color:var(--doc-accent-1-border);color:var(--doc-accent-1-ink)}
.doc-row.doc-accent-2 td,.recent-item.doc-accent-2,.mobile-doc-card.doc-accent-2{background:var(--doc-accent-2-bg)}
.doc-row.doc-accent-2 td:first-child,.recent-item.doc-accent-2,.mobile-doc-card.doc-accent-2{border-left-color:var(--doc-accent-2-border)}
.doc-type-badge.doc-accent-2,.doc-type-mini.doc-accent-2{background:var(--doc-accent-2-bg);border-color:var(--doc-accent-2-border);color:var(--doc-accent-2-ink)}
.doc-row.doc-accent-3 td,.recent-item.doc-accent-3,.mobile-doc-card.doc-accent-3{background:var(--doc-accent-3-bg)}
.doc-row.doc-accent-3 td:first-child,.recent-item.doc-accent-3,.mobile-doc-card.doc-accent-3{border-left-color:var(--doc-accent-3-border)}
.doc-type-badge.doc-accent-3,.doc-type-mini.doc-accent-3{background:var(--doc-accent-3-bg);border-color:var(--doc-accent-3-border);color:var(--doc-accent-3-ink)}
.doc-row.doc-accent-4 td,.recent-item.doc-accent-4,.mobile-doc-card.doc-accent-4{background:var(--doc-accent-4-bg)}
.doc-row.doc-accent-4 td:first-child,.recent-item.doc-accent-4,.mobile-doc-card.doc-accent-4{border-left-color:var(--doc-accent-4-border)}
.doc-type-badge.doc-accent-4,.doc-type-mini.doc-accent-4{background:var(--doc-accent-4-bg);border-color:var(--doc-accent-4-border);color:var(--doc-accent-4-ink)}
.doc-row.doc-accent-5 td,.recent-item.doc-accent-5,.mobile-doc-card.doc-accent-5{background:var(--doc-accent-5-bg)}
.doc-row.doc-accent-5 td:first-child,.recent-item.doc-accent-5,.mobile-doc-card.doc-accent-5{border-left-color:var(--doc-accent-5-border)}
.doc-type-badge.doc-accent-5,.doc-type-mini.doc-accent-5{background:var(--doc-accent-5-bg);border-color:var(--doc-accent-5-border);color:var(--doc-accent-5-ink)}
.doc-row.doc-accent-6 td,.recent-item.doc-accent-6,.mobile-doc-card.doc-accent-6{background:var(--doc-accent-6-bg)}
.doc-row.doc-accent-6 td:first-child,.recent-item.doc-accent-6,.mobile-doc-card.doc-accent-6{border-left-color:var(--doc-accent-6-border)}
.doc-type-badge.doc-accent-6,.doc-type-mini.doc-accent-6{background:var(--doc-accent-6-bg);border-color:var(--doc-accent-6-border);color:var(--doc-accent-6-ink)}
@media (max-width:768px){
 .recent-item{padding:12px 13px}
 .recent-tags{gap:6px}
 .doc-type-badge,.doc-type-mini,.recent-reg{font-size:10px}
}


/* Fixed blue tones for document types and dashboard stats */
:root{
 --doc-accent-1-bg:#eff6ff;
 --doc-accent-1-border:#93c5fd;
 --doc-accent-1-ink:#1d4ed8;
 --doc-accent-2-bg:#dbeafe;
 --doc-accent-2-border:#60a5fa;
 --doc-accent-2-ink:#1d4ed8;
 --doc-accent-3-bg:#e0f2fe;
 --doc-accent-3-border:#38bdf8;
 --doc-accent-3-ink:#0369a1;
 --doc-accent-4-bg:#f0f9ff;
 --doc-accent-4-border:#7dd3fc;
 --doc-accent-4-ink:#075985;
 --doc-accent-5-bg:#dbeafe;
 --doc-accent-5-border:#2563eb;
 --doc-accent-5-ink:#1e3a8a;
 --doc-accent-6-bg:#bfdbfe;
 --doc-accent-6-border:#1d4ed8;
 --doc-accent-6-ink:#1e40af;
}
.stats-grid .stat{position:relative;overflow:hidden;border-width:1px;box-shadow:0 10px 24px rgba(37,99,235,.08)}
.stats-grid .stat::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:currentColor;opacity:.18}
.stats-grid .stat .muted{color:#48627b;font-weight:600}
.stats-grid .stat .big{color:#113b6d}
.stats-grid .stat .badge-icon{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.stat-incoming{background:linear-gradient(180deg,#f4f9ff 0%,#e8f2ff 100%);border-color:#8dbcf3;color:#1d4ed8}
.stat-incoming .badge-icon{background:#dbeafe;color:#1d4ed8}
.stat-outgoing{background:linear-gradient(180deg,#eef8ff 0%,#dff3ff 100%);border-color:#7cc5f6;color:#0284c7}
.stat-outgoing .badge-icon{background:#d9f0ff;color:#0284c7}
.stat-pending{background:linear-gradient(180deg,#eef4ff 0%,#dbeafe 100%);border-color:#7aa2f7;color:#4338ca}
.stat-pending .badge-icon{background:#e0e7ff;color:#4338ca}
.stat-approved{background:linear-gradient(180deg,#f7fbff 0%,#ecfeff 100%);border-color:#8bd3ff;color:#0369a1}
.stat-approved .badge-icon{background:#e0f2fe;color:#0369a1}
.stat-link:hover{transform:translateY(-1px);transition:.15s ease}
.doc-row td{border-bottom-color:#dfeaf7}
.doc-row.doc-accent-1 td,.recent-item.doc-accent-1,.mobile-doc-card.doc-accent-1{background:#eff6ff}
.doc-row.doc-accent-1 td:first-child,.recent-item.doc-accent-1,.mobile-doc-card.doc-accent-1{border-left-color:#93c5fd}
.doc-type-badge.doc-accent-1,.doc-type-mini.doc-accent-1{background:#dbeafe;border-color:#93c5fd;color:#1d4ed8}
.doc-row.doc-accent-2 td,.recent-item.doc-accent-2,.mobile-doc-card.doc-accent-2{background:#dbeafe}
.doc-row.doc-accent-2 td:first-child,.recent-item.doc-accent-2,.mobile-doc-card.doc-accent-2{border-left-color:#60a5fa}
.doc-type-badge.doc-accent-2,.doc-type-mini.doc-accent-2{background:#bfdbfe;border-color:#60a5fa;color:#1d4ed8}
.doc-row.doc-accent-3 td,.recent-item.doc-accent-3,.mobile-doc-card.doc-accent-3{background:#e0f2fe}
.doc-row.doc-accent-3 td:first-child,.recent-item.doc-accent-3,.mobile-doc-card.doc-accent-3{border-left-color:#38bdf8}
.doc-type-badge.doc-accent-3,.doc-type-mini.doc-accent-3{background:#d0f0ff;border-color:#38bdf8;color:#0369a1}
.doc-row.doc-accent-4 td,.recent-item.doc-accent-4,.mobile-doc-card.doc-accent-4{background:#f0f9ff}
.doc-row.doc-accent-4 td:first-child,.recent-item.doc-accent-4,.mobile-doc-card.doc-accent-4{border-left-color:#7dd3fc}
.doc-type-badge.doc-accent-4,.doc-type-mini.doc-accent-4{background:#e0f2fe;border-color:#7dd3fc;color:#075985}
.doc-row.doc-accent-5 td,.recent-item.doc-accent-5,.mobile-doc-card.doc-accent-5{background:#dbeafe}
.doc-row.doc-accent-5 td:first-child,.recent-item.doc-accent-5,.mobile-doc-card.doc-accent-5{border-left-color:#2563eb}
.doc-type-badge.doc-accent-5,.doc-type-mini.doc-accent-5{background:#bfdbfe;border-color:#2563eb;color:#1e3a8a}
.doc-row.doc-accent-6 td,.recent-item.doc-accent-6,.mobile-doc-card.doc-accent-6{background:#bfdbfe}
.doc-row.doc-accent-6 td:first-child,.recent-item.doc-accent-6,.mobile-doc-card.doc-accent-6{border-left-color:#1d4ed8}
.doc-type-badge.doc-accent-6,.doc-type-mini.doc-accent-6{background:#93c5fd;border-color:#1d4ed8;color:#1e40af}
@media(max-width:620px){
 .stats-grid .stat{padding:16px}
 .stats-grid .stat .big{font-size:24px}
}


/* Report action buttons moved to bottom center */
.report-actions-bottom{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 0 6px}
.report-action-btn{min-width:180px;min-height:42px}
.report-actions-bottom .btn.quiet{background:#eef6ff;border-color:#bfdbfe;color:#1d4ed8}
.report-actions-bottom .btn.quiet:hover{background:#dbeafe}
.report-actions-bottom .btn.primary{background:linear-gradient(130deg,var(--brand-1),var(--brand-2))!important}
@media(max-width:680px){
  .report-actions-bottom{padding-top:16px;gap:10px}
  .report-action-btn{width:100%}
}

/* Document uploader identity in all authorized views */
.uploader-meta{margin-top:6px;color:#355b82;font-size:11px;font-weight:600;line-height:1.5;overflow-wrap:anywhere}
.report-table td{overflow-wrap:anywhere}

/* Compact colorful sidebar: consistent desktop and mobile drawer, unchanged navigation logic */
.sidebar .nav{gap:4px}
.sidebar .nav-btn{min-height:35px!important;padding:5px 8px!important;font-size:11.5px!important;line-height:1.3;border-left:3px solid var(--item-color,#38bdf8)!important;background:#1c3049!important;color:#f1f6fb!important;box-shadow:none!important;border-radius:8px}
.sidebar .nav-btn[data-page]>span:first-child{height:26px!important;min-width:27px!important;width:27px!important;display:inline-grid!important;place-items:center!important;font-size:16px!important;background:var(--item-color,#38bdf8)!important;color:white!important;border-radius:7px!important}
.sidebar .nav-btn:hover{background:#28435f!important}
.sidebar .nav-btn.active{background:#314d6b!important;border-left-color:var(--item-color,#38bdf8)!important;box-shadow:inset 0 0 0 1px #ffffff1f!important}
.sidebar .nav-btn.active>span:first-child{background:var(--item-color,#38bdf8)!important;color:#fff!important}
.sidebar .nav-group{margin-top:3px;padding:2px 3px 4px;border:1px solid #59748b38;border-radius:10px;background:#ffffff05}
.sidebar .nav-group-title{min-height:36px;padding:6px 8px;font-size:11.5px;gap:8px}
.sidebar .nav-group-title::before{content:'';width:4px;height:19px;border-radius:6px;background:var(--group-color,#38bdf8);flex:none}
.sidebar .nav-group-icon{font-size:15px}
.sidebar .nav-group-links{gap:3px;padding-top:1px}
.sidebar .nav-count{margin-left:auto;padding:1px 6px;font-size:10px;background:#fef3c7;color:#7c4a03}
.sidebar-menu-scroll{padding-top:2px}
@media(min-width:681px) and (max-width:950px){
 .sidebar .nav-btn{font-size:0!important;justify-content:center;padding:5px 2px!important;min-height:38px!important}
 .sidebar .nav-btn[data-page]>span:first-child{width:28px!important;min-width:28px!important}
 .sidebar .nav-group-title{justify-content:center;padding:7px 2px}
 .sidebar .nav-group-title::before{display:none}
 .sidebar .nav-count{display:none}
}
@media(max-width:680px){
 .sidebar .nav-btn{font-size:12.5px!important;min-height:41px!important;padding:7px 10px!important}
 .sidebar .nav-group-title{min-height:42px;font-size:12.5px}
}

/* Admin authority handover */
.admin-transfer-panel{margin-bottom:18px;border-left:4px solid #2563eb;background:linear-gradient(110deg,#eff6ff,#fff)}
.admin-transfer-panel h3{margin-bottom:7px;color:#173764}
.admin-transfer-row{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin:12px 0}
.admin-transfer-row label{display:grid;gap:6px;flex:1 1 250px;font-weight:600;font-size:12px}
.admin-transfer-row select{min-height:43px;border:1px solid #cbd5e1;border-radius:8px;padding:8px;width:100%;background:#fff}
.admin-transfer-dialog{border:0;border-radius:16px;max-width:440px;width:calc(100% - 24px);padding:0;box-shadow:0 20px 65px #0f172a55}
.admin-transfer-dialog::backdrop{background:#0f172a9c}
.admin-transfer-dialog-body{padding:24px;display:grid;gap:12px}
.admin-transfer-dialog-body h3{margin:0}.admin-transfer-dialog-body p{margin:0}
.admin-transfer-confirm-label{display:grid;gap:8px;font-size:13px}
.admin-transfer-confirm-label input{min-height:43px;padding:8px;border:1px solid #94a3b8;border-radius:8px}
.admin-transfer-dialog-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
@media(max-width:640px){.admin-transfer-row .btn{width:100%}.admin-transfer-dialog-actions .btn{flex:1}}

/* Per-user permissions manager */
.permission-manager-panel{margin-bottom:16px;padding:20px}.permission-manager-intro{display:grid;gap:4px;margin-bottom:14px}.permission-manager-intro strong{font-size:17px}.permission-manager-intro small{color:var(--muted)}.permission-person-label{display:grid;gap:7px;font-weight:600;max-width:530px}.permission-person-label select,.permission-actions select{padding:10px 12px;min-height:42px;border:1px solid #cbd5e1;border-radius:9px;background:#fff}.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:18px 0}.permission-grid label{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid #dce7f3;background:#f8fbff;border-radius:10px;cursor:pointer}.permission-grid input{width:18px;height:18px;accent-color:#2563eb;flex-shrink:0}.permission-actions{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:12px}.permission-actions select{min-width:250px}.permission-manager-panel .admin-transfer-panel{margin-top:16px}@media(max-width:690px){.permission-grid{grid-template-columns:1fr}.permission-actions .btn{width:100%}.permission-actions select{width:100%}}

/* Communications private inbox */
.news-panel{margin-bottom:16px}.news-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.news-controls select{min-height:42px;min-width:200px;border:1px solid #cbd5e1;border-radius:9px;padding:8px}.news-controls label{display:inline-flex;align-items:center;gap:6px;font-size:12px}.news-upload-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.news-upload-form label{display:grid;gap:5px;font-size:12px;font-weight:600}.news-upload-form input,.news-upload-form textarea{padding:10px;border:1px solid #cbd5e1;border-radius:9px;width:100%}.news-upload-form label:nth-child(n+3){grid-column:1/-1}.news-upload-form button{justify-self:start}.news-entry{border:1px solid #bfdbfe;border-left:4px solid #0284c7;border-radius:12px;padding:16px;margin-bottom:10px;background:#eff6ff;display:flex;align-items:center;justify-content:space-between;gap:12px}.news-entry p{margin:5px 0}.news-entry small{color:#64748b}.news-actions{display:flex;gap:7px;flex-wrap:wrap}.news-actions .btn{white-space:normal}@media(max-width:740px){.news-upload-form{grid-template-columns:1fr}.news-entry{display:block}.news-actions{margin-top:10px}}

/* Approval certificate control: separate from original attachment buttons */
.approval-certificate-button{background:#e8f1ff!important;color:#164b86!important;border:1px solid #93baf0!important;font-weight:700}

/* Member permissions quick editor */
.member-quick-rights{margin-top:18px;border:1px solid #bfdbfe;background:linear-gradient(180deg,#f8fbff,#fff);max-width:900px}
.member-quick-rights .permission-grid{margin:12px 0;gap:10px}
.member-rights-shortcut{background:#e0f2fe!important;color:#075985!important;border:1px solid #7dd3fc!important;font-weight:700}
.member-rights-shortcut:hover{background:#bae6fd!important}
@media(max-width:680px){.member-quick-rights{padding:14px}.member-quick-rights .permission-actions{flex-wrap:wrap}}

/* Role control on member list + standalone permissions screen */
#usersBody .member-role:not(:disabled){border:1px solid #60a5fa;background:#eff6ff;color:#1e40af;font-weight:700;cursor:pointer}
.permission-role-edit{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin:12px 0}
.permission-role-edit label{display:grid;gap:6px;min-width:190px;flex:1;font-size:12px;font-weight:600}
.permission-role-edit select{width:100%;min-height:43px;padding:9px 10px;border:1px solid #cbd5e1;border-radius:9px;background:white}
.permission-role-edit .btn{min-height:43px}
@media(max-width:680px){.permission-role-edit{display:grid;grid-template-columns:1fr}.permission-role-edit label{min-width:0}}


/* Dedicated approval controls inside the instruction area, reachable on mobile. */
.mobile-approval-actions{display:flex;flex-direction:column;gap:11px;margin:18px 0 3px;padding-top:12px;border-top:1px solid #d9e5ee}
.mobile-approval-actions .btn{width:100%;min-height:48px;font-size:14px;font-weight:700;border-radius:12px;white-space:normal;line-height:1.4}
.mobile-approval-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mobile-approval-actions .mobile-approve-news{background:linear-gradient(120deg,#059669,#10b981)!important;border:1px solid #059669!important;color:white!important;box-shadow:0 5px 12px #05966926}
.mobile-approval-actions .mobile-cancel-news{background:#fff1f2!important;color:#be123c!important;border:1px solid #fda4af!important}
.mobile-approval-actions .mobile-back-news{background:#eff6ff!important;color:#1d4ed8!important;border:1px solid #93c5fd!important}
.mobile-approval-actions .btn:disabled{opacity:.52;cursor:not-allowed;box-shadow:none}
@media(max-width:680px){.mobile-approval-actions{margin-top:16px}.mobile-approval-actions .btn{min-height:50px;font-size:15px}.detail-dialog:has(#approvalInstructionPanel:not(.hidden)) .dialog-actions #approveButton{display:none!important}}
@media(max-width:360px){.mobile-approval-secondary{grid-template-columns:1fr}}

/* E-Document V5 announcements dashboard */
.announcement-hub{margin:14px 0 22px;padding:20px;border-radius:22px;background:#fff;border:1px solid #dce8f8;box-shadow:0 12px 38px #17427c12;color:#193451}.ann-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px}.ann-kicker{display:block;font-size:12px;color:#34649d;font-weight:800;letter-spacing:.03em}.ann-head h2{font-size:24px;margin:6px 0}.ann-head p{font-size:13px;color:#57708b;margin:0}.ann-toolbar{display:flex;gap:8px;flex-wrap:wrap}.ann-main-button,.ann-secondary-button{border-radius:12px;border:0;padding:11px 15px;font:inherit;font-size:13px;font-weight:750;cursor:pointer;min-height:42px}.ann-main-button{background:linear-gradient(120deg,#2563eb,#6247e8);color:white;box-shadow:0 6px 15px #345de833}.ann-secondary-button{background:#eaf2ff;color:#164d95;border:1px solid #bcd6fa}.ann-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr));gap:14px}.ann-card{padding:17px;border-radius:17px;border:1px solid #cfe2fa;background:linear-gradient(145deg,#e9f4ff,#fff);border-left:6px solid #2475df;min-width:0}.ann-card.urgent{border-color:#f3b8b8;border-left-color:#d62838;background:linear-gradient(140deg,#ffe7ea,#fff7f7)}.ann-card.important{border-color:#efd28d;border-left-color:#db900d;background:linear-gradient(140deg,#fff2c9,#fffaf0)}.ann-card.general{border-color:#aed5fd;border-left-color:#2475df}.ann-card-top,.ann-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.ann-card h3{font-size:18px;color:#19324e;margin:14px 0 8px;overflow-wrap:anywhere}.ann-card p{color:#36506b;margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.ann-card small{color:#667b91}.ann-card-bottom{border-top:1px solid #d8e4ef;padding-top:12px;margin-top:15px}.ann-pill{border-radius:999px;padding:6px 10px;font-size:12px;font-weight:850;background:#d8eaff;color:#1453a1}.ann-card.urgent .ann-pill{background:#ffd2d8;color:#a3192a}.ann-card.important .ann-pill{background:#ffe3a0;color:#855000}.ann-action{border:0;border-radius:10px;padding:9px 12px;background:#2f64b5;color:white;font-weight:750;cursor:pointer}.ann-action:disabled{background:#c1d1df;color:#47637c;cursor:default}.ann-action.quiet{background:#e0e9f5;color:#264a74}.ann-action.delete{background:#ffe2e5;color:#aa2537}.ann-card-actions{display:flex;gap:7px;flex-wrap:wrap}.ann-dialog{border:0;border-radius:20px;padding:24px;width:min(94vw,560px);max-height:88vh;overflow:auto;box-shadow:0 18px 70px #112e5360;color:#1b3857}.ann-dialog::backdrop{background:#0b244f9e}.ann-dialog form,.ann-dialog label{display:grid;gap:8px}.ann-dialog form{gap:15px}.ann-dialog label{font-weight:700}.ann-dialog input:not([type=checkbox]),.ann-dialog textarea,.ann-dialog select{width:100%;padding:11px;border:1px solid #bdcfe6;border-radius:11px;font:inherit}.ann-dialog .ann-check{display:flex;align-items:center}.ann-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}.ann-member{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid #e5edf5;gap:10px}.ann-member input{width:20px;height:20px}.ann-empty{padding:18px;color:#536d88}@media(max-width:680px){.announcement-hub{padding:14px}.ann-head h2{font-size:21px}.ann-toolbar{width:100%}.ann-toolbar button{flex:1}.ann-dialog{padding:18px}}

/* 2026-10-25 approval-only visual refresh. Announcement styling intentionally unchanged. */
#approvalInstructionPanel .mobile-approval-actions{gap:14px;margin-top:20px;padding-top:17px;border-top:1px solid #dbe6f0}
#approvalInstructionPanel .mobile-approval-actions .btn{min-height:54px;border:0!important;border-radius:16px!important;color:#fff!important;font-weight:800;font-size:15px;letter-spacing:.1px;box-shadow:0 6px 15px rgba(25,46,79,.14);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;cursor:pointer}
#approvalInstructionPanel .mobile-approval-actions .btn:hover:not(:disabled){filter:brightness(1.045);transform:translateY(-2px);box-shadow:0 9px 20px rgba(25,46,79,.21)}
#approvalInstructionPanel .mobile-approval-actions .btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 7px rgba(25,46,79,.16)}
#approvalInstructionPanel .mobile-approval-actions .mobile-approve-news{background:linear-gradient(135deg,#16a34a,#059669)!important}
#approvalInstructionPanel .mobile-approval-actions .mobile-cancel-news{background:linear-gradient(135deg,#ef4444,#dc2626)!important}
#approvalInstructionPanel .mobile-approval-actions .mobile-back-news{background:linear-gradient(135deg,#3b82f6,#1d4ed8)!important}
#approvalInstructionPanel .mobile-approval-actions .btn:focus-visible{outline:3px solid #fbbf24;outline-offset:3px}
#approvalInstructionPanel .mobile-approval-actions .btn:disabled{opacity:.56;filter:grayscale(.25);cursor:not-allowed;transform:none}
@media(max-width:480px){#approvalInstructionPanel .mobile-approval-actions .btn{min-height:56px;font-size:15px}}