/* 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;
}
/* On :root only: the sidebar carries its own data-bs-theme, and setting the width there too would undo Tabler's folded
   width (html[data-bs-sidebar^=folded]) for the sidebar alone, so it stayed wide over the page. */
:root { --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-logo { flex-shrink: 0; }
.crm-icon-unfold, [data-bs-sidebar^=folded] .crm-icon-fold { 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; }

/* Folded (Tabler's data-bs-sidebar="folded-hover", lg and up): icons only, and the sidebar opens over the page while
   the pointer or keyboard focus is in it. "Compact" below is the folded sidebar at rest. Groups keep their own open or
   closed state; a closed group is a divider. What needs you stays visible as an orange dot: on an item's icon, and on
   the divider of a closed group that holds such an item. */
@media (min-width: 992px) {
  [data-bs-sidebar=folded-hover] .crm-sidebar:hover, [data-bs-sidebar=folded-hover] .crm-sidebar:has(:focus-visible) { width: 15rem; }
  /* Compact: folded and at rest. .navbar-vertical so these outrank Tabler's own folded rules. */
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) .crm-brand-row { justify-content: center; }
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) :is(.crm-brand-name, .crm-fav, .crm-counts, .crm-nav-group-title, .crm-nav-chevron) { display: none; }
  /* !important: the button is shown with Bootstrap's d-lg-inline-flex, which is !important itself. */
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) [data-crm-sidebar-fold] { display: none !important; }
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) .navbar-collapse { overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) .crm-nav-group-toggle { justify-content: center; gap: 0; padding-inline: 0; }
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) .crm-nav-group-toggle::before { content: ""; display: block; width: 1.5rem; border-top: 1px solid currentColor; opacity: .5; }
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) .crm-nav-sum { width: .5rem; height: .5rem; padding: 0; margin-inline-start: .25rem; border-radius: 50%; font-size: 0; }
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) .crm-needs-you > .nav-link .nav-link-icon { position: relative; }
  [data-bs-sidebar=folded-hover] .navbar-vertical.crm-sidebar:not(:hover):not(:has(:focus-visible)) .crm-needs-you > .nav-link .nav-link-icon::after {
    content: ""; position: absolute; top: -.1rem; inset-inline-end: -.25rem; width: .5rem; height: .5rem; border-radius: 50%;
    background: var(--crm-tiger);
  }
}

/* Favourite stars: on hover in the sidebar (over the counts), always next to a page title that is a menu point. */
.crm-fav { border: 0; background: none; color: inherit; padding: .2rem .3rem; line-height: 1; opacity: .6; border-radius: var(--tblr-border-radius); }
.crm-fav:hover, .crm-fav:focus-visible { opacity: 1; }
.crm-fav.on { color: var(--crm-tiger); opacity: 1; }   /* the vendored icon font has no filled star */
.crm-sidebar .nav-item[data-fav-item] { position: relative; }
.crm-sidebar .crm-fav { position: absolute; inset-inline-end: .5rem; top: 50%; transform: translateY(-50%); visibility: hidden; }
.crm-sidebar .nav-item:hover > .crm-fav, .crm-sidebar .crm-fav:focus-visible { visibility: visible; }
.crm-sidebar .nav-item:hover > .nav-link .crm-counts { visibility: hidden; }
#nav-favorites [data-fav-item] { cursor: grab; }
#nav-favorites .sortable-ghost { opacity: .4; }
@media (hover: none) {
  .crm-sidebar .crm-fav { visibility: visible; }
  .crm-sidebar .nav-item[data-fav-item] > .nav-link { padding-inline-end: 2.25rem; }
  .crm-sidebar .nav-item:hover > .nav-link .crm-counts { visibility: visible; }
}
.crm-fav-page { font-size: 1.1rem; margin-inline-start: .35rem; }

/* ---------------------------------------------------------------- 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); }

/* Tom Select: its bootstrap5 theme paints with Bootstrap's --bs-* variables, which Tabler doesn't define (it names
   them --tblr-*), so the dropdown came out transparent. Map them here, and replace its few fixed light-theme colours.
   Pages load tom-select.bootstrap5.css after this file, so each override is one class more specific than its rule. */
.ts-wrapper, .ts-dropdown {
  --bs-body-bg: var(--tblr-bg-forms, var(--tblr-bg-surface));
  --bs-body-color: var(--tblr-body-color);
  --bs-border-color: var(--tblr-border-color);
  --bs-border-color-translucent: var(--tblr-border-color-translucent);
  --bs-border-width: var(--tblr-border-width);
  --bs-border-radius: var(--tblr-border-radius);
  --bs-border-radius-sm: var(--tblr-border-radius-sm);
  --bs-border-radius-lg: var(--tblr-border-radius-lg);
  --bs-box-shadow-inset: none;
  --bs-secondary-bg: var(--tblr-bg-surface-secondary);
  --bs-secondary-color: var(--tblr-secondary);
  --bs-tertiary-bg: rgba(var(--tblr-primary-rgb), .1);
  --bs-form-valid-color: var(--tblr-success);
  --bs-form-invalid-color: var(--tblr-danger);
}
.ts-wrapper .ts-control, .ts-wrapper .ts-control input, .ts-wrapper .ts-dropdown { color: var(--tblr-body-color); }
.ts-wrapper .ts-dropdown { background: var(--tblr-bg-surface); border-color: var(--tblr-border-color); box-shadow: var(--tblr-box-shadow-lg); }
.ts-wrapper .ts-dropdown .optgroup-header { color: var(--tblr-secondary); }
.ts-wrapper.focus .ts-control { border-color: var(--tblr-primary); box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25); }
.ts-wrapper.ts-wrapper.multi .ts-control > div { background: var(--tblr-bg-surface-secondary); border-color: var(--tblr-border-color); color: var(--tblr-body-color); }
.ts-wrapper.ts-wrapper.multi .ts-control > div.active { background: var(--tblr-primary); color: #fff; }

/* 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); }

/* ---------------------------------------------------------------- timer slide-in (timer-panel.js, _TimerPanel) */
.crm-timers { --tblr-offcanvas-width: 420px; --bs-offcanvas-width: 420px; }
.crm-timer-button { gap: .35rem; }
.crm-timer-clock { font-variant-numeric: tabular-nums; }
.crm-timer-row { padding: .65rem 0; border-top: 1px solid var(--tblr-border-color); }
.crm-timer-row.is-added { opacity: .65; }
.crm-timer-row.is-featured { border-top: 0; padding-bottom: 0; }
.crm-timer-target { background: var(--tblr-bg-surface-secondary); border: 1px solid var(--tblr-border-color); border-radius: var(--tblr-border-radius); padding: .75rem; }
.crm-timer-big { font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.crm-timer-minutes { width: 6.5rem; flex: none; }
.crm-timer-edit > summary { cursor: pointer; }
/* Pinned: the panel stays open from page to page and the page makes room for it on wide screens. */
@media (min-width: 1400px) {
  body.crm-timers-pinned.crm-timers-open .page-wrapper { margin-right: 420px; }
}