/* ===========================================================================
   phonebook — Catppuccin (Latte light / Frappé dark)
   ---------------------------------------------------------------------------
   Same visual language as the server dashboard, and the same no-build-step
   rule: native cascade layers, nesting and light-dark() only.
   =========================================================================== */

@layer tokens, base, layout, components;

@layer tokens {
    :root {
        color-scheme: light dark;

        --ctp-rosewater: light-dark(#dc8a78, #f2d5cf);
        --ctp-pink:      light-dark(#ea76cb, #f4b8e4);
        --ctp-mauve:     light-dark(#8839ef, #ca9ee6);
        --ctp-red:       light-dark(#d20f39, #e78284);
        --ctp-peach:     light-dark(#fe640b, #ef9f76);
        --ctp-yellow:    light-dark(#df8e1d, #e5c890);
        --ctp-green:     light-dark(#40a02b, #a6d189);
        --ctp-teal:      light-dark(#179299, #81c8be);
        --ctp-sapphire:  light-dark(#209fb5, #85c1dc);
        --ctp-blue:      light-dark(#1e66f5, #8caaee);
        --ctp-lavender:  light-dark(#7287fd, #babbf1);

        --ctp-text:     light-dark(#4c4f69, #c6d0f5);
        --ctp-subtext0: light-dark(#6c6f85, #a5adce);
        --ctp-overlay1: light-dark(#8c8fa1, #838ba7);
        --ctp-surface2: light-dark(#acb0be, #626880);
        --ctp-surface1: light-dark(#bcc0cc, #51576d);
        --ctp-surface0: light-dark(#ccd0da, #414559);
        --ctp-base:     light-dark(#eff1f5, #303446);
        --ctp-mantle:   light-dark(#e6e9ef, #292c3c);
        --ctp-crust:    light-dark(#dce0e8, #232634);

        --bg:       var(--ctp-base);
        --bg-card:  var(--ctp-surface0);
        --bg-nav:   var(--ctp-crust);
        --bg-inset: var(--ctp-mantle);
        --border:   var(--ctp-surface1);
        --text:     var(--ctp-text);
        --text-dim: var(--ctp-subtext0);
        --muted:    var(--ctp-overlay1);

        --error:   var(--ctp-red);
        --warning: var(--ctp-yellow);
        --info:    var(--ctp-sapphire);
        --ok:      var(--ctp-green);
        --accent:  var(--ctp-blue);

        --space-1: .25rem;
        --space-2: .5rem;
        --space-3: .75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;

        --radius: 10px;
        --radius-sm: 6px;

        --nav-h: 3.25rem;
        --contacts-header-h: 2.75rem;

        --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

        --shadow: 0 1px 2px light-dark(rgba(76, 79, 105, .10), rgba(0, 0, 0, .25)),
                  0 6px 18px light-dark(rgba(76, 79, 105, .07), rgba(0, 0, 0, .18));
    }

    :root[data-theme="light"] { color-scheme: light; }
    :root[data-theme="dark"]  { color-scheme: dark; }
}

@layer base {
    * { box-sizing: border-box; }

    body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font: 0.9375rem/1.55 var(--font-sans);
        -webkit-font-smoothing: antialiased;
    }

    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    h1, h2, h3 { margin: 0 0 var(--space-3); line-height: 1.25; font-weight: 620; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 1rem; }

    p { margin: 0 0 var(--space-3); }

    code, pre, .mono { font-family: var(--font-mono); font-size: .8125rem; }

    pre {
        background: var(--bg-inset);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: var(--space-3);
        overflow-x: auto;
        margin: 0;
    }

    input, select, textarea, button { font: inherit; color: inherit; }

    input[type="text"], input[type="search"], input[type="password"],
    input[type="date"], select, textarea {
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        padding: .4rem .55rem;
        width: 100%;
        min-width: 0;
    }

    input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 1px;
    }

    textarea { resize: vertical; min-height: 4.5rem; }

    label { display: block; font-size: .8125rem; color: var(--text-dim); margin-bottom: .2rem; }

    table { width: 100%; border-collapse: collapse; }
    th { text-align: left; font-size: .75rem; text-transform: uppercase;
         letter-spacing: .04em; color: var(--muted); font-weight: 600;
         padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
    td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: top; }
    tbody tr:last-child td { border-bottom: 0; }
    tbody tr:hover { background: var(--bg-inset); }
}

@layer layout {
    .topnav {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        height: var(--nav-h);
        padding: 0 var(--space-5);
        background: color-mix(in oklab, var(--bg-nav) 88%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 30;
    }

    .brand { display: flex; align-items: center; gap: .55rem; font-weight: 680; color: var(--text); flex-shrink: 0; }
    .brand:hover { text-decoration: none; }
    .brand-mark {
        width: .6rem; height: .6rem; border-radius: 2px;
        background: linear-gradient(135deg, var(--ctp-blue), var(--ctp-mauve));
    }

    .tabs {
        display: flex;
        gap: .15rem;
        flex: 1;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }

    .tab {
        padding: .4rem .75rem;
        border-radius: var(--radius-sm);
        color: var(--text-dim);
        font-size: .875rem;
        font-weight: 500;
        white-space: nowrap;
        transition: background .15s, color .15s;
    }
    .tab:hover { background: color-mix(in oklab, var(--text) 8%, transparent); text-decoration: none; color: var(--text); }
    .tab.active { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); font-weight: 600; }

    .nav-actions { margin-left: auto; display: flex; gap: var(--space-2); align-items: center; flex-shrink: 0; }

    main { padding: var(--space-5); max-width: 1180px; margin: 0 auto; }
    main.page-contacts { max-width: none; }

    .grid { display: grid; gap: var(--space-4); }
    .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    .grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

    .row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
    .row.tight { gap: var(--space-2); }
    .spread { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
    .stack { display: grid; gap: var(--space-3); }
    .push { margin-left: auto; }
}

@layer components {
    .card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: var(--space-4);
        box-shadow: var(--shadow);
    }
    .card.flush { padding: 0; overflow: hidden; }
    .card > h2:first-child, .card > h3:first-child { margin-top: 0; }

    .card-head {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--border);
        display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    }

    .stat { display: grid; gap: .1rem; }
    .stat .value { font-size: 1.9rem; font-weight: 640; line-height: 1.1; }
    .stat .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
    .stat.error .value { color: var(--error); }
    .stat.warning .value { color: var(--warning); }
    .stat.info .value { color: var(--info); }
    .stat.ok .value { color: var(--ok); }

    .btn {
        display: inline-flex; align-items: center; gap: .4rem;
        padding: .4rem .75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg-card);
        cursor: pointer;
        font-size: .875rem;
        white-space: nowrap;
    }
    .btn:hover { background: var(--bg-inset); text-decoration: none; }
    .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--ctp-crust); font-weight: 600; }
    .btn.primary:hover { filter: brightness(1.08); }
    .btn.danger { color: var(--error); border-color: color-mix(in oklab, var(--error) 45%, transparent); }
    .btn.small { padding: .2rem .5rem; font-size: .8125rem; }
    .btn[disabled] { opacity: .5; cursor: not-allowed; }

    .chip {
        display: inline-flex; align-items: center; gap: .3rem;
        padding: .1rem .45rem;
        border-radius: 999px;
        font-size: .75rem;
        font-weight: 600;
        background: color-mix(in oklab, var(--level, var(--muted)) 18%, transparent);
        color: var(--level, var(--muted));
        border: 1px solid color-mix(in oklab, var(--level, var(--muted)) 35%, transparent);
    }
    .chip.error   { --level: var(--error); }
    .chip.warning { --level: var(--warning); }
    .chip.info    { --level: var(--info); }
    .chip.ok      { --level: var(--ok); }
    .chip.plain   { --level: var(--muted); font-weight: 500; }

    .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--level, var(--muted)); }

    .muted { color: var(--muted); }
    .dim { color: var(--text-dim); }
    .small { font-size: .8125rem; }
    .tiny { font-size: .75rem; }
    .nowrap { white-space: nowrap; }
    .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

    .filters {
        display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap;
        margin-bottom: var(--space-4);
    }
    .filters .field { display: grid; gap: .15rem; }
    .filters .field.grow { flex: 1 1 16rem; }
    .filters select { width: auto; }

    .contact-name { font-weight: 600; }
    .contact-sub { color: var(--muted); font-size: .8125rem; }

    .value-list { display: grid; gap: .15rem; margin: 0; padding: 0; list-style: none; }
    .value-list .label {
        display: inline-block; min-width: 4.5rem; margin: 0;
        color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
    }

    .finding {
        display: flex; gap: var(--space-3); align-items: start;
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--border);
    }
    .finding:last-child { border-bottom: 0; }
    .finding.suppressed { opacity: .5; }

    .rule-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; }

    .diff { display: grid; gap: .1rem; }
    .diff .before { color: var(--error); }
    .diff .after { color: var(--ok); }
    .diff-line { display: block; font-family: var(--font-mono); font-size: .8125rem; white-space: pre-wrap; word-break: break-word; }
    .diff-line.add { color: var(--ok); }
    .diff-line.del { color: var(--error); }
    .diff-line.meta { color: var(--muted); }

    .cluster { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
    .cluster + .cluster { margin-top: var(--space-3); }
    .cluster-head {
        display: flex; gap: var(--space-3); align-items: center;
        padding: var(--space-2) var(--space-3);
        background: var(--bg-inset);
        border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
    }
    .cluster-member { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
    .cluster-member:last-child { border-bottom: 0; }

    .choice { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
    .choice label { display: inline-flex; gap: .3rem; align-items: center; margin: 0; color: var(--text); font-size: .875rem; }

    .empty { text-align: center; padding: var(--space-6); color: var(--muted); }

    .toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); display: grid; gap: var(--space-2); z-index: 60; }
    .toast {
        background: var(--bg-card); border: 1px solid var(--border);
        border-left: 3px solid var(--level, var(--accent));
        border-radius: var(--radius-sm); padding: var(--space-3);
        box-shadow: var(--shadow); max-width: 22rem;
    }
    .toast.ok { --level: var(--ok); }
    .toast.warn { --level: var(--warning); }
    .toast.error { --level: var(--error); }

    .banner {
        border-left: 3px solid var(--level, var(--accent));
        background: color-mix(in oklab, var(--level, var(--accent)) 10%, transparent);
        padding: var(--space-3);
        border-radius: var(--radius-sm);
    }
    .banner.ok { --level: var(--ok); }
    .banner.warn { --level: var(--warning); }
    .banner.error { --level: var(--error); }

    .contacts-table td, .contacts-table th { vertical-align: middle; }

    /* --- contacts header (Notion-style) ---
       Fixed height so its sticky offset (used by the table header below)
       never has to chase a dynamic value — the filter panel is an anchored
       popover precisely so opening it can't change this box's height. */
    .contacts-header {
        position: sticky;
        top: var(--nav-h);
        z-index: 25;
        height: var(--contacts-header-h);
        box-sizing: border-box;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
    }

    .contacts-search-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        height: 100%;
        padding: 0;
    }

    .contacts-search-wrap {
        display: flex;
        align-items: center;
        gap: .3rem;
        flex: 1 1 10rem;
        min-width: 8rem;
    }
    .contacts-search-wrap .search-icon {
        color: var(--muted);
        flex-shrink: 0;
        opacity: .6;
    }
    .contacts-search-wrap input {
        background: none;
        border: none;
        padding: .25rem 0;
        font-size: .875rem;
        width: 100%;
        outline: none;
        color: var(--text);
    }
    .contacts-search-wrap input::placeholder { color: var(--muted); }
    .contacts-search-wrap input:focus-visible { outline: none; }

    .contacts-controls {
        display: flex;
        align-items: center;
        gap: .15rem;
        flex-shrink: 0;
    }

    .ctrl-btn {
        appearance: none;
        -webkit-appearance: none;
        background: none;
        border: none;
        border-radius: var(--radius-sm);
        padding: .15rem .4rem;
        font-size: .8125rem;
        color: var(--text-dim);
        cursor: pointer;
        white-space: nowrap;
        font-family: inherit;
        line-height: 1.4;
    }
    .ctrl-btn:hover { background: var(--bg-inset); color: var(--text); }
    .ctrl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
    .ctrl-btn.primary { color: var(--accent); font-weight: 600; }
    .ctrl-btn.primary:hover { background: color-mix(in oklab, var(--accent) 15%, transparent); }
    .ctrl-btn.danger { color: var(--error); }
    .ctrl-btn.danger:hover { background: color-mix(in oklab, var(--error) 12%, transparent); }

    .ctrl-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 1rem;
        height: 1rem;
        border-radius: 999px;
        background: var(--accent);
        color: var(--ctp-crust);
        font-size: .625rem;
        font-weight: 700;
        padding: 0 .25rem;
        margin-left: .2rem;
    }

    .ctrl-sep {
        width: 1px;
        height: 1rem;
        background: var(--border);
        margin: 0 .15rem;
    }

    .contacts-count {
        font-size: .75rem;
        color: var(--muted);
        padding: 0 .3rem;
        white-space: nowrap;
    }

    .contacts-bulk {
        display: flex;
        align-items: center;
        gap: .15rem;
    }

    .contacts-actions {
        margin-left: var(--space-2);
    }

    /* --- filter panel: anchored popover, same pattern as .popup-menu below --- */
    .filter-menu { position: relative; display: inline-flex; }

    .contacts-filter-panel {
        position: absolute;
        top: calc(100% + .5rem);
        left: 0;
        z-index: 30;
        width: 16rem;
        padding: var(--space-3);
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }
    .contacts-filter-inner {
        display: grid;
        gap: var(--space-2);
    }
    .contacts-filter-inner .field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }
    .contacts-filter-inner .field label { margin: 0; }
    .contacts-filter-inner select { width: auto; min-width: 7rem; padding: .25rem .4rem; font-size: .8125rem; }
    .contacts-filter-inner .btn { margin-top: var(--space-1); justify-content: center; }

    /* --- table wrap + sticky column headers ---
       Deliberately not `.card.flush` (overflow:hidden): position:sticky is
       computed against the nearest ancestor with non-visible overflow, and
       an ancestor that clips but never itself scrolls makes sticky inert.
       Corners are rounded on the edge cells instead of clipped by a wrapper. */
    .contacts-table-wrap {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

    .contacts-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
    .contacts-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius); }
    .contacts-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); }
    .contacts-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); }

    .contacts-table thead th {
        position: sticky;
        top: calc(var(--nav-h) + var(--contacts-header-h));
        z-index: 20;
        background: var(--bg-card);
        box-shadow: 0 1px 0 var(--border);
    }

    .contacts-table th.col-check,
    .contacts-table td.col-check {
        width: 2rem;
        padding-right: 0;
    }

    .contacts-table td.col-actions {
        width: 2.5rem;
    }

    .contacts-table th:nth-child(2),
    .contacts-table td:nth-child(2) { min-width: 11rem; }

    .contacts-table th:nth-child(3),
    .contacts-table td:nth-child(3) { min-width: 9rem; }

    .contacts-table th:nth-child(4),
    .contacts-table td:nth-child(4) { min-width: 10rem; }

    .contacts-table th:nth-child(6),
    .contacts-table td:nth-child(6) { max-width: 12rem; }

    .contacts-table th:nth-child(7),
    .contacts-table td:nth-child(7) { min-width: 5rem; }

    .name-cell { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
    .name-cell .nickname { color: var(--muted); font-size: .8125rem; }

    .group-row th {
        background: var(--bg-inset);
        color: var(--text-dim);
        font-size: .75rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: .02em;
        padding: .25rem var(--space-3);
        border-bottom: 1px solid var(--border);
    }

    .field-flag {
        display: inline-block;
        width: .55rem; height: .55rem;
        margin-left: .3rem;
        padding: 0; border: 0; border-radius: 50%;
        vertical-align: middle;
        cursor: pointer;
        background: var(--level, var(--muted));
        box-shadow: 0 0 0 2px var(--bg-card);
    }
    .field-flag.error   { --level: var(--error); }
    .field-flag.warning { --level: var(--warning); }
    .field-flag.info    { --level: var(--info); }

    .phone-cell { display: flex; align-items: center; gap: .3rem; }
    .phone-flag { font-size: 1rem; line-height: 1; }

    dialog#lint-dialog {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg-card);
        color: var(--text);
        padding: var(--space-4);
        max-width: 26rem;
        width: calc(100% - 2rem);
        box-shadow: var(--shadow);
    }
    dialog#lint-dialog::backdrop {
        background: color-mix(in oklab, black 45%, transparent);
    }

    dialog#contact-dialog {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--bg-card);
        color: var(--text);
        padding: 0;
        max-width: 44rem;
        width: calc(100% - 2rem);
        max-height: calc(100dvh - 3rem);
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    dialog#contact-dialog::backdrop {
        background: color-mix(in oklab, black 45%, transparent);
    }

    .contact-dialog-header {
        display: flex;
        flex-direction: column;
        gap: .1rem;
        padding: var(--space-4);
        border-bottom: 1px solid var(--border);
        position: relative;
    }
    .contact-dialog-header h2 { margin: 0; }

    .dialog-close {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        background: none;
        border: none;
        font-size: 1.25rem;
        cursor: pointer;
        color: var(--muted);
        padding: .25rem .5rem;
        border-radius: var(--radius-sm);
        line-height: 1;
    }
    .dialog-close:hover { background: var(--bg-inset); color: var(--text); }

    .contact-dialog-body {
        padding: var(--space-4);
        max-height: calc(100dvh - 10rem);
        overflow-y: auto;
        display: grid;
        gap: var(--space-3);
    }

    .repeat-row { display: grid; grid-template-columns: 8rem 8rem 1fr auto; gap: var(--space-2); align-items: center; }
    .repeat-row + .repeat-row { margin-top: var(--space-2); }
    .addr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-2); }
    .addr-row + .addr-row { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }

    .contact-row {
        cursor: pointer;
        transition: background .1s;
    }
    .contact-row.row-selected { background: color-mix(in oklab, var(--accent) 14%, transparent); }
    .contact-row.row-selected:hover { background: color-mix(in oklab, var(--accent) 20%, transparent); }

    .popup-menu {
        position: relative;
        display: inline-block;
    }
    .popup-menu summary {
        list-style: none;
        font-weight: 700;
        letter-spacing: .1em;
    }
    .popup-menu summary::-webkit-details-marker { display: none; }
    .popup-menu summary::marker { display: none; content: ""; }
    .popup-menu[open] summary {
        background: var(--bg-inset);
    }
    .popup-items {
        position: absolute;
        right: 0;
        top: 100%;
        z-index: 10;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow);
        min-width: 10rem;
        padding: .25rem 0;
    }
    .popup-items button,
    .popup-items form {
        display: block;
        width: 100%;
    }
    .popup-items button {
        background: none;
        border: none;
        color: var(--text);
        padding: .4rem var(--space-3);
        text-align: left;
        cursor: pointer;
        font-size: .875rem;
        width: 100%;
    }
    .popup-items button:hover {
        background: var(--bg-inset);
    }

    @media (max-width: 700px) {
        main { padding: var(--space-3); }
        .repeat-row { grid-template-columns: 1fr 1fr; }
        table.responsive thead { display: none; }
        table.responsive td { display: block; border-bottom: 0; }
        table.responsive tr { display: block; border-bottom: 1px solid var(--border); padding: var(--space-2) 0; }
    }
}