/* Additional reusable component styling (tabs, modals, pagination, alerts, dropdowns, widgets) */

/* Tabs */
.gov-tabs .nav-link{color:var(--gray-700); font-weight:500; font-size:14px; border:none; border-bottom:3px solid transparent; padding:12px 18px}
.gov-tabs .nav-link:hover{color:var(--sky-600)}
.gov-tabs .nav-link.active{color:var(--sky-600); font-weight:600; background:transparent; border-bottom-color:var(--orange-500)}
.gov-tabs{border-bottom:1px solid var(--gray-200); margin-bottom:16px}

/* Modals */
.modal-content{border-radius:15px; border:none; box-shadow:var(--shadow-md); overflow:hidden}
.modal-header{background:var(--sky-50); border-bottom:1px solid var(--sky-100); padding:16px 22px}
.modal-header .modal-title{font-weight:700; color:var(--navy-900); font-size:15.5px}
.modal-header.modal-danger{background:var(--danger-bg)}
.modal-header.modal-success{background:var(--success-bg)}
.confirm-icon{width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; margin:0 auto 14px}
.confirm-icon.warn{background:var(--warning-bg); color:var(--warning)}
.confirm-icon.danger{background:var(--danger-bg); color:var(--danger)}
.confirm-icon.success{background:var(--success-bg); color:var(--success)}

/* Pagination */
.gov-pagination{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap}
.gov-pagination .page-info{font-size:12.5px; color:var(--gray-500)}
.gov-pagination .pagination{margin:0}
.gov-pagination .page-link{color:var(--sky-600); border-color:var(--gray-200); margin:0 2px; border-radius:8px !important}
.gov-pagination .page-item.active .page-link{background:var(--navy-700); border-color:var(--navy-700); color:#fff}

/* ---------- Multi-select district dropdown (common.js initMultiDistricts) ---------- */
.dd-multi{position:relative}
.dd-multi-btn{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dd-multi-menu{width:100%; max-height:280px; overflow:auto; padding:6px 0}
.dd-multi-menu .dropdown-item{display:flex; align-items:center; font-size:14px; cursor:pointer; white-space:normal}
.dd-multi-menu .form-check-input{margin-top:0; flex:0 0 auto}

/* ---------- RBAC "Preview as user" (js/layout.js) ---------- */
body[data-deny~="create"] [data-perm~="create"],
body[data-deny~="edit"] [data-perm~="edit"],
body[data-deny~="approve"] [data-perm~="approve"],
body[data-deny~="reject"] [data-perm~="reject"],
body[data-deny~="delete"] [data-perm~="delete"],
body[data-deny~="report"] [data-perm~="report"]{display:none !important}
.rbac-preview-bar{position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:1070; display:flex; align-items:center; gap:10px; max-width:calc(100% - 32px); padding:8px 8px 8px 16px; border-radius:999px; background:var(--navy-900); color:#fff; font-size:13px; box-shadow:0 10px 30px rgba(12,74,110,.35)}
.rbac-preview-bar i{color:var(--orange-500); font-size:16px}
.rbac-preview-bar span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rbac-preview-bar button{flex:0 0 auto; border:0; border-radius:999px; padding:5px 14px; background:var(--orange-500); color:#fff; font-weight:600}
body.rbac-denied #app-main{visibility:hidden}
.rbac-denied-card{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1060; width:min(420px, calc(100% - 32px)); padding:28px 24px; text-align:center; background:#fff; border:1px solid var(--gray-200); border-radius:14px; box-shadow:0 20px 50px rgba(12,74,110,.18)}
.rbac-denied-card i{font-size:36px; color:var(--danger)}
.rbac-denied-card h2{font-size:18px; font-weight:700; margin:8px 0 6px}
.rbac-denied-card p{color:var(--gray-500); font-size:14px}
@media(min-width:992px){ .rbac-denied-card{left:calc(50% + 140px)} }

/* Alerts */
.alert-gov-info{background:var(--info-bg); color:var(--info); border:1px solid #bcdcef}
.alert-gov-warning{background:var(--warning-bg); color:var(--warning); border:1px solid #f2e2ab}
.alert-gov-success{background:var(--success-bg); color:var(--success); border:1px solid #bfe6d2}
.alert-gov-danger{background:var(--danger-bg); color:var(--danger); border:1px solid #f0c4bd}

/* Dropdowns */
.dropdown-menu{border:0; box-shadow:var(--shadow-md); border-radius:12px; font-size:14px; padding:6px}
.dropdown-item{border-radius:8px; padding:8px 12px}
.dropdown-item:hover, .dropdown-item:focus{background:var(--sky-50); color:var(--sky-600)}
.dropdown-item:active{background:var(--sky-600); color:#fff}
.dropdown-menu .dropdown-header{font-size:11px; text-transform:uppercase; color:var(--gray-500); letter-spacing:.04em}
.notif-item{display:flex; gap:12px; padding:11px 14px; white-space:normal; width:350px; font-size:13.5px}
.notif-item .notif-ico{width:34px; height:34px; border-radius:50%; background:var(--navy-100); color:var(--navy-700); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.notif-item.unread{background:var(--sky-50); border-radius:8px}
.notif-item small{color:var(--gray-500)}

/* Search / filter panel field grid */
.filter-panel .row > *{margin-bottom:10px}

/* Simple CSS bar / donut widgets (no external chart lib) */
.mini-bar-row{display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:12.8px}
.mini-bar-row .mb-label{width:150px; flex:0 0 auto; color:var(--gray-700)}
.mini-bar-track{flex:1; background:var(--sky-50); border-radius:6px; height:10px; overflow:hidden}
.mini-bar-fill{height:100%; background:var(--navy-700); border-radius:6px}
.mini-bar-fill.orange{background:var(--orange-500)}
.mini-bar-fill.success{background:var(--success)}
.mini-bar-fill.danger{background:var(--danger)}
.mini-bar-val{width:60px; text-align:right; flex:0 0 auto; font-weight:600; color:var(--navy-900)}

.donut{width:120px; height:120px; border-radius:50%; margin:0 auto; position:relative; display:flex; align-items:center; justify-content:center}
.donut .donut-center{width:76px; height:76px; background:#fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center}
.donut .donut-center strong{font-size:18px; color:var(--navy-900)}
.donut .donut-center span{font-size:10.5px; color:var(--gray-500)}
.legend-item{display:flex; align-items:center; gap:8px; font-size:12.5px; margin-bottom:6px}
.legend-dot{width:10px; height:10px; border-radius:3px; flex:0 0 auto}

/* Date field with icon */
.date-field{position:relative}
.date-field i{position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--gray-500); pointer-events:none}

/* Toast container */
.toast{border-radius:8px}

/* Cultural group workflow statuses (js/cg-workflow.js) */
.status-hold{background:#fff1e6; color:#c2410c}
.status-suspended{background:#fde7d3; color:#9a3412}
.status-blacklisted{background:#1f2937; color:#f9fafb}
.status-admit{background:#ede9fe; color:#6d28d9}