/* =========================================================
   SENDY LINK · UI SYSTEM
   Design tokens — single source of truth.

   Only this file declares colour, spacing, radius, shadow,
   motion, type, and focus primitives. Per-screen CSS
   consumes these via var(--ui-*).
========================================================= */

:root {
    /* ---------- Neutrals ---------- */
    --ui-neutral-50:  #f8fafc;
    --ui-neutral-100: #f1f5f9;
    --ui-neutral-200: #e6ebf1;
    --ui-neutral-300: #d8e0ea;
    --ui-neutral-400: #b3bdcb;
    --ui-neutral-500: #7b8794;
    --ui-neutral-600: #52606d;
    --ui-neutral-700: #3e4c59;
    --ui-neutral-800: #1f2933;
    --ui-neutral-900: #0f172a;

    /* ---------- Brand ---------- */
    --ui-brand-50:  #eff6ff;
    --ui-brand-100: #dbeafe;
    --ui-brand-500: #3b82f6;
    --ui-brand-600: #2563eb;
    --ui-brand-700: #1d4ed8;

    /* ---------- Semantic scales ---------- */
    --ui-success-50:  #ecfdf5;
    --ui-success-100: #d1fae5;
    --ui-success-500: #22c55e;
    --ui-success-600: #16a34a;
    --ui-success-700: #15803d;

    --ui-warning-50:  #fffbeb;
    --ui-warning-100: #fef3c7;
    --ui-warning-500: #f59e0b;
    --ui-warning-600: #d97706;
    --ui-warning-700: #b45309;

    --ui-danger-50:  #fef2f2;
    --ui-danger-100: #fee2e2;
    --ui-danger-500: #ef4444;
    --ui-danger-600: #dc2626;
    --ui-danger-700: #b91c1c;

    --ui-info-50:  #f0f9ff;
    --ui-info-100: #e0f2fe;
    --ui-info-500: #0ea5e9;
    --ui-info-600: #0284c7;
    --ui-info-700: #0369a1;

    /* ---------- Surface aliases ---------- */
    --ui-bg:           var(--ui-neutral-50);
    --ui-surface:      #ffffff;
    --ui-surface-soft: var(--ui-neutral-50);

    --ui-border:        var(--ui-neutral-200);
    --ui-border-strong: var(--ui-neutral-300);

    --ui-text:       var(--ui-neutral-900);
    --ui-text-soft:  #475569;
    --ui-text-muted: var(--ui-neutral-500);

    --ui-primary:       var(--ui-brand-600);
    --ui-primary-hover: var(--ui-brand-700);

    --ui-success: var(--ui-success-600);
    --ui-warning: var(--ui-warning-500);
    --ui-danger:  var(--ui-danger-600);
    --ui-info:    var(--ui-info-500);

    /* ---------- Spacing (4px base) ---------- */
    --ui-space-0:  0;
    --ui-space-1:  4px;
    --ui-space-2:  8px;
    --ui-space-3:  12px;
    --ui-space-4:  16px;
    --ui-space-5:  20px;
    --ui-space-6:  24px;
    --ui-space-8:  32px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;
    --ui-space-16: 64px;

    /* ---------- Radii ---------- */
    --ui-radius-sm:     10px;
    --ui-radius-md:     14px;
    --ui-radius-lg:     18px;
    --ui-radius-button: 6px;
    --ui-radius-input:  6px;
    --ui-radius-card:   8px;
    --ui-radius-modal:  12px;
    --ui-radius-pill:   999px;

    /* ---------- Shadows ---------- */
    --ui-shadow-sm:      0 8px 24px rgba(15, 23, 42, 0.04);
    --ui-shadow-md:      0 16px 42px rgba(15, 23, 42, 0.06);
    --ui-shadow-xs:      0 1px 2px rgba(15, 23, 42, 0.04);
    --ui-shadow-resting: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --ui-shadow-floating: 0 4px 6px rgba(15, 23, 42, 0.04), 0 10px 15px rgba(15, 23, 42, 0.05);

    /* ---------- Type scale ---------- */
    --ui-text-xs:   0.72rem;
    --ui-text-sm:   0.82rem;
    --ui-text-base: 0.92rem;
    --ui-text-md:   1rem;
    --ui-text-lg:   1.18rem;
    --ui-text-xl:   1.4rem;
    --ui-text-2xl:  1.75rem;

    --ui-leading-tight:  1.15;
    --ui-leading-snug:   1.3;
    --ui-leading-normal: 1.5;

    --ui-tracking-tight:  -0.018em;
    --ui-tracking-snug:   -0.011em;
    --ui-tracking-normal: 0;
    --ui-tracking-wide:   0.02em;

    --ui-weight-regular:  400;
    --ui-weight-medium:   500;
    --ui-weight-semibold: 600;
    --ui-weight-bold:     700;

    /* ---------- Motion ---------- */
    --ui-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --ui-duration-fast: 120ms;
    --ui-duration-base: 200ms;

    /* ---------- Focus ring ---------- */
    --ui-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);

    /* ---------- Font ---------- */
    --ui-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ===============================
   GLOBAL
================================ */

body {
    font-family: var(--ui-font);
    color: var(--ui-text);
    background: var(--ui-bg);
    font-size: 13px;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
}

.page-title {
    font-size: var(--ui-text-xl);
    line-height: var(--ui-leading-tight);
    font-weight: var(--ui-weight-bold);
    letter-spacing: var(--ui-tracking-tight);
    color: var(--ui-text);
}

.page-subtitle {
    font-size: var(--ui-text-base);
    line-height: var(--ui-leading-snug);
    color: var(--ui-text-soft);
}

/* ===============================
   BUTTONS
================================ */

.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 32px;
    padding: 0 0.75rem;
    border-radius: var(--ui-radius-button);
    border: 1px solid transparent;
    font-size: var(--ui-text-sm);
    font-weight: var(--ui-weight-medium);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) var(--ui-ease),
                border-color     var(--ui-duration-fast) var(--ui-ease),
                color            var(--ui-duration-fast) var(--ui-ease),
                box-shadow       var(--ui-duration-fast) var(--ui-ease);
}

.ui-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

.ui-btn-primary {
    background: var(--ui-primary);
    color: #ffffff;
}

.ui-btn-primary:hover {
    background: var(--ui-primary-hover);
    color: #ffffff;
}

.ui-btn-ghost {
    background: var(--ui-surface);
    color: var(--ui-text-soft);
    border-color: var(--ui-border);
}

.ui-btn-ghost:hover {
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
    background: var(--ui-surface-soft);
}

.ui-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ui-radius-button);
    border: 1px solid var(--ui-border);
    background: var(--ui-surface);
    color: var(--ui-text-soft);
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) var(--ui-ease),
                border-color     var(--ui-duration-fast) var(--ui-ease),
                color            var(--ui-duration-fast) var(--ui-ease),
                box-shadow       var(--ui-duration-fast) var(--ui-ease);
}

.ui-icon-btn:hover {
    background: var(--ui-surface-soft);
    color: var(--ui-text);
    border-color: var(--ui-border-strong);
}

.ui-icon-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus-ring);
}

/* ===============================
   CARDS / PANELS
================================ */

.ui-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-resting);
}

.ui-card-tight {
    padding: 0;
}

.ui-panel {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-card);
    box-shadow: var(--ui-shadow-resting);
    padding: 1rem;
}

/* ===============================
   LAYOUT PRIMITIVES
================================ */

.ui-stack {
    display: flex;
    flex-direction: column;
}

.ui-stack > * + * {
    margin-top: var(--ui-stack-gap, var(--ui-space-4));
}

.ui-stack--tight  { --ui-stack-gap: var(--ui-space-2); }
.ui-stack--snug   { --ui-stack-gap: var(--ui-space-3); }
.ui-stack--loose  { --ui-stack-gap: var(--ui-space-6); }
.ui-stack--xloose { --ui-stack-gap: var(--ui-space-8); }

.ui-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-cluster-gap, var(--ui-space-3));
}

.ui-cluster--tight { --ui-cluster-gap: var(--ui-space-2); }
.ui-cluster--snug  { --ui-cluster-gap: var(--ui-space-3); }
.ui-cluster--loose { --ui-cluster-gap: var(--ui-space-4); }

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

/* ===============================
   FORMS
================================ */

.ui-label {
    display: block;
    margin-bottom: 0.38rem;
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-text-muted);
}

.ui-input-wrap {
    position: relative;
}

.ui-input-wrap i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 0.9rem;
    pointer-events: none;
}

.ui-input-wrap .form-control {
    padding-left: 2.25rem;
}

.form-control,
.form-select {
    min-height: 38px;
    border-radius: var(--ui-radius-input);
    border-color: var(--ui-border-strong);
    background-color: var(--ui-surface);
    font-size: var(--ui-text-sm);
    color: var(--ui-text);
    box-shadow: none !important;
    transition: border-color var(--ui-duration-fast) var(--ui-ease),
                box-shadow   var(--ui-duration-fast) var(--ui-ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ui-primary);
    box-shadow: var(--ui-focus-ring) !important;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--ui-surface-soft);
    color: var(--ui-text-muted);
}

/* ===============================
   STATUS DOTS
================================ */

.ui-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    display: inline-block;
    flex: 0 0 auto;
}

.ui-dot-success { background: var(--ui-success); }
.ui-dot-warning { background: var(--ui-warning); }
.ui-dot-danger  { background: var(--ui-danger);  }
.ui-dot-info    { background: var(--ui-info);    }
.ui-dot-muted   { background: #94a3b8;           }

/* ===============================
   PILL
================================ */

.ui-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ui-radius-button);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-weight-medium);
    line-height: 1.4;
    color: var(--ui-text-soft);
    background: var(--ui-neutral-100);
    white-space: nowrap;
}

.ui-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
    opacity: 0.75;
}

.ui-pill--neutral { color: var(--ui-text-soft);    background: var(--ui-neutral-100);  }
.ui-pill--success { color: var(--ui-success-600);  background: var(--ui-success-50);   }
.ui-pill--warning { color: var(--ui-warning-600);  background: var(--ui-warning-50);   }
.ui-pill--danger  { color: var(--ui-danger-600);   background: var(--ui-danger-50);    }
.ui-pill--info    { color: var(--ui-info-600);     background: var(--ui-info-50);      }
.ui-pill--brand   { color: var(--ui-brand-700);    background: var(--ui-brand-50);     }

.ui-pill--plain::before {
    display: none;
}

.ui-pill--solid {
    color: #ffffff;
    background: var(--ui-text);
}

.ui-pill--solid::before {
    background: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

/* ===============================
   AVATAR
================================ */

.ui-avatar {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ui-neutral-200);
    color: var(--ui-text);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-weight-semibold);
    flex: 0 0 auto;
    line-height: 1;
}

.ui-avatar--sm {
    width: 22px;
    height: 22px;
    font-size: 0.62rem;
}

.ui-avatar--lg {
    width: 36px;
    height: 36px;
    font-size: var(--ui-text-sm);
}

.ui-avatar--brand {
    background: var(--ui-brand-100);
    color: var(--ui-brand-700);
}

/* ===============================
   TABLE
================================ */

.ui-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--ui-text-sm);
}

.ui-table thead th {
    padding: 0.68rem 0.8rem;
    background: var(--ui-neutral-50);
    color: var(--ui-text-muted);
    font-size: var(--ui-text-xs);
    font-weight: var(--ui-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ui-border);
}

.ui-table tbody td {
    padding: 0.62rem 0.8rem;
    border-bottom: 1px solid #eef2f6;
    vertical-align: middle;
    color: var(--ui-text-soft);
}

.ui-table tbody tr:hover {
    background: #fbfdff;
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 768px) {
    .page-title {
        font-size: 1.25rem;
    }

    .ui-btn {
        min-height: 36px;
        font-size: var(--ui-text-sm);
    }

    .ui-icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* =========================================================
   PROP GRID — global read-only property table component.
   Two-column table layout with label + value rows.
   Use case-prop-row > case-prop-item pairs in templates.
========================================================= */

.case-prop-grid {
    border: 1px solid #eef2f6;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}

.case-prop-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #eef2f6;
}

.case-prop-row:last-child {
    border-bottom: none;
}

.case-prop-item {
    padding: 0.6rem 0.72rem;
}

.case-prop-item--right {
    border-left: 1px solid #eef2f6;
}

.case-prop-item--full {
    grid-column: 1 / -1;
}

.case-prop-item > span {
    display: block;
    margin-bottom: 0.22rem;
    font-size: 0.54rem;
    font-weight: 640;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    color: #94a3b8;
}

.case-prop-item > p {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #0f172a;
    white-space: pre-line;
}

.case-prop-item > p > a {
    color: #2563eb;
    text-decoration: none;
    font-weight: 560;
}

.case-prop-item > p > a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

@media (max-width: 600px) {
    .case-prop-row {
        grid-template-columns: 1fr;
    }

    .case-prop-item--right {
        border-left: none;
        border-top: 1px solid #eef2f6;
    }
}

/* =========================================================
   IC-TOGGLE — global custom toggle switch component.
   Shared between intake_config and settings pages.
========================================================= */

.ic-toggle {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
}

.ic-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ic-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--ui-neutral-200);
    border-radius: var(--ui-radius-pill);
    transition: background 0.18s;
    cursor: pointer;
}

.ic-toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s;
}

.ic-toggle input:checked + .ic-toggle-track {
    background: var(--ui-brand-600);
}

.ic-toggle input:checked + .ic-toggle-track::after {
    transform: translateX(16px);
}