/* ==========================================================================
   style.css — Component library
   Every rule reads from the tokens in theme.css. No raw hex values below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    direction: rtl;
    text-align: right;
    background-color: var(--surface);
    color: var(--on-surface);
    height: 100%;
    overflow: hidden; /* inner panes scroll — keeps sidebar + header fixed */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    font-weight: 700;
}

a {
    color: var(--primary);
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}

svg {
    display: block;
}

/* Icons sized by context, filled from currentColor. */
.icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: none;
}

/* An icon that sits inside running text rides the text baseline instead of
   taking a line of its own. */
.icon-inline {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-inline-end: var(--sp-1);
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* Visible focus for keyboard users only — never removed without a replacement. */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}

::selection {
    background: var(--primary-container);
    color: var(--on-primary-container);
}

/* Skip link — first tab stop. */
.skip-link {
    position: fixed;
    inset-inline-start: var(--sp-4);
    top: -100px;
    z-index: 2000;
    background: var(--primary);
    color: var(--on-primary);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--motion-base) var(--ease-standard);
}

.skip-link:focus {
    top: var(--sp-4);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scrollbars, themed. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--outline-variant) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--outline-variant);
    border-radius: var(--r-full);
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--outline);
    background-clip: content-box;
}

/* --------------------------------------------------------------------------
   2. App shell & layout
   -------------------------------------------------------------------------- */
.app-container {
    display: flex;
    height: 100dvh;
    width: 100%;
}

/* ---- Sidebar ---- */
.app-sidebar {
    flex: none;
    width: var(--sidebar-width);
    height: 100%;
    background-color: var(--surface-container-low);
    border-inline-end: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    transition: width var(--motion-slow) var(--ease-emphasized),
                transform var(--motion-slow) var(--ease-emphasized);
    z-index: 120;
}

/* Collapsed icon rail — desktop only. */
@media (min-width: 901px) {
    :root[data-sidebar="collapsed"] .app-sidebar {
        width: var(--sidebar-collapsed-width);
    }
}

.sidebar-header {
    flex: none;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--hairline);
    overflow: hidden;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* The org name is user-editable and can be arbitrarily long. Truncate it
   instead of letting it shove the collapse toggle out of the header. */
.brand-title,
.brand-sub {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The mark is the sparkle itself — no tile behind it, so the gradient reads as
   part of the glyph rather than as a badge colour. */
.brand-mark {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
}

.brand-mark .logo {
    width: 30px;
    height: 30px;
    display: block;
}

.brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    white-space: nowrap;
}

.brand-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--on-surface);
    line-height: 1.2;
}

.brand-sub {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    line-height: 1.2;
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--sp-4) var(--sp-3) var(--sp-6);
    min-height: 0;
}

.nav-group + .nav-group {
    margin-top: var(--sp-5);
}

.nav-group-label {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
    padding: 0 var(--sp-3) var(--sp-2);
    white-space: nowrap;
}

.sidebar-menu {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.6rem var(--sp-3);
    text-decoration: none;
    color: var(--on-surface-variant);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}

.nav-link:hover {
    background-color: var(--hover-wash);
    color: var(--on-surface);
}

.nav-link.active {
    background-color: var(--primary-container);
    color: var(--on-primary-container);
}

.nav-link .nav-icon {
    width: 22px;
    height: 22px;
    flex: none;
    fill: currentColor;
}

.nav-link .nav-count {
    margin-inline-start: auto;
    font-size: var(--fs-2xs);
    font-weight: 700;
    background: var(--neutral-container);
    color: var(--on-neutral-container);
    padding: 1px 7px;
    border-radius: var(--r-full);
    font-variant-numeric: tabular-nums;
}

.nav-link.active .nav-count {
    background: var(--primary);
    color: var(--on-primary);
}

/* Collapsed rail: keep the icons, drop the labels. The label is not lost —
   app.js copies it onto the link's title attribute, because a CSS tooltip
   would be clipped by the nav area's overflow-x: hidden.

   Desktop only (>=901px), and every selector is scoped to .app-sidebar:
   .nav-link / .nav-text / .nav-count are shared classes — the roles page uses
   them for its role list — so an unscoped rule empties the page itself. */
@media (min-width: 901px) {
    :root[data-sidebar="collapsed"] .app-sidebar .nav-text,
    :root[data-sidebar="collapsed"] .app-sidebar .brand-text,
    :root[data-sidebar="collapsed"] .app-sidebar .nav-group-label,
    :root[data-sidebar="collapsed"] .app-sidebar .nav-count,
    :root[data-sidebar="collapsed"] .app-sidebar .sidebar-footer-text {
        display: none;
    }

    :root[data-sidebar="collapsed"] .app-sidebar .brand {
        flex: none;
    }

    :root[data-sidebar="collapsed"] .app-sidebar .nav-link {
        justify-content: center;
        padding-inline: 0;
    }

    /* Rail header: the brand mark sits alone, centred, on the same vertical axis
       as the nav icons. The collapse toggle lives in the footer with the rest of
       the sidebar controls. */
    :root[data-sidebar="collapsed"] .app-sidebar .sidebar-header {
        justify-content: center;
        padding-inline: 0;
    }

    :root[data-sidebar="collapsed"] .app-sidebar .brand-mark {
        width: 28px;
        height: 28px;
    }

    :root[data-sidebar="collapsed"] .app-sidebar .brand-mark .logo {
        width: 22px;
        height: 22px;
    }

    :root[data-sidebar="collapsed"] .app-sidebar .sidebar-scroll {
        padding-inline: var(--sp-2);
    }

    :root[data-sidebar="collapsed"] .app-sidebar .nav-group + .nav-group {
        margin-top: var(--sp-3);
        padding-top: var(--sp-3);
        border-top: 1px solid var(--hairline);
    }
}

.sidebar-footer {
    flex: none;
    border-top: 1px solid var(--hairline);
    padding: var(--sp-3);
}

.sidebar-footer .nav-link-danger {
    color: var(--error);
}

.sidebar-footer .nav-link-danger:hover {
    background-color: var(--error-container);
    color: var(--on-error-container);
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 110;
    opacity: 0;
    transition: opacity var(--motion-base) var(--ease-standard);
}

/* ---- Main column ---- */
.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app-header {
    flex: none;
    height: var(--header-height);
    background-color: var(--surface);
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 0 var(--sp-5);
    z-index: 60;
}

.header-lead {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.header-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
}

.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-6);
    scroll-behavior: smooth;
}

.content-inner {
    max-width: var(--content-max);
    margin: 0 auto;
}

/* Page heading block — replaces ad-hoc inline flex rows. */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-5);
}

.page-head h1 {
    font-size: var(--fs-h1);
}

.page-head-sub {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-top: 2px;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.breadcrumb .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.6;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0.62rem var(--sp-5);
    border-radius: var(--r-full);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    color: var(--on-surface-variant);
    transition: background var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard);
}

.btn .icon {
    width: 18px;
    height: 18px;
}

.btn:active:not(:disabled, [aria-disabled="true"]) {
    transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    background-color: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--elevation-1);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: var(--elevation-2);
}

.btn-tonal {
    background-color: var(--secondary-container);
    color: var(--on-secondary-container);
}

.btn-tonal:hover {
    background-color: var(--secondary-hover);
}

.btn-outlined {
    border-color: var(--outline-variant);
    color: var(--on-surface-variant);
}

.btn-outlined:hover {
    background-color: var(--hover-wash);
    border-color: var(--outline);
    color: var(--on-surface);
}

.btn-text {
    color: var(--primary);
    padding-inline: var(--sp-3);
}

.btn-text:hover {
    background-color: var(--hover-wash);
}

.btn-danger {
    background-color: var(--error);
    color: var(--on-error);
}

.btn-danger:hover {
    filter: brightness(1.08);
    box-shadow: var(--elevation-2);
}

.btn-ghost-danger {
    color: var(--error);
}

.btn-ghost-danger:hover {
    background-color: var(--error-container);
    color: var(--on-error-container);
}

.btn-sm {
    padding: 0.42rem var(--sp-4);
    font-size: var(--fs-xs);
}

.btn-sm .icon {
    width: 16px;
    height: 16px;
}

.btn-block {
    width: 100%;
}

/* Loading state: spinner replaces leading icon, button stays sized. */
.btn.is-loading {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    color: var(--on-primary);
    animation: spin 0.7s linear infinite;
}

.btn-tonal.is-loading::after,
.btn-outlined.is-loading::after,
.btn-text.is-loading::after {
    color: var(--primary);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Round icon-only button. */
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
    position: relative;
    text-decoration: none;
    transition: background var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}

.icon-button:hover {
    background-color: var(--hover-wash);
    color: var(--on-surface);
}

.icon-button:active {
    background-color: var(--press-wash);
}

.icon-button svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.icon-button.has-dot::after {
    content: "";
    position: absolute;
    top: 8px;
    inset-inline-end: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
    border: 2px solid var(--surface);
}

/* --------------------------------------------------------------------------
   4. Search, fields, forms
   -------------------------------------------------------------------------- */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box .icon {
    position: absolute;
    inset-inline-start: var(--sp-3);
    width: 18px;
    height: 18px;
    fill: var(--text-muted);
    pointer-events: none;
}

.search-box input {
    width: 100%;
    min-width: 200px;
    background-color: var(--surface-container);
    border: 1px solid transparent;
    border-radius: var(--r-full);
    padding: 0.55rem var(--sp-8) 0.55rem var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--on-surface);
    outline: none;
    transition: border-color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.search-box input:focus {
    border-color: var(--primary);
    background-color: var(--surface-container-lowest);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.field > label,
.field-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--on-surface-variant);
}

.field .req {
    color: var(--error);
    margin-inline-start: 2px;
}

.input,
.select,
.textarea,
.form-control {
    width: 100%;
    padding: 0.62rem var(--sp-4);
    border-radius: var(--r-sm);
    border: 1px solid var(--outline-variant);
    background-color: var(--surface-container-lowest);
    color: var(--on-surface);
    font-size: var(--fs-sm);
    outline: none;
    transition: border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
}

.textarea {
    resize: vertical;
    min-height: 76px;
    line-height: 1.7;
}

.select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235a6268'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    /* The arrow sits at the physical left, which in this RTL document is the
       inline-end — so the room reserved for it has to be on that side too. */
    background-position: left var(--sp-3) center;
    background-size: 20px;
    padding-inline-end: var(--sp-8);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Select → the app's own dropdown
   The list a native select opens is drawn by the operating system, not by the
   page: a square panel with the platform's border, in the platform's font.
   js/ui.js replaces it with a button and a listbox, so what follows dresses
   that pair. The native control stays in the DOM as the value holder; the
   first rule takes it off the screen without taking away its focus.
   -------------------------------------------------------------------------- */
.cs {
    position: relative;
    display: block;
    min-width: 0;
}

/* Inside the form's box the wrapper is the flex item, so it takes the room. */
.field-box > .cs {
    flex: 1 1 auto;
}

/* Out of flow, invisible, still focusable: the button alone then sizes the
   box, and a focus aimed at the select — validateForm aims one at the first
   bad field — is handed on to the button, where it can be seen. */
.cs > select {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* The button is the control's twin but for the arrow: the base rule paints
   one as a background image and reserves its room, while this one is drawn
   — and so can turn as the list opens. */
.cs .cs-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding-inline-end: var(--sp-4);
    background-image: none;
    text-align: start;
    cursor: pointer;
}

.cs-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cs-btn.is-empty .cs-value {
    color: var(--text-muted);
}

.cs-caret {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    fill: currentColor;
    transition: transform var(--motion-base) var(--ease-standard);
}

.cs-btn[aria-expanded="true"] .cs-caret {
    transform: rotate(180deg);
}

/* The list. No border: a border is what makes a dropdown look like the
   platform's. A shadow lifts it off the page, and a hairline ring holds its
   edge in the light theme, where a shadow on its own goes soft. */
.cs-menu {
    position: fixed;
    z-index: 1500;
    margin: 0;
    padding: var(--sp-2);
    list-style: none;
    min-width: 180px;
    max-width: min(360px, calc(100vw - var(--sp-4)));
    max-height: 288px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface-container-lowest);
    border-radius: var(--r-md);
    box-shadow: var(--elevation-3);
    outline: 1px solid var(--hairline);
    outline-offset: -1px;
    animation: cs-drop var(--motion-fast) var(--ease-standard);
}

@keyframes cs-drop {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cs-opt {
    position: relative;
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--on-surface-variant);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background var(--motion-fast), color var(--motion-fast);
}

/* Where the pointer is, or the arrow keys. */
.cs-opt.is-active {
    background: var(--hover-wash);
    color: var(--on-surface);
}

/* The row in hand: ticked as well as weighted, so it reads without leaning
   on the shade alone. */
.cs-opt[aria-selected="true"] {
    padding-inline-end: 2.25rem;
    color: var(--on-surface);
    font-weight: 600;
}

.cs-opt[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline-end: var(--sp-3);
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 18px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / 18px no-repeat;
}

.cs-opt.is-off {
    opacity: 0.45;
    cursor: default;
}

.input:hover,
.select:hover,
.textarea:hover,
.form-control:hover {
    border-color: var(--outline);
}

.input:focus,
.select:focus,
.textarea:focus,
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-subtle);
}

.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] {
    border-color: var(--error);
}

.input[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px var(--error-container);
}

.input::placeholder,
.textarea::placeholder {
    color: var(--text-muted);
}

.field-help {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.field-error {
    font-size: var(--fs-2xs);
    color: var(--error);
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 4px;
}

.field-error.is-visible {
    display: flex;
}

/* Checkbox & switch */
.check {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--on-surface-variant);
}

.check input[type="checkbox"] {
    appearance: none;
    width: 20px;
    height: 20px;
    flex: none;
    border: 2px solid var(--outline);
    border-radius: var(--r-xs);
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: background var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
}

.check input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}

.check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Checkbox tick */
    background-color: var(--on-primary);
    -webkit-mask: var(--check-mask) center / 16px no-repeat;
    mask: var(--check-mask) center / 16px no-repeat;
}

.switch {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--on-surface-variant);
}

.switch input {
    appearance: none;
    width: 44px;
    height: 24px;
    flex: none;
    border-radius: var(--r-full);
    background: var(--outline-variant);
    position: relative;
    cursor: pointer;
    transition: background var(--motion-base) var(--ease-standard);
}

.switch input::after {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--elevation-1);
    transition: inset-inline-start var(--motion-base) var(--ease-emphasized);
}

.switch input:checked {
    background: var(--primary);
}

.switch input:checked::after {
    inset-inline-start: 23px;
    /* Switch knob */
    background: var(--on-primary);
}

/* Field grid — replaces per-page inline grids. */
.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-5);
}

.span-full {
    grid-column: 1 / -1;
}

.filter-bar {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: var(--sp-5);
}

.filter-bar .field {
    flex: 1 1 180px;
}

.filter-bar .search-box {
    flex: 2 1 260px;
}

/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */
.card {
    background-color: var(--surface-container-lowest);
    border-radius: var(--r-lg);
    border: 1px solid var(--hairline);
    box-shadow: var(--elevation-1);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}

.card-flush {
    padding: 0;
    overflow: hidden;
}

/* Flush card: header and filter row keep their own inset. */
.card-flush > .card-head {
    padding: var(--sp-5) var(--sp-5) 0;
}

.card-flush > .filter-bar {
    padding: 0 var(--sp-5);
}

.card-flush > .card-head + .card-body-pad {
    padding-top: 0;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.card-head h2,
.card-head h3 {
    font-size: var(--fs-h3);
}

.card-head-sub {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

.card-body-pad {
    padding: var(--sp-5);
}

.card-divider {
    height: 1px;
    background: var(--hairline);
    border: 0;
}

/* A divider that separates loose blocks rather than stack children needs its
   own breathing room — a stack already supplies the gap. */
.card-body-pad > .card-divider {
    margin-block: var(--sp-4);
}

.card-body-pad > .card-divider + p {
    margin: 0;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-5);
}

/* Grid items must be allowed to shrink below their content width. */
.grid-2 > *,
.grid-3 > *,
.kpi-grid > *,
.field-grid > *,
.detail-list > * {
    min-width: 0;
}

/* A card takes its own height, not its row's. The row is as tall as its
   tallest card, and a shorter one stretched to match shows the difference as
   a band of empty surface under its content — on the settings page, where a
   card holding seven fields sits beside one holding three, a panel of dead
   white. Ragged bottoms read as content; holes do not. Only cards: a plot or
   a table beside its neighbour still wants the full height. */
.grid-2 > .card,
.grid-3 > .card {
    align-self: start;
}

/* Settings is a wall of cards, and its cards come in very different heights.
   A row-based grid charges for that twice: the tallest card in a row sets the
   row, so every shorter one beside it leaves a hole — inside the card if it
   stretches to match, beside it if it does not. Two balanced columns instead
   stack each card under the last, and the wall closes up. The order is
   column-major, as in a newspaper: the first column top to bottom, then the
   second. */
.card-wall {
    columns: 420px;
    column-gap: var(--sp-5);
}

.card-wall > .card {
    break-inside: avoid;
    margin-bottom: var(--sp-5);
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-5);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* --------------------------------------------------------------------------
   6. Stat tiles (KPI) — label · value · delta · trend
   -------------------------------------------------------------------------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

/* --------------------------------------------------------------------------
   6b. Attention strip — for signals that would otherwise be a 5th/6th KPI
   tile. auto-fit stretches the last row to fill, so an odd tile count leaves
   two tiles at double width and half empty; these ride their own row instead.
   -------------------------------------------------------------------------- */
.attention {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.attention-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease;
}

.attention-item:hover {
    border-color: var(--primary);
}

.attention-icon {
    display: inline-flex;
    color: var(--text-muted);
}

.attention-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.attention-body strong {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.attention-body span {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.attention-go {
    color: var(--text-muted);
    opacity: .65;
}

.attention-item.is-alert .attention-icon,
.attention-item.is-alert strong {
    color: var(--error);
}

.stat {
    position: relative;
    background-color: var(--surface-container-lowest);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--sp-5);
    box-shadow: var(--elevation-1);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    overflow: hidden;
    transition: box-shadow var(--motion-base) var(--ease-standard),
                transform var(--motion-base) var(--ease-standard);
}

.stat:hover {
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

/* Accent hairline along the inline-start edge. */
.stat::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent, var(--primary));
    opacity: 0.9;
}

.stat-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-3);
}

.stat-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
}

.stat-icon {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: var(--r-sm);
    display: grid;
    place-items: center;
    background: var(--accent-soft, var(--primary-subtle));
    color: var(--accent, var(--primary));
}

.stat-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Proportional figures: tabular-nums makes display numbers look loose. */
.stat-value {
    font-size: var(--fs-display);
    font-weight: 700;
    color: var(--on-surface);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.stat-value .unit {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    margin-inline-start: var(--sp-2);
    white-space: nowrap;
}

.stat-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    min-height: 24px;
}

.delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--fs-2xs);
    font-weight: 700;
}

.delta .icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.delta.is-good { color: var(--delta-up-good); }
.delta.is-bad { color: var(--delta-down-bad); }
.delta.is-flat { color: var(--text-muted); }

.delta-period {
    font-weight: 500;
    color: var(--text-muted);
    margin-inline-start: 3px;
}

/* Sparkline sits in the tile's foot; de-emphasis line, accent last point. */
.sparkline {
    width: 88px;
    height: 26px;
    flex: none;
    overflow: visible;
}

.sparkline .spark-line {
    fill: none;
    stroke: var(--chart-ink-faint);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.7;
}

.sparkline .spark-dot {
    fill: var(--accent, var(--primary));
    stroke: var(--surface-container-lowest);
    stroke-width: 2;
}

/* --------------------------------------------------------------------------
   7. Badges, chips, avatars, meters
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.22rem 0.62rem;
    border-radius: var(--r-full);
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    background: var(--neutral-container);
    color: var(--on-neutral-container);
}

.badge .icon {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.badge-success { background: var(--success-container); color: var(--on-success-container); }
.badge-warning { background: var(--warning-container); color: var(--on-warning-container); }
.badge-error   { background: var(--error-container);   color: var(--on-error-container); }
.badge-info    { background: var(--info-container);    color: var(--on-info-container); }
.badge-primary { background: var(--primary-container); color: var(--on-primary-container); }
.badge-neutral { background: var(--neutral-container); color: var(--on-neutral-container); }

/* Outlined variant for low-emphasis metadata (sources, tags). */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-xs);
    border: 1px solid var(--outline-variant);
    background: transparent;
    color: var(--on-surface-variant);
    font-size: var(--fs-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--fs-xs);
    font-weight: 700;
    background: var(--primary-container);
    color: var(--on-primary-container);
    user-select: none;
}

.avatar-sm { width: 28px; height: 28px; font-size: var(--fs-2xs); }
.avatar-lg { width: 56px; height: 56px; font-size: var(--fs-h3); }

.person {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}

.person-name {
    font-weight: 600;
    color: var(--on-surface);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.person-name:hover {
    color: var(--primary);
    text-decoration: underline;
}

.person-sub {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

/* Score meter: fill carries severity, track is a lighter step of the fill hue. */
.meter {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 110px;
}

.meter-track {
    flex: 1;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--primary-container);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    border-radius: var(--r-full);
    background: var(--primary);
}

.meter-value {
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--on-surface-variant);
    font-variant-numeric: tabular-nums;
    min-width: 34px;
}

/* --------------------------------------------------------------------------
   8. Tables
   -------------------------------------------------------------------------- */
.table-container {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    text-align: right;
}

.data-table caption {
    caption-side: top;
    text-align: right;
    padding: 0 0 var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.data-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-container);
    padding: var(--sp-3) var(--sp-4);
    color: var(--on-surface-variant);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    border-bottom: 1px solid var(--outline-variant);
}

.data-table td {
    padding: 0.7rem var(--sp-4);
    border-bottom: 1px solid var(--hairline);
    color: var(--on-surface-variant);
    vertical-align: middle;
}

.data-table td.strong,
.data-table strong {
    color: var(--on-surface);
    font-weight: 600;
}

.data-table tbody tr {
    transition: background var(--motion-fast) var(--ease-standard);
}

.data-table tbody tr:hover {
    background: var(--surface-container-low);
}

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

.data-table .num {
    font-variant-numeric: tabular-nums;
}

.data-table .col-actions {
    width: 1%;
    white-space: nowrap;
}

/* Sortable header */
.th-sort {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    border-radius: var(--r-xs);
}

.th-sort:hover {
    color: var(--primary);
}

.th-sort .sort-arrow {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.35;
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.th-sort[aria-sort="ascending"] .sort-arrow,
.th-sort[aria-sort="descending"] .sort-arrow {
    opacity: 1;
    fill: var(--primary);
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.row-actions .icon-button {
    width: 34px;
    height: 34px;
}

.row-actions .icon-button svg {
    width: 18px;
    height: 18px;
}

.table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--hairline);
}

.table-count {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.pagination {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 var(--sp-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--on-surface-variant);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background var(--motion-fast) var(--ease-standard);
}

.page-btn:hover:not(:disabled) {
    background: var(--hover-wash);
}

.page-btn[aria-current="page"] {
    background: var(--primary);
    color: var(--on-primary);
}

.page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   9. Tabs & segmented control
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: var(--sp-1);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--sp-5);
    overflow-x: auto;
}

.tab {
    position: relative;
    background: none;
    border: 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    border-radius: var(--r-xs) var(--r-xs) 0 0;
    transition: color var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}

.tab:hover {
    color: var(--on-surface);
    background: var(--hover-wash);
}

.tab[aria-selected="true"] {
    color: var(--primary);
}

.tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset-inline: var(--sp-2);
    bottom: -1px;
    height: 2px;
    background: var(--primary);
    border-radius: var(--r-full);
}

.tab-panel[hidden] {
    display: none;
}

.segmented {
    display: inline-flex;
    background: var(--surface-container);
    border-radius: var(--r-full);
    padding: 3px;
    gap: 2px;
}

.segmented button {
    border: 0;
    background: transparent;
    padding: 0.4rem var(--sp-4);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--on-surface-variant);
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}

.segmented button[aria-pressed="true"] {
    background: var(--surface-container-lowest);
    color: var(--primary);
    box-shadow: var(--elevation-1);
}

/* --------------------------------------------------------------------------
   10. Dropdown / account menu
   -------------------------------------------------------------------------- */
.menu-wrap {
    position: relative;
}

.menu {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    background: var(--surface-container-lowest);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--elevation-3);
    padding: var(--sp-2);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    transition: opacity var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-standard),
                visibility var(--motion-fast);
}

.menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.menu-head {
    padding: var(--sp-3);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: var(--sp-2);
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--text-muted);
}

/* Account menu: name over role. */
.menu-head strong {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--on-surface);
}

.menu-head small {
    display: block;
    font-size: var(--fs-2xs);
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 2px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: 0.55rem var(--sp-3);
    border: 0;
    background: none;
    border-radius: var(--r-sm);
    color: var(--on-surface-variant);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard);
}

.menu-item:hover {
    background: var(--hover-wash);
    color: var(--on-surface);
}

.menu-item svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex: none;
}

.menu-item.danger {
    color: var(--error);
}

.menu-item.danger:hover {
    background: var(--error-container);
    color: var(--on-error-container);
}

.menu-sep {
    height: 1px;
    background: var(--hairline);
    margin: var(--sp-2) 0;
    border: 0;
}

/* --------------------------------------------------------------------------
   11. Modal
   -------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--scrim);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-base) var(--ease-standard),
                visibility var(--motion-base);
}

.modal-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--surface-container-lowest);
    border-radius: var(--r-lg);
    box-shadow: var(--elevation-4);
    width: 100%;
    max-width: 440px;
    max-height: calc(100dvh - 2rem);
    display: flex;
    flex-direction: column;
    transform: translateY(12px) scale(0.97);
    transition: transform var(--motion-base) var(--ease-emphasized);
}

.modal-backdrop.is-open .modal {
    transform: translateY(0) scale(1);
}

.modal-wide {
    max-width: 720px;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

.modal-head h2 {
    font-size: var(--fs-h3);
}

.modal-icon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--error-container);
    color: var(--on-error-container);
}

.modal-icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* The top padding is not decoration: a floated .box-label rises half its height
   above its box, and this element scrolls — overflow-y: auto clips the other
   axis too, so with no room above the first row the label's top is shaved off
   at the modal body's edge. */
.modal-body {
    padding: var(--sp-4) var(--sp-5) var(--sp-4);
    color: var(--on-surface-variant);
    font-size: var(--fs-sm);
    overflow-y: auto;
}

.modal-foot {
    display: flex;
    justify-content: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

.modal-foot .spacer {
    flex: 1;
}

/* --------------------------------------------------------------------------
   12. Toast
   -------------------------------------------------------------------------- */
.toast-container {
    position: fixed;
    /* Bottom corner opposite the reading start: left in RTL, right in LTR. */
    inset-inline-end: var(--sp-6);
    bottom: var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    z-index: 1100;
    pointer-events: none;
    max-width: min(420px, calc(100vw - 2rem));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    box-shadow: var(--elevation-4);
    font-size: var(--fs-sm);
    font-weight: 600;
    pointer-events: auto;
    animation: toast-in var(--motion-slow) var(--ease-emphasized);
}

.toast.is-leaving {
    animation: toast-out var(--motion-base) var(--ease-standard) forwards;
}

.toast-icon {
    width: 20px;
    height: 20px;
    flex: none;
    fill: currentColor;
    margin-top: 1px;
}

.toast-success .toast-icon { fill: var(--status-good); }
.toast-error .toast-icon { fill: var(--status-critical); }
.toast-warning .toast-icon { fill: var(--status-warning); }

.toast-close {
    margin-inline-start: auto;
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
    padding: 2px;
    border-radius: var(--r-xs);
    flex: none;
}

.toast-close:hover {
    opacity: 1;
}

.toast-close svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(8px) scale(0.96); }
}

/* --------------------------------------------------------------------------
   13. Kanban
   -------------------------------------------------------------------------- */
.kanban {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    padding-bottom: var(--sp-4);
    align-items: flex-start;
    /* In RTL the columns overflow leftwards, and Chrome propagates that
       overflow past this scroll container up to the document — widening the
       page and shoving the sidebar off-screen. contain: paint keeps it in. */
    contain: paint;
}

.kanban-col {
    /* Share the row evenly: the board fits its container instead of scrolling.
       Below the floor the board falls back to a scroll container. */
    flex: 1 1 0;
    min-width: 170px;
    max-width: 380px;
    background: var(--surface-container-low);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    transition: background var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
}

.kanban-col.is-over {
    background: var(--primary-subtle);
    border-color: var(--primary);
}

.kanban-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.kanban-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-weight: 700;
    font-size: var(--fs-sm);
}

.kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ordinal-2);
    flex: none;
}

.kanban-total {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-weight: 600;
}

.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 90px;
}

.deal-card {
    background: var(--surface-container-lowest);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    box-shadow: var(--elevation-1);
    cursor: grab;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    transition: box-shadow var(--motion-base) var(--ease-standard),
                transform var(--motion-base) var(--ease-standard),
                opacity var(--motion-fast);
}

.deal-card:hover {
    box-shadow: var(--elevation-2);
    transform: translateY(-1px);
}

.deal-card:active {
    cursor: grabbing;
}

.deal-card.is-dragging {
    opacity: 0.45;
    transform: rotate(1.5deg);
}

.deal-title {
    font-weight: 700;
    font-size: var(--fs-sm);
    color: var(--on-surface);
}

.deal-customer {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.deal-amount {
    font-weight: 700;
    color: var(--primary);
    font-size: var(--fs-sm);
}

.deal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--hairline);
    margin-top: var(--sp-1);
}

/* Touch / keyboard fallback: a real select so the board works without DnD. */
.deal-move {
    /* Narrow columns: let the select give way rather than push the row out. */
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--on-surface-variant);
    border-radius: var(--r-xs);
    font-size: var(--fs-2xs);
    font-weight: 600;
    padding: 3px 6px;
    cursor: pointer;
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   14. Calendar
   -------------------------------------------------------------------------- */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

.cal-month {
    font-size: var(--fs-h3);
    font-weight: 700;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--hairline);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    overflow: hidden;
}

.cal-head {
    background: var(--surface-container);
    padding: var(--sp-3) var(--sp-2);
    text-align: center;
    font-weight: 700;
    font-size: var(--fs-xs);
    color: var(--on-surface-variant);
}

.cal-head.is-holiday {
    color: var(--error);
}

.cal-cell {
    background: var(--surface-container-lowest);
    min-height: 96px;
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 0;
    text-align: start;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard);
}

.cal-cell:hover {
    background: var(--hover-wash);
}

.cal-cell.is-outside {
    background: var(--surface-container-low);
    color: var(--text-muted);
    cursor: default;
}

.cal-cell.is-outside .cal-day {
    opacity: 0.45;
}

.cal-cell.is-holiday .cal-day {
    color: var(--error);
}

.cal-cell.is-today {
    background: var(--primary-subtle);
    box-shadow: inset 0 0 0 2px var(--primary);
}

.cal-day {
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--on-surface-variant);
}

.cal-cell.is-today .cal-day {
    color: var(--primary);
}

.cal-event {
    font-size: var(--fs-2xs);
    padding: 2px 6px;
    border-radius: var(--r-xs);
    background: var(--primary-container);
    color: var(--on-primary-container);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.cal-event.is-done {
    background: var(--success-container);
    color: var(--on-success-container);
}

.cal-event.is-overdue {
    background: var(--error-container);
    color: var(--on-error-container);
}

.cal-more {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-weight: 600;
}

.cal-legend {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
    font-size: var(--fs-2xs);
    color: var(--text-muted);
}

.cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: none;
}

/* Date picker: the field button, then the dialog it opens. The dialog is in the
   top layer, so it escapes a modal's scrolling body and its own coordinates are
   viewport coordinates — place() sets top/left from the trigger's rect. */
.dp {
    display: block;
}

.dp-field {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    text-align: start;
    cursor: pointer;
}

.dp-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--on-surface-variant);
}

.dp-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dp-text.is-placeholder {
    color: var(--text-muted);
}

.dp-caret {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--text-muted);
}

.dp-pop {
    position: fixed;
    /* The UA sheet pins a modal dialog to inset:0 and centres it; clear that so the
       inline top/left place() writes actually take effect in RTL too. */
    inset: auto;
    margin: 0;
    padding: var(--sp-3);
    min-width: 296px;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    background: var(--surface-container-lowest);
    color: var(--on-surface);
    box-shadow: var(--elevation-3);
}

.dp-pop::backdrop {
    background: transparent;
}

.dp-head {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-2);
}

.dp-pickers {
    display: flex;
    flex: 1;
    gap: var(--sp-1);
}

/* Shorter than a form select, so the block padding that sizes .select has to go —
   otherwise the month name has no room and gets clipped. The arrow moves in with it. */
.dp-select {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding-block: 0;
    padding-inline-start: var(--sp-2);
    padding-inline-end: var(--sp-6);
    background-position: left var(--sp-1) center;
    background-size: 16px;
    font-size: var(--fs-xs);
}

.dp-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--on-surface-variant);
    cursor: pointer;
}

.dp-step:hover {
    background: var(--hover-wash);
    color: var(--on-surface);
}

.dp-step svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* The month grid is the calendar page's, only small enough to sit in a popover. */
.dp-grid .cal-cell {
    min-height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.dp-grid .cal-head {
    padding: var(--sp-2) 0;
    font-size: var(--fs-2xs);
}

.dp-cell.is-outside {
    cursor: pointer;
}

.dp-cell.is-selected {
    background: var(--primary);
    box-shadow: none;
}

.dp-cell.is-selected .cal-day {
    color: var(--on-primary);
}

.dp-foot {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--sp-2);
}

.dp-link {
    border: 0;
    background: transparent;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--r-sm);
    font: inherit;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--primary);
    cursor: pointer;
}

.dp-link:hover {
    background: var(--primary-subtle);
}

/* --------------------------------------------------------------------------
   15. Timeline
   -------------------------------------------------------------------------- */
.timeline {
    list-style: none;
    position: relative;
    padding-inline-start: var(--sp-6);
}

.timeline::before {
    content: "";
    position: absolute;
    inset-inline-start: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--hairline);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--sp-5);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(var(--sp-6) * -1 + 2px);
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--surface-container-lowest);
    box-shadow: 0 0 0 1px var(--hairline);
}

.timeline-item.is-done::before { background: var(--success); }
.timeline-item.is-overdue::before { background: var(--error); }

.timeline-title {
    font-weight: 600;
    color: var(--on-surface);
    font-size: var(--fs-sm);
}

.timeline-meta {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   16. Charts
   -------------------------------------------------------------------------- */
.chart-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    flex-wrap: wrap;
}

.chart-title {
    font-size: var(--fs-h3);
    font-weight: 700;
}

.chart-sub {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Legend is always present for >=2 series; identity is never colour-alone. */
.chart-legend {
    display: flex;
    gap: var(--sp-4);
    flex-wrap: wrap;
    font-size: var(--fs-2xs);
    color: var(--on-surface-variant);
    font-weight: 600;
}

.chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-legend-key {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex: none;
}

/* Plot area: sized to include the x-axis band, never a nested scrollbar. */
.chart-plot {
    position: relative;
    width: 100%;
    /* Let the plot follow its column instead of pinning it to its content width. */
    min-width: 0;
}

.chart-plot svg {
    /* Scale down instead of overflowing until the resize observer redraws. */
    max-width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.chart-grid-line {
    stroke: var(--chart-grid);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.chart-axis-line {
    stroke: var(--chart-axis);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.chart-tick {
    fill: var(--chart-ink-muted);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.chart-cat-label {
    fill: var(--chart-ink-muted);
    font-size: 11px;
}

/* Bars: <=24px thick, 4px rounded data-end, square at the baseline. */
.chart-bar {
    transition: opacity var(--motion-fast) var(--ease-standard);
}

.chart-bar.is-muted {
    opacity: 0.35;
}

.chart-hit {
    fill: transparent;
    cursor: pointer;
}

.chart-hit:hover + .chart-bar,
.chart-hit:focus-visible + .chart-bar {
    opacity: 0.82;
}

/* Ordinal ramp classes for funnel stages / tiers. */
.ord-1 { fill: var(--ordinal-1); background: var(--ordinal-1); }
.ord-2 { fill: var(--ordinal-2); background: var(--ordinal-2); }
.ord-3 { fill: var(--ordinal-3); background: var(--ordinal-3); }
.ord-4 { fill: var(--ordinal-4); background: var(--ordinal-4); }

.s1 { fill: var(--series-1); background: var(--series-1); }
.s2 { fill: var(--series-2); background: var(--series-2); }
.s3 { fill: var(--series-3); background: var(--series-3); }
.s4 { fill: var(--series-4); background: var(--series-4); }

.chart-tooltip {
    position: absolute;
    z-index: 30;
    background: var(--inverse-surface);
    color: var(--inverse-on-surface);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-2xs);
    font-weight: 600;
    box-shadow: var(--elevation-3);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%);
    transition: opacity var(--motion-fast) var(--ease-standard);
    white-space: nowrap;
    line-height: 1.7;
}

.chart-tooltip.is-visible {
    opacity: 1;
}

.chart-tooltip .tt-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chart-tooltip .tt-key {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex: none;
}

.chart-tooltip .tt-val {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
    padding-inline-start: var(--sp-3);
}

.chart-tooltip .tt-head {
    opacity: 0.75;
    margin-bottom: 2px;
}

/* Funnel: bars with stage-to-stage drop-off, ordinal ramp. */
.funnel {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.funnel-stage {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.funnel-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: var(--fs-xs);
}

.funnel-name {
    font-weight: 600;
    color: var(--on-surface);
}

.funnel-nums {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.funnel-track {
    height: 12px;
    border-radius: var(--r-full);
    background: var(--surface-container);
    overflow: hidden;
}

.funnel-fill {
    height: 100%;
    border-radius: var(--r-full);
    transition: width var(--motion-slow) var(--ease-emphasized);
}

.funnel-drop {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.funnel-drop.is-bad {
    color: var(--delta-down-bad);
}

.funnel-drop .icon {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

/* Table-view twin: every chart has a WCAG-clean equivalent. */
.chart-table[hidden] {
    display: none;
}

.chart-table .data-table {
    font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   17. Empty state, skeleton, misc
   -------------------------------------------------------------------------- */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-8) var(--sp-5);
    color: var(--text-muted);
}

.empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-container);
    color: var(--outline);
}

.empty-icon svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

.empty-title {
    font-weight: 700;
    color: var(--on-surface);
    font-size: var(--fs-h3);
}

.empty-text {
    font-size: var(--fs-sm);
    max-width: 42ch;
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--surface-container) 25%,
        var(--surface-container-high) 37%,
        var(--surface-container) 63%
    );
    background-size: 400% 100%;
    border-radius: var(--r-xs);
    animation: shimmer 1.4s ease-in-out infinite;
}

@keyframes shimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

.detail-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-5);
}

.detail-item dt {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 3px;
}

.detail-item dd {
    font-size: var(--fs-sm);
    color: var(--on-surface);
    font-weight: 600;
}

.section-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--on-surface);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.form-section + .form-section {
    margin-top: var(--sp-7);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--hairline);
}

.form-actions {
    display: flex;
    justify-content: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-7);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--hairline);
}

.muted { color: var(--text-muted); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-2xs); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   18. Login
   -------------------------------------------------------------------------- */
.auth-wrapper {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background:
        radial-gradient(1100px 520px at 88% -12%, var(--primary-subtle), transparent 62%),
        radial-gradient(760px 420px at 6% 108%, var(--secondary-container), transparent 58%),
        var(--surface);
    overflow-y: auto;
}

/* Material sizing: a 400dp sheet with 24dp of padding, so this reads as a
   sign-in card rather than a poster. */
.auth-card {
    position: relative;
    background: var(--surface-container-lowest);
    width: 100%;
    max-width: 400px;
    padding: var(--sp-6);
    border-radius: var(--r-xl);
    box-shadow: var(--elevation-3);
    border: 1px solid var(--hairline);
}

.auth-head {
    text-align: center;
    margin-bottom: var(--sp-6);
}

.auth-logo {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--sp-4);
    display: grid;
    place-items: center;
}

.auth-logo .logo {
    width: 40px;
    height: 40px;
    display: block;
}

.auth-head h1 {
    font-size: var(--fs-h1);
    color: var(--on-surface);
}

.auth-head p {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-top: var(--sp-2);
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin: var(--sp-4) 0 0;
    font-size: var(--fs-xs);
}

/* The theme switch wears the same moon/sun as the header button and sits in
   the card's corner, on the side the shell keeps its own header actions. */
.auth-theme {
    position: absolute;
    inset-block-start: var(--sp-4);
    inset-inline-end: var(--sp-4);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid var(--hairline);
    border-radius: var(--r-full);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--motion-fast), background var(--motion-fast);
}

.auth-theme:hover {
    color: var(--on-surface);
    background: var(--surface-container);
}

.auth-theme svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* The app's field: Material's outlined box. The label rests inside the control
   and rises onto the outline once there is something to read — or from the
   start, for a select or a date button, which always hold something. A switch
   has no box to notch and keeps its plain row.

   Sitting on the outline means the label needs a patch of background to cut
   that outline with: --field-notch, the card surface by default, overridden by
   any container whose surface differs. */
.field-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    border: 1px solid var(--outline-variant);
    border-radius: var(--r-xs);
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.field-box:hover {
    border-color: var(--outline);
}

.field-box:focus-within {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
}

.field-box:has([aria-invalid="true"]) {
    border-color: var(--error);
    box-shadow: inset 0 0 0 1px var(--error);
}

/* The box is the chrome, so the control inside drops its own — including the
   invalid ring, which the box above draws instead. */
.box-control {
    width: 100%;
    min-width: 0;
    height: 56px;
    padding: 0 var(--sp-4);
    border: 0;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--on-surface);
    font-family: inherit;
    font-size: var(--fs-body);
}

.box-control:hover,
.box-control:focus,
.box-control[aria-invalid="true"] {
    border-color: transparent;
    box-shadow: none;
}

.box-control:focus {
    outline: none;
}

/* A space, not a hint: :placeholder-shown is how the label knows to rest. */
.box-control::placeholder {
    color: transparent;
}

/* The select keeps the room its arrow needs, which the base rule had reserved. */
.box-select {
    padding-inline-end: var(--sp-8);
}

.box-textarea {
    height: auto;
    min-height: 76px;
    padding: var(--sp-5) var(--sp-4) var(--sp-2);
    line-height: 1.7;
}

/* Room for the currency suffix, and for a trailing button. That button's
   control may carry dir="ltr", whose own inline-end is the wrong side of an
   RTL box — so there the pad moves to its own start, the same physical edge. */
.box-money {
    padding-inline-end: 3.5rem;
}

.box-trailing {
    padding-inline-end: 2.75rem;
}

.box-trailing[dir="ltr"] {
    padding-inline-end: var(--sp-4);
    padding-inline-start: 2.75rem;
}

.box-label {
    position: absolute;
    inset-inline-start: var(--sp-4);
    top: 50%;
    transform: translateY(-50%);
    transform-origin: right center;
    font-size: var(--fs-body);
    color: var(--text-muted);
    pointer-events: none;
    padding: 0 var(--sp-1);
    background: var(--field-notch, var(--surface-container-lowest));
    transition: top var(--motion-fast), font-size var(--motion-fast),
                color var(--motion-fast);
}

/* Floated: it holds a value, it always holds one, or it has focus. */
.box-label.is-float,
.field-box:focus-within > .box-label,
.box-control:not(:placeholder-shown) + .box-label {
    top: 0;
    font-size: var(--fs-2xs);
}

.box-control:not(:placeholder-shown) + .box-label {
    color: var(--text-muted);
}

/* Last, so focus takes the colour back from a filled label. */
.field-box:focus-within > .box-label {
    color: var(--primary);
}

/* Material puts 16dp between stacked fields and a 40dp target on the primary
   action. The app's defaults run a step roomier, which is right for a data
   table and too loose for a two-field form. */
[data-page="login"] .field-grid {
    gap: var(--sp-4);
}

[data-page="login"] .btn-block {
    min-height: 40px;
}

.input-affix {
    position: relative;
}

.input-affix .input {
    padding-inline-end: var(--sp-8);
}

/* The button is pinned to the *wrapper's* inline-end, but a value that is
   inherently LTR — a password, an e-mail, a phone number — carries its own
   dir="ltr", and a logical padding resolves against the element's own
   direction, not the wrapper's. Left alone, such an input pads its right edge
   (where nothing sits) and its text runs under the button on the left. So for
   those the pad moves to the input's own start — the same physical side. */
.input-affix .input[dir="ltr"] {
    padding-inline-end: 0;
    padding-inline-start: var(--sp-8);
}

.input-affix .affix-btn,
.field-box .affix-btn {
    position: absolute;
    inset-inline-end: var(--sp-2);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--r-xs);
    display: grid;
    place-items: center;
}

.input-affix .affix-btn:hover,
.field-box .affix-btn:hover {
    color: var(--on-surface);
}

.input-affix .affix-btn svg,
.field-box .affix-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   19. Page overrides
   -------------------------------------------------------------------------- */

/* Customer record — head, tiles and two cards have to clear a 900px window as
   one screen, so this page runs one spacing step tighter than the default. */
[data-page="customer-details"] .page-head {
    margin-bottom: var(--sp-4);
}

[data-page="customer-details"] .kpi-grid {
    margin-bottom: var(--sp-4);
}

[data-page="customer-details"] .card-body-pad {
    padding: var(--sp-4);
}

[data-page="customer-details"] .stat {
    padding: var(--sp-4);
}

[data-page="customer-details"] .detail-list {
    gap: var(--sp-3) var(--sp-5);
}

[data-page="customer-details"] .tabs {
    margin-bottom: var(--sp-4);
}

[data-page="customer-details"] .card-body-pad > .card-divider {
    margin-block: var(--sp-3);
}

/* --------------------------------------------------------------------------
   19b. Printable document
   A sheet, not a screen: it carries its own paper colours and metrics so it
   prints the same from either theme. Everything below is plain black on white
   on purpose — the app's tokens would follow a dark theme onto the paper.
   -------------------------------------------------------------------------- */
.doc {
    width: 210mm;
    max-width: 100%;
    margin-inline: auto;
    padding: 16mm 14mm;
    background: #fff;
    color: #16181d;
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    font-size: 12px;
    line-height: 1.75;
}

.doc-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 2px solid #16181d;
}
.doc-brand { display: flex; flex-direction: column; }
.doc-brand strong { font-size: 16px; }
.doc-brand span { font-size: 11px; color: #5b6169; }
.doc-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.doc-meta span { font-size: 11px; color: #5b6169; }
.doc-meta b { color: #16181d; font-weight: 600; }
.doc-title { font-size: 20px; font-weight: 700; color: #16181d !important; }

.doc-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4);
    margin-block: var(--sp-5);
}
.doc-party {
    display: flex; flex-direction: column;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid #d8dbe0;
    border-radius: 6px;
}
.doc-party h3 {
    font-size: 11px; font-weight: 600; color: #5b6169;
    margin-bottom: 2px;
}
.doc-party strong { font-size: 13px; }
.doc-party span { font-size: 11px; color: #3c4149; }

.doc-items { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-4); }
.doc-items th,
.doc-items td { padding: 7px 8px; border-bottom: 1px solid #e3e5e8; text-align: start; }
.doc-items th { background: #f4f5f7; font-size: 11px; font-weight: 600; color: #5b6169; }
.doc-items .num { text-align: end; }
.doc-items tbody tr:last-child td { border-bottom: 1px solid #d8dbe0; }

.doc-totals { width: min(340px, 100%); margin-inline-start: auto; }
.doc-totals div {
    display: flex; justify-content: space-between; gap: var(--sp-4);
    padding: 6px 10px;
    font-size: 12px;
}
.doc-totals div span { color: #5b6169; }
.doc-totals .is-sum {
    margin-top: 4px;
    background: #f4f5f7;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
}

.doc-note {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    background: #f4f5f7;
    border-radius: 6px;
    font-size: 11px;
    color: #3c4149;
}
.doc-sign { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-6); }
.doc-sign div {
    display: flex; align-items: flex-end; justify-content: center;
    height: 22mm;
    padding-bottom: 6px;
    border: 1px dashed #c9ccd1;
    border-radius: 6px;
}
.doc-sign span { font-size: 11px; color: #5b6169; }
.doc-foot {
    display: flex; justify-content: space-between; gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding-top: var(--sp-3);
    border-top: 1px solid #e3e5e8;
    font-size: 11px;
    color: #5b6169;
}


/* --------------------------------------------------------------------------
   Invoice payment + paper-size polish
   -------------------------------------------------------------------------- */

.invoice-paper-picker{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.invoice-paper-picker span{
    font-size:12px;
    color:var(--on-surface-variant);
}

.invoice-paper-picker .select{
    width:86px;
    min-height:38px;
}

.invoice-doc{
    box-shadow:0 8px 30px rgba(20,28,38,.06);
}

.invoice-payment-section{
    margin-top:20px;
    padding-top:16px;
    border-top:1px solid #e3e5e8;
}

.invoice-payment-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
    font-size:13px;
}

.invoice-payment-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    align-items:stretch;
}

.invoice-payment-grid > :only-child{
    grid-column:1/-1;
}

.invoice-pay-card{
    min-width:0;
    padding:12px;
    border:1px solid #dfe3e8;
    border-radius:10px;
    background:#fafbfc;
    break-inside:avoid;
}

.invoice-pay-title{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:10px;
}

.invoice-pay-title > div{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.invoice-pay-title strong{
    font-size:12px;
    color:#16181d;
}

.invoice-pay-title small{
    margin-top:1px;
    font-size:9px;
    color:#737982;
}

.invoice-pay-icon{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:8px;
    background:#eef2f5;
    color:#252a31;
    font-weight:800;
}

.invoice-bank-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px 10px;
}

.invoice-bank-field{
    min-width:0;
    padding:6px 8px;
    border-radius:7px;
    background:#fff;
    border:1px solid #eceef1;
}

.invoice-bank-field span{
    display:block;
    margin-bottom:2px;
    font-size:9px;
    color:#737982;
}

.invoice-bank-field b{
    display:block;
    overflow-wrap:anywhere;
    font-size:10.5px;
    color:#20242a;
    font-weight:650;
}

.invoice-gateway-content{
    display:flex;
    align-items:center;
    gap:12px;
}

.invoice-payment-qr{
    width:88px;
    height:88px;
    flex:0 0 88px;
    padding:4px;
    object-fit:contain;
    background:#fff;
    border:1px solid #e2e5e9;
    border-radius:8px;
}

.invoice-payment-link{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.invoice-payment-link span{
    font-size:9px;
    color:#737982;
}

.invoice-payment-link a{
    display:block;
    max-width:100%;
    overflow-wrap:anywhere;
    font-size:9px;
    line-height:1.55;
    color:#25384a;
}

@media(max-width:700px){
    .invoice-payment-grid{
        grid-template-columns:1fr;
    }

    .invoice-bank-grid{
        grid-template-columns:1fr;
    }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
    @page { size: A4; margin: 12mm; }

    .app-sidebar,
    .app-header,
    .bottom-nav,
    .toast-container,
    .page-actions,
    .row-actions,
    .doc-chrome,
    .skip-link { display: none !important; }

    body,
    .app-container,
    .app-content {
        height: auto;
        overflow: visible;
        background: #fff;
    }

    /* The shell's gutters exist to frame a screen; on paper they only push the
       document off the sheet. */
    .app-content,
    .content-inner { margin: 0 !important; padding: 0 !important; }

    /* Print the sheet's own light greys rather than letting the browser drop
       them for ink saving — the totals box and header row are structure. */
    .doc {
        width: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* A row stays whole, and a long invoice repeats the header on page two. */
    .doc-items tr,
    .doc-party,
    .doc-note,
    .doc-totals,
    .doc-sign { break-inside: avoid; }
    .doc-items thead { display: table-header-group; }

    .card,
    .stat {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* =========================================================
   CRM premium page loader
   ========================================================= */

.crm-loader-stage {
    min-height: min(62vh, 520px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.35rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    animation: crm-loader-stage-in .32s ease both;
}

.crm-loader {
    width: 112px;
    height: 112px;
    position: relative;
    display: grid;
    place-items: center;
}

.crm-loader-glow {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary);
    opacity: .13;
    filter: blur(18px);
    animation: crm-loader-glow 1.8s ease-in-out infinite;
}

.crm-loader-core {
    width: 62px;
    height: 62px;
    position: relative;
    z-index: 3;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--primary);
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
    box-shadow:
        0 10px 35px rgba(0, 0, 0, .08),
        0 0 0 6px color-mix(in srgb, var(--primary) 6%, transparent);
    animation: crm-loader-core 1.8s ease-in-out infinite;
}

.crm-loader-mark {
    font-size: .9rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .07em;
}

.crm-loader-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.crm-loader-orbit-a {
    inset: 8px;
    border: 2px solid transparent;
    border-top-color: var(--primary);
    border-right-color: color-mix(in srgb, var(--primary) 30%, transparent);
    animation: crm-loader-spin 1.25s cubic-bezier(.65,.05,.36,1) infinite;
}

.crm-loader-orbit-a::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    top: 5px;
    right: 15px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 12px var(--primary);
}

.crm-loader-orbit-b {
    inset: 17px;
    border: 1px solid transparent;
    border-bottom-color: color-mix(in srgb, var(--primary) 65%, transparent);
    border-left-color: color-mix(in srgb, var(--primary) 18%, transparent);
    animation: crm-loader-spin-reverse 1.8s linear infinite;
}

.crm-loader-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    color: var(--on-surface-variant);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.crm-loader-dots {
    direction: ltr;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 28px;
}

.crm-loader-dots i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    animation: crm-loader-dot 1.15s ease-in-out infinite;
}

.crm-loader-dots i:nth-child(2) {
    animation-delay: .14s;
}

.crm-loader-dots i:nth-child(3) {
    animation-delay: .28s;
}

@keyframes crm-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes crm-loader-spin-reverse {
    to { transform: rotate(-360deg); }
}

@keyframes crm-loader-glow {
    0%, 100% {
        transform: scale(.82);
        opacity: .08;
    }
    50% {
        transform: scale(1.25);
        opacity: .2;
    }
}

@keyframes crm-loader-core {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.045);
    }
}

@keyframes crm-loader-dot {
    0%, 60%, 100% {
        transform: translateY(0) scale(.75);
        opacity: .35;
    }
    30% {
        transform: translateY(-4px) scale(1);
        opacity: 1;
    }
}

@keyframes crm-loader-stage-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-loader-stage,
    .crm-loader-glow,
    .crm-loader-core,
    .crm-loader-orbit,
    .crm-loader-dots i {
        animation: none !important;
    }

    .crm-loader-orbit-a {
        border-color: color-mix(in srgb, var(--primary) 35%, transparent);
    }
}



/* Foundation 1D — commercial license card */
.license-card { grid-column: 1 / -1; overflow: hidden; }
.license-loading { padding: var(--sp-5); text-align: center; color: var(--text-muted); }
.license-hero { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-2) 0 var(--sp-4); }
.license-hero h3 { margin:.55rem 0 .2rem; font-size:var(--fs-xl); }
.license-days { min-width:132px; text-align:center; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg); background:var(--surface-container); }
.license-days strong { display:block; font-size:2rem; line-height:1.1; }
.license-days span { display:block; margin-top:.35rem; font-size:var(--fs-xs); color:var(--text-muted); }
.license-notice { margin:0 0 var(--sp-4); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--neutral-container); color:var(--on-neutral-container); }
.license-notice-success { background:var(--success-container); color:var(--on-success-container); }
.license-notice-warning { background:var(--warning-container); color:var(--on-warning-container); }
.license-notice-error { background:var(--error-container); color:var(--on-error-container); }
.license-details { margin-bottom:var(--sp-4); }
.license-install { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-container-low); }
.license-install span { display:grid; gap:.35rem; min-width:0; }
.license-install code { direction:ltr; unicode-bidi:embed; overflow-wrap:anywhere; font-size:var(--fs-xs); }
.license-section { margin:var(--sp-4) 0; }
.license-section h4, .license-activation h4 { margin:0 0 var(--sp-3); }
.license-chips { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.license-limits { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp-2); }
.license-limits > div { display:flex; justify-content:space-between; gap:var(--sp-2); padding:var(--sp-3); border-radius:var(--r-md); background:var(--surface-container); }
.license-activation .textarea { width:100%; margin-top:var(--sp-3); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:var(--fs-xs); }
.license-actions { display:flex; gap:var(--sp-2); flex-wrap:wrap; margin-top:var(--sp-3); }
@media (max-width: 640px) { .license-hero { align-items:stretch; flex-direction:column; } .license-days { width:100%; } }


/* Foundation 2C — server-backed Notification Center */
#notifBtn { position: relative; }
.notif-count {
  position: absolute; inset-block-start: -5px; inset-inline-start: -7px;
  min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; line-height: 1;
  background: var(--danger, #d94b4b); color: #fff;
  border: 2px solid var(--surface, #fff);
}
.notif-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.notif-server-item { position:relative; width:100%; text-align:start; }
.notif-server-item.is-unread { background: color-mix(in srgb, var(--primary) 7%, transparent); }
.notif-unread-dot {
  width:8px; height:8px; border-radius:50%; flex:0 0 8px;
  background: var(--primary);
}
.notif-time { display:block; margin-top:4px; font-size:11px; opacity:.65; }
.notif-severity-success { color: var(--success, #238636); }
.notif-severity-warning { color: var(--warning, #b7791f); }
.notif-severity-critical { color: var(--danger, #d94b4b); }


/* Foundation 2C UX — dismissible Notification Center */
.notif-head-actions { display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
.notif-panel-close,
.notif-dismiss-one {
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:inline-grid; place-items:center; font:inherit; line-height:1;
  color:var(--muted, #6b7280); transition:background .15s ease, color .15s ease, transform .15s ease;
}
.notif-panel-close {
  width:30px; height:30px; border-radius:10px; font-size:22px; margin-inline-start:2px;
}
.notif-dismiss-one {
  width:28px; height:28px; border-radius:9px; font-size:20px; flex:0 0 auto;
  opacity:.55; margin-inline-start:4px;
}
.notif-panel-close:hover,
.notif-dismiss-one:hover { background:color-mix(in srgb, var(--danger, #d94b4b) 10%, transparent); color:var(--danger, #d94b4b); }
.notif-dismiss-one:hover { opacity:1; transform:scale(1.04); }
.notif-server-item { cursor:pointer; }
.notif-server-item:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.notif-server-item:not(.is-unread) { opacity:.78; }
.notif-dismiss-all { white-space:nowrap; }
@media (max-width: 640px) {
  .notif-head { align-items:flex-start; }
  .notif-head-actions { gap:2px; }
  .notif-head-actions .btn { padding-inline:6px; }
}


/* CRM scroll time picker */
.tp {
    display: block;
    width: 100%;
}

.tp-field {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: right;
    cursor: pointer;
}

.tp-text {
    flex: 1;
    direction: ltr;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tp-text.is-placeholder {
    direction: rtl;
}

.tp-clock,
.tp-caret {
    flex: 0 0 auto;
    opacity: .68;
}

.tp-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0,0,0,.34);
    backdrop-filter: blur(4px);
}

.tp-dialog {
    width: min(390px, calc(100vw - 28px));
    background: var(--surface, #fff);
    color: var(--on-surface, #1f1f1f);
    border: 1px solid var(--hairline, rgba(0,0,0,.12));
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,.24);
}

.tp-title {
    font-weight: 800;
    font-size: 16px;
    text-align: center;
    margin-bottom: 10px;
}

.tp-preview {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 4px 0 14px;
    font-size: 34px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tp-preview strong {
    min-width: 52px;
    text-align: center;
}

.tp-wheel-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    padding: 0 14px 7px;
    text-align: center;
    color: var(--on-surface-variant, #666);
    font-size: 12px;
}

.tp-wheels {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 26px 1fr;
    align-items: center;
    gap: 4px;
}

.tp-wheels::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 48px;
    transform: translateY(-50%);
    pointer-events: none;
    border-radius: 14px;
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.tp-wheel {
    position: relative;
    z-index: 1;
    height: 210px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    touch-action: pan-y;
}

.tp-wheel::-webkit-scrollbar {
    display: none;
}

.tp-spacer {
    height: 81px;
}

.tp-option {
    width: 100%;
    height: 48px;
    display: block;
    border: 0;
    background: transparent;
    color: var(--on-surface-variant, #666);
    font: inherit;
    font-size: 18px;
    cursor: pointer;
    scroll-snap-align: center;
    opacity: .56;
    transition:
        opacity .15s ease,
        transform .15s ease,
        font-weight .15s ease;
}

.tp-option.is-selected {
    color: var(--on-surface, #111);
    font-size: 21px;
    font-weight: 800;
    opacity: 1;
    transform: scale(1.05);
}

.tp-separator {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 26px;
    font-weight: 800;
}

.tp-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.tp-actions-gap {
    flex: 1;
}

@media (max-width: 520px) {
    .tp-overlay {
        align-items: end;
        padding: 0;
    }

    .tp-dialog {
        width: 100%;
        border-radius: 26px 26px 0 0;
        padding: 20px 18px max(20px, env(safe-area-inset-bottom));
    }

    .tp-wheel {
        height: 230px;
    }

    .tp-spacer {
        height: 91px;
    }
}

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


/* CRM manual time entry */
.tp-manual {
    width: 64px;
    min-width: 0;
    height: 52px;
    padding: 0 8px;
    border: 1px solid var(--hairline, rgba(0,0,0,.15));
    border-radius: 14px;
    background: var(--surface-container-lowest, transparent);
    color: var(--on-surface, inherit);
    font: inherit;
    font-size: 27px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    outline: none;
}

.tp-manual:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
}

.tp-preview > span {
    font-size: 28px;
    font-weight: 800;
}


/* Invoice A4 per-print signature controls */
.invoice-print-options{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:0 auto 16px;
    max-width:210mm;
    padding:14px;
    border:1px solid #e3e5e8;
    border-radius:10px;
    background:#fff;
}

.invoice-print-options-title{
    grid-column:1/-1;
    display:flex;
    flex-direction:column;
    gap:3px;
}

.invoice-print-options-title span{
    font-size:11px;
    color:#69717c;
}

.invoice-print-options label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:12px;
}

.invoice-print-options .invoice-print-check{
    flex-direction:row;
    align-items:center;
}

.doc-sign > div{
    position:relative;
    overflow:hidden;
}

#sellerDigitalSign{
    position:absolute;
    inset:5mm 6mm 8mm;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6mm;
    pointer-events:none;
}

#sellerDigitalSign .invoice-sign-asset{
    display:flex;
    align-items:center;
    justify-content:center;
    width:auto;
    height:auto;
    padding:0;
    border:0;
}

#sellerDigitalSign img{
    display:block;
    max-width:34mm;
    max-height:15mm;
    width:auto;
    height:auto;
    object-fit:contain;
}

/*
 * Nested digital-signature elements must never inherit the dashed
 * signature-box border. This also removes the stray vertical line.
 */
.doc-sign #sellerDigitalSign,
.doc-sign #sellerDigitalSign *,
.doc-sign .invoice-sign-asset{
    border:0 !important;
}

@media(max-width:700px){
    .invoice-print-options{
        grid-template-columns:1fr;
    }
}


/* Invoice signature alignment refinement */
.doc-sign > div{
    position:relative;
    height:24mm;
    padding-bottom:7px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
}

#sellerDigitalSign{
    position:absolute;
    top:3mm;
    left:6mm;
    right:6mm;
    bottom:9mm;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:4mm;

    padding:0 !important;
    border:0 !important;
}

#sellerDigitalSign .invoice-sign-asset{
    display:flex;
    align-items:center;
    justify-content:center;

    width:30mm;
    height:13mm;

    padding:0 !important;
    margin:0;
    border:0 !important;
}

#sellerDigitalSign img{
    display:block;
    width:auto;
    height:auto;
    max-width:30mm;
    max-height:13mm;
    object-fit:contain;
}

.doc-sign > div > span:not(#sellerDigitalSign){
    position:relative;
    z-index:2;
    margin:0;
    line-height:1.4;
}

@media print{
    .doc-sign > div{
        height:24mm;
    }

    #sellerDigitalSign{
        top:3mm;
        bottom:9mm;
    }
}


/* Invoice signature final positioning */

/* Whole seal/signature area: slightly higher */
#sellerDigitalSign{
    top:1mm !important;
    bottom:11mm !important;
    left:5mm !important;
    right:5mm !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    /* Two assets sit closer together */
    gap:1.5mm !important;

    padding:0 !important;
    margin:0 !important;
}

/* Default = two selected assets */
#sellerDigitalSign .invoice-sign-asset{
    flex:0 0 auto !important;

    width:27mm !important;
    height:14mm !important;

    padding:0 !important;
    margin:0 !important;
    border:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

#sellerDigitalSign .invoice-sign-asset img{
    display:block !important;

    width:auto !important;
    height:auto !important;

    max-width:27mm !important;
    max-height:14mm !important;

    object-fit:contain !important;
    margin:0 !important;
}

/* Only one seal/signature selected = larger and centered */
#sellerDigitalSign .invoice-sign-asset:only-child{
    width:38mm !important;
    height:17mm !important;
}

#sellerDigitalSign .invoice-sign-asset:only-child img{
    max-width:38mm !important;
    max-height:17mm !important;
}

/* Keep caption safely below the images */
.doc-sign > div > span:not(#sellerDigitalSign){
    position:relative;
    z-index:3;
}

/* Same geometry in the actual printed PDF/paper */
@media print{
    #sellerDigitalSign{
        top:1mm !important;
        bottom:11mm !important;
        gap:1.5mm !important;
    }
}


/* Invoice bank transfer notice */
.invoice-bank-notice{
    min-height:42px;
    padding:7px 9px;
    border:1px solid #e3e7eb;
    border-radius:6px;
    background:#fafbfc;

    display:flex;
    align-items:center;
    gap:7px;

    font-size:9.5px;
    line-height:1.65;
    color:#5f6873;
}

.invoice-bank-notice-icon{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;
    border-radius:50%;
    background:#eef2f5;

    font-size:11px;
    color:#536170;
}

@media print{
    .invoice-bank-notice{
        min-height:0;
        padding:6px 8px;
        font-size:9px;
        break-inside:avoid;
    }
}

/* Notifications Premium Filter V2 */
.notif-filter-card{
    margin-bottom:18px;
    overflow:hidden;
    border:1px solid rgba(35,60,78,.08);
    box-shadow:0 8px 28px rgba(29,55,75,.05);
}

.notif-filter-body{
    padding:0 !important;
}

.notif-filter-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:19px 22px 17px;
    border-bottom:1px solid #edf1f3;
    background:
        radial-gradient(circle at 8% 10%,rgba(24,160,137,.09),transparent 30%),
        linear-gradient(135deg,#f8fcfb 0%,#fff 70%);
}

.notif-filter-head h3{
    margin:3px 0 3px;
    font-size:17px;
    font-weight:800;
    color:#263d50;
}

.notif-filter-head p{
    margin:0;
    font-size:11px;
    color:#82909c;
}

.notif-filter-kicker{
    display:block;
    font-size:9px;
    font-weight:800;
    color:#168d7b;
}

.notif-filter-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:7px 11px;
    border-radius:999px;
    background:#eaf7f4;
    color:#147d6c;
    font-size:10px;
    font-weight:800;
}

.notif-filter-badge::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#20a88f;
}

.notif-filter-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px 16px !important;
    padding:20px 22px;
    margin:0 !important;
}

.notif-filter-grid .field{
    min-width:0;
    margin:0 !important;
}

.notif-filter-grid .field > span{
    display:block;
    margin-bottom:7px;
    color:#516475;
    font-size:10.5px;
    font-weight:700;
}

.notif-filter-grid select,
.notif-filter-grid input{
    width:100%;
    min-height:42px;
    border:1px solid #dde5e9;
    border-radius:10px;
    background:#fbfcfd;
    box-shadow:none;
    transition:.18s ease;
}

.notif-filter-grid select:hover,
.notif-filter-grid input:hover{
    background:#fff;
    border-color:#cbd6dc;
}

.notif-filter-grid select:focus,
.notif-filter-grid input:focus{
    outline:none;
    background:#fff;
    border-color:#69b9aa;
    box-shadow:0 0 0 3px rgba(26,151,130,.09);
}

.notif-search-field{
    grid-column:span 2;
}

.notif-search-box{
    position:relative;
}

.notif-search-box input{
    padding-right:42px !important;
}

.notif-search-symbol{
    position:absolute;
    right:14px;
    top:50%;
    transform:translateY(-50%);
    z-index:2;
    font-size:14px;
    opacity:.5;
    pointer-events:none;
}

.notif-filter-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 22px;
    background:#fafcfc;
    border-top:1px solid #edf1f3;
}

.notif-changes-switch{
    display:flex;
    align-items:center;
    gap:11px;
    cursor:pointer;
    user-select:none;
}

.notif-changes-switch > input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.notif-switch-ui{
    position:relative;
    flex:0 0 38px;
    width:38px;
    height:21px;
    border-radius:20px;
    background:#d5dee3;
    transition:.2s ease;
}

.notif-switch-ui::after{
    content:"";
    position:absolute;
    right:3px;
    top:3px;
    width:15px;
    height:15px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 2px 5px rgba(0,0,0,.16);
    transition:.2s ease;
}

.notif-changes-switch > input:checked + .notif-switch-ui{
    background:#199780;
}

.notif-changes-switch > input:checked + .notif-switch-ui::after{
    transform:translateX(-17px);
}

.notif-switch-text{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.notif-switch-text strong{
    color:#3b5061;
    font-size:11px;
}

.notif-switch-text small{
    color:#8b98a3;
    font-size:9px;
}

.notif-filter-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

.notif-filter-actions .btn{
    min-height:39px;
    padding-inline:17px;
    border-radius:10px;
}

@media(max-width:1100px){
    .notif-filter-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .notif-search-field{
        grid-column:span 3;
    }
}

@media(max-width:760px){
    .notif-filter-head{
        align-items:flex-start;
        padding:17px;
    }

    .notif-filter-badge{
        display:none;
    }

    .notif-filter-grid{
        grid-template-columns:1fr 1fr;
        padding:17px;
    }

    .notif-search-field{
        grid-column:1/-1;
    }

    .notif-filter-footer{
        flex-direction:column;
        align-items:stretch;
        padding:15px 17px;
    }

    .notif-filter-actions{
        width:100%;
    }

    .notif-filter-actions .btn{
        flex:1;
    }
}

@media(max-width:520px){
    .notif-filter-grid{
        grid-template-columns:1fr;
    }

    .notif-search-field{
        grid-column:auto;
    }

    .notif-filter-actions{
        flex-direction:column-reverse;
    }

    .notif-filter-actions .btn{
        width:100%;
    }

    .notif-switch-text small{
        display:none;
    }
}

/* Notifications Desktop + Dark Fix V1 */

/* ---------- Desktop refinement ---------- */

@media (min-width:1101px){

    .notif-filter-card{
        max-width:1180px;
        margin-left:auto;
        margin-right:auto;
    }

    .notif-filter-head{
        padding:17px 20px 15px;
    }

    .notif-filter-grid{
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:13px 14px !important;
        padding:18px 20px 19px;
    }

    .notif-search-field{
        grid-column:span 2;
    }

    .notif-filter-grid select,
    .notif-filter-grid input{
        min-height:40px;
    }

    .notif-filter-footer{
        padding:13px 20px;
    }
}


/* ---------- Dark mode ---------- */

[data-theme="dark"] .notif-filter-card,
body.dark .notif-filter-card,
.dark-mode .notif-filter-card{
    background:#11191d;
    border-color:rgba(255,255,255,.075);
    box-shadow:0 10px 32px rgba(0,0,0,.22);
}

[data-theme="dark"] .notif-filter-head,
body.dark .notif-filter-head,
.dark-mode .notif-filter-head{
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(28,170,145,.11),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #121d20 0%,
            #11191d 72%
        );

    border-bottom-color:rgba(255,255,255,.07);
}

[data-theme="dark"] .notif-filter-head h3,
body.dark .notif-filter-head h3,
.dark-mode .notif-filter-head h3{
    color:#edf4f5;
}

[data-theme="dark"] .notif-filter-head p,
body.dark .notif-filter-head p,
.dark-mode .notif-filter-head p{
    color:#89999f;
}

[data-theme="dark"] .notif-filter-kicker,
body.dark .notif-filter-kicker,
.dark-mode .notif-filter-kicker{
    color:#4bc3ae;
}

[data-theme="dark"] .notif-filter-badge,
body.dark .notif-filter-badge,
.dark-mode .notif-filter-badge{
    background:rgba(31,174,149,.13);
    color:#65d1be;
}


/* fields */

[data-theme="dark"] .notif-filter-grid .field > span,
body.dark .notif-filter-grid .field > span,
.dark-mode .notif-filter-grid .field > span{
    color:#91a3aa;
}

[data-theme="dark"] .notif-filter-grid input,
[data-theme="dark"] .notif-filter-grid select,
body.dark .notif-filter-grid input,
body.dark .notif-filter-grid select,
.dark-mode .notif-filter-grid input,
.dark-mode .notif-filter-grid select{
    color:#e9f0f2 !important;
    background:#182226 !important;
    border-color:#2b393e !important;
    color-scheme:dark;
}

[data-theme="dark"] .notif-filter-grid input:hover,
[data-theme="dark"] .notif-filter-grid select:hover,
body.dark .notif-filter-grid input:hover,
body.dark .notif-filter-grid select:hover,
.dark-mode .notif-filter-grid input:hover,
.dark-mode .notif-filter-grid select:hover{
    background:#1c282c !important;
    border-color:#3b4d53 !important;
}

[data-theme="dark"] .notif-filter-grid input:focus,
[data-theme="dark"] .notif-filter-grid select:focus,
body.dark .notif-filter-grid input:focus,
body.dark .notif-filter-grid select:focus,
.dark-mode .notif-filter-grid input:focus,
.dark-mode .notif-filter-grid select:focus{
    background:#1c282c !important;
    border-color:#3fb49f !important;
    box-shadow:0 0 0 3px rgba(44,181,157,.12) !important;
}

[data-theme="dark"] .notif-filter-grid input::placeholder,
body.dark .notif-filter-grid input::placeholder,
.dark-mode .notif-filter-grid input::placeholder{
    color:#708187 !important;
    opacity:1;
}

[data-theme="dark"] .notif-filter-grid select option,
body.dark .notif-filter-grid select option,
.dark-mode .notif-filter-grid select option{
    color:#e8eff1;
    background:#182226;
}

[data-theme="dark"] .notif-search-symbol,
body.dark .notif-search-symbol,
.dark-mode .notif-search-symbol{
    opacity:.65;
}


/* footer */

[data-theme="dark"] .notif-filter-footer,
body.dark .notif-filter-footer,
.dark-mode .notif-filter-footer{
    background:#141e22;
    border-top-color:rgba(255,255,255,.07);
}

[data-theme="dark"] .notif-switch-text strong,
body.dark .notif-switch-text strong,
.dark-mode .notif-switch-text strong{
    color:#d9e4e7;
}

[data-theme="dark"] .notif-switch-text small,
body.dark .notif-switch-text small,
.dark-mode .notif-switch-text small{
    color:#74868d;
}

[data-theme="dark"] .notif-switch-ui,
body.dark .notif-switch-ui,
.dark-mode .notif-switch-ui{
    background:#3b494e;
}


/* ---------- Tablet/mobile stays fluid ---------- */

@media (max-width:1100px){

    .notif-filter-card{
        max-width:none;
    }
}

/* Notifications KPI Cards V1 */

.notif-kpi-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    max-width:1180px;
    margin:0 auto 18px;
}

.notif-kpi-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
    min-height:108px;
    padding:17px 18px;
    overflow:hidden;
    border:1px solid rgba(35,60,78,.08);
    border-radius:16px;
    background:#fff;
    box-shadow:0 7px 24px rgba(29,55,75,.045);
}

.notif-kpi-card::after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    left:-34px;
    bottom:-40px;
    border-radius:50%;
    opacity:.07;
    background:currentColor;
    pointer-events:none;
}

.notif-kpi-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 45px;
    width:45px;
    height:45px;
    border-radius:13px;
    font-size:18px;
}

.notif-kpi-content{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.notif-kpi-content > span{
    margin-bottom:2px;
    color:#657786;
    font-size:10.5px;
    font-weight:700;
}

.notif-kpi-content > strong{
    color:#20384b;
    font-size:24px;
    line-height:1.35;
    font-weight:900;
}

.notif-kpi-content > small{
    margin-top:1px;
    color:#97a2ab;
    font-size:9px;
}

.notif-kpi-total{
    color:#168d7b;
}

.notif-kpi-total .notif-kpi-icon{
    color:#168d7b;
    background:rgba(22,141,123,.10);
}

.notif-kpi-unread{
    color:#3478c9;
}

.notif-kpi-unread .notif-kpi-icon{
    color:#3478c9;
    background:rgba(52,120,201,.10);
}

.notif-kpi-delay{
    color:#d18a25;
}

.notif-kpi-delay .notif-kpi-icon{
    color:#c77e18;
    background:rgba(209,138,37,.11);
}

.notif-kpi-mode{
    color:#7c65c8;
}

.notif-kpi-mode .notif-kpi-icon{
    color:#725abb;
    background:rgba(124,101,200,.11);
}

.notif-kpi-mode-value{
    font-size:18px !important;
    padding-top:4px;
    padding-bottom:3px;
}


/* Dark mode */

[data-theme="dark"] .notif-kpi-card,
body.dark .notif-kpi-card,
.dark-mode .notif-kpi-card{
    background:#11191d;
    border-color:rgba(255,255,255,.075);
    box-shadow:0 8px 26px rgba(0,0,0,.18);
}

[data-theme="dark"] .notif-kpi-content > span,
body.dark .notif-kpi-content > span,
.dark-mode .notif-kpi-content > span{
    color:#91a1a8;
}

[data-theme="dark"] .notif-kpi-content > strong,
body.dark .notif-kpi-content > strong,
.dark-mode .notif-kpi-content > strong{
    color:#f1f6f7;
}

[data-theme="dark"] .notif-kpi-content > small,
body.dark .notif-kpi-content > small,
.dark-mode .notif-kpi-content > small{
    color:#687a81;
}

[data-theme="dark"] .notif-kpi-total .notif-kpi-icon,
body.dark .notif-kpi-total .notif-kpi-icon,
.dark-mode .notif-kpi-total .notif-kpi-icon{
    background:rgba(34,177,153,.14);
}

[data-theme="dark"] .notif-kpi-unread .notif-kpi-icon,
body.dark .notif-kpi-unread .notif-kpi-icon,
.dark-mode .notif-kpi-unread .notif-kpi-icon{
    background:rgba(65,139,222,.14);
}

[data-theme="dark"] .notif-kpi-delay .notif-kpi-icon,
body.dark .notif-kpi-delay .notif-kpi-icon,
.dark-mode .notif-kpi-delay .notif-kpi-icon{
    background:rgba(218,148,50,.14);
}

[data-theme="dark"] .notif-kpi-mode .notif-kpi-icon,
body.dark .notif-kpi-mode .notif-kpi-icon,
.dark-mode .notif-kpi-mode .notif-kpi-icon{
    background:rgba(139,113,218,.14);
}


/* Tablet */

@media(max-width:1100px){
    .notif-kpi-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:none;
    }
}


/* Mobile */

@media(max-width:560px){
    .notif-kpi-grid{
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .notif-kpi-card{
        min-height:91px;
        padding:13px;
        gap:10px;
        border-radius:13px;
    }

    .notif-kpi-icon{
        flex-basis:38px;
        width:38px;
        height:38px;
        border-radius:11px;
        font-size:15px;
    }

    .notif-kpi-content > strong{
        font-size:20px;
    }

    .notif-kpi-content > small{
        display:none;
    }

    .notif-kpi-mode-value{
        font-size:16px !important;
    }
}

/* Notifications Delay Card V2 */

.notif-delay-card{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(210px,.8fr) minmax(300px,1.25fr);
    align-items:center;
    gap:18px;
    max-width:1180px;
    min-height:128px;
    margin:0 auto 18px;
    padding:19px 22px;
    overflow:hidden;
    border:1px solid rgba(35,60,78,.09);
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 24px rgba(29,55,75,.045);
}

.notif-delay-accent{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:3px;
    background:#c88720;
}

.notif-delay-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:12px;
    background:#fff3df;
    color:#bc7610;
    font-size:21px;
}

.notif-delay-main{
    min-width:0;
}

.notif-delay-title{
    margin-bottom:7px;
    color:#3c5060;
    font-size:12px;
    font-weight:800;
}

.notif-delay-value{
    display:flex;
    align-items:baseline;
    gap:7px;
}

.notif-delay-value strong{
    color:#1d3446;
    font-size:27px;
    line-height:1.1;
    font-weight:900;
}

.notif-delay-value span{
    color:#596d7b;
    font-size:11px;
    font-weight:700;
}

.notif-delay-subtitle{
    margin-top:7px;
    color:#9a6a22;
    font-size:10px;
}

.notif-delay-side{
    padding-right:20px;
    border-right:1px solid #edf0f2;
}

.notif-delay-side-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:9px;
}

.notif-delay-side-head > span:first-child{
    color:#667985;
    font-size:10px;
    font-weight:700;
}

.notif-delay-count{
    padding:4px 8px;
    border-radius:999px;
    background:#f4f6f7;
    color:#61727e;
    font-size:9px;
    font-weight:700;
}

.notif-delay-users{
    display:grid;
    gap:5px;
}

.notif-delay-user{
    display:grid;
    grid-template-columns:25px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:28px;
    padding:3px 7px;
    border-radius:8px;
    background:#fafbfc;
}

.notif-delay-rank{
    display:flex;
    align-items:center;
    justify-content:center;
    width:21px;
    height:21px;
    border-radius:7px;
    background:#edf2f4;
    color:#667985;
    font-size:9px;
    font-weight:800;
}

.notif-delay-user-name{
    overflow:hidden;
    color:#405463;
    font-size:10px;
    font-weight:700;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.notif-delay-user > strong{
    color:#bd7610;
    font-size:11px;
}

.notif-delay-empty{
    padding:8px 10px;
    border-radius:9px;
    background:#f3faf7;
    color:#28846e;
    font-size:10px;
}


/* Dark mode */

[data-theme="dark"] .notif-delay-card,
body.dark .notif-delay-card,
.dark-mode .notif-delay-card{
    background:#11191d;
    border-color:rgba(255,255,255,.075);
    box-shadow:0 8px 26px rgba(0,0,0,.18);
}

[data-theme="dark"] .notif-delay-icon,
body.dark .notif-delay-icon,
.dark-mode .notif-delay-icon{
    background:rgba(205,137,35,.14);
    color:#e3a345;
}

[data-theme="dark"] .notif-delay-title,
body.dark .notif-delay-title,
.dark-mode .notif-delay-title{
    color:#dce6e9;
}

[data-theme="dark"] .notif-delay-value strong,
body.dark .notif-delay-value strong,
.dark-mode .notif-delay-value strong{
    color:#f1f6f7;
}

[data-theme="dark"] .notif-delay-value span,
body.dark .notif-delay-value span,
.dark-mode .notif-delay-value span{
    color:#98a8ae;
}

[data-theme="dark"] .notif-delay-subtitle,
body.dark .notif-delay-subtitle,
.dark-mode .notif-delay-subtitle{
    color:#d9a14d;
}

[data-theme="dark"] .notif-delay-side,
body.dark .notif-delay-side,
.dark-mode .notif-delay-side{
    border-right-color:rgba(255,255,255,.075);
}

[data-theme="dark"] .notif-delay-side-head > span:first-child,
body.dark .notif-delay-side-head > span:first-child,
.dark-mode .notif-delay-side-head > span:first-child{
    color:#91a1a8;
}

[data-theme="dark"] .notif-delay-count,
body.dark .notif-delay-count,
.dark-mode .notif-delay-count{
    background:#1d292e;
    color:#a7b5ba;
}

[data-theme="dark"] .notif-delay-user,
body.dark .notif-delay-user,
.dark-mode .notif-delay-user{
    background:#162126;
}

[data-theme="dark"] .notif-delay-rank,
body.dark .notif-delay-rank,
.dark-mode .notif-delay-rank{
    background:#223137;
    color:#aebbc0;
}

[data-theme="dark"] .notif-delay-user-name,
body.dark .notif-delay-user-name,
.dark-mode .notif-delay-user-name{
    color:#d6e0e3;
}


/* Tablet */

@media(max-width:900px){

    .notif-delay-card{
        grid-template-columns:auto 1fr;
    }

    .notif-delay-side{
        grid-column:1/-1;
        padding-top:13px;
        padding-right:0;
        border-top:1px solid #edf0f2;
        border-right:0;
    }

    [data-theme="dark"] .notif-delay-side,
    body.dark .notif-delay-side,
    .dark-mode .notif-delay-side{
        border-top-color:rgba(255,255,255,.075);
    }
}


/* Mobile */

@media(max-width:560px){

    .notif-delay-card{
        gap:12px;
        min-height:0;
        padding:15px;
        border-radius:14px;
    }

    .notif-delay-icon{
        width:40px;
        height:40px;
        font-size:18px;
    }

    .notif-delay-value strong{
        font-size:23px;
    }

    .notif-delay-side{
        padding-top:11px;
    }
}

/* =========================================================
   Notifications / Persian Date — CRM UI Integration V2
   ========================================================= */

.notif-filter-grid .crm-persian-date{
    width:100%;
    min-width:0;
}

.notif-filter-grid .crm-persian-date-display{
    width:100%;
    min-width:0;
    height:42px;
    min-height:42px;
    padding:0 13px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text);
    font:inherit;
    font-weight:500;
    text-align:right;
    cursor:pointer;
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.notif-filter-grid .crm-persian-date-display:hover{
    border-color:var(--primary);
}

.notif-filter-grid .crm-persian-date-display:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(14,165,164,.12);
}

.notif-filter-grid .crm-persian-date-display:not(.has-value){
    color:var(--muted);
    font-weight:400;
}

.notif-filter-grid .crm-persian-date .date-tools{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:5px;
    padding-inline:3px;
}

.notif-filter-grid .crm-persian-date .date-tools .btn{
    min-height:0;
    height:auto;
    padding:2px 0;
    border:0;
    background:transparent;
    box-shadow:none;
    font-size:12px;
    font-weight:700;
    color:var(--primary);
}

[data-theme="dark"] .notif-filter-grid .crm-persian-date-display,
body.dark .notif-filter-grid .crm-persian-date-display,
.dark-mode .notif-filter-grid .crm-persian-date-display{
    background:#142126 !important;
    color:#edf4f6 !important;
    border-color:#304148 !important;
}

[data-theme="dark"] .notif-filter-grid .crm-persian-date-display:not(.has-value),
body.dark .notif-filter-grid .crm-persian-date-display:not(.has-value),
.dark-mode .notif-filter-grid .crm-persian-date-display:not(.has-value){
    color:#81959e !important;
}

[data-theme="dark"] .notif-filter-grid .crm-persian-date-display:hover,
body.dark .notif-filter-grid .crm-persian-date-display:hover,
.dark-mode .notif-filter-grid .crm-persian-date-display:hover{
    border-color:#3e8ca0 !important;
}

@media(max-width:700px){
    .notif-filter-grid .crm-persian-date-display{
        height:44px;
        min-height:44px;
    }
}

/* =========================================================
   Notifications — Main CRM Design System Alignment V1
   Visual-only override. Keep notification behaviour intact.
   ========================================================= */

/* ---------- KPI area ---------- */

.notif-kpi-grid{
  gap:16px !important;
}

.notif-kpi-card{
  min-height:142px !important;
  padding:20px 22px !important;
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--elevation-1) !important;
  overflow:hidden !important;
}

.notif-kpi-card::after{
  display:none !important;
}

.notif-kpi-content > span{
  color:var(--text-muted) !important;
  font-size:13px !important;
  font-weight:700 !important;
}

.notif-kpi-content > strong,
.notif-kpi-mode-value{
  color:var(--text) !important;
  font-size:28px !important;
  font-weight:800 !important;
}

.notif-kpi-content > small{
  color:var(--text-muted) !important;
  font-size:12px !important;
}

/* Keep semantic icon differences, but use the CRM family */
.notif-kpi-icon{
  width:42px !important;
  height:42px !important;
  border-radius:var(--r-sm) !important;
  box-shadow:none !important;
}

.notif-kpi-total .notif-kpi-icon{
  background:color-mix(in srgb,var(--primary) 10%,var(--surface)) !important;
  color:var(--primary) !important;
}

.notif-kpi-unread .notif-kpi-icon{
  background:color-mix(in srgb,var(--primary) 8%,var(--surface)) !important;
  color:var(--primary) !important;
}

.notif-kpi-delay .notif-kpi-icon{
  background:color-mix(in srgb,var(--warning,#b7791f) 10%,var(--surface)) !important;
  color:var(--warning,#b7791f) !important;
}

.notif-kpi-mode .notif-kpi-icon{
  background:color-mix(in srgb,var(--primary) 8%,var(--surface)) !important;
  color:var(--primary) !important;
}


/* ---------- Overdue card ---------- */

.notif-delay-card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--elevation-1) !important;
  min-height:132px !important;
}

.notif-delay-accent{
  background:var(--warning,#b7791f) !important;
  width:3px !important;
}

.notif-delay-icon{
  border-radius:var(--r-sm) !important;
  background:color-mix(in srgb,var(--warning,#b7791f) 10%,var(--surface)) !important;
  color:var(--warning,#b7791f) !important;
  box-shadow:none !important;
}

.notif-delay-title,
.notif-delay-value strong,
.notif-delay-user-name{
  color:var(--text) !important;
}

.notif-delay-subtitle,
.notif-delay-side-head > span:first-child{
  color:var(--text-muted) !important;
}

.notif-delay-side{
  background:transparent !important;
  border-color:var(--border) !important;
}

.notif-delay-user{
  background:var(--surface-container-low, var(--surface-2)) !important;
  border:0 !important;
  box-shadow:none !important;
}

.notif-delay-rank,
.notif-delay-count{
  background:var(--surface-container, var(--surface-2)) !important;
  color:var(--text-muted) !important;
}


/* ---------- Main filter card ---------- */

.notif-filter-card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--elevation-1) !important;
  overflow:hidden !important;
}

.notif-filter-body{
  padding:20px 22px !important;
}

/* Remove the custom green premium strip */
.notif-filter-head{
  background:transparent !important;
  background-image:none !important;
  border-bottom:1px solid var(--border) !important;
  padding:0 0 18px !important;
  margin:0 0 18px !important;
  min-height:auto !important;
}

.notif-filter-head::before,
.notif-filter-head::after{
  display:none !important;
}

.notif-filter-kicker{
  color:var(--primary) !important;
  font-size:12px !important;
  font-weight:700 !important;
}

.notif-filter-head h3{
  color:var(--text) !important;
  font-size:20px !important;
  font-weight:800 !important;
  margin-top:4px !important;
}

.notif-filter-head p{
  color:var(--text-muted) !important;
  font-size:12px !important;
}

.notif-filter-badge{
  background:var(--primary-subtle) !important;
  color:var(--primary) !important;
  border:0 !important;
  box-shadow:none !important;
}

.notif-filter-badge::before{
  background:var(--primary) !important;
}


/* ---------- Standard CRM fields ---------- */

.notif-filter-grid{
  gap:14px 16px !important;
}

.notif-filter-grid .field{
  gap:7px !important;
}

.notif-filter-grid .field > span{
  color:var(--text-muted) !important;
  font-size:12px !important;
  font-weight:700 !important;
}

.notif-filter-grid input,
.notif-filter-grid select,
.notif-filter-grid .crm-persian-date-display{
  min-height:46px !important;
  height:46px !important;
  padding:0 13px !important;

  background:var(--surface) !important;
  color:var(--text) !important;

  border:1px solid var(--border) !important;
  border-radius:var(--r-sm) !important;

  box-shadow:none !important;
  font:inherit !important;
}

.notif-filter-grid input:hover,
.notif-filter-grid select:hover,
.notif-filter-grid .crm-persian-date-display:hover{
  border-color:color-mix(in srgb,var(--primary) 40%,var(--border)) !important;
}

.notif-filter-grid input:focus,
.notif-filter-grid select:focus,
.notif-filter-grid .crm-persian-date-display:focus{
  border-color:var(--primary) !important;
  outline:none !important;
  box-shadow:0 0 0 3px var(--primary-subtle) !important;
}

.notif-filter-grid input::placeholder,
.notif-filter-grid .crm-persian-date-display:not(.has-value){
  color:var(--text-muted) !important;
  opacity:.8 !important;
}


/* ---------- Search ---------- */

.notif-search-box{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.notif-search-box input{
  padding-inline-start:40px !important;
}

.notif-search-symbol{
  color:var(--text-muted) !important;
}


/* ---------- Persian date ---------- */

.notif-filter-grid .crm-persian-date{
  gap:5px !important;
}

.notif-filter-grid .crm-persian-date .date-tools{
  margin-top:4px !important;
  gap:10px !important;
}

.notif-filter-grid .crm-persian-date .date-tools .btn{
  min-height:auto !important;
  padding:2px 0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--primary) !important;
  box-shadow:none !important;
  font-size:12px !important;
}


/* ---------- Filter footer ---------- */

.notif-filter-footer{
  margin-top:18px !important;
  padding:16px 0 0 !important;
  background:transparent !important;
  border-top:1px solid var(--border) !important;
  border-radius:0 !important;
}

.notif-switch-text strong{
  color:var(--text) !important;
}

.notif-switch-text small{
  color:var(--text-muted) !important;
}

.notif-switch-ui{
  background:var(--surface-container, var(--surface-2)) !important;
  border:1px solid var(--border) !important;
}

.notif-changes-switch > input:checked + .notif-switch-ui{
  background:var(--primary) !important;
  border-color:var(--primary) !important;
}


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

.notif-filter-actions .btn{
  min-height:42px !important;
  border-radius:var(--r-sm) !important;
  box-shadow:none !important;
}

#notifApply{
  background:var(--primary) !important;
  border-color:var(--primary) !important;
  color:#fff !important;
}

#notifReset{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}


/* ---------- Dark mode: use the SAME CRM surfaces ---------- */

[data-theme="dark"] .notif-kpi-card,
[data-theme="dark"] .notif-delay-card,
[data-theme="dark"] .notif-filter-card,
body.dark .notif-kpi-card,
body.dark .notif-delay-card,
body.dark .notif-filter-card,
.dark-mode .notif-kpi-card,
.dark-mode .notif-delay-card,
.dark-mode .notif-filter-card{
  background:var(--surface) !important;
  border-color:var(--border) !important;
  box-shadow:var(--elevation-1) !important;
}

[data-theme="dark"] .notif-filter-head,
body.dark .notif-filter-head,
.dark-mode .notif-filter-head{
  background:transparent !important;
  background-image:none !important;
  border-color:var(--border) !important;
}

[data-theme="dark"] .notif-filter-grid input,
[data-theme="dark"] .notif-filter-grid select,
[data-theme="dark"] .notif-filter-grid .crm-persian-date-display,
body.dark .notif-filter-grid input,
body.dark .notif-filter-grid select,
body.dark .notif-filter-grid .crm-persian-date-display,
.dark-mode .notif-filter-grid input,
.dark-mode .notif-filter-grid select,
.dark-mode .notif-filter-grid .crm-persian-date-display{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--border) !important;
}

[data-theme="dark"] .notif-delay-side,
body.dark .notif-delay-side,
.dark-mode .notif-delay-side{
  background:transparent !important;
  border-color:var(--border) !important;
}


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

@media (max-width:900px){
  .notif-kpi-grid{
    gap:10px !important;
  }

  .notif-filter-body{
    padding:16px !important;
  }

  .notif-filter-head{
    padding-bottom:14px !important;
    margin-bottom:14px !important;
  }
}

@media (max-width:600px){
  .notif-kpi-card{
    min-height:112px !important;
    padding:15px !important;
  }

  .notif-kpi-content > strong,
  .notif-kpi-mode-value{
    font-size:23px !important;
  }

  .notif-filter-grid input,
  .notif-filter-grid select,
  .notif-filter-grid .crm-persian-date-display{
    min-height:44px !important;
    height:44px !important;
  }
}


/* =========================================================
   Notifications — Field Visibility Fix V2
   Match main CRM form controls
   ========================================================= */

.notif-filter-grid input,
.notif-filter-grid select,
.notif-filter-grid .crm-persian-date-display{
    width:100% !important;
    min-height:46px !important;
    height:46px !important;

    background:var(--surface-container-low, #f8fafc) !important;
    color:var(--text) !important;

    border:1px solid var(--outline-variant, #d7dee5) !important;
    border-radius:var(--r-sm, 10px) !important;

    padding:0 13px !important;
    box-shadow:none !important;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease !important;
}

/* Search must also visibly have a box */
.notif-search-box{
    position:relative !important;
    width:100% !important;
}

.notif-search-box input{
    border:1px solid var(--outline-variant, #d7dee5) !important;
    background:var(--surface-container-low, #f8fafc) !important;
}

/* Hover */
.notif-filter-grid input:hover,
.notif-filter-grid select:hover,
.notif-filter-grid .crm-persian-date-display:hover{
    border-color:color-mix(
        in srgb,
        var(--primary) 45%,
        var(--outline-variant, #d7dee5)
    ) !important;
    background:var(--surface) !important;
}

/* Focus - same visual language as CRM */
.notif-filter-grid input:focus,
.notif-filter-grid select:focus,
.notif-filter-grid .crm-persian-date-display:focus{
    outline:none !important;
    border-color:var(--primary) !important;
    background:var(--surface) !important;
    box-shadow:0 0 0 3px var(--primary-subtle) !important;
}

/* Placeholder */
.notif-filter-grid input::placeholder,
.notif-filter-grid .crm-persian-date-display:not(.has-value){
    color:var(--text-muted) !important;
    opacity:.85 !important;
}

/* Keep select arrow visually inside its field */
.notif-filter-grid select{
    cursor:pointer !important;
}

/* Dark mode */
[data-theme="dark"] .notif-filter-grid input,
[data-theme="dark"] .notif-filter-grid select,
[data-theme="dark"] .notif-filter-grid .crm-persian-date-display,
body.dark .notif-filter-grid input,
body.dark .notif-filter-grid select,
body.dark .notif-filter-grid .crm-persian-date-display,
.dark-mode .notif-filter-grid input,
.dark-mode .notif-filter-grid select,
.dark-mode .notif-filter-grid .crm-persian-date-display{
    background:var(--surface-container-low, #142126) !important;
    color:var(--text) !important;
    border-color:var(--outline-variant, #304148) !important;
}

[data-theme="dark"] .notif-filter-grid input:hover,
[data-theme="dark"] .notif-filter-grid select:hover,
[data-theme="dark"] .notif-filter-grid .crm-persian-date-display:hover,
body.dark .notif-filter-grid input:hover,
body.dark .notif-filter-grid select:hover,
body.dark .notif-filter-grid .crm-persian-date-display:hover,
.dark-mode .notif-filter-grid input:hover,
.dark-mode .notif-filter-grid select:hover,
.dark-mode .notif-filter-grid .crm-persian-date-display:hover{
    border-color:var(--primary) !important;
    background:var(--surface) !important;
}


/* =========================================================
   Viewport Shell Stability Fix
   Prevents bottom blank/rectangle artifacts during resize,
   zoom and desktop/mobile breakpoint transitions.
   ========================================================= */

@media (min-width: 901px) {
    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
    }

    .app-container {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        max-height: 100vh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .app-main {
        min-width: 0;
        min-height: 0;
        height: 100%;
        max-height: 100%;
        overflow: hidden;
    }

    .app-sidebar {
        height: 100%;
        min-height: 0;
        max-height: 100%;
    }

    .app-content {
        min-width: 0;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* =========================================================
   Notifications — responsive two-column cards
   ========================================================= */

.notif-items-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.notif-items-grid > .card {
    margin-bottom: 0 !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    align-self: start;
}

.notif-items-grid > .card > .card-body-pad {
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box;
}

/* Keep notification cards comfortable on narrower screens. */
@media (max-width: 1100px) {
    .notif-items-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .notif-items-grid {
        gap: 12px;
    }
}

/* =========================================================
   Account page — compact desktop layout
   ========================================================= */

.account-page-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 18px;
    align-items: start;
}

.account-page-grid > .card {
    margin-top: 0 !important;
    min-width: 0;
}

.account-security-card,
.account-permission-card {
    overflow: hidden;
}

.account-page-grid .card-head {
    padding-top: 18px;
    padding-bottom: 14px;
}

.account-page-grid .card-body-pad {
    padding-top: 16px;
    padding-bottom: 18px;
}

.account-permission-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.account-permission-reason {
    grid-column: 1 / -1;
}

.account-permission-reason textarea {
    min-height: 82px;
    resize: vertical;
}

.account-permission-submit {
    display: flex;
    justify-content: flex-start;
}

.account-permission-submit .btn {
    width: auto;
    min-width: 150px;
    padding-inline: 24px;
}

#prMine,
#prPending {
    margin-top: 4px;
}

#prMine h4,
#prPending h4 {
    margin: 14px 0 8px;
}

@media (max-width: 1150px) {
    .account-page-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .account-page-grid {
        gap: 14px;
    }

    .account-permission-fields {
        grid-template-columns: 1fr;
    }

    .account-permission-reason {
        grid-column: auto;
    }

    .account-permission-submit .btn {
        width: 100%;
    }
}

/* Notifications — remove redundant search icon */
.notif-search-symbol {
    display: none !important;
}

.notif-search-box input {
    padding-inline-start: 14px !important;
    padding-inline-end: 14px !important;
}

/* ======================================================================
   TICKET CHAT LIVE UI
   ====================================================================== */

#ticketThreadMessages {
    margin: 4px 0 2px;
}

.ticket-chat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding: 12px 8px;
    scroll-behavior: smooth;
}

.ticket-chat-row {
    display: flex;
    width: 100%;
}

.ticket-chat-row.is-mine {
    justify-content: flex-start;
}

.ticket-chat-row.is-other {
    justify-content: flex-end;
}

.ticket-chat-bubble {
    width: fit-content;
    max-width: min(78%, 620px);
    padding: 11px 13px 10px;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
}

.ticket-chat-row.is-mine .ticket-chat-bubble {
    background:
        color-mix(in srgb, var(--primary) 11%, var(--surface, #fff));
    border-color:
        color-mix(in srgb, var(--primary) 24%, var(--border));
    border-bottom-right-radius: 6px;
}

.ticket-chat-row.is-other .ticket-chat-bubble {
    background: var(--surface, #fff);
    border-color: var(--border);
    border-bottom-left-radius: 6px;
}

.ticket-chat-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 6px;
    font-size: 12px;
}

.ticket-chat-meta strong {
    font-size: 12px;
    color: var(--text);
}

.ticket-chat-meta time {
    color: var(--muted);
    white-space: nowrap;
    font-size: 11px;
}

.ticket-chat-text {
    color: var(--text);
    line-height: 1.9;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ticket-chat-file {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid
        color-mix(in srgb, var(--primary) 22%, var(--border));
    border-radius: 11px;
    background:
        color-mix(in srgb, var(--primary) 5%, transparent);
    color: var(--text);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.ticket-chat-file:hover {
    background:
        color-mix(in srgb, var(--primary) 10%, transparent);
    border-color:
        color-mix(in srgb, var(--primary) 42%, var(--border));
    transform: translateY(-1px);
}

.ticket-chat-file span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-chat-empty,
.ticket-chat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 92px;
    padding: 18px;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 16px;
    background:
        color-mix(in srgb, var(--surface, #fff) 94%, transparent);
}

.ticket-chat-empty span {
    color: var(--muted);
    font-size: 12px;
}

/* Dark theme: same hierarchy, softer surfaces */
[data-theme="dark"] .ticket-chat-row.is-mine .ticket-chat-bubble,
.dark .ticket-chat-row.is-mine .ticket-chat-bubble {
    background:
        color-mix(in srgb, var(--primary) 20%, var(--surface, #15171c));
    border-color:
        color-mix(in srgb, var(--primary) 34%, var(--border));
    box-shadow: 0 4px 16px rgba(0, 0, 0, .16);
}

[data-theme="dark"] .ticket-chat-row.is-other .ticket-chat-bubble,
.dark .ticket-chat-row.is-other .ticket-chat-bubble {
    background:
        color-mix(in srgb, var(--surface, #15171c) 92%, white 8%);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .13);
}

@media (max-width: 700px) {
    .ticket-chat-bubble {
        max-width: 88%;
    }

    .ticket-chat-list {
        max-height: 52vh;
        padding-inline: 2px;
    }
}

/* TICKET CHAT SELF/OTHER FINAL */

/* Logged-in user's messages: RIGHT */
.ticket-chat-row.is-mine {
    justify-content: flex-start !important;
    direction: rtl;
}

/* Other participant's messages: LEFT */
.ticket-chat-row.is-other {
    justify-content: flex-end !important;
    direction: rtl;
}

/*
 * This project is RTL, therefore flex-start is visually RIGHT
 * and flex-end is visually LEFT.
 */

/* My message = site's primary blue */
.ticket-chat-row.is-mine .ticket-chat-bubble {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
    border-bottom-right-radius: 6px !important;
    border-bottom-left-radius: 18px !important;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary) 18%, transparent);
}

.ticket-chat-row.is-mine .ticket-chat-meta strong,
.ticket-chat-row.is-mine .ticket-chat-meta time,
.ticket-chat-row.is-mine .ticket-chat-text {
    color: #fff !important;
}

.ticket-chat-row.is-mine .ticket-chat-meta time {
    opacity: .78;
}

/* Attachment inside my blue message */
.ticket-chat-row.is-mine .ticket-chat-file {
    color: #fff !important;
    border-color: rgba(255,255,255,.30) !important;
    background: rgba(255,255,255,.12) !important;
}

.ticket-chat-row.is-mine .ticket-chat-file:hover {
    background: rgba(255,255,255,.19) !important;
    border-color: rgba(255,255,255,.42) !important;
}


/* Other person's message = normal site surface */
.ticket-chat-row.is-other .ticket-chat-bubble {
    background: var(--surface-container-lowest, var(--surface, #fff)) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    border-bottom-left-radius: 6px !important;
    border-bottom-right-radius: 18px !important;
}

.ticket-chat-row.is-other .ticket-chat-meta strong,
.ticket-chat-row.is-other .ticket-chat-text {
    color: var(--text) !important;
}

.ticket-chat-row.is-other .ticket-chat-meta time {
    color: var(--muted) !important;
}


/* DARK MODE */
[data-theme="dark"] .ticket-chat-row.is-mine .ticket-chat-bubble,
body.dark .ticket-chat-row.is-mine .ticket-chat-bubble,
.dark-mode .ticket-chat-row.is-mine .ticket-chat-bubble {
    background: var(--primary) !important;
    border-color: color-mix(in srgb, var(--primary) 82%, white 18%) !important;
    color: #fff !important;
    box-shadow: 0 5px 16px rgba(0,0,0,.25);
}

[data-theme="dark"] .ticket-chat-row.is-other .ticket-chat-bubble,
body.dark .ticket-chat-row.is-other .ticket-chat-bubble,
.dark-mode .ticket-chat-row.is-other .ticket-chat-bubble {
    background: var(--surface-container-lowest, var(--surface, #15171c)) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}


/* Keep bubbles compact like chat messages */
.ticket-chat-bubble {
    width: fit-content !important;
    max-width: min(78%, 620px) !important;
}

@media (max-width: 700px) {
    .ticket-chat-bubble {
        max-width: 88% !important;
    }
}

/* ==========================================================
   LIVE NOTIFICATION POPUP
   ========================================================== */

.live-notification-host {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    width: min(360px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1200;
    pointer-events: none;
}

.live-notification-toast {
    position: relative;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16);
    direction: rtl;
    text-align: right;
    pointer-events: auto;
    cursor: pointer;

    opacity: 0;
    transform: translateY(-8px) scale(.98);
    animation: crmLiveNotifIn .22s ease forwards;
}

.live-notification-toast::before {
    content: "";
    position: absolute;
    inset-block: 10px;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--primary);
}

.live-notification-title {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.7;
}

.live-notification-body {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.8;
    color: var(--text-muted, var(--muted));
}

.live-notification-toast.is-leaving {
    animation: crmLiveNotifOut .32s ease forwards;
}

@keyframes crmLiveNotifIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes crmLiveNotifOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-6px) scale(.98);
    }
}

@media (max-width: 640px) {
    .live-notification-host {
        position: fixed;
        top: 68px;
        inset-inline: 12px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .live-notification-toast,
    .live-notification-toast.is-leaving {
        animation-duration: .01ms;
    }
}

/* ==========================================================
   TICKET REPLY COMPOSER V1
   ========================================================== */

.ticket-reply-composer {
    position: sticky;
    bottom: 8px;
    z-index: 10;

    display: flex;
    align-items: flex-end;
    gap: 8px;

    width: calc(100% - 4px);
    margin: 12px 2px 2px;
    padding: 7px;

    border: 1px solid var(--border);
    border-radius: 18px;

    background: var(--surface, #fff);

    box-shadow:
        0 8px 28px rgba(15, 23, 42, .10),
        0 2px 8px rgba(15, 23, 42, .05);
}

.ticket-reply-input {
    flex: 1 1 auto;
    min-width: 0;

    height: 42px;
    min-height: 42px;
    max-height: 110px;

    margin: 0;
    padding: 9px 8px;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    resize: none;
    overflow-y: auto;

    background: transparent !important;
    color: var(--text);

    font: inherit;
    line-height: 1.65;
}

.ticket-reply-input:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.ticket-reply-input::placeholder {
    color: var(--muted);
}

.ticket-reply-attach,
.ticket-reply-send {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border-radius: 13px;

    cursor: pointer;
    user-select: none;
}

.ticket-reply-attach {
    border: 1px solid var(--border);
    background: var(--surface-container, var(--surface));
    color: var(--text);
}

.ticket-reply-attach span {
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-1px);
}

.ticket-reply-send {
    border: 0;
    background: var(--primary);
    color: #fff;
}

.ticket-reply-send svg {
    width: 19px;
    height: 19px;
}

.ticket-reply-attach:hover {
    border-color: var(--primary);
}

.ticket-reply-send:hover {
    filter: brightness(.95);
}

[data-theme="dark"] .ticket-reply-composer,
body.dark .ticket-reply-composer,
.dark-mode .ticket-reply-composer {
    background: var(--surface, #17191f);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}

@media (max-width: 700px) {
    .ticket-reply-composer {
        bottom: 6px;
        gap: 6px;
        padding: 6px;
        border-radius: 16px;
    }

    .ticket-reply-attach,
    .ticket-reply-send {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .ticket-reply-input {
        height: 40px;
        min-height: 40px;
    }
}

/* === TICKET THREAD MODAL V2 === */

/*
 * Ticket conversation behaves like a messenger:
 * fixed header + scrolling conversation + fixed composer.
 * Rules are scoped to this modal only.
 */

.ticket-thread-modal {
    height: min(880px, calc(100vh - 32px));
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ticket-thread-modal .modal-head {
    position: relative;
    flex: 0 0 auto;
    padding-left: 64px;
    border-bottom: 1px solid var(--outline-variant);
}

.ticket-thread-close {
    position: absolute;
    top: 18px;
    left: 20px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: 0;
    background: transparent;
    color: var(--on-surface-variant);
    font: inherit;
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.ticket-thread-close:hover {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

.ticket-thread-close:active {
    transform: scale(.94);
}

/* No bottom action/footer in the ticket conversation. */
.ticket-thread-modal .modal-foot {
    display: none;
}

.ticket-thread-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
}

.ticket-thread-modal .modal-body > .stack {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Ticket information stays above the scrolling conversation. */
.ticket-thread-modal .modal-body > .stack > .card:first-child {
    flex: 0 0 auto;
}

/* Only this area receives the remaining height. */
.ticket-thread-modal #ticketThreadMessages {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    margin-top: var(--sp-3);
}

.ticket-thread-modal #ticketThreadMessages > .ticket-chat-list {
    height: 100%;
    max-height: none;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* Composer always remains visible at the bottom. */
.ticket-thread-modal .ticket-reply-composer {
    flex: 0 0 auto;
    margin-top: var(--sp-3);
    margin-bottom: var(--sp-3);
    position: relative;
    z-index: 2;
}

/* Closed/read-only message also remains outside chat scrolling. */
.ticket-thread-modal .modal-body > .stack > .card.card-soft:last-child {
    flex: 0 0 auto;
    margin-top: var(--sp-3);
}

@media (max-width: 720px) {
    .ticket-thread-modal {
        height: calc(100dvh - 16px);
        max-height: calc(100dvh - 16px);
    }

    .ticket-thread-modal .modal-head {
        padding-left: 54px;
    }

    .ticket-thread-close {
        top: 14px;
        left: 12px;
        width: 36px;
        height: 36px;
    }
}

/* === END TICKET THREAD MODAL V2 === */

/* === TICKET SMART COMPOSER V3 === */

.ticket-thread-modal .ticket-reply-composer {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
    min-height: 56px;
    padding: 7px;
    border: 1px solid var(--outline-variant);
    border-radius: 20px;
    background: var(--surface-container-lowest);
    box-shadow: 0 5px 18px rgba(0,0,0,.07);
}

.ticket-thread-modal .ticket-reply-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    max-height: 120px;
    resize: none;
    overflow-y: auto;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    color: var(--on-surface);
    padding: 10px 5px;
    line-height: 1.7;
    font: inherit;
}

.ticket-thread-modal .ticket-reply-input::placeholder {
    color: var(--on-surface-variant);
    opacity: .8;
}

.ticket-thread-modal .ticket-composer-emoji,
.ticket-thread-modal .ticket-reply-attach,
.ticket-thread-modal .ticket-reply-action {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    transition:
        background-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.ticket-thread-modal .ticket-composer-emoji,
.ticket-thread-modal .ticket-reply-attach {
    background: transparent;
    color: var(--on-surface-variant);
}

.ticket-thread-modal .ticket-composer-emoji:hover,
.ticket-thread-modal .ticket-reply-attach:hover {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

.ticket-thread-modal .ticket-composer-emoji {
    font-size: 24px;
}

.ticket-thread-modal .ticket-paperclip {
    display: block;
    font-size: 21px;
    line-height: 1;
    transform: rotate(-12deg);
}

.ticket-thread-modal .ticket-reply-action {
    background: var(--primary);
    color: var(--on-primary);
}

.ticket-thread-modal .ticket-reply-action:hover {
    filter: brightness(.96);
}

.ticket-thread-modal .ticket-reply-action:active,
.ticket-thread-modal .ticket-composer-emoji:active,
.ticket-thread-modal .ticket-reply-attach:active {
    transform: scale(.94);
}

.ticket-thread-modal .ticket-reply-action svg {
    width: 20px;
    height: 20px;
}

.ticket-thread-modal .ticket-action-mic {
    display: block;
    font-size: 20px;
    line-height: 1;
}

.ticket-thread-modal .ticket-action-send {
    display: none;
    line-height: 0;
}

.ticket-thread-modal .ticket-reply-action.is-send .ticket-action-mic {
    display: none;
}

.ticket-thread-modal .ticket-reply-action.is-send .ticket-action-send {
    display: block;
}

.ticket-thread-modal .ticket-reply-action.is-voice .ticket-action-mic {
    display: block;
}

.ticket-thread-modal .ticket-reply-action.is-voice .ticket-action-send {
    display: none;
}


/* Emoji popup */

.ticket-thread-modal .ticket-emoji-panel {
    position: absolute;
    right: 6px;
    bottom: calc(100% + 9px);
    z-index: 20;
    width: 244px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 9px;
    border: 1px solid var(--outline-variant);
    border-radius: 16px;
    background: var(--surface-container-lowest);
    box-shadow: 0 10px 30px rgba(0,0,0,.14);
}

.ticket-thread-modal .ticket-emoji-panel[hidden] {
    display: none;
}

.ticket-thread-modal .ticket-emoji-item {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
}

.ticket-thread-modal .ticket-emoji-item:hover {
    background: var(--surface-container-high);
}


/* RTL visual order:
   right side: emoji
   middle: text
   left side: paperclip + voice/send
*/

.ticket-thread-modal .ticket-reply-composer {
    direction: rtl;
}

@media (max-width: 560px) {
    .ticket-thread-modal .ticket-reply-composer {
        gap: 3px;
        padding: 6px;
        border-radius: 18px;
    }

    .ticket-thread-modal .ticket-composer-emoji,
    .ticket-thread-modal .ticket-reply-attach,
    .ticket-thread-modal .ticket-reply-action {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .ticket-thread-modal .ticket-emoji-panel {
        width: 226px;
    }
}

/* === END TICKET SMART COMPOSER V3 === */

/* === TICKET SMART COMPOSER V3 ORDER FIX === */

/*
 * Visual order:
 *
 * RIGHT: voice/send + attachment
 * CENTER: textarea
 * LEFT: emoji
 */

.ticket-thread-modal .ticket-reply-composer {
    direction: ltr !important;

    display: grid !important;
    grid-template-columns: 44px 1fr 44px 44px !important;
    grid-template-areas: "emoji text attach action" !important;

    align-items: end !important;
    column-gap: 4px !important;

    min-height: 58px !important;
    padding: 7px 8px !important;

    overflow: visible !important;
}


/* LEFT */

.ticket-thread-modal .ticket-composer-emoji {
    grid-area: emoji !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    margin: 0 !important;
    align-self: end !important;
}


/* TEXT */

.ticket-thread-modal .ticket-reply-input {
    grid-area: text !important;

    direction: rtl !important;
    text-align: right !important;

    width: 100% !important;
    min-width: 0 !important;

    min-height: 42px !important;
    max-height: 120px !important;

    margin: 0 !important;
    padding: 9px 8px !important;

    align-self: end !important;
}


/* PAPERCLIP */

.ticket-thread-modal .ticket-reply-attach {
    grid-area: attach !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    margin: 0 !important;
    align-self: end !important;
}


/* VOICE / SEND */

.ticket-thread-modal .ticket-reply-action {
    grid-area: action !important;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    margin: 0 !important;
    align-self: end !important;
}


/* Keep icons visually centred */

.ticket-thread-modal .ticket-composer-emoji,
.ticket-thread-modal .ticket-reply-attach,
.ticket-thread-modal .ticket-reply-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Emoji opens above LEFT button */

.ticket-thread-modal .ticket-emoji-panel {
    left: 6px !important;
    right: auto !important;
    bottom: calc(100% + 9px) !important;
}


/* Mobile */

@media (max-width: 560px) {

    .ticket-thread-modal .ticket-reply-composer {
        grid-template-columns: 40px minmax(0, 1fr) 40px 40px !important;
        grid-template-areas: "emoji text attach action" !important;

        column-gap: 2px !important;
        padding: 6px !important;
    }

    .ticket-thread-modal .ticket-composer-emoji,
    .ticket-thread-modal .ticket-reply-attach,
    .ticket-thread-modal .ticket-reply-action {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
}

/* === END TICKET SMART COMPOSER V3 ORDER FIX === */


/* === TICKET VOICE RECORDER V1 === */

.ticket-thread-modal .ticket-voice-preview {
    grid-column: 1 / -1;
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 14px;
    background: var(--surface-container);
}

.ticket-thread-modal .ticket-voice-preview[hidden] {
    display: none !important;
}

.ticket-thread-modal .ticket-voice-preview audio {
    flex: 1 1 auto;
    min-width: 120px;
    height: 36px;
}

.ticket-thread-modal .ticket-voice-time {
    flex: 0 0 auto;
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface-variant);
    font-size: 12px;
}

.ticket-thread-modal .ticket-voice-delete {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: var(--surface-container-high);
    color: var(--on-surface);
    font-size: 22px;
    line-height: 1;
}

.ticket-thread-modal .ticket-voice-delete:hover {
    background: var(--error-container);
    color: var(--on-error-container);
}

.ticket-thread-modal .ticket-reply-action.is-recording {
    position: relative;
}

.ticket-thread-modal .ticket-reply-action.is-recording::after {
    content: "";
    position: absolute;
    inset: -4px;
    border: 2px solid currentColor;
    border-radius: 50%;
    opacity: .45;
    animation: ticketVoicePulse 1s ease-out infinite;
}

.ticket-thread-modal .ticket-reply-action.is-recording .ticket-action-mic {
    font-size: 0;
}

.ticket-thread-modal .ticket-reply-action.is-recording .ticket-action-mic::before {
    content: "■";
    font-size: 14px;
}

@keyframes ticketVoicePulse {
    0% {
        transform: scale(.9);
        opacity: .55;
    }

    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

/* === END TICKET VOICE RECORDER V1 === */

/* === TICKET INLINE VOICE V1 === */

.ticket-chat-voice {
    margin-top: 8px;
    min-width: 230px;
    max-width: 340px;
}

.ticket-chat-voice-load {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font: inherit;
}

.ticket-chat-row.is-mine .ticket-chat-voice-load {
    background: rgba(255,255,255,.16);
    color: inherit;
}

.ticket-chat-row.is-other .ticket-chat-voice-load {
    background: var(--surface-container-high);
    color: var(--on-surface);
}

.ticket-voice-play-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-size: 13px;
}

.ticket-chat-voice-player {
    width: 100%;
}

.ticket-chat-voice-player audio {
    display: block;
    width: 100%;
    max-width: 340px;
    height: 42px;
}

@media (max-width: 560px) {
    .ticket-chat-voice {
        min-width: 200px;
        max-width: min(280px, 72vw);
    }
}

/* === END TICKET INLINE VOICE V1 === */