/* Additions to the CRM stylesheets for what this app draws and the CRM does not.
   Tokens only (base.css: --text-*, --bg-*, --border-color; record CSS: --att-*), so both
   themes come for free. The copied CRM files stay untouched; changes go here. */

/* ---- brand: the Storsen Digital mark, sized by the CRM's .brand-logo ---- */
.app-rail-brand { text-decoration: none; }

/* ---- sidebar extras ---- */
.nav-count {
    margin-left: auto; font-size: 11px; font-weight: 600; color: var(--sidebar-text-muted, var(--text-muted));
    font-variant-numeric: tabular-nums;
}
/* Every icon in the rail and the panel wears its app's hue (base.html sets --app-color and
   --nav-accent from --ent-*), and pointing at one tints its row in that hue, as in the CRM
   with item colours on. The CRM leaves the rail's hover grey; here it takes the hue too. */
.app-tile:hover:not(.current),
.app-rail-search:hover {
    background: color-mix(in srgb, var(--app-color, var(--primary-color)) 10%, transparent);
}
.app-rail-search i { color: var(--app-color, currentColor); }
.app-tile:hover i, .app-rail-search:hover i { transform: scale(1.08); }
.app-tile i, .app-rail-search i { transition: transform .15s ease; }
.sidebar.item-colors-on .nav-link[data-model]:hover { color: var(--sidebar-text-strong, var(--sidebar-text)); }
.sidebar.item-colors-on .nav-link[data-model]:hover .nav-count { color: var(--nav-accent); }
.sidebar.item-colors-on .nav-link[data-model].active { color: var(--sidebar-text-strong, var(--sidebar-text)); }

.sidebar-account-menu { min-width: 200px; z-index: 2000; }
.sidebar-account-menu form { margin: 0; }
.sidebar-account-menu .dropdown-item { display: flex; align-items: center; gap: 8px; width: 100%; }
.sidebar-account-menu .dropdown-item.active { font-weight: 600; }

/* ---- the login page has no shell ---- */
.main-content.is-bare { margin-left: 0 !important; width: 100% !important; }

/* ---- list: the Filter dropdown — field, condition, value; then what is active ---- */
.filter-dropdown { width: 360px; min-width: 0; max-height: min(520px, calc(100vh - 140px)); padding: 0; }
.ui-fb { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border-color); }
.ui-fb .lv-filter-col-select { width: 100%; height: 32px; }
.ui-fb-row { display: grid; grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 32px; gap: 6px; align-items: start; }
.ui-fb-row[hidden] { display: none; }
.ui-fb-row:has(.lv-filter-op-select[hidden]) { grid-template-columns: minmax(0, 1fr) 32px; }
.ui-fb-row .lv-filter-op-select, .ui-fb-row .lv-filter-add-btn { height: 32px; }
.ui-fb-row .lv-filter-add-btn { width: 32px; grid-column: auto; }
.ui-fb-value { display: grid; gap: 6px; min-width: 0; }
.ui-fb-value[hidden] { display: none; }
.ui-fb-value.is-pair { grid-template-columns: 1fr 1fr; }
.ui-fb-value .lv-filter-value-input, .ui-fb-value .lv-filter-value-select { width: 100%; height: 32px; }
.ui-fb-value .lv-filter-value-select {
    appearance: none; -webkit-appearance: none; min-width: 0; padding: 0 26px 0 9px;
    border: 1px solid var(--border-color); border-radius: 6px; font: inherit; font-size: 12px; color: var(--text-primary);
    background: var(--bg-primary) no-repeat; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%; background-size: 5px 5px;
}
.ui-fb-value .lv-filter-value-select:focus { outline: none; border-color: var(--lv-accent, var(--primary-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-accent, var(--primary-color)) 15%, transparent); }
.ui-fb-value input[type="date"] { color-scheme: light dark; font-variant-numeric: tabular-nums; }
.ui-fb-active { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 12px; }
.ui-fb-head { margin-bottom: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ui-fb-active .lv-active-filters-list { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; max-height: none; }
.ui-fb-active .lv-filter-chip-item {
    display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; padding: 6px 6px 6px 10px;
    border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); font-size: 12px;
}
.ui-fb-active .lv-filter-chip-col { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.ui-fb-active .lv-filter-chip-op { color: var(--text-muted); white-space: nowrap; }
.ui-fb-active .lv-filter-chip-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.ui-fb-active .lv-filter-chip-remove { margin-left: auto; flex: none; }
.ui-fb-active .lv-no-filters { padding: 2px 0; font-size: 12px; color: var(--text-muted); }
.filter-dropdown .lv-filter-footer { display: flex; justify-content: flex-end; padding: 8px 12px; border-top: 1px solid var(--border-color); }
.filter-dropdown .lv-filter-footer:has([data-filters-clear][hidden]) { display: none; }
/* The Filter button is a plain toolbar button, like Kolone: no tint, no glow. */
.lv-cmd-bar #filter-dropdown-btn, .lv-cmd-bar #filter-dropdown-btn:hover { box-shadow: none; }
@media (max-width: 480px) { .filter-dropdown { width: calc(100vw - 32px); } }
.lv-col-toolbar { display: flex; justify-content: flex-end; padding: 8px 10px; border-bottom: 1px solid var(--border-color); }
.lv-col-toolbar-actions { display: flex; gap: 10px; }
#column-list .lv-sd-item { display: flex; align-items: center; gap: 8px; cursor: pointer; }

/* ---- list: headers and cells ---- */
th[data-sortable] { cursor: pointer; user-select: none; }
th[data-sortable]:focus-visible { outline: 2px solid var(--rec-color); outline-offset: -2px; }
th.is-sorted .lv-hdr-label { color: var(--rec-color); }
.ui-sort-icon { opacity: .35; font-size: 13px; }
th.is-sorted .ui-sort-icon { opacity: 1; color: var(--rec-color); }
.lv-data-row[data-href] { cursor: pointer; }
.ui-mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.ui-cell-number, th.ui-col-number { text-align: right; }
td.ui-cell-link { max-width: 520px; }
td.ui-cell-link .lv-cell-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* chips: the CRM company status badge, with this app's states */
.lv-company-status-badge.is-ok    { color: #047857; background: color-mix(in srgb, #10b981 14%, transparent); }
.lv-company-status-badge.is-ok .status-dot { background: #10b981; }
.lv-company-status-badge.is-bad   { color: #b91c1c; background: color-mix(in srgb, #ef4444 13%, transparent); }
.lv-company-status-badge.is-bad .status-dot { background: #ef4444; }
.lv-company-status-badge.is-warn  { color: #b45309; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.lv-company-status-badge.is-warn .status-dot { background: #f59e0b; }
.lv-company-status-badge.is-info  { color: #0f766e; background: color-mix(in srgb, #14b8a6 14%, transparent); }
.lv-company-status-badge.is-info .status-dot { background: #14b8a6; }
.lv-company-status-badge.is-ink   { color: var(--text-secondary); background: var(--bg-tertiary, var(--bg-secondary)); }
.lv-company-status-badge.is-ink .status-dot { background: var(--text-muted); }
.lv-company-status-badge.is-violet { color: #6d28d9; background: color-mix(in srgb, #8b5cf6 14%, transparent); }
.lv-company-status-badge.is-violet .status-dot { background: #8b5cf6; }
[data-theme="carbon"] .lv-company-status-badge.is-ok { color: #6ee7b7; }
[data-theme="carbon"] .lv-company-status-badge.is-bad { color: #fca5a5; }
[data-theme="carbon"] .lv-company-status-badge.is-warn { color: #fcd34d; }
[data-theme="carbon"] .lv-company-status-badge.is-info { color: #5eead4; }
[data-theme="carbon"] .lv-company-status-badge.is-violet { color: #c4b5fd; }

/* spark: a law's publications as a row of bars, the same reading as its chart */
.ui-spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 20px; }
.ui-spark i { display: block; width: 4px; border-radius: 1px; background: var(--ent-gazette); opacity: .85; }
.ui-spark i.e { background: var(--text-muted); }
.ui-spark i.d { background: var(--danger-color); }

.ui-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.ui-tag {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
    color: var(--rec-color); background: color-mix(in srgb, var(--rec-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--rec-color) 22%, transparent);
    max-width: 280px; overflow: hidden; text-overflow: ellipsis;
}
.ui-tag:hover { background: color-mix(in srgb, var(--rec-color) 18%, transparent); }

.ui-row-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 7px; border: 1px solid transparent;
    background: transparent; color: var(--text-muted); cursor: pointer; font-size: 17px;
}
.ui-row-action:hover { color: var(--rec-color); border-color: var(--border-color); background: var(--bg-primary); }
.ui-row-action.in { color: var(--ent-workspace); }

/* ---- dialogs (UI.ask, UI.frame and markup dialogs) in the CRM modal ---- */
.ui-dialog .em-modal, .em-overlay .em-modal.is-form { height: auto; width: min(480px, 100%); }
.ui-dialog .em-modal.is-wide { width: min(720px, 100%); height: min(640px, calc(100vh - 48px)); }
.ui-dialog .em-subject, .em-modal.is-form .em-subject { margin: 0; font-size: 16px; }
.ui-dialog-body { flex: 1 1 auto; min-height: 0; padding: 16px 18px; color: var(--att-text, var(--text-primary)); font-size: 14px; overflow: auto; }
.ui-dialog-body p { margin: 0; }
.ui-dialog-note { margin-top: 8px !important; color: var(--att-muted, var(--text-muted)); font-size: 13px; }
.ui-dialog-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--att-border, var(--border-color)); }
.ui-dialog-foot .ui-foot-note { margin-right: auto; color: var(--att-muted, var(--text-muted)); font-size: 12.5px; }
.ui-form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ui-form-field label { font-size: 12px; font-weight: 600; color: var(--att-text-2, var(--text-secondary)); }
.ui-form-field input {
    height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--att-border, var(--border-color));
    background: var(--att-surface, var(--bg-primary)); color: var(--att-text, var(--text-primary)); font-size: 14px;
}
.ui-form-field input:focus { outline: none; border-color: var(--rec-color, var(--primary-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rec-color, var(--primary-color)) 18%, transparent); }

/* Buttons the CRM record CSS (record-detail.css, loaded on every page) does not have. */
.att-action.is-danger { color: var(--danger-color); border-color: color-mix(in srgb, var(--danger-color) 40%, transparent); }
.att-action.is-danger:hover { background: color-mix(in srgb, var(--danger-color) 10%, transparent); color: var(--danger-color); }
.att-action.in { color: var(--ent-workspace); border-color: color-mix(in srgb, var(--ent-workspace) 40%, transparent); background: color-mix(in srgb, var(--ent-workspace) 8%, transparent); }
.att-action:disabled { opacity: .5; cursor: default; }

/* ---- toasts ---- */
.ui-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 3000; display: flex; flex-direction: column; gap: 8px; }
.ui-toast {
    display: flex; align-items: center; gap: 8px; max-width: 380px; padding: 10px 14px;
    border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); font-size: 13px; text-align: left; cursor: pointer;
    animation: uiToastIn .18s ease-out;
}
.ui-toast i { font-size: 18px; color: var(--success-color); }
.ui-toast.is-error i { color: var(--danger-color); }
@keyframes uiToastIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ui-toast { animation: none; } }

/* ---- a record pane whose body arrives on first open ---- */
.ui-loading { padding: 48px 20px; text-align: center; color: var(--att-muted, var(--text-muted)); font-size: 13px; }
.ui-loading i { font-size: 22px; display: block; margin: 0 auto 8px; animation: uiSpin 1s linear infinite; }
@keyframes uiSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-loading i { animation: none; } }

/* ---- related list empty state inside a record ---- */
.ui-rel-empty { padding: 36px 20px; text-align: center; color: var(--att-muted); font-size: 13px; }
.ui-rel-empty i { font-size: 30px; opacity: .35; display: block; margin-bottom: 6px; }

/* The Details card reaches the bottom of the tab, like a related list. */
.att-pane.active[data-pane="details"] { display: flex; flex-direction: column; min-height: 100%; }
.att-pane[data-pane="details"] > .att-formcard { flex: 1 1 auto; }

/* Theme picker: the chosen theme is marked by a check and the accent, never by the hover
   fill, so hovering the other one cannot make both look selected. */
.sidebar-account-menu .dropdown-item.active { background: transparent; color: var(--sidebar-text); }
.sidebar-account-menu .dropdown-item.active i { color: var(--att-accent, var(--ent-workspace)); }
.sidebar-account-menu .dropdown-item[data-theme-set].active::after { content: '\2713'; margin-left: auto; font-weight: 700; color: var(--att-accent, var(--ent-workspace)); }
.sidebar-account-menu .dropdown-item:hover,
.sidebar-account-menu .dropdown-item.active:hover,
.sidebar-account-menu .dropdown-item:focus-visible { background: var(--sidebar-bg-hover); }

/* ---- record: Details edited in place (ui/js/inline-edit.js), on the CRM's aef- parts ---- */
.att-field.is-editable { padding-right: 40px; }
.att-field.is-editable:focus-visible { outline: 2px solid color-mix(in srgb, var(--att-accent) 55%, transparent); outline-offset: -2px; }
.att-field.is-editing { cursor: default; }
.att-field.is-editing .att-field-value { min-width: 0; }
.att-field.is-saving { opacity: .6; pointer-events: none; }
.aef-combo-group {
    padding: 8px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--att-muted); position: sticky; top: 34px; background: var(--att-surface);
}
.aef-combo-menu:not(:has(.aef-combo-search)) .aef-combo-group { top: -4px; }
.aef-combo-menu { max-height: 320px; }
.aef-combo-menu[hidden] { display: none; }