/*!
 * Adblast refine layer — shared tokens, mobile navigation, empty states,
 * file grid, activity timeline and accessibility polish.
 * Loaded after workspace.css / adblast-admin.css so it can harmonise both.
 */

:root {
    --ab-gold: #c99437;
    --ab-gold-soft: rgba(201, 148, 55, .14);
    --ab-navy: #071d2c;
    --ab-ink: #16293a;
    --ab-muted: #6d8091;
    --ab-line: #e2e9ef;
    --ab-radius: 16px;
    --ab-shadow-sm: 0 1px 2px rgba(12, 40, 66, .06);
    --ab-shadow-md: 0 14px 34px rgba(12, 40, 66, .1);
    --ab-shadow-lg: 0 28px 60px rgba(9, 32, 54, .16);
}

/* ---------- Accessibility ---------- */
.ab-skip {
    position: absolute; left: -9999px; top: 8px; z-index: 999;
    padding: 10px 16px; border-radius: 10px;
    background: var(--ab-navy); color: #fff; font-size: 13px; font-weight: 700;
    text-decoration: none;
}
.ab-skip:focus { left: 12px; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--ab-gold);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Mobile navigation drawer ---------- */
.ab-navtoggle {
    display: none; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-right: 4px;
    border: 1px solid var(--ab-line); border-radius: 11px;
    background: #fff; color: var(--ab-ink); cursor: pointer;
}
.ab-navtoggle:hover { border-color: #cfdae3; box-shadow: var(--ab-shadow-sm); }
.ab-navtoggle i { display: block; width: 16px; height: 2px; border-radius: 2px; background: currentColor; position: relative; }
.ab-navtoggle i::before, .ab-navtoggle i::after {
    content: ''; position: absolute; left: 0; width: 16px; height: 2px; border-radius: 2px; background: currentColor;
}
.ab-navtoggle i::before { top: -5px; }
.ab-navtoggle i::after { top: 5px; }

.ab-navscrim {
    position: fixed; inset: 0; z-index: 78;
    background: rgba(6, 24, 40, .5);
    backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
body.ab-nav-open .ab-navscrim { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
    .ab-navtoggle { display: inline-flex; }
    .workspace-shell, .admin-shell, .shell { grid-template-columns: minmax(0, 1fr); }
    .workspace-side, .admin-side {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
        width: 258px; max-width: 84vw; padding: 16px 14px;
        overflow-y: auto;
        transform: translateX(-104%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        box-shadow: var(--ab-shadow-lg);
    }
    body.ab-nav-open .workspace-side, body.ab-nav-open .admin-side { transform: translateX(0); }

    /* undo the icon-rail collapse — the drawer shows full labels */
    .workspace-brand, .admin-brand { justify-content: flex-start; }
    .workspace-brand div, .workspace-back, .workspace-client, .workspace-client div,
    .workspace-nav-label, .workspace-nav-link span, .workspace-quick, .workspace-user,
    .workspace-user div, .admin-brand div, .admin-access,
    .admin-side .nav > .nav-section, .admin-side .nav a span { display: revert; }
    .workspace-nav-link, .admin-side .nav a { justify-content: flex-start; padding: 10px 12px; }
    .workspace-user button { justify-content: flex-start; }
}

/* ---------- Empty states ---------- */
.ab-empty {
    display: grid; justify-items: center; gap: 6px;
    padding: 46px 24px; text-align: center;
}
.ab-empty__icon {
    display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 6px;
    border-radius: 18px; color: var(--ab-gold);
    background: linear-gradient(150deg, var(--ab-gold-soft), rgba(47, 138, 224, .1));
    border: 1px solid rgba(201, 148, 55, .22);
}
.ab-empty__title { color: var(--ab-ink); font-size: 14px; font-weight: 700; }
.ab-empty__body { max-width: 380px; margin: 0; color: var(--ab-muted); font-size: 12px; line-height: 1.65; }
.ab-empty__action {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    padding: 9px 16px; border: 0; border-radius: 11px;
    background: linear-gradient(135deg, #e3b65d, #c89231);
    color: #16283a; font-size: 12px; font-weight: 700; text-decoration: none;
    box-shadow: 0 10px 20px rgba(190, 133, 30, .2); cursor: pointer;
}
.ab-empty__action:hover { filter: brightness(1.04); }

/* ---------- File library grid ---------- */
.ab-filegrid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px; padding: 16px;
}
.ab-filecard {
    display: grid; gap: 10px; padding: 14px;
    border: 1px solid var(--ab-line); border-radius: 14px; background: #fff;
    box-shadow: var(--ab-shadow-sm);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.ab-filecard:hover { transform: translateY(-2px); border-color: #d5e0e9; box-shadow: var(--ab-shadow-md); }
.ab-filecard__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ab-filecard__ext {
    display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 44px;
    border-radius: 10px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
    color: #4d6478; background: #eef3f7; border: 1px solid #e0e8ee; text-transform: uppercase;
}
.ab-filecard__ext[data-kind="image"] { color: #1f7a54; background: rgba(31, 122, 84, .1); border-color: rgba(31, 122, 84, .2); }
.ab-filecard__ext[data-kind="doc"] { color: #245f9c; background: rgba(36, 95, 156, .1); border-color: rgba(36, 95, 156, .2); }
.ab-filecard__ext[data-kind="sheet"] { color: #1d6b45; background: rgba(29, 107, 69, .1); border-color: rgba(29, 107, 69, .2); }
.ab-filecard__ext[data-kind="pdf"] { color: #a9463c; background: rgba(169, 70, 60, .1); border-color: rgba(169, 70, 60, .2); }
.ab-filecard__ext[data-kind="zip"] { color: #8a6212; background: var(--ab-gold-soft); border-color: rgba(201, 148, 55, .26); }
.ab-filecard__name {
    display: block; color: var(--ab-ink); font-size: 12.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-filecard__meta { margin: 3px 0 0; color: var(--ab-muted); font-size: 10.5px; }
.ab-filecard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ab-filecard__foot a { color: #216487; font-size: 11px; font-weight: 700; text-decoration: none; }
.ab-filecard__foot a:hover { text-decoration: underline; }

/* ---------- Activity timeline ---------- */
.ab-timeline { padding: 6px 18px 14px; }
.ab-timeline__day {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 0 8px; background: linear-gradient(#fff 70%, rgba(255, 255, 255, 0));
    color: var(--ab-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.ab-timeline__day::after { content: ''; flex: 1; height: 1px; background: var(--ab-line); }
.ab-tl {
    position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 12px; align-items: start; padding: 10px 0 10px 0;
}
.ab-tl::before {
    content: ''; position: absolute; left: 15px; top: 34px; bottom: -6px; width: 1px; background: var(--ab-line);
}
.ab-tl:last-child::before { display: none; }
.ab-tl__dot {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 11px;
    color: #4a6a83; background: #f2f6f9; border: 1px solid var(--ab-line);
}
.ab-tl strong { display: block; color: var(--ab-ink); font-size: 12.5px; }
.ab-tl p { margin: 3px 0 0; color: var(--ab-muted); font-size: 11px; line-height: 1.55; }
.ab-tl time { color: #91a4b3; font-size: 10.5px; white-space: nowrap; }

/* ---------- Chips / segmented filters ---------- */
.ab-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ab-chip {
    padding: 7px 13px; border: 1px solid var(--ab-line); border-radius: 999px;
    background: #fff; color: #52697d; font-size: 11px; font-weight: 700; text-decoration: none;
    transition: all .15s ease;
}
.ab-chip:hover { border-color: #cfdae3; color: var(--ab-ink); }
.ab-chip.is-active { border-color: rgba(201, 148, 55, .5); background: var(--ab-gold-soft); color: #8a6212; }

@media (max-width: 720px) {
    .ab-filegrid { grid-template-columns: 1fr; padding: 12px; }
    .ab-timeline { padding: 4px 12px 12px; }
}

/* ---------- Auth note ---------- */
.auth-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 22px 0 0;
    padding: 12px 14px; border: 1px solid #e0e8ee; border-radius: 12px;
    background: #f7fafb; color: #5c7183; font-size: 11.5px; line-height: 1.6;
}
.auth-note .ab-icon { flex: 0 0 auto; margin-top: 1px; color: #2f8ae0; }
.auth-note a { color: #216487; font-weight: 700; text-decoration: none; }
.auth-note a:hover { text-decoration: underline; }

/* ---------- SPA navigation skeleton ---------- */
body.ab-navigating .workspace-main > *:not(.ab-topbar),
body.ab-navigating .main > *:not(.ab-topbar),
body.ab-navigating .admin-main > *:not(.ab-topbar) {
    animation: ab-dim .3s ease .16s both;
    pointer-events: none;
}
@keyframes ab-dim { from { opacity: 1; } to { opacity: .45; filter: saturate(.85); } }

.ab-skeleton {
    border-radius: 10px;
    background: linear-gradient(100deg, #eef2f6 30%, #f7fafc 48%, #eef2f6 66%);
    background-size: 220% 100%;
    animation: ab-shimmer 1.25s linear infinite;
}
@keyframes ab-shimmer { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ---------- Empty state in dense panels ---------- */
.a-panel .ab-empty, .lane .ab-empty { padding: 30px 18px; }
.lane-empty {
    margin: 6px 0; padding: 18px 12px; border: 1px dashed var(--ab-line); border-radius: 12px;
    color: #93a5b3; font-size: 11px; font-weight: 600; text-align: center; background: #fbfdfe;
}

/* ── Needs attention band ─────────────────────────────────────── */
.ab-attention{margin:0 0 13px;padding:14px 15px;border:1px solid #ecd9b8;border-radius:14px;background:linear-gradient(135deg,#fffaf0,#ffffff);box-shadow:0 12px 30px rgba(19,42,63,.05)}
.ab-attention__head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ab-attention__head strong{display:block;font-size:13px;letter-spacing:-.01em}
.ab-attention__head small{display:block;margin-top:2px;color:#8a7550;font-size:10px}
.ab-attention__pulse{width:9px;height:9px;border-radius:50%;background:#e0a23c;box-shadow:0 0 0 0 rgba(224,162,60,.55);animation:abPulse 2.1s infinite}
@keyframes abPulse{70%{box-shadow:0 0 0 9px rgba(224,162,60,0)}100%{box-shadow:0 0 0 0 rgba(224,162,60,0)}}
.ab-attention__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px}
.ab-attention__card{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #eee3d1;border-radius:11px;background:#fff;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ab-attention__card:hover{transform:translateY(-2px);border-color:#e3c896;box-shadow:0 12px 24px rgba(19,42,63,.08)}
.ab-attention__copy{min-width:0;flex:1}
.ab-attention__copy strong{display:block;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-attention__copy small{display:block;margin-top:3px;color:#7b8896;font-size:9.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-attention__ico{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:9px;background:#fff3e2;color:#c9852a}
.ab-attention__card--red .ab-attention__ico{background:#fdecec;color:#c85555}
.ab-attention__card--blue .ab-attention__ico{background:#edf5ff;color:#2478e8}
.ab-attention__go{color:#a9b6c2;flex:0 0 auto}

/* ── Notification bell ────────────────────────────────────────── */
.ab-bell{position:relative}
.ab-bell__trigger{position:relative;height:34px;width:34px;display:grid;place-items:center;border:1px solid rgba(16,42,66,.12);border-radius:10px;background:#fff;color:#3a566d}
.ab-bell__trigger{color:#3a566d;transition:.18s}
.ab-bell__trigger:hover{background:#f4f8fc;color:#12263a}
.ab-bell__dot{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;display:grid;place-items:center;border-radius:9px;background:#d4483f;color:#fff;font-size:9px;font-weight:800}
.ab-bell__panel{width:320px;padding:0;overflow:hidden}
.ab-bell__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px;border-bottom:1px solid #eef2f6}
.ab-bell__head strong{display:block;font-size:12px}
.ab-bell__head small{display:block;margin-top:2px;color:#7d8a97;font-size:9.5px}
.ab-bell__clear{border:0;background:none;color:#2874cc;font-size:10px;font-weight:700;cursor:pointer}
.ab-bell__list{max-height:290px;overflow-y:auto}
.ab-bell__item{display:flex;align-items:flex-start;gap:9px;width:100%;padding:11px 13px;border:0;border-bottom:1px solid #f3f6f9;background:none;text-align:left;cursor:pointer;transition:.15s}
.ab-bell__item:hover{background:#f7fafd}
.ab-bell__item.is-unread{background:#f4f9ff}
.ab-bell__item.is-unread .ab-bell__copy strong::after{content:"";display:inline-block;margin-left:6px;width:6px;height:6px;border-radius:50%;background:#2478e8;vertical-align:middle}
.ab-bell__ico{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:8px;background:#eef4fb;color:#2c6ec4}
.ab-bell__copy{min-width:0}
.ab-bell__copy strong{display:block;font-size:11px;line-height:1.35}
.ab-bell__copy small{display:block;margin-top:3px;color:#7d8a97;font-size:9.5px}
.ab-bell__empty{margin:0;padding:20px 14px;color:#7d8a97;font-size:10.5px;text-align:center}
.ab-bell__all{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-top:1px solid #eef2f6;color:#2874cc;font-size:10.5px;font-weight:700;text-decoration:none}
.ab-bell__all:hover{background:#f6faff}

/* ── Notifications page ───────────────────────────────────────── */
.ab-notif-list{display:grid}
.ab-notif{display:flex;align-items:center;gap:11px;width:100%;padding:13px 15px;border:0;border-bottom:1px solid #f1f4f8;background:none;text-align:left;cursor:pointer;transition:.15s}
.ab-notif:hover{background:#f8fbfe}
.ab-notif.is-unread{background:#f4f9ff}
.ab-notif__ico{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:10px;background:#eef4fb;color:#2c6ec4}
.ab-notif__copy{flex:1;min-width:0}
.ab-notif__copy strong{display:block;font-size:12px}
.ab-notif__copy small{display:block;margin-top:3px;color:#7d8a97;font-size:10px}
.ab-notif time{color:#93a1ae;font-size:9.5px;white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════
   Mobile pass — detail pages, list rows, dropdowns, kanban
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 720px) {
    /* topbar dropdown panels become near-full-width sheets */
    .ab-topbar .ab-usermenu-panel {
        position: fixed;
        top: 64px; left: 12px; right: 12px;
        width: auto; max-width: none;
        max-height: calc(100dvh - 88px);
        overflow-y: auto;
    }

    /* project hero: single column, progress full-width */
    .project-hero { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .project-hero .mini-progress { width: 100% !important; max-width: none; }

    /* headings + action rows stack cleanly */
    .workspace-heading h1 { font-size: 22px; line-height: 1.2; }
    .workspace-actions { display: flex; flex-wrap: wrap; gap: 8px; }
    .workspace-actions .button-primary,
    .workspace-actions .button-secondary { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
    .workspace-actions .pipeline-page-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .pipeline-page-actions__capture { width: 100%; }
    .pipeline-page-actions__utilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pipeline-page-actions__utilities .button-secondary { width: 100%; padding-inline: 8px; }

    /* spec tiles: comfortable 2-up until very small */
    .spec-grid { grid-template-columns: 1fr 1fr; }

    /* editor bar: hint above, save button full-width */
    .editor-bar { flex-direction: column; align-items: stretch; }
    .editor-bar .button-primary { justify-content: center; }

    /* idea list rows collapse to content + chevron */
    .idea-list-row { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 10px; }
    .idea-list-row > .status-pill, .idea-list-row > .project-date { display: none; }

    /* meeting rows collapse to chip + copy */
    .meeting-list-row { grid-template-columns: 44px minmax(0, 1fr); }
    .meeting-list-row > :last-child:not(.date-chip):not(:nth-child(2)) { grid-column: 2; }

    /* kanban lanes: swipe with snap points */
    .board { grid-auto-columns: minmax(252px, 82vw); scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
    .lane { scroll-snap-align: start; }

    /* attention cards breathe on narrow screens */
    .ab-attention__grid { grid-template-columns: 1fr; }

    /* milestone action clusters wrap under content */
    .milestone-actions { justify-content: flex-start; }
    .milestone-actions input[name="approval_note"] { min-width: 0; flex: 1 1 140px; }

    /* stat tiles and generic stacks stay readable */
    .stat-row { grid-template-columns: 1fr 1fr; gap: 9px; }
    .stat-tile { padding: 12px 13px; }
    .stat-tile strong { font-size: 22px; }

    /* drawer actions: primary action full-width */
    .drawer-actions { flex-direction: column-reverse; }
    .drawer-actions .button-primary, .drawer-actions .button-secondary { width: 100%; justify-content: center; }
}

@media (max-width: 460px) {
    .spec-grid { grid-template-columns: 1fr; }
    .stat-row { grid-template-columns: 1fr; }
    .project-stats { grid-template-columns: 1fr 1fr; }
    .project-stat { padding: 12px 13px; }

    /* tighter page padding on phones */
    .workspace-main, .admin-main, .main { padding-left: 12px; padding-right: 12px; }

    /* compact topbar: hide long context labels, keep chip + bell + avatar */
    .ab-topbar { padding: 10px 12px; gap: 8px; }
    .ab-topbar__context small { display: none; }
    .ab-topbar__trust { display: none; }

    /* filter rows go full width */
    .filter-form { width: 100%; }
    .filter-form input[type="search"], .filter-form input:not([type]) { flex: 1 1 100%; }
}

/* ── Milestone status pills (visible to partners) ───────────────── */
.milestone-status { margin: 5px 0 1px; letter-spacing: .02em; }
.milestone-status--not_started { color: #5c6f7e; background: #eef2f5; }
.milestone-status--in_progress { color: var(--blue, #2478e8); background: var(--blue-soft, #edf5ff); }
.milestone-status--complete { color: var(--green, #27865e); background: var(--green-soft, #ebf9f1); }
.milestone-status--blocked { color: var(--red, #c85555); background: var(--red-soft, #fdeeee); }

/* ── Sidebar footer: standard clean profile row ────────────────── */
.workspace-user { padding-top: 14px; }
.workspace-user--row { display: flex; align-items: center; gap: 10px; }
.workspace-profile {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; margin-left: -8px; border-radius: 10px;
    text-decoration: none; transition: background .18s ease;
}
.workspace-profile:hover { background: rgba(255, 255, 255, .06); }
.workspace-profile__avatar {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: linear-gradient(135deg, #f0bc5b, #c78225);
    color: #152b3c; font-size: 12px; font-weight: 800;
}
.workspace-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }
.workspace-profile__id { min-width: 0; }
.workspace-profile__id strong {
    display: block; color: #fff; font-size: 12.5px; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workspace-profile__id small {
    display: block; margin-top: 2px; color: #a7bccb; font-size: 10px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workspace-logout { margin: 0; flex: 0 0 auto; }
.workspace-logout__btn {
    display: grid; place-items: center; width: 32px; height: 32px;
    border: 0; border-radius: 9px; background: transparent; color: #8fa6b5;
    transition: background .18s ease, color .18s ease;
}
.workspace-logout__btn:hover { background: rgba(255, 255, 255, .09); color: #f3c66e; }
@media (max-width: 760px) {
    .workspace-user--row { flex-direction: column; gap: 8px; }
    .workspace-user--row .workspace-profile { flex: 0 0 auto; padding: 0; margin-left: 0; }
    .workspace-user--row .workspace-profile__id { display: none; }
}

/* ============================================================
   Dashboard v2 — modern app-grade type scale, cards and rhythm
   ============================================================ */
.main { padding: 22px 34px 46px; }
.top { align-items: flex-end; margin-bottom: 24px; }
.hello small { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #8494a3; }
.hello h1 { margin-top: 8px; font-size: 30px; letter-spacing: -.03em; }
.hello p { margin-top: 6px; font-size: 13px; line-height: 1.5; max-width: 62ch; }
.ribbon { margin-top: 10px; padding: 6px 10px; font-size: 10.5px; border-radius: 999px; }

.tools .search { width: 288px; border-radius: 12px; padding: 10px 13px; box-shadow: 0 1px 2px rgba(19,42,63,.04); }
.tools .search input { font-size: 13px; }
.tools .icon-button { height: 40px; width: 40px; border-radius: 12px; }
.primary, .outline { padding: 11px 16px; font-size: 12.5px; border-radius: 12px; }

/* Metric cards */
.metrics { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.metric {
    position: relative; min-height: 112px; padding: 18px; gap: 15px; border-radius: 18px;
    border: 1px solid #e9eef4; background: #fff; overflow: hidden;
    box-shadow: 0 1px 2px rgba(19,42,63,.04), 0 12px 28px -18px rgba(19,42,63,.28);
}
.metric::after {
    content: ''; position: absolute; inset: auto -30% -60% auto; width: 150px; height: 150px;
    border-radius: 50%; background: radial-gradient(circle, rgba(36,120,232,.09), transparent 68%);
    opacity: 0; transition: opacity .25s ease;
}
.metric:hover::after { opacity: 1; }
.metric:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(19,42,63,.05), 0 22px 44px -22px rgba(19,42,63,.4); }
.metric-icon {
    width: 48px; height: 48px; flex: 0 0 48px; border-radius: 15px; border: 0 !important;
    background: linear-gradient(150deg, #e7f1ff, #d8e8ff) !important; color: var(--blue) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.metric:nth-child(2) .metric-icon { background: linear-gradient(150deg,#fff1dd,#ffe4c1) !important; color: var(--orange) !important; }
.metric:nth-child(3) .metric-icon { background: linear-gradient(150deg,#e4f7ed,#cdedde) !important; color: var(--green) !important; }
.metric:nth-child(4) .metric-icon { background: linear-gradient(150deg,#efe7ff,#e0d3ff) !important; color: var(--purple) !important; }
.metric-icon .ab-icon { width: 23px; height: 23px; }
.metric span { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: #7c8b99; }
.metric strong { margin-top: 8px; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.metric small { margin-top: 6px; font-size: 11px; line-height: 1.4; }

/* Panels */
.layout { gap: 16px; }
.stack { gap: 16px; }
.panel { border-radius: 18px; border-color: #e9eef4; box-shadow: 0 1px 2px rgba(19,42,63,.04), 0 14px 30px -22px rgba(19,42,63,.3); }
.panel-head { padding: 17px 19px; }
.panel-head h2 { font-size: 17px; letter-spacing: -.02em; }
.panel-head p { margin-top: 5px; font-size: 11.5px; }
.text-link { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 6px 9px; border-radius: 9px; transition: background .18s ease; }
.text-link:hover { background: #eef5ff; }

/* Project rows */
.project-row { padding: 15px 19px; gap: 14px; transition: background .16s ease; }
.project-row:hover { background: #fafcfe; }
.project-badge { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }
.copy strong { font-size: 13.5px; letter-spacing: -.01em; }
.copy p { margin-top: 4px; font-size: 11px; }
.progress label { font-size: 10.5px; }
.track { height: 6px; margin-top: 7px; }
.chip { padding: 6px 10px; border-radius: 999px; font-size: 10.5px; letter-spacing: .02em; }

/* Meetings + pipeline */
.meeting-card { padding: 19px; }
.date-box { height: 48px; border-radius: 13px; }
.date-box b { font-size: 19px; }
.date-box span { font-size: 8.5px; }
.meeting-date { grid-template-columns: 48px 1fr; }
.meeting-date strong { font-size: 13px; }
.meeting-date p { font-size: 11px; }
.meeting-actions span { font-size: 10.5px; }
.pipeline { gap: 9px; padding: 16px; }
.pipe { min-height: 74px; padding: 12px 10px; border-radius: 13px; transition: transform .16s ease; }
.pipe:hover { transform: translateY(-2px); }
.pipe span { font-size: 9.5px; letter-spacing: .03em; text-transform: uppercase; }
.pipe b { margin-top: 9px; font-size: 22px; }

/* Attention strip fits the new scale */
.ab-attention__head strong { font-size: 14px; }
.ab-attention__head small { font-size: 11px; }
.ab-attention__card strong { font-size: 12.5px; }
.ab-attention__card small { font-size: 11px; }

@media (max-width: 1180px) {
    .metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .layout { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
    .main { padding: 16px 16px 40px; }
    .metrics { grid-template-columns: minmax(0,1fr); }
    .hello h1 { font-size: 24px; }
}

/* ── Requests & delivery ───────────────────────────────────────── */
.req-track{padding:20px 22px;display:flex;flex-direction:column;gap:16px}
.req-steps{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.req-step{flex:1 1 140px;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#f4f7fa;border:1px solid #e6edf3}
.req-step__dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#dbe5ee;color:#54687a;font-weight:800;font-size:12px}
.req-step__label{font-size:12.5px;font-weight:700;color:#54687a;line-height:1.25}
.req-step.done{background:#eaf7ef;border-color:#cdead9}
.req-step.done .req-step__dot{background:#2f9e5f;color:#fff}
.req-step.done .req-step__label{color:#22694a}
.req-step.current{background:#eef4ff;border-color:#cddffb;box-shadow:0 6px 18px rgba(40,90,190,.10)}
.req-step.current .req-step__dot{background:#2f6fed;color:#fff}
.req-step.current .req-step__label{color:#1f4bb0}
.req-track__meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.req-track__meta small{color:#6c7f8e;font-size:12.5px;font-weight:600}
.req-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(280px,1fr);gap:18px;align-items:start}
.req-main,.req-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.req-body{padding:0 22px 18px;color:#3d4d5c;font-size:14.5px;line-height:1.65}
.req-note{margin:0 22px 18px;padding:10px 14px;border-radius:10px;background:#f6f8fb;color:#41525f;font-size:13.5px}
.req-files{display:flex;flex-direction:column;gap:8px;padding:0 22px 20px}
.req-file{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid #e6edf3;border-radius:12px;text-decoration:none;background:#fff;transition:.16s ease}
.req-file:hover{border-color:#c9dcf6;transform:translateY(-1px);box-shadow:0 8px 20px rgba(30,60,110,.08)}
.req-file__ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#eef3fa;color:#3a6fd8}
.req-file b{display:block;font-size:13.5px;color:#1e2c39}
.req-file small{color:#7a8b99;font-size:12px}
.req-mockups{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:0 22px 20px}
.req-mockup{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid #e6edf3;border-radius:14px;text-decoration:none;background:#fff;transition:.16s ease}
.req-mockup:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,60,110,.10);border-color:#c9dcf6}
.req-mockup__thumb{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(140deg,#eef4ff,#e6f6ee);color:#2f6fed}
.req-mockup b{font-size:13.5px;color:#1e2c39}
.req-mockup small{color:#7a8b99;font-size:12px}
.req-quote{margin:0 22px 16px;padding:16px 18px;border-radius:14px;background:linear-gradient(140deg,#f2f7ff,#eefaf3);border:1px solid #dbe8f7}
.req-quote span{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6b7f90}
.req-quote strong{display:block;font-size:26px;font-weight:800;color:#17324f;margin-top:4px}
.req-quote p{margin:8px 0 0;color:#45596b;font-size:13.5px;line-height:1.6}
.req-decision{padding:0 22px 20px;display:flex;flex-direction:column;gap:10px}
.req-decision textarea,.req-reply textarea{width:100%;border:1px solid #dfe7ee;border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;resize:vertical}
.req-decision__actions{display:flex;gap:10px;flex-wrap:wrap}
.req-thread{display:flex;flex-direction:column;gap:14px;padding:0 22px}
.req-message{display:flex;gap:12px}
.req-message__avatar{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:#eef3fa;color:#3a6fd8;font-weight:800;font-size:12px}
.req-message strong{display:block;font-size:13.5px;color:#1e2c39}
.req-message strong small{color:#8b9aa7;font-weight:600;font-size:11.5px;margin-left:6px}
.req-message p{margin:4px 0 0;color:#45596b;font-size:14px;line-height:1.6}
.req-empty-line{color:#8b9aa7;font-size:13.5px;margin:0}
.req-reply{display:flex;gap:10px;align-items:flex-start;padding:16px 22px 20px}
.req-reply textarea{flex:1}
.req-facts{list-style:none;margin:0;padding:0 22px 20px;display:flex;flex-direction:column;gap:10px}
.req-facts li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px}
.req-facts span{color:#7a8b99;font-weight:600}
.req-facts b{color:#1e2c39}
.req-form{display:flex;flex-direction:column;gap:12px;padding:0 22px 20px}
@media (max-width:1080px){.req-grid{grid-template-columns:1fr}}
.req-dash__body{display:flex;flex-direction:column;gap:8px;padding:4px 0 2px}
.req-dash__row{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid #e9eef4;border-radius:12px;text-decoration:none;background:#fff;transition:.16s ease}
.req-dash__row:hover{border-color:#c9dcf6;transform:translateY(-1px);box-shadow:0 8px 18px rgba(30,60,110,.07)}
.req-dash__ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#eef3fa;color:#3a6fd8;flex:none}
.req-dash__row strong{display:block;font-size:13.5px;color:#1e2c39}
.req-dash__row p{margin:2px 0 0;font-size:12px;color:#7a8b99}
.req-dash__row div{flex:1;min-width:0}

/* ---------- Compact Account Manager card ---------- */
.manager--compact{padding:14px}
.manager--compact .manager-top{gap:10px}
.manager--compact .manager-avatar{width:42px;height:42px;flex:0 0 42px;border-radius:13px;font-size:13px;box-shadow:0 6px 16px rgba(188,120,40,.18)}
.manager--compact .manager-id strong{font-size:14px}
.manager--compact .manager-id p{font-size:11.5px;margin-top:2px}
.manager-contacts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.manager-chip{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 10px;border:1px solid #e3eaf2;border-radius:10px;background:#fbfcfe;color:#1e2c39;text-decoration:none;font-size:12px;font-weight:600;transition:.16s ease}
.manager-chip:hover{border-color:#c9dcf6;background:#fff;transform:translateY(-1px);box-shadow:0 8px 18px rgba(30,60,110,.07)}
.manager-chip__ico{width:26px;height:26px;flex:0 0 26px;border-radius:8px;display:grid;place-items:center;background:#eef3fa;color:#3a6fd8}
.manager-chip__txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.manager--compact .manager-note{margin-top:11px;font-size:11.5px;color:#7a8b99;line-height:1.5}
@media (max-width: 430px){
.manager-contacts{flex-direction:column}
.manager-chip{width:100%}
}

/* ---------- Requirement detail: compact cards + file rows ---------- */
.req-track--tight{padding:14px 16px}
.req-card{padding:16px}
.req-card .surface-header{margin-bottom:10px;align-items:center}
.req-card .surface-header h2{font-size:15px}
.req-card .surface-header p{font-size:12px}
.req-count{font-size:11.5px;font-weight:700;color:#5d6f81;background:#f1f5fa;border-radius:999px;padding:4px 9px}
.req-files{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.req-file{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid #e4eaf2;border-radius:11px;background:#fbfcfe}
.req-file:hover{border-color:#cbdcf5;background:#fff}
.req-file__ico{width:32px;height:32px;flex:0 0 32px;border-radius:9px;display:grid;place-items:center;background:#eef3fa;color:#3a6fd8}
.req-file__id{min-width:0;flex:1}
.req-file__id b{display:block;font-size:13px;color:#182735;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.req-file__id small{font-size:11.5px;color:#7b8b9a}
.req-file__acts{display:flex;gap:6px;flex-shrink:0}
.req-file__btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;background:#1f4fa3;color:#fff;text-decoration:none}
.req-file__btn:hover{background:#173e83}
.req-file__btn--ghost{background:#fff;color:#33475b;border:1px solid #dbe4ee}
.req-file__btn--ghost:hover{background:#f2f6fb;color:#1f4fa3}
.req-console .req-acc{border:1px solid #e4eaf2;border-radius:11px;margin-top:8px;background:#fbfcfe;overflow:hidden}
.req-console .req-acc>summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;padding:10px 12px;font-size:13px;font-weight:700;color:#22384d}
.req-console .req-acc>summary::-webkit-details-marker{display:none}
.req-console .req-acc[open]>summary{border-bottom:1px solid #eaf0f7;background:#f4f8fd}
.req-console .req-acc .req-form{padding:12px}
.req-facts li a{color:#1f4fa3;text-decoration:none}
@media (max-width:560px){
.req-file{flex-wrap:wrap}
.req-file__acts{width:100%;justify-content:flex-end}
}
.req-outcome{margin-top:14px;padding:14px 16px;border-radius:14px;border:1px solid}
.req-outcome--declined{background:#fef6f4;border-color:#f3d3cc}
.req-outcome--approved{background:#f2f9f4;border-color:#d3e8d8}
.req-outcome__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.req-outcome__head small{color:#8a8f98;font-size:12px}
.req-outcome__badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em}
.req-outcome--declined .req-outcome__badge{background:#fbe4de;color:#a83b26}
.req-outcome--approved .req-outcome__badge{background:#dff0e3;color:#1e6b34}
.req-outcome__hint{margin:8px 0 0;font-size:13px;color:#6b7280;line-height:1.5}
.req-outcome__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* ==== Meetings compact ==== */
.meet-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.meet-strip-item{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:color-mix(in oklab,var(--surface,#fff) 88%,transparent);border:1px solid color-mix(in oklab,var(--foreground,#111) 8%,transparent);font-size:12.5px;color:#6b7280}
.meet-strip-item b{font-size:13px;color:var(--foreground,#111);font-weight:700}
.meet-head{padding:12px 16px!important;align-items:center!important}
.meet-head h2{font-size:15px!important;margin:0!important}
.meet-count{min-width:22px;height:22px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;background:color-mix(in oklab,var(--foreground,#111) 6%,transparent);font-size:11.5px;font-weight:700;color:#6b7280}
.meet-stack{gap:14px!important}
.meet-grid{gap:14px!important}
.meet-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid color-mix(in oklab,var(--foreground,#111) 6%,transparent)}
.meet-row:first-of-type{border-top:0}
.meet-row-main{flex:1;min-width:0}
.meet-row-main strong{display:block;font-size:13.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meet-row-main p{margin:1px 0 0;font-size:12.5px;color:#6b7280;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meet-row-icon{width:30px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:color-mix(in oklab,var(--foreground,#111) 5%,transparent);color:#6b7280;font-weight:700;font-size:13px}
.meet-row-warn{background:#fdf0d9;color:#92610a}
.meet-row-past{opacity:.92}
.meet-row .date-chip{width:44px;height:44px;flex:none}
.meet-row .status-pill{flex:none;font-size:11.5px;padding:3px 10px}
@media (max-width:640px){.meet-row{gap:9px;padding:9px 12px}.meet-row-main p{white-space:normal}}

/* Support tickets */
.ticket-pills{display:flex;gap:8px;flex-wrap:wrap}
.ticket-body{margin:0;padding:0 22px 20px;color:#45596b;font-size:14.5px;line-height:1.7;white-space:pre-line}
.ticket-reply{align-items:center;flex-wrap:wrap}
.ticket-internal{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#7a8b99;white-space:nowrap}
.ticket-internal-tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:6px;background:#fff4e2;color:#a8701c;font-size:10.5px;font-weight:800;font-style:normal;letter-spacing:.03em;text-transform:uppercase}
.req-message--internal{padding:10px 12px;border-radius:12px;background:#fffaf1;border:1px dashed #f0dcbb}
.req-message--adblast .req-message__avatar{background:linear-gradient(135deg,#e8b75a,#d39432);color:#16283a}
.req-message__author--adblast{color:#b47a1f !important;font-weight:800}
.tkt-dash__ico{background:#fdeeee;color:#c85555}

/* Project documentation & delivery */
.doc-surface{padding-bottom:6px}
.doc-form{margin:0 0 14px;padding:16px;border:1px solid var(--line,#e5ecf3);border-radius:14px;background:#fbfdff}
.doc-form--edit{margin:-4px 0 14px}
.doc-form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.doc-field{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#5c7186}
.doc-field--wide{grid-column:1/-1}
.doc-field input,.doc-field select,.doc-field textarea{padding:9px 11px;border:1px solid #dbe5ee;border-radius:10px;font:inherit;font-weight:500;font-size:13.5px;color:#22384a;background:#fff}
.doc-field textarea{resize:vertical;line-height:1.6}
.doc-field input:focus,.doc-field select:focus,.doc-field textarea:focus{outline:none;border-color:#8fb4dd;box-shadow:0 0 0 3px rgba(143,180,221,.22)}
.doc-form__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.doc-list{display:flex;flex-direction:column;gap:10px;padding-bottom:14px}
.doc-item{display:flex;gap:12px;align-items:flex-start;padding:14px 15px;border:1px solid #e8eef4;border-radius:14px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease}
.doc-item:hover{border-color:#d3e1ee;box-shadow:0 8px 22px -18px rgba(23,53,84,.55)}
.doc-item__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eef4fb;color:#3a6fd8;flex:none}
.doc-item__main{flex:1;min-width:0}
.doc-item__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-item__head strong{font-size:14.5px;color:#1c3348}
.doc-tag{padding:2px 7px;border-radius:6px;background:#eef2f6;color:#5b7080;font-size:11px;font-weight:800}
.doc-item__body{margin:6px 0 0;color:#4d6376;font-size:13.5px;line-height:1.65;white-space:pre-line}
.doc-item__meta{margin:6px 0 0;color:#8394a3;font-size:12px}
.doc-item__links{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}
.doc-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#2f6bcd;text-decoration:none}
.doc-link:hover{text-decoration:underline}
.doc-item__tools{display:flex;gap:6px;flex:none}
.doc-item__tools form{margin:0}
.icon-button{display:grid;place-items:center;width:30px;height:30px;border:1px solid #e2e9f0;border-radius:9px;background:#fff;color:#5c7186;cursor:pointer;transition:all .16s ease}
.icon-button:hover{border-color:#c9d8e6;color:#22384a;background:#f6f9fc}
.icon-button.danger:hover{border-color:#f0c9c9;color:#c33f3f;background:#fdf5f5}
@media (max-width:720px){.doc-form__grid{grid-template-columns:1fr}.doc-item{flex-wrap:wrap}.doc-item__tools{width:100%;justify-content:flex-end}}

/* ══════════════════════════════════════════════════════════════════
   Floating WhatsApp live-chat bubble
   ══════════════════════════════════════════════════════════════════ */
.ab-whatsapp {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 10px 10px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff; text-decoration: none; font-size: 13px; font-weight: 700;
    box-shadow: 0 10px 24px rgba(18, 140, 126, .35), 0 4px 8px rgba(0, 0, 0, .12);
    transition: transform .2s ease, box-shadow .2s ease;
}
.ab-whatsapp:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 32px rgba(18, 140, 126, .42), 0 6px 12px rgba(0, 0, 0, .14); }
.ab-whatsapp:active { transform: translateY(-1px) scale(.99); }
.ab-whatsapp__icon {
    display: grid; place-items: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    border-radius: 50%; background: rgba(255, 255, 255, .18);
}
.ab-whatsapp__icon svg { width: 22px; height: 22px; }
.ab-whatsapp__text { padding-right: 6px; white-space: nowrap; }
@media (max-width: 560px) {
    .ab-whatsapp { right: 16px; bottom: 16px; padding: 8px; }
    .ab-whatsapp__text { display: none; }
    .ab-whatsapp__icon { width: 44px; height: 44px; }
    .ab-whatsapp__icon svg { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .ab-whatsapp { transition: none; }
    .ab-whatsapp:hover { transform: none; }
}