/*
 * Diffsome owner dashboard skin (2026-10-21).
 * A light grey page with a near-white sidebar (the /app2 pairing), white surfaces, ink text, one slate-blue
 * accent, Pretendard. The sidebar is the one coloured surface; everything else stays quiet.
 * Plain CSS over Filament's stock stylesheet (which lives in @layer, so these unlayered rules
 * win without !important). Remove the <link> in TenantPanelProvider to undo.
 */
:root {
  --ds-bg: #f6f7f9;
  --ds-surface: #fff;
  --ds-raise: #fafbfc;
  --ds-fill: #eef2f6;
  --ds-fill2: #e3e9f0;
  --ds-ink: #18202b;
  --ds-text: #333c48;
  --ds-soft: #687384;
  --ds-faint: #98a2b0;
  --ds-hair: #e3e8ee;
  --ds-accent: #33506f;
  --ds-accent-ink: #263d56;
  --ds-wash: #e8eef5;
  --ds-side: #fafbfc;
  --ds-side-line: #e3e7eb;
  --ds-side-soft: #6b737c;
  --ds-dot: #e8453c;
  --ds-link: #33506f;
  --ds-r: 12px;
  --ds-r-ctl: 8px;
}

/* ── ground and type ── */
.fi-body { background: var(--ds-bg); color: var(--ds-text); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
.fi-main-ctn, .fi-main { background: transparent; }
.fi-header-heading { color: var(--ds-ink); font-size: 26px; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.fi-header-subheading { color: var(--ds-soft); }
.fi-breadcrumbs { font-size: 13px; }
.fi-breadcrumbs-item-label { color: var(--ds-soft); }
:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* ── top bar: white, one hairline ── */
.fi-topbar, .fi-topbar > nav { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.6) blur(14px); box-shadow: none; border-bottom: 1px solid var(--ds-hair); }

/* ── sidebar: near white, the active item a soft blue-grey wash ── */
.fi-sidebar, .fi-sidebar-header, .fi-sidebar-nav { background: var(--ds-side); }
.fi-sidebar { border-right: 1px solid var(--ds-side-line); }
.fi-sidebar-header { box-shadow: none; border-bottom: 1px solid var(--ds-side-line); }
.fi-sidebar-nav { padding-block: 16px; row-gap: 16px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.fi-sidebar-nav:hover { scrollbar-color: rgba(24, 32, 43, .18) transparent; }
.fi-sidebar-nav-groups { row-gap: 16px; }
.fi-sidebar-group, .fi-sidebar-group-items { row-gap: 2px; }
.fi-sidebar-group-btn { padding-block: 4px; }
.fi-sidebar-group-label { color: var(--ds-side-soft); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.fi-sidebar-group-btn .fi-icon { color: var(--ds-side-soft); }
.fi-sidebar-item-btn { border-radius: var(--ds-r-ctl); padding-block: 6px; }
.fi-sidebar-item-label { color: var(--ds-ink); font-size: 14px; font-weight: 500; }
.fi-sidebar-item-btn > .fi-icon { width: 18px; height: 18px; color: var(--ds-side-soft); }
.fi-sidebar-item-btn:hover { background: #f0f3f6; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn { background: #e5eaf0; box-shadow: none; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label { color: var(--ds-ink); font-weight: 650; }
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon { color: var(--ds-accent); }
.fi-sidebar .fi-badge { box-shadow: none; }
.fi-sidebar .fi-tenant-menu-trigger:hover { background: #f0f3f6; }

/* ── surfaces: one radius for panels, hairline instead of shadow ── */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-widget > .fi-section {
  border-radius: var(--ds-r); box-shadow: none; border: 1px solid var(--ds-hair); --tw-ring-shadow: 0 0 #0000; background: var(--ds-surface);
}
.fi-section-header-heading { color: var(--ds-ink); font-weight: 650; }
.fi-wi-stats-overview-stat-value { color: var(--ds-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ── tables: small quiet headers, tighter rows, numbers line up ── */
.fi-ta-header-cell { color: var(--ds-soft); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--ds-raise); }
.fi-ta-cell { font-size: 14px; font-variant-numeric: tabular-nums; }
.fi-ta-text-item, .fi-ta-cell .fi-ta-text { padding-block: 10px; }
.fi-ta-row { border-color: var(--ds-hair); }
.fi-ta-row:hover { background: #f8fafc; }
.fi-ta-record-actions .fi-link { font-size: 13px; }
.fi-pagination { border-top: 1px solid var(--ds-hair); }
.fi-ta-filter-indicators { background: var(--ds-surface); border-color: var(--ds-hair); font-size: 13px; }
.fi-ta-filter-indicators .fi-badge { background: var(--ds-wash); color: var(--ds-accent-ink); box-shadow: none; }

/* ── controls ── */
.fi-input-wrp { border-radius: var(--ds-r-ctl); box-shadow: 0 0 0 1px var(--ds-hair); }
.fi-input-wrp:focus-within { box-shadow: 0 0 0 2px var(--ds-accent); }
.fi-badge { border-radius: 999px; font-weight: 600; }
.fi-dropdown-panel, .fi-modal-window { border-radius: var(--ds-r); }
.fi-tabs { border-radius: var(--ds-r-ctl); }
.fi-link.fi-color-primary { color: var(--ds-accent); }

/* ══ Lists (SearchPanel): search, filter toggle and Excel on one row; the open filter panel below ══ */
.ds-search-list .fi-ta-header-ctn {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 8px;
  padding: 10px 20px; border-bottom: 1px solid var(--ds-hair);
}
.ds-search-list .fi-ta-header-ctn > * { border: 0; }
.ds-search-list .fi-ta-filters-above-content-ctn { display: contents; }
.ds-search-list .fi-ta-header-toolbar { grid-column: 1; grid-row: 1; padding: 0; justify-content: flex-start; }
.ds-search-list .fi-ta-header-toolbar > * { margin-inline: 0; }
.ds-search-list .fi-ta-header-toolbar > .fi-ta-actions:not(:has(*)) { display: none; }
.ds-search-list .fi-ta-header-toolbar .fi-ta-search-field { width: min(340px, 100%); }
.ds-search-list .fi-ta-filters-trigger-action-ctn { grid-column: 2; grid-row: 1; display: flex; align-items: center; margin: 0; padding: 0; }
.ds-search-list .fi-ta-header { grid-column: 3; grid-row: 1; padding: 0; }
.ds-search-list .fi-ta-header-ctn .fi-btn { height: 36px; margin: 0; font-size: 13px; }
.ds-search-list .fi-ta-filters-trigger-action-ctn .fi-badge { display: none; }
/* a table with its own heading keeps it on a row of its own */
.ds-search-list .fi-ta-header-ctn:has(.fi-ta-header-heading) .fi-ta-header { grid-column: 1 / -1; grid-row: 1; padding: 6px 0 10px; }
.ds-search-list .fi-ta-header-ctn:has(.fi-ta-header-heading) .fi-ta-header-toolbar,
.ds-search-list .fi-ta-header-ctn:has(.fi-ta-header-heading) .fi-ta-filters-trigger-action-ctn { grid-row: 2; }
.ds-search-list .fi-ta-header-ctn:has(.fi-ta-header-heading) .fi-ta-filters { grid-row: 3; }

/* the panel: white, small labels, Search and Reset on one line at the end */
.ds-search-list .fi-ta-filters {
  grid-column: 1 / -1; grid-row: 2; position: relative;
  margin: 10px -20px -10px; padding: 16px 20px 18px; border-top: 1px solid var(--ds-hair);
}
.ds-search-list .fi-ta-filters .fi-grid { row-gap: 16px; }
.ds-search-list .fi-ta-filters-header { position: absolute; right: 20px; bottom: 18px; height: 36px; display: flex; align-items: center; }
.ds-search-list .fi-ta-filters-heading { display: none; }
.ds-search-list .fi-ta-filters-header .fi-link { color: var(--ds-soft); font-size: 13px; font-weight: 500; }
.ds-search-list .fi-ta-filters-header .fi-link:hover { color: var(--ds-ink); }
.ds-search-list .fi-ta-filters .fi-fo-field-label-content { font-size: 12.5px; font-weight: 600; color: var(--ds-soft); }
.ds-search-list .fi-ta-filters-actions-ctn { margin-top: 16px; }
.ds-search-list .fi-ta-filters-actions-ctn .fi-btn { height: 36px; min-width: 88px; }

/* quick date picks as one segmented control */
.ds-search-list .fi-fo-toggle-buttons.fi-btn-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--ds-r-ctl); background: var(--ds-fill); box-shadow: none; }
.ds-search-list .fi-fo-toggle-buttons .fi-btn {
  --bg: transparent; --hover-bg: var(--ds-fill2); --text: var(--ds-text); --hover-text: var(--ds-ink);
  height: 30px; padding-inline: 12px; border-radius: 6px; box-shadow: none; white-space: nowrap;
  font-size: 13px; font-weight: 500; background: transparent; color: var(--ds-text);
}
.ds-search-list .fi-fo-toggle-buttons .fi-btn:hover { background: var(--ds-fill2); }
.ds-search-list .fi-fo-toggle-buttons-input:checked + .fi-btn {
  background: var(--ds-surface); color: var(--ds-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(24, 32, 43, .08), 0 0 0 1px var(--ds-hair);
}

@media (max-width: 768px) {
  .ds-search-list .fi-ta-header-ctn { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px; row-gap: 10px; }
  .ds-search-list .fi-ta-header-toolbar { grid-column: 1 / -1; grid-row: 2; }
  .ds-search-list .fi-ta-header-toolbar .fi-ta-search-field { width: 100%; }
  .ds-search-list .fi-ta-filters-trigger-action-ctn { grid-column: 1; grid-row: 1; }
  .ds-search-list .fi-ta-header { grid-column: 2; }
  .ds-search-list .fi-ta-filters { grid-row: 3; margin: 0 -16px -10px; padding: 14px 16px 16px; }
  .ds-search-list .fi-ta-filters-header { right: 16px; bottom: 16px; }
}

/* ── AI chat button in the top bar (rendered by TenantPanelProvider) ── */
.ds-chat-btn { border: 0; cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 12px; border-radius: 999px; background: var(--ds-ink); color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.ds-chat-btn i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-dot); box-shadow: 0 0 0 3px rgba(232, 69, 60, .25); }
.ds-chat-btn:hover, .ds-chat-btn[aria-expanded="true"] { background: #000; }

/* ══ The assistant: the AI app in a panel from the right (assistant-panel.blade.php) ══ */
.ds-assist {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 25; width: min(440px, 100vw);
  display: flex; flex-direction: column; background: var(--ds-surface);
  border-left: 1px solid var(--ds-hair); box-shadow: -16px 0 40px -24px rgba(24, 32, 43, .28);
  transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}
.ds-assist.ds-assist-on { transform: none; }
.ds-assist.ds-assist-instant { transition: none; }
.ds-assist-head { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 8px 0 18px; border-bottom: 1px solid var(--ds-hair); flex: none; }
.ds-assist-head h2 { flex: 1; display: flex; align-items: center; gap: 9px; margin: 0; color: var(--ds-ink); font-size: 15px; font-weight: 650; outline: none; }
.ds-assist-head h2 i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-dot); box-shadow: 0 0 0 3px rgba(232, 69, 60, .2); }
.ds-assist-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--ds-r-ctl); background: none; color: var(--ds-soft); cursor: pointer; }
.ds-assist-icon:hover { background: var(--ds-fill); color: var(--ds-ink); }
.ds-assist-icon svg { width: 18px; height: 18px; }
.ds-assist-body { flex: 1; min-height: 0; }
.ds-assist-body iframe { display: block; width: 100%; height: 100%; border: 0; }
/* wide screens: the page makes room instead of hiding under the panel */
@media (min-width: 1280px) {
  html.ds-assist-open .fi-main-ctn { margin-right: 440px; transition: margin-right .22s ease; }
}
@media (prefers-reduced-motion: reduce) { .ds-assist, html.ds-assist-open .fi-main-ctn { transition: none; } }

/* ══ Dashboard home: "ask the AI" + today's work ══ */
.ds-home { display: grid; gap: 18px; }
.ds-home-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds-home-head h2 { margin: 0; color: var(--ds-ink); font-size: clamp(22px, 2.4vw, 28px); font-weight: 650; letter-spacing: -.03em; text-wrap: balance; }
.ds-home-head span { color: var(--ds-soft); font-size: 13px; }

/* the one bold thing: the ask bar */
.ds-ask { display: flex; align-items: flex-end; gap: 10px; padding: 10px 10px 10px 18px; background: var(--ds-surface); border-radius: 20px; box-shadow: 0 0 0 1px var(--ds-hair), 0 10px 30px -12px rgba(0, 0, 0, .18); }
.ds-ask:focus-within { box-shadow: 0 0 0 2px var(--ds-ink), 0 10px 30px -12px rgba(0, 0, 0, .22); }
.ds-ask-dot { width: 9px; height: 9px; margin: 0 0 15px; border-radius: 50%; background: var(--ds-dot); flex: none; box-shadow: 0 0 0 4px rgba(232, 69, 60, .16); }
.ds-ask textarea { flex: 1; min-width: 0; border: 0; outline: 0; resize: none; background: none; padding: 9px 0; font: inherit; font-size: 16px; line-height: 1.5; color: var(--ds-ink); max-height: 160px; }
.ds-ask textarea::placeholder { color: var(--ds-faint); }
.ds-ask textarea:focus { box-shadow: none; }
.ds-ask button { width: 38px; height: 38px; border-radius: 50%; background: var(--ds-ink); color: #fff; display: grid; place-items: center; flex: none; border: 0; cursor: pointer; }
.ds-ask button:disabled { background: var(--ds-fill2); color: var(--ds-faint); cursor: default; }
.ds-ask button svg { width: 18px; height: 18px; }
.ds-ask-hint { margin: -8px 0 0 4px; color: var(--ds-faint); font-size: 12.5px; }

.ds-today { background: var(--ds-surface); border-radius: var(--ds-r); box-shadow: 0 0 0 1px var(--ds-hair); overflow: hidden; }
.ds-today-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ds-today-row + .ds-today-row { border-top: 1px solid var(--ds-hair); }
.ds-today-row div { flex: 1; min-width: 0; }
.ds-today-row b { display: block; color: var(--ds-ink); font-weight: 600; font-size: 15px; }
.ds-today-row small { display: block; color: var(--ds-soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-today-row button { flex: none; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--ds-fill); color: var(--ds-ink); font-size: 13px; font-weight: 600; border: 0; cursor: pointer; }
.ds-today-row button:hover { background: var(--ds-fill2); }
.ds-today-empty { padding: 18px 16px; color: var(--ds-soft); font-size: 14px; }

.ds-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--ds-surface); border-radius: var(--ds-r); box-shadow: 0 0 0 1px var(--ds-hair); overflow: hidden; }
/* each cell draws its right and bottom hairline; the outer ones are clipped, so any wrap reads right */
.ds-nums div { padding: 14px 16px; box-shadow: 1px 0 0 var(--ds-hair), 0 1px 0 var(--ds-hair); }
.ds-nums small { display: block; color: var(--ds-soft); font-size: 12.5px; }
.ds-nums b { display: block; margin-top: 2px; color: var(--ds-ink); font-size: 20px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .ds-today-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .fi-topbar, .fi-topbar > nav { backdrop-filter: none; } }