/* ============================================================
   Total Invoice - design system
   Navy sidebar, bright blue accent, white cards on a cool canvas.
   Colour is used for meaning: blue, green, orange and purple tiles.
   ============================================================ */

:root {
    /* Ink - navy tinted, like the sidebar */
    --ti-ink:        #0f1d3a;
    --ti-ink-2:      #3a4560;
    --ti-ink-3:      #66718a;
    --ti-ink-4:      #98a1b4;

    /* Lines and surfaces */
    --ti-line:       #e7ebf2;
    --ti-line-strong:#d5dbe6;
    --ti-canvas:     #f4f7fb;
    --ti-surface:    #ffffff;
    --ti-surface-2:  #f8fafd;

    /* Accent - bright blue */
    --ti-accent:      #2563eb;
    --ti-accent-hover:#1d4fd8;
    --ti-accent-soft: #eef4ff;
    --ti-accent-line: #c9daff;
    --ti-focus:       rgba(37, 99, 235, 0.18);

    /* Sidebar */
    --ti-side-bg:     #0f1d3a;
    --ti-side-bg-2:   #0b1630;
    --ti-side-ink:    #c5cee0;
    --ti-side-muted:  #7f8baa;
    --ti-side-hover:  rgba(255, 255, 255, 0.06);
    --ti-side-line:   rgba(255, 255, 255, 0.08);

    /* Semantic */
    --ti-pos:       #15994f;
    --ti-pos-soft:  #e8f7ee;
    --ti-neg:       #dc2626;
    --ti-neg-soft:  #fdecec;
    --ti-warn:      #d97706;
    --ti-warn-soft: #fff4e5;
    --ti-purple:      #7c3aed;
    --ti-purple-soft: #f1ebff;

    /* Chart colours */
    --ti-chart-blue:  #2f6fed;
    --ti-chart-green: #2fb87f;

    /* Typography */
    --ti-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ti-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* Radii */
    --ti-radius-sm: 8px;
    --ti-radius:    12px;

    /* Elevation */
    --ti-shadow-card: 0 1px 2px rgba(15, 29, 58, 0.04), 0 2px 8px rgba(15, 29, 58, 0.04);
    --ti-shadow-pop:  0 10px 30px rgba(15, 29, 58, 0.12), 0 0 0 1px rgba(15, 29, 58, 0.05);

    /* Motion */
    --ti-ease: cubic-bezier(0.2, 0, 0.2, 1);
    --ti-duration: 0.12s;

    /* Legacy aliases (kept so older views keep resolving) */
    --ti-gray-50:  var(--ti-surface-2);
    --ti-gray-100: #f0f3f8;
    --ti-gray-200: var(--ti-line);
    --ti-gray-300: var(--ti-line-strong);
    --ti-gray-400: var(--ti-ink-4);
    --ti-gray-500: var(--ti-ink-3);
    --ti-gray-600: var(--ti-ink-3);
    --ti-gray-700: var(--ti-ink-2);
    --ti-gray-800: var(--ti-ink-2);
    --ti-gray-900: var(--ti-ink);
    --ti-black:    var(--ti-ink);
    --ti-bg:            var(--ti-surface);
    --ti-bg-secondary:  var(--ti-canvas);
    --ti-bg-elevated:   var(--ti-surface);
    --ti-success: var(--ti-pos);
    --ti-danger:  var(--ti-neg);
    --ti-warning: var(--ti-warn);
    --ti-info:    var(--ti-accent);
    --ti-radius-lg: var(--ti-radius);
    --ti-radius-xl: var(--ti-radius);
    --ti-shadow-sm: var(--ti-shadow-card);
    --ti-shadow: var(--ti-shadow-card);
    --ti-shadow-md: var(--ti-shadow-pop);
    --ti-shadow-lg: var(--ti-shadow-pop);
    --ti-shadow-elevated: var(--ti-shadow-pop);
}

/* ------------------------------------------------------------
   Bootstrap theme remap

   Bootstrap's utilities (.text-primary, .text-success, .border-*,
   .link-*) read its own custom properties, not ours. Without this
   they keep rendering in stock Bootstrap colours.
   ------------------------------------------------------------ */

:root {
    --bs-primary:        #2563eb;
    --bs-primary-rgb:    37, 99, 235;
    --bs-secondary:      #66718a;
    --bs-secondary-rgb:  102, 113, 138;
    --bs-success:        #15994f;
    --bs-success-rgb:    21, 153, 79;
    --bs-danger:         #dc2626;
    --bs-danger-rgb:     220, 38, 38;
    --bs-warning:        #d97706;
    --bs-warning-rgb:    217, 119, 6;
    --bs-info:           #2563eb;
    --bs-info-rgb:       37, 99, 235;
    --bs-dark:           #0f1d3a;
    --bs-dark-rgb:       15, 29, 58;

    --bs-body-color:     #3a4560;
    --bs-body-color-rgb: 58, 69, 96;
    --bs-body-bg:        #f4f7fb;
    --bs-emphasis-color: #0f1d3a;
    --bs-secondary-color: #66718a;
    --bs-border-color:   #e7ebf2;

    --bs-link-color:       #2563eb;
    --bs-link-color-rgb:   37, 99, 235;
    --bs-link-hover-color: #1d4fd8;

    --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

    --bs-border-radius:    12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 12px;
    --bs-border-radius-xl: 12px;

    --bs-focus-ring-color: rgba(37, 99, 235, 0.18);
}

/* ---- Global ---- */

*, *::before, *::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--ti-font);
    font-size: 0.875rem;
    color: var(--ti-ink-2);
    background: var(--ti-canvas);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ti-ink);
    letter-spacing: -0.015em;
}

a {
    color: var(--ti-accent);
    text-decoration: none;
    transition: color var(--ti-duration) var(--ti-ease);
}

a:hover {
    color: var(--ti-accent-hover);
    text-decoration: underline;
    text-underline-offset: 2px;
}

::selection {
    background: #d6e3ff;
}

:focus-visible {
    outline: 2px solid var(--ti-accent);
    outline-offset: 2px;
}

/* Money and counts line up in columns */
.ti-num,
.ti-stat-value,
.ti-kpi-value,
.ti-top10-amount,
.ti-finance-table td,
.table .text-end {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* ---- Header ---- */

.ti-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--ti-surface);
    border-bottom: 1px solid var(--ti-line);
}

.ti-header.scrolled {
    border-bottom-color: var(--ti-line-strong);
}

.ti-header .navbar {
    padding: 0;
    min-height: 50px;
}

.ti-header .navbar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--ti-ink);
    letter-spacing: -0.02em;
    padding: 0;
    margin-right: 28px;
}

.ti-header .navbar-brand:hover {
    color: var(--ti-ink);
    text-decoration: none;
}

.ti-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--ti-accent);
    color: #fff;
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
}

.ti-logo-text {
    color: var(--ti-ink);
}

.ti-header .nav-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ti-ink-2);
    padding: 15px 13px;
    transition: color var(--ti-duration) var(--ti-ease);
    position: relative;
}

.ti-header .nav-link:hover,
.ti-header .nav-link:focus {
    color: var(--ti-ink);
}

.ti-header .nav-link.active {
    color: var(--ti-ink);
    font-weight: 600;
}

.ti-header .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 13px;
    right: 13px;
    height: 2px;
    background: var(--ti-accent);
}

.ti-header .dropdown-toggle::after {
    display: none;
}

/* Dropdowns */
.ti-header .dropdown-menu,
.dropdown-menu {
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    box-shadow: var(--ti-shadow-pop);
    padding: 5px;
    min-width: 224px;
    background: var(--ti-surface);
}

.ti-header .dropdown-item,
.dropdown-item {
    font-size: 0.8125rem;
    padding: 7px 10px;
    border-radius: var(--ti-radius-sm);
    color: var(--ti-ink-2);
    transition: background var(--ti-duration) var(--ti-ease),
                color var(--ti-duration) var(--ti-ease);
}

.ti-header .dropdown-item:hover,
.ti-header .dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--ti-accent-soft);
    color: var(--ti-ink);
    text-decoration: none;
}

.ti-header .dropdown-item i {
    color: var(--ti-ink-4);
    margin-right: 6px;
}

.ti-header .dropdown-item:hover i {
    color: var(--ti-accent);
}

.dropdown-divider {
    margin: 5px 0;
    border-color: var(--ti-line);
}

.dropdown-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ti-ink-3);
    padding: 8px 10px 4px;
}

/* Search */
.ti-search-group {
    width: auto;
    flex-wrap: nowrap;
}

.ti-search-select {
    flex: 0 0 auto;
    width: 108px;
    padding: 4px 26px 4px 10px;
    height: 32px;
    font-size: 0.8125rem;
    color: var(--ti-ink-2);
    background-color: var(--ti-surface);
    border: 1px solid var(--ti-line-strong);
    border-right: 0;
    border-radius: var(--ti-radius-sm) 0 0 var(--ti-radius-sm) !important;
}

.ti-search-input {
    flex: 0 0 auto;
    width: 176px;
    height: 32px;
    font-size: 0.8125rem;
    border: 1px solid var(--ti-line-strong);
    background: var(--ti-surface);
    border-radius: 0 !important;
}

.ti-search-input:focus {
    border-color: var(--ti-accent);
    box-shadow: 0 0 0 3px var(--ti-focus);
    z-index: 3;
}

.ti-search-btn {
    height: 32px;
    padding: 0 11px;
    font-size: 0.8125rem;
    border-radius: 0 var(--ti-radius-sm) var(--ti-radius-sm) 0 !important;
}

/* Company select */
.ti-company-select {
    height: 32px;
    font-size: 0.8125rem;
    color: var(--ti-ink-2);
    border-radius: var(--ti-radius-sm);
    border: 1px solid var(--ti-line-strong);
    padding: 4px 30px 4px 10px;
    min-width: 132px;
    max-width: 176px;
    text-overflow: ellipsis;
}

/* User avatar */
.ti-user-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ti-user-btn:hover {
    text-decoration: none;
}

.ti-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ti-accent-soft);
    border: 1px solid var(--ti-accent-line);
    color: var(--ti-accent);
    font-weight: 600;
    font-size: 0.75rem;
    transition: background var(--ti-duration) var(--ti-ease);
}

.ti-user-btn:hover .ti-avatar {
    background: #e3ebf2;
}

.ti-header .navbar-toggler {
    border: none;
    padding: 4px 8px;
}

.ti-header .navbar-toggler:focus {
    box-shadow: none;
}

.ti-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(61,67,77,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Header auth buttons */
.ti-btn-ghost {
    color: var(--ti-ink-2);
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 6px 14px;
    border-radius: var(--ti-radius-sm);
    border: 1px solid transparent;
    transition: background var(--ti-duration) var(--ti-ease);
}

.ti-btn-ghost:hover {
    background: var(--ti-surface-2);
    border-color: var(--ti-line);
    color: var(--ti-ink);
    text-decoration: none;
}

.ti-btn-primary {
    background: var(--ti-accent);
    color: #fff;
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 6px 14px;
    border-radius: var(--ti-radius-sm);
    border: 1px solid var(--ti-accent);
    transition: background var(--ti-duration) var(--ti-ease);
}

.ti-btn-primary:hover {
    background: var(--ti-accent-hover);
    border-color: var(--ti-accent-hover);
    color: #fff;
    text-decoration: none;
}

/* ---- Logo links: always look clickable ---- */

.navbar-brand,
.ti-side-brand,
.ti-auth-brand {
    cursor: pointer;
}

.ti-logo-mark {
    transition: transform 0.15s var(--ti-ease), box-shadow 0.15s var(--ti-ease);
}

.navbar-brand:hover .ti-logo-mark,
.ti-side-brand:hover .ti-logo-mark,
.ti-auth-brand:hover .ti-logo-mark {
    transform: translateY(-1px) scale(1.06);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

.navbar-brand:hover .ti-logo-text {
    color: var(--ti-accent);
}

/* ---- Logo image (img/logo.png, img/logo_darkbg.png on dark backgrounds) ---- */
/* The images are 800x221 with some transparent padding; the icon ends at x 189 */

.ti-brand-img,
.ti-brand-logo img {
    display: block;
    width: auto;
    max-width: none;
    transition: opacity 0.15s var(--ti-ease);
}

.navbar-brand:hover .ti-brand-img,
.ti-side-brand:hover .ti-brand-logo img,
.ti-auth-brand:hover .ti-brand-img {
    opacity: 0.85;
}

.ti-header .navbar-brand .ti-brand-img {
    height: 40px;
}

.ti-public .ti-header .navbar-brand .ti-brand-img {
    height: 48px;
    margin-left: -3px;
}

.ti-brand-logo {
    display: block;
    overflow: hidden;
}

.ti-brand-logo img {
    height: 52px;
    margin-left: -4px;
}

.ti-auth-brand .ti-brand-img {
    height: 52px;
    margin-left: -4px;
}

/* ---- Context strip (global figures under the header) ---- */

.ti-stats-ribbon {
    background: var(--ti-surface);
    border-bottom: 1px solid var(--ti-line);
}

.ti-stat-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.ti-stat {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding: 9px 18px 9px 0;
    margin-right: 18px;
    border-right: 1px solid var(--ti-line);
    color: inherit;
}

.ti-stat:last-child {
    border-right: 0;
    margin-right: 0;
}

a.ti-stat:hover {
    text-decoration: none;
}

a.ti-stat:hover .ti-stat-value {
    color: var(--ti-accent);
}

.ti-stat-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ti-ink-3);
    letter-spacing: 0;
    text-transform: none;
}

.ti-stat-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ti-ink);
    letter-spacing: -0.01em;
    transition: color var(--ti-duration) var(--ti-ease);
}

.ti-stat-value--attention {
    color: var(--ti-warn);
}

/* ---- Notifications ---- */

.ti-notification {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ti-accent-soft);
    border: 1px solid var(--ti-accent-line);
    border-radius: var(--ti-radius);
    padding: 10px 14px;
    font-size: 0.8125rem;
    color: var(--ti-ink-2);
    margin-bottom: 8px;
}

.ti-notification i {
    color: var(--ti-accent);
}

.ti-notification .btn-close {
    flex-shrink: 0;
    margin-left: auto;
    filter: none;
    opacity: 0.45;
    font-size: 0.7rem;
}

.ti-notification .btn-close:hover {
    opacity: 0.8;
}

/* Mail preview on the correspondence pages */
.ti-mail-preview {
    display: block;
    width: 100%;
    height: 500px;
    border: 1px solid var(--ti-accent-line);
    border-radius: var(--ti-radius);
    background: #f3f4f6;
}

/* Trial banner */
.ti-trial-banner {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--ti-warn-soft);
    border: 1px solid #ecdcbc;
    border-radius: var(--ti-radius);
    padding: 10px 14px;
    font-size: 0.8125rem;
    color: var(--ti-ink-2);
}

.ti-trial-banner i {
    color: var(--ti-warn);
}

.ti-trial-banner--info {
    background: var(--ti-pos-soft);
    border-color: #cfe3d7;
}

.ti-trial-banner--info i {
    color: var(--ti-pos);
}

.ti-upgrade-link {
    font-weight: 600 !important;
    color: var(--ti-accent) !important;
}

/* ---- Main ---- */

main {
    background: var(--ti-canvas);
}

/* ---- Panels (cards) ---- */

.card {
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    box-shadow: var(--ti-shadow-card);
    background: var(--ti-surface);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--ti-shadow-card);
}

.card-header {
    background: var(--ti-surface);
    border-bottom: 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ti-ink);
    padding: 18px 20px 12px;
}

.card-header .card-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ti-ink);
}

/* Without a divider, header and body read as one panel */
.card-header + .card-body:not(.p-0) {
    padding-top: 6px;
}

.card-body {
    padding: 18px 20px;
}

.card-footer {
    background: var(--ti-surface);
    border-top: 1px solid var(--ti-line);
    padding: 12px 20px;
}

/* ---- Tables ----
   One look everywhere, matching the dashboard: no zebra stripes,
   a soft header band, hairline rows and a light blue hover. */

.table {
    font-size: 0.8125rem;
    color: var(--ti-ink-2);
    --bs-table-bg: transparent;
    --bs-table-color: var(--ti-ink-2);
    --bs-table-border-color: var(--ti-line);
    --bs-table-striped-bg: transparent;
    --bs-table-striped-color: var(--ti-ink-2);
    --bs-table-hover-bg: #f5f8ff;
    --bs-table-hover-color: var(--ti-ink);
    --bs-table-active-bg: var(--ti-surface-2);
    --bs-table-active-color: var(--ti-ink);
    border-color: var(--ti-line);
}

/* Bootstrap paints stripes and states through a per-cell variable */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: transparent;
    --bs-table-color-type: inherit;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #f5f8ff;
    --bs-table-color-state: var(--ti-ink);
}

.table thead th,
.table > thead.table-light > tr > th,
.table > thead.table-dark > tr > th {
    --bs-table-bg: var(--ti-surface-2);
    --bs-table-color: var(--ti-ink-3);
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ti-ink-3);
    white-space: nowrap;
    background: var(--ti-surface-2);
    border-top: 0;
    border-bottom: 1px solid var(--ti-line);
    padding: 10px 14px;
    vertical-align: middle;
}

.table tbody td,
.table tbody th {
    padding: 12px 14px;
    border-bottom-color: var(--ti-line);
    vertical-align: middle;
}

.table tbody tr:last-child td,
.table tbody tr:last-child th {
    border-bottom: 0;
}

.table tfoot td,
.table tfoot th {
    padding: 12px 14px;
    font-weight: 600;
    color: var(--ti-ink);
    border-top: 1px solid var(--ti-line-strong);
    border-bottom: 0;
}

.table-sm thead th,
.table-sm tbody td,
.table-sm tbody th,
.table-sm tfoot td {
    padding: 7px 10px;
}

.table-hover tbody tr {
    transition: background var(--ti-duration) var(--ti-ease);
}

/* Tables that sit flush in a card line up with the card's 20px edge */
.card > .table-responsive > .table > :not(caption) > tr > :first-child,
.card > .card-body.p-0 .table > :not(caption) > tr > :first-child,
.card > .table > :not(caption) > tr > :first-child {
    padding-left: 20px;
}

.card > .table-responsive > .table > :not(caption) > tr > :last-child,
.card > .card-body.p-0 .table > :not(caption) > tr > :last-child,
.card > .table > :not(caption) > tr > :last-child {
    padding-right: 20px;
}

.card > .table-responsive > .table,
.card > .card-body.p-0 .table,
.card > .table {
    margin-bottom: 0;
}

/* Bordered tables: hairlines only, no heavy grid */
.table-bordered > :not(caption) > * > * {
    border-color: var(--ti-line);
}

/* Row states used across the app */
.table > tbody > tr.table-active > *,
.table > tbody > tr.table-secondary > *,
.table > tbody > tr.table-light > * {
    --bs-table-bg-type: var(--ti-surface-2);
    --bs-table-color-type: var(--ti-ink);
    --bs-table-bg-state: var(--ti-surface-2);
    background: var(--ti-surface-2);
    color: var(--ti-ink);
    border-color: var(--ti-line);
}

/* Links in rows read as data, not as bright blue body links */
.table tbody td > a:not(.btn),
.table tbody td > div > a:not(.btn) {
    font-weight: 500;
}

/* Sortable headers: quiet icon, blue when the column is sorted */
.table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color var(--ti-duration) var(--ti-ease);
}

.table th.sortable:hover {
    color: var(--ti-ink);
}

.table thead th .fa-sort {
    color: var(--ti-ink-4) !important;
    opacity: 0.6;
    font-size: 0.6875rem;
}

.table thead th .fa-sort-up,
.table thead th .fa-sort-down {
    color: var(--ti-accent) !important;
    font-size: 0.6875rem;
}

.table thead th[onclick],
.table thead th.cursor {
    cursor: pointer;
}

/* Empty state row */
.table tbody td.text-center.text-muted {
    padding-top: 36px;
    padding-bottom: 36px;
}

/* ---- Buttons ---- */

.btn {
    font-weight: 500;
    font-size: 0.8125rem;
    border-radius: var(--ti-radius-sm);
    padding: 8px 16px;
    transition: background var(--ti-duration) var(--ti-ease),
                border-color var(--ti-duration) var(--ti-ease),
                color var(--ti-duration) var(--ti-ease);
}

.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--ti-focus);
}

.btn-primary {
    background: var(--ti-accent);
    border-color: var(--ti-accent);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background: var(--ti-accent-hover);
    border-color: var(--ti-accent-hover);
}

.btn-outline-primary {
    color: var(--ti-ink-2);
    border-color: var(--ti-line-strong);
    background: var(--ti-surface);
}

.btn-outline-primary:hover {
    background: var(--ti-surface-2);
    border-color: var(--ti-line-strong);
    color: var(--ti-ink);
}

.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
    background: var(--ti-accent-soft);
    border-color: var(--ti-accent-line);
    color: var(--ti-accent);
    font-weight: 600;
}

.btn-outline-secondary {
    color: var(--ti-ink-2);
    border-color: var(--ti-line-strong);
    background: var(--ti-surface);
}

.btn-outline-secondary:hover {
    background: var(--ti-surface-2);
    border-color: var(--ti-line-strong);
    color: var(--ti-ink);
}

/* Used as the cancel action in modals across the app */
.btn-secondary {
    background: var(--ti-surface);
    border-color: var(--ti-line-strong);
    color: var(--ti-ink-2);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background: var(--ti-surface-2);
    border-color: var(--ti-line-strong);
    color: var(--ti-ink);
}

.btn-success {
    background: var(--ti-pos);
    border-color: var(--ti-pos);
}

.btn-success:hover {
    background: #12833f;
    border-color: #12833f;
}

.btn-danger {
    background: var(--ti-neg);
    border-color: var(--ti-neg);
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.ti-btn-lg {
    padding: 11px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.75rem;
    border-radius: 7px;
}

.btn-group-sm > .btn {
    padding: 4px 10px;
    font-size: 0.75rem;
}

/* Grouped buttons read as one control: square inner corners, rounded
   outer ones, and a single shared border between neighbours. */
.btn-group > .btn {
    border-radius: 0;
}

.btn-group > .btn:first-child {
    border-top-left-radius: var(--ti-radius-sm);
    border-bottom-left-radius: var(--ti-radius-sm);
}

.btn-group > .btn:last-child {
    border-top-right-radius: var(--ti-radius-sm);
    border-bottom-right-radius: var(--ti-radius-sm);
}

.btn-group > .btn + .btn {
    margin-left: -1px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus-visible {
    z-index: 2;
}

/* ---- Row action tiles ----
   Soft tinted squares with a coloured icon, as in the iPhone app. Built by
   ti_actions() in app/Helpers/actions_helper.php. One colour per kind of
   action: grey neutral, blue send, green payment/approve, purple on hold,
   orange reject/reminder, red delete (red only on hover). */

.ti-action-tiles {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.ti-action {
    --tile-ink: var(--ti-ink-3);
    --tile-bg: #eef1f6;
    position: relative;
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: var(--tile-ink);
    background: var(--tile-bg);
    font-size: 0.8125rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--ti-duration) var(--ti-ease),
                box-shadow var(--ti-duration) var(--ti-ease),
                filter var(--ti-duration) var(--ti-ease),
                background var(--ti-duration) var(--ti-ease),
                color var(--ti-duration) var(--ti-ease);
}

.ti-action:hover,
.ti-action:focus-visible {
    color: var(--tile-ink);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15, 29, 58, 0.1);
    filter: saturate(1.15) brightness(0.98);
}

.ti-action:focus-visible {
    outline: 2px solid var(--ti-accent);
    outline-offset: 2px;
}

.ti-action--blue   { --tile-ink: var(--ti-accent); --tile-bg: var(--ti-accent-soft); }
.ti-action--green  { --tile-ink: var(--ti-pos);    --tile-bg: var(--ti-pos-soft); }
.ti-action--purple { --tile-ink: var(--ti-purple); --tile-bg: var(--ti-purple-soft); }
.ti-action--orange { --tile-ink: var(--ti-warn);   --tile-bg: var(--ti-warn-soft); }
.ti-action--red    { --tile-ink: var(--ti-neg);    --tile-bg: var(--ti-neg-soft); }

/* Delete stays quiet in the row and only turns red when you point at it */
.ti-action-tiles > .ti-action--red:not(:hover):not(:focus-visible) {
    --tile-ink: var(--ti-ink-3);
    --tile-bg: #eef1f6;
}

/* Already done, e.g. the payment of a paid invoice, or locked while another row is edited */
.ti-action.is-done,
.ti-action:disabled {
    opacity: 0.38;
    cursor: default;
    pointer-events: none;
}

/* Switched on, e.g. an invoice that is on hold */
.ti-action.is-active {
    --tile-bg: var(--tile-ink);
    color: #fff;
}

.ti-action.is-active:hover {
    color: #fff;
}

.ti-action-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ti-accent);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--ti-surface);
}

/* The menu behind the three dots */
.ti-action--more {
    --tile-bg: var(--ti-surface);
    border: 1px solid var(--ti-line);
    color: var(--ti-ink-3);
}

.ti-action--more:hover,
.ti-action--more[aria-expanded="true"] {
    --tile-bg: #eef2f8;
    color: var(--ti-ink);
}

.ti-action-menu {
    min-width: 236px;
}

.ti-action-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ti-action-menu .dropdown-item.is-danger,
.ti-action-menu .dropdown-item.is-danger:hover {
    color: var(--ti-neg);
}

.ti-action-menu .dropdown-item.is-danger:hover {
    background: var(--ti-neg-soft);
}

.ti-action-mini {
    width: 26px;
    height: 26px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: var(--tile-ink, var(--ti-ink-3));
    background: var(--tile-bg, #eef1f6);
    font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
    .ti-action {
        transition: none;
    }

    .ti-action:hover,
    .ti-action:focus-visible {
        transform: none;
    }
}

/* Row actions in any table get the same quiet look, whatever outline
   variant the view used. The variant only shows on hover. */
.table td .btn-group > .btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ti-ink-4);
    background: transparent;
    border: 0;
    border-radius: 8px !important;
    box-shadow: none;
    font-size: 0.8125rem;
}

.table td .btn-group {
    gap: 2px;
}

.table td .btn-group > .btn:hover,
.table td .btn-group > .btn-outline-secondary:hover {
    background: #eef2f8;
    color: var(--ti-ink);
}

.table td .btn-group > .btn-outline-primary:hover,
.table td .btn-group > .btn-outline-info:hover {
    background: var(--ti-accent-soft);
    color: var(--ti-accent);
}

.table td .btn-group > .btn-outline-success:hover {
    background: var(--ti-pos-soft);
    color: var(--ti-pos);
}

.table td .btn-group > .btn-outline-warning:hover {
    background: var(--ti-warn-soft);
    color: var(--ti-warn);
}

.table td .btn-group > .btn-outline-danger:hover {
    background: var(--ti-neg-soft);
    color: var(--ti-neg);
}

/* Segmented control */
.ti-segmented {
    display: inline-flex;
    background: #f0f3f8;
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius-sm);
    padding: 2px;
    gap: 2px;
}

.ti-segmented .btn,
.ti-segmented button {
    border: 0;
    background: transparent;
    color: var(--ti-ink-3);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 6px;
    transition: background var(--ti-duration) var(--ti-ease),
                color var(--ti-duration) var(--ti-ease);
}

.ti-segmented .btn:hover {
    color: var(--ti-ink);
    background: transparent;
}

.ti-segmented .btn.active {
    background: var(--ti-surface);
    color: var(--ti-accent);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(15, 29, 58, 0.08), 0 0 0 1px var(--ti-line);
}

/* ---- Forms ---- */

.form-control,
.form-select {
    border-radius: var(--ti-radius-sm);
    border: 1px solid var(--ti-line-strong);
    font-size: 0.8125rem;
    color: var(--ti-ink);
    padding: 7px 10px;
    transition: border-color var(--ti-duration) var(--ti-ease),
                box-shadow var(--ti-duration) var(--ti-ease);
}

.form-select {
    padding-right: 2rem;
}

.form-control::placeholder {
    color: var(--ti-ink-4);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ti-accent);
    box-shadow: 0 0 0 3px var(--ti-focus);
}

.form-label {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--ti-ink-2);
    margin-bottom: 4px;
}

.form-text {
    font-size: 0.75rem;
    color: var(--ti-ink-3);
}

.required-field::after {
    content: " *";
    color: var(--ti-neg);
}

/* Select2 (searchable selects) like .form-select. The select2-bootstrap-5 theme
   is loaded after this file, so these rules carry one class more. */
.select2-container.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 16px);
    padding: 7px 2rem 7px 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ti-ink);
    /* Same background as .form-control and .form-select */
    background-color: var(--bs-body-bg);
    border: 1px solid var(--ti-line-strong);
    border-radius: var(--ti-radius-sm);
    transition: border-color var(--ti-duration) var(--ti-ease),
                box-shadow var(--ti-duration) var(--ti-ease);
}

.select2-container.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: var(--ti-ink);
}

.select2-container.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: var(--ti-ink-4);
}

.select2-container.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--ti-accent);
    box-shadow: 0 0 0 3px var(--ti-focus);
}

.select2-container.select2-container--bootstrap-5 .select2-selection__clear {
    right: 2.1rem;
    width: 0.5rem;
    height: 0.5rem;
    background-size: 0.5rem auto;
    opacity: 0.55;
}

.select2-container.select2-container--bootstrap-5 .select2-selection__clear:hover {
    opacity: 1;
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown {
    font-size: 0.8125rem;
    color: var(--ti-ink);
    border-color: var(--ti-accent);
    border-radius: var(--ti-radius-sm);
    box-shadow: var(--ti-shadow-pop);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    padding: 6px 10px;
    font-size: 0.8125rem;
    color: var(--ti-ink);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--ti-line-strong);
    border-radius: var(--ti-radius-sm);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--ti-accent);
    box-shadow: 0 0 0 3px var(--ti-focus);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    padding: 6px 10px;
    font-size: 0.8125rem;
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    color: var(--ti-ink);
    background-color: var(--ti-accent-soft);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    color: #fff;
    background-color: var(--ti-accent);
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__message {
    color: var(--ti-ink-3);
}

/* Small variant (select2--small), like .form-select-sm */
.select2-container.select2-container--bootstrap-5 .select2-selection.select2--small {
    min-height: calc(1.5em + 10px);
    padding: 4px 2rem 4px 8px;
    font-size: 0.75rem;
}

.select2-container.select2-container--bootstrap-5 .select2-dropdown.select2--small .select2-results__options .select2-results__option,
.select2-container.select2-container--bootstrap-5 .select2-dropdown.select2--small .select2-search .select2-search__field {
    font-size: 0.75rem;
}

/* ---- Badges ---- */

.badge {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0;
}

.badge-paid,
.bg-success {
    background: var(--ti-pos-soft) !important;
    color: var(--ti-pos) !important;
}

.badge-open,
.bg-warning {
    background: var(--ti-warn-soft) !important;
    color: var(--ti-warn) !important;
}

.badge-overdue,
.bg-danger {
    background: var(--ti-neg-soft) !important;
    color: var(--ti-neg) !important;
}

.badge-draft,
.bg-secondary {
    background: #eef1f6 !important;
    color: var(--ti-ink-3) !important;
}

.badge.bg-info {
    background: var(--ti-purple-soft) !important;
    color: var(--ti-purple) !important;
}

.badge.text-dark,
.badge.text-bg-light,
.badge.bg-light {
    color: var(--ti-ink-2) !important;
}

.badge.bg-warning.text-dark {
    color: var(--ti-warn) !important;
}

.badge.text-bg-light,
.badge.bg-light {
    background: #eef1f6 !important;
}

.badge-sent,
.bg-primary {
    background: var(--ti-accent-soft) !important;
    color: var(--ti-accent) !important;
}

/* ---- Alerts ---- */

.alert {
    border-radius: var(--ti-radius);
    font-size: 0.8125rem;
    border: 1px solid transparent;
    padding: 11px 14px;
    color: var(--ti-ink-2);
}

/* The padding above overrides Bootstrap's room for the close button */
.alert-dismissible {
    padding-right: 40px;
}

.alert-dismissible .btn-close {
    top: 50%;
    right: 12px;
    padding: 0;
    transform: translateY(-50%);
    opacity: 0.45;
    font-size: 0.7rem;
}

.alert-dismissible .btn-close:hover {
    opacity: 0.8;
}

.alert-success {
    background: var(--ti-pos-soft);
    border-color: #c4ebd3;
}

.alert-danger {
    background: var(--ti-neg-soft);
    border-color: #f7cccc;
}

.alert-warning {
    background: var(--ti-warn-soft);
    border-color: #fbdcb0;
}

.alert-info {
    background: var(--ti-accent-soft);
    border-color: var(--ti-accent-line);
}

.alert-success i { color: var(--ti-pos); }
.alert-danger i  { color: var(--ti-neg); }
.alert-warning i { color: var(--ti-warn); }
.alert-info i    { color: var(--ti-accent); }

/* ---- Filters bar ---- */

.filters-bar {
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    box-shadow: var(--ti-shadow-card);
    padding: 14px 16px;
    margin-bottom: 1.25rem;
}

/* ---- Page header ---- */

.page-header {
    margin-bottom: 22px;
}

.ti-page-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 22px;
}

.page-header h1,
.ti-page-title {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ti-ink);
    margin-bottom: 2px;
}

.page-header p,
.ti-page-sub {
    color: var(--ti-ink-3);
    font-size: 0.875rem;
    margin-bottom: 0;
}

/* ---- KPI row: separate cards with a coloured icon tile ---- */

.ti-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 1.25rem;
}

.ti-kpi {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    min-width: 0;
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    box-shadow: var(--ti-shadow-card);
    color: inherit;
    transition: box-shadow var(--ti-duration) var(--ti-ease),
                border-color var(--ti-duration) var(--ti-ease);
}

a.ti-kpi:hover {
    text-decoration: none;
    border-color: var(--ti-accent-line);
    box-shadow: 0 4px 16px rgba(15, 29, 58, 0.08);
}

.ti-kpi-tile {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 1.25rem;
}

.ti-tile--blue   { background: var(--ti-accent-soft);  color: var(--ti-accent); }
.ti-tile--green  { background: var(--ti-pos-soft);     color: var(--ti-pos); }
.ti-tile--purple { background: var(--ti-purple-soft);  color: var(--ti-purple); }
.ti-tile--orange { background: var(--ti-warn-soft);    color: var(--ti-warn); }

.ti-kpi-text {
    min-width: 0;
    flex: 1 1 auto;
}

.ti-kpi-chevron {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ti-ink-4);
    font-size: 0.75rem;
}

.ti-kpi-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ti-ink-2);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ti-kpi-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ti-ink);
    line-height: 1.2;
    white-space: nowrap;
}

.ti-kpi-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--ti-ink-3);
    margin-top: 6px;
    line-height: 1.35;
}

.ti-delta-up   { color: var(--ti-pos); font-weight: 600; }
.ti-delta-down { color: var(--ti-neg); font-weight: 600; }

/* Legacy KPI card class, flattened */
.ti-kpi-card {
    display: block;
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    padding: 18px 20px;
    box-shadow: var(--ti-shadow-card);
    height: 100%;
}

.ti-kpi-icon { display: none; }
.ti-kpi-body { display: block; }
.ti-kpi-trend {
    display: block;
    font-size: 0.75rem;
    margin-top: 6px;
    color: var(--ti-ink-3);
}
.ti-trend-up    { color: var(--ti-pos); }
.ti-trend-down  { color: var(--ti-neg); }
.ti-trend-muted { color: var(--ti-ink-3); }

/* ---- Panel header with controls ---- */

.card-header.ti-panel-head {
    border-bottom: 0;
    padding: 18px 20px 6px;
}

.ti-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 44px;
}

.ti-panel-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ti-ink);
    margin: 0;
}

/* ---- Chart legend ---- */

.ti-chart-legend {
    font-size: 0.75rem;
    color: var(--ti-ink-3);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ti-chart-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.ti-legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.ti-legend-dash {
    display: inline-block;
    width: 13px;
    height: 0;
    border-top: 2px dashed currentColor;
}

/* ---- Finance table ---- */

.ti-finance-table th {
    font-size: 0.75rem;
}

.ti-finance-table td {
    font-size: 0.8125rem;
}

.ti-finance-table .ti-period {
    color: var(--ti-ink);
}

.ti-row-highlight td {
    background: var(--ti-accent-soft);
}

.ti-row-section td {
    border-top: 1px solid var(--ti-line-strong);
}

.ti-row-estimate td {
    color: var(--ti-ink-3);
}

/* ---- Top 10 list ---- */

.ti-top10-list {
    padding: 4px 20px 16px;
}

.ti-top10-item {
    padding: 9px 0;
    border-bottom: 1px solid var(--ti-line);
}

.ti-top10-item + .ti-top10-item {
    border-top: 0;
}

.ti-rank {
    display: inline-block;
    width: 20px;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--ti-ink-4);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.ti-top10-name {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--ti-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ti-top10-amount {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ti-ink);
    white-space: nowrap;
}

.ti-top10-share {
    font-size: 0.75rem;
    color: var(--ti-ink-4);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ti-progress-track {
    height: 6px;
    background: #edf1f7;
    border-radius: 999px;
    overflow: hidden;
}

.ti-progress-fill {
    height: 100%;
    background: var(--ti-chart-blue);
    border-radius: 999px;
}

.ti-progress-fill-danger {
    background: #f27a7a;
}

.ti-top10-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 11px;
    margin-top: 4px;
    border-top: 1px solid var(--ti-line-strong);
    font-size: 0.8125rem;
    color: var(--ti-ink-3);
}

.ti-empty {
    text-align: center;
    color: var(--ti-ink-4);
    font-size: 0.8125rem;
    padding: 48px 16px;
}

/* ---- Invoice editor ---- */

.invoice-editor .product-row {
    padding: 10px 0;
    border-bottom: 1px solid var(--ti-line);
}

.invoice-editor .product-row:last-child {
    border-bottom: none;
}

.invoice-editor .totals-section {
    background: var(--ti-surface-2);
    border: 1px solid var(--ti-line);
    padding: 14px 16px;
    border-radius: var(--ti-radius);
}

.invoice-editor .totals-section .total-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.invoice-editor .totals-section .total-row.grand-total {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ti-ink);
    border-top: 1px solid var(--ti-line-strong);
    padding-top: 9px;
    margin-top: 6px;
}

/* ---- AJAX loader ---- */

.ajax-loader {
    display: none;
    text-align: center;
    padding: 3rem;
    color: var(--ti-ink-4);
}

.ajax-loader.active {
    display: block;
}

/* ---- Pagination ---- */

.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
}

.pagination .page-link {
    border-radius: var(--ti-radius-sm);
    margin: 0 2px;
    font-size: 0.8125rem;
    border: 1px solid var(--ti-line);
    color: var(--ti-ink-2);
}

.pagination .page-link:hover {
    background: var(--ti-surface-2);
}

.pagination .page-item.active .page-link {
    background: var(--ti-accent);
    border-color: var(--ti-accent);
    color: #fff;
}

/* ---- Value colours ---- */

.text-negative { color: var(--ti-neg); }
.text-positive { color: var(--ti-pos); }
.text-muted    { color: var(--ti-ink-3) !important; }

/* ---- Utility ---- */

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 600; }
.ti-min0 { min-width: 0; }

/* ---- Client ring, payment strip and client card (client_helper.php, client_card.js) ----
   Levels: good (within the payment term), late (later), bad (twice the term or more),
   none (too few invoices). */
.is-good { --pay: var(--ti-pos);  --pay-soft: var(--ti-pos-soft); }
.is-late { --pay: var(--ti-warn); --pay-soft: var(--ti-warn-soft); }
.is-bad  { --pay: var(--ti-neg);  --pay-soft: var(--ti-neg-soft); }
.is-none { --pay: var(--ti-ink-4); --pay-soft: #eef1f6; }

.ti-client {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ti-client-ring {
    --p: 0;
    position: relative;
    flex: none;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: conic-gradient(var(--pay) calc(var(--p) * 1%), #e3e8f0 0);
    cursor: pointer;
}

.ti-client-ring > span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ti-surface);
    color: var(--ti-ink-2);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ti-client-ring:hover > span { background: var(--pay-soft); }

.ti-client-ring:focus-visible,
.ti-pay-strip:focus-visible,
.ti-note-btn:focus-visible {
    outline: 2px solid var(--ti-accent);
    outline-offset: 2px;
}

/* Notes written by people */
.ti-client-ring > b,
.ti-note-btn > b {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: #f2c94c;
    color: #5c4300;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--ti-surface);
}

.ti-pay-strip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border: 0;
    background: none;
    cursor: pointer;
}

span.ti-pay-strip { cursor: default; }

.ti-pay-blocks {
    display: inline-flex;
    gap: 3px;
}

.ti-pay-blocks i {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--pay);
}

/* Open and already overdue */
.ti-pay-blocks i.is-open {
    background: var(--ti-surface);
    box-shadow: inset 0 0 0 1.5px var(--pay);
}

.ti-pay-avg {
    color: var(--pay);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ti-note-btn {
    position: relative;
    flex: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    display: inline-grid;
    place-items: center;
    background: #eef1f6;
    color: var(--ti-ink-4);
    font-size: 0.75rem;
    cursor: pointer;
}

.ti-note-btn.has-notes {
    background: #fff6cf;
    color: #a16207;
}

.ti-client-card {
    position: absolute;
    z-index: 1050;
    width: 340px;
    max-width: calc(100vw - 24px);
    padding: 14px;
    display: grid;
    gap: 12px;
    background: var(--ti-surface);
    border-radius: var(--ti-radius);
    box-shadow: var(--ti-shadow-pop);
    font-size: 0.8125rem;
    color: var(--ti-ink-2);
}

.ti-client-card:focus { outline: none; }

.ti-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
}

.ti-card-head .btn-close { font-size: 0.6rem; margin-top: 4px; }

.ti-card-title {
    color: var(--ti-ink);
    font-weight: 600;
    font-size: 0.9rem;
}

.ti-card-sub {
    color: var(--ti-ink-3);
    font-size: 0.75rem;
}

.ti-card-pay {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ti-card-big {
    color: var(--pay);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.ti-card-big small { font-size: 0.75rem; font-weight: 600; }

/* The big number already shows the average */
.ti-card-pay .ti-pay-avg { display: none; }

.ti-card-open {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--ti-radius-sm);
    background: var(--ti-surface-2);
    font-variant-numeric: tabular-nums;
}

.ti-card-notes {
    display: grid;
    gap: 8px;
}

.ti-card-note {
    padding: 8px 10px;
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius-sm);
    background: #fffbea;
    overflow-wrap: anywhere;
}

.ti-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Address book: name with the address under it */
.ti-client-address {
    display: block;
    margin-top: 2px;
    color: var(--ti-ink-3);
    font-size: 0.75rem;
}

/* ---- Modals ---- */

.modal-content {
    border: 1px solid var(--ti-line);
    border-radius: var(--ti-radius);
    box-shadow: var(--ti-shadow-pop);
}

.modal-header {
    background: var(--ti-surface);
    border-bottom: 1px solid var(--ti-line);
    padding: 14px 18px;
}

/* Tinted modal headers are pale in this palette, so the white close
   icon would be invisible on them. Always use the dark glyph. */
.btn-close-white {
    filter: none;
}

/* The vendored Bootstrap build does not push the close button to the
   trailing edge, so it ends up jammed against the title. */
.modal-header .btn-close {
    margin-left: auto;
}

.modal-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.modal-body {
    padding: 18px;
}

.modal-footer {
    background: var(--ti-surface-2);
    border-top: 1px solid var(--ti-line);
    padding: 12px 18px;
}

/* ---- Footer ---- */

.ti-footer {
    background: var(--ti-surface);
    border-top: 1px solid var(--ti-line);
    padding: 18px 0;
}

.ti-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.ti-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.ti-footer-links a {
    font-size: 0.75rem;
    color: var(--ti-ink-3);
}

.ti-footer-links a:hover {
    color: var(--ti-ink);
}

.ti-footer-copy {
    font-size: 0.75rem;
    color: var(--ti-ink-4);
}

.ti-footer-copy a {
    color: var(--ti-ink-3);
}

/* ---- DataTables ---- */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--ti-radius-sm);
    border: 1px solid var(--ti-line-strong);
    padding: 5px 10px;
    font-size: 0.8125rem;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 0.75rem;
    color: var(--ti-ink-3);
}

/* ---- jQuery UI datepicker ---- */

.ui-datepicker {
    font-family: var(--ti-font);
    font-size: 0.8125rem;
    border-radius: var(--ti-radius);
    border: 1px solid var(--ti-line);
    box-shadow: var(--ti-shadow-pop);
    padding: 6px;
}

.ui-datepicker .ui-datepicker-header {
    border-radius: var(--ti-radius-sm);
    background: var(--ti-surface-2);
    border: none;
    color: var(--ti-ink);
}

.ui-datepicker td a {
    border-radius: 4px;
    text-align: center;
}

.ui-datepicker td a.ui-state-active {
    background: var(--ti-accent);
    color: #fff;
    border-color: var(--ti-accent);
}

/* ============================================================
   App shell (logged in): navy sidebar + top bar
   ============================================================ */

.ti-shell {
    display: flex;
    min-height: 100vh;
}

/* ---- Sidebar ---- */

.ti-sidebar {
    --ti-side-w: 264px;
    position: sticky;
    top: 0;
    flex: 0 0 var(--ti-side-w);
    width: var(--ti-side-w);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, var(--ti-side-bg) 0%, var(--ti-side-bg-2) 100%);
    color: var(--ti-side-ink);
    padding: 22px 14px 18px;
    overflow-x: hidden;
    overflow-y: auto;
    transition: flex-basis 0.2s var(--ti-ease), width 0.2s var(--ti-ease),
                padding 0.2s var(--ti-ease);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    z-index: 1040;
}

.ti-side-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 10px 22px;
    color: #fff;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ti-side-brand:hover {
    color: #fff;
    text-decoration: none;
}

.ti-side-brand .ti-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.8125rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.ti-side-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ti-side-label {
    white-space: nowrap;
}

.ti-side-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ti-side-ink);
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    transition: background var(--ti-duration) var(--ti-ease),
                color var(--ti-duration) var(--ti-ease);
}

.ti-side-link > i:first-child {
    width: 18px;
    font-size: 1rem;
    text-align: center;
    color: var(--ti-side-muted);
    transition: color var(--ti-duration) var(--ti-ease);
}

.ti-side-link:hover,
.ti-side-link:focus-visible {
    background: var(--ti-side-hover);
    color: #fff;
    text-decoration: none;
}

.ti-side-link:hover > i:first-child {
    color: #fff;
}

.ti-side-link.active {
    background: var(--ti-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.ti-side-link.active > i:first-child {
    color: #fff;
}

.ti-side-chevron {
    margin-left: auto;
    font-size: 0.6875rem;
    color: var(--ti-side-muted);
    transition: transform 0.2s var(--ti-ease);
}

.ti-side-link[aria-expanded="true"] .ti-side-chevron {
    transform: rotate(180deg);
}

/* Section is open but a sub page is the active one */
.ti-side-link.is-current {
    color: #fff;
}

.ti-side-link.is-current > i:first-child {
    color: #6ea0ff;
}

.ti-side-badge {
    margin-left: auto;
    min-width: 22px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--ti-accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.ti-side-badge + .ti-side-chevron {
    margin-left: 8px;
}

.ti-side-sub {
    list-style: none;
    margin: 2px 0 6px;
    padding: 0 0 0 31px;
    position: relative;
}

.ti-side-sub::before {
    content: '';
    position: absolute;
    left: 22px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--ti-side-line);
}

.ti-side-sublink {
    display: block;
    padding: 7px 12px;
    border-radius: 8px;
    color: var(--ti-side-muted);
    font-size: 0.8125rem;
    transition: background var(--ti-duration) var(--ti-ease),
                color var(--ti-duration) var(--ti-ease);
}

.ti-side-sublink:hover {
    color: #fff;
    background: var(--ti-side-hover);
    text-decoration: none;
}

.ti-side-sublink.active {
    color: #fff;
    font-weight: 600;
    background: rgba(37, 99, 235, 0.22);
}

.ti-side-sublink.ti-side-danger:hover {
    color: #fca5a5;
}

.ti-side-sublink.ti-side-upgrade {
    color: #93b7ff;
    font-weight: 600;
}

.ti-side-heading {
    padding: 10px 12px 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5d6a89;
}

.ti-side-divider {
    height: 1px;
    margin: 6px 12px;
    background: var(--ti-side-line);
}

/* Global figures at the bottom of the sidebar */
.ti-side-summary {
    margin-top: auto;
    padding: 14px 16px;
    border: 1px solid var(--ti-side-line);
    border-radius: var(--ti-radius);
    background: rgba(255, 255, 255, 0.04);
}

.ti-side-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.75rem;
    color: var(--ti-side-muted);
}

a.ti-side-summary-row:hover {
    text-decoration: none;
    color: #fff;
}

.ti-side-summary-row strong {
    color: #fff;
    font-weight: 600;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ti-side-summary-row strong.is-attention {
    color: #fbbf24;
}

.ti-side-backdrop {
    display: none;
}

/* ---- Collapse button: floats on the sidebar edge, halfway down ---- */

:root {
    --ti-side-w: 264px;
}

.ti-side-collapsed {
    --ti-side-w: 78px;
}

.ti-side-collapse {
    position: fixed;
    top: 50%;
    left: calc(var(--ti-side-w) - 14px);
    z-index: 1045;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--ti-line);
    border-radius: 50%;
    background: var(--ti-surface);
    color: var(--ti-ink-3);
    font-size: 0.6875rem;
    box-shadow: 0 2px 8px rgba(15, 29, 58, 0.15);
    transform: translateY(-50%);
    transition: left 0.2s var(--ti-ease),
                color var(--ti-duration) var(--ti-ease),
                border-color var(--ti-duration) var(--ti-ease);
}

.ti-side-collapse:hover {
    color: var(--ti-accent);
    border-color: var(--ti-accent-line);
}

.ti-side-collapse i {
    transition: transform 0.2s var(--ti-ease);
}

.ti-side-collapsed .ti-side-collapse i {
    transform: rotate(180deg);
}

/* Collapsed: icons only, desktop only */
@media (min-width: 992px) {
    .ti-side-collapsed .ti-sidebar {
        --ti-side-w: 78px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .ti-side-collapsed .ti-side-label,
    .ti-side-collapsed .ti-side-chevron,
    .ti-side-collapsed .ti-side-summary,
    .ti-side-collapsed .ti-sidebar .collapse {
        display: none !important;
    }

    .ti-side-collapsed .ti-side-brand {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    /* Only the icon part of the logo */
    .ti-side-collapsed .ti-brand-logo {
        width: 41px;
    }

    .ti-side-collapsed .ti-side-link {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .ti-side-collapsed .ti-side-badge {
        position: absolute;
        top: 3px;
        right: 6px;
        min-width: 17px;
        padding: 1px 4px;
        font-size: 0.625rem;
        margin: 0;
    }
}

/* ---- Main column ---- */

.ti-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ti-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 32px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--ti-line);
}

.ti-topbar.scrolled {
    box-shadow: 0 4px 16px rgba(15, 29, 58, 0.05);
}

.ti-icon-btn.ti-menu-btn {
    display: none;
}

/* Search pill */
.ti-topsearch {
    flex: 1 1 auto;
    max-width: 600px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 6px 0 18px;
    background: var(--ti-canvas);
    border: 1px solid var(--ti-line);
    border-radius: 999px;
    transition: border-color var(--ti-duration) var(--ti-ease),
                box-shadow var(--ti-duration) var(--ti-ease),
                background var(--ti-duration) var(--ti-ease);
}

.ti-topsearch:focus-within {
    background: var(--ti-surface);
    border-color: var(--ti-accent);
    box-shadow: 0 0 0 3px var(--ti-focus);
}

.ti-topsearch > i {
    color: var(--ti-ink-4);
}

.ti-topsearch input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 0.875rem;
    color: var(--ti-ink);
    outline: none;
}

.ti-topsearch input::placeholder {
    color: var(--ti-ink-4);
}

.ti-topsearch select {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 28px 0 12px;
    border: 0;
    border-radius: 999px;
    background-color: var(--ti-surface);
    box-shadow: 0 0 0 1px var(--ti-line);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ti-ink-2);
    width: auto;
}

.ti-topsearch select:focus {
    box-shadow: 0 0 0 1px var(--ti-accent), 0 0 0 4px var(--ti-focus);
}

.ti-topbar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ti-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ti-ink-2);
    font-size: 1.125rem;
    transition: background var(--ti-duration) var(--ti-ease);
}

.ti-icon-btn:hover {
    background: var(--ti-canvas);
    color: var(--ti-ink);
}

.ti-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ti-neg);
    box-shadow: 0 0 0 2px var(--ti-surface);
}

.ti-topbar-sep {
    width: 1px;
    height: 32px;
    background: var(--ti-line);
}

.ti-topbar .ti-company-select {
    height: 36px;
    border-radius: 999px;
    padding-left: 14px;
}

.ti-topbar .ti-user-btn {
    gap: 11px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    color: var(--ti-ink);
    transition: background var(--ti-duration) var(--ti-ease);
}

.ti-topbar .ti-user-btn:hover {
    background: var(--ti-canvas);
}

.ti-topbar .ti-avatar {
    width: 40px;
    height: 40px;
    border: 0;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.ti-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    max-width: 200px;
}

.ti-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ti-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ti-user-company {
    font-size: 0.75rem;
    color: var(--ti-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ti-user-btn > .fa-chevron-down {
    font-size: 0.6875rem;
    color: var(--ti-ink-4);
}

.ti-content {
    flex: 1 0 auto;
    padding: 30px 32px 40px;
}

.ti-content-inner {
    max-width: 1640px;
    margin: 0 auto;
}

.ti-main .ti-footer {
    background: transparent;
    padding: 16px 32px;
}

/* Sidebar becomes a drawer below lg */
@media (max-width: 991.98px) {
    .ti-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.25s var(--ti-ease);
        box-shadow: none;
    }

    .ti-sidebar.is-open {
        transform: translateX(0);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
    }

    .ti-side-backdrop.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1035;
        background: rgba(11, 22, 48, 0.45);
    }

    .ti-icon-btn.ti-menu-btn {
        display: inline-flex;
    }

    .ti-side-collapse {
        display: none;
    }

    .ti-topbar {
        padding: 10px 16px;
        gap: 8px;
    }

    .ti-content {
        padding: 22px 16px 32px;
    }

    .ti-main .ti-footer {
        padding: 16px;
    }

    .ti-user-meta,
    .ti-user-btn > .fa-chevron-down,
    .ti-topbar-sep,
    .ti-topbar .ti-company-select {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .ti-topsearch select {
        display: none;
    }

    .ti-topsearch {
        height: 40px;
    }
}

/* ---- Responsive ---- */

@media (max-width: 1399.98px) {
    .ti-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991.98px) {
    .ti-header .navbar-collapse {
        background: var(--ti-surface);
        border-radius: var(--ti-radius);
        box-shadow: var(--ti-shadow-pop);
        padding: 10px;
        margin-top: 8px;
        border: 1px solid var(--ti-line);
    }

    .ti-header .nav-link {
        padding: 9px 10px;
    }

    .ti-header .nav-link.active::after {
        display: none;
    }

    .ti-search-group {
        width: 100%;
    }

    .ti-search-input {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    .page-header h1,
    .ti-page-title {
        font-size: 1.1875rem;
    }

    .ti-stat {
        padding: 7px 12px 7px 0;
        margin-right: 12px;
    }

    .card-body {
        padding: 14px;
    }

    .ti-kpi {
        padding: 16px;
    }

    .ti-kpi-value {
        font-size: 1.25rem;
    }

    #chart_div,
    #chart_div2 {
        min-height: 250px;
    }

    /* Stretch, so the links and copyright get the full container width to
       wrap within rather than being sized to their content. */
    .ti-footer-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .ti-footer-links {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .ti-kpi-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .ti-stat-label {
        font-size: 0.6875rem;
    }
    .ti-stat-value {
        font-size: 0.75rem;
    }
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* ---- Print ---- */

@media print {
    .ti-sidebar,
    .ti-side-collapse,
    .ti-topbar,
    .ti-header,
    .ti-stats-ribbon,
    .ti-notification,
    .ti-trial-banner,
    .filters-bar,
    .ti-footer,
    .btn,
    .pagination-wrapper,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .card {
        border: 1px solid #ddd;
    }

    main {
        padding: 0 !important;
    }
}

/* ============================================================
   Public pages (logged out)

   Same system as the app: navy panels like the sidebar, white
   cards with coloured icon tiles, bright blue for the action.
   ============================================================ */

.ti-public {
    overflow-x: clip;
}

.ti-public main {
    padding-top: 0 !important;
}

.ti-public main > .container {
    padding-top: 32px;
}

/* Header for visitors: the app's frosted top bar */
.ti-public .ti-header {
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
}

.ti-public .ti-header .navbar {
    min-height: 68px;
}

.ti-public .ti-header .navbar-brand {
    font-size: 1.0625rem;
    font-weight: 700;
}

.ti-public .ti-header .ti-logo-mark,
.ti-public .ti-footer .ti-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 0.75rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.ti-public .ti-header .nav-link {
    padding: 8px 14px;
    margin: 0 2px;
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--ti-ink-2);
}

.ti-public .ti-header .nav-link:hover {
    background: var(--ti-canvas);
    color: var(--ti-ink);
    text-decoration: none;
}

.ti-public .ti-header .nav-link.active {
    background: var(--ti-accent-soft);
    color: var(--ti-accent);
}

.ti-public .ti-header .nav-link.active::after {
    display: none;
}

.ti-public .ti-header .ti-btn-ghost,
.ti-public .ti-header .ti-btn-primary {
    padding: 8px 16px;
    font-size: 0.875rem;
    border-radius: 999px;
}

.ti-public .ti-header .ti-btn-primary {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* Footer for visitors: navy, like the sidebar */
.ti-public .ti-footer {
    background: var(--ti-side-bg-2);
    border-top: 0;
    padding: 28px 0;
    margin-top: 56px;
}

.ti-public .ti-footer-links a {
    color: var(--ti-side-ink);
}

.ti-public .ti-footer-links a:hover {
    color: #fff;
}

.ti-public .ti-footer-copy {
    color: var(--ti-side-muted);
}

.ti-public .ti-footer-copy a {
    color: var(--ti-side-ink);
}

/* Simple pages (privacy, contact, password reset...) get the dashboard's title */
.ti-public main > .container > .row > [class*="col-"] > h1:first-child,
.ti-public main > .container > .row > [class*="col-"] > h1.mb-4 {
    font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.125rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ti-ink);
    margin-bottom: 24px !important;
}

/* ---- Wrapper ---- */

.ti-marketing {
    --ti-measure: 66ch;
    max-width: 1180px;
    margin-inline: auto;
}

/* Breaks out of the container to the full window width */
.ti-bleed {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* The page's first band sits right under the header */
.ti-public main > .container > .ti-marketing > .ti-bleed:first-child {
    margin-top: -32px;
}

/* ---- Reading measure ---- */

.ti-prose {
    max-width: var(--ti-measure);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.ti-prose--center {
    margin-left: auto;
    margin-right: auto;
}

.ti-prose p:last-child {
    margin-bottom: 0;
}

/* ---- Navy band (hero and page heads) ---- */

.ti-navy {
    position: relative;
    color: var(--ti-side-ink);
    background:
        radial-gradient(1000px 420px at 85% -10%, rgba(59, 130, 246, 0.35), transparent 60%),
        radial-gradient(700px 360px at -10% 110%, rgba(47, 184, 127, 0.14), transparent 60%),
        linear-gradient(180deg, var(--ti-side-bg) 0%, var(--ti-side-bg-2) 100%);
    overflow: hidden;
}

/* A faint grid, like chart gridlines */
.ti-navy::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
    pointer-events: none;
}

.ti-navy > * {
    position: relative;
}

/* ---- Home hero ---- */

.ti-hero {
    padding: 72px 0 84px;
}

.ti-hero-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 56px;
    align-items: center;
}

.ti-hero-title {
    color: #fff;
    font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.375rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0 0 18px;
    text-wrap: balance;
}

.ti-hero-sub {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: #b8c3da;
    max-width: 46ch;
    margin: 0;
}

.ti-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.ti-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--ti-side-muted);
}

.ti-hero-trust i {
    color: #6ee7b7;
    margin-right: 6px;
}

/* Big buttons used on the public pages */
.ti-btn-xl {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 12px;
}

.btn-primary.ti-btn-xl {
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4);
}

.ti-btn-onDark-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.ti-btn-onDark-ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    text-decoration: none;
}

/* ---- Product preview: a miniature of the real dashboard ---- */

.ti-preview {
    position: relative;
    background: var(--ti-canvas);
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 30px 80px rgba(3, 10, 30, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
    transform-origin: left center;
}

.ti-preview-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 14px;
}

.ti-preview-bar span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ti-line-strong);
}

.ti-preview-bar strong {
    margin-left: 10px;
    font-size: 0.8125rem;
    color: var(--ti-ink);
}

.ti-preview-kpis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.ti-preview-kpi {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    padding: 12px;
}

.ti-preview-kpi .ti-kpi-tile {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 0.9375rem;
}

.ti-preview-kpi small {
    display: block;
    font-size: 0.6875rem;
    color: var(--ti-ink-3);
    line-height: 1.2;
}

.ti-preview-kpi b {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ti-ink);
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.ti-preview-chart {
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: 12px;
    padding: 14px 14px 10px;
}

.ti-preview-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--ti-ink-3);
    margin-bottom: 12px;
}

.ti-preview-chart-head b {
    color: var(--ti-ink);
    font-size: 0.8125rem;
}

.ti-preview-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    height: 120px;
    border-bottom: 1px solid var(--ti-line);
}

.ti-preview-bars > div {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 100%;
}

.ti-preview-bars i {
    display: block;
    width: 40%;
    border-radius: 4px 4px 0 0;
    background: var(--ti-chart-blue);
}

.ti-preview-bars i + i {
    background: var(--ti-chart-green);
}

/* Floating "paid" toast on the preview */
.ti-preview-toast {
    position: absolute;
    left: -28px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--ti-surface);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(3, 10, 30, 0.35);
    font-size: 0.75rem;
    color: var(--ti-ink-3);
}

.ti-preview-toast b {
    display: block;
    color: var(--ti-ink);
    font-size: 0.8125rem;
}

.ti-preview-toast .ti-kpi-tile {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 0.875rem;
}

/* ---- Page head for sub pages ---- */

.ti-lead {
    text-align: center;
    padding: 64px 24px 72px;
    margin-bottom: 48px;
}

.ti-lead-title {
    font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #fff;
    margin: 0 0 12px;
}

.ti-lead-sub {
    color: #b8c3da;
    font-size: 1.0625rem;
    max-width: 56ch;
    margin: 0 auto;
}

/* Cards that follow a page head overlap it, like a sheet on the navy */
.ti-lead--overlap {
    padding-bottom: 150px;
}

.ti-lead--overlap + * {
    margin-top: -150px;
    position: relative;
}

/* ---- Sections ---- */

.ti-section {
    padding: 64px 0 0;
}

.ti-section-title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ti-ink);
    margin-bottom: 8px;
}

.ti-section-sub {
    color: var(--ti-ink-3);
    font-size: 1rem;
    margin-bottom: 0;
}

.ti-section-head {
    margin-bottom: 32px;
}

.ti-section-head--center {
    text-align: center;
}

.ti-section-head--center .ti-section-sub {
    max-width: 56ch;
    margin-inline: auto;
}

/* ---- Benefit cards ---- */

.ti-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ti-benefit {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: 16px;
    box-shadow: var(--ti-shadow-card);
    padding: 24px;
    transition: transform 0.2s var(--ti-ease), box-shadow 0.2s var(--ti-ease);
}

.ti-benefit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(15, 29, 58, 0.08);
}

.ti-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.125rem;
    background: var(--ti-accent-soft);
    color: var(--ti-accent);
}

.ti-benefit:nth-child(4n+2) .ti-benefit-icon { background: var(--ti-pos-soft);    color: var(--ti-pos); }
.ti-benefit:nth-child(4n+3) .ti-benefit-icon { background: var(--ti-purple-soft); color: var(--ti-purple); }
.ti-benefit:nth-child(4n+4) .ti-benefit-icon { background: var(--ti-warn-soft);   color: var(--ti-warn); }

.ti-benefit-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ti-ink);
    margin: 0;
}

.ti-benefit-text {
    grid-column: 1 / -1;
    margin-top: 16px !important;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--ti-ink-3);
    margin: 0;
}

/* ---- Check list, in a card ---- */

.ti-checklist {
    list-style: none;
    margin: 0;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 40px;
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: 16px;
    box-shadow: var(--ti-shadow-card);
}

.ti-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.9375rem;
    color: var(--ti-ink-2);
}

.ti-checklist i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--ti-pos-soft);
    color: var(--ti-pos);
    font-size: 0.6875rem;
}

/* ---- Feature rows ---- */

.ti-feature {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: center;
    padding: 40px 0;
}

.ti-feature--flip .ti-feature-media {
    order: -1;
}

.ti-feature-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: 16px;
    font-weight: 700;
    font-size: 0.9375rem;
    background: var(--ti-accent-soft);
    color: var(--ti-accent);
}

.ti-feature:nth-of-type(4n+2) .ti-feature-num { background: var(--ti-pos-soft);    color: var(--ti-pos); }
.ti-feature:nth-of-type(4n+3) .ti-feature-num { background: var(--ti-purple-soft); color: var(--ti-purple); }
.ti-feature:nth-of-type(4n+4) .ti-feature-num { background: var(--ti-warn-soft);   color: var(--ti-warn); }

.ti-feature-title {
    font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ti-ink);
    margin-bottom: 10px;
}

.ti-feature-text {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--ti-ink-2);
    margin: 0;
    max-width: 52ch;
}

.ti-feature-media {
    display: flex;
    justify-content: center;
}

/* Screenshots sit in a small browser frame, filling the column. Tall ones
   (an A4 invoice) are capped and cropped from the top, where the content is. */
.ti-shot {
    display: block;
    width: 100%;
    max-width: 100%;
    padding-top: 26px;
    border: 1px solid var(--ti-line);
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14px 13px, #f87171 4px, transparent 4.5px),
        radial-gradient(circle at 28px 13px, #fbbf24 4px, transparent 4.5px),
        radial-gradient(circle at 42px 13px, #34d399 4px, transparent 4.5px),
        linear-gradient(var(--ti-surface-2), var(--ti-surface-2)) top / 100% 26px no-repeat,
        var(--ti-surface);
    box-shadow: 0 18px 44px rgba(15, 29, 58, 0.12);
    line-height: 0;
    transition: transform 0.2s var(--ti-ease), box-shadow 0.2s var(--ti-ease);
}

.ti-shot:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 54px rgba(15, 29, 58, 0.16);
}

.ti-shot img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: cover;
    object-position: top center;
    border-top: 1px solid var(--ti-line);
}

/* ---- Pricing ---- */

.ti-price {
    max-width: 460px;
    margin-inline: auto;
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 29, 58, 0.14);
}

.ti-price-head {
    padding: 30px 28px 26px;
    text-align: center;
    background: linear-gradient(180deg, var(--ti-accent-soft) 0%, var(--ti-surface) 100%);
    border-bottom: 1px solid var(--ti-line);
}

.ti-price-plan {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ti-accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.ti-price-amount {
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--ti-ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ti-price-period {
    font-size: 0.9375rem;
    color: var(--ti-ink-3);
    font-weight: 500;
    letter-spacing: 0;
}

.ti-price-note {
    font-size: 0.875rem;
    color: var(--ti-ink-3);
    margin: 12px 0 0;
}

.ti-price-head .ti-price-note {
    color: var(--ti-pos);
    font-weight: 600;
}

.ti-price-body {
    padding: 12px 28px 20px;
}

.ti-price-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ti-price-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 0.875rem;
    color: var(--ti-ink-2);
    border-bottom: 1px solid var(--ti-line);
}

.ti-price-list li:last-child {
    border-bottom: 0;
}

.ti-price-list i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ti-pos-soft);
    color: var(--ti-pos);
    font-size: 0.625rem;
}

.ti-price-value {
    margin-left: auto;
    color: var(--ti-ink);
    font-weight: 600;
    white-space: nowrap;
}

.ti-price-foot {
    padding: 4px 28px 28px;
}

.ti-price-foot .btn {
    width: 100%;
    padding: 13px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.3);
}

/* ---- Comparison table ---- */

.ti-compare {
    border: 1px solid var(--ti-line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--ti-surface);
    box-shadow: 0 24px 60px rgba(15, 29, 58, 0.12);
}

.ti-compare table {
    margin: 0;
    font-size: 0.875rem;
}

.ti-compare th,
.ti-compare td {
    padding: 13px 16px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--ti-line);
}

.ti-compare thead th {
    background: var(--ti-surface-2);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--ti-ink-2);
    white-space: nowrap;
    padding-top: 16px;
    padding-bottom: 16px;
}

.ti-compare tbody tr:last-child td {
    border-bottom: 0;
}

.ti-compare .ti-compare-feature {
    text-align: left;
    color: var(--ti-ink-2);
    white-space: nowrap;
    padding-left: 22px;
}

/* Our own column, emphasised */
.ti-compare .ti-col-own {
    background: var(--ti-accent-soft);
    box-shadow: inset 1px 0 0 var(--ti-accent-line), inset -1px 0 0 var(--ti-accent-line);
    color: var(--ti-ink);
}

.ti-compare thead .ti-col-own {
    --bs-table-bg: var(--ti-accent);
    background: var(--ti-accent);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

.ti-compare .ti-row-price td,
.ti-compare .ti-row-price th {
    border-top: 1px solid var(--ti-line-strong);
    font-weight: 700;
    color: var(--ti-ink);
    background: var(--ti-surface-2);
}

.ti-compare .ti-row-price .ti-col-own {
    background: #dfe9ff;
}

/* Yes / no marks: a positive tick, a neutral absence */
.ti-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ti-pos-soft);
    color: var(--ti-pos);
    font-size: 0.625rem;
}

.ti-no {
    color: var(--ti-ink-4);
    opacity: 0.6;
}

/* ---- Closing call to action: a navy card ---- */

.ti-cta {
    text-align: center;
    margin-top: 72px;
    padding: 56px 28px;
    border-radius: 24px;
}

.ti-cta-title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
    margin-bottom: 10px;
}

.ti-cta-sub {
    color: #b8c3da;
    font-size: 1rem;
    max-width: 50ch;
    margin: 0 auto 28px;
}

.ti-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.ti-cta .btn {
    padding: 13px 24px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 12px;
}

.ti-cta .btn-primary {
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45);
}

/* Secondary buttons in the navy card turn into light ghost buttons */
.ti-cta .btn-outline-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.ti-cta .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* ---- Standalone notice (e.g. signups closed) ---- */

.ti-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 680px;
    margin: 0 auto 28px;
    padding: 16px 18px;
    background: var(--ti-warn-soft);
    border: 1px solid #fbdcb0;
    border-radius: 14px;
    text-align: left;
}

.ti-notice-icon {
    color: var(--ti-warn);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.ti-notice-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ti-ink);
    margin: 0 0 2px;
}

.ti-notice-text {
    font-size: 0.875rem;
    color: var(--ti-ink-2);
    margin: 0;
}

/* ---- Demo / single action card ---- */

.ti-action-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 36px;
    text-align: center;
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 29, 58, 0.12);
}

.ti-action-card .ti-kpi-tile {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    font-size: 1.375rem;
    margin-bottom: 18px;
}

/* ============================================================
   Login and sign-up: a navy brand panel next to the form
   ============================================================ */

.ti-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 980px;
    margin: 24px auto 0;
    background: var(--ti-surface);
    border: 1px solid var(--ti-line);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(15, 29, 58, 0.14);
}

.ti-auth-side {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
}

.ti-auth-brand {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 44px;
}

.ti-auth-brand:hover {
    color: #fff;
    text-decoration: none;
}

.ti-auth-brand .ti-logo-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: 0.8125rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.ti-auth-title {
    color: #fff;
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 12px;
}

.ti-auth-text {
    color: #b8c3da;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0 0 28px;
}

.ti-auth-points {
    list-style: none;
    padding: 0;
    margin: 0 0 auto;
    display: grid;
    gap: 14px;
}

.ti-auth-points li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.875rem;
    color: var(--ti-side-ink);
}

.ti-auth-points .ti-kpi-tile {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.875rem;
    background: rgba(255, 255, 255, 0.08);
}

.ti-auth-points li:nth-child(1) .ti-kpi-tile { color: #93b7ff; }
.ti-auth-points li:nth-child(2) .ti-kpi-tile { color: #6ee7b7; }
.ti-auth-points li:nth-child(3) .ti-kpi-tile { color: #c4b5fd; }
.ti-auth-points li:nth-child(4) .ti-kpi-tile { color: #fcd34d; }

.ti-auth-foot {
    margin-top: 36px;
    font-size: 0.8125rem;
    color: var(--ti-side-muted);
}

.ti-auth-main {
    padding: 44px 44px 36px;
}

.ti-auth-main h1 {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ti-ink);
    margin: 0 0 6px;
}

.ti-auth-main .ti-auth-lead {
    color: var(--ti-ink-3);
    font-size: 0.9375rem;
    margin: 0 0 28px;
}

.ti-auth-main .form-control {
    height: 46px;
    padding: 10px 14px;
    font-size: 0.9375rem;
    border-radius: 10px;
    background: var(--ti-surface-2);
}

.ti-auth-main .form-control:focus {
    background: var(--ti-surface);
}

.ti-auth-main .form-label {
    font-weight: 600;
    color: var(--ti-ink);
}

.ti-auth-main .btn {
    padding: 12px 16px;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 10px;
}

.ti-auth-main .btn-primary {
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.3);
}

.ti-auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--ti-line);
    font-size: 0.875rem;
    color: var(--ti-ink-3);
}

.ti-auth-links a {
    font-weight: 600;
}

/* ---- Public responsive ---- */

@media (max-width: 991.98px) {
    .ti-hero-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }

    .ti-preview {
        transform: none;
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
    }

    .ti-preview-toast {
        left: 12px;
    }

    .ti-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .ti-auth {
        grid-template-columns: minmax(0, 1fr);
    }

    .ti-auth-side {
        padding: 32px 28px;
    }

    .ti-auth-brand {
        margin-bottom: 24px;
    }

    .ti-auth-points,
    .ti-auth-foot {
        display: none;
    }

    .ti-auth-text {
        margin-bottom: 0;
    }

    .ti-public .ti-header .navbar-collapse {
        margin-bottom: 12px;
    }
}

@media (max-width: 767.98px) {
    .ti-hero {
        padding: 48px 0 56px;
    }

    .ti-hero-inner {
        padding: 0 16px;
    }

    .ti-lead {
        padding: 44px 16px 52px;
        margin-bottom: 32px;
    }

    .ti-lead--overlap {
        padding-bottom: 120px;
    }

    .ti-lead--overlap + * {
        margin-top: -100px;
    }

    .ti-feature,
    .ti-feature--flip {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 0;
    }

    .ti-feature--flip .ti-feature-media {
        order: 0;
    }

    .ti-checklist {
        grid-template-columns: 1fr;
        padding: 20px 22px;
    }

    .ti-section {
        padding-top: 48px;
    }

    .ti-cta {
        margin-top: 56px;
        padding: 40px 20px;
        border-radius: 20px;
    }

    .ti-auth-main {
        padding: 32px 24px 28px;
    }

    .ti-auth {
        border-radius: 18px;
        margin-top: 8px;
    }
}

@media (max-width: 575.98px) {
    .ti-benefits {
        grid-template-columns: 1fr;
    }

    .ti-preview-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .ti-preview-kpi b {
        font-size: 0.875rem;
    }

    .ti-preview-toast {
        display: none;
    }

    .ti-hero-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ti-benefit:hover,
    .ti-shot:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------------
   Layout designer (company/designer)
   ------------------------------------------------------------------ */
.ld-preview-card {
    position: sticky;
    top: 1rem;
}

.ld-preview-body {
    position: relative;
    max-height: calc(100vh - 12rem);
    min-height: 300px;
    overflow-y: auto;
    background: var(--ti-canvas);
}

.ld-preview-status {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    z-index: 5;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--ti-surface);
    box-shadow: 0 1px 3px rgba(15, 29, 58, 0.12);
}

.ld-pages {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ld-page {
    position: relative;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 29, 58, 0.08), 0 6px 20px rgba(15, 29, 58, 0.08);
}

.ld-page canvas {
    display: block;
    width: 100%;
}

.ld-page-number {
    position: absolute;
    right: 0;
    bottom: -1.15rem;
    font-size: 0.7rem;
    color: var(--ti-ink-4);
}

.ld-zone {
    position: absolute;
    border: 1px dashed rgba(37, 99, 235, 0.65);
    background: rgba(37, 99, 235, 0.04);
    cursor: move;
    touch-action: none;
}

.ld-zone:hover,
.ld-zone:focus,
.ld-zone.ld-dragging {
    border-style: solid;
    background: rgba(37, 99, 235, 0.1);
    outline: none;
}

.ld-zone-label {
    position: absolute;
    top: -1.05rem;
    left: -1px;
    padding: 0 0.3rem;
    font-size: 0.62rem;
    line-height: 1rem;
    white-space: nowrap;
    color: #fff;
    background: rgba(37, 99, 235, 0.85);
    border-radius: 3px 3px 0 0;
    pointer-events: none;
}

.ld-content-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed rgba(220, 38, 38, 0.7);
    cursor: ns-resize;
}

.ld-content-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 10px;
}

.ld-content-line .ld-zone-label {
    left: auto;
    right: 0;
    background: rgba(220, 38, 38, 0.85);
}

/* ============================================================
   Mileage registration
   ============================================================ */

.fw-500 { font-weight: 500; }

/* The place dropdowns may reach past the bottom of the card */
.mileage-form-card {
    overflow: visible;
}

.mileage-form-card.is-editing {
    border-color: var(--ti-accent-line);
    box-shadow: 0 0 0 3px var(--ti-focus);
}

/* Van - swap - naar, next to each other from md up */
.mileage-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0 10px;
    align-items: start;
}

.mileage-swap {
    margin-top: 31px;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--ti-ink-3);
}

.mileage-manual {
    margin-top: 8px;
    padding: 10px;
    background: var(--ti-surface-2);
    border: 1px dashed var(--ti-line-strong);
    border-radius: var(--ti-radius-sm);
}

.mileage-opt-name {
    display: block;
    font-weight: 500;
}

.mileage-opt-line {
    display: block;
    font-size: 0.75rem;
    color: var(--ti-ink-3);
}

.select2-results__option--highlighted .mileage-opt-line {
    color: inherit;
    opacity: 0.85;
}

.mileage-opt-new {
    color: var(--ti-accent);
    font-weight: 500;
}

.select2-results__option--highlighted .mileage-opt-new {
    color: inherit;
}

.mileage-actions {
    min-height: 38px;
}

.mileage-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 16px;
    min-height: 1.25rem;
    font-variant-numeric: tabular-nums;
}

.mileage-table td,
.mileage-table th {
    font-variant-numeric: tabular-nums;
}

.mileage-table .mileage-month th {
    background: var(--ti-surface-2);
    font-size: 0.8125rem;
    color: var(--ti-ink);
    border-top: 1px solid var(--ti-line-strong);
}

.mileage-grand-total th {
    border-top: 2px solid var(--ti-ink);
    border-bottom: 0;
    font-variant-numeric: tabular-nums;
}

.mileage-period-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mileage-payout {
    padding: 12px 18px;
    background: var(--ti-accent-soft);
    border: 1px solid var(--ti-accent-line);
    border-radius: var(--ti-radius);
    color: var(--ti-accent);
}

.mileage-payout-amount {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.mileage-sticky {
    position: sticky;
    top: 84px;
}

.mileage-rate-now {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.mileage-rate-value {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ti-ink);
}

@media (max-width: 767.98px) {
    .mileage-route {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .mileage-swap {
        margin: 0 auto;
        transform: rotate(90deg);
    }

    .mileage-sticky {
        position: static;
    }
}

/* Terms and conditions text (public/algemene_voorwaarden.html) */
.ti-terms h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 1.25rem 0 -0.75rem;
}

.ti-terms h2:first-child {
    margin-top: 0;
}

/* Time tracking page: the iPhone screenshot and the connection details */
.ti-time-shot {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 520px;
}

.ti-time-table {
    max-width: 560px;
    margin: 0 auto 1rem;
    text-align: left;
}

.ti-time-table th {
    width: 38%;
    font-weight: 600;
}

.ti-time-table code {
    word-break: break-all;
}

.ti-feature-text + .ti-feature-text {
    margin-top: 0.85rem;
}

/* Numbered steps: three per row, text right under the title */
.ti-benefits--steps {
    grid-template-columns: repeat(3, 1fr);
}

.ti-benefits--steps .ti-benefit {
    align-content: start;
}

@media (max-width: 991.98px) {
    .ti-benefits--steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .ti-benefits--steps {
        grid-template-columns: 1fr;
    }
}

/* App buttons (partials/app_buttons.php), styled like store badges */
.ti-app-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ti-app-buttons--center {
    justify-content: center;
}

.ti-app-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 168px;
    padding: 8px 18px 8px 14px;
    border: 1px solid var(--ti-ink);
    border-radius: 12px;
    background: var(--ti-ink);
    color: #fff;
    text-align: left;
    line-height: 1.15;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ti-app-button:hover,
.ti-app-button:focus-visible {
    background: var(--ti-ink-2);
    border-color: var(--ti-ink-2);
}

.ti-app-button i {
    font-size: 26px;
    width: 26px;
    text-align: center;
}

.ti-app-button span {
    font-weight: 600;
    font-size: 17px;
}

.ti-app-button small {
    display: block;
    font-weight: 400;
    font-size: 11px;
    opacity: 0.8;
}

.ti-app-buttons--dark .ti-app-button {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.28);
}

.ti-app-buttons--dark .ti-app-button:hover,
.ti-app-buttons--dark .ti-app-button:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
}

.ti-hero .ti-app-buttons {
    margin-top: 18px;
}