/* Presentation layer: existing Bootstrap, k-* controls and all form contracts stay intact. */
:root, [data-bs-theme="light"] {
  --ui-canvas: #f5f6f8; --ui-surface: #fff; --ui-raised: #f8f9fb;
  --ui-ink: #202631; --ui-muted: #626d7c; --ui-line: #e4e7ed;
  --ui-brand: #4056cf; --ui-brand-text: #3e51bd; --ui-soft: #edf0ff;
  --ui-green: #216b51; --ui-green-soft: #eaf5ee;
  --ui-amber: #855c1c; --ui-amber-soft: #fff4df;
  --ui-red: #ac3443; --ui-red-soft: #fceef0;
  --bs-body-color-rgb: 32, 38, 49; --bs-body-bg-rgb: 245, 246, 248;
  --bs-primary-rgb: 64, 86, 207; --bs-secondary-color-rgb: 98, 109, 124;
}
[data-bs-theme="dark"] {
  --ui-canvas: #101318; --ui-surface: #191e26; --ui-raised: #222832;
  --ui-ink: #edf0f5; --ui-muted: #a6b0bf; --ui-line: #333c49;
  --ui-brand: #526cdb; --ui-brand-text: #a8b9ff; --ui-soft: #293454;
  --ui-green: #8bd3b5; --ui-green-soft: #203a30;
  --ui-amber: #e7bf7e; --ui-amber-soft: #3c3223;
  --ui-red: #f4a5af; --ui-red-soft: #40272e;
  --bs-body-color-rgb: 237, 240, 245; --bs-body-bg-rgb: 16, 19, 24;
  --bs-primary-rgb: 82, 108, 219; --bs-secondary-color-rgb: 166, 176, 191;
}
:root, [data-bs-theme] {
  --ds-bg-canvas: var(--ui-canvas); --ds-bg-card: var(--ui-surface);
  --ds-bg-level-0: var(--ui-surface); --ds-bg-level-1: var(--ui-raised);
  --ds-bg-level-2: var(--ui-line); --ds-bg-level-3: var(--ui-line);
  --ds-text-primary: var(--ui-ink); --ds-text-secondary: var(--ui-muted);
  --ds-text-brand: var(--ui-brand-text); --ds-text-tertiary: var(--ui-muted);
  --ds-divider-light: var(--ui-line); --ds-divider-medium: var(--ui-line);
  --ds-border-default: var(--ui-line); --ds-border-strong: var(--ui-muted);
  --ds-surface-secondary: var(--ui-raised);
  --ds-menu-default-bg: var(--ui-surface); --ds-menu-default-text: var(--ui-muted);
  --ds-menu-hover-bg: var(--ui-raised); --ds-menu-hover-text: var(--ui-ink);
  --ds-menu-active-bg: var(--ui-soft); --ds-menu-active-text: var(--ui-brand-text);
  --ds-menu-active-border: var(--ui-brand);
  --ds-button-primary-bg: var(--ui-brand); --ds-button-primary-hover-bg: #354ab9;
  --ds-button-primary-active-bg: #3042a6; --ds-button-primary-text: #fff;
  --ds-button-secondary-text: var(--ui-ink); --ds-button-secondary-border: var(--ui-line);
  --ds-button-secondary-hover-bg: var(--ui-raised);
  --ds-button-disabled-bg: var(--ui-raised); --ds-button-disabled-text: var(--ui-muted);
  --ds-form-label: var(--ui-ink); --ds-form-bg: var(--ui-surface);
  --ds-form-placeholder: var(--ui-muted); --ds-form-helper: var(--ui-muted);
  --ds-form-focus-border: var(--ui-brand); --ds-form-disabled-bg: var(--ui-raised);
  --ds-form-disabled-text: var(--ui-muted);
  --ds-semantic-brand: var(--ui-brand-text); --ds-semantic-brand-soft: var(--ui-soft);
  --ds-semantic-brand-border: var(--ui-line);
  --ds-semantic-info: var(--ui-brand-text); --ds-semantic-info-soft: var(--ui-soft);
  --ds-semantic-info-border: var(--ui-line);
  --ds-semantic-success: var(--ui-green); --ds-semantic-success-soft: var(--ui-green-soft);
  --ds-semantic-success-border: var(--ui-line);
  --ds-semantic-warning: var(--ui-amber); --ds-semantic-warning-soft: var(--ui-amber-soft);
  --ds-semantic-warning-border: var(--ui-line);
  --ds-semantic-danger: var(--ui-red); --ds-semantic-danger-soft: var(--ui-red-soft);
  --ds-semantic-danger-border: var(--ui-line);
  --ds-semantic-neutral: var(--ui-muted); --ds-semantic-neutral-soft: var(--ui-raised);
  --ds-semantic-neutral-border: var(--ui-line);
  --ds-modal-bg: var(--ui-surface); --ds-modal-header-bg: var(--ui-surface);
  --ds-modal-header-text: var(--ui-ink);
  --ds-shadow-soft: 0 1px 3px #00000005; --ds-shadow-elevated: 0 12px 40px #00000020;
  --bs-primary: var(--ui-brand); --bs-body-color: var(--ui-ink);
  --bs-heading-color: var(--ui-ink); --bs-secondary-color: var(--ui-muted);
  --bs-border-color: var(--ui-line); --bs-card-bg: var(--ui-surface);
  --bs-tertiary-bg: var(--ui-raised); --bs-secondary-bg: var(--ui-raised);
  --bs-link-color: var(--ui-brand-text); --bs-link-hover-color: var(--ui-brand-text);
}
html { scroll-padding-top: 90px; }
body { background: var(--ui-canvas); color: var(--ui-ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { letter-spacing: -.025em; line-height: 1.3; }
h4 { font-size: 1.4rem; } h5 { font-size: 1.05rem; } h6 { font-size: .92rem; }
a,button,input,select,textarea,summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ui-brand-text); outline-offset: 3px; }
button:disabled, .btn:disabled, .k-btn:disabled { cursor: not-allowed; opacity: .55; }
input[type=checkbox],input[type=radio] { accent-color: var(--ui-brand); }
.krew-skip { position: fixed; left: 16px; top: -100px; z-index: 2000; padding: 12px 20px; background: var(--ui-surface); border-radius: 8px; }
.krew-skip:focus { top: 12px; }
/* A quiet, persistent application frame. */
body .left-sidebar { width: 248px; background: var(--ui-surface); border-right: 1px solid var(--ui-line); box-shadow: none; }
body .brand-logo { min-height: 74px; padding: 18px 24px; }
body .krew-sidebar-logo { max-width: 125px; max-height: 32px; }
body .sidebar-nav { padding: 0 14px; }
body .sidebar-nav .sidebar-item .sidebar-link { padding: 9px 12px; margin-bottom: 3px; gap: 10px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ui-muted); }
body .sidebar-nav .sidebar-item .sidebar-link.active { background: var(--ui-soft); color: var(--ui-brand-text); font-weight: 700; box-shadow: none; }
body .sidebar-nav .sidebar-item .sidebar-link:hover { background: var(--ui-raised); color: var(--ui-ink); }
body .sidebar-nav .sidebar-item .sidebar-link iconify-icon { font-size: 19px!important; flex-shrink: 0; }
body .sidebar-nav .nav-small-cap { color: var(--ui-muted); font-size: 10px; letter-spacing: .09em; padding: 22px 12px 8px; text-transform: uppercase; }
body .sidebar-nav .nav-small-cap-icon { display: none; }
body .sidebar-footer { background: var(--ui-surface); border-top: 1px solid var(--ui-line); }
.krew-nav-search { padding: 0 18px 8px; }
.krew-nav-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 7px; background: var(--ui-raised); color: var(--ui-ink); font-size: 12px; }
body .topbar { border-bottom: 1px solid var(--ui-line); background: var(--ui-surface); box-shadow: none; }
body .topbar .navbar { min-height: 64px; }
body .topbar .nav-link { height: 44px; min-width: 40px; }
.krew-workspace-label { font-size: 12px; color: var(--ui-muted); align-self: center; margin-left: 10px; }
body .card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 10px; box-shadow: none; margin-bottom: 24px; }
body .card-body { padding: 24px; }
body .card-header, body .card-footer { background: var(--ui-surface); border-color: var(--ui-line); }
body .card-header.bg-primary, body .card-header.bg-info { background: var(--ui-surface)!important; color: var(--ui-ink)!important; border-bottom: 1px solid var(--ui-line); }
body .card-header.bg-primary :is(h4,h5,h6,.text-white), body .card-header.bg-info :is(h4,h5,h6,.text-white) { color: var(--ui-ink)!important; }
body .krew-page-header { border: 0!important; background: transparent!important; box-shadow: none!important; border-radius: 0!important; margin-bottom: 24px; }
body .krew-page-header > .card-body { padding: 0!important; }
.krew-page-header .breadcrumb { margin: 8px 0 0!important; font-size: 12px; }
.krew-page-header .row > :has(> img[src*="breadcrumb"]) { display: none; }
.krew-page-header .row > .col-9 { width: 100%; }
.krew-page-header .d-flex { gap: 16px; flex-wrap: wrap; }
body .krew-section-header { background: var(--ui-raised); color: var(--ui-ink); border-radius: 7px; }
body :is(.btn,.k-btn) { border-radius: 7px; font-weight: 600; font-size: 13px; min-height: 38px; letter-spacing: 0; }
body .k-btn { padding: 9px 15px; }
body .k-btn--secondary { background: var(--ui-surface); border-color: var(--ui-line); color: var(--ui-ink); }
body .k-btn--ghost { background: var(--ui-raised); color: var(--ui-ink); border-color: var(--ui-line); }
body .k-action { width: 32px; height: 32px; border: 1px solid var(--ui-line); border-radius: 6px; background: var(--ui-surface); color: var(--ui-muted); }
body .k-action:hover { background: var(--ui-soft); color: var(--ui-brand-text); }
body :is(.k-action--delete,.k-action--reject) { color: var(--ui-red); }
body :is(.k-action--delete,.k-action--reject):hover { background: var(--ui-red-soft); color: var(--ui-red); }
body :is(.badge,.k-badge,.k-position) { font-weight: 600; border-radius: 5px; line-height: 1.35; letter-spacing: 0; }
body .k-position { background: var(--ui-raised); color: var(--ui-muted); }
body .k-badge--success { background: var(--ui-green-soft); color: var(--ui-green); }
body .k-badge--warning { background: var(--ui-amber-soft); color: var(--ui-amber); }
body .k-badge--danger { background: var(--ui-red-soft); color: var(--ui-red); }
body :is(.k-badge--brand,.k-badge--info) { background: var(--ui-soft); color: var(--ui-brand-text); }
body .k-badge--neutral { background: var(--ui-raised); color: var(--ui-muted); }
body .form-control,body .form-select { min-height: 40px; border: 1px solid var(--ui-line); border-radius: 7px; background-color: var(--ui-surface); color: var(--ui-ink); font-size: 13px; }
body .form-control:focus,body .form-select:focus { background-color: var(--ui-surface); border-color: var(--ui-brand); box-shadow: 0 0 0 3px color-mix(in srgb,var(--ui-brand) 16%,transparent); }
body .form-control:disabled,body .form-select:disabled { background-color: var(--ui-raised); color: var(--ui-muted); }
body .form-label { margin-bottom: 7px; color: var(--ui-ink); font-weight: 600; font-size: 13px; }
body .input-group-text { background: var(--ui-raised); border-color: var(--ui-line); color: var(--ui-muted); }
body .alert { border: 1px solid var(--ui-line); border-radius: 8px; font-size: 13px; }
body .table,body .k-table { --bs-table-bg: var(--ui-surface); --bs-table-color: var(--ui-ink); --bs-table-border-color: var(--ui-line); --bs-table-hover-bg: var(--ui-raised); font-size: 13px; }
body :is(.table,.k-table) > thead > tr > th { background: var(--ui-raised)!important; color: var(--ui-muted)!important; font-size: 11px; font-weight: 600; letter-spacing: .035em; border-bottom: 1px solid var(--ui-line); padding: 13px 16px; }
body :is(.table,.k-table) > tbody > tr > td { padding: 15px 16px; border-color: var(--ui-line); vertical-align: middle; }
body .k-table tbody tr:hover { background: var(--ui-raised); }
body [data-ktable-wrap] > .d-flex { gap: 12px; flex-wrap: wrap; }
body [data-ktable-wrap] [data-ktable-search] { max-width: 100%; }
body .modal-content { border: 1px solid var(--ui-line); border-radius: 12px; box-shadow: var(--ds-shadow-elevated); }
body .modal-header { padding: 20px 24px; }
body .modal-body { padding: 24px; }
body .modal-footer { background: var(--ui-raised); gap: 8px; }
body .nav-tabs { gap: 4px; border-color: var(--ui-line); }
body .nav-tabs :is(.nav-link,.k-btn--tab) { color: var(--ui-muted); background: transparent; border: 0; border-radius: 7px; }
body .nav-tabs :is(.nav-link,.k-btn--tab).active { background: var(--ui-soft); color: var(--ui-brand-text); }
body :is(.stat-card,.stat-card-pink,.stat-card-blue,.score-card) { background: var(--ui-surface); color: var(--ui-ink); border: 1px solid var(--ui-line); box-shadow: none; }
body :is(.stat-card,.stat-card-pink,.stat-card-blue,.score-card) .text-white { color: var(--ui-ink)!important; }
body .stat-icon { background: var(--ui-soft); color: var(--ui-brand-text); }
/* Home: actionable work before celebration. */
.krew-home-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.krew-eyebrow { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ui-muted); margin-bottom: 8px; }
.krew-home-heading h1 { font-size: clamp(26px,3vw,34px); margin-bottom: 6px; }
.krew-home-heading p { color: var(--ui-muted); margin: 0; }
.krew-home-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 24px; align-items: start; }
.krew-home-grid .card { margin: 0; }
.krew-home-grid h2 { font-size: 16px; }
.krew-task { padding: 20px 0; border-top: 1px solid var(--ui-line); }
.krew-task h3 { font-size: 14px; margin-bottom: 6px; }
.krew-task p { font-size: 12px; color: var(--ui-muted); margin-bottom: 12px; }
.krew-task-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.krew-task-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--ui-muted); }
.krew-balance-number { font-size: 48px; line-height: 1.1; letter-spacing: -.06em; font-weight: 700; margin: 20px 0 4px; }
.krew-balance-meta { display: flex; justify-content: space-between; margin: 24px 0; padding-top: 16px; border-top: 1px solid var(--ui-line); font-size: 12px; color: var(--ui-muted); }
.krew-quick-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 24px 0; }
.krew-quick-links a { display: flex; align-items: center; gap: 12px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 9px; background: var(--ui-surface); color: var(--ui-ink); font-weight: 600; font-size: 12px; }
.krew-quick-links a:hover { border-color: var(--ui-brand); }
.krew-quick-links iconify-icon { font-size: 22px; color: var(--ui-brand-text); }
.krew-award { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--ui-line); }
.krew-award img { width: 52px; height: 52px; object-fit: contain; }
.krew-award iconify-icon { font-size: 40px; }
.krew-award strong { display: block; font-size: 13px; }
.krew-award small { color: var(--ui-muted); }
/* Profile keeps all ten tabs and their controls. */
.krew-profile-layout { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 24px; align-items: start; }
body #employeeTabs { flex-direction: column; border: 0; position: sticky; top: 88px; gap: 5px; }
body #employeeTabs .k-btn { width: 100%; justify-content: flex-start; font-size: 12px; white-space: normal; text-align: left; }
body .krew-profile-heading .col-2:first-child { width: auto; }
body .krew-profile-heading .col-8 { flex: 1; width: auto; min-width: 120px; }
body .krew-profile-heading .krew-avatar-lg { width: 76px; height: 76px; }
body .krew-profile-heading .col-2:last-child { width: auto; }
body .krew-recognitions img { width: 52px!important; height: 52px!important; object-fit: contain; }
body .krew-recognitions iconify-icon { font-size: 36px!important; }
/* Embedded widgets inherit the same surfaces and readable contrast. */
body .cc-inputs, body .cc-money, body .cc-setting input { background: var(--ui-surface); color: var(--ui-ink); border-color: var(--ui-line); }
body .cc-money input { color: var(--ui-ink); }
body .cc-money :is(span,small),body .cc-help { color: var(--ui-muted); }
body .cc-money small { background: var(--ui-raised); }
body .cc-inputs { border-radius: 10px; }
body .ProseMirror { color: #202631; }
body .fc { --fc-border-color: var(--ui-line); --fc-today-bg-color: var(--ui-soft); --fc-neutral-bg-color: var(--ui-raised); }
body .fc .fc-button-primary { background: var(--ui-surface); color: var(--ui-ink); border-color: var(--ui-line); border-radius: 6px; }
body .fc .fc-button-primary:not(:disabled).fc-button-active { background: var(--ui-brand); color: #fff; }
body .fc .fc-toolbar-title { font-size: 18px; }
body .flatpickr-calendar { background: var(--ui-surface); border: 1px solid var(--ui-line); box-shadow: var(--ds-shadow-elevated); border-radius: 9px; }
body .flatpickr-day { color: var(--ui-ink); border-radius: 6px; }
body .flatpickr-day.flatpickr-disabled,body .flatpickr-day.prevMonthDay,body .flatpickr-day.nextMonthDay { color: var(--ui-muted); opacity: .5; }
body .flatpickr-day.inRange { background: var(--ui-soft); border-color: var(--ui-soft); box-shadow: -5px 0 0 var(--ui-soft),5px 0 0 var(--ui-soft); color: var(--ui-brand-text); }
body .flatpickr-day.selected,body .flatpickr-day.startRange,body .flatpickr-day.endRange { background: var(--ui-brand); color: #fff; border-color: var(--ui-brand); }
body .flatpickr-months .flatpickr-month,body .flatpickr-weekdays,body span.flatpickr-weekday { background: var(--ui-surface); color: var(--ui-muted); }
body .flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--ui-surface); color: var(--ui-ink); }
body .flatpickr-months :is(.flatpickr-prev-month,.flatpickr-next-month) { fill: var(--ui-ink); color: var(--ui-ink); }
body .flatpickr-day:hover { background: var(--ui-raised); border-color: var(--ui-line); }
.krew-multi { padding: 12px; border: 1px solid var(--ui-line); border-radius: 8px; }
.krew-multi-options { max-height: 230px; overflow-y: auto; margin-top: 10px; }
.krew-multi label { display: flex; gap: 10px; padding: 8px; align-items: center; cursor: pointer; }
.krew-multi label:hover { background: var(--ui-raised); }
.krew-multi input[type=checkbox] { width: 17px; height: 17px; flex-shrink: 0; }
@media (min-width: 1200px) {
  body[data-sidebartype="full"] .page-wrapper { margin-left: 248px; }
  body[data-sidebartype="full"] .topbar { width: calc(100% - 248px); }
}
@media (max-width: 1199px) {
  .krew-home-grid { grid-template-columns: minmax(0,1fr) 280px; }
}
@media (max-width: 991px) {
  .krew-profile-layout { display: block; }
  body #employeeTabs { position: static; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .krew-home-grid { grid-template-columns: 1fr; }
  /* Every hour field stays available, with its day label, on small screens. */
  body #timesheetTable { min-width: 0!important; width: 100%; }
  #timesheetTable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #timesheetTable :is(tbody,tfoot) { display: block; }
  #timesheetTable .timesheet-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-bottom: 1px solid var(--ui-line); padding: 12px 0; }
  body #timesheetTable td { display: block; border: 0; padding: 6px; }
  #timesheetTable .timesheet-project,#timesheetTable .timesheet-task { grid-column: 1 / -1; }
  #timesheetTable td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; color: var(--ui-muted); margin-bottom: 6px; }
  #timesheetTable .row-total::before { content: 'Total'; display: block; font-size: 11px; color: var(--ui-muted); }
  #timesheetTable tfoot tr { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 4px; }
  #timesheetTable tfoot .day-total::before { content: attr(data-label); display: block; font-size: 10px; color: var(--ui-muted); }
}
@media (max-width: 575px) {
  body .card-body,body .modal-body { padding: 18px; }
  body .krew-page-header h4 { font-size: 22px!important; }
  .krew-home-heading { align-items: start; flex-direction: column; }
  .krew-quick-links { grid-template-columns: 1fr; gap: 8px; }
  .krew-quick-links a { padding: 14px 16px; }
  body #employeeTabs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  body #employeeTabs .k-btn { min-height: 44px; }
  body .krew-profile-heading .row { gap: 12px 0; }
  body .krew-profile-heading .krew-avatar-lg { width: 56px; height: 56px; }
  body .krew-profile-heading .col-2:last-child { width: 100%; text-align: left; }
  body .k-btn { white-space: normal; }
  body :is(.btn,.k-btn,.k-action) { min-height: 40px; }
  body .k-action { min-width: 36px; }
  body .fc .fc-toolbar { flex-wrap: wrap; gap: 12px; }
  body .fc .fc-toolbar-title { font-size: 16px; }
  body .modal-dialog { margin: 12px; }
  body [data-ktable-wrap] [data-ktable-search] { width: 100%!important; }
  .krew-workspace-label { display: none; }
  body .flatpickr-calendar { max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; transition-duration: .01ms!important; } }
@media print {
  .left-sidebar,.topbar,.krew-nav-search,.krew-skip { display: none!important; }
  body .page-wrapper { margin: 0!important; }
  body .body-wrapper > .container-fluid { padding: 0; }
  .krew-profile-layout { display: block; }
}
/* Match the application shell breakpoint, including smaller laptop windows. */
@media (min-width: 1100px) {
  html[data-layout="vertical"] body[data-sidebartype="full"] .left-sidebar { left: 0; width: 248px; }
  html[data-layout="vertical"] body[data-sidebartype="full"] .page-wrapper { margin-left: 248px; }
  html[data-layout="vertical"] body[data-sidebartype="full"] .topbar { width: calc(100% - 248px); }
  html[data-layout="vertical"] body[data-sidebartype="mini-sidebar"] .krew-nav-search { display: none; }
}
body .left-sidebar .scroll-sidebar { height: calc(100vh - 215px); }
body .left-sidebar .fixed-profile { background: var(--ui-raised)!important; margin: 12px 14px!important; padding: 14px!important; }
body .left-sidebar .fixed-profile h6 { font-size: 12px!important; margin-bottom: 4px!important; }
body .left-sidebar .fixed-profile .badge { background: transparent!important; color: var(--ui-muted)!important; padding: 0; font-size: 10px; }
body .left-sidebar [hidden],body .krew-multi [hidden] { display: none!important; }
@media (max-width: 1099px) { body .left-sidebar { max-width: calc(100vw - 48px); } }
body .krew-employee-stats .card-body { gap: 14px!important; }
body .krew-employee-stats .fw-bold { font-variant-numeric: tabular-nums; }
body .krew-view-action { width: auto; padding: 0 10px; gap: 6px; font-size: 12px; }
body .krew-profile-heading .col-7 { flex: 1; min-width: 150px; width: auto; }
body #vacationPicker .flatpickr-calendar { box-shadow: none; margin: 0; max-width: 100%; }
body #vacationPicker :is(.flatpickr-innerContainer,.flatpickr-rContainer,.flatpickr-days,.dayContainer) { width: 100%; min-width: 0; max-width: 100%; }
body #vacationPicker .flatpickr-day { flex-basis: 14.2857%; max-width: 14.2857%; }
body #vacationPicker .flatpickr-months { padding: 4px 0; }
body #vacationPicker .flatpickr-months .flatpickr-next-month { right: 0; }
body #calculationResult .row { row-gap: 12px; }
body #calculationResult h6 { font-size: 12px; }
body.krew-auth .radial-gradient { background: var(--ui-canvas); }
body.krew-auth .auth-card { width: 100%; max-width: 450px; padding: 24px; }
body.krew-auth .card { box-shadow: 0 12px 45px #20263108; }
body.krew-auth .card-body { padding: 36px; }
body.krew-auth .logo-img img { width: 135px; }
body.krew-auth .position-relative.text-center.my-4 { margin: 0 0 28px!important; }
body.krew-auth .position-relative.text-center.my-4 p { font-size: 20px!important; background: transparent!important; color: var(--ui-ink)!important; font-weight: 700; }
body.krew-auth .position-relative.text-center.my-4 > span { display: none; }
html[data-layout="vertical"] body .body-wrapper { padding-top: 0; }
html[data-layout="vertical"] body .body-wrapper > .container-fluid { padding: 96px 32px 36px; max-width: 1600px; }
html[data-layout="vertical"] body .left-sidebar .scroll-sidebar { padding: 0 14px; }
html[data-layout="vertical"] body .left-sidebar .nav-small-cap { margin-top: 4px; padding-top: 18px; }
body .card-header.bg-light { background: var(--ui-surface)!important; }
body .flatpickr-calendar :is(.dayContainer,.flatpickr-days,.flatpickr-innerContainer) { background: var(--ui-surface); }
body .krew-vacation-balance .display-3 { color: var(--ui-ink)!important; font-size: 48px; }
@media (max-width: 575px) { html[data-layout="vertical"] body .body-wrapper > .container-fluid { padding: 84px 16px 24px; } }
body .card canvas { max-width: 100%; }
body .topbar .logo-img img { width: 110px; height: auto; }
@media (min-width: 1100px) { body[data-sidebartype="full"] .brand-logo .sidebartoggler { display: none!important; } }
@media (max-width: 575px) {
  .krew-week-nav { display: grid!important; grid-template-columns: 1fr 1fr; }
  .krew-week-nav > .text-center { grid-column: 1 / -1; order: -1; }
  .krew-week-nav .k-btn { padding: 8px; font-size: 11px; }
  body .form-control,body .form-select { font-size: 16px; }
  body #timesheetTable .hours-input { font-size: 16px; }
}

/* Full workspaces: a consistent page hierarchy with task-specific layouts. */
body .krew-page-header { padding: 0 0 24px; border-bottom: 1px solid var(--ui-line)!important; margin-bottom: 28px; }
body .krew-page-title { font-size: clamp(26px, 2.6vw, 34px); font-weight: 650; line-height: 1.18; letter-spacing: -.045em; margin: 0 0 10px; }
body .krew-page-description { color: var(--ui-muted); font-size: 14px; max-width: 700px; margin: 0 0 4px; line-height: 1.65; }
body .krew-page-header .breadcrumb { margin-top: 12px!important; }
body .krew-page-header .krew-eyebrow { color: var(--ui-brand-text); letter-spacing: .13em; }
body .krew-page-header .krew-page-title + .krew-page-description + nav { display: none; }
body .card { border-radius: 14px; }
body .card-header { padding: 20px 24px; }
body .card-header :is(h5,h6) { font-weight: 650; }
body :is(.table,.k-table) > thead > tr > th { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; background: var(--ui-surface)!important; padding-top: 18px; padding-bottom: 18px; }
body :is(.table,.k-table) > tbody > tr > td { padding-top: 18px; padding-bottom: 18px; }
body .k-table td code,body #computersTable code { color: var(--ui-muted); font-size: 11px; }
body .table-responsive { scrollbar-width: thin; scrollbar-color: var(--ui-line) transparent; }
body .krew-section-label { margin: 0 0 16px; color: var(--ui-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
/* A single strip lets numbers read as context instead of four competing cards. */
body .krew-metrics { --bs-gutter-x: 0; --bs-gutter-y: 0; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 14px; padding: 24px 0; margin-left: 0; margin-right: 0; }
body .krew-metrics > div { flex: 1; min-width: 0; border-right: 1px solid var(--ui-line); }
body .krew-metrics > div:last-child { border-right: 0; }
body .krew-metrics .card { border: 0!important; border-radius: 0!important; background: transparent; margin: 0; box-shadow: none!important; }
body .krew-metrics .card-body { padding: 0 24px!important; flex-direction: row-reverse; justify-content: space-between; }
body .krew-metrics .card-body > .rounded { width: 34px!important; height: 34px!important; background: var(--ui-raised)!important; }
body .krew-metrics .fw-bold { font-size: 32px!important; letter-spacing: -.05em; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
body .krew-metrics .card-body > div:last-child > div:last-child { font-size: 12px!important; font-weight: 500!important; }
.krew-home-grid--clear { grid-template-columns: 1fr; }
.krew-home-grid--clear > aside .card-body { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 28px; align-items: center; }
.krew-home-grid--clear > aside .krew-task-head { grid-column: 1 / -1; }
.krew-home-grid--clear .krew-balance-number { grid-row: 2 / 4; margin: 10px 0; }
.krew-home-grid--clear .krew-balance-meta { grid-column: 2; margin: 0; border: 0; padding: 0; justify-content: start; gap: 24px; }
.krew-home-grid--clear aside .k-btn { grid-column: 3; grid-row: 2 / 4; }
/* Calendar: uninterrupted calendar surface and compact filters above it. */
.krew-calendar-workspace { display: flex; flex-direction: column; }
.krew-calendar-controls .card { margin-bottom: 16px; }
.krew-calendar-controls .card-body { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 18px 24px; }
.krew-calendar-controls h5 { font-size: 12px; margin: 0!important; }
.krew-calendar-controls h5 iconify-icon { display: none; }
.krew-calendar-toggles { display: flex; flex: 1; gap: 12px 24px; flex-wrap: wrap; }
.krew-calendar-toggles .form-check { margin: 0!important; display: flex; align-items: center; gap: 10px; font-size: 12px; padding-left: 0; }
.krew-calendar-toggles .form-check-input { margin: 0; flex-shrink: 0; }
.krew-calendar-toggles .krew-legend-swatch { display: none; }
.krew-calendar-canvas { min-width: 0; }
body .fc .fc-toolbar { margin-bottom: 24px; }
body .fc .fc-toolbar-title { font-size: 25px; font-weight: 600; letter-spacing: -.035em; }
body .fc .fc-col-header-cell-cushion { padding: 14px 4px; font-weight: 500; font-size: 12px; color: var(--ui-muted); }
body .fc .fc-daygrid-day-number { padding: 10px 12px; font-size: 12px; }
body .fc .fc-daygrid-event { padding: 3px 5px; border-radius: 5px; font-size: 11px; }
/* TI: catalog navigation beside the actual assignments. */
.krew-license-workspace { display: grid; grid-template-columns: 235px minmax(0,1fr); gap: 24px; align-items: start; }
.krew-license-catalog { min-width: 0; }
.krew-license-items { display: grid; gap: 12px; }
.krew-license-item .card { margin: 0; }
.krew-license-item .card-body { padding: 16px!important; }
.krew-license-item .card-body > .mt-3 { margin-top: 18px!important; }
.krew-license-item .btn { font-size: 13px; }
.krew-license-assignments { min-width: 0; }
.krew-license-assignments > .card-header { align-items: stretch!important; }
.krew-license-assignments > .card-header > .d-flex { width: 100%; flex-wrap: nowrap!important; }
.krew-license-assignments #licenseFilter { flex: 0 1 220px; }
.krew-license-assignments #assignmentSearch { flex: 1; min-width: 120px; }
.krew-license-assignments td:first-child { min-width: 190px; }
body .krew-inventory-workspace { border: 1px solid var(--ui-line); border-radius: 14px; overflow: hidden; background: var(--ui-surface); }
body .krew-inventory-workspace > .card { border: 0; border-radius: 0!important; margin: 0; }
body .krew-inventory-workspace .krew-inventory-filters { border-bottom: 1px solid var(--ui-line); background: var(--ui-raised); }
body .krew-inventory-filters .card-body { padding: 18px 24px; }
body .krew-inventory-filters .form-label { font-size: 11px; }
body .krew-inventory-workspace .dt-toolbar { padding: 18px 24px; }
body .krew-inventory-workspace .dt-search input { width: 260px; max-width: 100%; background: var(--ui-raised); }
body .krew-inventory-workspace .dt-footer { padding: 18px 24px; font-size: 12px; }
/* Personal records become readable summaries with a distinct amount / progress / action. */
.krew-loan-ledger { display: grid; gap: 16px; }
.krew-loan-entry .card { margin: 0; border-color: var(--ui-line)!important; }
.krew-loan-summary { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px 32px; }
.krew-loan-summary > :first-child { grid-column: 1 / -1; padding-bottom: 18px; border-bottom: 1px solid var(--ui-line); }
.krew-loan-summary > :last-child { grid-column: 1 / -1; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.krew-loan-summary .krew-loan-amounts h6 { font-size: 22px; color: var(--ui-ink)!important; letter-spacing: -.04em; }
.krew-loan-summary .row { --bs-gutter-x: 16px; }
.krew-loan-summary .progress { height: 7px; margin-top: 12px; border-radius: 4px; }
.krew-poll-list { display: grid; gap: 16px; }
.krew-poll-entry .card { margin: 0; }
.krew-poll-summary { display: grid; grid-template-columns: minmax(0,1fr) 260px; column-gap: 36px; }
.krew-poll-summary > :first-child { grid-column: 1 / -1; padding-bottom: 16px; border-bottom: 1px solid var(--ui-line); gap: 16px; }
.krew-poll-summary > p { grid-column: 1; font-size: 14px; max-width: 760px; }
.krew-poll-summary > .alert { grid-column: 2; grid-row: 2 / 4; align-self: start; padding: 14px!important; }
.krew-poll-summary > :last-child { grid-column: 1 / -1; }
/* Shared hub pages are task directories, with the operation before configuration. */
body :is([data-view="/vacations"],[data-view="/incidents"]) > .row { --bs-gutter-x: 16px; --bs-gutter-y: 16px; margin-bottom: 32px; }
body :is([data-view="/vacations"],[data-view="/incidents"]) > .row > div { width: 50%; }
body :is([data-view="/vacations"],[data-view="/incidents"]) .card-hover { border: 1px solid var(--ui-line)!important; border-radius: 12px; background: var(--ui-surface); transition: border-color .15s; }
body :is([data-view="/vacations"],[data-view="/incidents"]) .card-hover:hover { border-color: var(--ui-brand)!important; transform: none; }
body :is([data-view="/vacations"],[data-view="/incidents"]) .card-hover .card-body::after { content: '→'; margin-left: auto; color: var(--ui-muted); font-size: 20px; }
body :is([data-view="/vacations"],[data-view="/incidents"]) .krew-icon-tile { width: 42px; height: 42px; border-radius: 10px!important; }
body .section-label { color: var(--ui-muted); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; margin: 0 0 14px; }
/* Form pages get clear sections and persistent actions without replacing controls. */
body .krew-form-page > .card:not(.krew-page-header) { overflow: visible; }
body .krew-form-page :is(.card-header,.card-footer) { border-radius: 0; }
body .krew-form-page .card-header { border-left: 3px solid var(--ui-brand); background: var(--ui-raised)!important; }
body .krew-form-page .card-body > form > .row { row-gap: 8px; }
body .krew-form-page .form-label { font-size: 12px; }
body .krew-form-page .krew-form-actions { position: sticky; bottom: 0; z-index: 5; padding: 18px 24px; border-top: 1px solid var(--ui-line); background: var(--ui-surface); box-shadow: 0 -8px 20px #00000006; }
@media (max-width: 1199px) {
  .krew-license-workspace { grid-template-columns: 190px minmax(0,1fr); gap: 16px; }
  .krew-loan-summary { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  body .krew-page-header { padding-bottom: 20px; }
  body .krew-metrics { padding: 0; flex-wrap: wrap; }
  body .krew-metrics > div { flex: 0 0 50%; padding: 18px 0; border-bottom: 1px solid var(--ui-line); }
  body .krew-metrics > div:nth-child(even) { border-right: 0; }
  body .krew-metrics > div:nth-last-child(-n+2) { border-bottom: 0; }
  body .krew-metrics .card-body { padding: 0 16px!important; }
  body .krew-metrics .fw-bold { font-size: 26px!important; }
  .krew-license-workspace { grid-template-columns: 1fr; }
  .krew-license-items { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .krew-license-item { flex: 0 0 210px; }
  .krew-license-catalog > .k-btn { width: auto!important; }
  .krew-license-assignments > .card-header > .d-flex { flex-wrap: wrap!important; }
  .krew-license-assignments #licenseFilter { flex: 1 1 100%; }
  .krew-loan-summary,.krew-poll-summary { display: block; }
  .krew-calendar-controls .card-body { gap: 16px; }
  .krew-calendar-toggles { flex-basis: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .krew-calendar-canvas .card-body { padding: 12px; }
  .krew-home-grid--clear > aside .card-body { grid-template-columns: auto 1fr; gap: 8px 18px; }
  .krew-home-grid--clear aside .k-btn { grid-column: 1 / -1; grid-row: auto; margin-top: 18px; }
  .krew-home-grid--clear .krew-balance-meta { gap: 14px; }
  body :is([data-view="/vacations"],[data-view="/incidents"]) > .row > div { width: 100%; }
  body .krew-inventory-workspace .dt-search input { width: 100%; }
}
/* Vacation account: the available balance leads, with planning alongside. */
.krew-vacation-overview { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(270px, 1fr); gap: 24px; margin-bottom: 28px; }
.krew-vacation-overview .card { margin: 0; }
body .krew-vacation-account { background: linear-gradient(120deg, var(--ui-soft), var(--ui-surface) 85%); }
.krew-vacation-account .card-body { padding: 32px; }
.krew-vacation-available { display: flex; align-items: baseline; gap: 14px; margin: 18px 0 28px; }
.krew-vacation-available > strong { font-size: clamp(56px, 6vw, 80px); font-weight: 600; letter-spacing: -.07em; line-height: 1; }
.krew-vacation-available > span { font-size: 17px; color: var(--ui-muted); }
.krew-vacation-available > svg { margin-left: auto; width: 44px; height: 44px; color: var(--ui-brand-text); stroke-width: 1; }
.krew-vacation-breakdown { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding: 24px 0; border-block: 1px solid var(--ui-line); }
.krew-vacation-breakdown span { display: block; font-size: 11px; color: var(--ui-muted); margin-bottom: 8px; }
.krew-vacation-breakdown strong { font-size: 25px; font-weight: 600; }
.krew-vacation-period { display: flex; flex-direction: column; gap: 6px; margin-top: 24px; font-size: 12px; }
.krew-vacation-period span { color: var(--ui-muted); }
.krew-vacation-plan h2 { font-size: 20px; margin-bottom: 12px; }
.krew-vacation-plan p { font-size: 13px; }
.krew-detail-list { margin: 24px 0 0; font-size: 12px; }
.krew-detail-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ui-line); }
.krew-detail-list dt { font-weight: 400; color: var(--ui-muted); }
.krew-detail-list dd { margin: 0; text-align: right; font-weight: 500; }
/* Office: availability and booking first, agreements remain visible beside them. */
.krew-office-workspace { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; align-items: start; }
.krew-office-days { display: grid; gap: 20px; }
.krew-office-day > .card { margin: 0; }
.krew-office-day h5 { font-size: 22px; }
.krew-office-capacity { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px 0; margin-bottom: 16px; border-bottom: 1px solid var(--ui-line); }
.krew-office-capacity span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ui-muted); }
.krew-office-capacity strong { font-size: 14px; color: var(--ui-ink); }
.krew-office-capacity meter { display: block; width: 100%; height: 10px; margin: 9px 0; }
.krew-office-capacity meter::-webkit-meter-bar { background: var(--ui-raised); border: 0; }
.krew-office-capacity meter::-webkit-meter-optimum-value { background: var(--ui-brand); }
.krew-office-capacity small { color: var(--ui-muted); font-size: 10px; }
.krew-office-day form[action="/desks/reserve"] { display: flex; flex-direction: column; gap: 16px; padding-bottom: 20px; }
.krew-office-day form[action="/desks/reserve"] > .d-flex { flex-wrap: wrap; }
.krew-office-day form[action="/desks/reserve"] select { flex: 1; }
body .krew-office-guide { background: var(--ui-raised); }
body .krew-office-guide .card-body { padding: 24px!important; }
.krew-office-guide ul { line-height: 1.8; color: var(--ui-muted); }
.krew-office-guide li { padding-bottom: 8px; }
/* All record lists use search-first toolbars, separate from paging controls. */
body [data-ktable-wrap] > .d-flex:has([data-ktable-search]) { justify-content: flex-start!important; padding: 22px 24px!important; }
body [data-ktable-wrap] > .d-flex > .position-relative:has([data-ktable-search]) { order: -1; flex: 1; max-width: 440px; }
body [data-ktable-wrap] [data-ktable-search] { width: 100%!important; min-height: 42px; background: var(--ui-raised); }
body [data-ktable-wrap] > .d-flex:has([data-ktable-search]) > .d-flex:has([data-ktable-size]) { margin-left: auto; }
body [data-ktable-wrap] [data-ktable-info] { font-size: 11px!important; }
body [data-ktable-pagination] button { border-radius: 6px!important; }
/* The timesheet is a working grid, not another generic report table. */
body [data-view="/timesheets"] > .card:not(.krew-page-header) { overflow: hidden; }
body [data-view="/timesheets"] .krew-week-nav { padding: 8px 0; }
body [data-view="/timesheets"] .krew-week-nav .fw-semibold { font-size: 21px; font-weight: 650!important; letter-spacing: -.03em; }
body [data-view="/timesheets"] #timesheetTable { min-width: 1020px!important; }
body #timesheetTable thead th { min-width: 65px!important; padding: 18px 8px; text-transform: none; }
body #timesheetTable thead th:first-child { min-width: 190px!important; }
body #timesheetTable thead th:nth-child(2) { min-width: 220px!important; }
body #timesheetTable tbody td { padding: 16px 8px; }
body #timesheetTable .hours-input { border-color: transparent; background: var(--ui-raised); border-radius: 5px; }
body #timesheetTable .hours-input:focus { border-color: var(--ui-brand); }
body #timesheetTable tfoot { background: var(--ui-soft); color: var(--ui-brand-text); font-size: 12px; }
body #timesheetTable tfoot :is(th,td) { padding: 18px 8px; }
@media (max-width: 991px) {
  .krew-vacation-overview,.krew-office-workspace { grid-template-columns: 1fr; }
  body [data-view="/timesheets"] #timesheetTable { min-width: 0!important; }
}
@media (max-width: 575px) {
  .krew-vacation-account .card-body { padding: 22px; }
  .krew-vacation-breakdown { gap: 10px; }
  .krew-vacation-breakdown span { min-height: 32px; }
  .krew-office-capacity { gap: 16px; }
  .krew-office-capacity span { flex-direction: column; align-items: start; }
  body [data-ktable-wrap] > .d-flex > .position-relative:has([data-ktable-search]) { flex-basis: 100%; max-width: none; }
}
/* Administrative workspaces: filter / result and catalog / history pairs. */
.krew-filter-workspace { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 24px; align-items: start; }
.krew-filter-rail .card-body { padding: 20px!important; }
.krew-filter-rail .row { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.krew-filter-rail .row > div { width: 100%; padding: 0; margin: 0; }
.krew-filter-rail .form-label { font-size: 11px!important; }
.krew-filter-results { min-width: 0; }
.krew-filter-results .dt-toolbar { flex-wrap: wrap; gap: 12px; padding: 20px; }
.krew-filter-results .dt-search input { max-width: 100%; }
.krew-awards-workspace { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 24px; align-items: start; }
.krew-award-grants { min-width: 0; }
.krew-awards-workspace .badge-card { margin: 0; }
.krew-awards-workspace .badge-card .card-body { display: grid; grid-template-columns: 48px minmax(0,1fr); column-gap: 14px; text-align: left; }
.krew-awards-workspace .badge-card .card-body > :first-child { grid-row: 1 / 3; align-self: center; }
.krew-awards-workspace .badge-card .card-body > .fw-bold { margin-top: 0!important; }
.krew-compliance-create { order: 2; }
.krew-compliance-active { order: 1; }
.krew-compliance-create > .card { background: var(--ui-raised); }
body .krew-cycle-toolbar { border: 0; border-radius: 0!important; background: transparent; }
body .krew-cycle-toolbar .card-body { padding: 0!important; }
body .krew-cycle-toolbar .form-select { min-width: 220px; }
body .cc-header .krew-icon-tile { display: none!important; }
body .cc-inputs { border-radius: 14px; }
body .cc-result { border-radius: 14px; }
body [data-view="/utilities"] > .row { justify-content: flex-start!important; }
body [data-view="/utilities"] > .row > div { width: 100%; max-width: 850px; }
body [data-view="/utilities"] form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
body [data-view="/utilities"] form > .alert, body [data-view="/utilities"] form > :last-child { grid-column: 1 / -1; }
@media (max-width: 1199px) {
  .krew-filter-workspace { grid-template-columns: 185px minmax(0,1fr); gap: 16px; }
}
@media (max-width: 767px) {
  .krew-filter-workspace,.krew-awards-workspace { grid-template-columns: 1fr; }
  .krew-filter-rail .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .krew-filter-rail .row > div:first-child { grid-column: 1 / -1; }
  .krew-awards-workspace > aside > .row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .krew-awards-workspace > aside > .row > div { width: 240px; flex-shrink: 0; }
  body [data-view="/utilities"] form { display: block; }
  body .krew-cycle-toolbar .form-select { min-width: 0; max-width: 100%; }
}
body .fc .fc-event-main { color: var(--ui-ink)!important; }
body .k-table.dataTable > thead > tr > th { background: var(--ui-surface)!important; color: var(--ui-muted)!important; }
@media (min-width: 768px) and (max-width: 1399px) {
  .krew-filter-workspace { grid-template-columns: 1fr; }
  .krew-filter-rail .row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
}
body .card > .card-body.border-bottom { flex: 0 0 auto; }
.krew-create-tools { margin-bottom: 24px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); }
.krew-create-tools summary { padding: 18px 24px; cursor: pointer; color: var(--ui-brand-text); font-size: 13px; font-weight: 600; }
.krew-create-tools > .row { margin: 0; padding: 0 12px 16px; }
.krew-create-tools .card { border: 0; margin: 0; }
.krew-evaluation-metrics { --bs-gutter-x: 0; margin: 0 0 24px; padding: 24px 0; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); }
.krew-evaluation-metrics > div { border-right: 1px solid var(--ui-line); }
.krew-evaluation-metrics > div:last-child { border: 0; }
body .krew-evaluation-metrics .card { border: 0; margin: 0; }
body .krew-evaluation-metrics .card-body { padding: 0 24px; }
.krew-evaluation-metrics .card-body > .d-flex { flex-direction: row-reverse; justify-content: space-between; gap: 12px; }
.krew-evaluation-metrics h6 { font-size: 11px; color: var(--ui-muted); }
.krew-evaluation-metrics h4 { font-size: 32px; margin: 8px 0!important; }
.krew-evaluation-metrics .round-48 { width: 32px; height: 32px; }
@media (max-width: 767px) {
  .krew-evaluation-metrics { gap: 24px 0; }
  .krew-evaluation-metrics > div { width: 50%; }
  .krew-evaluation-metrics > div:nth-child(even) { border-right: 0; }
  body .krew-evaluation-metrics .card-body { padding: 0 16px; }
  body .krew-inventory-workspace .dt-toolbar, body .krew-filter-results .dt-toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
  body .dt-toolbar .dt-search,body .dt-toolbar .dataTables_filter { width: 100%; text-align: left!important; }
  body .dt-toolbar .dataTables_filter label { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  body .dt-toolbar .dataTables_filter input { width: 100%!important; margin: 0!important; }
}
body .card-hover .text-dark { color: var(--ui-ink)!important; }
/* Old illustration headers also host back buttons: let both columns fit normally. */
body .krew-page-header .row:has(> .col-3 a, > .col-3 button) { gap: 16px 0; }
body .krew-page-header .row:has(> .col-3 a, > .col-3 button) > .col-9 { flex: 1; width: auto; min-width: 210px; }
body .krew-page-header .row:has(> .col-3 a, > .col-3 button) > .col-3 { width: auto; }
body .krew-page-header .mb-n5 { margin-bottom: 0!important; }
body .krew-form-page > .row.justify-content-center { justify-content: flex-start!important; }
body .krew-form-page > .row.justify-content-center > .col-md-8 { width: 100%; max-width: 1040px; }