/* ═══════════════════════════════════════════════════════════
   ux-polish-v2.css — Targeted UX/UI clarity improvements
   ═══════════════════════════════════════════════════════════
   SCOPE   : Additive only — zero existing rules modified.
   PURPOSE : Strengthen visual hierarchy, improve readability,
             add missing micro-interactions. CSS only, zero JS.
   LOADS   : After ui-clarity.css (highest specificity layer).
   ═══════════════════════════════════════════════════════════ */

/* ── 1. PAGE TITLE — stronger visual anchor ──────────────────
   Before: plain bold text, no visual landmark
   After:  tight tracking, slightly larger, gold accent pip    */

.page-title {
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

/* Accent pip — matches the gold sidebar active indicator */
.page-title::before {
    width: 3px;
    height: 65%;
    min-height: 16px;
    opacity: .65;
}

/* ── 2. PAGE HEADER SPACING — more breathing room ────────────
   Before: 1.75rem bottom margin, tight
   After:  2.25rem — sections feel distinct, not crowded       */

.page-header {
    margin-bottom: 2.25rem;
}

/* ── 3. SECTION DIVIDERS within cards ────────────────────────
   Before: no standard divider between logical card sections
   After:  faint rule + label pattern, consistent across views */

.card-section-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-5, 1.25rem) calc(-1 * var(--space-6, 1.5rem));
}

/* ── 4. TRANSACTION ROW — sharper hierarchy ─────────────────
   Before: property address and client same visual weight
   After:  address is dominant, sub-row clearly secondary      */

.transaction-property-name {
    font-size: .875rem;
    font-weight: 650;
    color: var(--text-primary);
    letter-spacing: -.01em;
    line-height: 1.3;
}

.tx-sub-client {
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: .6875rem;
    max-width: 130px;
}

.tx-sub-updated {
    font-size: .6875rem;
    color: var(--text-muted);
    font-weight: 400;
}

.tx-sub-sep {
    color: var(--text-muted);
    opacity: .4;
    font-size: .6875rem;
}

/* Progress micro-bar — slightly taller for legibility */
.tx-property-progress-track {
    height: 3px;
    margin-top: 4px;
    border-radius: 99px;
    background: var(--border-subtle);
    overflow: hidden;
}

.tx-property-progress-fill {
    border-radius: 99px;
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
    min-width: 3px;
}

/* ── 5. STATUS BADGES — higher contrast ──────────────────────
   Before: badge-active was info-dot colour (blue)
   After:  filled solid for dominant statuses, clear hierarchy */

/* Active — primary colour, solid fill so it "pops" */
.badge-active {
    background: var(--ql-status-info-dot);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
    padding: 3px 10px;
}
/* Remove the dot — the fill IS the signal */
.badge-active::before { display: none; }

/* Signed — solid emerald */
.badge-signed {
    background: var(--ql-status-signed-dot);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}
.badge-signed::before { display: none; }

/* Completed — solid sage */
.badge-completed {
    background: var(--ql-status-completed-dot);
    color: #fff;
    border-color: transparent;
    font-weight: 700;
}
.badge-completed::before { display: none; }

/* ── 6. FILTER CHIPS — active state more obvious ─────────────
   Before: active chip was navy background, easy to miss
   After:  stronger contrast, clear "selected" feel            */

.filter-chip.active {
    background: var(--ql-ink-900, #1b2232);
    border-color: var(--ql-ink-700, #2a3550);
    color: #fff;
    font-weight: 650;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* ── 7. CARD HEADER — slightly more authoritative ────────────
   Before: card-title and icon weight inconsistent
   After:  consistent 700 weight, icon at 70% opacity          */

.card-title {
    font-weight: 700;
    letter-spacing: -.012em;
    font-size: .875rem;
}

.card-header .card-title .material-icons-round {
    opacity: .65;
    font-size: 17px;
}

/* ── 8. KANBAN COLUMN HEADERS — clearer section identity ─────
   Before: column title same size as card text
   After:  uppercase micro-label style, clearly a grouping cue */

.kanban-column-title {
    font-size: .6875rem;
    font-weight: 750;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.kanban-column-count {
    font-size: .625rem;
    font-weight: 700;
}

/* ── 9. TABLE HEADER CELLS — cleaner scan line ───────────────
   Before: uppercase but thin, hard to differentiate from data
   After:  7% darker, 1px solid bottom border                  */

.data-table th,
.tx-table th {
    color: var(--text-secondary);
    border-bottom: 1.5px solid var(--border-default);
    background: var(--bg-sunken);
}

/* Table row action buttons: fade in on hover, not layout shift */
.data-table td:last-child > .btn,
.data-table td:last-child > .btn-sm,
.tx-table td:last-child > .btn,
.tx-table td:last-child > .btn-sm {
    opacity: 0;
    transition: opacity 100ms;
}
.data-table tbody tr:hover td:last-child > .btn,
.data-table tbody tr:hover td:last-child > .btn-sm,
.tx-table .tx-row:hover td:last-child > .btn,
.tx-table .tx-row:hover td:last-child > .btn-sm {
    opacity: 1;
}

/* ── 10. BUTTON HIERARCHY — one clear primary per view ───────
   Before: ghost/outline buttons competed visually with primary
   After:  ghost buttons subdued until hover                   */

.btn-ghost {
    color: var(--text-tertiary);
}
.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-sunken);
}

/* Secondary buttons: slightly less prominent than primary */
.btn-secondary {
    font-weight: 500;
}

/* ── 11. FORM FOCUS — cleaner ring ───────────────────────────
   Before: 3px diffuse ring, can look heavy
   After:  2px sharp ring + subtle scale pulse                 */

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--accent-400, #6e9172);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent-500, #4e7554) 15%, transparent),
        0 0 0 1px var(--accent-400, #6e9172);
}

/* Label lifts on focus */
.form-group:focus-within .form-label {
    color: var(--accent-600, #3a5a3f);
    transition: color 100ms;
}

/* ── 12. MODAL HEADER — clear visual boundary ────────────────
   Before: thin 1px border, header blends into body
   After:  gradient-backed header, title slightly larger        */

.modal-title {
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -.015em;
}

.modal-header {
    background: linear-gradient(180deg, rgba(0,0,0,.018) 0%, transparent 100%);
}

/* ── 13. EMPTY STATE — larger icon, slower float ────────────
   Before: icon at 56px, animation loops at 3s
   After:  icon at 60px, float is gentler, title stronger      */

.empty-state-icon .material-icons-round {
    font-size: 38px;
}

.empty-state-title {
    font-size: var(--text-xl);
    font-weight: 750;
    letter-spacing: -.018em;
}

.empty-state-text {
    max-width: 34ch;
    line-height: 1.65;
}

/* ── 14. DASHBOARD SECTION GAPS — breathe between widgets ───
   Before: 1.25rem gap in dash-col — sections run together
   After:  1.5rem, each card clearly its own "zone"            */

.dash-col-main,
.dash-col-side {
    gap: 1.5rem;
}

/* ── 15. HOVER INTERACTIONS — consistent elevation ──────────
   Notification items: subtle background shift */
.notif-item {
    transition: background 100ms, border-color 100ms;
}
.notif-item:hover {
    background: var(--bg-sunken);
}

/* Dropdown items: icon becomes visible on hover */
.dropdown-item .material-icons-round {
    opacity: .5;
    transition: opacity 100ms, color 100ms;
}
.dropdown-item:hover .material-icons-round {
    opacity: .9;
    color: var(--text-secondary);
}

/* ── 16. FOCUS RING — global accessibility ──────────────────
   Consistent 2px sage ring across ALL interactive elements    */

:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-500, #4e7554) 80%, transparent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Buttons get a ring + subtle glow */
.btn:focus-visible {
    outline: 2px solid var(--accent-400, #6e9172);
    outline-offset: 2px;
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--accent-400, #6e9172) 18%, transparent);
}

/* ── DARK MODE OVERRIDES ────────────────────────────────────
   All improvements above adapted for dark / black modes.      */

[data-mode=dark] .page-title,
[data-mode=black] .page-title {
    color: rgba(255, 255, 255, .95);
}

[data-mode=dark] .transaction-property-name,
[data-mode=black] .transaction-property-name {
    color: rgba(255, 255, 255, .92);
}

[data-mode=dark] .tx-sub-client,
[data-mode=black] .tx-sub-client {
    color: rgba(255, 255, 255, .5);
}

[data-mode=dark] .tx-sub-updated,
[data-mode=black] .tx-sub-updated {
    color: rgba(255, 255, 255, .35);
}

[data-mode=dark] .filter-chip.active,
[data-mode=black] .filter-chip.active {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .95);
}

[data-mode=dark] .card-title,
[data-mode=black] .card-title {
    color: rgba(255, 255, 255, .92);
}

[data-mode=dark] .kanban-column-title,
[data-mode=black] .kanban-column-title {
    color: rgba(255, 255, 255, .55);
}

[data-mode=dark] .data-table th,
[data-mode=black] .data-table th,
[data-mode=dark] .tx-table th,
[data-mode=black] .tx-table th {
    color: rgba(255, 255, 255, .72);
    border-bottom-color: rgba(255, 255, 255, .1);
}

[data-mode=dark] .btn-ghost,
[data-mode=black] .btn-ghost {
    color: rgba(255, 255, 255, .45);
}

[data-mode=dark] .btn-ghost:hover,
[data-mode=black] .btn-ghost:hover {
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .06);
}

[data-mode=dark] .empty-state-title,
[data-mode=black] .empty-state-title {
    color: rgba(255, 255, 255, .92);
}

[data-mode=dark] .form-group:focus-within .form-label,
[data-mode=black] .form-group:focus-within .form-label {
    color: var(--ql-sage-400, #9ec49e);
}

[data-mode=dark] .notif-item:hover,
[data-mode=black] .notif-item:hover {
    background: rgba(255, 255, 255, .04);
}

[data-mode=dark] .modal-header,
[data-mode=black] .modal-header {
    background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, transparent 100%);
}

/* ── REDUCED MOTION ────────────────────────────────────────
   Disable all transitions for users who prefer it.           */

@media (prefers-reduced-motion: reduce) {
    .transaction-property-name,
    .tx-property-progress-fill,
    .badge-active,
    .badge-signed,
    .badge-completed,
    .filter-chip,
    .filter-chip.active,
    .btn-ghost,
    .form-input,
    .form-label,
    .notif-item,
    .dropdown-item .material-icons-round,
    .kanban-column-title {
        transition: none;
    }
}