/*
 * Glass skin — application components (screen only).
 *
 * These are the project's own component classes that views already use (hbys-*, ui-*, his-*, app-*, payroll-*,
 * dashboard cards …), restated on the glass tokens. Layout-defining declarations (grids, flex rows, sticky
 * positions, scroll heights) are kept exactly as in the classic skin so no screen changes structure.
 */

/* ── Panels ───────────────────────────────────────────────────────────── */
.card-panel, .hbys-card-panel, .ui-card-container, .ui-form-card, .ui-table-card, .ui-table-layout,
.result-panel, .hbys-result-panel, .app-card, .dashboard-card, .dashboard-card.card, .kpi-card, .kpi-card.card,
.doctor-right-panel {
  background: var(--surface-card);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
/* A panel inside a panel is a quieter, smaller-radius section, not another floating card. */
:is(.card, .card-panel, .ui-card-container, .ui-form-card, .app-card) :is(.card-panel, .hbys-card-panel, .result-panel, .hbys-result-panel, .ui-card-container) {
  background: var(--surface-raised); border-color: var(--hairline); border-radius: var(--radius-panel); box-shadow: none;
}
.card-panel, .hbys-card-panel, .result-panel, .hbys-result-panel { margin-bottom: 1rem; overflow: hidden; }
.ui-card-container, .app-card { margin-bottom: 1rem; }
.ui-card-container, .ui-form-card, .ui-table-card, .ui-table-layout { overflow: hidden; }

.card-panel .card-panel-header, .hbys-card-panel .card-panel-header,
.ui-card-container .ui-card-header, .ui-form-card .ui-form-header,
.ui-table-card .ui-table-header, .ui-table-layout .ui-table-header,
.result-panel .result-panel-header, .hbys-result-panel .result-panel-header,
.app-card-header, .dashboard-card .card-header {
  padding: 1.125rem 1.375rem .25rem !important;
  min-height: 0;
  font-family: var(--meva-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.012em;
  text-align: left;
  color: var(--ink-900);
  background: transparent !important;
  border-bottom: 0;
}
:is(.card-panel-header, .ui-card-header, .ui-form-header, .ui-table-header, .result-panel-header, .app-card-header) :is(.btn, .form-control, .form-select, .badge, small, .small, .text-muted, input, select, label) { font-family: var(--meva-font-family); letter-spacing: 0; }
:is(.card-panel-header, .ui-card-header, .ui-form-header, .ui-table-header, .result-panel-header, .app-card-header) :is(h1, h2, h3, h4, h5, h6) { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
:is(.card-panel-header, .ui-card-header, .ui-table-header, .app-card-header) :is(.text-white, .text-light) { color: var(--ink-600) !important; }
.card-panel .card-panel-header, .hbys-card-panel .card-panel-header { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; }
:is(.card-panel-header, .ui-card-header, .ui-table-header, .app-card-header):has(> .bi:first-child) { justify-content: flex-start !important; }
:is(.card-panel-header, .ui-card-header, .ui-table-header, .app-card-header) > :is(.btn, .badge, .dropdown, .btn-group, .ui-card-actions, .float-end):not(:is(.btn, .badge, .dropdown, .btn-group, .ui-card-actions, .float-end) ~ *) { margin-left: auto; }
.ui-card-container .ui-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.card-panel .card-panel-header i, .hbys-card-panel .card-panel-header i, .ui-card-container .ui-card-header i { color: var(--ink-500); margin-right: .35rem; }
.card-panel .card-panel-header .btn, .hbys-card-panel .card-panel-header .btn { font-size: .75rem; padding: .2rem .5rem; min-height: 26px; }
.ui-table-header .text-muted, .card-panel-header .text-muted { color: var(--ink-500) !important; }
.card-panel .card-panel-body, .hbys-card-panel .card-panel-body { padding: .875rem 1.375rem 1.125rem; font-size: .8125rem; }
.ui-card-container .ui-card-actions { display: flex; align-items: center; gap: .4rem; }
.ui-card-container .ui-card-body { padding: .875rem 1.375rem 1.25rem; }
.app-card-body { padding: .875rem 1.375rem 1.25rem; }
.result-panel .result-panel-body, .hbys-result-panel .result-panel-body { padding: .5rem .75rem; max-height: 280px; overflow-y: auto; }
.hbys-panel-dense.card { margin-bottom: .75rem; }
.hbys-panel-dense .card-body { font-size: .8125rem; }

.ui-table-card .table-responsive, .ui-table-layout .table-responsive { overflow-x: auto; border-radius: 0; }
.ui-table-card .ui-table-empty, .ui-table-layout .ui-table-empty { padding: 2rem 1rem; text-align: center; color: var(--ink-500); }
.ui-form-card .ui-form-body { padding: .875rem 1.375rem 1.25rem; }
.ui-form-card .ui-form-row { margin-bottom: .75rem; }
.ui-form-card .ui-form-row:last-child { margin-bottom: 0; }
.hbys-data-table { margin-bottom: 0; }
.hbys-data-table th { white-space: nowrap; }

/* ── Page headers and toolbars ────────────────────────────────────────── */
.ui-page-header, .page-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
  margin-bottom: 1rem; padding-bottom: 0;
  border-bottom: 0;
}
.ui-page-header .ui-page-title, .app-page-title { margin: 0; font-family: var(--meva-font-display); font-size: 1.1875rem; font-weight: 700; letter-spacing: -.012em; color: var(--ink-900); }
.app-page-title { margin-bottom: 1rem; }
.ui-page-header .ui-page-actions { display: flex; align-items: center; gap: .5rem; }
.ui-page-header .ui-breadcrumb, .page-shell-breadcrumb, .app-breadcrumb { font-size: .75rem; margin: .25rem 0 0; }
.page-title-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; padding-bottom: 0; border-bottom: 0; }
.page-title-bar h3, .page-title-bar h4 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.0625rem; }

/* Page title, once and large (Apple large-title style). Only the page's own heading qualifies: the named header
   patterns, or the first heading at the top of the page (or of its top-level header row) with nothing but alerts
   above it. Headings inside cards, panels, tabs and dialogs keep their size. */
:root { --page-title-size: clamp(1.875rem, 2.4vw, 2.5rem); }   /* same scale as the overview dashboard's title */
:is(.page-header .page-title,
    .page-header > :is(h1, h2, h3, h4),
    .page-header > div:first-child > :is(h1, h2, h3, h4):first-child,
    .ui-page-header .ui-page-title,
    .page-title-bar :is(h3, h4),
    .app-page-title,
    .nrs-page-header .nrs-page-title,
    .dashboard-content-inner > :is(h1, h2, h3, h4, h5):not(:is(h1, h2, h3, h4, h5, h6, section, form:not([style*="none"]):not([hidden]), table, ul, ol, p, article, nav, aside, fieldset, details, hr, div:not(.alert, .payroll-engine)) ~ *),
    .dashboard-content-inner > .container-fluid:first-child > :is(h1, h2, h3, h4, h5):first-child,
    .dashboard-content-inner > :is(div, header):not(.card, .row, .alert, .modal, [class*="card"], [class*="panel"]):not(:is(h1, h2, h3, h4, h5, h6, section, form:not([style*="none"]):not([hidden]), table, ul, ol, p, article, nav, aside, fieldset, details, hr, div:not(.alert, .payroll-engine)) ~ *) > :is(h1, h2, h3, h4):first-child,
    .dashboard-content-inner > :is(div, header):not(.card, .row, .alert, .modal, [class*="card"], [class*="panel"]):not(:is(h1, h2, h3, h4, h5, h6, section, form:not([style*="none"]):not([hidden]), table, ul, ol, p, article, nav, aside, fieldset, details, hr, div:not(.alert, .payroll-engine)) ~ *) > div:first-child > :is(h1, h2, h3, h4):first-child,
    .dashboard-content-inner > :is(div, header):not(.card, .row, .alert, .modal, [class*="card"], [class*="panel"]):not(:is(h1, h2, h3, h4, h5, h6, section, form:not([style*="none"]):not([hidden]), table, ul, ol, p, article, nav, aside, fieldset, details, hr, div:not(.alert, .payroll-engine)) ~ *) > i:first-child + :is(h1, h2, h3, h4),
    .dashboard-content-inner > :is(div, header):not(.card, .row, .alert, .modal, [class*="card"], [class*="panel"]):not(:is(h1, h2, h3, h4, h5, h6, section, form:not([style*="none"]):not([hidden]), table, ul, ol, p, article, nav, aside, fieldset, details, hr, div:not(.alert, .payroll-engine)) ~ *) > i:first-child + div > :is(h1, h2, h3, h4):first-child,
    .dashboard-content-inner > .container-fluid:first-child > div:first-child:not(.card, .row, .alert, .modal, [class*="card"], [class*="panel"]) > :is(h1, h2, h3, h4):first-child,
    .dashboard-content-inner > .container-fluid:first-child > div:first-child:not(.card, .row, .alert, .modal, [class*="card"], [class*="panel"]) > div:first-child > :is(h1, h2, h3, h4):first-child,
    .dashboard-content-inner > .container-fluid:first-child > div:first-child:not(.card, .row, .alert, .modal, [class*="card"], [class*="panel"]) > i:first-child + :is(h1, h2, h3, h4),
    .dashboard-content-inner > .container-fluid:first-child > div:first-child:not(.card, .row, .alert, .modal, [class*="card"], [class*="panel"]) > i:first-child + div > :is(h1, h2, h3, h4):first-child,
    .dashboard-content-inner > .row:not(:is(h1, h2, h3, h4, h5, h6, section, form:not([style*="none"]):not([hidden]), table, ul, ol, p, article, nav, aside, fieldset, details, hr, div:not(.alert, .payroll-engine)) ~ *) > [class*="col"]:first-child > :is(h1, h2, h3, h4):first-child,
    .dashboard-content-inner > .container-fluid:first-child > .row:first-child > [class*="col"]:first-child > :is(h1, h2, h3, h4):first-child):not(.modal *, .card *, .tab-pane *, .offcanvas *, .ov *, [class*="ov-"]) {
  margin-top: 0;
  font-family: var(--meva-font-display);
  font-size: var(--page-title-size) !important;
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
  color: var(--ink-900);
}
/* A bare title (no header row around it) needs room before the page starts. */
:is(.dashboard-content-inner > :is(h1, h2, h3, h4, h5):not(:is(h1, h2, h3, h4, h5, h6, section, form:not([style*="none"]):not([hidden]), table, ul, ol, p, article, nav, aside, fieldset, details, hr, div:not(.alert, .payroll-engine)) ~ *), .dashboard-content-inner > .container-fluid:first-child > :is(h1, h2, h3, h4, h5):first-child):not([class*="ov-"]) { margin-bottom: 1rem; }
/* "Home / Companies" under the title "Companies" says nothing new; deeper trails (detail pages) stay. */
:is(.ui-page-header, .page-header) :is(nav, .ui-breadcrumb) > .breadcrumb:has(> .breadcrumb-item:nth-child(2):last-child):not(:has(.ui-page-title)) { display: none; }
/* A title rendered as the last breadcrumb (Partials/_PageShell): the "Home" step goes, the title stands alone. */
.page-shell-toolbar .ui-breadcrumb .breadcrumb > .breadcrumb-item:first-child { display: none; }
.page-shell-toolbar .ui-breadcrumb .breadcrumb > .breadcrumb-item:nth-child(2)::before { display: none; }
.page-shell-toolbar .ui-breadcrumb .breadcrumb > .breadcrumb-item.active:has(.ui-page-title) { display: inline-flex; align-items: baseline; padding-left: 0; }
.page-shell-toolbar .ui-breadcrumb .breadcrumb-item.active .ui-page-title { display: block !important; }
.action-toolbar, .hbys-action-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .4rem 0; margin-bottom: .5rem; }
.ui-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hbys-section-title { margin-bottom: .4rem; padding-bottom: .25rem; border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 600; color: var(--ink-500); }

.ui-filter-bar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem;
  margin-bottom: 1.125rem; padding: 1.25rem 1.375rem;
  background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
.ui-filter-bar .form-select { min-width: 120px; }
/* The list-page search (Partials/_PageShell) is a field, not a panel. */
.page-shell-search .ui-filter-bar { margin: 0; padding: 0; gap: 6px; align-items: center; background: none; border: 0; box-shadow: none; }
.list-page-shell .page-shell-search .form-control { width: 240px; border-radius: 999px; padding-left: .875rem; }
.page-shell-search .ui-filter-bar .btn { min-width: 32px; border-radius: 999px; }

/* ── Patient identity bar (always solid, always readable) ─────────────── */
.patient-header, .hbys-patient-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem;
  margin-bottom: .75rem; padding: .5rem .875rem;
  font-size: .8125rem; color: var(--ink-900);
  background: #fff;
  border: 1px solid var(--emerald-200);
  border-radius: var(--radius-panel);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 20px -14px rgba(8, 102, 75, .35);
}
.patient-header.inside-card, .hbys-patient-header.inside-card { margin: -.5rem -.75rem .75rem; border-radius: var(--meva-radius-md) var(--meva-radius-md) 0 0; }
.patient-header .patient-header-item, .hbys-patient-header .patient-header-item { display: inline-flex; align-items: center; gap: .35rem; }
.patient-header .patient-header-label, .hbys-patient-header .patient-header-label { color: var(--ink-500); font-weight: 500; }
.patient-header .patient-header-value, .hbys-patient-header .patient-header-value { font-weight: 600; }

/* ── Form grids and density helpers ───────────────────────────────────── */
.form-grid-2, .hbys-form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; align-items: start; }
.form-grid-3, .hbys-form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .75rem; align-items: start; }
.form-grid-2 .form-group, .form-grid-3 .form-group, .hbys-form-grid-2 .mb-2, .hbys-form-grid-3 .mb-2 { margin-bottom: 0 !important; }
.form-grid-2 label, .form-grid-3 label { margin-bottom: .2rem; font-size: .75rem; font-weight: 500; color: var(--ink-600); }
.form-grid-2 textarea.form-control, .form-grid-3 textarea.form-control { min-height: 60px; resize: vertical; }
@media (min-width: 992px) {
  .form-grid-2, .hbys-form-grid-2 { gap: .4rem .75rem; }
  .form-grid-3, .hbys-form-grid-3 { gap: .4rem .6rem; }
}
@media (max-width: 991px) {
  .form-grid-2, .form-grid-3, .hbys-form-grid-2, .hbys-form-grid-3 { grid-template-columns: 1fr; }
  .doctor-encounter-layout { flex-direction: column !important; }
  .doctor-encounter-right { max-height: none !important; }
}
.hbys-dense .card-panel-body, .hbys-dense .card-panel .card-panel-body { padding: .5rem .75rem; }
.hbys-dense .form-control, .hbys-dense input.form-control, .hbys-dense select.form-control { padding: .25rem .5rem; font-size: .8125rem; min-height: 28px; }
.hbys-dense .form-label { font-size: .75rem; margin-bottom: .15rem; }
.hbys-dense .table th, .hbys-dense .table td { padding: .35rem .5rem; }
.form-compact .form-control, .form-compact .form-select { padding: .3rem .5rem; }
.form-compact .form-label { margin-bottom: .2rem; }
.form-compact .row { --bs-gutter-y: .5rem; }

/* ── Doctor encounter side panels ─────────────────────────────────────── */
.doctor-encounter-layout { display: flex; gap: 1rem; align-items: flex-start; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.doctor-encounter-left { flex: 0 0 60%; min-width: 0; }
.doctor-encounter-right { flex: 0 0 calc(40% - 1rem); display: flex; flex-direction: column; gap: .5rem; max-height: calc(100vh - 200px); overflow-y: auto; padding-top: .25rem; }
.doctor-right-panel-body-label { margin-bottom: .35rem; font-size: .75rem; font-weight: 600; color: var(--ink-700); }
.doctor-right-panel { overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column; }
.doctor-right-panel .doctor-right-panel-header { flex-shrink: 0; order: 1; display: flex; align-items: center; justify-content: space-between; padding: .4rem .7rem; font-size: .75rem; font-weight: 600; color: var(--ink-900); border-bottom: 1px solid var(--line); cursor: pointer; text-decoration: none; }
.doctor-right-panel .doctor-right-panel-header:hover { background: var(--fill-1); }
.doctor-right-panel .doctor-right-panel-body { order: 2; padding: .4rem .7rem; font-size: .8125rem; max-height: 140px; overflow-y: auto; }
.doctor-right-panel .doctor-right-panel-body:empty::after { content: attr(data-empty); color: var(--ink-500); font-style: italic; }
.doctor-right-panel .doctor-right-panel-body .btn-view-tab { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .6rem; font-size: .75rem; font-weight: 500; color: var(--lapis-600); background: var(--lapis-50); border: 1px solid var(--lapis-200); border-radius: var(--meva-radius-sm); text-decoration: none; }
.doctor-right-panel .doctor-right-panel-body .btn-view-tab:hover { background: var(--lapis-600); color: #fff; border-color: var(--lapis-600); }

/* Previous-result chips on the encounter screen. High / low / critical keep distinct colours and weights. */
.enc-prev-badge { display: inline-flex; align-items: center; margin-bottom: .45rem; padding: .1rem .55rem; font-size: .65rem; font-weight: 600; color: var(--lapis-700); background: var(--lapis-50); border: 1px solid var(--lapis-200); border-radius: 999px; }
.enc-status-chip { display: inline-flex; align-items: center; margin: 0 .25rem .35rem 0; padding: .1rem .5rem; font-size: .63rem; font-weight: 600; border-radius: 999px; }
.enc-status-warning { background: var(--warn-50); color: #7c3a06; border: 1px solid #f5d9a6; }
.enc-status-danger { background: var(--bad-50); color: #8f000f; border: 1px solid #f6b8be; }
.enc-prev-list { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .3rem; }
.enc-prev-faded { opacity: .72; }
.enc-prev-row { display: flex; align-items: baseline; gap: .3rem; min-width: 0; font-size: .72rem; line-height: 1.3; }
.enc-lab-row { justify-content: space-between; }
.enc-img-row { gap: .4rem; }
.enc-prev-code { flex-shrink: 0; padding: 0 4px; font-size: .65rem; font-weight: 700; color: var(--lapis-700); background: var(--lapis-50); border-radius: 4px; white-space: nowrap; }
.enc-prev-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-700); font-size: .71rem; }
.enc-prev-more { padding-left: 2px; font-size: .65rem; color: var(--ink-500); font-style: italic; }
.enc-prev-star { flex-shrink: 0; font-size: .6rem; color: #f59e0b; }
.enc-lab-val { flex-shrink: 0; font-size: .71rem; font-weight: 600; color: var(--ink-900); text-align: right; white-space: nowrap; }
.enc-lab-high { color: #b45309; }
.enc-lab-low { color: #1d4ed8; }
.enc-lab-critical { color: #dc2626; background: #fee2e2; border-radius: 4px; padding: 0 3px; }
.enc-img-icon { flex-shrink: 0; width: 16px; font-size: .75rem; text-align: center; }

/* ── Dashboards ───────────────────────────────────────────────────────── */
.kpi-card, .kpi-card.card, .app-kpi-card { transition: box-shadow .15s ease; }
.kpi-card:hover, .app-kpi-card:hover { box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 14px 32px -16px rgba(16, 40, 60, .28); }
.kpi-card a:hover { transform: none; text-decoration: none; }
.app-kpi-card { padding: 1.125rem; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.app-kpi-card .kpi-value { font-family: var(--meva-font-display); font-size: 1.625rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.app-kpi-card .kpi-value.text-accent { color: var(--emerald-600); }
.app-kpi-card .kpi-value.text-success { color: var(--emerald-600); }
.dashboard-card .table thead th { font-weight: 600; }
.dashboard-card .table td, .dashboard-card .table th { vertical-align: middle; }

.ui-stat-card { overflow: hidden; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); transition: box-shadow .15s ease; }
.ui-stat-card:hover { box-shadow: 0 0 0 1px rgba(16, 24, 40, .05), 0 14px 32px -16px rgba(16, 40, 60, .28); }
.ui-stat-card a { text-decoration: none; color: inherit; }
.ui-stat-card .ui-stat-body { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; min-height: 3.75rem; }
.ui-stat-card .ui-stat-icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.125rem; }
.ui-stat-card .ui-stat-icon.primary { background: var(--fill-2); color: var(--ink-700); }
.ui-stat-card .ui-stat-icon.success { background: var(--emerald-100); color: var(--emerald-700); }
.ui-stat-card .ui-stat-icon.info { background: var(--lapis-100); color: var(--lapis-700); }
.ui-stat-card .ui-stat-icon.warning { background: #fbe3b3; color: #7c3a06; }
.ui-stat-card .ui-stat-icon.danger { background: #fbd3d8; color: #8f000f; }
.ui-stat-card .ui-stat-icon.secondary { background: var(--fill-2); color: var(--ink-600); }
.ui-stat-card .ui-stat-label { margin-bottom: .15rem; font-size: .71875rem; font-weight: 500; color: var(--ink-500); }
.ui-stat-card .ui-stat-value { font-family: var(--meva-font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--ink-900); }

.ui-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; font-size: .71875rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; border-radius: 999px; background: var(--fill-2); color: var(--ink-600); }
.ui-badge-primary, .ui-badge-success { background: var(--emerald-50); color: var(--emerald-800); border-color: var(--emerald-200); }
.ui-badge-info { background: var(--lapis-50); color: var(--lapis-700); border-color: var(--lapis-200); }
.ui-badge-warning { background: var(--warn-50); color: #7c3a06; border-color: #f0cf8f; }
.ui-badge-danger { background: var(--bad-600); color: #fff; }
.ui-badge-secondary, .ui-badge-light { background: var(--fill-2); color: var(--ink-600); }

/* ── Modals with their own class ──────────────────────────────────────── */
.ui-modal .modal-header { padding: .875rem 1.125rem; }
.ui-modal .modal-body { padding: 1rem 1.125rem; }
.modal.ui-modal .modal-content { border: 0; }

/* ── List pages built by app-shell.js (grid + toolbar + detail panel) ─── */
.his-grid-wrapper { padding: .875rem 1rem 1rem; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.his-grid-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-bottom: .625rem; padding-bottom: 0; border-bottom: 0; }
.his-grid-toolbar-left, .his-grid-toolbar-right { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.his-grid-wrapper .dataTables_wrapper .dataTables_length, .his-grid-wrapper .dataTables_wrapper .dataTables_filter { margin-bottom: .2rem; }
.his-detail-panel { max-height: 230px; margin-top: .75rem; padding: .75rem 1rem; overflow: auto; background: rgba(255, 255, 255, .7); border-radius: 14px; box-shadow: inset 0 0 0 1px var(--hairline); }
/* Before a row is chosen there is nothing to show (app-shell.js removes .empty on selection). */
.his-detail-panel.empty { display: none; }
/* The grid toolbar's "+ Yeni" only appears when the page already has its own, better-named create button
   (app-shell.js copies that link): one create action per page. */
.his-grid-toolbar .his-action-new { display: none !important; }
.his-detail-panel.empty { color: var(--ink-500); }
.his-detail-row { display: grid; grid-template-columns: minmax(140px, 220px) minmax(120px, 1fr); gap: .5rem; padding: .22rem 0; border-bottom: 1px dashed var(--line); }
.his-detail-row:last-child { border-bottom: 0; }
.his-detail-key { font-size: .75rem; font-weight: 600; color: var(--ink-500); }
.his-detail-value { font-size: .8125rem; color: var(--ink-900); }

.list-page-shell { display: grid; grid-template-rows: auto auto minmax(180px, 1fr) auto minmax(220px, 38vh); grid-template-columns: 1fr; min-height: calc(100vh - 56px - 3rem); gap: .35rem; }
.list-page-shell .page-shell-toolbar { grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 0; margin-bottom: 0; }
.list-page-shell .page-shell-toolbar .btn-group-actions { display: flex; align-items: center; gap: .35rem; }
.list-page-shell .page-shell-search { display: flex; align-items: center; gap: .5rem; }
.list-page-shell .page-shell-search .form-control { width: 220px; }
.list-page-shell .patients-list-meta { grid-row: 2; }
.list-page-shell .list-grid-wrapper { grid-row: 3; min-height: 160px; overflow: auto; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.list-page-shell .patients-list-pager { grid-row: 4; }
.list-page-shell .detail-panel { grid-row: 5; padding: 1rem 1.375rem; overflow: auto; font-size: .8125rem; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
/* Until a row is chosen the detail area is a single hint line, not an empty slab. */
.list-page-shell:has(> .detail-panel:empty) { grid-template-rows: auto auto minmax(180px, 1fr) auto auto; }
.list-page-shell .detail-panel:empty { min-height: 0; padding: .25rem .25rem 0; overflow: visible; background: transparent; border: 0; box-shadow: none; }
.list-page-shell .detail-panel:empty::before { content: attr(data-placeholder); color: var(--ink-500); font-size: .8125rem; }
.patient-forms-panel .patient-forms-encounters-wrap { max-height: min(280px, 32vh); overflow: auto; border: 1px solid var(--line); border-radius: 10px; }
.app-toast { min-width: 280px; }

/* ── Searchable select (searchable-select.js) ─────────────────────────── */
.searchable-select-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.searchable-select-toggle { width: 100%; max-width: 100%; min-height: 32px; padding-right: 3.4rem !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.form-select-sm.searchable-select-toggle { padding-right: 3rem !important; }
.searchable-select-menu { position: absolute; z-index: 1060; left: 0; right: 0; margin-top: 2px; max-height: 280px; display: flex; flex-direction: column; overflow: hidden; }
.searchable-select-list { overflow-y: auto; max-height: 220px; }
.searchable-select-option { width: 100%; padding: .35rem .75rem; font-size: .8125rem; text-align: left; border: 0; border-radius: 8px; background: transparent; color: var(--ink-900); }
.searchable-select-option.active, .searchable-select-option:hover { background-color: var(--emerald-100); color: var(--emerald-800); }
.searchable-select-clear { position: absolute; right: 1.9rem !important; top: 50%; transform: translateY(-50%); z-index: 2; line-height: 1; padding: 0 .35rem; color: var(--ink-500) !important; text-decoration: none !important; }
.searchable-select-clear:hover, .searchable-select-clear:focus-visible { color: var(--bad-700) !important; }
.searchable-select.show .searchable-select-menu { display: flex !important; }
.searchable-select.open-up .searchable-select-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 2px; }
.rack-slot-empty { color: var(--ink-600); }
.rack-slot-empty .text-muted, .rack-slot-empty div { color: inherit !important; }

/* ── Keyboard-shortcut help (keyboard-shortcuts.js) ───────────────────── */
.meva-keys-hint {
  position: fixed; right: calc(var(--win-inset) + 16px); bottom: calc(var(--win-inset) + 14px); z-index: 1049;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--surface-edge); border-radius: 50%; cursor: pointer;
  background: var(--surface-raised); color: var(--ink-600); font-size: 15px;
  box-shadow: var(--pill-shadow);
  transition: color .15s ease, background-color .15s ease;
}
.meva-keys-hint:hover { color: var(--ink-900); background: #fff; }
.meva-keys-hint:focus-visible { outline: 2px solid var(--emerald-600); outline-offset: 2px; }
.meva-keys-overlay { position: fixed; inset: 0; z-index: 1070; display: flex; align-items: center; justify-content: center; background: rgba(16, 24, 40, .38); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.meva-keys-overlay--visible { opacity: 1; pointer-events: auto; }
.meva-keys-card { width: 440px; max-width: 92vw; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; background: #fff; color: var(--ink-900); border-radius: 18px; box-shadow: var(--meva-shadow-lg); }
.meva-keys-header { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1.125rem; border-bottom: 1px solid var(--line); }
.meva-keys-header .btn-close-white { filter: none; }
.meva-keys-title { font-family: var(--meva-font-display); font-weight: 700; font-size: .9375rem; }
.meva-keys-title i { margin-right: 6px; color: var(--ink-500); }
.meva-keys-body { flex: 1; overflow-y: auto; padding: .875rem 1.125rem; }
.meva-keys-footer { padding: .625rem 1.125rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--ink-500); text-align: center; }
.meva-keys-table { width: 100%; border-collapse: collapse; }
.meva-keys-table tr + tr { border-top: 1px solid var(--line); }
.meva-keys-table td { padding: 7px 0; vertical-align: middle; }
.meva-keys-table td:first-child { width: 130px; white-space: nowrap; padding-right: 14px; }
.meva-keys-table td:last-child { color: var(--ink-700); font-size: .8125rem; }
.meva-keys-table kbd, .meva-keys-footer kbd { display: inline-block; min-width: 22px; padding: 2px 7px; text-align: center; font-family: inherit; font-size: .75rem; font-weight: 500; line-height: 1.4; }
@media (hover: none) and (pointer: coarse) { .meva-keys-hint { display: none !important; } }

/* ── Payroll (site.css) ───────────────────────────────────────────────── */
.payroll-engine { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .75rem; }
.payroll-engine-label { font-size: .75rem; color: var(--ink-500); }
.payroll-chip { display: inline-flex; align-items: center; padding: .15rem .55rem; font-size: .71875rem; font-weight: 600; border-radius: 999px; }
.payroll-chip-legacy { background: var(--fill-3); color: var(--ink-700); }
.payroll-chip-v2 { background: var(--emerald-100); color: var(--emerald-800); }
.payroll-chip-muted { background: var(--fill-1); color: var(--ink-600); border: 1px solid var(--line); }
.payroll-banner { background: var(--lapis-50); border: 1px solid var(--lapis-200); color: var(--lapis-800); }
.payroll-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.payroll-card { min-width: 0; padding: .7rem .8rem; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: 14px; box-shadow: var(--card-shadow); }
.payroll-card span { display: block; color: var(--ink-500); font-size: .71875rem; }
.payroll-card strong { display: block; margin-top: .15rem; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.payroll-card-net { background: var(--ink-900); color: #fff; }
.payroll-card-net span, .payroll-card-net strong { color: #fff; }
.payroll-card-net strong { font-size: 1.25rem; }
.payroll-negative { color: #9a3412; }
.payroll-person { display: flex; gap: .6rem; align-items: center; min-width: 12rem; }
.payroll-avatar { width: 2.1rem; height: 2.1rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--emerald-100); color: var(--emerald-800); font-size: .71875rem; font-weight: 700; }
.payroll-person-name { font-weight: 600; }
.payroll-person-meta, .payroll-role { display: block; font-size: .71875rem; color: var(--ink-500); }
.payroll-role { display: inline-block; margin-left: .25rem; }
.payroll-sheet th.num, .payroll-sheet td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.payroll-sheet td.net { font-weight: 700; color: var(--ink-900); }
.payroll-period { color: var(--ink-500); font-size: .75rem; }
.payroll-section { margin-bottom: .8rem; padding: .9rem 1rem; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.payroll-section h2 { font-size: .9375rem; margin: 0 0 .7rem; }
.payroll-group { margin-bottom: .6rem; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.payroll-group summary { cursor: pointer; padding: .75rem .9rem; list-style: none; }
.payroll-group summary::-webkit-details-marker { display: none; }
.payroll-pay-line { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; }
.payroll-pay-net { font-size: 1.35rem; font-weight: 700; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.payroll-period-picker { display: flex; align-items: flex-end; gap: .35rem; }
.payroll-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.payroll-toolbar .payroll-toolbar-end { margin-left: auto; display: flex; align-items: flex-end; gap: .5rem; }
.payroll-form-card { margin-bottom: 1rem; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: var(--radius-card); box-shadow: var(--card-shadow); }
.payroll-form-card > .payroll-form-card-title { padding: .625rem 1rem; font-weight: 600; font-size: .8125rem; color: var(--ink-900); border-bottom: 1px solid var(--line); }
.payroll-form-card > .payroll-form-card-body { padding: 1rem; }
.payroll-form-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; padding: .625rem 1rem; background: #fff; border-radius: var(--meva-radius-md); box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 -4px 16px rgba(16, 24, 40, .06); }
.payroll-form-actions .payroll-form-actions-hint { margin-left: auto; font-size: .75rem; color: var(--ink-500); }
.payroll-masked { color: var(--ink-400); letter-spacing: .1em; }
.payroll-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.payroll-kpi { min-width: 0; padding: .65rem .8rem; background: var(--surface-card); border: 1px solid var(--surface-edge); border-radius: 14px; box-shadow: var(--card-shadow); }
.payroll-kpi span { display: block; color: var(--ink-500); font-size: .71875rem; }
.payroll-kpi strong { display: block; margin-top: .15rem; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.payroll-kpi small { display: block; margin-top: .1rem; color: var(--ink-500); font-size: .71875rem; }
.payroll-dl dt { color: var(--ink-500); font-weight: 500; font-size: .8125rem; }
.payroll-dl dd { font-weight: 600; }
@media (max-width: 1100px) { .payroll-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .payroll-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-sheet thead { display: none; }
  .payroll-sheet tr { display: block; border-bottom: 1px solid var(--line); padding: .4rem 0; }
  .payroll-sheet td { display: flex; justify-content: space-between; gap: .75rem; border: 0; padding: .2rem .4rem; }
  .payroll-sheet td::before { content: attr(data-label); color: var(--ink-500); }
  .payroll-sheet td.person::before { content: none; }
}
.dpp-row-skip td { background: var(--fill-2); }
.dpp-row-skip .num { text-decoration: line-through; text-decoration-color: var(--ink-300); }
.dpp-btn, .dpp-input { min-height: 44px; }
.dpp-page { max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  .dpp-page { padding-left: 16px; padding-right: 16px; }
  .dpp-lines { width: 100%; }
  .dpp-lines tr.dpp-row-skip { border-left: 3px solid var(--ink-300); }
}

/* ── Logo sizes (mevamed-brand.css) and the signed-out page frame ─────── */
.mevamed-logo--hero { max-height: clamp(52px, 12vw, 76px); max-width: min(92vw, 300px); margin-left: auto; margin-right: auto; }
.mevamed-logo--landing-header { max-height: 38px; max-width: min(50vw, 200px); }
.mevamed-logo--landing-hero { max-height: clamp(48px, 10vw, 64px); max-width: min(90vw, 260px); margin: 0 auto .65rem; }
.mevamed-logo--navbar { max-height: 32px; max-width: 150px; }
.mevamed-logo--login-card { max-height: 68px; max-width: 200px; margin: 0 auto .5rem; }
.mevamed-logo--statusbar { max-height: 20px; max-width: 92px; }
.mevamed-logo--clinic-sidebar { max-height: 32px; max-width: 140px; }
body:not(.dashboard-body) { margin-bottom: 60px; }
.footer { position: relative; z-index: 1; padding: 1rem 0; }