/* ============================================================================
   LeadDesk — Softieons Sales CRM
   Theme tokens and shell. Sits on top of Bootstrap 5.3; never replaces it.

   Source of truth: design/Sales project design scope/README.md
   Palette derived from the client's Japan travel-brochure brand:
   deep navy, sky blue, vermilion red, warm cream.

   COLOUR IS INFORMATION, NOT DECORATION. These five meanings are identical on
   every screen and must never be repurposed:
     vermilion = overdue / at risk      amber = due soon
     green     = done / won / paid      sky   = scheduled / neutral
     muted grey = dormant
   ========================================================================== */

@import url("../vendor/fonts/fonts.css");

:root {
    /* --- navy ------------------------------------------------------------ */
    --navy-900: #0B2247;
    --navy-800: #0E2B59;   /* primary brand */
    --navy-700: #123870;
    --navy-600: #1B4B8A;

    /* --- text ------------------------------------------------------------ */
    --ink:       #14213D;
    --ink-soft:  #4A5568;
    --muted:     #7C7367;
    --muted-2:   #9A9284;
    --muted-3:   #8A8578;

    /* --- surfaces -------------------------------------------------------- */
    --cream:     #FBF7F2;   /* page background */
    --surface:   #FFFFFF;
    --surface-2: #FAF7F3;
    --surface-3: #F5F0E9;
    --border:    #EAE3DA;
    --border-2:  #F5F0E9;

    /* --- state: vermilion = overdue / at risk ---------------------------- */
    --vermilion:        #C3452E;
    --vermilion-600:    #D9573C;
    --vermilion-800:    #9E3624;
    --vermilion-tint:   #FDEDE8;
    --vermilion-border: #F3CFC6;

    /* --- state: amber = due soon ----------------------------------------- */
    --amber:      #D98A2B;
    --amber-text: #B5761E;
    --amber-tint: #FDF1DF;

    /* --- state: sky = scheduled / neutral -------------------------------- */
    --sky:         #2885CA;
    --sky-text:    #1D6FB0;
    --sky-tint:    #E6F1FA;
    --sky-tint-2:  #E9F0F8;
    --sky-border:  #C9DFF1;

    /* --- state: green = done / won / paid -------------------------------- */
    --green:      #2F6B4F;
    --green-tint: #E4F0E9;

    /* --- gradients ------------------------------------------------------- */
    --grad-navy:      linear-gradient(135deg, #1B4B8A, #0E2B59);
    --grad-navy-hover:linear-gradient(135deg, #0E2B59, #0B2247);
    --grad-banner:    linear-gradient(115deg, #0E2B59, #123870 55%, #1B4B8A);
    --grad-vermilion: linear-gradient(135deg, #D9573C, #C3452E);
    --grad-sky:       linear-gradient(135deg, #2885CA, #1B5E96);
    --grad-amber:     linear-gradient(135deg, #FBBF24, #B45309);

    /* --- shadows --------------------------------------------------------- */
    --shadow-card:       0 1px 2px rgba(14,43,89,.03), 0 8px 20px rgba(14,43,89,.05);
    --shadow-card-hover: 0 6px 14px rgba(14,43,89,.06), 0 16px 32px rgba(14,43,89,.10);
    --shadow-navy:       0 6px 14px rgba(14,43,89,.28);
    --shadow-vermilion:  0 6px 14px rgba(195,69,46,.30);
    --shadow-banner:     0 14px 36px rgba(14,43,89,.28);

    /* --- Bootstrap overrides so native components inherit the brand ------ */
    --bs-body-bg:     var(--cream);
    --bs-body-color:  var(--ink);
    --bs-border-color:var(--border);
    --bs-primary:     #0E2B59;
    --bs-link-color:  #1D6FB0;
    --bs-link-hover-color: var(--vermilion-800);
    --bs-font-sans-serif: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-weight: 600;
}

/* ============================ typography ================================= */

body {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--bs-font-sans-serif);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
}

.ld-serif { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }

.ld-page-title   { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 32px; color: var(--navy-800); line-height: 1.15; }
.ld-banner-title { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 26px; color: #fff; line-height: 1.2; }
.ld-card-hero    { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 23px; line-height: 1.25; }

/* Subhead under every page title: says what the page is for. 640px is the
   prototype's measure — wide enough for two sentences, narrow enough to read. */
.ld-subhead { font-size: 14px; color: var(--muted); max-width: 640px; font-weight: 600; margin-top: 4px; }

/* Uppercase section label — the quiet half of the hierarchy. */
.ld-label {
    font-size: 11.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted-2);
}

/* Names and numbers are the loudest things on the screen. */
.ld-name { font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.ld-num  { font-size: 24px;   font-weight: 800; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.ld-why  { font-size: 12.5px; color: var(--muted-2); font-weight: 600; }
.ld-meta { font-size: 13px;   color: var(--ink-soft); font-weight: 600; }

/* Never below 11px. */
.ld-fs-11   { font-size: 11px; }
.ld-fs-115  { font-size: 11.5px; }
.ld-fs-125  { font-size: 12.5px; }
.ld-fs-13   { font-size: 13px; }
.ld-fs-135  { font-size: 13.5px; }
.ld-fs-15   { font-size: 15px; }
.ld-fs-17   { font-size: 17px; }
.ld-fs-19   { font-size: 19px; }

/* ============================ state colours ============================== */

.ld-text-overdue   { color: var(--vermilion) !important; }
.ld-text-due-soon  { color: var(--amber-text) !important; }
.ld-text-done      { color: var(--green) !important; }
.ld-text-scheduled { color: var(--sky-text) !important; }
.ld-text-dormant   { color: var(--muted-3) !important; }
.ld-text-navy      { color: var(--navy-800) !important; }
.ld-text-ink-soft  { color: var(--ink-soft) !important; }
.ld-text-muted-2   { color: var(--muted-2) !important; }

.ld-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 800; padding: 3px 9px;
    border-radius: 99px; white-space: nowrap;
}
.ld-badge-overdue   { background: var(--vermilion-tint); color: var(--vermilion); }
.ld-badge-due-soon  { background: var(--amber-tint);     color: var(--amber-text); }
.ld-badge-done      { background: var(--green-tint);     color: var(--green); }
.ld-badge-scheduled { background: var(--sky-tint);       color: var(--sky-text); }
.ld-badge-dormant   { background: var(--surface-3);      color: var(--muted-3); }

/* ============================== cards ==================================== */

.ld-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-card);
    transition: box-shadow 200ms ease, transform 200ms ease;
}
@media (hover: hover) and (min-width: 992px) {
    .ld-card-hover:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
}

.ld-card-lg { border-radius: 16px; }

/* Card header strip — title, sub, and whatever sits on the right.
   `.ld-card` itself carries no padding on purpose (a table has to reach the
   card's edges), so every element placed directly inside one must bring its
   own. These three are what a card header is made of. */
.ld-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 17px 20px 15px;
    border-bottom: 1px solid var(--border-2);
}
.ld-card-head:last-child { border-bottom: 0; }

.ld-card-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-weight: 400; font-size: 17.5px; line-height: 1.3;
    color: var(--navy-800); margin: 0;
}
.ld-card-sub { font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 3px; }

/* A card with plain content rather than a table still needs its own inset. */
.ld-card-body { padding: 18px 20px; }

/* The empty state. Every list renders one rather than collapsing to nothing,
   so a quiet day reads as "nothing here" and not as "this is broken". */
.ld-empty {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 38px 24px; gap: 10px;
}
.ld-empty > i { font-size: 27px; color: var(--muted-3); }
.ld-empty > p {
    font-size: 13.5px; color: var(--muted); font-weight: 600;
    max-width: 430px; margin: 0;
}

.ld-badge-navy { background: var(--sky-tint-2); color: var(--navy-800); }

/* Rich text written in the editor, rendered back on screen. Bootstrap's reset
   strips list indents and paragraph margins, so authored formatting would
   otherwise arrive flattened — which defeats the point of an editor. */
.ld-rich > :first-child { margin-top: 0; }
.ld-rich > :last-child  { margin-bottom: 0; }
.ld-rich p { margin: 0 0 8px; }
.ld-rich ul, .ld-rich ol { margin: 6px 0 10px; padding-left: 22px; }
.ld-rich li { margin-bottom: 4px; }
.ld-rich h2 { font-size: 16px; font-weight: 800; color: var(--navy-800); margin: 14px 0 6px; }
.ld-rich h3 { font-size: 14px; font-weight: 800; color: var(--navy-800); margin: 12px 0 5px; }
.ld-rich blockquote {
    margin: 8px 0; padding: 2px 0 2px 12px;
    border-left: 3px solid var(--border); color: var(--ink-soft);
}
.ld-rich a { color: var(--navy-600); }

/* Urgency left bar. The fastest read on the screen. */
.ld-bar        { border-left: 4px solid var(--muted-3); }
.ld-bar-overdue   { border-left-color: var(--vermilion); border-color: var(--vermilion-border); box-shadow: 0 1px 2px rgba(195,69,46,.05), 0 8px 20px rgba(195,69,46,.08); }
.ld-bar-due-soon  { border-left-color: var(--amber); }
.ld-bar-done      { border-left-color: var(--green); }
.ld-bar-scheduled { border-left-color: var(--sky); }

/* A brand-new lead reads as its own thing, not just another blue row. */
.ld-card-new-lead {
    background: linear-gradient(180deg, #F4F9FD, #E9F2FA);
    border-color: var(--sky-border);
}

/* =========================== banners & buttons =========================== */

.ld-banner {
    background: var(--grad-banner);
    border-radius: 18px;
    color: #fff;
    padding: 24px 26px;
    box-shadow: var(--shadow-banner);
}
.ld-banner-sub { color: #A9C4E0; font-size: 13px; font-weight: 700; }

.btn { font-weight: 700; border-radius: 10px; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; }
.btn:active { transform: scale(.97); }

/* Tap targets never below 44px — the app is used one-handed, mid-call. */
.btn, .form-control, .form-select { min-height: 44px; }
.btn-sm { min-height: 34px; }

/* Bootstrap compiles .btn-primary from its own Sass variable, so overriding
   --bs-primary does NOT recolour it — a stray btn-primary renders default blue
   and breaks the palette. Redirect it to the brand instead of hunting for
   every usage. */
.btn-primary {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    background: var(--grad-navy);
    border: none;
    color: #fff;
    box-shadow: var(--shadow-navy);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--grad-navy-hover);
    color: #fff;
}

.ld-btn-navy      { background: var(--grad-navy);      color: #fff; border: none; box-shadow: var(--shadow-navy); }
.ld-btn-navy:hover{ background: var(--grad-navy-hover);color: #fff; }
.ld-btn-vermilion { background: var(--grad-vermilion); color: #fff; border: none; box-shadow: var(--shadow-vermilion); }
.ld-btn-vermilion:hover { color: #fff; filter: brightness(.96); }
.ld-btn-sky       { background: var(--grad-sky);       color: #fff; border: none; }
.ld-btn-sky:hover { color: #fff; filter: brightness(.96); }
.ld-btn-amber     { background: var(--grad-amber);     color: #fff; border: none; }
.ld-btn-outline   { background: #fff; border: 1.5px solid var(--border); color: var(--ink-soft); }
.ld-btn-outline:hover { border-color: var(--sky-border); color: var(--navy-800); }
.ld-btn-navy:disabled, .ld-btn-vermilion:disabled, .btn:disabled {
    background: #9CA3AF; color: #fff; box-shadow: none; opacity: 1;
}

.ld-btn-icon { width: 48px; min-width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; }

/* ============================ icon chips ================================= */

.ld-chip-icon {
    width: 26px; height: 26px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0;
}
.ld-chip-icon-lg { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.ld-chip-overdue   { background: var(--vermilion-tint); color: var(--vermilion); }
.ld-chip-due-soon  { background: var(--amber-tint);     color: var(--amber-text); }
.ld-chip-done      { background: var(--green-tint);     color: var(--green); }
.ld-chip-scheduled { background: var(--sky-tint);       color: var(--sky-text); }
.ld-chip-navy      { background: var(--sky-tint-2);     color: var(--navy-800); }

/* Pills used for stages, plans, categories. */
.ld-pill {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--surface-3); color: var(--ink-soft);
    font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px;
}
.ld-pill-navy { background: var(--sky-tint-2); color: var(--navy-800); }

/* ============================== app shell ================================ */

.ld-sidebar {
    width: 252px; flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 22px 14px;
    box-sizing: border-box;
}
.ld-brand-mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--grad-navy); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 14px; letter-spacing: .02em; flex-shrink: 0;
}
.ld-nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 14px; border-radius: 10px;
    font-size: 13px; font-weight: 700; color: #5B6478;
    text-decoration: none; transition: background 150ms ease, color 150ms ease;
}
.ld-nav-item i { font-size: 15px; width: 18px; text-align: center; flex-shrink: 0; }
.ld-nav-item:hover { background: #EDF2F8; color: var(--navy-800); }
.ld-nav-item.active { background: var(--grad-navy); color: #fff; box-shadow: 0 8px 18px rgba(14,43,89,.28); }
.ld-nav-item.active:hover { background: var(--grad-navy-hover); color: #fff; }

/* Marketing's submenu. The parent is a normal nav row that happens to toggle;
   the children are indented and a shade quieter so the hierarchy reads at a
   glance without a second visual language. */
.ld-nav-parent { cursor: pointer; }
.ld-nav-caret {
    font-size: 10px !important; width: auto !important;
    transition: transform 180ms ease; opacity: .65;
}
.ld-nav-parent.open .ld-nav-caret,
.ld-nav-parent[aria-expanded="true"] .ld-nav-caret { transform: rotate(180deg); }

.ld-nav-sub { padding: 2px 0 2px 14px; margin-left: 8px; border-left: 1.5px solid #E4E9F0; }
.ld-nav-sub .ld-nav-item { font-size: 12.5px; padding: 7px 12px; }
.ld-nav-sub .ld-nav-item i { font-size: 13px; }

/* The content column fills the window on desktop.
   The prototype is explicit: contentMaxWidth = isDesktop ? 'none' : '480px'.
   Capping desktop at a fixed width leaves a dead margin on a laptop and wastes
   exactly the room the two-column task layout needs. */
.ld-content {
    padding: 16px;
    max-width: 480px;
    margin: 0 auto;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    /* A flex column so the footer's margin-top:auto has something to push against. */
    display: flex;
    flex-direction: column;
    flex: 1;
}

@media (min-width: 992px) {
    .ld-content { padding: 26px 36px; max-width: none; margin: 0; }
}

/* ---------------------------------------------------------------- grids ---
   Explicit gaps from the prototype rather than one uniform Bootstrap gutter:
   KPI cards sit tighter (12px) than the task columns (20px), and the page
   reads as grouped rather than evenly spaced. */

.ld-grid-kpi,
.ld-grid-sections,
.ld-grid-charts,
.ld-grid-daily { display: grid; }

.ld-grid-daily    { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ld-grid-kpi      { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; }
.ld-grid-sections { grid-template-columns: 1fr;            gap: 20px; margin-bottom: 22px; align-items: start; }
.ld-grid-charts   { grid-template-columns: 1fr;            gap: 16px; margin-bottom: 22px; }

@media (min-width: 992px) {
    .ld-grid-kpi      { grid-template-columns: repeat(4, 1fr); }
    .ld-grid-sections { grid-template-columns: 1.35fr 1fr; }
    .ld-grid-charts   { grid-template-columns: 1fr 1fr; }
}

/* A form is the one thing that must NOT fill a wide monitor. An input stretched
   to 1600px is harder to use, not easier — the eye loses the line between the
   label and the field. */
.ld-form-col { max-width: 640px; }

/* Auto-filling card grid — product cards, report cards, group cards, template
   cards. Cards keep a comfortable minimum and the row fills the window rather
   than leaving a dead gutter on a wide monitor. */
.ld-grid-cards { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 768px) {
    .ld-grid-cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}

/* Vertical rhythm. Every major block below the header is 18-22px apart. */
.ld-mb-block  { margin-bottom: 18px; }
.ld-mb-block-lg { margin-bottom: 22px; }

/* Task lists scroll inside their column on desktop so the two columns stay
   level and the page does not become one endless scroll. */
.ld-stack { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 992px) {
    .ld-stack-scroll { max-height: 520px; overflow-y: auto; padding-right: 2px; }
}

/* Mobile top bar + bottom tabs. */
.ld-topbar {
    background: var(--surface); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 1020; padding: 10px 16px;
}
.ld-avatar {
    width: 32px; height: 32px; border-radius: 99px;
    background: var(--sky-tint); color: var(--navy-800);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12.5px; font-weight: 800; flex-shrink: 0;
}
.ld-avatar-lg { width: 36px; height: 36px; font-size: 13.5px; }

.ld-tabbar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030;
    background: var(--surface); border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(14,43,89,.08);
    display: flex; padding-bottom: env(safe-area-inset-bottom);
}
.ld-tabbar a {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 0;
    font-size: 10.5px; font-weight: 700; color: var(--muted-2);
    text-decoration: none; min-height: 44px;
}
.ld-tabbar a i { font-size: 19px; }
.ld-tabbar a.active { color: var(--vermilion); }

/* ============================= filter bar ================================ */

.ld-filterbar {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 12px 14px;
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.ld-filterbar .form-select, .ld-filterbar .form-control {
    padding: 8px 11px; border-radius: 9px; border: 1.5px solid var(--border);
    font-weight: 700; min-height: 34px; font-size: 13px; width: auto;
}
.ld-date-pill {
    padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--border);
    background: #fff; color: var(--ink-soft); font-size: 12.5px; font-weight: 700;
    text-decoration: none; white-space: nowrap; min-height: 34px;
    display: inline-flex; align-items: center;
}
.ld-date-pill.active { background: var(--grad-navy); color: #fff; border-color: transparent; box-shadow: 0 6px 14px rgba(14,43,89,.20); }

/* =============================== tables ================================== */

.ld-table { width: 100%; border-collapse: collapse; }
.ld-table thead th {
    background: var(--surface-2); color: var(--muted);
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    padding: 11px 18px; text-align: left; white-space: nowrap;
}
.ld-table tbody td { padding: 13px 18px; border-top: 1px solid var(--border-2); font-size: 13.5px; }
.ld-table tbody tr:hover { background: #FDFBF8; }

/* ============================== footer =================================== */

/* The footer keeps its own space at the bottom of the page.
   `margin-top:auto` inside the flex column below is what stops it riding up
   under the content on a short screen — it sits at the bottom of the viewport
   whatever the menu or the page happens to contain. */
.ld-footer {
    border-top: 1px solid var(--border);
    padding: 18px 0 8px;
    margin-top: auto;
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: space-between; align-items: center;
    font-size: 12.5px; font-weight: 600; color: var(--muted-3);
}
.ld-footer strong { font-weight: 800; }

/* The column that holds header + content + footer. Content grows, footer is
   pushed to the bottom. */
.ld-page {
    display: flex; flex-direction: column;
    min-height: 100vh;
    min-width: 0; flex: 1;
}
.ld-page-body { flex: 1 0 auto; }

/* Clears the fixed mobile tab bar so the footer is never trapped beneath it. */
.ld-tabbar-spacer { height: 90px; }
@media (min-width: 992px) { .ld-tabbar-spacer { display: none; } }

/* =============================== toast =================================== */

.ld-toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 1080;
    background: var(--ink); color: #fff; font-size: 14px; font-weight: 700;
    padding: 13px 22px; border-radius: 12px;
    display: flex; align-items: center; gap: 9px;
    box-shadow: 0 12px 30px rgba(14,43,89,.30);
}
.ld-toast i { color: #7BC49A; }
@media (min-width: 992px) { .ld-toast { bottom: 26px; } }

/* ============================== progress ================================= */

.ld-meter { height: 7px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; }
.ld-meter > span { display: block; height: 100%; border-radius: 99px; width: 0; transition: width 900ms cubic-bezier(.2,.8,.2,1); }
.ld-meter-dials      > span { background: #F0B24A; }
.ld-meter-demos      > span { background: #6FB3E6; }
.ld-meter-followups  > span { background: #E07E64; }

.ld-bar-track { height: 9px; border-radius: 99px; background: #F4EFE8; overflow: hidden; }
.ld-bar-track > span { display: block; height: 100%; border-radius: 99px; width: 0; background: linear-gradient(90deg, #2885CA, #0E2B59); transition: width 900ms cubic-bezier(.2,.8,.2,1); }

/* ============================ form controls ============================== */

.form-control, .form-select {
    border: 1.5px solid var(--border); border-radius: 10px;
    font-weight: 700; color: var(--ink); background-color: #fff;
}
.form-control:focus, .form-select:focus {
    border-color: var(--navy-600);
    box-shadow: 0 0 0 3px rgba(14,43,89,.15);
}
.form-control::placeholder { font-weight: 600; color: #B6AFA3; }
.form-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 6px; }

/* ============================== utilities ================================ */

.ld-divider { border-top: 1px solid var(--border-2); }
.min-w-0 { min-width: 0; }

/* Skeleton rows match the geometry of what they replace, so the page does not
   jump when real content arrives. */
.ld-skeleton { background: linear-gradient(90deg, #F2EDE6 25%, #F8F4EE 37%, #F2EDE6 63%); background-size: 400% 100%; animation: ld-shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes ld-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}