/* Page architecture inspired by Teknisi Monitor: stable app shell, task-led pages,
   compact filters and tables that keep secondary detail out of the main workflow. */
:root {
  --tm-blue: #1765bd;
  --tm-blue-dark: #124f98;
  --tm-blue-soft: #eaf2fd;
  --tm-ink: #172033;
  --tm-muted: #64748b;
  --tm-border: #d8e0eb;
  --tm-canvas: #f3f5f9;
}

html { scrollbar-gutter: stable; }

body.app-page { background: var(--tm-canvas) !important; color: var(--tm-ink); }
body.app-page .sidebar {
  width: 208px;
  padding: 14px 10px 12px;
  border-right: 1px solid #e3e8f0;
  background: #fff;
}
body.app-page .logo-row { min-height: 54px; margin-bottom: 10px; padding: 4px 5px 12px; }
body.app-page .logo-row span, body.app-page .logo-row img { width: 36px !important; height: 36px !important; }
body.app-page .logo-row b { font-size: 13px; }
body.app-page .logo-row b::after { font-size: 7px; letter-spacing: .7px; }
body.app-page .sidebar nav { padding: 0 1px 12px; }
body.app-page .nav-group { gap: 2px; margin-bottom: 9px; }
body.app-page .nav-label { padding: 7px 9px 3px; font-size: 8px; letter-spacing: 1px; }
body.app-page .sidebar nav a {
  min-height: 34px;
  gap: 9px;
  padding: 6px 9px !important;
  border-radius: 8px;
  color: #465367;
  font-size: 11.5px;
  font-weight: 600;
}
body.app-page .sidebar nav a .nav-icon {
  display: grid;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 5px;
  color: #667085;
  font-size: 14px;
  line-height: 1;
}
body.app-page .sidebar nav a:hover .nav-icon,
body.app-page .sidebar nav a.active .nav-icon { color: var(--tm-blue); }
body.app-page .sidebar nav .active { background: #e8eef8; color: var(--tm-blue-dark); font-weight: 750; }
body.app-page .sidebar form { position: absolute; right: 10px; bottom: 12px; left: 10px; padding-top: 10px; }
body.app-page .logout { min-height: 34px; font-size: 11px; }

body.app-page .dashboard {
  width: calc(100% - 208px);
  max-width: 1440px;
  margin: 0 auto 0 208px;
  padding: 16px 28px 36px;
}
body.app-page .dashboard > .topbar {
  min-height: 50px;
  margin: 0 0 12px;
  padding: 5px 8px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
body.app-page .topbar-search { min-height: 36px; max-width: 440px; border-radius: 8px; }
body.app-page .topbar-search input { min-height: 34px; font-size: 11px; }
body.app-page .topbar-icon-btn { width: 34px; height: 34px; border-radius: 8px; }
body.app-page .topbar-profile { min-height: 34px; padding: 4px 7px; border-radius: 8px; }
body.app-page .dashboard > header:not(.dashboard-hero) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 96px;
  margin: 0 0 14px;
  padding: 18px 21px;
  border-left: 3px solid var(--tm-blue);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
body.app-page .dashboard > header > div:first-child { min-width: 0; flex: 1 1 auto; }
body.app-page .dashboard > header h1 { margin: 4px 0 3px; font-size: clamp(21px, 2vw, 26px); line-height: 1.18; }
body.app-page .dashboard > header .eyebrow { margin: 0 0 4px; font-size: 9px; letter-spacing: 1.25px; }
body.app-page .dashboard > header .muted { margin: 0; font-size: 11px; line-height: 1.45; }
body.app-page .dashboard > header :is(.header-action, .primary-link, .role-badge) { flex: 0 0 auto; }
body.app-page .dashboard > header .header-action { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 11px; border: 1px solid var(--tm-border); border-radius: 8px; background: #fff; color: var(--tm-blue-dark); font-size: 10px; font-weight: 700; text-decoration: none; }
body.app-page .dashboard > header .header-action:hover { border-color: #aac4e5; background: var(--tm-blue-soft); }
body.app-page .dashboard > header .primary-link { width: auto; min-height: 34px; padding: 8px 12px; border-radius: 8px; font-size: 10px; }
body.app-page .dashboard > header .role-badge { padding: 7px 10px; border: 1px solid #d5e6fb; background: var(--tm-blue-soft); color: var(--tm-blue-dark); }

/* Tabs become a compact module switcher rather than a row of oversized cards. */
body.app-page .dashboard :is(.master-tabs, .view-tabs, .payment-tabs, .segment-tabs) {
  display: flex;
  gap: 6px;
  margin: 0 0 12px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--tm-border);
  border-radius: 11px;
  background: #fff;
  scrollbar-width: thin;
}
body.app-page .dashboard :is(.master-tabs, .view-tabs, .payment-tabs, .segment-tabs) > a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 35px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #566276;
  font-size: 11px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
body.app-page .dashboard :is(.master-tabs, .view-tabs, .payment-tabs, .segment-tabs) > a.active {
  border-color: #d7e5f7;
  background: var(--tm-blue-soft);
  color: var(--tm-blue-dark);
  box-shadow: none;
}
body.app-page .master-tabs b { min-width: 20px; padding: 2px 5px; border-radius: 999px; background: #fff; color: var(--tm-blue-dark); font-size: 9px; }

/* Task areas use one card language; nested content remains visually grouped. */
body.app-page .dashboard :is(.activity, .master-card, .schedule-calendar, .attendance-history, .finance-panel, .ops-panel, .report-card, .period-card, .rule-card, .portal-link-panel) {
  border: 1px solid var(--tm-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .035);
}
body.app-page .dashboard .activity { padding: 16px; }
body.app-page .dashboard .activity > h2 { margin: 0 0 10px; font-size: 16px; }
body.app-page .dashboard :is(.master-card, .schedule-calendar, .attendance-history, .report-card, .period-card) { padding: 16px; }
body.app-page .dashboard .stat-grid { gap: 10px; margin: 12px 0; }
body.app-page .dashboard .stat-grid article { min-height: 86px; padding: 13px 14px; border-radius: 11px; }
body.app-page .dashboard .stat-grid strong { margin: 5px 0; font-size: clamp(20px, 1.8vw, 26px); }

/* Master data: convert the action-card shelf into a compact tool rail. */
body.app-page .master-page .icon-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 8px;
  margin: 8px 0 14px;
  overflow: visible;
  padding: 1px 1px 5px;
}
/* The legacy ID rule (#masterOptionGrid) forced a single horizontal rail and
   outranked the class-based grid above. Keep the actions in the page flow. */
body.app-page .master-page #masterOptionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  align-items: stretch;
  overflow: visible;
  padding-bottom: 5px;
}
body.app-page .master-page #masterOptionGrid form { min-width: 0; overflow: hidden; }
body.app-page .master-page #masterOptionGrid form > div { flex: 1 1 0; width: 0; min-width: 0; }
body.app-page .master-page #masterOptionGrid form input[type="file"] { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 0; height: auto; margin: 4px 0; padding: 0; border: 0; background: transparent; font-size: 9px; }
body.app-page .master-page #masterOptionGrid form button { min-height: 26px; margin: 3px 0 0; padding: 4px 8px; font-size: 10px; }
body.app-page .master-page .icon-card-grid > :is(a, form) {
  display: flex;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  max-width: none;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 10px;
  border: 1px solid var(--tm-border);
  border-left: 3px solid var(--tm-blue);
  border-radius: 9px;
  background: #fff;
  box-shadow: none;
}
body.app-page .master-page .icon-card-grid :is(i, svg) { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; font-size: 17px; }
body.app-page .master-page .icon-card-grid b { font-size: 11px; }
body.app-page .master-page .icon-card-grid span { font-size: 9px; }
body.app-page .master-page .master-card-head { gap: 11px; padding-bottom: 12px; }
body.app-page .master-page .master-card-head h2 { margin: 1px 0 2px; font-size: 16px; }
body.app-page .master-page .student-input-actions { margin: 0 0 9px; }
body.app-page .master-page .student-input-actions a { min-height: 32px; padding: 6px 9px; border-radius: 8px; }
body.app-page .master-page .master-search { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }
body.app-page .master-page .master-search input { width: min(100%, 360px); }
body.app-page .master-page .master-table-wrap { max-height: min(62vh, 760px); border: 1px solid var(--tm-border); border-radius: 9px; }
body.app-page .master-page .master-table { min-width: 780px; }
body.app-page .master-page #masterTable th:nth-child(9),
body.app-page .master-page #masterTable td:nth-child(9) { width: 112px; min-width: 112px; white-space: nowrap; }
body.app-page .master-page .record-primary { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-page .master-page .record-more { margin-top: 4px; font-size: 10px; }
body.app-page .master-page .record-more summary { color: var(--tm-blue); cursor: pointer; font-weight: 650; }
body.app-page .master-page .record-more dl { display: grid; gap: 4px; min-width: 260px; margin: 7px 0 2px; padding: 8px; border: 1px solid var(--tm-border); border-radius: 8px; background: #fff; white-space: normal; }
body.app-page .master-page .record-more dl div { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 8px; }
body.app-page .master-page .record-more dt { color: var(--tm-muted); }
body.app-page .master-page .record-more dd { margin: 0; overflow-wrap: anywhere; }

/* Inbox workflow: filters and queues are distinct from the record table. */
body.app-page .dashboard:has(#regFilterTabs) .activity { padding: 14px; }
body.app-page .dashboard:has(#regFilterTabs) #regFilterTabs { margin: 0 0 10px; }
body.app-page .dashboard:has(#regFilterTabs) .list-search { margin: 0 0 10px; }
body.app-page .dashboard:has(#regFilterTabs) .master-table-wrap { max-height: min(64vh, 780px); border: 1px solid var(--tm-border); border-radius: 9px; }
body.app-page .dashboard:has(#regFilterTabs) #regList { width: 100%; min-width: 0 !important; table-layout: fixed; }
body.app-page .dashboard:has(#regFilterTabs) #regList th,
body.app-page .dashboard:has(#regFilterTabs) #regList td { min-width: 0 !important; max-width: none; white-space: normal; overflow-wrap: anywhere; }
body.app-page .dashboard:has(#regFilterTabs) #regList th:nth-child(1) { width: 4%; }
body.app-page .dashboard:has(#regFilterTabs) #regList th:nth-child(2) { width: 16%; }
body.app-page .dashboard:has(#regFilterTabs) #regList th:nth-child(3) { width: 15%; }
body.app-page .dashboard:has(#regFilterTabs) #regList th:nth-child(4) { width: 14%; }
body.app-page .dashboard:has(#regFilterTabs) #regList th:nth-child(5) { width: 17%; }
body.app-page .dashboard:has(#regFilterTabs) #regList th:nth-child(6) { width: 10%; }
body.app-page .dashboard:has(#regFilterTabs) #regList th:nth-child(7) { width: 8%; }
body.app-page .dashboard:has(#regFilterTabs) #regList th:nth-child(8) { width: 16%; }
body.app-page .dashboard:has(#regFilterTabs) #regList th { position: sticky; top: 0; z-index: 2; }
body.app-page .dashboard:has(#regFilterTabs) #regList td { vertical-align: top; }
body.app-page .dashboard:has(#regFilterTabs) .registration-actions { display: flex; gap: 4px; }
body.app-page .dashboard:has(#regFilterTabs) :is(.reg-student-cell, .reg-program-cell, .reg-next-cell) { min-width: 0 !important; width: auto; overflow-wrap: anywhere; }
body.app-page .dashboard:has(#regFilterTabs) #regList td > :is(b, small) { display: block; }
body.app-page .dashboard:has(#regFilterTabs) #regList td small { margin-top: 3px; color: var(--tm-muted); font-size: 10px; }
body.app-page .dashboard:has(#regFilterTabs) .reg-class-form { display: grid; gap: 6px; }
body.app-page .dashboard:has(#regFilterTabs) .reg-class-select { min-width: 145px; min-height: 32px; padding: 5px 7px; font-size: 10px; }
body.app-page .dashboard:has(#regFilterTabs) .registration-details { margin-top: 5px; font-size: 10px; }
body.app-page .dashboard:has(#regFilterTabs) .registration-details summary { color: var(--tm-blue); cursor: pointer; font-weight: 650; }
body.app-page .dashboard:has(#regFilterTabs) .registration-details > div { max-width: 300px; margin-top: 6px; padding: 7px 9px; border: 1px solid var(--tm-border); border-radius: 8px; background: #fff; white-space: normal; }
body.app-page .dashboard:has(#regFilterTabs) .registration-details p { margin: 3px 0; }

/* Calendar and reports: keep period controls adjacent to the content they change. */
body.app-page .dashboard .view-tabs { width: fit-content; min-width: min(100%, 360px); }
body.app-page .dashboard .calendar-head { gap: 14px; padding-bottom: 12px; }
body.app-page .dashboard .calendar-tools form { display: flex; flex-wrap: wrap; gap: 7px; }
body.app-page .dashboard .calendar-grid { border-radius: 9px; }
body.app-page .dashboard .calendar-day { min-height: 86px; padding: 6px; }
body.app-page .dashboard .attendance-history { margin-top: 12px; }
body.app-page .dashboard .attendance-history h2 { margin: 2px 0 4px; font-size: 16px; }
body.app-page .dashboard .harian-sum { gap: 8px; margin-top: 12px; }

/* Dense operational tables stay readable; long records scroll inside their card. */
body.app-page .dashboard :is(.master-table-wrap, .history-table-wrap, .bill-table-wrap, .table-wrap) { scrollbar-color: #c4ceda transparent; }
body.app-page .dashboard :is(.master-table, .bill-table) th { position: sticky; top: 0; z-index: 1; }
body.app-page .dashboard :is(.master-table, .bill-table) th,
body.app-page .dashboard :is(.master-table, .bill-table) td { padding: 8px 9px; }
body.app-page .dashboard .table-footer-note { margin-top: 8px; font-size: 10px; }
body.app-page .dashboard .payroll-summary { gap: 10px; margin: 12px 0; }
body.app-page .dashboard .balance-strip { margin: 12px 0; border-radius: 10px; }
body.app-page .dashboard :is(.report-card, .period-card) + :is(.report-card, .period-card) { margin-top: 12px; }

/* Core workflows: put the current task first, then filters, then records. */
body.app-page .dashboard .payment-tabs { flex-wrap: nowrap; }
body.app-page .dashboard .stat-grid-filter { gap: 8px; }
body.app-page .dashboard .stat-grid-filter .stat-filter { cursor: pointer; transition: border-color .15s, background .15s; }
body.app-page .dashboard .stat-grid-filter .stat-filter.active { border-color: #9dbde7; background: #f0f6ff; }
body.app-page .dashboard .bill-table-wrap,
body.app-page .dashboard .history-table-wrap,
body.app-page .dashboard .payroll-table,
body.app-page .dashboard .table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--tm-border); border-radius: 9px; }
body.app-page .dashboard .bill-table,
body.app-page .dashboard .history-table-wrap table,
body.app-page .dashboard .payroll-table table,
body.app-page .dashboard .table-wrap table { margin: 0; }
body.app-page .dashboard .bill-table th,
body.app-page .dashboard .history-table-wrap th,
body.app-page .dashboard .payroll-table th,
body.app-page .dashboard .table-wrap th { background: #f4f7fb; }
body.app-page .dashboard .bill-table tbody tr:hover,
body.app-page .dashboard .history-table-wrap tbody tr:hover,
body.app-page .dashboard .payroll-table tbody tr:hover { background: #f3f7fc; }
body.app-page .dashboard .payment-row { grid-template-columns: 90px minmax(150px,1fr) auto auto; gap: 10px; padding: 11px 0; }
body.app-page .dashboard .payment-row .actions { grid-column: 2 / -1; flex-wrap: wrap; }
body.app-page .dashboard .payment-row .actions select { min-width: 0; flex: 1 1 180px; }
body.app-page .dashboard .rule-form { gap: 12px; }
body.app-page .dashboard .rule-form input,
body.app-page .dashboard .rule-form select,
body.app-page .dashboard .rule-form button { min-height: 36px; }

/* Payroll remains a dense financial report, with controls kept compact. */
body.app-page.payroll-page .dashboard { max-width: 1440px; padding: 16px 28px 36px; }
body.app-page.payroll-page .payroll-header { margin-bottom: 12px; }
body.app-page.payroll-page .payroll-page-toolbar { margin-top: 12px !important; }
body.app-page.payroll-page .payroll-page-toolbar > .master-tabs-fill { flex: 0 1 auto !important; }
body.app-page.payroll-page .payroll-page-toolbar > .master-tabs-fill a { flex: 0 0 auto !important; }
body.app-page.payroll-page .period-form { display: flex; flex-wrap: wrap; align-items: end; }
body.app-page.payroll-page .period-card { padding: 12px 14px; }
body.app-page.payroll-page .period-form { gap: 9px; }
body.app-page.payroll-page .period-form label { min-width: 180px; }
body.app-page.payroll-page .period-form button { width: auto !important; min-width: 150px; flex: 0 0 auto; }
body.app-page.payroll-page .payroll-summary { gap: 9px; margin: 10px 0; }
body.app-page.payroll-page .summary-card { padding: 12px 14px; }
body.app-page.payroll-page .report-card { padding: 14px; }
body.app-page.payroll-page .report-card h2 { margin-bottom: 10px; font-size: 16px; }
body.app-page.payroll-page .payroll-table table { min-width: 980px; }
body.app-page.payroll-page .cash-advance-form { gap: 11px; padding: 14px; border-radius: 11px; }
body.app-page.payroll-page .alert { white-space: normal; line-height: 1.5; }

/* Attendance keeps the calendar as the primary view and the audit trail below. */
body.app-page .dashboard .schedule-calendar { margin: 0 0 12px; padding: 0; overflow: hidden; }
body.app-page .dashboard .calendar-head { padding: 14px 16px 10px; }
body.app-page .dashboard .calendar-head h2 { font-size: 20px; }
body.app-page .dashboard .calendar-wrap { padding: 0 10px; }
body.app-page .dashboard .calendar-day { min-height: 78px; }
body.app-page .dashboard .schedule-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 9px; font-size: 11px; }
body.app-page .dashboard .attendance-history { margin-top: 12px; }
body.app-page .dashboard .attendance-history > div > span { font-size: 11px; }

@media (max-width: 900px) {
  body.app-page .sidebar { width: 100%; }
  body.app-page .dashboard { width: 100%; margin: 0; padding: 14px 14px 30px; }
  body.app-page .dashboard > .topbar { position: static; }
  body.app-page .master-page .icon-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Student directory: a real directory workflow, not a recolored legacy table. */
body.app-page .student-directory { max-width: none; }
body.app-page .student-directory .directory-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 92px; margin: 0 0 14px; padding: 15px 18px;
  border: 1px solid #e2e7ef; border-radius: 15px; background: #fff;
  box-shadow: 0 2px 5px rgba(15,23,42,.04);
}
body.app-page .student-directory .directory-title { display: flex; align-items: center; min-width: 0; gap: 14px; }
body.app-page .student-directory .directory-title-icon { display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; border-radius: 13px; background: #eaf2ff; color: #1765bd; font-size: 23px; font-weight: 800; }
body.app-page .student-directory .directory-title-copy { min-width: 0; }
body.app-page .student-directory .directory-crumb { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: #738096; font-size: 10px; }
body.app-page .student-directory .directory-crumb a { color: #1765bd; text-decoration: none; }
body.app-page .student-directory .directory-heading .eyebrow { margin: 0; color: #1765bd; font-size: 8px; letter-spacing: 1px; }
body.app-page .student-directory .directory-heading h1 { margin: 2px 0 3px; color: #172033; font-size: clamp(21px,2vw,26px); letter-spacing: -.45px; }
body.app-page .student-directory .directory-heading .muted { margin: 0; color: #66748a; font-size: 10px; }
body.app-page .student-directory .directory-header-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 7px; }
body.app-page .student-directory .directory-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 8px 11px; border: 1px solid #dbe2ec; border-radius: 8px; color: #23538c; background: #fff; text-decoration: none; font-size: 10px; font-weight: 750; white-space: nowrap; }
body.app-page .student-directory .directory-action:hover { border-color: #a9c5e9; background: #f3f7fe; }
body.app-page .student-directory .directory-action.primary { border-color: #1765bd; background: #1765bd; color: #fff; box-shadow: 0 3px 7px rgba(23,101,189,.16); }
body.app-page .student-directory .directory-action.primary:hover { border-color: #124f98; background: #124f98; }
body.app-page .student-directory .directory-module-tabs { margin-bottom: 14px; }
body.app-page .student-directory .directory-module-tabs > a { min-width: 112px; }
body.app-page .student-directory .directory-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 0 0 14px; }
body.app-page .student-directory .directory-metric { position: relative; display: flex; min-height: 88px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 14px 16px 13px 19px; overflow: hidden; border: 1px solid #e3e8ef; border-left: 3px solid #1765bd; border-radius: 13px; background: #fff; box-shadow: 0 2px 4px rgba(15,23,42,.035); }
body.app-page .student-directory .directory-metric::after { position: absolute; top: 16px; right: 16px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; content: ''; opacity: .7; }
body.app-page .student-directory .directory-metric .metric-label { color: #68758b; font-size: 8px; font-weight: 800; letter-spacing: .7px; }
body.app-page .student-directory .directory-metric strong { color: #182336; font-size: 22px; line-height: 1.1; }
body.app-page .student-directory .directory-metric small { color: #8792a4; font-size: 9px; }
body.app-page .student-directory .directory-metric.metric-blue { color: #1765bd; }
body.app-page .student-directory .directory-metric.metric-green { border-left-color: #138764; color: #138764; }
body.app-page .student-directory .directory-metric.metric-amber { border-left-color: #d99200; color: #d99200; }
body.app-page .student-directory .directory-metric.metric-red { border-left-color: #d65353; color: #d65353; }
body.app-page .student-directory .directory-filter { display: grid; grid-template-columns: minmax(260px,2.1fr) minmax(125px,.8fr) minmax(135px,.9fr) minmax(135px,.9fr) 100px 78px; align-items: end; gap: 10px; margin: 0 0 14px; padding: 14px 15px; border: 1px solid #e2e7ef; border-radius: 13px; background: #fff; box-shadow: 0 2px 4px rgba(15,23,42,.035); }
body.app-page .student-directory .directory-filter label { display: grid; min-width: 0; gap: 6px; color: #617087; font-size: 8px; font-weight: 800; letter-spacing: .55px; }
body.app-page .student-directory .directory-filter select,
body.app-page .student-directory .directory-filter input { box-sizing: border-box; width: 100%; min-width: 0; height: 38px; margin: 0; padding: 0 11px; border: 1px solid #dce3ed; border-radius: 8px; background: #f8f9fb; color: #243044; font: inherit; font-size: 10px; letter-spacing: 0; }
body.app-page .student-directory .directory-filter select { cursor: pointer; }
body.app-page .student-directory .directory-filter .directory-input-wrap { position: relative; display: block; }
body.app-page .student-directory .directory-filter .directory-input-wrap svg { position: absolute; z-index: 1; top: 11px; left: 11px; width: 16px; height: 16px; fill: none; stroke: #6c7b91; stroke-width: 1.7; }
body.app-page .student-directory .directory-filter .directory-input-wrap input { padding-left: 35px; }
body.app-page .student-directory .directory-filter button { height: 38px; border: 1px solid #202833; border-radius: 8px; background: #202833; color: #fff; font-size: 10px; font-weight: 750; cursor: pointer; }
body.app-page .student-directory .directory-filter button:hover { background: #111827; }
body.app-page .student-directory .directory-filter .directory-reset-button { border-color: #dce3ed; background: #fff; color: #344054; }
body.app-page .student-directory .directory-filter .directory-reset-button:hover { background: #f5f7fa; }
body.app-page .student-directory .directory-list-card { overflow: hidden; border: 1px solid #e2e7ef; border-radius: 14px; background: #fff; box-shadow: 0 2px 5px rgba(15,23,42,.04); }
body.app-page .student-directory .directory-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; padding: 13px 17px; border-bottom: 1px solid #e9edf3; }
body.app-page .student-directory .directory-list-heading .eyebrow { margin: 0 0 3px; color: #1765bd; font-size: 8px; letter-spacing: .9px; }
body.app-page .student-directory .directory-list-heading h2 { margin: 0; color: #1b2638; font-size: 16px; }
body.app-page .student-directory .directory-list-heading p:not(.eyebrow) { margin: 3px 0 0; color: #78859a; font-size: 10px; }
body.app-page .student-directory .directory-list-count { display: grid; justify-items: end; }
body.app-page .student-directory .directory-list-count strong { color: #1765bd; font-family: Georgia,serif; font-size: 23px; line-height: 1; }
body.app-page .student-directory .directory-list-count span { margin-top: 3px; color: #7b8798; font-size: 9px; }
body.app-page .student-directory .directory-table-wrap { max-height: min(67vh,760px); overflow: auto; scrollbar-color: #aab3c0 #f1f3f6; scrollbar-width: thin; }
body.app-page .student-directory .directory-table { width: 100%; min-width: 1010px; border: 0; border-radius: 0; border-collapse: separate; border-spacing: 0; table-layout: auto; }
body.app-page .student-directory .directory-table th { position: sticky; z-index: 2; top: 0; padding: 11px 12px; border: 0; border-bottom: 1px solid #e3e8ef; background: #f6f8fb; color: #647187; font-size: 8px; font-weight: 800; letter-spacing: .55px; text-align: left; white-space: nowrap; }
body.app-page .student-directory .directory-table td { min-height: 54px; padding: 9px 12px; border: 0; border-bottom: 1px solid #edf0f4; color: #253146; font-size: 10px; vertical-align: middle; }
body.app-page .student-directory .directory-table tbody tr:last-child td { border-bottom: 0; }
body.app-page .student-directory .directory-table tbody tr:hover td { background: #f8faff; }
body.app-page .student-directory .directory-table .directory-no { width: 45px; min-width: 45px; color: #778397; text-align: center; }
body.app-page .student-directory .directory-table th:nth-child(2) { min-width: 205px; }
body.app-page .student-directory .directory-table th:nth-child(4) { min-width: 155px; }
body.app-page .student-directory .directory-table th:nth-child(5) { min-width: 170px; }
body.app-page .student-directory .directory-table th:nth-child(6) { min-width: 125px; }
body.app-page .student-directory .directory-table .directory-actions-head { width: 90px; text-align: center; }
body.app-page .student-directory .directory-profile { display: flex; align-items: center; gap: 9px; min-width: 0; }
body.app-page .student-directory .directory-avatar { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #e9f2ff; color: #1765bd; font-size: 12px; font-weight: 800; }
body.app-page .student-directory .directory-profile > div { display: grid; min-width: 0; gap: 3px; }
body.app-page .student-directory .directory-profile-name { width: fit-content; max-width: 100%; padding: 0; border: 0; background: transparent; color: #1d2a3d; font: inherit; font-size: 10px; font-weight: 800; text-align: left; cursor: pointer; }
body.app-page .student-directory .directory-profile-name:hover { color: #1765bd; text-decoration: underline; }
body.app-page .student-directory .directory-profile small,
body.app-page .student-directory .directory-subline { display: block; margin-top: 3px; color: #8792a3; font-size: 9px; line-height: 1.35; }
body.app-page .student-directory .directory-school,
body.app-page .student-directory .directory-guardian { display: block; max-width: 200px; overflow: hidden; color: #324158; font-size: 9.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
body.app-page .student-directory .directory-status { display: inline-flex; align-items: center; justify-content: center; min-height: 21px; padding: 3px 8px; border-radius: 999px; background: #edf1f5; color: #647187; font-size: 8px; font-weight: 800; white-space: nowrap; }
body.app-page .student-directory .directory-status.status-active { background: #e3f5ee; color: #12805c; }
body.app-page .student-directory .directory-status.status-prospect { background: #fff4dc; color: #9a6500; }
body.app-page .student-directory .directory-status.status-inactive,
body.app-page .student-directory .directory-status.status-graduated { background: #edf0f4; color: #667085; }
body.app-page .student-directory .directory-row-actions { text-align: center; white-space: nowrap; }
body.app-page .student-directory .directory-icon-action { display: inline-grid; width: 30px; height: 30px; margin: 0 2px; place-items: center; border: 1px solid #dce3ed; border-radius: 7px; background: #fff; color: #1765bd; text-decoration: none; cursor: pointer; vertical-align: middle; }
body.app-page .student-directory .directory-icon-action:hover { border-color: #91b4e3; background: #eff5ff; }
body.app-page .student-directory .directory-icon-action svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.app-page .student-directory .directory-empty-row[hidden],
body.app-page .student-directory .directory-table tr[hidden],
body.app-page .student-directory [hidden] { display: none !important; }
body.app-page .student-directory .directory-empty-row td { height: 180px; color: #8290a4; text-align: center; }
body.app-page .student-directory .directory-empty-row td > * { display: block; margin: 5px auto; }
body.app-page .student-directory .directory-empty-row td > span { font-size: 22px; }
body.app-page .student-directory .directory-empty-row td > b { color: #344054; font-size: 12px; }
body.app-page .student-directory .directory-empty-row td > small { font-size: 10px; }
body.app-page .student-directory .directory-table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid #e9edf3; color: #78859a; font-size: 9px; }
body.app-page .student-directory .directory-pagination { display: flex; align-items: center; gap: 8px; }
body.app-page .student-directory .directory-pagination[hidden] { display: none !important; }
body.app-page .student-directory .directory-pagination button { min-height: 30px; padding: 5px 9px; border: 1px solid #dce3ed; border-radius: 7px; background: #fff; color: #344054; font-size: 9px; cursor: pointer; }
body.app-page .student-directory .directory-pagination button:hover:not(:disabled) { border-color: #8eb2e3; color: #1765bd; }
body.app-page .student-directory .directory-pagination button:disabled { color: #aab2bf; cursor: default; }
body.app-page .directory-detail-dialog { width: min(760px,calc(100vw - 32px)); max-height: min(88vh,850px); padding: 0; overflow: hidden; border: 1px solid #e0e6ef; border-radius: 15px; background: #fff; color: #172033; box-shadow: 0 24px 80px rgba(15,23,42,.28); }
body.app-page .directory-detail-dialog::backdrop { background: rgba(16,24,40,.52); backdrop-filter: blur(2px); }
body.app-page .directory-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; border-bottom: 1px solid #e8edf3; }
body.app-page .directory-dialog-head > div { display: flex; align-items: center; gap: 12px; }
body.app-page .directory-dialog-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: #eaf2ff; color: #1765bd; font-size: 19px; }
body.app-page .directory-dialog-head .eyebrow { margin: 0 0 3px; color: #1765bd; font-size: 8px; letter-spacing: .65px; }
body.app-page .directory-dialog-head h2 { margin: 0; font-size: 17px; }
body.app-page .directory-dialog-close { width: 32px; height: 32px; border: 0; border-radius: 7px; background: transparent; color: #667085; font-size: 25px; cursor: pointer; }
body.app-page .directory-dialog-close:hover { background: #f1f4f8; }
body.app-page .directory-dialog-content { max-height: calc(88vh - 130px); overflow: auto; padding: 18px 20px; }
body.app-page .directory-detail-identity { display: grid; justify-items: center; padding: 4px 0 17px; border-bottom: 1px solid #edf0f4; text-align: center; }
body.app-page .directory-detail-avatar { display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid #ffe6ae; border-radius: 17px; background: #fff6df; color: #da9900; font-size: 26px; font-weight: 700; }
body.app-page .directory-detail-identity h3 { margin: 10px 0 3px; font-size: 17px; }
body.app-page .directory-detail-identity p { margin: 0 0 8px; color: #7a879a; font-family: ui-monospace,monospace; font-size: 9px; }
body.app-page .directory-detail-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 15px; }
body.app-page .directory-detail-group { padding: 13px; border: 1px solid #e5e9f0; border-radius: 10px; background: #fbfcfd; }
body.app-page .directory-detail-group:last-child { grid-column: 1/-1; }
body.app-page .directory-detail-group h4 { margin: 0 0 10px; color: #344054; font-size: 10px; }
body.app-page .directory-detail-group dl { display: grid; gap: 8px; margin: 0; }
body.app-page .directory-detail-field { display: grid; grid-template-columns: minmax(95px,.8fr) minmax(0,1.4fr); gap: 8px; }
body.app-page .directory-detail-field dt { color: #778397; font-size: 9px; }
body.app-page .directory-detail-field dd { margin: 0; overflow-wrap: anywhere; color: #253146; font-size: 9px; font-weight: 650; }
body.app-page .directory-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #e8edf3; background: #fafbfd; }
body.app-page .directory-dialog-cancel { min-height: 34px; padding: 6px 11px; border: 0; background: transparent; color: #667085; font-size: 10px; font-weight: 700; cursor: pointer; }

body.app-page .entity-directory .directory-toggle-form { display: inline-block; margin: 0 0 0 2px; vertical-align: middle; }
body.app-page .entity-directory .directory-icon-action.toggle { color: #667085; font-size: 16px; font-weight: 600; }
body.app-page .entity-directory .directory-icon-action.toggle:hover { border-color: #b7c1cf; background: #f4f6f9; }
body.app-page .entity-directory .directory-icon-action.toggle span { line-height: 1; }
body.app-page .directory-geo-card { margin-top: 14px; }
body.app-page .directory-geo-card .directory-table { min-width: 720px; }
body.app-page .directory-geo-card .directory-geo-input { box-sizing: border-box; width: 145px; height: 34px; padding: 6px 9px; border: 1px solid #dce3ed; border-radius: 7px; background: #f8f9fb; color: #243044; font: inherit; font-size: 10px; }
body.app-page .directory-geo-card .directory-geo-input.radius { width: 86px; }
body.app-page .directory-geo-card .directory-geo-actions { white-space: nowrap; }
body.app-page .directory-geo-card .directory-geo-here,
body.app-page .directory-geo-card .directory-geo-save { min-height: 31px; margin-right: 5px; padding: 6px 9px; border: 1px solid #dce3ed; border-radius: 7px; background: #fff; color: #3f536d; font-size: 9px; font-weight: 700; cursor: pointer; }
body.app-page .directory-geo-card .directory-geo-save { border-color: #1765bd; background: #1765bd; color: #fff; }
body.app-page .directory-geo-card .directory-geo-here:hover { background: #f2f6fc; }
body.app-page .directory-geo-card .directory-geo-save:hover { background: #124f98; }

@media (max-width: 1100px) {
  body.app-page .student-directory .directory-filter { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.app-page .student-directory .directory-search-field { grid-column: span 2; }
}
@media (max-width: 760px) {
  body.app-page .student-directory .directory-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  body.app-page .student-directory .directory-header-actions { flex-wrap: wrap; justify-content: flex-start; }
  body.app-page .student-directory .directory-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  body.app-page .student-directory .directory-metric { min-height: 78px; padding: 10px 12px; }
  body.app-page .student-directory .directory-filter { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 12px; }
  body.app-page .student-directory .directory-search-field { grid-column: 1/-1; }
  body.app-page .student-directory .directory-filter-button { grid-column: 1; }
  body.app-page .student-directory .directory-reset-button { grid-column: 2; }
  body.app-page .student-directory .directory-table-wrap { max-height: 70vh; }
  body.app-page .student-directory .directory-table-footer { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  body.app-page .student-directory .directory-action { padding: 7px 9px; }
  body.app-page .student-directory .directory-action span { display: none; }
  body.app-page .student-directory .directory-title-icon { flex-basis: 40px; width: 40px; height: 40px; }
  body.app-page .student-directory .directory-detail-groups { grid-template-columns: 1fr; }
  body.app-page .student-directory .directory-detail-group:last-child { grid-column: auto; }
}
@media (max-width: 600px) {
  body.app-page .dashboard > header:not(.dashboard-hero) { align-items: flex-start; flex-direction: column; min-height: 0; padding: 14px; }
  body.app-page .dashboard > header .header-action { display: inline-flex; margin-top: 0; }
  body.app-page .dashboard .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.app-page .dashboard .calendar-head { display: block; }
  body.app-page .dashboard .calendar-tools { margin-top: 10px; }
  body.app-page .dashboard .master-table-wrap { max-height: 68vh; }
}

/* Sales-app reference: charcoal utility bar, navy navigation, icon-led page header. */
body.app-page { --tm-navy: #10192e; --tm-topbar: #262638; --tm-blue: #1267f5; --tm-blue-dark: #124eaa; --tm-canvas: #f5f7fb; background: var(--tm-canvas) !important; }
body.app-page .sidebar { z-index: 90; inset: 44px auto 0 0; width: 265px; overflow-x: hidden; overflow-y: auto; padding: 12px 12px 14px; border: 0; background: var(--tm-navy); color: #eef3ff; transition: none; }
body.app-page .logo-row { justify-content: center; min-height: 54px; margin: 0 4px 14px; padding: 2px 5px 12px; border-bottom: 1px solid rgba(210,223,250,.16); }
body.app-page .logo-row span, body.app-page .logo-row img { width: 38px !important; height: 38px !important; border-radius: 10px; }
body.app-page .logo-row b { color: #d7e3fa; font-size: 11px; }
body.app-page .logo-row b::after { color: #7185aa; }
body.app-page .sidebar-user { display: flex; align-items: center; gap: 9px; min-height: 52px; margin: 0 1px 12px; padding: 7px 9px; border: 1px solid rgba(210,223,250,.12); border-radius: 10px; background: rgba(255,255,255,.045); }
body.app-page .sidebar-user > span { display: grid; flex: 0 0 32px; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: var(--tm-blue); color: #fff; font-size: 13px; font-weight: 800; }
body.app-page .sidebar-user b, body.app-page .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.app-page .sidebar-user b { color: #f5f7ff; font-size: 11px; }
body.app-page .sidebar-user small { margin-top: 2px; color: #8eb7ff; font-size: 8px; font-weight: 800; }
body.app-page .sidebar nav { gap: 0; padding: 0 1px 54px; }
body.app-page .nav-group { gap: 2px; margin: 0 0 10px; padding: 0 0 9px; border-bottom: 1px solid rgba(210,223,250,.14); }
body.app-page .nav-label { padding: 8px 8px 5px; color: #6f84aa; font-size: 8px; letter-spacing: 1.1px; font-weight: 800; text-transform: uppercase; }
body.app-page .sidebar nav a { min-height: 31px; gap: 8px; padding: 6px 8px !important; border-radius: 8px; color: #9aaccb; font-size: 10.5px; font-weight: 550; }
body.app-page .sidebar nav a .nav-icon { flex-basis: 18px; width: 18px; height: 18px; border-radius: 4px; color: #8295b6; font-size: 13px; }
body.app-page .sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
body.app-page .sidebar nav .active { background: #1267f5 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(18,103,245,.23) !important; }
body.app-page .sidebar nav .active .nav-icon { color: #fff; }
body.app-page .sidebar form { right: 12px; bottom: 12px; left: 12px; }
body.app-page .logout { min-height: 34px; border-color: rgba(210,223,250,.2); color: #e1e9fa; }

body.app-page .dashboard { width: auto; max-width: none; min-height: 100vh; margin: 0 0 0 265px; padding: 74px clamp(18px, 2vw, 38px) 42px; transition: none; }
body.app-page .dashboard > .topbar { position: fixed; z-index: 110; inset: 0 0 auto 0; display: flex; width: 100%; height: 44px; min-height: 44px; margin: 0; padding: 0 12px; border: 0; border-radius: 0; background: var(--tm-topbar); box-shadow: 0 2px 6px rgba(6,11,23,.14); }
body.app-page .topbar-left { display: flex; align-items: center; align-self: stretch; gap: 14px; min-width: 0; }
body.app-page .topbar-menu-btn { display: grid; flex: 0 0 34px; width: 34px; height: 32px; place-items: center; border: 0; border-right: 1px solid rgba(220,228,244,.12); background: transparent; color: #e5ebf6; font-size: 17px; cursor: pointer; }
body.app-page .topbar-date { display: flex; align-items: center; gap: 8px; color: #a8b1c5; font-size: 10px; font-weight: 600; }
body.app-page .topbar-date > span { color: #5792ff; }
body.app-page .dashboard > .topbar .topbar-search, body.app-page .dashboard > .topbar .topbar-icon-btn { display: none; }
body.app-page .dashboard > .topbar .topbar-actions { margin-left: auto; }
body.app-page .topbar-profile { min-height: 36px; padding: 2px 7px 2px 3px; border: 1px solid rgba(220,228,244,.12); border-radius: 20px; background: rgba(255,255,255,.035); }
body.app-page .topbar-avatar { width: 28px; height: 28px; background: var(--tm-blue); color: #fff; }
body.app-page .topbar-profile b { color: #eef3ff; font-size: 10px; }
body.app-page .topbar-profile small { color: #929cb0; font-size: 8px; text-transform: uppercase; }

body.app-page .dashboard > header:not(.dashboard-hero) { min-height: 82px; gap: 18px; margin-bottom: 14px; padding: 14px 18px; border: 1px solid #e5e9f1; border-radius: 14px; background: #fff; box-shadow: 0 2px 4px rgba(15,23,42,.045); }
body.app-page .dashboard > header > div:first-child { display: grid; grid-template-columns: 50px minmax(0,1fr); grid-template-rows: auto auto auto; align-items: center; column-gap: 13px; }
body.app-page .dashboard > header .page-title-icon { grid-column: 1; grid-row: 1 / 4; display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; background: #e8f0ff; color: var(--tm-blue); font-size: 23px; }
body.app-page .dashboard > header .eyebrow, body.app-page .dashboard > header h1, body.app-page .dashboard > header .muted { grid-column: 2; }
body.app-page .dashboard > header .eyebrow { align-self: end; color: #1763d3; font-size: 8px; letter-spacing: .8px; }
body.app-page .dashboard > header h1 { align-self: center; margin: 1px 0; color: #1b2433; font-size: clamp(19px, 1.7vw, 25px); letter-spacing: -.35px; }
body.app-page .dashboard > header .muted { align-self: start; color: #64748b; font-size: 10px; }
body.app-page .dashboard > header .header-action, body.app-page .dashboard > header .primary-link { min-height: 36px; border-color: #dce3ed; border-radius: 8px; font-size: 10px; }
body.app-page .dashboard > header .primary-link { background: var(--tm-blue); }

body.app-page .dashboard :is(.activity, .master-card, .schedule-calendar, .attendance-history, .finance-panel, .ops-panel, .report-card, .period-card, .rule-card, .portal-link-panel, .backup-card, .version) { border-color: #e5e9f1; border-radius: 13px; background: #fff; box-shadow: 0 2px 4px rgba(15,23,42,.045); }
body.app-page .dashboard :is(.master-table-wrap, .history-table-wrap, .bill-table-wrap, .table-wrap) { border-color: #e4e8f0; border-radius: 10px; background: #fff; }
body.app-page .dashboard :is(.master-table, .bill-table, .history-table-wrap table, .payroll-table table, .table-wrap table) { border-collapse: separate; border-spacing: 0; }
body.app-page .dashboard :is(.master-table, .bill-table, .history-table-wrap table, .payroll-table table, .table-wrap table) th { border-bottom: 1px solid #e5e9f1; background: #f7f9fc; color: #596579; font-size: 9px; letter-spacing: .35px; text-transform: uppercase; }
body.app-page .dashboard :is(.master-table, .bill-table, .history-table-wrap table, .payroll-table table, .table-wrap table) td { border-bottom: 1px solid #edf0f5; }
body.app-page .dashboard :is(input:not([type=checkbox]), select, textarea) { border-color: #dce3ec; border-radius: 8px; background-color: #f8f9fb; }
body.app-page .dashboard :is(input:not([type=checkbox]), select, textarea):focus { border-color: #78a7ff; background-color: #fff; box-shadow: 0 0 0 3px rgba(18,103,245,.1); }

body.app-page.sidebar-collapsed .sidebar { width: 72px; padding-right: 8px; padding-left: 8px; }
body.app-page.sidebar-collapsed .dashboard { margin-left: 72px; }
body.app-page.sidebar-collapsed .logo-row b, body.app-page.sidebar-collapsed .sidebar-user > div, body.app-page.sidebar-collapsed .nav-label, body.app-page.sidebar-collapsed .sidebar nav a > span:not(.nav-icon), body.app-page.sidebar-collapsed .logout { display: none; }
body.app-page.sidebar-collapsed .sidebar-user { justify-content: center; padding: 5px; }
body.app-page.sidebar-collapsed .sidebar nav a { justify-content: center; padding: 6px !important; }
@media (max-width: 900px) {
  body.app-page .sidebar { z-index: 120; top: 44px; width: 265px; transform: translateX(-100%); box-shadow: 10px 12px 24px rgba(7,14,30,.2); }
  body.app-page.sidebar-open .sidebar { transform: translateX(0); }
  body.app-page .dashboard { width: 100%; margin: 0; padding: 62px 15px 30px; }
  body.app-page .dashboard > .topbar { position: fixed; }
  body.app-page.sidebar-collapsed .sidebar { width: 265px; }
  body.app-page.sidebar-collapsed .dashboard { margin: 0; }
}
@media (max-width: 600px) {
  body.app-page .dashboard > header:not(.dashboard-hero) { display: flex; flex-direction: row; align-items: center; min-height: 72px; padding: 11px; }
  body.app-page .dashboard > header > div:first-child { grid-template-columns: 40px minmax(0,1fr); column-gap: 9px; }
  body.app-page .dashboard > header .page-title-icon { width: 38px; height: 38px; font-size: 19px; }
  body.app-page .dashboard > header h1 { font-size: 18px; }
  body.app-page .dashboard > header .muted { font-size: 9px; }
}

/* Master directories: keep each tab's filters balanced instead of leaving unused tracks. */
body.app-page .entity-directory .directory-filter.entity-filter-1 { grid-template-columns: minmax(260px,2fr) minmax(150px,1fr) 100px 78px; }
body.app-page .entity-directory .directory-filter.entity-filter-2 { grid-template-columns: minmax(240px,2fr) minmax(130px,1fr) minmax(130px,1fr) 100px 78px; }
body.app-page .entity-directory .directory-filter.entity-filter-3 { grid-template-columns: minmax(220px,2fr) repeat(3,minmax(115px,1fr)) 100px 78px; }
body.app-page .entity-directory .directory-detail-group:last-child { grid-column: auto; }
body.app-page .entity-directory .directory-profile small { max-width: 220px; }
@media (max-width: 1100px) {
  body.app-page .entity-directory .directory-filter.entity-filter-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.app-page .entity-directory .directory-filter.entity-filter-3 .directory-search-field { grid-column: span 2; }
}
@media (max-width: 760px) {
  body.app-page .entity-directory .directory-filter.entity-filter-1,
  body.app-page .entity-directory .directory-filter.entity-filter-2,
  body.app-page .entity-directory .directory-filter.entity-filter-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.app-page .entity-directory .directory-filter .directory-search-field { grid-column: 1/-1; }
  body.app-page .entity-directory .directory-filter-button { grid-column: 1; }
  body.app-page .entity-directory .directory-reset-button { grid-column: 2; }
}

/* Master create forms use the same workspace shell and card rhythm as the directories. */
body.app-page .master-entry-page { display: grid; align-content: start; gap: 16px; }
body.app-page .master-entry-page > .master-header { margin: 0; }
body.app-page .master-entry-page > .master-header > a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-height: 37px; padding: 0 12px; border: 1px solid #dce3ed; border-radius: 8px; background: #fff; color: #34445b; font-size: 10px; font-weight: 750; text-decoration: none; white-space: nowrap; }
body.app-page .master-entry-page > .master-header > a:hover { border-color: #a9c2e5; background: #f5f8fd; }
body.app-page .master-entry-page .form-card { width: min(100%, 1080px); max-width: 1080px; margin: 0; padding: 22px; border: 1px solid #e5e9f1; border-radius: 13px; background: #fff; box-shadow: 0 2px 4px rgba(15,23,42,.045); }
body.app-page .master-entry-page .code-preview { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; margin: 0 0 4px; padding: 10px 14px; border: 1px solid #dce8fb; border-radius: 9px; background: #f1f6ff; color: #215596; }
body.app-page .master-entry-page .code-preview strong { color: #173f76; }
body.app-page .master-entry-page .form-card form { display: grid; gap: 16px; }
body.app-page .master-entry-page .form-card h2 { margin: 2px 0 0; color: #1c2738; font-size: 15px; }
body.app-page .master-entry-page .form-card .entry-section-title { margin-top: 2px; padding-top: 15px; border-top: 1px solid #e7ebf2; }
body.app-page .master-entry-page .form-card .grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 15px; }
body.app-page .master-entry-page .form-card label { display: block; min-width: 0; color: #5d6878; font-size: 11px; font-weight: 700; line-height: 1.45; }
body.app-page .master-entry-page .form-card label b { color: #d04d42; }
body.app-page .master-entry-page .form-card input:not([type="hidden"]),
body.app-page .master-entry-page .form-card select,
body.app-page .master-entry-page .form-card textarea { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 42px; margin-top: 7px; padding: 10px 12px; border: 1px solid #d7dfeb; border-radius: 8px; background: #fff; color: #1d2939; font: inherit; font-size: 12px; }
body.app-page .master-entry-page .form-card input:not([type="hidden"]),
body.app-page .master-entry-page .form-card select { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 42px; margin-top: 7px; padding: 10px 12px; border: 1px solid #d7dfeb; border-radius: 8px; background: #fff; color: #1d2939; font: inherit; font-size: 12px; }
body.app-page .master-entry-page .form-card textarea { min-height: 86px; resize: vertical; }
body.app-page .master-entry-page .form-card input:focus,
body.app-page .master-entry-page .form-card select:focus,
body.app-page .master-entry-page .form-card textarea:focus { outline: 3px solid rgba(18,103,245,.12); border-color: #7ba8ec; }
body.app-page .master-entry-page .entry-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 3px; padding-top: 15px; border-top: 1px solid #e7ebf2; }
body.app-page .master-entry-page .entry-actions a,
body.app-page .master-entry-page .entry-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin: 0; padding: 0 15px; border: 1px solid #dce3ed; border-radius: 8px; background: #fff; color: #44546b; font-size: 11px; font-weight: 750; text-decoration: none; }
body.app-page .master-entry-page .entry-actions button { border-color: #1267f5; background: #1267f5; color: #fff; }
body.app-page .master-entry-page .entry-actions button:hover { background: #124eaa; }
body.app-page .master-entry-page .secure { text-align: left; color: #748197; font-size: 10px; }
body.app-page .master-entry-page .notice,
body.app-page .master-entry-page .error { width: min(100%,1080px); margin: 0; padding: 12px 14px; border: 1px solid #cfe7d9; border-radius: 9px; background: #eef9f2; color: #176b46; font-size: 12px; }
body.app-page .master-entry-page .error { border-color: #f1c9c5; background: #fff3f1; color: #a43e32; }
body.app-page .master-entry-page .transfer-type-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px; border: 1px solid #e1e7f0; border-radius: 12px; background: #fff; }
body.app-page .master-entry-page .transfer-type-tabs a { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 36px; padding: 0 14px; border: 1px solid #dfe5ee; border-radius: 8px; color: #506078; font-size: 11px; font-weight: 700; text-decoration: none; }
body.app-page .master-entry-page .transfer-type-tabs a.active { border-color: #1765bd; background: #1765bd; color: #fff; }
body.app-page .master-entry-page .transfer-intro-card { display: flex; align-items: flex-start; gap: 14px; width: min(100%,1080px); padding: 18px; border: 1px solid #dce7f7; border-radius: 12px; background: #f4f8ff; }
body.app-page .master-entry-page .transfer-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 11px; background: #e2edff; color: #1765bd; font-size: 21px; }
body.app-page .master-entry-page .transfer-intro-card .eyebrow { margin: 0 0 5px; color: #1765bd; font-size: 9px; font-weight: 800; letter-spacing: .7px; }
body.app-page .master-entry-page .transfer-intro-card h2 { margin: 0 0 5px; color: #1c2738; font-size: 15px; }
body.app-page .master-entry-page .transfer-intro-card p:last-child { margin: 0; color: #637189; font-size: 11px; line-height: 1.55; }
body.app-page .master-entry-page .transfer-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; width: min(100%,1080px); }
body.app-page .master-entry-page .transfer-card { width: 100%; min-width: 0; }
body.app-page .master-entry-page .transfer-card-heading { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid #e8edf3; }
body.app-page .master-entry-page .transfer-card-heading > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #edf4ff; color: #1765bd; font-size: 11px; font-weight: 800; }
body.app-page .master-entry-page .transfer-card-heading .eyebrow { margin: 0 0 3px; color: #718098; font-size: 8px; font-weight: 800; letter-spacing: .7px; }
body.app-page .master-entry-page .transfer-card-heading h2 { margin: 0; font-size: 15px; }
body.app-page .master-entry-page .transfer-description { min-height: 38px; margin: 0; color: #65728a; font-size: 11px; line-height: 1.55; }
body.app-page .master-entry-page .transfer-actions { display: grid; gap: 9px; margin-top: 2px; }
body.app-page .master-entry-page .transfer-download { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 56px; padding: 9px 11px; border: 1px solid #e0e7f0; border-radius: 9px; background: #fff; color: #26364b; text-decoration: none; }
body.app-page .master-entry-page .transfer-download > span:first-child { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: #eaf6ef; color: #18814d; font-size: 17px; }
body.app-page .master-entry-page .transfer-download.pdf > span:first-child { background: #fff2ed; color: #c65339; }
body.app-page .master-entry-page .transfer-download b, body.app-page .master-entry-page .transfer-download small { display: block; }
body.app-page .master-entry-page .transfer-download b { font-size: 11px; }
body.app-page .master-entry-page .transfer-download small { margin-top: 3px; color: #758198; font-size: 9px; }
body.app-page .master-entry-page .transfer-download > strong { color: #1765bd; font-size: 16px; }
body.app-page .master-entry-page .transfer-upload-form { margin-top: 2px; }
body.app-page .master-entry-page .transfer-upload-form input[type="file"] { min-height: auto; padding: 9px; background: #f8fafc; font-size: 11px; }
body.app-page .master-entry-page .transfer-upload-form small { color: #758198; font-size: 10px; line-height: 1.5; }
body.app-page .master-entry-page .transfer-upload-form button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: #1765bd; color: #fff; font-size: 11px; font-weight: 750; cursor: pointer; }
body.app-page .master-entry-page .transfer-upload-form button:hover { background: #124eaa; }
@media (max-width: 760px) {
  body.app-page .master-entry-page .form-card { padding: 16px; }
  body.app-page .master-entry-page .form-card .grid { grid-template-columns: 1fr; }
  body.app-page .master-entry-page .master-header { align-items: flex-start; }
  body.app-page .master-entry-page .transfer-columns { grid-template-columns: 1fr; }
  body.app-page .master-entry-page .transfer-intro-card { padding: 14px; }
}