/* =====================================================================
   Barangay Dela Paz - Barangay Information System
   Look of the first Barangay Dela Paz system: Bootstrap 5 + white top
   navbar, white side menu, banner, light gray page, soft white cards.
   ===================================================================== */
:root {
  --bg: #f1f4f9;
  --line: #e4e8ef;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e4e8ef;
  --primary: #0d6efd;
  --primary-soft: #eaf2ff;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .06);
  --shadow-lg: 0 10px 30px rgba(16, 24, 40, .12);
  --sky: #00aaff;
  --sky-dark: #0088cc;
  --topnav-h: 62px;
  --sidenav-w: 252px;
  --radius: 10px;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: .9rem;
  --bs-body-color: #1f2937;
  --bs-border-color: #dfe3ea;
}
@font-face { font-family: "Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../vendor/inter/inter-latin-wght-normal.woff2") format("woff2"); }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--bs-body-font-family); font-size: .9rem; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: #111827; letter-spacing: -.01em; }
[hidden] { display: none !important; }
a { text-decoration: none; }
img { max-width: 100%; }
.muted { color: var(--muted) !important; }
.small { font-size: .82rem; }
.mt { margin-top: 1rem !important; }
.mb0 { margin-bottom: 0 !important; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; }
.upper::placeholder { text-transform: none; }
.req { color: #dc3545; }
.err { color: #dc3545; font-size: .82rem; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.narrow { max-width: 720px; }
.prose { max-width: 860px; line-height: 1.75; }
.prose h2, .prose h3 { margin-top: 1.5rem; font-size: 1.15rem; font-weight: 650; }
::selection { background: #cfe2ff; }

/* ------------------------------ Top navbar ------------------------------ */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030; height: var(--topnav-h);
  display: flex; align-items: center; gap: .5rem; padding: 0 1rem 0 .9rem;
  background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 12px rgba(16, 24, 40, .05);
}
.brand { display: flex; align-items: center; gap: .65rem; color: inherit; min-width: 0; }
.brand img { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; flex: 0 0 auto; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e4e8ef; }
.brand span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand b { color: #0b5ed7; font-size: .95rem; font-weight: 700; white-space: nowrap; }
.brand small { color: var(--muted); font-weight: 600; font-size: .72rem; letter-spacing: .02em; }
.topnav .brand { width: calc(var(--sidenav-w) - 1.4rem); }
.tn-toggle {
  border: 0; background: transparent; color: #4b5563; width: 38px; height: 38px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.tn-toggle:hover { background: #f1f4f9; color: var(--primary); }
.tn-right { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.user-menu { position: relative; }
.user-menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .55rem;
  padding: .3rem .55rem .3rem .3rem; border-radius: 50rem; color: #374151; user-select: none; border: 1px solid transparent;
}
.user-menu > summary > .fa-user { width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; }
.user-menu > summary .fa-caret-down { color: #9ca3af; font-size: .8rem; }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover, .user-menu[open] > summary { background: #f6f8fb; border-color: var(--line); }
.um-name { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .85rem; }
.um-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 270px; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: .4rem; z-index: 1040;
}
.um-who { text-align: center; padding: .6rem 1rem .8rem; border-bottom: 1px solid #eef0f4; margin-bottom: .35rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.um-who > i { font-size: 2rem; color: #c3cad6; }
.um-panel a, .um-panel button {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; padding: .5rem .75rem; color: #1f2937; background: none; border: 0; font-size: .86rem; border-radius: 8px;
}
.um-panel a i, .um-panel button i { color: #9ca3af; }
.um-panel a:hover, .um-panel button:hover { background: #f1f4f9; }
.um-panel form button { color: #b42318; }
.um-panel form button i { color: #b42318; }

/* ------------------------------ Side menu ------------------------------ */
.layout { display: flex; padding-top: var(--topnav-h); min-height: 100vh; }
.sidenav {
  position: fixed; top: var(--topnav-h); bottom: 0; left: 0; width: var(--sidenav-w); z-index: 1020;
  background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column;
  transition: transform .2s ease-in-out;
}
.sidenav-menu { flex: 1; overflow-y: auto; padding: .4rem .7rem 1rem; scrollbar-width: thin; }
.sidenav-heading {
  padding: 1.1rem .65rem .4rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; color: #9aa3b2; letter-spacing: .08em;
}
.sidenav-menu a {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .65rem; color: #374151; font-size: .865rem; font-weight: 500; position: relative; border-radius: 8px; margin: 1px 0;
}
.sidenav-menu a .sn-ic { width: 1.25rem; text-align: center; color: #9aa3b2; font-size: .9rem; }
.sidenav-menu a:hover { color: var(--primary); background: #f4f7fc; }
.sidenav-menu a:hover .sn-ic { color: var(--primary); }
.sidenav-menu a.active { color: #0b5ed7; background: var(--primary-soft); font-weight: 600; }
.sidenav-menu a.active::before { content: ""; position: absolute; left: -.7rem; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.sidenav-menu a.active .sn-ic { color: var(--primary); }
.sn-badge {
  margin-left: auto; background: #ef4444; color: #fff; font-size: .68rem; font-weight: 700; border-radius: 50rem;
  padding: .12rem .45rem; line-height: 1.25; min-width: 1.4rem; text-align: center;
}
.sidenav-footer {
  padding: .8rem 1.1rem; background: #f8fafc; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.4;
  display: flex; flex-direction: column; font-weight: 600;
}
.sidenav-footer small { color: var(--muted); font-size: .7rem; font-weight: 500; }
.layout-content { flex: 1; min-width: 0; margin-left: var(--sidenav-w); display: flex; flex-direction: column; transition: margin .2s ease-in-out; }
body.sb-hidden .sidenav { transform: translateX(-100%); }
body.sb-hidden .layout-content { margin-left: 0; }
.sb-backdrop { display: none; }

/* Banner on top of the content (old system) */
.banner { background: #0b3d91; position: relative; }
.banner img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: left center; }
.banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #0d6efd, #00aaff 50%, #f0ba30); }
.admin-main { flex: 1; padding: 1.6rem 1.75rem 2.2rem; max-width: 1600px; width: 100%; }
.admin-main > .card, .admin-main > form.card, .admin-main > .grid-2, .admin-main > .grid-3, .admin-main > .alert, .admin-main > .tabs { margin-bottom: 1.25rem; }
.page-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .9rem 1.75rem; background: #fff;
  border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted);
}
.page-foot a { color: var(--primary); }

/* Page title + breadcrumb */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.4rem; }
.ph-text { flex: 1; min-width: 220px; }
.ph-text h3 { font-size: 1.45rem; font-weight: 700; margin: 0 0 .3rem; color: #111827; }
.ph-text .breadcrumb { margin: 0; font-size: .8rem; --bs-breadcrumb-divider-color: #9ca3af; }
.ph-text .breadcrumb-item.active { color: #6b7280; }
.ph-sub { margin: .4rem 0 0; color: var(--muted); font-size: .85rem; }
.pt-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ------------------------------ Cards ------------------------------ */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: #fff; }
.card + .card, .card + form.card, form.card + .card, form.card + form.card, .tabs + .card, .filter-bar + .card { margin-top: 0; }
.card-header {
  background: #fff; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-height: 54px; font-weight: 600;
  padding: .7rem 1.15rem; border-bottom: 1px solid #eef0f4;
}
.card-header:first-child { border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; }
.card-header > i:first-child {
  width: 30px; height: 30px; border-radius: 8px; background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; flex: 0 0 auto; font-style: normal;
}
.card-header h3 { font-size: .98rem; font-weight: 650; margin: 0; flex: 1; min-width: 0; color: #111827; }
.card-body { padding: 1.15rem; }
.card > .tbl-wrap:last-child, .card > .pager:last-child { border-radius: 0 0 var(--radius) var(--radius); }
.danger-zone { border-color: #f6cfd3; }
.danger-zone .card-header > i:first-child { background: #fde8ea; color: #b42318; }
.danger-zone .card-header h3 { color: #b42318; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.grid-3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.grid-2 > *, .grid-3 > * > .card { margin-bottom: 0; }
.grid-3 > div > .card + .card, .grid-3 > div > .card + form.card, .grid-3 > div > form.card + .card, .grid-2 > div > .card + .card { margin-top: 1.25rem; }

/* ------------------------------ Buttons / forms ------------------------------ */
.btn { --bs-btn-font-size: .865rem; --bs-btn-font-weight: 500; --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { --bs-btn-font-size: .8rem; --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .65rem; border-radius: 7px; }
.btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-y: .65rem; border-radius: 10px; }
.btn-primary { --bs-btn-bg: #0d6efd; --bs-btn-border-color: #0d6efd; --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0b5ed7; box-shadow: 0 1px 2px rgba(13, 110, 253, .25); }
.btn-outline-primary { --bs-btn-border-color: #b8d1fb; --bs-btn-bg: #fff; }
.btn-outline-danger { --bs-btn-border-color: #f3b8be; --bs-btn-bg: #fff; }
.btn-light { --bs-btn-bg: #f1f4f9; --bs-btn-border-color: #e4e8ef; --bs-btn-hover-bg: #e6ebf3; }
.btn-custom {
  display: inline-block; background: var(--sky); color: #fff !important; border-radius: 50rem; padding: .4em 1.3em; border: 0; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 170, 255, .35); transition: background .2s, transform .2s;
}
.btn-custom:hover, .btn-custom:focus { background: var(--sky-dark); transform: translateY(-1px); }
.btn-accent { background: var(--sky); color: #fff; border: 0; border-radius: 50rem; }
.btn-accent:hover { background: var(--sky-dark); color: #fff; }
.btn-ghost { border: 1px solid rgba(255, 255, 255, .75); color: #fff; border-radius: 50rem; }
.btn-ghost:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.btn[disabled] { pointer-events: none; opacity: .65; }
.form-control, .form-select { font-size: .9rem; border-color: #d6dbe4; border-radius: 8px; padding: .5rem .75rem; }
.form-control-sm, .form-select-sm { font-size: .82rem; padding: .3rem .55rem; border-radius: 7px; }
.form-control-lg { font-size: 1rem; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15); }
.form-control[readonly] { background: #f6f8fb; color: #4b5563; }
.form-label { font-weight: 600; font-size: .82rem; color: #374151; }
select:not(.form-select), textarea:not(.form-control) {
  display: block; width: 100%; padding: .5rem .75rem; font-size: .9rem; line-height: 1.5; color: #1f2937;
  background-color: #fff; border: 1px solid #d6dbe4; border-radius: 8px;
}
select:not(.form-select) {
  appearance: none; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px 10px;
}
textarea:not(.form-control) { min-height: 84px; resize: vertical; }
select:not(.form-select):focus, textarea:not(.form-control):focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15); }
label { margin-bottom: .3rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-f { display: flex; flex-direction: column; min-width: 0; }
.form-f > label { font-weight: 600; font-size: .82rem; color: #374151; }
.form-f.full, .form-grid .full { grid-column: 1 / -1; }
.form-f .hint, .form-f small { color: var(--muted); font-size: .78rem; margin-top: .3rem; }
.f-end { justify-content: flex-end; }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; background: #fbfcfe; }
.fs-title { font-weight: 650; color: #0b5ed7; margin-bottom: .9rem; display: flex; gap: .5rem; align-items: center; font-size: .95rem; }
.chk { display: inline-flex; align-items: center; gap: .45rem; margin: 0 .9rem .3rem 0; cursor: pointer; font-weight: 500; font-size: .86rem; }
.chk input { width: 1rem; height: 1rem; accent-color: var(--primary); }
.flag-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.flag { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #d6dbe4; border-radius: 50rem; padding: .38rem .9rem; cursor: pointer; background: #fff; margin: 0; font-size: .85rem; font-weight: 500; }
.flag input { accent-color: var(--primary); }
.flag:has(input:checked) { background: var(--primary-soft); border-color: #9ec5fe; color: #0a58ca; }
.search-row { display: flex; gap: .5rem; }
.search-row > * { min-width: 0; }
.search-row > .btn { flex: 0 0 auto; white-space: nowrap; }
.inline-form { display: inline; }
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.actions-cell { white-space: nowrap; }
.steps { padding-left: 1.2rem; margin: 0; }
.steps li { margin-bottom: .4rem; }
.temp-pw { font-family: Consolas, monospace; font-size: 1.15rem; background: #f8fafc; border: 1px dashed #9ca3af; padding: .4rem .8rem; border-radius: 8px; display: inline-block; }
.role-form { display: flex; gap: .4rem; align-items: center; }
.role-form select { width: auto; padding-top: .25rem; padding-bottom: .25rem; font-size: .82rem; }
.fee-box { background: #f6f8fb; border: 1px solid var(--line); border-radius: 8px; padding: .65rem .95rem; }

/* Badges (soft colors) */
.badge { font-weight: 600; font-size: .72rem; border-radius: 50rem; padding: .32em .7em; letter-spacing: .01em; }
.badge.b-green { background: #dcfce7; color: #166534; }
.badge.b-blue { background: #dbeafe; color: #1e40af; }
.badge.b-teal { background: #ccfbf1; color: #115e59; }
.badge.b-yellow { background: #fef3c7; color: #92400e; }
.badge.b-red { background: #fee2e2; color: #991b1b; }
.badge.b-gray { background: #eef0f4; color: #4b5563; }
.badge.b-purple { background: #ede9fe; color: #5b21b6; }
.tag-list { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Alerts */
.alert { border-radius: var(--radius); font-size: .87rem; border-width: 1px; padding: .8rem 1rem; }
.alert > .fas:first-child { margin-right: .3rem; }
.alert-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.alert-flash { box-shadow: var(--shadow); }

/* ------------------------------ Tables ------------------------------ */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { background: #f1f5f9; color: #334155; font-weight: 700; font-size: .82rem; letter-spacing: .01em; text-align: left; padding: .95rem 1rem; border-bottom: 2px solid #dbe2ea; white-space: nowrap; vertical-align: middle; }
.tbl th:first-child, .tbl td:first-child { padding-left: 1.25rem; }
.tbl th:last-child, .tbl td:last-child { padding-right: 1.25rem; }
.tbl td { padding: .85rem 1rem; border-bottom: 1px solid #edf0f4; vertical-align: middle; line-height: 1.45; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:nth-child(even) td { background: #fbfcfe; }
.tbl tbody tr:hover td { background: #f3f8ff; }
.tbl td b { font-weight: 600; color: #111827; }
.tbl td .sub { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.tbl .clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl tr.row-muted td { color: #9ca3af; }
.tbl tfoot td { font-weight: 700; background: #f8fafc; }
.tbl td.empty { text-align: center; color: var(--muted); padding: 2.2rem 1rem; }
.tbl th.sortable:not(.js-sort) { padding: 0; }
.tbl th.js-sort { cursor: pointer; position: relative; padding-right: 1.9rem; user-select: none; }
.tbl th.js-sort::after { content: "\2195"; position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); opacity: .35; }
.tbl th.js-sort.sort-asc::after { content: "\2191"; opacity: .9; color: var(--primary); }
.tbl th.js-sort.sort-desc::after { content: "\2193"; opacity: .9; color: var(--primary); }
.tbl th.js-sort:hover { color: var(--primary); }
.tbl th.sortable a { display: block; padding: .95rem 1.7rem .95rem 1rem; color: inherit; position: relative; }
.tbl th.sortable:first-child a { padding-left: 1.25rem; }
.tbl th.sortable a::after { content: "\2195"; position: absolute; right: .6rem; opacity: .35; }
.tbl th.sortable.sort-asc a::after { content: "\2191"; opacity: .9; color: var(--primary); }
.tbl th.sortable.sort-desc a::after { content: "\2193"; opacity: .9; color: var(--primary); }
.tbl th.sortable a:hover { color: var(--primary); }
.col-view { width: 1%; white-space: nowrap; }
.v-lbl { display: none; }
.sel-sm { padding: .2rem 1.8rem .2rem .5rem !important; font-size: .8rem !important; width: auto !important; background-position: right .4rem center !important; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1.1rem; border-top: 1px solid #eef0f4; font-size: .8rem; color: var(--muted); }
.pager .pg { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.pager .pg .btn { min-width: 2rem; }
.pg-gap { padding: 0 .3rem; }
.empty { text-align: center; color: var(--muted); padding: 2.6rem 1rem; }
.empty h2, .empty h4 { color: #374151; font-size: 1.15rem; margin: .6rem 0 1rem; }
.empty-sm { text-align: center; color: var(--muted); padding: 1.5rem 1rem; }
.big-icon { font-size: 2.4rem; color: #c3cad6; }

/* Filter bar */
.filter-bar { display: flex; flex-direction: row; flex-wrap: wrap; gap: .75rem; align-items: flex-end; padding: 1rem 1.1rem; margin-bottom: 1.25rem; }
.fb-field { display: flex; flex-direction: column; flex: 1 1 150px; min-width: 0; }
.fb-field.fb-wide { flex: 2 1 240px; }
.fb-field label { font-size: .75rem; font-weight: 600; color: #4b5563; }
.fb-actions { display: flex; gap: .4rem; }

/* Tabs (segmented) */
.tabs { display: flex; flex-wrap: wrap; gap: .3rem; padding: .3rem; background: #e9edf4; border-radius: 10px; margin-bottom: 1.25rem; width: fit-content; max-width: 100%; }
.tabs a {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem; color: #4b5563; border-radius: 8px; font-size: .84rem; font-weight: 500;
}
.tabs a:hover { color: #111827; background: rgba(255, 255, 255, .6); }
.tabs a.active { color: #0b5ed7; background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(16, 24, 40, .1); }
.tabs a .badge { font-size: .68rem; }
.tabs-sm { margin-bottom: .75rem; }
.tabs-sm a { padding: .3rem .65rem; font-size: .8rem; }

/* Definition list */
.dl { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; margin: 0; font-size: .87rem; }
.dl dt, .dl dd { padding: .6rem 1.15rem; border-bottom: 1px solid #f1f3f7; margin: 0; }
.dl dt { color: var(--muted); font-weight: 500; font-size: .8rem; }
.dl dd { word-break: break-word; color: #111827; font-weight: 500; }
.dl dt:nth-last-child(2), .dl dd:last-child { border-bottom: 0; }

/* ------------------------------ Dashboard (old "solution cards") ------------------------------ */
.sol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.sol-card {
  --c: #309df0;
  position: relative; z-index: 1; overflow: hidden; background: #fff; border-radius: 15px; padding: 14px 18px 16px; min-height: 150px;
  box-shadow: 0 2px 4px 0 rgba(136, 144, 195, .2), 0 5px 15px 0 rgba(37, 44, 97, .15);
  transition: transform .5s, background .5s, color .5s; display: flex; flex-direction: column;
}
.sol-card::before {
  content: ""; position: absolute; z-index: -1; width: 170px; height: 400px; right: -56px; top: -23px;
  background: rgba(85, 108, 214, .05); transform: rotate(42deg); border-radius: 35px;
}
.sol-bubble {
  position: absolute; z-index: -1; width: 100rem; height: 100rem; left: -18rem; top: 16rem; border-radius: 50%;
  background: rgba(54, 81, 207, .15); transform: rotate(-36deg); transition: top .7s;
}
.sol-card:hover { background: var(--c); color: #fff; transform: scale(1.04); z-index: 5; }
.sol-card:hover .sol-bubble { top: 0; }
.sol-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sol-ic { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); font-size: 1.2rem; transition: .5s; }
.sol-card:hover .sol-ic { background: #fff; }
.sol-val { font-size: 2.2rem; font-weight: 600; line-height: 1; }
.sol-title { font-size: 1.12rem; margin: .8rem 0 .2rem; font-weight: 600; color: #212121; transition: color .5s; }
.sol-sub { font-size: .82rem; color: var(--muted); margin: 0 0 .8rem; transition: color .5s; }
.sol-card:hover .sol-title, .sol-card:hover .sol-sub { color: #fff; }
.sol-btn {
  margin-top: auto; align-self: flex-start; border-radius: 15px; padding: 4px 18px; font-weight: 500; color: #fff;
  background: var(--c); transition: .5s;
}
.sol-card:hover .sol-btn { background: #fff; color: var(--c); }
.sol-btn::after { content: ""; position: absolute; inset: 0; }
.sol-card.c-blue { --c: #309df0; }
.sol-card.c-pink { --c: #e630f0; }
.sol-card.c-red { --c: #f03073; }
.sol-card.c-green { --c: #22c55e; }
.sol-card.c-teal { --c: #14b8a6; }
.sol-card.c-gold { --c: #f0ba30; }
.sol-grid.sol-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-grid.small-cards { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.small-cards .sol-card { min-height: 0; padding: 12px 16px; }
.small-cards .sol-val { font-size: 1.6rem; }
.small-cards .sol-ic { width: 38px; height: 38px; font-size: 1rem; }
.small-cards .sol-title { font-size: 1rem; margin-top: .55rem; }
.dash-slot + .dash-slot, .dash-parts > .grid-2 { margin-top: 1.25rem; }
.grid-2 > .dash-slot + .dash-slot { margin-top: 0; }
.dash-skel .card-body { display: grid; gap: .6rem; padding: 1.4rem; }
.dash-hint .card-body { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; color: var(--muted); }
.chart-box { position: relative; height: 280px; }
.chart-box.tall { height: 380px; }
.chart-box.sm { height: 220px; }
.dash-picks { display: grid; gap: .5rem; margin: 1rem 0; }
.dash-pick { display: flex; align-items: center; gap: .6rem; border: 1px solid #dee2e6; border-radius: 6px; padding: .6rem .8rem; cursor: pointer; margin: 0; }
.dash-pick:hover { background: #f8f9fa; }
.dash-pick i { color: #0d6efd; width: 1.2rem; text-align: center; }
.dash-pick input { margin-left: auto; width: 1.1rem; height: 1.1rem; accent-color: #0d6efd; }
.dash-pick.is-fixed { background: #f8f9fa; color: var(--muted); cursor: default; }
.welcome-card { background: linear-gradient(120deg, #0d6efd, #309df0); color: #fff; border: 0; }
.welcome-card .muted { color: rgba(255, 255, 255, .85) !important; }

/* Live / idle */
.live-pill {
  position: fixed; right: 14px; bottom: 72px; z-index: 1000; background: #fff; border: 1px solid #dee2e6; border-radius: 50rem;
  padding: .2rem .7rem; font-size: .75rem; color: var(--muted); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); display: flex; align-items: center; gap: .35rem;
}
.live-pill i { width: 8px; height: 8px; border-radius: 50%; background: #adb5bd; display: inline-block; }
.live-pill.ok i { background: #22c55e; animation: livePulse 2s infinite; }
.live-pill.wait i { background: #f0ba30; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.idle-warning {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1060; background: #fff3cd; color: #664d03;
  border: 1px solid #ffecb5; border-radius: 8px; padding: .7rem 1rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); display: flex; gap: .6rem; align-items: center; flex-wrap: wrap;
}

/* ------------------------------ Loaders ------------------------------ */
.nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: #0d6efd; z-index: 2000; opacity: 0; transition: width .3s, opacity .3s; }
.nav-progress.run { opacity: 1; width: 70%; transition: width 6s cubic-bezier(.1, .7, .2, 1); }
.nav-progress.done { opacity: 0; width: 100%; transition: width .2s, opacity .4s .2s; }
body.nav-busy .admin-main { opacity: .45; pointer-events: none; transition: opacity .15s; }
.nav-loader {
  position: fixed; inset: 0; z-index: 1990; display: flex; align-items: center; justify-content: center;
  background: rgba(240, 242, 245, .6); opacity: 0; pointer-events: none; transition: opacity .2s;
}
.nav-loader.show { opacity: 1; pointer-events: auto; }
.nav-loader-box { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.nav-loader-box img { width: 70px; height: 70px; object-fit: contain; border-radius: 50%; background: #fff; position: relative; z-index: 1; }
.ldr-spin {
  position: absolute; inset: 0; border-radius: 50%; border: 4px solid #e7f1ff; border-top-color: #0d6efd; border-right-color: #00aaff;
  animation: ldrSpin .9s linear infinite;
}
@keyframes ldrSpin { to { transform: rotate(360deg); } }
.login-loader {
  position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(33, 37, 41, .45); opacity: 0; transition: opacity .25s;
}
.login-loader.show { opacity: 1; }
.login-loader.no-fade { transition: none; }
.ll-card {
  width: min(360px, 100%); background: #fff; border-radius: 12px; padding: 1.6rem 1.5rem 1.3rem; text-align: center;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.ll-title { font-size: 1.2rem; font-weight: 600; margin-top: .4rem; }
.ll-sub { color: var(--muted); font-size: .9rem; }
.ll-bar { width: 100%; height: .8rem; margin-top: .4rem; }
.ll-bar .progress-bar { width: 0; transition: width .35s ease; }
.ll-pct { font-size: .8rem; color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ldr-spin, .live-pill.ok i { animation: none; } }

/* Import / migrate progress */
.imp-bar { height: 10px; background: #e9ecef; border-radius: 50rem; overflow: hidden; margin-top: .4rem; }
.imp-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0d6efd, #00aaff); transition: width .3s; }
.imp-status { margin-top: .6rem; color: var(--muted); font-size: .88rem; }
.mig-row { display: grid; grid-template-columns: 1fr 130px 120px; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid #f1f2f4; }

/* ------------------------------ Modals ------------------------------ */
.app-modal-overlay {
  position: fixed; inset: 0; z-index: 1055; background: rgba(0, 0, 0, .5); display: none; align-items: flex-start; justify-content: center;
  padding: 1.75rem 1rem; overflow-y: auto;
}
.app-modal-overlay.active { display: flex; }
.app-modal, .dash-modal, .cmp-modal {
  position: relative; width: min(520px, 100%); background: #fff; border-radius: .5rem; padding: 1.4rem 1.4rem 1.2rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); margin: auto 0;
}
.cmp-modal { width: min(1100px, 100%); }
.app-modal-close { position: absolute; right: .8rem; top: .6rem; border: 0; background: none; font-size: 1.4rem; color: #6c757d; line-height: 1; }
.app-modal-close:hover { color: #000; }
.app-modal-icon { font-size: 2.2rem; color: #0d6efd; margin-bottom: .4rem; }
.app-modal-title { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; padding-right: 1.5rem; }
.app-modal-body { color: #495057; }
.app-modal-btn { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.2rem; flex-wrap: wrap; }

/* ------------------------------ Password / register ------------------------------ */
.pw-group .form-control { border-right: 0; }
.pw-toggle { cursor: pointer; background: #fff; }
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 2.6rem; }
.pw-wrap .pw-toggle { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: none; color: #6b7280; width: 2rem; height: 2rem; border-radius: 6px; }
.pw-wrap .pw-toggle:hover { color: var(--primary); background: #f1f4f9; }
.pw-meter { margin-top: .6rem; }
.pw-bar { height: .45rem; }
.pw-bar .progress-bar { width: 0; transition: width .25s, background-color .25s; }
.pw-meter[data-level="0"] .progress-bar, .pw-meter[data-level="1"] .progress-bar { background: #dc3545; }
.pw-meter[data-level="2"] .progress-bar { background: #fd7e14; }
.pw-meter[data-level="3"] .progress-bar { background: #20c997; }
.pw-meter[data-level="4"] .progress-bar { background: #198754; }
.pw-strength { font-size: .8rem; color: var(--muted); margin: .3rem 0; }
.pw-checks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .8rem; font-size: .8rem; text-align: left; }
.pw-checks li { color: #dc3545; }
.pw-checks li.ok { color: #198754; }

/* ------------------------------ Auth pages (login, register ...) ------------------------------ */
body.auth-page { background: #0b2a5b; min-height: 100vh; position: relative; }
body.auth-page::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(8, 30, 75, .55), rgba(0, 0, 0, .25)), url("../img/login-bg.jpg") center bottom / cover no-repeat;
}
.auth-bg { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 1rem 1.5rem; }
.auth-card {
  width: min(430px, 100%); background: rgba(255, 255, 255, .96); border-radius: 18px; padding: 2.1rem 2.1rem 1.8rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .7); backdrop-filter: blur(10px);
}
.auth-card.auth-wide, .auth-card.wide { width: min(520px, 100%); }
.auth-logo { display: block; text-align: center; }
.auth-logo img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18)); }
.auth-who { text-align: center; line-height: 1.2; margin: .7rem 0 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.auth-who b { color: #0b5ed7; font-size: 1.05rem; font-weight: 800; }
.auth-who span { display: inline-block; color: #475569; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: #eef2f7; padding: .25rem .7rem; border-radius: 50rem; }
.auth-title { text-align: center; font-size: 1.45rem; font-weight: 800; margin: .9rem 0 1.5rem; color: #0f172a; }
.auth-card .mb-3 { margin-bottom: 1.05rem !important; }
.auth-card .form-label { font-size: .8rem; font-weight: 700; color: #334155; margin-bottom: .35rem; }
.auth-card .form-label .opt { font-weight: 500; color: #94a3b8; }
.auth-card .form-control-lg { font-size: .95rem; padding: .7rem .9rem; border-radius: 10px; min-height: 48px; }
.auth-card .pw-group .form-control { border-right: 0; }
.auth-card .pw-group .input-group-text { background: #fff; border-color: #d6dbe4; border-left: 0; border-radius: 0 10px 10px 0; color: #64748b; padding: 0 .95rem; }
.auth-card .pw-group .input-group-text:hover { color: #0b5ed7; }
.auth-card .pw-group:focus-within .input-group-text { border-color: #86b7fe; }
.auth-card .btn-lg { min-height: 48px; border-radius: 10px; font-weight: 600; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.label-row a { font-size: .8rem; font-weight: 600; }
.auth-or { display: flex; align-items: center; gap: .8rem; margin: 1.4rem 0 1rem; color: #94a3b8; font-size: .8rem; font-weight: 600; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: #e2e8f0; }
.auth-links { display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem; font-size: .88rem; margin-top: 1.2rem; color: #64748b; }
.auth-links a { font-weight: 700; }
.auth-notice { margin-top: 1.3rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: .7rem .85rem; font-size: .8rem; color: #475569; line-height: 1.5; }
.auth-notice i { color: #64748b; margin-right: .2rem; }
.auth-msg { text-align: center; }
.auth-msg p { color: #475569; line-height: 1.6; margin-bottom: 1.3rem; }
.auth-msg .big-icon, .auth-msg .big { display: block; margin-bottom: .8rem; font-size: 2.8rem; }
.auth-msg .big.ok { color: #198754; } .auth-msg .big.err { color: #dc3545; } .auth-msg .big.info { color: #0d6efd; }
.auth-foot { position: relative; margin: 1.4rem 0 0; color: #1f2937; font-size: .78rem; text-align: center; background: rgba(255, 255, 255, .9); padding: .35rem 1rem; border-radius: 50rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.auth-foot a { color: #0d6efd; }
.auth-card hr { margin: 1.3rem 0; }
.resend-form { margin-bottom: 1rem; text-align: center; }
/* register */
.reg-stepper { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.4rem; padding: .7rem .9rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; font-size: .82rem; color: #64748b; }
.rs-st { display: flex; align-items: center; gap: .45rem; white-space: nowrap; font-weight: 700; }
.rs-st b { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; color: #64748b; font-size: .78rem; }
.rs-st.on { color: #0b5ed7; }
.rs-st.on b { background: #0d6efd; color: #fff; box-shadow: 0 0 0 4px #dbeafe; }
.rs-st.done { color: #15803d; }
.rs-st.done b { background: #16a34a; color: #fff; }
.rs-ln { flex: 1; height: 2px; background: #e2e8f0; border-radius: 2px; }
.reg-h { font-weight: 800; margin: 0 0 .3rem; font-size: 1.1rem; color: #0f172a; }
.reg-sub { color: #64748b; font-size: .86rem; margin: 0 0 1.2rem; line-height: 1.55; }
.reg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.reg-grid > .mb-3 { min-width: 0; }
.reg-grid .rg-half { grid-column: 1 / 2; }
.reg-grid .rg-full { grid-column: 1 / -1; }
.reg-change { border: 0; background: none; color: #0d6efd; font-weight: 700; padding: 0 .2rem; font-size: .84rem; text-decoration: underline; }
.reg-actions { display: flex; gap: .6rem; margin-top: 1.3rem; }
.reg-actions .btn-light { flex: 0 0 auto; padding-left: 1.1rem; padding-right: 1.1rem; }
.reg-actions .btn-primary { flex: 1; }
.reg-err { color: #dc3545; font-size: .84rem; margin: -.2rem 0 .8rem; font-weight: 600; }
.reg-step > .btn-lg { margin-top: .3rem; }
.js-steps[data-step="1"] .reg-step[data-step="2"], .js-steps[data-step="2"] .reg-step[data-step="1"] { display: none; }
.reg-steps:not(.js-steps) .reg-stepper, .reg-steps:not(.js-steps) [data-step-next], .reg-steps:not(.js-steps) [data-step-back] { display: none; }
.auth-card .pw-meter { margin: -.2rem 0 1.1rem; padding: .8rem .9rem; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.auth-card .pw-strength { margin: .45rem 0 .5rem; font-weight: 600; }
.file-drop { display: flex; gap: .85rem; align-items: center; padding: .95rem 1rem; border: 2px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; cursor: pointer; margin: 0; transition: border-color .2s, background .2s; }
.file-drop:hover { border-color: #0d6efd; background: #f0f7ff; }
.file-drop > i { font-size: 1.6rem; color: #0d6efd; }
.file-drop span { display: flex; flex-direction: column; }
.file-drop b { font-size: .9rem; color: #0f172a; }
.file-drop small { color: #64748b; font-size: .78rem; }
.file-drop + .form-control { margin-top: .5rem; font-size: .82rem; }
.form-text.agree { background: #f0f9ff; border-radius: 10px; padding: .6rem .8rem; color: #475569; }
.form-text.agree i { color: #0284c7; margin-right: .2rem; }
@media (max-width: 575.98px) {
  body.auth-page::before { background-image: linear-gradient(135deg, rgba(8, 30, 75, .55), rgba(0, 0, 0, .25)), url("../img/login-bg-portrait.jpg"); background-position: center; }
  .auth-bg { padding: 1.25rem .75rem 1rem; justify-content: flex-start; }
  .auth-card { padding: 1.6rem 1.25rem 1.4rem; border-radius: 16px; }
  .auth-logo img { width: 78px; height: 78px; }
  .auth-title { font-size: 1.3rem; margin-bottom: 1.2rem; }
  .pw-checks { grid-template-columns: 1fr; }
  .reg-grid { column-gap: .7rem; }
  .reg-grid .rg-half { grid-column: auto; }
  .reg-stepper { font-size: .74rem; gap: .4rem; padding: .6rem; }
}

/* ------------------------------ Residents / requests ------------------------------ */
.res-head { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.avatar { width: 84px; height: 84px; border-radius: 50%; background: #e9ecef; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: #adb5bd; font-size: 2rem; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 40px; height: 40px; font-size: 1rem; }
.res-name { font-size: 1.3rem; font-weight: 600; margin: 0; }
.res-sub { color: var(--muted); }
.rel-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.pick-list { border: 1px solid #dee2e6; border-radius: 6px; max-height: 280px; overflow-y: auto; margin-top: .4rem; background: #fff; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08); }
.pick-item { display: flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f1f2f4; background: #fff; padding: .55rem .8rem; }
.pick-item:hover, .pick-item:focus { background: #eef5ff; outline: 0; }
.pick-item b { display: block; }
.pick-item small { color: var(--muted); }
.pick-empty { padding: .8rem; color: var(--muted); font-size: .9rem; }
.selected-res { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: #e7f1ff; border: 1px solid #b6d4fe; border-radius: 6px; padding: .55rem .8rem; }
.selected-res .btn { margin-left: auto; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.type-card {
  display: flex; flex-direction: column; gap: .2rem; border: 1px solid #dee2e6; border-radius: 10px; padding: .9rem 1rem; color: inherit; background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.type-card:hover { border-color: #0d6efd; box-shadow: 0 .3rem .9rem rgba(13, 110, 253, .15); transform: translateY(-2px); color: inherit; }
.type-card.on { border-color: #0d6efd; background: #eef5ff; }
.type-card .tc-ic { width: 40px; height: 40px; border-radius: 50%; background: #e7f1ff; color: #0d6efd; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .3rem; }
.type-card small { color: var(--muted); font-size: .8rem; }
.type-card .tc-fee { margin-top: auto; padding-top: .4rem; font-size: .8rem; font-weight: 600; color: #198754; }
.status-steps { display: flex; gap: 0; margin: .6rem 0; flex-wrap: wrap; }
.status-steps span { position: relative; flex: 1; min-width: 90px; text-align: center; font-size: .8rem; color: #adb5bd; padding-top: 1.6rem; font-weight: 600; }
.status-steps span::before { content: ""; position: absolute; top: .35rem; left: 50%; transform: translateX(-50%); width: 18px; height: 18px; border-radius: 50%; background: #dee2e6; z-index: 1; }
.status-steps span::after { content: ""; position: absolute; top: .85rem; left: -50%; width: 100%; height: 3px; background: #dee2e6; }
.status-steps span:first-child::after { display: none; }
.status-steps span.done { color: #198754; }
.status-steps span.done::before, .status-steps span.done::after { background: #198754; }
.status-steps span.cur { color: #0d6efd; }
.status-steps span.cur::before { background: #0d6efd; box-shadow: 0 0 0 4px #cfe2ff; }
.status-steps span.cur::after { background: #198754; }
.status-steps span.bad { color: #dc3545; }
.status-steps span.bad::before { background: #dc3545; }
.req-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.req-card-header { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.req-card-header > i { color: #0d6efd; }
.req-card-header b { flex: 1; min-width: 0; }
.req-meta { color: var(--muted); font-size: .85rem; margin-top: .3rem; }
.req-note { background: #f8f9fa; border-left: 3px solid #0d6efd; padding: .5rem .8rem; font-size: .9rem; margin-top: .6rem; border-radius: 0 6px 6px 0; }
.req-appt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .6rem; padding: .5rem .8rem; background: #eef9ff; border: 1px solid #b9e6ff; border-radius: 6px; font-size: .92rem; }
.req-appt > i { color: var(--sky-dark); }
.req-appt .btn { margin-left: auto; }
.doc-thumb { display: inline-block; margin-top: .4rem; }
.doc-thumb img { max-width: 220px; max-height: 160px; border-radius: 6px; border: 1px solid #dee2e6; object-fit: cover; }
.doc-pdf { display: inline-flex; gap: .4rem; align-items: center; margin-top: .4rem; }
.dup-group { margin-bottom: 1.25rem; }
.dup-group tr.dup-keep td { background: #d1e7dd !important; }
.cmp-scroll { overflow: auto; max-height: 60vh; margin: 1rem 0; }
table.cmp-tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cmp-tbl th, .cmp-tbl td { border: 1px solid #dee2e6; padding: .4rem .6rem; vertical-align: top; }
.cmp-tbl thead th { background: #f8f9fa; position: sticky; top: 0; }
.cmp-tbl tbody th { background: #f8f9fa; font-weight: 600; white-space: nowrap; }
.cmp-tbl tr.cmp-diff td, .cmp-tbl tr.cmp-diff th { background: #fff3cd; }
.cmp-pick { display: flex; gap: .3rem; align-items: center; margin: 0; }
.cmp-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.ann-admin { display: flex; gap: 1rem; align-items: flex-start; }
.ann-admin .am { width: 140px; flex: 0 0 auto; }
.ann-admin .am img, .ann-admin .am video { width: 100%; border-radius: 6px; }
.off-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.off-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; text-align: center; }
.off-card .avatar { margin: 0 auto .6rem; width: 96px; height: 96px; }
.off-card .sig img { max-height: 40px; }
.verify-box { max-width: 640px; margin: 0 auto; }
.verify-res { text-align: center; }
.acct-status { display: flex; gap: .8rem; align-items: flex-start; border: 1px solid #b6d4fe; background: #e7f1ff; border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1.25rem; }
.acct-status > i { font-size: 1.4rem; margin-top: .1rem; color: #0d6efd; }
.acct-status.pending { background: #fff3cd; border-color: #ffe69c; } .acct-status.pending > i { color: #997404; }
.acct-status.rejected { background: #f8d7da; border-color: #f1aeb5; } .acct-status.rejected > i { color: #b02a37; }
.acct-status.verified { background: #d1e7dd; border-color: #a3cfbb; } .acct-status.verified > i { color: #198754; }
.page-card { max-width: 900px; margin: 0 auto; }

/* ------------------------------ Appointments ------------------------------ */
.appt-box { border: 1px solid #b9e6ff; background: #f5fbff; border-radius: var(--radius); padding: 1rem; }
.appt-box h4 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; color: #0a58ca; }
.appt-pick { display: flex; flex-wrap: wrap; gap: .45rem; }
.appt-month { flex: 0 0 100%; font-weight: 600; font-size: .85rem; color: #495057; margin-top: .4rem; }
.appt-day {
  position: relative; width: 78px; display: flex; flex-direction: column; align-items: center; gap: 0; margin: 0; cursor: pointer;
  border: 1px solid #ced4da; background: #fff; border-radius: 10px; padding: .4rem .2rem .45rem; transition: .15s; text-align: center;
}
.appt-day input { position: absolute; opacity: 0; pointer-events: none; }
.appt-day .ad-dow { font-size: .72rem; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.appt-day .ad-day { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.appt-day .ad-left { font-size: .7rem; color: #198754; font-weight: 600; }
.appt-day:hover { border-color: #0d6efd; }
.appt-day.few .ad-left { color: #fd7e14; }
.appt-day.full { background: #f1f3f5; cursor: not-allowed; opacity: .6; }
.appt-day.full .ad-left { color: #dc3545; }
.appt-day:has(input:checked) { background: #0d6efd; border-color: #0d6efd; color: #fff; box-shadow: 0 .25rem .7rem rgba(13, 110, 253, .35); }
.appt-day:has(input:checked) .ad-dow, .appt-day:has(input:checked) .ad-left { color: #fff; }
.appt-day:has(input:focus-visible) { outline: 3px solid #86b7fe; }
.appt-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cal-head h3 { text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); padding: .2rem 0; }
.cal-cell {
  min-height: 74px; border: 1px solid #e9ecef; border-radius: 6px; padding: .3rem .4rem; color: inherit; background: #fff;
  display: flex; flex-direction: column; gap: .1rem; position: relative; overflow: hidden;
}
.cal-cell.blank { border: 0; background: transparent; }
a.cal-cell:hover { border-color: #0d6efd; color: inherit; }
.cal-d { font-weight: 700; font-size: .9rem; }
.cal-n { font-size: .75rem; color: var(--muted); }
.cal-n b { color: #212529; font-size: .95rem; }
.cal-note { font-size: .65rem; color: #842029; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-cell.some { background: #e7f6ff; }
.cal-cell.busy { background: #fff3cd; }
.cal-cell.full { background: #f8d7da; }
.cal-cell.closed { background: #f1f3f5; color: #adb5bd; }
.cal-cell.past { opacity: .6; }
.cal-cell.today { border: 2px solid #00aaff; }
.cal-cell.sel { border: 2px solid #0d6efd; box-shadow: 0 0 0 3px #cfe2ff; opacity: 1; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .8rem; align-items: center; }
.cal-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: .2rem; border: 1px solid #dee2e6; }
.lg.some { background: #e7f6ff; } .lg.busy { background: #fff3cd; } .lg.full { background: #f8d7da; } .lg.closed { background: #f1f3f5; }
.wk-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.wk-day { margin: 0; cursor: pointer; }
.wk-day input { position: absolute; opacity: 0; }
.wk-day span { display: inline-block; min-width: 56px; text-align: center; padding: .4rem .6rem; border: 1px solid #ced4da; border-radius: 50rem; font-weight: 600; font-size: .88rem; }
.wk-day input:checked + span { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.wk-day input:focus-visible + span { outline: 3px solid #86b7fe; }

/* ------------------------------ Public website ------------------------------ */
body.site { background: #fff; }
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030; display: flex; align-items: center; gap: 1rem;
  padding: .55rem 1.5rem; background: rgba(0, 0, 0, .35); transition: background .3s, box-shadow .3s; backdrop-filter: blur(4px);
}
.site-nav .brand b { color: #fff; }
.site-nav .brand small { color: rgba(255, 255, 255, .8); }
.site-nav .brand img { background: #fff; }
.site-nav.solid, body.site-inner .site-nav { background: #fff; box-shadow: 0 .15rem 1rem rgba(0, 0, 0, .12); }
.site-nav.solid .brand b, body.site-inner .site-nav .brand b { color: #0d6efd; }
.site-nav.solid .brand small, body.site-inner .site-nav .brand small { color: var(--muted); }
.nav-list { margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; list-style: none; gap: .2rem; }
.nav-list a:not(.btn-custom) { color: #fff; padding: .4rem .7rem; border-radius: 6px; }
.nav-list a:not(.btn-custom):hover, .nav-list a.active:not(.btn-custom) { color: #cfefff; }
.site-nav.solid .nav-list a:not(.btn-custom), body.site-inner .nav-list a:not(.btn-custom) { color: #212529; }
.site-nav.solid .nav-list a:not(.btn-custom):hover, body.site-inner .nav-list a:not(.btn-custom):hover,
body.site-inner .nav-list a.active:not(.btn-custom) { color: #0d6efd; }
.nav-list .btn-custom { margin-left: .5rem; }
.sn-toggle { display: none; margin-left: auto; color: #fff; }
.site-nav.solid .sn-toggle, body.site-inner .sn-toggle { color: #212529; }
.full-screen-header {
  min-height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  color: #fff; padding: 6rem 1rem 4rem; background: #1b2a3a url("../img/login-bg.jpg") 40% center / cover no-repeat;
}
.full-screen-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .55)); }
.full-screen-header > * { position: relative; }
.fsh-logo { width: 130px; height: 130px; border-radius: 50%; background: #fff; padding: 6px; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3); margin-bottom: 1rem; }
.fsh-title { color: var(--sky); font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 700; margin: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.fsh-sub { font-size: clamp(1.1rem, 3vw, 1.5rem); margin: .3rem 0 1.3rem; }
.fsh-tag { max-width: 640px; opacity: .92; margin: 0 auto 1.5rem; }
.fsh-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.fsh-actions .btn-custom, .fsh-actions .btn-ghost { font-size: 1.1rem; padding: .55em 1.6em; }
.scroll-down { position: absolute; z-index: 3; bottom: 1.1rem; left: 50%; transform: translateX(-50%); color: #fff; font-size: 1.5rem; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35); animation: bob 2s infinite; }
.scroll-down:hover { color: #fff; background: rgba(255, 255, 255, .28); }
@keyframes bob { 50% { transform: translate(-50%, 8px); } }
.section { padding: 4rem 1rem; }
.section-accent { background: var(--sky); color: #fff; }
.section-light { background: #f0f2f5; }
.section-title { text-align: center; font-size: 2rem; font-weight: 600; margin: 0 0 .5rem; }
.section-sub { text-align: center; color: var(--muted); max-width: 680px; margin: 0 auto 2.2rem; }
.section-accent .section-sub { color: rgba(255, 255, 255, .9); }
.carousel-box { position: relative; max-width: 980px; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .2); background: #000; }
.cs-track { display: flex; transition: transform .6s ease; }
.cs-slide { flex: 0 0 100%; position: relative; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; background: #111; }
.cs-slide img, .cs-slide video { width: 100%; height: 100%; object-fit: contain; }
.cs-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.2rem .9rem; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; text-align: left; }
.cs-cap b { display: block; font-size: 1.1rem; }
.cs-cap small { opacity: .85; }
.cs-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .85); color: #212529; z-index: 2; }
.cs-btn:hover { background: #fff; }
.cs-prev { left: .8rem; }
.cs-next { right: .8rem; }
.cs-dots { position: absolute; bottom: .55rem; right: 1rem; display: flex; gap: .35rem; z-index: 2; }
.cs-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .5); padding: 0; }
.cs-dots button.on { background: #fff; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; max-width: 1140px; margin: 0 auto; }
.svc { background: #fff; border-radius: 15px; padding: 1.2rem; color: #212529; box-shadow: 0 2px 4px rgba(136, 144, 195, .2), 0 5px 15px rgba(37, 44, 97, .15); display: flex; flex-direction: column; }
.svc-top { display: flex; gap: .7rem; align-items: center; margin-bottom: .5rem; }
.svc-ic { width: 46px; height: 46px; border-radius: 50%; background: #e7f6ff; color: var(--sky-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex: 0 0 auto; }
.svc h3 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.svc .fee { font-size: .85rem; font-weight: 600; color: #198754; }
.svc p { color: var(--muted); font-size: .9rem; margin: 0 0 .6rem; }
.svc ul { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .85rem; }
.svc ul li { padding: .15rem 0; }
.svc ul li i { color: var(--sky); margin-right: .3rem; }
.svc .btn { margin-top: auto; align-self: flex-start; }
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; max-width: 1180px; margin: 0 auto; }
.step3 { text-align: center; padding: 1rem; }
.step3 .n { width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--sky-dark); font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .6rem; }
.step3 b { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.step3 p { margin: 0; opacity: .92; font-size: .92rem; }
.of-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.1rem; max-width: 1140px; margin: 0 auto; }
.of { background: #fff; border-radius: 12px; padding: 1.1rem .8rem; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; }
.of .av { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: #e9ecef; display: flex; align-items: center; justify-content: center; color: #adb5bd; font-size: 2.2rem; margin-bottom: .6rem; border: 3px solid #e7f6ff; }
.of .av img { width: 100%; height: 100%; object-fit: cover; }
.of b { font-size: .95rem; }
.of span { color: var(--sky-dark); font-size: .82rem; font-weight: 600; }
.of small { color: var(--muted); font-size: .78rem; }
.of.cap { grid-column: 1 / -1; max-width: 300px; justify-self: center; width: 100%; }
.of.cap .av { width: 140px; height: 140px; border-color: var(--sky); }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; max-width: 1140px; margin: 0 auto; }
.news { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; }
.news-media { aspect-ratio: 16 / 9; background: #e9ecef; }
.news-media img, .news-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-bd { padding: 1rem; }
.news-bd h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .4rem; }
.news-bd p { color: #495057; font-size: .9rem; margin: 0 0 .5rem; white-space: pre-line; }
.news-bd small { color: var(--muted); }
.news .pin { color: #f03073; }
.contact-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; max-width: 1000px; margin: 0 auto; }
.cb-item { display: flex; gap: .8rem; align-items: flex-start; background: rgba(255, 255, 255, .12); border-radius: 12px; padding: 1rem; }
.cb-item i { font-size: 1.3rem; margin-top: .2rem; }
.cb-item b { display: block; }
.cb-item span { opacity: .92; font-size: .92rem; word-break: break-word; }
.site-foot { background: #212529; color: rgba(255, 255, 255, .75); padding: 2.5rem 0 1rem; font-size: .9rem; }
.site-foot a { color: rgba(255, 255, 255, .85); }
.site-foot a:hover { color: #fff; }
.sf-brand { display: flex; gap: .8rem; align-items: center; }
.sf-brand img { width: 56px; height: 56px; border-radius: 50%; background: #fff; }
.sf-brand b { color: #fff; display: block; font-size: 1.05rem; }
.sf-links a { display: block; padding: .15rem 0; }
.sf-copy { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 1.6rem; padding-top: 1rem; text-align: center; font-size: .85rem; }
.public-main { padding-top: 70px; min-height: 70vh; }
.public-main.is-home { padding-top: 0; }
body.site-inner { background: var(--bg); }
.page-title { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; }
.pt-icon { width: 52px; height: 52px; border-radius: 50%; background: #e7f1ff; color: #0d6efd; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: 0 0 auto; }
.pt-text h1 { font-size: 1.6rem; font-weight: 600; margin: 0; }
.pt-text p { margin: .2rem 0 0; color: var(--muted); }
.verify-res { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); padding: 1.2rem; margin-top: 1rem; }
.verify-res h2 { font-size: 1.3rem; text-align: center; margin-bottom: 1rem; }
.verify-res.ok h2 { color: #198754; }
.verify-res.bad { text-align: center; }
.verify-res.bad h2 { color: #dc3545; }
.lead-title { font-size: 1.8rem; font-weight: 600; }


/* ------------------------------ Barangay ID card (print + editor) ------------------------------ */
.idc{position:relative;width:323px;height:204px;overflow:hidden;border-radius:2.5mm;outline:.2mm dashed #999;outline-offset:1.2mm;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.idc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.idc-f{position:absolute;display:flex;align-items:flex-start;justify-content:center;text-align:center;line-height:1.2;font-weight:400;overflow:hidden}
.idc.portrait{width:204px;height:323px}
.idc-f>span{display:block;max-width:100%;max-height:100%;overflow:hidden;overflow-wrap:anywhere}
.idc-f.t-photo{background:#fff}
.idc-f.t-photo img{width:100%;height:100%;object-fit:cover}
.idc-f.t-image img{max-width:100%;max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.idc-f.t-qr{background:#fff;padding:.4mm}
.idc-f.t-qr .cf-qr,.idc-f.t-qr svg{width:100%;height:100%;display:block}
.idc-nophoto{font-size:7pt;color:#aaa;font-weight:700}


.idc-sample-sig { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 11pt; font-weight: 400; color: #1f2a5a; opacity: .7; }
.idc-sample-qr { font-size: 24pt; color: #111; }

/* ID Card Editor */
.ide { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.ide-side > .card + .card { margin-top: 1.25rem; }
.ide-main { position: sticky; top: calc(var(--topnav-h) + 1rem); }
.ide-bar { gap: .75rem; }
.ide-stage { display: flex; justify-content: center; padding: 1.2rem; background: #e9edf4; border-radius: 10px; min-height: 260px; touch-action: none; user-select: none; }
.ide-card-wrap { position: relative; }
.ide-card-wrap > .idc { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-shadow: 0 12px 30px rgba(16, 24, 40, .22); outline: 0; border-radius: 3mm; }
.ide-stage.grid .idc::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background-image: linear-gradient(rgba(13, 110, 253, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(13, 110, 253, .18) 1px, transparent 1px);
  background-size: 10% 10%; }
.ide-stage .idc-f { cursor: move; outline: .25mm dashed rgba(13, 110, 253, .55); background: rgba(13, 110, 253, .06); z-index: 6; }
.ide-stage .idc-f:hover { outline-color: #0d6efd; background: rgba(13, 110, 253, .12); }
.ide-stage .idc-f.sel { outline: .35mm solid #0d6efd; background: rgba(13, 110, 253, .14); z-index: 7; }
.ide-stage .idc-f:focus-visible { outline: .45mm solid #f0ba30; }
.ide-handle { display: none; position: absolute; right: -1mm; bottom: -1mm; width: 2.4mm; height: 2.4mm; background: #0d6efd; border: .3mm solid #fff; border-radius: 50%; cursor: nwse-resize; z-index: 8; font-style: normal; }
.ide-stage .idc-f.sel .ide-handle { display: block; }
.ide-sel-name { font-weight: 650; margin-bottom: .6rem; color: #0b5ed7; }
.ide-list { max-height: 360px; overflow-y: auto; padding: .35rem; }
.ide-item { display: flex; align-items: center; gap: .5rem; padding: .2rem .45rem; border-radius: 8px; }
.ide-item:hover { background: #f4f7fc; }
.ide-item input { width: 1rem; height: 1rem; accent-color: var(--primary); flex: 0 0 auto; }
.ide-item button { flex: 1; text-align: left; border: 0; background: none; padding: .35rem .2rem; font-size: .85rem; color: #374151; border-radius: 6px; }
.ide-item button i { width: 1.2rem; color: #9aa3b2; }
.ide-item button.on { color: #0b5ed7; font-weight: 600; }
.ide-item button.on i { color: #0b5ed7; }
.ide-tpl .form-label { display: flex; gap: .4rem; align-items: center; }
.btn-group .btn.active { background: var(--primary-soft); border-color: #9ec5fe; color: #0b5ed7; }

/* ------------------------------ Signature pad ------------------------------ */
.sig-pad { max-width: 680px; border: 1px solid #d6dbe4; border-radius: 12px; background: #fff; overflow: hidden; }
.sig-pad:not(.js) { border: 0; overflow: visible; }
.sig-pad:not(.js) .sig-modes, .sig-pad:not(.js) .sig-draw, .sig-pad:not(.js) .sig-upload, .sig-pad:not(.js) .sig-result:not(:has(img)) { display: none; }
.sig-pad.js .sig-file { display: none; }
.sig-pad > .hint { display: block; padding: 0 .9rem .7rem; }
.sig-modes { display: flex; gap: .3rem; padding: .45rem; background: #f6f8fb; border-bottom: 1px solid #eef0f4; }
.sig-mode { border: 0; background: none; padding: .4rem .85rem; border-radius: 8px; font-size: .82rem; font-weight: 600; color: #4b5563; }
.sig-mode:hover { background: #eaeef5; }
.sig-mode.on { background: #fff; color: #0b5ed7; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.sig-draw { position: relative; padding: .8rem .9rem .7rem; }
.sig-board { position: relative; margin-bottom: .7rem; }
.sig-canvas { display: block; width: 100%; aspect-ratio: 3 / 1; height: auto; background: #fff; border: 1px dashed #c3cad6; border-radius: 10px; touch-action: none; cursor: crosshair; }
.sig-canvas.shake { animation: sigShake .4s; border-color: #dc3545; }
@keyframes sigShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.sig-line { position: absolute; left: 6%; right: 6%; bottom: 24%; border-top: 1px solid #9ca3af; pointer-events: none; }
.sig-line span { position: absolute; left: 0; top: .25rem; font-size: .7rem; color: #9ca3af; }
.sig-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sig-tools [data-sig-use] { margin-left: auto; }
.sig-colors { display: inline-flex; gap: .35rem; }
.sig-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: #111; box-shadow: 0 0 0 1px #c3cad6; padding: 0; }
.sig-color.blue { background: #1338a8; }
.sig-color.on { box-shadow: 0 0 0 2px #0d6efd; }
.sig-upload { padding: .9rem; }
.sig-drop { display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; padding: 1.4rem 1rem; border: 2px dashed #c3cad6; border-radius: 12px; cursor: pointer; margin: 0; background: #fbfcfe; }
.sig-drop:hover { border-color: #0d6efd; background: #f5f9ff; }
.sig-drop > i { font-size: 1.8rem; color: #0d6efd; }
.sig-drop small { color: var(--muted); max-width: 440px; }
.sig-drop input { max-width: 260px; font-size: .8rem; margin-top: .4rem; }
.sig-result { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem .9rem; border-top: 1px solid #eef0f4; background: #f8fafc; }
.sig-pad:not(.js) .sig-result { border: 1px solid var(--line); border-radius: 10px; margin-bottom: .5rem; }
.sig-preview { min-width: 160px; height: 70px; padding: 4px 10px; border-radius: 8px; border: 1px solid #e4e8ef; display: flex; align-items: center; justify-content: center;
  background-color: #fff; background-image: linear-gradient(45deg, #eef0f4 25%, transparent 25%, transparent 75%, #eef0f4 75%), linear-gradient(45deg, #eef0f4 25%, transparent 25%, transparent 75%, #eef0f4 75%);
  background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.sig-preview:empty { display: none; }
.sig-preview img { max-height: 100%; max-width: 260px; object-fit: contain; }
.sig-status { color: #166534; font-weight: 600; flex: 1; min-width: 180px; }
.sig-result.bad .sig-status { color: #b42318; }
.sig-result.bad .sig-status i::before { content: "\f06a"; }

/* ------------------------------ Printed reports ------------------------------ */
.rep-sheet { background: #fff; max-width: 1000px; margin: 0 auto 1rem; padding: 24px 28px; border: 1px solid var(--line); box-shadow: var(--shadow); color: #111; font-size: 12.5px; font-family: "Times New Roman", Times, serif; }
.rep-head { display: grid; grid-template-columns: 64px 1fr 64px; gap: 14px; align-items: center; text-align: center; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 12px; }
.rep-head img { width: 64px; height: 64px; object-fit: contain; }
.rh-1 { font-size: 12px; } .rh-2 { font-size: 18px; font-weight: 700; letter-spacing: .04em; } .rh-3 { font-size: 15px; font-weight: 700; margin-top: 4px; text-transform: uppercase; letter-spacing: .12em; } .rh-4 { font-size: 12px; color: #444; }
table.rep-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.rep-tbl th, .rep-tbl td { border: 1px solid #777; padding: 3px 6px; text-align: left; vertical-align: top; }
.rep-tbl th { background: #e9ecef; font-size: 10.5px; text-transform: uppercase; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rep-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.rep-tbl tr.tot td { font-weight: 700; background: #f1f3f5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rep-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rep-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 12px; }
.rep-kpis div { border: 1px solid #bbb; border-radius: 6px; padding: 6px; text-align: center; }
.rep-kpis b { display: block; font-size: 17px; } .rep-kpis span { font-size: 10.5px; color: #444; }
.rep-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 30px; font-size: 12px; }
.rep-sign div { display: flex; flex-direction: column; }
.rs-in { border: 0; border-bottom: 1px solid #111; background: #f5f8ff; font: inherit; font-weight: 700; text-transform: uppercase; text-align: center; padding: 3px; margin-top: 26px; }
.rs-in.sm { font-weight: 400; text-transform: none; border-bottom: 0; margin-top: 2px; }
.rep-printed { font-size: 10px; color: #666; margin-top: 14px; text-align: right; }
@media (max-width: 767.98px) { .rep-2 { grid-template-columns: 1fr; } .rep-kpis { grid-template-columns: repeat(3, 1fr); } .rep-sheet { padding: 14px; overflow-x: auto; } }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 991.98px) {
  .sidenav { transform: translateX(-100%); box-shadow: none; }
  body.sb-open .sidenav { transform: none; box-shadow: .5rem 0 2rem rgba(0, 0, 0, .2); }
  .layout-content, body.sb-hidden .layout-content { margin-left: 0; }
  .topnav .brand { width: auto; }
  .grid-2, .grid-3, .appt-layout, .ide { grid-template-columns: minmax(0, 1fr); }
  .sol-grid.sol-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ide-main { position: static; }
  .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner img { height: 110px; }
  .sn-toggle { display: inline-flex; }
  .nav-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; background: #fff;
    padding: .5rem 1rem 1rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  }
  .nav-list.open { display: flex; }
  .nav-list a:not(.btn-custom) { color: #212529 !important; display: block; padding: .6rem .4rem; }
  .nav-list .btn-custom { margin: .5rem 0 0; text-align: center; }
}
@media (max-width: 767.98px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tfoot, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { border-bottom: 1px solid #dee2e6; padding: .5rem .2rem; }
  table.stack tbody tr:nth-child(odd) td, table.stack tr:hover td { background: transparent; }
  table.stack td, table.stack td:first-child, table.stack td:last-child { border: 0; padding: .3rem 1rem; display: flex; gap: .6rem; }
  table.stack tbody tr { padding: .6rem 0; }
  table.stack tbody tr:nth-child(even) td { background: transparent; }
  table.stack td::before { content: attr(data-label); flex: 0 0 38%; color: var(--muted); font-size: .8rem; font-weight: 600; }
  table.stack td:not([data-label])::before, table.stack td[data-label=""]::before { display: none; }
  table.stack td.num { text-align: left; }
  table.stack .clip { max-width: none; white-space: normal; }
  table.stack td.col-view { width: auto; }
  table.stack .v-lbl { display: inline; }
  table.stack td.empty { justify-content: center; }
  .mig-row { grid-template-columns: 1fr; gap: .3rem; }
  .ann-admin { flex-direction: column; }
}
@media (max-width: 575.98px) {
  .admin-main { padding: 1rem .75rem 1.5rem; }
  .topnav { padding: 0 .5rem; }
  .brand img { width: 40px; height: 40px; }
  .topnav .brand b { font-size: .85rem; }
  .um-name { display: none; }
  .ph-text h3 { font-size: 1.35rem; }
  .pt-actions { width: 100%; }
  .pt-actions .btn { flex: 1 1 auto; }
  .form-grid, .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .dl { grid-template-columns: 1fr; }
  .dl dt { border-bottom: 0; padding-bottom: 0; }
  .filter-bar .fb-field, .filter-bar .fb-wide { flex: 1 1 100%; }
  .fb-actions { width: 100%; }
  .fb-actions .btn-primary { flex: 1; }
  .tabs a { padding: .45rem .6rem; font-size: .85rem; }
  .sol-grid, .sol-grid.sol-3, .sol-grid.small-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .7rem; }
  .sol-card { padding: 12px; min-height: 0; }
  .sol-val { font-size: 1.6rem; }
  .sol-title { font-size: .95rem; }
  .sol-ic { width: 36px; height: 36px; font-size: .95rem; }
  .sol-card:hover { transform: none; }
  .banner img { height: 80px; }
  .appt-day { width: calc(25% - .35rem); }
  .cal-cell { min-height: 56px; padding: .2rem; }
  .cal-n { font-size: .65rem; }
  .cal-n b { font-size: .8rem; }
  .cal-note { display: none; }
  .site-nav { padding: .5rem .8rem; }
  .site-nav .brand b { font-size: .85rem; }
  .cs-btn { width: 36px; height: 36px; }
  .page-foot { justify-content: center; text-align: center; }
  .live-pill { bottom: 104px; }
}

/* ------------------------------ Print (reports) ------------------------------ */
@media print {
  .topnav, .sidenav, .banner, .no-print, .page-foot, .live-pill, .idle-warning, .filter-bar, .alert, .page-head .pt-actions, .site-nav, .site-foot { display: none !important; }
  body { background: #fff; }
  .layout { padding-top: 0; }
  .layout-content { margin-left: 0 !important; }
  .admin-main { padding: 0; }
  .card { box-shadow: none; border: 0; }
  .rep-sheet { box-shadow: none; border: 0; padding: 0; max-width: none; margin: 0; }
  .rs-in { background: none !important; }
  .rs-in::placeholder { color: transparent; }
  .rep-tbl thead { display: table-header-group; }
  .rep-tbl tr { break-inside: avoid; }
}

/* =====================================================================
   v1.3 — Public website (Home / Newsfeed / Barangay Portal / FAQs / Contact Us)
   ===================================================================== */
.container { max-width: 1180px; }
.narrow-c { max-width: 860px; }
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; overflow: hidden; padding: 6.5rem 0 5rem; background: #0b2a5b; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 20, 50, .55) 0%, rgba(5, 25, 60, .45) 45%, rgba(5, 20, 50, .8) 100%); }
.hero-in { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero-logo { width: 116px; height: 116px; border-radius: 50%; background: #fff; padding: 5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); margin-bottom: 1.1rem; }
.hero-kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); padding: .35rem .9rem; border-radius: 50rem; margin-bottom: 1rem; backdrop-filter: blur(4px); }
.hero-title { color: #fff; font-size: clamp(2rem, 5.2vw, 3.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .8rem; text-shadow: 0 3px 18px rgba(0, 0, 0, .35); max-width: 900px; }
.hero-text { font-size: clamp(1rem, 2.2vw, 1.2rem); max-width: 720px; opacity: .95; margin: 0 auto 1.8rem; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.btn-lg-custom { font-size: 1.05rem; padding: .7em 1.7em; display: inline-flex; align-items: center; gap: .5rem; }
.hero-actions .btn-ghost { padding: .7em 1.5em; font-size: 1.05rem; }
.hero-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 2.6rem; }
.hero-facts a { display: inline-flex; align-items: center; gap: .55rem; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); padding: .55rem 1rem; border-radius: 12px; font-size: .86rem; backdrop-filter: blur(6px); transition: background .2s; }
.hero-facts a:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.hero-facts i { color: #7dd3fc; }
.sec-title { text-align: center; margin: 0 auto 2.4rem; max-width: 720px; }
.sec-title > span { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-dark); background: #e0f4ff; padding: .3rem .8rem; border-radius: 50rem; margin-bottom: .7rem; }
.sec-title h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; margin: 0 0 .4rem; }
.sec-title p { color: var(--muted); margin: 0; }
.sec-title.light h2 { color: #fff; }
.sec-title.light p { color: rgba(255, 255, 255, .85); }
.sec-title.light > span { background: rgba(255, 255, 255, .18); color: #fff; }
.section { padding: 5rem 0; }
.section-accent { background: linear-gradient(135deg, #0b5ed7 0%, #0099e6 100%); color: #fff; }
.section-dark { background: #0f1f3a; color: #e5e7eb; }
.section-light { background: #f1f4f9; }
.news-meta { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; font-size: .78rem; color: var(--muted); margin-bottom: .45rem; }
.news-meta .pin { color: #db2777; font-weight: 700; }
.news-meta .new { background: #dcfce7; color: #166534; font-weight: 700; padding: .1rem .55rem; border-radius: 50rem; }
.feat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(16, 24, 40, .1); border: 1px solid var(--line); }
.feat:not(:has(.feat-media)) { grid-template-columns: 1fr; }
.feat-media { background: #0b1220; display: flex; align-items: center; justify-content: center; max-height: 460px; }
.feat-media img, .feat-media video { width: 100%; height: 100%; max-height: 460px; object-fit: contain; }
.feat-body { padding: 2rem; }
.feat-body h3 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .7rem; }
.feat-body p { color: #374151; line-height: 1.7; margin: 0; max-height: 300px; overflow: auto; }
.news { transition: transform .2s, box-shadow .2s; }
.news:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 24, 40, .12); }
.news-bd h3 { font-size: 1.02rem; font-weight: 700; }
.news-more summary { list-style: none; cursor: pointer; color: #4b5563; font-size: .9rem; }
.news-more summary::-webkit-details-marker { display: none; }
.news-more .nm-btn { display: block; color: var(--primary); font-weight: 600; font-size: .84rem; margin-top: .35rem; }
.news-more[open] .nm-short, .news-more[open] .nm-btn { display: none; }
.news-more p { margin: 0; color: #4b5563; font-size: .9rem; }
.portal-login-btn { font-weight: 700; color: #0b5ed7 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, .2); }
.portal-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 900px; margin: 0 auto; }
.portal-choices.revealed { animation: popIn .35s ease; }
@keyframes popIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pc-card { background: #fff; color: #1f2937; border-radius: 18px; padding: 2rem 1.8rem 1.8rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); display: flex; flex-direction: column; align-items: center; text-align: center; }
.pc-ic { width: 56px; height: 56px; border-radius: 16px; background: #e0f4ff; color: #0284c7; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1rem; }
.pc-ic.staff { background: #e0e7ff; color: #3730a3; }
.pc-card h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .4rem; }
.pc-card p { color: var(--muted); flex: 1; max-width: 340px; margin: 0 auto 1.4rem; }
.pc-actions { display: flex; flex-direction: column; gap: .6rem; width: 100%; }
.pc-actions .btn { width: 100%; min-height: 50px; border-radius: 12px; font-weight: 600; }
.section-accent .step3 .n { color: #0b5ed7; }
.faq-list { display: grid; gap: .7rem; }
.faq { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 1.05rem 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--muted); transition: transform .2s; }
.faq[open] summary { color: #0b5ed7; }
.faq[open] summary i { transform: rotate(180deg); color: #0b5ed7; }
.faq-a { padding: 0 1.25rem 1.15rem; color: #4b5563; line-height: 1.7; }
.contact-wrap { display: grid; gap: 1.25rem; }
.contact-wrap.has-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: stretch; }
.contact-wrap .contact-band { grid-template-columns: 1fr 1fr; max-width: none; margin: 0; }
.contact-wrap:not(.has-map) .contact-band { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.section-dark .cb-item { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.section-dark .cb-item i { color: #7dd3fc; }
.section-dark .cb-item a { color: #fff; text-decoration: underline; }
.cb-item.emergency i { color: #fca5a5 !important; }
.map-box { border-radius: 16px; overflow: hidden; min-height: 320px; border: 1px solid rgba(255, 255, 255, .12); }
.map-box iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }
.about-box { margin-top: 2rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 1.5rem; }
.about-box h3 { color: #fff; font-size: 1.15rem; font-weight: 700; }
.about-box p { margin: 0; line-height: 1.75; color: #cbd5e1; }
.site-nav .nav-list a.btn-custom { display: inline-flex; align-items: center; gap: .4rem; }
.site-bg-prev { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.site-links { display: grid; gap: .4rem; }
.site-links a { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 10px; color: #1f2937; border: 1px solid #eef0f4; flex-wrap: wrap; }
.site-links a:hover { background: #f4f7fc; }
.site-links a i { color: var(--primary); width: 1.2rem; text-align: center; }
.site-links a small { color: var(--muted); width: 100%; padding-left: 1.8rem; margin-top: -.2rem; }

/* ------------------------------ Tanod ------------------------------ */
.duty-card { border: 0; background: linear-gradient(135deg, #334155, #1e293b); color: #fff; }
.duty-card.on { background: linear-gradient(135deg, #15803d, #166534); }
.duty-card .muted { color: rgba(255, 255, 255, .8) !important; }
.duty-card .form-control { background: rgba(255, 255, 255, .95); }
.duty-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.duty-label { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.duty-time { font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin: .2rem 0; font-variant-numeric: tabular-nums; }
.duty-ic { width: 64px; height: 64px; border-radius: 18px; background: rgba(255, 255, 255, .15); display: inline-flex; align-items: center; justify-content: center; font-size: 1.7rem; }
.shift-item { display: flex; flex-direction: column; padding: .6rem .8rem; border-radius: 10px; background: #f0f9ff; border: 1px solid #bae6fd; margin-bottom: .5rem; }
.shift-item span { color: #0369a1; font-size: .85rem; font-weight: 600; }
.shift-item small { color: var(--muted); }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; }
.quick { --c: #0d6efd; display: flex; flex-direction: column; gap: .25rem; padding: 1.15rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: #1f2937; transition: transform .2s, box-shadow .2s; }
.quick:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16, 24, 40, .12); color: #1f2937; }
.quick i { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); font-size: 1.2rem; margin-bottom: .45rem; }
.quick b { font-size: 1rem; }
.quick small { color: var(--muted); }
.quick.c-red { --c: #dc2626; } .quick.c-blue { --c: #0d6efd; } .quick.c-gold { --c: #d97706; } .quick.c-teal { --c: #0d9488; }
details.add-box > summary { list-style: none; cursor: pointer; }
details.add-box > summary::-webkit-details-marker { display: none; }
details.add-box:not([open]) > summary { border-bottom: 0; border-radius: var(--radius); }
table.sched { width: 100%; border-collapse: collapse; min-width: 860px; font-size: .84rem; }
.sched th, .sched td { border: 1px solid #e5e9f0; padding: .5rem; vertical-align: top; }
.sched thead th { background: #f8fafc; text-align: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #4b5563; }
.sched thead th small { display: block; text-transform: none; letter-spacing: 0; color: var(--muted); font-weight: 500; }
.sched tbody th { background: #f8fafc; width: 150px; font-size: .78rem; color: #374151; }
.sched .today { background: #eff6ff; }
.sched-p { position: relative; background: #fff; border: 1px solid #dbe3ee; border-left: 3px solid #0d9488; border-radius: 8px; padding: .3rem 1.4rem .3rem .45rem; margin-bottom: .35rem; line-height: 1.25; }
.sched-p.me { border-left-color: #0d6efd; background: #eaf2ff; }
.sched-p b { display: block; font-size: .8rem; }
.sched-p small { color: var(--muted); font-size: .72rem; }
.sched-p form { position: absolute; right: .15rem; top: .15rem; }
.sched-x { border: 0; background: none; color: #9ca3af; padding: 0 .2rem; font-size: .75rem; }
.sched-x:hover { color: #dc2626; }
.check-res { margin-top: 1.25rem; border-radius: 14px; padding: 1rem 1.1rem; border: 2px solid; }
.check-res.ok { border-color: #22c55e; background: #f0fdf4; }
.check-res.warn { border-color: #f59e0b; background: #fffbeb; }
.check-res.bad { border-color: #ef4444; background: #fef2f2; }
.cr-head { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; margin-bottom: .6rem; }
.check-res.ok .cr-head { color: #15803d; } .check-res.warn .cr-head { color: #b45309; } .check-res.bad .cr-head { color: #b91c1c; }
.cr-body { display: flex; gap: 1rem; align-items: flex-start; }
.cr-body .dl { flex: 1; background: #fff; border-radius: 10px; }
.cr-photo { width: 110px; height: 130px; object-fit: cover; border-radius: 10px; border: 3px solid #fff; box-shadow: var(--shadow); }
.scan-view { position: relative; margin-top: .5rem; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 18%; border: 3px solid rgba(255, 255, 255, .9); border-radius: 16px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.scan-stop { position: absolute; right: .6rem; top: .6rem; }
.pick-item.info { cursor: default; }
.pre { white-space: pre-wrap; }
.photo-row { display: flex; flex-wrap: wrap; gap: .6rem; border-top: 1px solid #eef0f4; }
.print-only { display: none; }
.rep-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 4px; }
.rep-text { font-size: 12.5px; line-height: 1.6; margin: 0; white-space: normal; }
.rep-tbl.kv th { width: 18%; text-transform: none; font-size: 11px; }

@media (max-width: 991.98px) {
  .feat { grid-template-columns: 1fr; }
  .contact-wrap.has-map { grid-template-columns: 1fr; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .section { padding: 3.5rem 0; }
  .hero { padding-top: 5.5rem; }
  .hero-logo { width: 92px; height: 92px; }
  .hero-facts a { width: 100%; justify-content: center; }
  .portal-choices, .contact-wrap .contact-band { grid-template-columns: 1fr; }
  .feat-body { padding: 1.25rem; }
  .pc-card { padding: 1.3rem; }
  .duty-time { font-size: 2.1rem; }
  .cr-body { flex-direction: column; }
}
@media print {
  .print-only { display: block !important; }
  .quick-grid, details.add-box, .duty-card form { display: none !important; }
  table.sched { min-width: 0; font-size: 10px; }
}
section[id], header[id] { scroll-margin-top: 64px; }

.sched-list { display: none; }
@media (max-width: 767.98px) {
  .sched-list { display: grid; gap: .8rem; }
  .sched-card { display: none; }
  .sl-day .card-body { padding: .8rem; }
  .sl-day.today { border-color: #93c5fd; }
}
@media print { .sched-list { display: none !important; } .sched-card { display: block !important; } }

/* ------------------------------ Resident form (same layout as the old system) ------------------------------ */
.res-form .rbox { border: 2px solid var(--line, #dee2e6); border-radius: .75rem; padding: 1rem; background: #fff; }
.res-form .rbox h6 { font-weight: 700; letter-spacing: .04em; color: #0b2f73; margin-bottom: .75rem; font-size: .9rem; }
.res-form .rf-l { display: block; font-size: .8rem; font-weight: 600; color: #344054; margin-bottom: .2rem; }
.res-form .form-control-sm, .res-form .form-select-sm { min-height: 34px; font-size: .9rem; }
.res-form .rf-radios { display: flex; flex-wrap: wrap; gap: .35rem 1rem; min-height: 34px; align-items: center; font-size: .9rem; }
.res-form .rf-radios label { display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; }
.res-form .btn-group .btn { font-size: .82rem; }
.rp-box { position: relative; height: 240px; border: 2px dashed #b8c2d6; border-radius: 10px; background: #f5f7fb; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rp-box.has { border-style: solid; border-color: #dee2e6; background: #fff; }
.rp-box:hover, .rp-box:focus-visible { border-color: #0d6efd; outline: 0; }
.rp-box img, .rp-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-box video { background: #000; }
.rp-ph { display: flex; flex-direction: column; align-items: center; gap: .3rem; color: #667085; text-align: center; padding: 1rem; }
.rp-ph i { font-size: 3.2rem; color: #b8c2d6; }
.rp-ph b { color: #344054; }
.rp-msg { margin: .6rem 0 0; }
.rp-btns { display: grid; gap: .5rem; margin-top: .75rem; }
.fam-row .btn { width: 100%; min-height: 34px; }

/* ------------------------------ Issue Certificate (walk-in) ------------------------------ */
.tc-blue { --tc: #0d6efd; --tc-bg: #e7f1ff; } .tc-green { --tc: #198754; --tc-bg: #e3f6ec; } .tc-teal { --tc: #0d9488; --tc-bg: #dcf5f2; }
.tc-gold { --tc: #b7791f; --tc-bg: #fdf3dc; } .tc-purple { --tc: #7c3aed; --tc-bg: #efe8fe; } .tc-red { --tc: #dc3545; --tc-bg: #fde7e9; } .tc-navy { --tc: #1e3a8a; --tc-bg: #e3e9f8; }
.type-card[class*="tc-"] { position: relative; border-top: 4px solid var(--tc); }
.type-card[class*="tc-"] .tc-ic { background: var(--tc-bg); color: var(--tc); width: 46px; height: 46px; font-size: 1.15rem; }
.type-card[class*="tc-"]:hover { border-color: var(--tc); box-shadow: 0 .4rem 1.1rem rgba(16, 24, 40, .12); }
.type-card[class*="tc-"].on { border-color: var(--tc); background: var(--tc-bg); }
.type-card .tc-check { position: absolute; top: .7rem; right: .7rem; color: var(--tc); font-size: 1.2rem; }

.iss-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding: 0; margin: 0 0 1rem; counter-reset: s; }
.iss-steps li { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line, #dee2e6); border-radius: 10px; padding: .6rem .8rem; color: #667085; font-size: .9rem; }
.iss-steps li span { flex: 0 0 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eef1f6; font-weight: 700; }
.iss-steps li.now { border-color: #0d6efd; color: #0b2f73; box-shadow: 0 0 0 3px rgba(13, 110, 253, .12); }
.iss-steps li.now span { background: #0d6efd; color: #fff; }
.iss-steps li.done { color: #146c43; }
.iss-steps li.done span { background: #d1f0df; color: #146c43; }

.iss-doc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-left: 5px solid var(--tc); border-radius: inherit; }
.iss-doc > summary::-webkit-details-marker { display: none; }
.iss-doc .tc-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--tc-bg); color: var(--tc); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 48px; }
.iss-doc .ic-txt { display: flex; flex-direction: column; line-height: 1.25; }
.iss-doc .ic-txt small { color: #667085; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.iss-doc .ic-txt b { font-size: 1.1rem; color: #101828; }
.iss-doc .ic-txt em { font-style: normal; color: #198754; font-weight: 600; font-size: .85rem; }
.iss-doc .iss-change { margin-left: auto; }
.iss-doc[open] .iss-change { display: none; }
.iss-doc[open] > summary { border-bottom: 1px solid var(--line, #dee2e6); margin-bottom: 1rem; }
.iss-doc .type-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.iss-person { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; background: linear-gradient(135deg, #f3f8ff, #fff); border: 1px solid #cfe2ff; border-radius: 12px; padding: .9rem 1rem; }
.iss-person.manual { background: #fffaf0; border-color: #f5d08a; }
.iss-person .ip-photo { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; flex: 0 0 72px; background: #dbe7fb; color: #0b2f73; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.4rem; }
.iss-person .ip-photo img { width: 100%; height: 100%; object-fit: cover; }
.iss-person .ip-txt { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.iss-person .ip-txt b { font-size: 1.15rem; color: #101828; }
.iss-person .ip-txt small { color: #475467; }
.iss-person .ip-acts { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.iss-search .is-box { position: relative; }
.iss-search .is-box > i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #98a2b3; }
.iss-search .is-box input { padding-left: 2.6rem; }
.iss-alt { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; }

.iss-form { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.iss-side { position: sticky; top: 76px; }
.iss-sum { overflow: hidden; padding: 0 1rem 1rem; }
.iss-sum .is-head { display: flex; align-items: center; gap: .7rem; margin: 0 -1rem 1rem; padding: .9rem 1rem; background: var(--tc-bg); border-bottom: 3px solid var(--tc); }
.iss-sum .is-head .tc-ic { width: 40px; height: 40px; border-radius: 10px; background: #fff; color: var(--tc); display: inline-flex; align-items: center; justify-content: center; }
.iss-sum dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .8rem; margin: 0 0 .8rem; font-size: .9rem; }
.iss-sum dt { color: #667085; font-weight: 500; }
.iss-sum dd { margin: 0; text-align: right; }
.iss-sum .is-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed #cbd5e1; padding: .7rem 0; margin-bottom: .6rem; }
.iss-sum .is-total b { font-size: 1.5rem; color: #146c43; }
.iss-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--tc); margin-right: .45rem; }
@media (max-width: 992px) {
  .iss-form { grid-template-columns: minmax(0, 1fr); }
  .iss-side { position: static; }
  .iss-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .iss-steps li b { font-size: .8rem; }
  .iss-person .ip-acts { margin-left: 0; width: 100%; }
}
.pick-item .avatar.sm { background: #e7f1ff; color: #0b5ed7; font-weight: 700; }
.pick-item b { color: #0b2f73; }
.iss-search .pick-list { max-height: 420px; }
.iss-chosen-static { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-left: 5px solid var(--tc); border-radius: inherit; }
.iss-doc > summary .tc-ic, .iss-chosen-static .tc-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--tc-bg); color: var(--tc); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex: 0 0 48px; }
.iss-chosen-static .ic-txt { display: flex; flex-direction: column; line-height: 1.25; }
.iss-chosen-static .ic-txt small { color: #667085; font-size: .75rem; letter-spacing: .03em; }
.iss-chosen-static .ic-txt b { font-size: 1.1rem; }
.iss-chosen-static .ic-txt em { font-style: normal; color: #198754; font-weight: 600; font-size: .85rem; }
.iss-sum .is-req { background: #fff8e6; border: 1px solid #f5d08a; border-radius: 8px; padding: .6rem .8rem; margin-bottom: .8rem; font-size: .88rem; }
.iss-sum .is-req ul { margin: .35rem 0 0; padding-left: 1.1rem; }

/* ------------------------------ GCash payment ------------------------------ */
.pay-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.pay-opt { position: relative; cursor: pointer; }
.pay-opt input { position: absolute; opacity: 0; }
.pay-opt > span { display: grid; grid-template-columns: 36px 1fr; gap: .1rem .7rem; align-items: center; border: 2px solid #dee2e6; border-radius: 12px; padding: .8rem .9rem; height: 100%; background: #fff; }
.pay-opt > span i { grid-row: span 2; font-size: 1.5rem; color: #667085; text-align: center; }
.pay-opt > span small { color: #667085; }
.pay-opt input:checked + span { border-color: #0d6efd; background: #eef5ff; box-shadow: 0 0 0 3px rgba(13, 110, 253, .12); }
.pay-opt input:checked + span i { color: #0d6efd; }
.pay-opt.gc input:checked + span { border-color: #0070e0; background: #e8f3ff; }
.pay-opt input:focus-visible + span { outline: 2px solid #f0ba30; }
.gc-box { display: grid; grid-template-columns: 200px 1fr; gap: 1.1rem; margin-top: 1rem; padding: 1rem; border-radius: 12px; background: linear-gradient(135deg, #e8f3ff, #fff); border: 1px solid #b6d4fe; }
.gc-box[hidden] { display: none; }
.gc-qr { width: 200px; height: 200px; background: #fff; border: 1px solid #dee2e6; border-radius: 10px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.gc-qr img { width: 100%; height: 100%; object-fit: contain; }
.gc-qr.big { width: 240px; height: 240px; }
.gc-info ol { padding-left: 1.2rem; margin-bottom: .6rem; }
.gc-info li { margin-bottom: .2rem; }
.gc-amt { color: #0059b3; font-size: 1.1rem; }
.gc-ref { font-size: 1.15rem; letter-spacing: .08em; font-weight: 600; }
.gc-admin { display: grid; grid-template-columns: 240px 1fr; gap: 1.4rem; align-items: start; }
.gc-refno { font-family: ui-monospace, Consolas, monospace; font-size: 1.05rem; letter-spacing: .05em; }
@media (max-width: 700px) {
  .pay-pick, .gc-box, .gc-admin { grid-template-columns: 1fr; }
  .gc-qr, .gc-qr.big { margin: 0 auto; }
}
.gc-refno { white-space: nowrap; }

/* ------------------------------ Document choices: Grid / Carousel ------------------------------ */
.tv-toggle { margin-left: auto; display: inline-flex; background: #eef1f6; border-radius: 50rem; padding: 3px; gap: 2px; }
.tv-toggle button { border: 0; background: transparent; border-radius: 50rem; padding: .3rem .8rem; font-size: .8rem; font-weight: 600; color: #475467; display: inline-flex; gap: .35rem; align-items: center; }
.tv-toggle button.on { background: #fff; color: #0b5ed7; box-shadow: 0 1px 4px rgba(16, 24, 40, .15); }
.type-card .tc-go { display: none; }
.tv-nav { display: none; }
.type-wrap.is-carousel { position: relative; }
.type-wrap.is-carousel .type-grid { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: .4rem .2rem 1rem; scrollbar-width: none; }
.type-wrap.is-carousel .type-grid::-webkit-scrollbar { display: none; }
.type-wrap.is-carousel .type-card { flex: 0 0 clamp(250px, 31%, 320px); scroll-snap-align: start; min-height: 260px; padding: 1.3rem 1.3rem 1.1rem; border-radius: 16px; border-top-width: 6px;
  background: linear-gradient(160deg, var(--tc-bg, #eef5ff) 0%, #fff 55%); box-shadow: 0 .35rem 1.1rem rgba(16, 24, 40, .08); }
.type-wrap.is-carousel .type-card:hover { transform: translateY(-4px); box-shadow: 0 .8rem 1.6rem rgba(16, 24, 40, .14); }
.type-wrap.is-carousel .type-card .tc-ic { width: 60px; height: 60px; font-size: 1.5rem; border-radius: 16px; margin-bottom: .6rem; background: #fff; box-shadow: 0 2px 8px rgba(16, 24, 40, .08); }
.type-wrap.is-carousel .type-card b { font-size: 1.12rem; }
.type-wrap.is-carousel .type-card small { font-size: .88rem; line-height: 1.45; }
.type-wrap.is-carousel .type-card .tc-fee { font-size: .9rem; }
.type-wrap.is-carousel .type-card .tc-go { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin-top: .7rem; padding: .45rem 1rem; border-radius: 50rem;
  background: var(--tc, #0d6efd); color: #fff; font-weight: 600; font-size: .85rem; transition: gap .2s; }
.type-wrap.is-carousel .type-card:hover .tc-go { gap: .7rem; }
.type-wrap.is-carousel .tv-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.tv-arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #d0d5dd; background: #fff; color: #344054; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(16, 24, 40, .08); }
.tv-arrow:hover { border-color: #0d6efd; color: #0d6efd; }
.tv-dots { display: inline-flex; gap: .4rem; }
.tv-dot { width: 9px; height: 9px; border-radius: 50rem; border: 0; padding: 0; background: #cbd5e1; transition: width .25s, background .25s; }
.tv-dot.on { width: 26px; background: #0d6efd; }
@media (max-width: 576px) {
  .type-wrap.is-carousel .type-card { flex-basis: 82%; }
  .tv-toggle button { padding: .3rem .6rem; }
}

/* ------------------------------ Alerts bell + pop-ups ------------------------------ */
.bell { position: relative; }
.bell > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #475467; position: relative; border: 1px solid transparent; }
.bell > summary::-webkit-details-marker { display: none; }
.bell > summary:hover, .bell[open] > summary { background: #f6f8fb; border-color: var(--line); }
.bell > summary > i { font-size: 1.15rem; }
.bell-n { position: absolute; top: -5px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 50rem; background: #0d6efd; color: #fff; font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.bell.has-late .bell-n { background: #dc3545; }
.bell.ring > summary > i { animation: bellRing 1s ease-in-out 2; transform-origin: 50% 0; }
@keyframes bellRing { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-16deg); } 45% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 75% { transform: rotate(4deg); } }
.bell-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(370px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(16, 24, 40, .18); z-index: 1100; overflow: hidden; }
.bell-head { display: flex; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.bell-sound { border: 1px solid var(--line); background: #fff; border-radius: 50%; width: 32px; height: 32px; color: #0d6efd; }
.bell-sound.off { color: #98a2b3; }
.bell-sum { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: .55rem .9rem; background: #f8fafc; font-size: .82rem; color: #475467; }
.bell-sum .late { color: #b42318; }
.bell-list { max-height: 330px; overflow-y: auto; }
.bell-it { display: flex; gap: .7rem; align-items: center; padding: .6rem .9rem; border-bottom: 1px solid #f1f2f4; color: inherit; text-decoration: none; }
.bell-it:hover { background: #eef5ff; color: inherit; }
.bell-it > i { width: 34px; height: 34px; border-radius: 50%; background: #e7f1ff; color: #0d6efd; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.bell-it span { display: flex; flex-direction: column; min-width: 0; }
.bell-it small { color: #667085; }
.bell-it.late > i { background: #fde7e9; color: #dc3545; }
.bell-it.late small { color: #b42318; font-weight: 600; }
.bell-empty { margin: 0; padding: 1.2rem; text-align: center; color: #667085; }
.bell-empty i { color: #22c55e; }
.bell-foot { display: flex; justify-content: space-between; padding: .55rem .9rem; font-size: .85rem; font-weight: 600; }
.bell-notif { display: block; width: 100%; border: 0; border-top: 1px solid var(--line); background: #f8fafc; padding: .55rem; font-size: .8rem; color: #0b5ed7; }
.bell-notif[hidden] { display: none; }
.toasts { position: fixed; right: 16px; top: 72px; z-index: 1200; display: flex; flex-direction: column; gap: .6rem; width: min(360px, 92vw); }
.toast-it { display: flex; gap: .7rem; align-items: center; background: #fff; border: 1px solid #b6d4fe; border-left: 5px solid #0d6efd; border-radius: 10px; padding: .7rem .8rem; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); color: inherit; text-decoration: none; animation: toastIn .35s ease; transition: opacity .4s, transform .4s; }
.toast-it:hover { color: inherit; background: #f5f9ff; }
.toast-it > i { color: #0d6efd; font-size: 1.2rem; }
.toast-it span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.toast-it small { color: #667085; }
.toast-it button { border: 0; background: transparent; font-size: 1.3rem; line-height: 1; color: #98a2b3; }
.toast-it.out { opacity: 0; transform: translateX(30px); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.sn-badge[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .bell.ring > summary > i, .toast-it { animation: none; } }

/* ------------------------------ Record history / logs ------------------------------ */
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { position: relative; padding: 0 0 .9rem 1.2rem; border-left: 2px solid #e4e7ec; margin-left: .4rem; }
.hist li::before { content: ""; position: absolute; left: -6px; top: .3rem; width: 10px; height: 10px; border-radius: 50%; background: #0d6efd; }
.hist li:last-child { padding-bottom: 0; }
.hist-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .8rem; }
.hist-top span { color: #667085; font-size: .8rem; }
.hist-d { color: #475467; font-size: .88rem; }
.chg { margin-top: .35rem; font-size: .82rem; border-collapse: collapse; }
.chg th { font-weight: 600; color: #344054; padding: .15rem .6rem .15rem 0; white-space: nowrap; vertical-align: top; }
.chg td { padding: .15rem .3rem; vertical-align: top; }
.chg td.o { color: #b42318; text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, .4); }
.chg td.n { color: #067647; font-weight: 600; }
.chg td.ar { color: #98a2b3; }
.chg em { color: #98a2b3; font-weight: 400; }
.log-cats { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.log-cats a { display: inline-flex; gap: .4rem; align-items: center; padding: .35rem .8rem; border-radius: 50rem; border: 1px solid var(--line); background: #fff; color: #475467; font-size: .85rem; font-weight: 600; text-decoration: none; }
.log-cats a.on { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.sys-set .card { margin-bottom: 1rem; }
.late-badge { margin-left: .3rem; }
.val-cell select { min-width: 190px; }
.val-days { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.val-days input { max-width: 110px; }
.val-days[hidden] { display: none; }
@media (max-width: 576px) {
  .bell-panel { position: fixed; left: 8px; right: 8px; top: 62px; width: auto; }
}

/* ------------------------------ Face check ------------------------------ */
.face-box { border: 2px solid #d0d5dd; border-radius: 12px; background: #f8fafc; padding: .8rem .9rem; margin-top: .6rem; transition: border-color .2s; }
.face-box.is-ok { border-color: #22c55e; background: #f0fdf4; }
.face-box.is-bad { border-color: #ef4444; background: #fef2f2; }
.face-box.is-busy { border-color: #60a5fa; }
.face-box.is-wait { border-color: #f0ba30; background: #fffbeb; }
.face-box.shake { animation: fbShake .5s; }
@keyframes fbShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.fb-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.fb-head > i { color: #0d6efd; font-size: 1.1rem; }
.fb-state { margin-left: auto; font-size: .78rem; font-weight: 700; padding: .15rem .6rem; border-radius: 50rem; background: #e4e7ec; color: #475467; }
.is-ok .fb-state { background: #dcfce7; color: #166534; }
.is-bad .fb-state { background: #fee2e2; color: #991b1b; }
.is-wait .fb-state { background: #fef3c7; color: #92400e; }
.fb-msg { margin: 0; font-size: .9rem; }
.fb-msg.ok i { color: #16a34a; }
.fb-msg.bad i { color: #dc2626; }
.fb-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #93c5fd; border-top-color: #1d4ed8; border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: .3rem; }
@keyframes spin { to { transform: rotate(360deg); } }
.fb-meter { height: 8px; border-radius: 50rem; background: #e5e7eb; margin-top: .5rem; overflow: hidden; }
.fb-meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f87171, #facc15 50%, #22c55e); transition: width .5s; }
.fb-selfie { margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed #cbd5e1; }
.fb-selfie[hidden] { display: none; }
.fb-cam { position: relative; width: 100%; max-width: 360px; aspect-ratio: 3 / 4; margin: 0 auto .6rem; border-radius: 14px; overflow: hidden; background: #000; }
.fb-cam[hidden] { display: none; }
.fb-cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.fb-oval { position: absolute; left: 50%; top: 46%; width: 62%; height: 66%; transform: translate(-50%, -50%); border: 3px dashed rgba(255, 255, 255, .85); border-radius: 50%; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.fb-tip { position: absolute; left: 8px; right: 8px; bottom: 10px; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 3px #000; font-size: .95rem; }
.fb-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.fb-shot { display: block; width: 120px; height: 150px; object-fit: cover; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); margin-bottom: .6rem; }
.fb-confirm { margin-top: .6rem; font-weight: 600; color: #991b1b; }
.fb-confirm[hidden] { display: none; }
.fb-alert { margin: .6rem 0 0; color: #b91c1c; font-weight: 600; font-size: .9rem; }
.face-pair { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-start; }
.face-pair figure { margin: 0; text-align: center; }
.face-pair img { width: 150px; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.face-pair figcaption { font-size: .78rem; color: #667085; margin-top: .25rem; }
.val-tbl select { min-width: 170px; }
.val-tbl .val-days { margin-top: 0; }
.val-tbl [hidden] { display: none !important; }
.bin-bulk { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; padding: .5rem .8rem; border-radius: 10px; background: #f8fafc; border: 1px solid var(--line); }
.bin-bulk.has-sel { background: #eef5ff; border-color: #b6d4fe; }
.chk-col { width: 42px; text-align: center; }
.chk-col input { width: 18px; height: 18px; }

/* Special Clearance: second step (kind) */
.sc-pick .type-card small { display: block; }
.sc-kind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 16px; padding: 10px 14px;
  border: 1px solid #e3d7f5; border-left: 4px solid #7b4bc4; border-radius: 10px; background: #f7f2fd; }
.sc-kind > span { font-weight: 700; color: #4f2a8a; }
.sc-kind > span i { margin-right: 6px; }

/* Merge SQL File */
.sqlm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.sqlm-stats > div { border: 1px solid var(--line, #e3e8f0); border-radius: 10px; padding: 10px 14px; background: #f8fafd; }
.sqlm-stats b { display: block; font-size: 1.4rem; line-height: 1.2; }
.sqlm-stats span { font-size: .82rem; color: var(--muted); }
.sqlm-stats .good b { color: #198754; }
.sqlm-stats .bad b { color: #dc3545; }
.sqlm-code { display: block; white-space: pre-wrap; word-break: break-all; font-size: .78rem; }

/* Appointment calendar (resident portal) */
.acal { max-width: 560px; }
.acal-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.acal-top b { font-size: 1.05rem; color: #0a3d91; }
.acal-mname { font-weight: 700; color: #0a3d91; margin: .6rem 0 .3rem; }
.acal.js .acal-mname { display: none; }
.acal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.acal-dow { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--muted); padding: .2rem 0; }
.acal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; margin: 0;
  border: 1px solid transparent; border-radius: 10px; text-align: center; line-height: 1.1; }
.acal-day b { font-size: 1.05rem; }
.acal-day small { font-size: .66rem; font-weight: 600; margin-top: 2px; }
.acal-day input { position: absolute; opacity: 0; pointer-events: none; }
.acal-day.blank { min-height: 0; }
.acal-day.off { color: #b8bfc8; background: #f6f7f9; }
.acal-day.off small { color: #c0848a; }
label.acal-day { cursor: pointer; background: #fff; border-color: #cfe3d6; transition: .15s; }
.acal-day.open { background: #effaf2; border-color: #b7e2c4; }
.acal-day.open small { color: #198754; }
.acal-day.few { background: #fff6eb; border-color: #ffd29a; }
.acal-day.few small { color: #d9480f; }
.acal-day.full { background: #f1f3f5; border-color: #dee2e6; color: #adb5bd; cursor: not-allowed; }
.acal-day.full small { color: #dc3545; }
label.acal-day:not(.full):hover { border-color: #0d6efd; transform: translateY(-1px); }
.acal-day.today { box-shadow: inset 0 0 0 2px #86b7fe; }
.acal-day:has(input:checked) { background: #0d6efd; border-color: #0d6efd; color: #fff; box-shadow: 0 .25rem .7rem rgba(13, 110, 253, .35); }
.acal-day:has(input:checked) small { color: #fff; }
.acal-day:has(input:focus-visible) { outline: 3px solid #86b7fe; }
.acal-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; font-size: .78rem; color: var(--muted); }
.acal-legend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; border: 1px solid #ccc; }
.lg.open { background: #effaf2; border-color: #b7e2c4; } .lg.few { background: #fff6eb; border-color: #ffd29a; }
.lg.full { background: #f1f3f5; } .lg.off { background: #f6f7f9; }
.acal-sel { margin-top: .6rem; padding: .55rem .8rem; border-radius: 8px; background: #f1f5fb; color: #495057; font-size: .92rem; }
.acal.has-sel .acal-sel { background: #e7f1ff; color: #0a3d91; }
@media (max-width: 480px) { .acal-day { min-height: 46px; } .acal-day b { font-size: .95rem; } .acal-day small { font-size: .58rem; } }

/* Holidays */
.acal-day.off small.hol { color: #b02a37; }
.lg.hol { background: #f6f7f9; border-color: #e7a3aa !important; }
.hol-tbl .muted-row td { color: var(--muted); }
.hol-edit td { background: #f7faff; }

/* Permissions */
.perm-tbl th.pc, .perm-tbl td.pc { text-align: center; width: 96px; }
.perm-tbl td:first-child, .perm-tbl th:first-child { min-width: 240px; }
.perm-tbl td.pc input { width: 18px; height: 18px; accent-color: #0d6efd; cursor: pointer; }
.perm-tbl .perm-grp td { background: #f1f5fb; font-weight: 700; color: #0a3d91; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.perm-tbl .perm-lock { color: #198754; }
.perm-tbl td.perm-chg { background: #fff8e6; position: relative; }
.perm-tbl td.perm-chg::after { content: ""; position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #fd7e14; }
.perm-def-note { margin-left: .5rem; } .perm-def-note i { color: #fd7e14; font-size: .55rem; vertical-align: 2px; }
.perm-user { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem 1.2rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid #e3e8f0; }
.perm-ugrp b { display: block; font-size: .8rem; text-transform: uppercase; color: #0a3d91; margin-bottom: .2rem; }
.perm-ugrp .chk { display: flex; margin: .15rem 0; }
@media (max-width: 640px) { .perm-tbl th.pc, .perm-tbl td.pc { width: 64px; font-size: .75rem; } }

/* Upload progress */
.up-loader .up-ic { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #e7f1ff; color: #0d6efd; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.up-loader .ll-pct { white-space: pre; }
.up-loader.up-bad .up-ic { background: #fee2e2; color: #dc2626; }
.up-loader.up-bad .progress-bar { background: #dc2626; }

/* Face check pop-up (selfie) and result */
body.fc-open { overflow: hidden; }
.fc-modal { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .65); display: flex; align-items: center; justify-content: center; padding: 12px; }
.fc-modal[hidden] { display: none; }
.fc-dialog { width: 100%; max-width: 440px; max-height: calc(100vh - 24px); overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.fc-mhead { display: flex; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid #e5e7eb; }
.fc-mhead > i { color: #0d6efd; }
.fc-x { margin-left: auto; border: 0; background: #f1f5f9; width: 34px; height: 34px; border-radius: 50%; color: #475467; cursor: pointer; }
.fc-mbody { padding: 1rem; }
.fc-mbody .fb-selfie { margin-top: .4rem; padding-top: 0; border-top: 0; }
.fc-idrow { display: flex; gap: .7rem; align-items: center; font-size: .9rem; margin-bottom: .6rem; }
.fc-idrow img { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #d0d5dd; flex: 0 0 auto; }
.fc-idrow img:not([src]) { display: none; }
.fc-merr { margin: .3rem 0 .6rem; padding: .5rem .7rem; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-weight: 600; font-size: .9rem; }
.fc-merr[hidden] { display: none; }
.fb-pair { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.fb-pair figure { margin: 0; text-align: center; }
.fb-pair img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .18); display: block; }
.fb-pair figcaption { font-size: .72rem; color: #667085; margin-top: 2px; text-transform: capitalize; }
.fb-vs { font-weight: 800; font-size: 1.05rem; color: #0f172a; }

/* ID photo with a guide box */
.idc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-bottom: .5rem; }
.idc-dialog { max-width: 560px; }
.idc-cam { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 12px; overflow: hidden; }
@media (max-width: 600px) { .idc-cam { aspect-ratio: 3 / 4; } }
.idc-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.idc-frame { position: absolute; left: 50%; top: 50%; width: 86%; aspect-ratio: 85.6 / 54; transform: translate(-50%, -50%); border-radius: 12px;
  border: 2px dashed rgba(255, 255, 255, .9); box-shadow: 0 0 0 9999px rgba(0, 0, 0, .5); }
.idc-frame i { position: absolute; width: 26px; height: 26px; border: 4px solid #22c55e; }
.idc-frame i:nth-child(1) { left: -4px; top: -4px; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.idc-frame i:nth-child(2) { right: -4px; top: -4px; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.idc-frame i:nth-child(3) { left: -4px; bottom: -4px; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.idc-frame i:nth-child(4) { right: -4px; bottom: -4px; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.idc-frame span { position: absolute; left: 0; right: 0; top: -2.1rem; text-align: center; color: #fff; font-weight: 700; font-size: .9rem; text-shadow: 0 1px 3px #000; }
.idc-tips { list-style: none; padding: 0; margin: .7rem 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; color: #475467; }
.idc-tips i { color: #0d6efd; width: 1.1em; }
.idc-check img { width: 100%; border-radius: 10px; border: 1px solid #d0d5dd; display: block; }
.idc-chips { margin: .6rem 0; }
.idc-chip { margin: 0 0 .3rem; padding: .45rem .7rem; border-radius: 8px; font-weight: 600; font-size: .9rem; }
.idc-chip.ok { background: #f0fdf4; color: #166534; }
.idc-chip.bad { background: #fff7ed; color: #9a3412; }

/* Privacy Notice / Terms pop-up */
.legal-dialog { max-width: 760px; display: flex; flex-direction: column; max-height: calc(100vh - 24px); overflow: hidden; }
.legal-body { padding: 1rem 1.25rem; overflow-y: auto; flex: 1 1 auto; font-size: .95rem; line-height: 1.6; }
.legal-body h2 { font-size: 1.05rem; margin: 1rem 0 .35rem; color: #0a3d91; }
.legal-body ul { padding-left: 1.2rem; }
.legal-foot { padding: .7rem 1rem; border-top: 1px solid #e5e7eb; text-align: right; }

/* Delete many (Residents, Accounts) */
.bin-bulk .bb-reason { width: auto; flex: 1 1 220px; max-width: 360px; }
.bin-bulk .bb-note { flex-basis: 100%; }

/* Tanod Desk: time in / out of each tanod */
.dtr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; padding: 1rem; }
.dtr-card { border: 1px solid var(--line, #e3e8f0); border-radius: 12px; padding: .8rem; background: #fff; display: flex; flex-direction: column; gap: .5rem; }
.dtr-card.on { border-color: #86efac; background: #f0fdf4; }
.dtr-top { display: flex; gap: .6rem; align-items: center; }
.dtr-top b { display: block; line-height: 1.2; }
.dtr-top small { color: var(--muted); }
.dtr-ic { width: 38px; height: 38px; border-radius: 50%; background: #e7f1ff; color: #0d6efd; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.dtr-card.on .dtr-ic { background: #dcfce7; color: #15803d; }
.dtr-info { display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; font-size: .85rem; }
.dtr-form { display: flex; gap: .4rem; margin-top: auto; }
.dtr-form .form-control { flex: 1 1 auto; min-width: 0; }
/* signatures on blotter / incident */
.sig-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.sig-view { text-align: center; }
.sig-view img { max-width: 220px; max-height: 90px; display: block; margin: 0 auto; }
.rep-sig-img { max-height: 60px; max-width: 180px; display: block; margin: 0 auto -6px; }

/* ---------- News and Announcements (v2.0 patch 16) ---------- */
.nf-wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; max-width: 1180px; margin: 0 auto; align-items: stretch; }
.nf-card { background: #fff; border: 1px solid #e6ebf2; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 20px rgba(16, 24, 40, .07); transition: transform .2s, box-shadow .2s; }
.nf-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(16, 24, 40, .13); }
.nf-card[hidden] { display: none; }
.nf-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #0f172a; border: 0; padding: 0; cursor: zoom-in; }
.nf-media .nf-bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) brightness(.75); transform: scale(1.05); }
.nf-media .nf-img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.nf-media video.nf-img { background: #000; cursor: default; }
.nf-zoom { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: rgba(15, 23, 42, .6); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.nf-media:hover .nf-zoom, .nf-media:focus-visible .nf-zoom { opacity: 1; }
.nf-noimg { cursor: default; background: linear-gradient(135deg, #0a58ca, #00aaff); display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 7; }
.nf-noimg i { font-size: 2.6rem; color: rgba(255, 255, 255, .85); }
.nf-body { padding: 1.1rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.nf-body h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.35; margin: 0 0 .45rem; color: #111827; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nf-ex { color: #4b5563; font-size: .92rem; line-height: 1.55; margin: 0 0 .8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nf-more { margin-top: auto; align-self: flex-start; border: 0; background: none; padding: 0; color: var(--primary, #0d6efd); font-weight: 700; font-size: .88rem; cursor: pointer; }
.nf-more i { transition: transform .2s; }
.nf-more:hover i { transform: translateX(3px); }
/* featured (latest / pinned): wide card */
.nf-feat { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.nf-feat .nf-media { aspect-ratio: auto; height: 440px; }
.nf-feat .nf-noimg { height: auto; min-height: 220px; }
.nf-feat .nf-body { padding: 2rem 2.2rem; justify-content: center; }
.nf-feat .nf-body h3 { font-size: 1.7rem; font-weight: 800; -webkit-line-clamp: 3; margin-bottom: .7rem; }
.nf-feat .nf-ex { font-size: 1rem; -webkit-line-clamp: 7; }
.nf-feat .nf-more { margin-top: .6rem; font-size: .95rem; }
/* pop-up */
.news-dialog { max-width: 860px; position: relative; padding: 0; }
.nm-x { position: absolute; top: 10px; right: 10px; z-index: 2; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.nm-box { max-height: calc(100vh - 24px); overflow-y: auto; }
.nm-head { padding: 1.2rem 3.5rem .8rem 1.4rem; }
.nm-head h3 { font-size: 1.35rem; font-weight: 800; margin: 0; }
.nm-img { background: #0f172a; display: flex; justify-content: center; }
.nm-img img { max-width: 100%; max-height: 75vh; object-fit: contain; display: block; }
.nm-text { padding: 1.1rem 1.4rem 1.4rem; margin: 0; color: #374151; line-height: 1.7; white-space: normal; }
@media (max-width: 991px) {
  .nf-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-feat { grid-template-columns: 1fr; }
  .nf-feat .nf-media { height: 340px; }
  .nf-feat .nf-body { padding: 1.3rem 1.4rem; }
  .nf-feat .nf-body h3 { font-size: 1.35rem; }
}
@media (max-width: 600px) {
  .nf-wrap { grid-template-columns: 1fr; gap: 1rem; }
  .nf-feat .nf-media { height: auto; aspect-ratio: 4 / 3; }
}

/* Account vs resident photo (v2.0 patch 17) */
.face-res { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 12px; padding: .8rem; }
.face-res .face-pair { margin-bottom: .6rem; }
.fp-none { display: flex; align-items: center; justify-content: center; width: 150px; height: 150px; background: #e5e7eb; color: #9ca3af; font-size: 2rem; border-radius: 8px; }
.fcmp-res { padding: .45rem .7rem; border-radius: 8px; background: #eef2f7; color: #374151; }
.fcmp-res.ok { background: #dcfce7; color: #166534; font-weight: 600; }
.fcmp-res.bad { background: #fee2e2; color: #991b1b; font-weight: 600; }
.fcmp-res.warn { background: #fef3c7; color: #92400e; }