/* Tiger CRM on top of Tabler 1.6. Tabler's components and utilities first; this file holds the design tokens, the
   shell and the few shared components Tabler doesn't have. Page-specific rules live in css/pages/*.css. */

/* ---------------------------------------------------------------- type: IBM Plex Sans, self-hosted */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../lib/plexsans/files/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../lib/plexsans/files/ibm-plex-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../lib/plexsans/files/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../lib/plexsans/files/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../lib/plexsans/files/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }

/* ---------------------------------------------------------------- tokens */
/* One accent, tiger orange: where you are and what needs you (active nav, your counts, the primary action, focus).
   Links stay Tabler blue, so a page full of links doesn't turn orange. */
:root, [data-bs-theme] {
  --crm-tiger: #e8590c;
  --tblr-primary: #e8590c;
  --tblr-primary-rgb: 232, 89, 12;
  --tblr-link-color: light-dark(oklch(54.6% 0.1724 254.2deg), rgb(121, 170, 231));
  --tblr-link-color-rgb: 66, 132, 220;
  --tblr-link-hover-color: light-dark(oklch(48% 0.1724 254.2deg), rgb(150, 192, 240));
  --tblr-font-sans-serif: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tblr-sidebar-width: 15rem;
}
body { font-feature-settings: "ss01" 0; }
.table, .badge, kbd, .crm-num { font-variant-numeric: tabular-nums; }
/* Some icon glyphs sit on Arabic code points and would flip the text around them right-to-left. */
.ti { unicode-bidi: isolate; }
.crm-skip:focus { position: fixed; z-index: 2000; top: .5rem; left: .5rem; padding: .5rem 1rem; background: var(--tblr-bg-surface); }

/* ---------------------------------------------------------------- shell: sidebar */
.crm-brand { font-weight: 700; color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; }
.crm-brand-name { font-size: 1.05rem; letter-spacing: -.01em; }
.crm-brand-name span { color: var(--crm-tiger); }
.crm-logo { width: 2rem; height: 2rem; border-radius: .4rem; }
.crm-logo-lg { width: 3rem; height: 3rem; }
.crm-brand-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.crm-icon-unfold, [data-bs-sidebar=folded] .crm-icon-fold, [data-bs-sidebar=folded] .crm-brand-name { display: none; }
[data-bs-sidebar=folded] .crm-icon-unfold { display: inline-block; }

.crm-sidebar .crm-nav { padding: .25rem 0 1rem; }
.navbar-vertical.crm-sidebar[class*=navbar-expand] .navbar-nav { --tblr-sidebar-nav-padding-y: .28rem; }
.crm-nav-group-toggle {
  display: flex; align-items: center; gap: .4rem; width: 100%; border: 0; background: none; color: inherit;
  font-size: .75rem; font-weight: 600; opacity: .6; padding: .9rem 1rem .3rem; text-align: start;
}
.crm-nav-group-toggle:hover, .crm-nav-group-toggle:focus-visible { opacity: 1; }
.crm-nav-group-title { flex: 1; }
.crm-nav-chevron { transition: transform .15s; }
.crm-nav-group-toggle.collapsed .crm-nav-chevron { transform: rotate(-90deg); }
.crm-nav-group-toggle:not(.collapsed) .crm-nav-sum { display: none; }
.crm-sidebar .nav-item.active > .nav-link { box-shadow: inset 3px 0 0 var(--crm-tiger); }
.crm-sidebar .nav-item.active > .nav-link .nav-link-icon { color: var(--crm-tiger); }
.crm-counts { margin-inline-start: auto; display: inline-flex; gap: .25rem; }
.crm-sidebar .badge { font-size: .68rem; padding: .15em .45em; }
.crm-count-open { background: rgba(255, 255, 255, .08); color: inherit; }
.crm-count-mine { background: var(--crm-tiger); color: #fff; }
.crm-count-unread { background: var(--tblr-yellow); color: #1d1d1d; }
[data-bs-sidebar=folded] .crm-nav-group-toggle { justify-content: center; padding-inline: 0; }
[data-bs-sidebar=folded] .crm-nav-group-title, [data-bs-sidebar=folded] .crm-nav-chevron, [data-bs-sidebar=folded] .crm-counts { display: none; }
[data-bs-sidebar=folded] .crm-nav-group-toggle::before { content: ""; display: block; width: 1.5rem; border-top: 1px solid currentColor; opacity: .5; }
[data-bs-sidebar=folded] .crm-nav-group .collapse:not(.show) { display: block; }

/* ---------------------------------------------------------------- shell: top bar */
.crm-topbar { --tblr-navbar-height: 3.5rem; border-bottom: 1px solid var(--tblr-border-color); background: var(--tblr-bg-surface); z-index: 1020; }
.crm-topbar > .container-fluid { justify-content: flex-start; flex-wrap: nowrap; }
.crm-search { max-width: 44rem; margin-inline-end: auto; }
.crm-search-key kbd { font-size: .7rem; padding: .1rem .35rem; }
.crm-today { min-width: 9.5rem; line-height: 1.2; }
.crm-today .progress { margin-top: .2rem; }
.crm-search-results { max-height: 70vh; overflow-y: auto; }
.crm-search-results .dropdown-item { white-space: normal; }
.crm-avatar { background: var(--crm-tiger); color: #fff; font-weight: 600; font-size: .75rem; }
[data-bs-theme=dark] .crm-icon-light, [data-bs-theme=light] .crm-icon-dark { display: none; }
.page-header { margin-top: 1rem; margin-bottom: .25rem; }
.page-header .page-title { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.page-pretitle { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; }
.page-body { margin-top: 1rem; }

/* ---------------------------------------------------------------- shared components */
/* Every card title carries an icon: <h3 class="card-title"><i class="ti ti-x"></i>Title</h3> */
/* An icon before a label gets a gap; icon-only buttons (.btn-icon) don't. (Text nodes aren't children, so :only-child
   can't tell the two apart.) */
.card-title > .ti:first-child, .dropdown-header > .ti:first-child, .nav-link > .ti:first-child, .btn:not(.btn-icon) > .ti:first-child { margin-inline-end: .4rem; }
.btn-sm:not(.btn-icon) > .ti:first-child { margin-inline-end: .3rem; }
.card-title > .ti:first-child { color: var(--tblr-secondary); }

/* A coloured dot before a status (crm-dot crm-dot-{tabler colour}); always next to its text or icon. */
.crm-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tblr-secondary); vertical-align: middle; margin-inline-end: .35rem; }
.crm-dot-blue { background: var(--tblr-blue); } .crm-dot-azure { background: var(--tblr-azure); } .crm-dot-green { background: var(--tblr-green); }
.crm-dot-teal { background: var(--tblr-teal); } .crm-dot-cyan { background: var(--tblr-cyan); } .crm-dot-purple { background: var(--tblr-purple); }
.crm-dot-yellow { background: var(--tblr-yellow); } .crm-dot-orange { background: var(--tblr-orange); } .crm-dot-red { background: var(--tblr-red); }

/* Dense data tables: sticky header, one-line rows, inline selects that look like text until hovered. */
/* Column headings in sentence case, like every other label (Tabler's default is small caps-lock). */
.table thead th, .datagrid-title { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; }
/* Tabler pads every cell with a fixed .75rem, so the variable alone doesn't make rows denser. */
.table.crm-table > :not(caption) > * > * { padding-top: .4rem; padding-bottom: .4rem; }
.crm-table thead th { position: sticky; top: 3.5rem; z-index: 2; background: var(--tblr-bg-surface-tertiary); }
.card .table-responsive .crm-table thead th { top: 0; }
.crm-table td { vertical-align: middle; }
.form-select.crm-select-inline {
  --tblr-form-select-bg-img: none; border-color: transparent; background-color: transparent; padding: .15rem .5rem; min-height: 0;
  font-size: inherit; width: auto; max-width: 100%; border-radius: var(--tblr-border-radius-pill);
}
.form-select.crm-select-inline:hover, .form-select.crm-select-inline:focus { border-color: var(--tblr-border-color); background-color: var(--tblr-bg-surface); }

/* Stat cards (Views/Shared/_Kpi.cshtml + Html/Kpi.cs): icon avatar, one number, its label; a linked one can be "active". */
.crm-kpi .min-w-0 { min-width: 0; }
.crm-kpi-value { font-size: 1.35rem; font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.crm-kpi.card-link:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.crm-kpi-active { box-shadow: inset 0 -3px 0 var(--crm-tiger); }
@media (max-width: 575.98px) { .crm-kpi .avatar { display: none; } }

/* Empty states: say what is missing and what to do. */
.crm-empty { text-align: center; padding: 2.5rem 1rem; color: var(--tblr-secondary); }
.crm-empty > .ti { font-size: 2.25rem; display: block; margin-bottom: .5rem; opacity: .6; }

th.crm-sortable { cursor: pointer; user-select: none; }
th.crm-sortable[data-dir="asc"]::after { content: " ▲"; }
th.crm-sortable[data-dir="desc"]::after { content: " ▼"; }
.crm-badge { width: 44px; height: 44px; object-fit: contain; cursor: help; }
.crm-note-body img { max-width: 100%; height: auto; }
tr.crm-saved > * { background-color: rgba(47, 179, 68, .18) !important; transition: background-color .3s; }
.crm-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-right: .5rem; vertical-align: middle; border: 1px solid rgba(127,127,127,.4); }

/* Notes: each body sits in a sandboxed frame (the old content-to-iframe), white like the mail it often is. */
.crm-note-frame { display: block; height: 350px; border: 1px solid #a9a9a9; border-radius: 4px; background: #fff; resize: vertical; }
.crm-note-private { border-color: #ca0000; }

/* Task rows by status (the old success/warning row colours), readable in both themes. */
tr.crm-row-done > td:first-child { box-shadow: inset 4px 0 0 var(--tblr-success); }
tr.crm-row-done > td { color: var(--tblr-secondary); }
tr.crm-row-waiting > td:first-child { box-shadow: inset 4px 0 0 var(--tblr-warning); }

/* Task grids: a header being dragged over, and the clickable envelope. */
table.crm-task-grid th.crm-drag-over { box-shadow: inset 3px 0 0 var(--tblr-primary); }
table.crm-task-grid th[draggable="true"] { cursor: grab; }
.crm-envelope-toggle { cursor: pointer; }
.crm-popup-text { max-height: 240px; overflow: auto; }

/* Active projects: one tbody per order; ready-for-invoice orders are marked, a saved block flashes green. */
tbody.crm-project { border-top: 2px solid var(--tblr-border-color); }
tbody.crm-row-invoice > tr:first-child > td:first-child { box-shadow: inset 4px 0 0 var(--tblr-danger); }
tbody.crm-saved-block > tr > td { background-color: rgba(47, 179, 68, .12); transition: background-color .3s; }
.crm-statustext { min-height: 2.5rem; max-height: 300px; overflow: auto; cursor: text; }

/* Board: lanes side by side, scrolling sideways when there are many. */
.crm-board { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; padding-bottom: .5rem; }
.crm-board-lane { flex: 0 0 18rem; max-width: 18rem; }
.crm-board-items { min-height: 4rem; }
.crm-board-card[data-order-id] { cursor: grab; }
.crm-board-card.crm-deadline-soon { box-shadow: inset 4px 0 0 var(--tblr-danger); }
.crm-board-card.crm-paused { opacity: .6; }
.crm-board-task { border-style: dashed; }

/* My day: timer status (0 paused, 1 running, 2 added as note) and the old calendar colours. */
.crm-timer-dot { width: .8rem; height: .8rem; padding: 0; border-radius: 50%; display: inline-block; }
.crm-timer-0 { background: #bd362f; }
.crm-timer-1 { background: #54a954; }
.crm-timer-2 { background: #807575; }
tr.crm-timer-running > td { background-color: rgba(84, 169, 84, .08); }
.fc .event-registration { background-color: #0047ab; border: none; }
.fc .event-scheduling { background-color: #7f00ff !important; border-color: #7f00ff !important; }
.fc .event-done { background: repeating-linear-gradient(45deg, #6c757d, #6c757d 6px, #868e96 6px, #868e96 12px); border: none; }
.fc .event-private { border: 2px solid #ca0000 !important; }
.fc .event-private::after { content: "PRIVATE"; position: absolute; top: 0; right: 2px; font-size: .6rem; font-weight: 700; color: #fff; }
.fc { --fc-event-font-size: .75em; --fc-today-bg-color: rgba(255, 220, 40, .06); --fc-page-bg-color: transparent; --fc-border-color: var(--tblr-border-color); --fc-neutral-bg-color: var(--tblr-bg-surface-secondary); }
.fc .fc-timegrid-now-indicator-line { border-color: red; }
.crm-myday-tasks { max-height: 700px; overflow-y: auto; }
.crm-myday-task { cursor: grab; border-left: 4px solid #7f00ff; }
.crm-myday-task.crm-task-over { border-left-color: var(--tblr-danger); }
.crm-myday-task.crm-task-full { border-left-color: var(--tblr-success); }