/* ==========================================================================
   Deep Digital Co. CRM — Admin Panel Theme
   Built on Bootstrap 5.3. Brand colours and font are taken from
   https://deepdigitalco.com — edit the tokens below to re-brand the panel.
   ========================================================================== */

@font-face { font-family: "Satoshi"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Satoshi-Regular.ttf") format("truetype"); }
@font-face { font-family: "Satoshi"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Satoshi-Medium.ttf") format("truetype"); }
@font-face { font-family: "Satoshi"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Satoshi-Bold.ttf") format("truetype"); }
@font-face { font-family: "Satoshi"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/Satoshi-Black.ttf") format("truetype"); }

:root {
    /* Brand palette (deepdigitalco.com) */
    --dd-brand-purple: #8f6dfc;
    --dd-brand-deep-purple: #503aa8;
    --dd-brand-yellow: #f4bf01;
    --dd-brand-pink: #f0d5ed;
    --dd-brand-teal: #199a82;
    --dd-brand-dark-teal: #08342c;
    --dd-brand-ink: #111111;
    --dd-brand-mist: #f6f6fd;
    --dd-brand-gradient: linear-gradient(90deg, #199a82 0%, #8f6dfc 35%, #f0d5ed 65%, #f4bf01 100%);

    /* Roles of those colours in the UI */
    --dd-primary: var(--dd-brand-purple);
    --dd-primary-600: var(--dd-brand-deep-purple);
    --dd-primary-700: #3f2d8a;
    --dd-primary-soft: #f1ecff;
    --dd-accent: var(--dd-brand-yellow);
    --dd-accent-600: #dcab00;

    --dd-body-bg: var(--dd-brand-mist);
    --dd-surface: #ffffff;
    --dd-border: #e8e6f2;
    --dd-text: var(--dd-brand-ink);
    --dd-muted: #686868;

    --dd-sidebar-bg: var(--dd-brand-ink);
    --dd-sidebar-text: #c3c0d2;
    --dd-sidebar-hover: rgba(255, 255, 255, 0.07);
    --dd-sidebar-label: #8d8a9c;

    --dd-header-h: 64px;
    --dd-sidebar-w: 260px;
    --dd-sidebar-mini: 76px;
    --dd-radius: 0.75rem;
    --dd-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 1px 3px rgba(80, 58, 168, 0.06);

    /* Bootstrap overrides */
    --bs-primary: var(--dd-primary-600);
    --bs-primary-rgb: 80, 58, 168;
    --bs-link-color: var(--dd-primary-600);
    --bs-link-color-rgb: 80, 58, 168;
    --bs-link-hover-color: var(--dd-primary-700);
    --bs-body-font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 0.9rem;
    --bs-body-color: var(--dd-text);
    --bs-border-color: var(--dd-border);
}

body {
    background: var(--dd-body-bg);
    color: var(--dd-text);
    -webkit-font-smoothing: antialiased;
}

.btn-primary {
    --bs-btn-bg: var(--dd-primary-600);
    --bs-btn-border-color: var(--dd-primary-600);
    --bs-btn-hover-bg: var(--dd-primary-700);
    --bs-btn-hover-border-color: var(--dd-primary-700);
    --bs-btn-active-bg: var(--dd-primary-700);
    --bs-btn-active-border-color: var(--dd-primary-700);
    --bs-btn-disabled-bg: var(--dd-primary-600);
    --bs-btn-disabled-border-color: var(--dd-primary-600);
}

.btn-outline-primary {
    --bs-btn-color: var(--dd-primary-600);
    --bs-btn-border-color: var(--dd-primary-600);
    --bs-btn-hover-bg: var(--dd-primary-600);
    --bs-btn-hover-border-color: var(--dd-primary-600);
    --bs-btn-active-bg: var(--dd-primary-600);
    --bs-btn-active-border-color: var(--dd-primary-600);
}

/* Brand yellow call-to-action (Raise Ticket) */
.btn-accent {
    --bs-btn-color: var(--dd-brand-ink);
    --bs-btn-bg: var(--dd-accent);
    --bs-btn-border-color: var(--dd-accent);
    --bs-btn-hover-color: var(--dd-brand-ink);
    --bs-btn-hover-bg: var(--dd-accent-600);
    --bs-btn-hover-border-color: var(--dd-accent-600);
    --bs-btn-active-color: var(--dd-brand-ink);
    --bs-btn-active-bg: var(--dd-accent-600);
    --bs-btn-active-border-color: var(--dd-accent-600);
    --bs-btn-focus-shadow-rgb: 244, 191, 1;
    font-weight: 700;
}

/* Buttons and form fields in brand colours */
.btn { font-weight: 500; }
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--dd-brand-purple);
    box-shadow: 0 0 0 0.2rem rgba(143, 109, 252, 0.2);
}
.form-check-input:checked { background-color: var(--dd-primary-600); border-color: var(--dd-primary-600); }
.form-label { font-weight: 500; font-size: 0.85rem; }
.text-primary { color: var(--dd-primary-600) !important; }
.bg-primary-soft { background: var(--dd-primary-soft) !important; }

/* --------------------------------------------------------------------------
   Layout: header
   -------------------------------------------------------------------------- */
/* Fixed white bar across the top, with a thin brand gradient line underneath */
.app-header {
    position: fixed;
    top: 0; right: 0; left: var(--dd-sidebar-w);
    transition: left 0.25s ease;
    height: var(--dd-header-h);
    background: var(--dd-surface);
    border-bottom: 1px solid var(--dd-border);
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
}
.app-header .header-brand { display: flex; align-items: center; }
.app-header .header-brand img { height: 42px; width: auto; display: block; }
.app-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: var(--dd-brand-gradient);
}
/* Logo + app name group */
.brand-lockup { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--dd-text); }
.brand-lockup img { height: 34px; width: auto; }
.brand-lockup .brand-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.05; white-space: nowrap; }
.brand-lockup .brand-name small { display: block; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dd-muted); }
.brand-chip { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 0.6rem; padding: 0.35rem; }
/* Right side of the header: View as, Raise Ticket, notifications bell, profile menu */
.app-header .header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.icon-btn {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    background: transparent;
    color: var(--dd-muted);
    font-size: 1.15rem;
    position: relative;
}
.icon-btn:hover { background: var(--dd-body-bg); color: var(--dd-text); }
.icon-btn .dot {
    position: absolute; top: 8px; right: 9px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #ef4444; border: 2px solid #fff;
}
.profile-toggle {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border-radius: 2rem;
    border: 1px solid var(--dd-border);
    background: var(--dd-surface);
    color: var(--dd-text);
}
.profile-toggle:hover { background: var(--dd-body-bg); }
.profile-toggle .profile-meta { line-height: 1.15; text-align: left; }
.profile-toggle .profile-name { font-weight: 600; font-size: 0.85rem; }
.profile-toggle .profile-role { font-size: 0.72rem; color: var(--dd-muted); }
/* Round initials avatar (base size; avatar-sm / avatar-lg change it) */
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--dd-brand-purple), var(--dd-brand-deep-purple));
    color: #fff; font-weight: 700; font-size: 0.8rem; flex-shrink: 0;
}
.avatar-lg { width: 88px; height: 88px; font-size: 1.75rem; }
/* Drop-down menus (notifications, profile, View as) */
.dropdown-menu { border-color: var(--dd-border); box-shadow: 0 10px 30px rgba(17, 17, 17, 0.1); border-radius: 0.6rem; font-size: 0.875rem; }
.dropdown-item { padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.6rem; }
.dropdown-item:active { background: var(--dd-primary-600); }

/* --------------------------------------------------------------------------
   Layout: sidebar (full height; collapses to an icon rail on desktop)
   -------------------------------------------------------------------------- */
/* Dark sidebar with the brand gradient, fixed on the left from top to bottom */
.app-sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: var(--dd-sidebar-w);
    background:
        radial-gradient(circle at 0% 0%, rgba(25, 154, 130, 0.38), transparent 42%),
        radial-gradient(circle at 100% 52%, rgba(143, 109, 252, 0.32), transparent 48%),
        radial-gradient(circle at 15% 100%, rgba(244, 191, 1, 0.20), transparent 38%),
        var(--dd-sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: width 0.25s ease, transform 0.25s ease;
}
/* Logo at the top of the sidebar (full logo; icon only when collapsed) */
.sidebar-brand {
    height: var(--dd-header-h);
    flex-shrink: 0;
    display: flex; align-items: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-brand .brand-full { height: 40px; width: auto; display: block; }
.sidebar-brand .brand-mark { height: 36px; width: auto; display: none; }

/* Menu: links, the active page highlight and sub-menus (Projects, Team, …) */
.sidebar-nav { flex: 1; overflow-y: auto; padding: 0.9rem 0.75rem 0.5rem; scrollbar-width: thin; scrollbar-color: #334155 transparent; }
.sidebar-menu, .sidebar-submenu { list-style: none; margin: 0; padding: 0; }
.sidebar-menu > li { position: relative; }
.sidebar-menu > li + li { margin-top: 2px; }
.sidebar-link {
    display: flex; align-items: center; gap: 0.75rem;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 0; border-radius: 0.5rem;
    background: transparent;
    color: var(--dd-sidebar-text);
    text-decoration: none; text-align: left;
    font-weight: 500; font-size: 0.875rem;
    white-space: nowrap;
}
.sidebar-link > .bi:first-child { font-size: 1.1rem; width: 1.25rem; text-align: center; flex-shrink: 0; }
.sidebar-link:hover { background: var(--dd-sidebar-hover); color: #fff; }
.sidebar-link.active { background: var(--dd-brand-deep-purple); color: #fff; box-shadow: inset 3px 0 0 var(--dd-brand-purple), 0 4px 12px rgba(80, 58, 168, 0.35); }
.sidebar-link.parent-active > .bi:first-child { color: var(--dd-brand-purple); }
.sidebar-link.active > .bi:first-child { color: #fff; }
.sidebar-link.parent-active { color: #fff; }
.sidebar-link .chevron { margin-left: auto; font-size: 0.7rem; transition: transform 0.2s; }
.sidebar-link[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.sidebar-submenu { padding: 0.2rem 0 0.3rem 2.25rem; }
.sidebar-submenu .submenu-title { display: none; }
.sidebar-submenu a {
    position: relative; display: block;
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    color: var(--dd-sidebar-text);
    text-decoration: none; font-size: 0.83rem; white-space: nowrap;
}
.sidebar-submenu a::before {
    content: ""; position: absolute; left: -0.8rem; top: 50%;
    width: 5px; height: 5px; border-radius: 50%;
    background: currentColor; opacity: 0.5; transform: translateY(-50%);
}
.sidebar-submenu a:hover { color: #fff; }
.sidebar-submenu a.active { color: #fff; background: rgba(255, 255, 255, 0.06); }
.sidebar-submenu a.active::before { opacity: 1; background: var(--dd-accent); }

/* "Need help? Raise a support ticket" box near the bottom */
.sidebar-cta {
    display: flex; align-items: center; gap: 0.65rem;
    margin: 0.5rem 0.75rem;
    padding: 0.65rem 0.7rem;
    border-radius: 0.65rem;
    background:
        radial-gradient(circle at 100% 0%, rgba(244, 191, 1, 0.25), transparent 50%),
        linear-gradient(135deg, var(--dd-brand-deep-purple), var(--dd-brand-purple));
    color: #fff;
    flex-shrink: 0;
}
.sidebar-cta .cta-icon {
    width: 32px; height: 32px; border-radius: 0.5rem; flex-shrink: 0;
    background: rgba(255, 255, 255, 0.18);
    display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-cta .cta-text { line-height: 1.2; min-width: 0; flex: 1; }
.sidebar-cta .cta-text strong { display: block; font-size: 0.82rem; }
.sidebar-cta .cta-text span { display: block; font-size: 0.72rem; opacity: 0.85; white-space: nowrap; }
.sidebar-cta .btn { padding: 0.25rem 0.5rem; flex-shrink: 0; }

/* App name and version at the very bottom */
.sidebar-version {
    display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
    padding: 0.7rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--dd-sidebar-label);
    font-size: 0.75rem;
    flex-shrink: 0;
    white-space: nowrap;
}
.sidebar-version .badge { background: rgba(255, 255, 255, 0.08); color: var(--dd-sidebar-text); font-weight: 500; }

/* Dark overlay behind the sidebar on phones; tapping it closes the menu */
.sidebar-backdrop {
    position: fixed; inset: 0;
    background: rgba(17, 17, 17, 0.5);
    z-index: 1035;
    display: none;
}

/* Collapsed icon rail (desktop) */
@media (min-width: 992px) {
    body.sidebar-collapsed { --dd-sidebar-w: var(--dd-sidebar-mini); }
    body.sidebar-collapsed .sidebar-brand { padding: 0; justify-content: center; }
    body.sidebar-collapsed .sidebar-brand .brand-full { display: none; }
    body.sidebar-collapsed .sidebar-brand .brand-mark { display: block; }
    body.sidebar-collapsed .sidebar-nav { overflow: visible; padding: 0.9rem 0.6rem 0.5rem; }
    body.sidebar-collapsed .sidebar-link { justify-content: center; padding: 0.65rem 0; }
    body.sidebar-collapsed .sidebar-link.parent-active { background: rgba(143, 109, 252, 0.22); }
    body.sidebar-collapsed .sidebar-link > span,
    body.sidebar-collapsed .sidebar-link .chevron { display: none; }
    body.sidebar-collapsed .sidebar-menu .collapse,
    body.sidebar-collapsed .sidebar-menu .collapsing { display: none !important; height: auto !important; }
    body.sidebar-collapsed .has-children:hover .collapse {
        display: block !important;
        position: absolute; left: 100%; top: 0;
        padding-left: 0.6rem;
        z-index: 1050;
    }
    body.sidebar-collapsed .has-children .sidebar-submenu {
        min-width: 200px;
        padding: 0.4rem;
        background: var(--dd-sidebar-bg);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.6rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    }
    body.sidebar-collapsed .sidebar-submenu .submenu-title {
        display: block; padding: 0.35rem 0.75rem 0.45rem;
        font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
        color: var(--dd-sidebar-label);
    }
    body.sidebar-collapsed .sidebar-submenu a::before { display: none; }
    body.sidebar-collapsed .sidebar-cta { justify-content: center; padding: 0.5rem; margin: 0.5rem; background: transparent; }
    body.sidebar-collapsed .sidebar-cta .cta-icon,
    body.sidebar-collapsed .sidebar-cta .cta-text { display: none; }
    body.sidebar-collapsed .sidebar-version { justify-content: center; padding: 0.7rem 0.25rem; }
    body.sidebar-collapsed .sidebar-version .version-name { display: none; }
}

/* --------------------------------------------------------------------------
   Layout: main + footer
   -------------------------------------------------------------------------- */
/* Content area to the right of the sidebar, with the footer at the bottom */
.app-main {
    margin-left: var(--dd-sidebar-w);
    padding-top: var(--dd-header-h);
    min-height: 100vh;
    display: flex; flex-direction: column;
    transition: margin-left 0.25s ease;
}
.app-content { flex: 1; padding: 1.5rem; }
.app-footer {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--dd-border);
    background: var(--dd-surface);
    color: var(--dd-muted);
    font-size: 0.8rem;
}
.app-footer a { color: var(--dd-primary-600); font-weight: 600; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }

/* Phones and tablets: sidebar hidden off-screen until opened */
@media (max-width: 991.98px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-header { left: 0; }
    .app-main { margin-left: 0; }
    body.sidebar-open .app-sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; }
}
@media (max-width: 575.98px) {
    .app-content { padding: 1rem; }
    .app-header { padding: 0 0.6rem; gap: 0.4rem; }
    .app-header .header-brand img { height: 34px; }
    .app-footer { justify-content: center; text-align: center; padding: 1rem; }
}

/* --------------------------------------------------------------------------
   Page building blocks
   -------------------------------------------------------------------------- */
/* Page title row: breadcrumb, heading, subtitle and the action buttons on the right */
.page-header {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem;
}
.page-header .breadcrumb { font-size: 0.78rem; margin-bottom: 0.35rem; }
.page-header .breadcrumb a { color: var(--dd-muted); text-decoration: none; }
.page-header .breadcrumb a:hover { color: var(--dd-primary-600); }
.page-title { font-size: 1.4rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.page-subtitle { color: var(--dd-muted); margin: 0.25rem 0 0; }
.page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Cards: white panels that hold every section of a page */
.card {
    border-color: var(--dd-border);
    border-radius: var(--dd-radius);
    box-shadow: var(--dd-shadow);
}
.card-header {
    background: var(--dd-surface);
    border-bottom-color: var(--dd-border);
    padding: 0.9rem 1.25rem;
}
.card-header:first-child { border-radius: var(--dd-radius) var(--dd-radius) 0 0; }
.card-title { font-size: 0.98rem; font-weight: 600; margin: 0; }
.card-footer { background: var(--dd-surface); border-top-color: var(--dd-border); padding: 0.75rem 1.25rem; }
.card-footer:last-child { border-radius: 0 0 var(--dd-radius) var(--dd-radius); }

/* Summary cards at the top of pages: label, big number, note and a coloured icon */
.stat-card { padding: 1.25rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1rem; height: 100%; }
.stat-card .stat-label { color: var(--dd-muted); font-size: 0.8rem; font-weight: 500; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin: 0.25rem 0; }
.stat-card .stat-meta { font-size: 0.75rem; color: var(--dd-muted); }
.stat-icon {
    width: 46px; height: 46px; border-radius: 0.65rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
}
/* Colour pairs (soft background + text) for icons and status badges; picked by Demo::TONES */
.tone-indigo { background: #f1ecff; color: #503aa8; }
.tone-green  { background: #e3f4f0; color: #13806c; }
.tone-amber  { background: #fef6d6; color: #8a6a00; }
.tone-sky    { background: #ece7ff; color: #7553ea; }
.tone-rose   { background: #fbeaf8; color: #a23a93; }
.tone-slate  { background: #efeef4; color: #4a4858; }

/* Tables and the search / filter bar above them */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--dd-muted); background: #f8fafc;
    border-bottom-width: 1px; white-space: nowrap;
    padding: 0.75rem 1rem;
}
.table > tbody td { padding: 0.8rem 1rem; }
.table-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.table-toolbar .search-input { position: relative; flex: 1 1 220px; max-width: 320px; }
.table-toolbar .search-input .bi { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--dd-muted); }
.table-toolbar .search-input input { padding-left: 2.2rem; }
.table-toolbar .form-select { width: auto; min-width: 140px; }

/* "Nothing here yet" message shown in empty lists */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--dd-muted); }
.empty-state .empty-icon {
    width: 64px; height: 64px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--dd-primary-soft); color: var(--dd-primary-600);
    font-size: 1.6rem; margin-bottom: 1rem;
}
.empty-state h6 { color: var(--dd-text); font-weight: 600; margin-bottom: 0.25rem; }
.empty-state p { font-size: 0.85rem; max-width: 360px; margin: 0 auto 1rem; }
.empty-state.compact { padding: 1.75rem 1rem; }
.empty-state.compact .empty-icon { width: 48px; height: 48px; font-size: 1.2rem; margin-bottom: 0.75rem; }

/* Underlined tabs with counts (e.g. ticket status tabs) */
.nav-tabs-underline { border-bottom: 1px solid var(--dd-border); gap: 0.25rem; flex-wrap: nowrap; overflow-x: auto; }
.nav-tabs-underline .nav-link {
    border: 0; border-bottom: 2px solid transparent;
    color: var(--dd-muted); font-weight: 500;
    padding: 0.75rem 1rem; white-space: nowrap;
}
.nav-tabs-underline .nav-link:hover { color: var(--dd-text); }
.nav-tabs-underline .nav-link.active { color: var(--dd-primary-600); border-bottom-color: var(--dd-primary-600); background: transparent; }
.nav-tabs-underline .badge { font-weight: 600; margin-left: 0.35rem; }
.nav-tabs-underline .badge:not([class*="tone-"]) { background: var(--dd-body-bg); color: var(--dd-muted); }
.nav-tabs-underline .nav-link.active .badge:not([class*="tone-"]) { background: var(--dd-primary-soft); color: var(--dd-primary-600); }
/* Status tabs (invoices): the count badge takes the status colour (tone-…),
   ringed on the selected tab; tabs with nothing in them are faded. */
.nav-tabs-underline .nav-link.active .badge[class*="tone-"] { box-shadow: 0 0 0 1.5px currentColor; }
.nav-tabs-underline .badge.is-zero { opacity: 0.45; }

/* Label / value lists on detail pages */
.detail-list { margin: 0; }
.detail-list dt { font-size: 0.75rem; font-weight: 500; color: var(--dd-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.detail-list dd { margin-bottom: 1rem; font-weight: 500; }

/* Settings hub tiles, connector cards and the role permission grid */
.settings-tile {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.25rem; height: 100%;
    color: inherit; text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.settings-tile:hover { border-color: var(--dd-brand-purple); transform: translateY(-2px); color: inherit; }
.settings-tile h6 { font-weight: 600; margin-bottom: 0.2rem; }
.settings-tile p { margin: 0; color: var(--dd-muted); font-size: 0.83rem; }

.connector-card { padding: 1.25rem; height: 100%; display: flex; flex-direction: column; }
.connector-card .connector-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.connector-card h6 { font-weight: 600; margin-bottom: 0.25rem; }
.connector-card p { color: var(--dd-muted); font-size: 0.83rem; flex: 1; }

.permission-table td, .permission-table th { text-align: center; vertical-align: middle; }
.permission-table td:first-child, .permission-table th:first-child { text-align: left; }
/* Group heading rows (Dashboard, Invoices, Settings…) in the role permission grid */
.permission-table .permission-group th { background: var(--dd-body-bg); font-weight: 600; padding-top: 0.6rem; padding-bottom: 0.6rem; }
.permission-table thead th { position: sticky; top: 0; z-index: 1; background: var(--dd-surface); }

/* Image upload box with live preview (logo, favicon, profile photo) */
.upload-box {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem; border: 1px dashed #c9b9fd; border-radius: var(--dd-radius); background: #faf8ff;
}
.upload-box .preview {
    width: 72px; height: 72px; border-radius: 0.6rem; background: #fff; border: 1px solid var(--dd-border);
    display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--dd-muted); font-size: 1.5rem;
}
.upload-box .preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.section-title { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.25rem; }
.section-help { font-size: 0.82rem; color: var(--dd-muted); margin-bottom: 0; }

.timeline-empty { border-left: 2px dashed var(--dd-border); margin-left: 0.75rem; padding-left: 1.25rem; }

.toast-stack { position: fixed; right: 1rem; bottom: 1rem; z-index: 1090; }

/* --------------------------------------------------------------------------
   Auth pages (login / forgot password)
   -------------------------------------------------------------------------- */
/* Full-screen dark gradient background, with the login card centred on it */
.auth-page {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 88% 92%, rgba(244, 191, 1, 0.30), transparent 32%),
        radial-gradient(circle at 65% 45%, rgba(143, 109, 252, 0.45), transparent 42%),
        radial-gradient(circle at 8% 8%, rgba(25, 154, 130, 0.45), transparent 38%),
        var(--dd-brand-ink);
    background-attachment: fixed;
}
.auth-card {
    width: 100%; max-width: 1040px;
    display: flex;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
/* Left half of the card: brand gradient, logo, headline and feature points */
.auth-brand {
    flex: 1 1 52%;
    display: flex; flex-direction: column; justify-content: space-between;
    gap: 2.5rem;
    padding: 3rem;
    color: #fff;
    background:
        radial-gradient(circle at 90% 95%, rgba(244, 191, 1, 0.22), transparent 40%),
        radial-gradient(circle at 75% 55%, rgba(143, 109, 252, 0.35), transparent 50%),
        rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
}
.auth-brand-logo { display: block; margin-bottom: 2.25rem; }
.auth-brand-logo img { width: 100%; max-width: 340px; height: auto; display: block; }
.auth-brand .highlight { background: var(--dd-brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-brand .auth-points .bi { color: var(--dd-accent); }
.auth-brand h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; max-width: 420px; }
.auth-brand p { opacity: 0.8; max-width: 400px; }
.auth-brand .auth-points { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.auth-brand .auth-points li { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; opacity: 0.9; }
.auth-brand small { opacity: 0.7; }
.auth-brand small a { color: #fff; }
/* Right half of the card: the sign-in form */
.auth-form-wrap {
    flex: 1 1 48%;
    display: flex; align-items: center; justify-content: center;
    padding: 3rem 2.5rem;
    background: var(--dd-surface);
}
.auth-form { width: 100%; max-width: 380px; }
.auth-form .auth-logo { height: 52px; width: auto; margin-bottom: 2rem; }
.auth-form h2 { font-weight: 700; font-size: 1.6rem; letter-spacing: -0.01em; }
.auth-form .form-control { padding: 0.65rem 0.9rem; }
.auth-form .btn-lg { font-size: 0.95rem; padding: 0.7rem; }
.auth-demo { font-size: 0.8rem; border-radius: 0.6rem; background: var(--dd-primary-soft); color: var(--dd-primary-700); padding: 0.6rem 0.8rem; margin-bottom: 1.25rem; }
.auth-footer { margin-top: 2.5rem; font-size: 0.8rem; color: var(--dd-muted); text-align: center; }
.auth-footer a { font-weight: 600; text-decoration: none; }
/* Phones and tablets: hide the brand half and show the form full width */
@media (max-width: 991.98px) {
    .auth-brand { display: none; }
    .auth-card { max-width: 460px; }
    .auth-form-wrap { padding: 2.5rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   Demo data: badges, avatars, timelines, conversation
   -------------------------------------------------------------------------- */
/* Soft status badges (<x-admin.status>) */
.badge-soft { font-weight: 600; font-size: 0.72rem; padding: 0.4em 0.7em; border-radius: 2rem; }
/* Initials avatars (<x-admin.avatar>), overlapping avatar groups and the name + subtitle "person" block */
.avatar-sm { width: 28px; height: 28px; font-size: 0.68rem; }
.avatar-teal { background: linear-gradient(135deg, #2bb79c, var(--dd-brand-teal)); }
.avatar-amber { background: linear-gradient(135deg, #f8cf3a, #d9a400); color: var(--dd-brand-ink); }
.avatar-rose { background: linear-gradient(135deg, #d77bc9, #a23a93); }
.avatar-ink { background: linear-gradient(135deg, #4a4858, var(--dd-brand-ink)); }
.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { border: 2px solid var(--dd-surface); }
.avatar-stack .avatar + .avatar { margin-left: -8px; }
.person { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.person .person-name { font-weight: 600; line-height: 1.2; }
.person .person-meta { font-size: 0.78rem; color: var(--dd-muted); }
/* Clickable names in table rows */
.table a.row-link { color: var(--dd-text); font-weight: 600; text-decoration: none; }
.table a.row-link:hover { color: var(--dd-primary-600); }
/* Thin progress bars (project progress) in brand purple */
.progress-sm { height: 6px; min-width: 90px; }
.progress-bar:not([class*="bg-"]) { background-color: var(--dd-primary-600); }
/* Icon + text lists: dashboard feeds, activity and the notifications menu */
.list-feed { list-style: none; margin: 0; padding: 0; }
.list-feed > li { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--dd-border); }
.list-feed > li:first-child { padding-top: 0; }
.list-feed > li:last-child { border-bottom: 0; padding-bottom: 0; }
.list-feed .stat-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 0.5rem; }
.list-feed .feed-meta { font-size: 0.75rem; color: var(--dd-muted); }
.notif-list { max-height: 320px; overflow-y: auto; }
.notif-list .dropdown-item { white-space: normal; align-items: flex-start; padding: 0.7rem 1rem; border-bottom: 1px solid var(--dd-border); }
.notif-list .stat-icon { width: 32px; height: 32px; font-size: 0.9rem; border-radius: 0.5rem; }
/* Ticket conversation bubbles: client (grey), team reply (purple), internal note (yellow) */
.message { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; }
.message:last-child { margin-bottom: 0; }
.message-body { flex: 1; background: var(--dd-body-bg); border: 1px solid var(--dd-border); border-radius: 0 0.75rem 0.75rem 0.75rem; padding: 0.75rem 1rem; }
.message.staff .message-body { background: var(--dd-primary-soft); border-color: #e0d6ff; }
.message.internal .message-body { background: #fff9e6; border-color: #f6e3a1; }
.message-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8rem; margin-bottom: 0.3rem; }
.message-head strong { font-size: 0.85rem; }
.message-head .text-muted { margin-left: auto; }
/* Profile cards with a large avatar */
.team-card { padding: 1.25rem; text-align: center; height: 100%; display: flex; flex-direction: column; align-items: center; }
.team-card ul { align-self: stretch; }
.team-card .avatar { width: 64px; height: 64px; font-size: 1.25rem; margin-bottom: 0.75rem; }
.team-card h6 { font-weight: 600; margin-bottom: 0.1rem; }

/* Page numbers under tables, in brand colours */
.pagination {
    --bs-pagination-color: var(--dd-primary-600);
    --bs-pagination-active-bg: var(--dd-primary-600);
    --bs-pagination-active-border-color: var(--dd-primary-600);
    --bs-pagination-focus-box-shadow: 0 0 0 0.2rem rgba(143, 109, 252, 0.2);
}

/* --------------------------------------------------------------------------
   Table row actions (View / Edit / Delete), row selection, delete confirmation
   -------------------------------------------------------------------------- */
/* Row action buttons: purple View, amber Edit, red Delete (<x-admin.row-actions>), blue Send email */
.row-actions { display: inline-flex; align-items: center; gap: 0.375rem; }
.btn-action {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: 0.9rem;
    --bs-btn-border-width: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}
.btn-action-view {
    --bs-btn-color: var(--dd-primary-600);
    --bs-btn-bg: #e7dfff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dd-primary-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dd-primary-700);
}
.btn-action-edit {
    --bs-btn-color: #946800;
    --bs-btn-bg: #fff4d1;
    --bs-btn-hover-color: var(--dd-brand-ink);
    --bs-btn-hover-bg: var(--dd-accent);
    --bs-btn-active-color: var(--dd-brand-ink);
    --bs-btn-active-bg: var(--dd-accent-600);
}
.btn-action-delete {
    --bs-btn-color: #c62828;
    --bs-btn-bg: #fdecec;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b02a37;
}

.btn-action-email {
    --bs-btn-color: #0a6aa8;
    --bs-btn-bg: #e0f1fc;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0a78c2;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #085f9a;
}

/* Keep the Actions column in view when a wide table scrolls sideways */
.table:has(.row-actions) > tbody > tr > td:last-child,
.table:has(.row-actions) > thead > tr > th:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    white-space: nowrap;
    box-shadow: inset 1px 0 0 var(--dd-border);
}
.table:has(.row-actions) > tbody > tr > td:last-child { background-color: var(--dd-surface); }
.table:has(.row-actions) > tbody > tr:hover > td:last-child { background-color: #f9f8fe; }
.table:has(.row-actions) > tbody > tr.is-selected > td:last-child { background-color: var(--dd-primary-soft); }

/* Row checkboxes, the selected-row highlight and the "N selected · Delete selected" bar */
.table .col-check { width: 44px; padding-right: 0; }
.table .col-check .form-check-input { margin: 0; cursor: pointer; border-color: #a9a4c2; }
.table .form-check-input:checked,
.table .form-check-input:indeterminate { background-color: var(--dd-primary-600); border-color: var(--dd-primary-600); }
.table tr.is-selected > * { --bs-table-bg-state: var(--dd-primary-soft); }

.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--dd-primary-soft);
    border-bottom: 1px solid var(--dd-border);
    font-size: 0.875rem;
    color: var(--dd-primary-700);
}
.bulk-bar[hidden] { display: none; }

/* "Delete …?" confirmation pop-up (partials/admin/confirm-delete) */
.confirm-dialog { max-width: 400px; }
.confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fdecec;
    color: #dc3545;
    font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   Invoice document (partials/invoices/document) — laid out like the printed
   Deep Digital tax invoice: white page, teal rules and bottom bar.
   Order: heading + logo → parties → key figures → line items → notes and
   totals → payment section (message, bank details). The page is a column at
   least one A4 page tall and the payment section is pushed to its end, so
   the bank details always sit at the bottom of the (last) page. Compact
   type: 10 line items fit on one printed A4 page.
   -------------------------------------------------------------------------- */
.invoice-doc {
    --inv-teal: #199a82;
    --inv-blue: #0a78c2;
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    background: #fff;
    color: #111;
    padding: 2rem 2.25rem 2.5rem;
    border: 1px solid var(--dd-border);
    border-radius: var(--dd-radius);
    box-shadow: var(--dd-shadow);
    font-size: 0.8rem;
    line-height: 1.45;
    overflow-wrap: anywhere;          /* long emails, URLs and words never overflow */
    display: flex;
    flex-direction: column;
    aspect-ratio: 210 / 297;          /* at least an A4 page; grows with the content
                                         (no overflow: hidden here, or it couldn't grow) */
}
/* Heading row: "Tax Invoice" left, logo right */
.invoice-doc .inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.invoice-doc h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.invoice-doc .inv-logo { height: 52px; width: auto; flex-shrink: 0; }
/* Bill to / Ship to / business block */
.invoice-doc .inv-parties { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; margin-bottom: 1.1rem; }
.invoice-doc .inv-label { font-weight: 700; margin-bottom: 0.1rem; }
.invoice-doc .inv-from { text-align: right; }
.invoice-doc .inv-parties .mt-2 { margin-top: 0.35rem !important; }
/* Amount due · Due date · Issue date · Invoice number */
.invoice-doc .inv-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-bottom: 0.6rem; }
.invoice-doc .inv-meta span { display: block; font-size: 0.75rem; color: #444; }
.invoice-doc .inv-meta strong { display: block; font-size: 0.9rem; }
.invoice-doc .inv-meta .inv-big { font-size: 1.05rem; }
.invoice-doc .inv-pay-link { color: var(--inv-blue); font-weight: 700; text-decoration: none; }
.invoice-doc .inv-pay-link:hover { text-decoration: underline; }
.invoice-doc > .inv-pay-link { align-self: flex-start; font-size: 0.9rem; margin-bottom: 0.2rem; }
.invoice-doc .inv-muted { color: #666; }
/* Line items between a teal top rule and grey row rules; fixed layout so
   the columns never push the page wider than the paper */
.invoice-doc .inv-lines { width: 100%; table-layout: fixed; margin-top: 0.6rem; border-top: 3px solid var(--inv-teal); border-collapse: collapse; }
.invoice-doc .inv-lines th { font-weight: 600; font-size: 0.75rem; padding: 0.45rem 0.5rem; border-bottom: 1px solid #bbb; }
.invoice-doc .inv-lines td { padding: 0.45rem 0.5rem; border-bottom: 1px solid #ddd; vertical-align: top; }
/* Columns: Description takes the rest; Qty, Unit Price, Discount, Tax, Amount are fixed */
.invoice-doc .inv-lines th { white-space: nowrap; overflow-wrap: normal; }
.invoice-doc .inv-lines th:not(.inv-col-desc) { width: 13%; }
.invoice-doc .inv-lines th:nth-child(2) { width: 7%; }
.invoice-doc .inv-lines th:nth-child(4) { width: 12%; }
.invoice-doc .inv-lines th:nth-child(5) { width: 9%; }
.invoice-doc .inv-desc { white-space: pre-line; }
/* Under the items: notes (left) and the totals box (right) */
.invoice-doc .inv-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 1.5rem; align-items: start; margin: 1.25rem 0 1.75rem; }
.invoice-doc .inv-totals { width: 100%; }
.invoice-doc .inv-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0.5rem; }
.invoice-doc .inv-totals .inv-rule { border-top: 1px solid #bbb; margin-top: 0.25rem; padding-top: 0.35rem; }
.invoice-doc .inv-due strong { font-size: 1rem; }
/* Payment section: last block, pushed to the bottom of the page (margin-top: auto).
   Message and pay-online link on the left, bank details on the right. */
.invoice-doc .inv-payment { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; padding-top: 0.75rem; border-top: 1px solid #ccc; }
.invoice-doc .inv-message { margin: 0 0 0.4rem; }
.invoice-doc .inv-bank { display: grid; gap: 0.1rem; min-width: 210px; }
.invoice-doc .inv-bank span { color: #555; }
.invoice-doc .inv-notes { margin: 0; color: #555; }
.invoice-doc .inv-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--inv-teal); border-radius: 0 0 var(--dd-radius) var(--dd-radius); }
/* Phones only (screen): stack the blocks. Not applied when printing, where the
   page is narrow too but must keep the three-column A4 layout, nor while
   app.js measures the invoice for printing (html.inv-measuring). */
@media screen and (max-width: 767.98px) {
    :root:not(.inv-measuring) .invoice-doc { padding: 1.25rem 0.75rem 2rem; }
    :root:not(.inv-measuring) .invoice-doc .inv-logo { height: 40px; }
    /* Numbers never break; headings wrap between words ("Unit / Price");
       the description column takes what is left, so six columns fit a phone */
    :root:not(.inv-measuring) .invoice-doc .inv-lines { table-layout: auto; font-size: 0.68rem; }
    :root:not(.inv-measuring) .invoice-doc .inv-lines th, :root:not(.inv-measuring) .invoice-doc .inv-lines td { padding: 0.3rem 0.2rem; }
    :root:not(.inv-measuring) .invoice-doc .inv-lines th { white-space: normal; }
    :root:not(.inv-measuring) .invoice-doc .inv-lines th:not(.inv-col-desc) { width: auto; }
    :root:not(.inv-measuring) .invoice-doc .inv-lines td.text-end { white-space: nowrap; overflow-wrap: normal; }
    :root:not(.inv-measuring) .invoice-doc .inv-parties { grid-template-columns: 1fr; }
    :root:not(.inv-measuring) .invoice-doc .inv-from { text-align: left; }
    :root:not(.inv-measuring) .invoice-doc .inv-bottom { grid-template-columns: 1fr; gap: 0.75rem; }
    :root:not(.inv-measuring) .invoice-doc .inv-totals { order: -1; }
    :root:not(.inv-measuring) .invoice-doc .inv-payment { grid-template-columns: 1fr; gap: 0.75rem; }
    :root:not(.inv-measuring) .invoice-doc .inv-bank { min-width: 0; }
}
/* Very small phones (320px): drop the Tax column; the rate still shows in "Total GST 10%" */
@media screen and (max-width: 379.98px) {
    :root:not(.inv-measuring) .invoice-doc { padding-left: 0.5rem; padding-right: 0.5rem; }
    :root:not(.inv-measuring) .invoice-doc .inv-lines { font-size: 0.64rem; }
    :root:not(.inv-measuring) .invoice-doc .inv-lines th, :root:not(.inv-measuring) .invoice-doc .inv-lines td { padding: 0.3rem 0.12rem; }
    :root:not(.inv-measuring) .invoice-doc .inv-lines th:nth-child(5), :root:not(.inv-measuring) .invoice-doc .inv-lines td:nth-child(5) { display: none; }
}

/* Print: only the invoice (or the main content) is printed, without menus
   or buttons. A4 with 12 mm margins and 8.5 pt text: ten line items and
   the bank details fit on one page; longer invoices continue on the next page with
   the column headings repeated and no row split across pages. */
@page { size: A4; margin: 12mm; }
/* Print sizes, applied on screen for a moment while app.js measures how many
   pages the invoice needs (keep in step with the invoice rules in @media print) */
.inv-measuring .invoice-doc { width: 186mm; max-width: none; min-height: 0; aspect-ratio: auto; padding: 0 0 6mm; border: 0; font-size: 8.5pt; }
.inv-measuring .invoice-doc h1 { font-size: 16pt; }
.inv-measuring .invoice-doc .inv-logo { height: 15mm; }
.inv-measuring .invoice-doc .inv-bottom { margin: 6mm 0 8mm; }
@media print {
    .app-header, .app-sidebar, .sidebar-backdrop, .app-footer, .page-header, .no-print,
    .public-header, .public-footer, .toast-stack, .role-notice { display: none !important; }
    body, .app-main, .app-content, .public-main { background: #fff !important; margin: 0 !important; padding: 0 !important; }
    .app-content .row { display: block; margin: 0; }
    .app-content .row > * { width: 100%; max-width: 100%; padding: 0; margin-top: 0; }
    /* At least one A4 page tall (273 mm inside the margins) with the payment
       section pushed to the end. For longer invoices app.js (fitInvoicePages)
       replays the page breaks and sets --inv-pay-gap, the space above the
       payment section that puts it at the bottom of the last page. */
    .invoice-doc { border: 0; box-shadow: none; border-radius: 0; max-width: none; padding: 0 0 6mm; font-size: 8.5pt; aspect-ratio: auto; min-height: var(--inv-print-height, 271mm); }
    .invoice-doc h1 { font-size: 16pt; }
    .invoice-doc .inv-logo { height: 15mm; }
    .invoice-doc .inv-lines thead { display: table-header-group; }
    .invoice-doc .inv-bottom { margin: 6mm 0 8mm; }
    .invoice-doc .inv-lines tr, .invoice-doc .inv-bottom, .invoice-doc .inv-payment { break-inside: avoid; }
    .invoice-doc .inv-payment { margin-top: var(--inv-pay-gap, auto); }
    .invoice-doc .inv-bar { position: fixed; bottom: 0; height: 2mm; border-radius: 0; }
    a[href]::after { content: none !important; }
}

/* --------------------------------------------------------------------------
   Ticket report chart (partials/shared/ticket-report): grouped bars drawn
   with CSS heights, purple = raised, teal = resolved
   -------------------------------------------------------------------------- */
.report-chart { display: flex; align-items: flex-end; gap: 1rem; height: 220px; padding: 0.5rem 0.25rem 0; border-bottom: 1px solid var(--dd-border); }
.report-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.report-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 4px; }
.report-bars .bar { width: min(26px, 40%); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar-raised, .dot-raised { background: var(--dd-brand-purple); }
.bar-resolved, .dot-resolved { background: var(--dd-brand-teal); }
.report-label { font-size: 0.75rem; color: var(--dd-muted); padding: 0.4rem 0; white-space: nowrap; }
.report-legend { display: flex; gap: 1.25rem; font-size: 0.8rem; color: var(--dd-muted); margin-top: 0.6rem; }
.report-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 0.35rem; }

/* --------------------------------------------------------------------------
   Public pages (layouts/public): pay-online invoice page
   -------------------------------------------------------------------------- */
.public-page { background: var(--dd-body-bg); min-height: 100vh; display: flex; flex-direction: column; }
.public-header { background: #fff; border-bottom: 3px solid transparent; border-image: var(--dd-brand-gradient) 1; padding: 0.9rem 1.5rem; }
.public-main { flex: 1; padding: 2rem 1rem; }
.public-footer { text-align: center; font-size: 0.8rem; color: var(--dd-muted); padding: 1.25rem; }
.public-footer a { color: var(--dd-primary-600); text-decoration: none; }
.pay-box { max-width: 860px; margin: 0 auto 1.25rem; }

/* --------------------------------------------------------------------------
   Form extras: on/off switches in brand colour, colour swatches, signature preview
   -------------------------------------------------------------------------- */
.form-switch .form-check-input { width: 2.5em; height: 1.3em; cursor: pointer; }
.form-switch .form-check-input:checked { background-color: var(--dd-brand-teal); border-color: var(--dd-brand-teal); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--dd-border); }
.settings-row:last-child { border-bottom: 0; }
.settings-row h6 { margin: 0; font-weight: 600; font-size: 0.9rem; }
.settings-row p { margin: 0; font-size: 0.8rem; color: var(--dd-muted); }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 0.35rem; }
.signature-preview { white-space: pre-line; border: 1px dashed var(--dd-border); border-radius: 0.6rem; padding: 0.9rem 1rem; background: var(--dd-body-bg); font-size: 0.85rem; min-height: 90px; }
.invoice-lines-table td { vertical-align: top; }
.invoice-lines-table .line-total { white-space: nowrap; font-weight: 600; padding-top: 0.6rem; }
.totals-box { border: 1px solid var(--dd-border); border-radius: 0.75rem; padding: 1rem 1.25rem; background: var(--dd-body-bg); }
.totals-box > div { display: flex; justify-content: space-between; padding: 0.25rem 0; }
.totals-box .grand { border-top: 1px solid var(--dd-border); margin-top: 0.4rem; padding-top: 0.6rem; font-weight: 700; font-size: 1.05rem; }
.field-note { font-size: 0.78rem; color: var(--dd-muted); }

/* --------------------------------------------------------------------------
   Compact tables (.table-fit): no sideways scrolling on desktop — headings
   may wrap onto two lines and cells use slightly less padding.
   -------------------------------------------------------------------------- */
.table-fit > thead th { white-space: normal; padding: 0.7rem 0.75rem; }
.table-fit > tbody td { padding: 0.75rem; }
.table-fit .col-check { padding-right: 0; }

/* Freelancer name chips in "Assigned To": one colour per freelancer (Demo::personTone) */
.name-chip { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.2em 0.6em; border-radius: 999px; margin: 0.1rem 0.25rem 0.1rem 0; white-space: nowrap; }

/* Active / Inactive account switch in table rows (<x-admin.status-toggle>) */
.status-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 0; padding-left: 2.6em; white-space: nowrap; }
.status-toggle .form-check-input:not(:checked) + .form-check-label { color: var(--dd-muted); }

/* --------------------------------------------------------------------------
   Dashboard: slightly smaller type, shortcut buttons and charts
   -------------------------------------------------------------------------- */
body[data-page="dashboard"] .app-content { font-size: 0.84rem; }
body[data-page="dashboard"] .page-header { margin-bottom: 1rem; }
body[data-page="dashboard"] .page-title { font-size: 1.25rem; }
body[data-page="dashboard"] .page-subtitle { font-size: 0.82rem; }
body[data-page="dashboard"] .card-header { padding: 0.75rem 1rem; }
body[data-page="dashboard"] .card-body { padding: 1rem; }
body[data-page="dashboard"] .card-title { font-size: 0.9rem; }
body[data-page="dashboard"] .stat-card { padding: 1rem; gap: 0.75rem; }
body[data-page="dashboard"] .stat-card .stat-label { font-size: 0.75rem; }
body[data-page="dashboard"] .stat-card .stat-value { font-size: 1.45rem; }
body[data-page="dashboard"] .stat-card .stat-meta { font-size: 0.7rem; }
body[data-page="dashboard"] .stat-card .stat-icon { width: 38px; height: 38px; font-size: 1.05rem; }
body[data-page="dashboard"] .table { font-size: 0.82rem; }
body[data-page="dashboard"] .list-feed .stat-icon { width: 32px; height: 32px; font-size: 0.9rem; }

/* Row of shortcut buttons under the dashboard heading (colours from the tone-* classes) */
.quick-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quick-nav-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.9rem; border-radius: 0.55rem; border: 1px solid transparent;
    font-size: 0.82rem; font-weight: 600; text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.quick-nav-btn:hover { transform: translateY(-1px); border-color: currentColor; box-shadow: var(--dd-shadow); }
.quick-nav-btn .bi { font-size: 0.95rem; }

/* Doughnut chart with the total in the middle, and its clickable legend */
.chart-donut { position: relative; height: 180px; }
.chart-donut-center {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; pointer-events: none;
}
.chart-donut-center strong { font-size: 1.5rem; line-height: 1; }
.chart-donut-center span { font-size: 0.72rem; color: var(--dd-muted); }
.chart-legend { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.75rem; }
.chart-legend button {
    width: 100%; display: flex; align-items: center; gap: 0.4rem;
    background: none; border: 0; padding: 0.25rem 0.35rem; border-radius: 0.4rem;
    font-size: 0.78rem; color: inherit; text-align: left;
}
.chart-legend button:hover { background: var(--dd-body-bg); }
.chart-legend button strong { margin-left: auto; }
.chart-legend button.is-off { opacity: 0.4; text-decoration: line-through; }
.chart-legend .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.chart-wave { position: relative; height: 230px; }
/* Monthly Sales Growth (dashboard): bar + line chart and the three figures beside the title */
.chart-sales { position: relative; height: 260px; }
/* Tickets by Status (dashboard, full width): stacked bars per month */
.chart-tickets { position: relative; height: 280px; }
/* Dashboard row widths: Monthly Sales Growth 65% beside Project Status 35% (large screens) */
@media (min-width: 992px) {
    .col-lg-65 { flex: 0 0 auto; width: 65%; }
    .col-lg-35 { flex: 0 0 auto; width: 35%; }
}
/* Monthly Revenue card: month list, then Invoiced and Paid side by side */
.revenue-card .form-select { font-size: 0.75rem; padding-top: 0.15rem; padding-bottom: 0.15rem; max-width: 60%; }
.revenue-figures { display: flex; gap: 1.5rem; margin-top: 0.5rem; }
.revenue-figures > div { display: flex; flex-direction: column; min-width: 0; }
.revenue-figures span { font-size: 0.72rem; color: var(--dd-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.revenue-figures strong { font-size: 1.15rem; line-height: 1.3; }
.revenue-figures small { color: var(--dd-muted); font-size: 0.72rem; }
.sales-figures { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.sales-figures > div { display: flex; flex-direction: column; }
.sales-figures span { font-size: 0.72rem; color: var(--dd-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sales-figures strong { font-size: 1.05rem; }