@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  --bg:#f6f1e7;--card:#fffdf8;--text:#16263f;--muted:#6f7682;--border:#e6ddd0;
  --primary:#17365d;--primary-dark:#112746;--soft:#eee7da;--radius:14px;
  --danger:#9e2a1e;--danger-bg:#fdf1ef;--success:#1f6a50;--success-bg:#edf8f2;
  --warn:#a15c16;--warn-bg:#fff8ea;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,.brand strong{font-family:"Space Grotesk",Inter,sans-serif}
h1{font-size:32px;line-height:1.15;margin:0 0 8px}
h2{font-size:19px;margin:0 0 12px}
p{line-height:1.55}
small,.small{font-size:12px}
.muted{color:var(--muted)}
hr{border:0;border-top:1px solid var(--border);margin:8px 0}
code{background:#efe8dd;padding:2px 5px;border-radius:5px}

.brand{display:flex;align-items:center;gap:12px;color:#fff}.brand-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.14);font-size:24px}.brand strong{display:block;font-size:21px}.brand span{display:block;font-size:12px;letter-spacing:.16em;opacity:.75;margin-top:2px}.dark-brand{color:var(--text);margin-bottom:28px}.dark-brand .brand-icon{background:var(--soft);color:var(--primary)}

.auth-page{min-height:100vh}
.auth-split{display:grid;min-height:100vh;grid-template-columns:1fr 1fr}
.auth-brand-panel{background:linear-gradient(135deg,#17365d,#264a78);color:#fff;padding:52px 7%;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-brand-panel:after{content:"";position:absolute;width:360px;height:360px;border-radius:50%;background:rgba(255,255,255,.07);top:-160px;right:-140px}
.auth-copy h1{font-size:35px;line-height:1.25}.auth-copy ul{padding:0;margin:24px 0 0;list-style:none;line-height:2.15;color:rgba(255,255,255,.84)}
.auth-brand-panel small{opacity:.55}
.auth-form-panel{display:flex;align-items:center;justify-content:center;padding:40px;background:#fbf7ef}.auth-form{width:100%;max-width:440px}.auth-form h2{font-size:30px;margin-bottom:4px}.auth-links{display:flex;justify-content:flex-start;margin-top:22px;font-size:14px}
.simple-auth-card,.install-card{width:min(560px,calc(100% - 32px));margin:7vh auto;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:36px;box-shadow:0 20px 70px rgba(23,54,93,.10)}
.install-wrap{min-height:100vh;padding:20px}.install-card{margin:4vh auto}

.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:#17365d;color:#fff;padding:26px 20px;display:flex;flex-direction:column}
.sidebar nav{margin-top:38px;display:grid;gap:7px}.sidebar nav a{color:rgba(255,255,255,.78);padding:11px 13px;border-radius:9px;font-size:14px;font-weight:500}.sidebar nav a:hover,.sidebar nav a.active{background:rgba(255,255,255,.13);color:#fff;text-decoration:none}
.sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.16);padding-top:18px}.sidebar-bottom a{color:#fff;font-size:13px}.signed-in{margin-bottom:14px}.signed-in strong,.signed-in span{display:block}.signed-in span{font-size:11px;opacity:.66;margin-top:3px;word-break:break-all}
.main{min-width:0}.page{max-width:1440px;margin:0 auto;padding:42px}
.mobile-topbar{display:none}
.page-heading{margin-bottom:26px}.page-heading p{margin:4px 0 0;color:var(--muted)}.split-heading{display:flex;justify-content:space-between;gap:20px;align-items:end}.back-link{display:inline-block;margin-bottom:12px;font-size:13px;color:var(--muted)}

.card-grid{display:grid;gap:16px;margin-bottom:24px}.card-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-card,.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:0 3px 14px rgba(23,54,93,.06)}.info-card>span{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:10px}.info-card>strong{display:block;font-size:18px;margin-bottom:6px;overflow:hidden;text-overflow:ellipsis}.info-card small{color:var(--muted)}.stat-card strong{display:block;font-size:30px}.stat-card span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 3px 14px rgba(23,54,93,.06)}.panel.narrow{max-width:820px}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}.panel-heading p{margin:0;color:var(--muted);font-size:13px}
.detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px;align-items:start}.admin-request-grid{grid-template-columns:minmax(0,2fr) minmax(300px,.85fr)}.stack{display:grid;gap:18px}
.request-summary dl{margin:0}.request-summary dl>div{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--border)}.request-summary dt{color:var(--muted);font-size:13px}.request-summary dd{text-align:right;margin:0;font-size:13px;font-weight:500}

.button{appearance:none;border:1px solid transparent;border-radius:9px;padding:10px 16px;font:600 14px Inter,sans-serif;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}.button:hover{text-decoration:none;transform:translateY(-1px)}.button.primary{background:var(--primary);color:#fff}.button.primary:hover{background:var(--primary-dark)}.button.outline{background:#fff;border-color:var(--border);color:var(--text)}.button.full{width:100%}.button.small{padding:7px 11px;font-size:12px}

.form-grid{display:grid;gap:16px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{display:grid;gap:7px;font-size:13px;font-weight:600}.form-grid input,.form-grid textarea,.form-grid select,.filter-bar input,.filter-bar select,.copy-field{width:100%;border:1px solid #d9dee8;background:#fff;border-radius:9px;padding:11px 12px;color:var(--text);font:400 14px Inter,sans-serif;outline:none}.form-grid textarea{resize:vertical}.form-grid input:focus,.form-grid textarea:focus,.form-grid select:focus,.filter-bar input:focus,.filter-bar select:focus{border-color:#7f98b5;box-shadow:0 0 0 3px rgba(23,54,93,.10)}
.checkbox{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:9px!important;font-weight:500!important}.checkbox input{width:auto!important}
.filter-bar{display:flex;gap:10px;margin:0 0 16px}.filter-bar input{max-width:340px}.filter-bar select{max-width:190px}

.table-wrap{overflow-x:auto;margin:0 -24px -24px}.table-wrap table{border-collapse:collapse;width:100%;min-width:760px}.table-wrap th{text-align:left;padding:12px 24px;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--border)}.table-wrap td{padding:15px 24px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}.table-wrap tbody tr:last-child td{border-bottom:0}.table-wrap tbody tr:hover{background:#fbf7ef}.table-title{font-weight:650;color:var(--text);display:block}.table-wrap td small{display:block;color:var(--muted);margin-top:4px}
.critical-row{box-shadow:inset 3px 0 #d92d20}

.status,.badge,.due-pill{display:inline-flex;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:650;white-space:nowrap}.status.new{background:#ebe5d8;color:#17365d}.status.in_progress{background:#e9eef5;color:#23486f}.status.waiting{background:#f8efe2;color:#8a5620}.status.complete,.badge.active{background:#ecfdf3;color:#067647}.status.cancelled,.badge.cancelled{background:#f1ece3;color:#5d6572}.badge.past_due{background:#fffaeb;color:#b54708}.badge.paused{background:#f1ece3;color:#5d6572}
.due-pill{margin-top:5px;background:#f1ece3;color:#5d6572}.due-pill.overdue{background:#fef3f2;color:#b42318}.due-pill.today{background:#fff4ed;color:#c4320a}.due-pill.soon{background:#fffaeb;color:#b54708}.due-pill.safe{background:#ecfdf3;color:#067647}.due-pill.waiting{background:#f1ece3;color:#5d6572}

.flash{padding:12px 14px;border-radius:9px;margin:0 0 16px;font-size:13px;border:1px solid transparent}.flash.error{background:var(--danger-bg);color:var(--danger);border-color:#fecdca}.flash.success{background:var(--success-bg);color:var(--success);border-color:#abefc6}.flash.info{background:#ebe5d8;color:#17365d;border-color:#c7d7fe}
.empty-state{text-align:center;padding:50px 20px;color:var(--muted)}.empty-state h3{color:var(--text);margin:0}.empty-state p{margin:8px auto 18px}
.request-original{padding:18px;border-radius:11px;background:#f8f3e9;border:1px solid #eadfce}.request-original p,.message p{white-space:normal}.message-meta{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:11px;margin-bottom:8px}.message-meta strong{color:var(--text);font-size:12px}.conversation-title{margin-top:26px}.conversation{display:grid;gap:12px}.message{padding:15px 17px;border-radius:11px;border:1px solid var(--border);background:#fff}.message.cleo{background:#f4efe6;border-color:#e1d7c6}.message.internal{background:#fff8ec;border-color:#e9d0a2}.reply-box{display:grid;gap:13px;border-top:1px solid var(--border);margin-top:22px;padding-top:20px}.reply-box label{display:grid;gap:7px;font-size:13px;font-weight:600}.reply-box textarea,.reply-box input{border:1px solid #d9dee8;border-radius:9px;padding:11px;font:400 14px Inter,sans-serif}.file-chip{display:inline-flex;margin:7px 6px 0 0;padding:7px 9px;border-radius:8px;background:#fff;border:1px solid var(--border);font-size:12px}
.inline-form{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}.compact{gap:10px;margin-top:14px}
.timeline,.compact-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}.timeline li,.compact-list li{padding-bottom:10px;border-bottom:1px solid var(--border)}.timeline strong,.timeline span,.compact-list a,.compact-list span{display:block}.timeline span,.compact-list span{font-size:11px;color:var(--muted);margin-top:3px}
.copy-field{margin-top:8px}
.auth-page>.flash{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:10}

@media(max-width:1000px){
  .card-grid.four{grid-template-columns:repeat(2,1fr)}
  .detail-grid,.admin-request-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .auth-split{grid-template-columns:1fr}.auth-brand-panel{display:none}.auth-form-panel{min-height:100vh;padding:28px}
  .app-shell{display:block}.sidebar{position:fixed;z-index:30;left:-270px;width:250px;transition:.2s}.sidebar.open{left:0}.mobile-topbar{display:flex;align-items:center;gap:14px;height:58px;padding:0 18px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}.icon-btn{border:0;background:#efe8dd;border-radius:8px;padding:8px 10px}.page{padding:24px 16px}.page-heading h1{font-size:27px}.split-heading{align-items:flex-start;flex-direction:column}.card-grid.four{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.panel{padding:18px}.table-wrap{margin:0 -18px -18px}.filter-bar{display:grid}.filter-bar input,.filter-bar select{max-width:none}.simple-auth-card,.install-card{padding:24px}
}

/* Business Identity */
.business-identity-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,.8fr);gap:22px;align-items:start}.business-section .panel-heading{margin-bottom:20px}.field-hint{color:var(--muted);font-size:11px;font-weight:400}.field-error{color:var(--danger);font-size:12px;font-weight:600}.colour-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.colour-control{display:grid;grid-template-columns:52px 1fr;gap:9px}.colour-control input[type=color]{height:43px;padding:4px;cursor:pointer}.business-save-bar{display:flex;justify-content:flex-end}.business-save-bar .button{min-width:150px}.business-preview{position:sticky;top:28px}.business-preview-card{overflow:hidden;min-height:340px;padding:28px;border:1px solid color-mix(in srgb,var(--preview-primary),#fff 70%);border-radius:20px;background:var(--preview-secondary);box-shadow:0 14px 40px rgba(23,54,93,.12);color:var(--preview-primary)}.preview-label{display:block;margin-bottom:34px;color:color-mix(in srgb,var(--preview-primary),transparent 30%);font-size:10px;font-weight:800;letter-spacing:.13em}.preview-logo-wrap{display:grid;place-items:center;width:72px;height:72px;margin-bottom:20px;overflow:hidden;border-radius:18px;background:var(--preview-primary);color:var(--preview-secondary);font:700 22px "Space Grotesk",sans-serif}.preview-logo-wrap img{width:100%;height:100%;object-fit:contain;background:#fff}.business-preview-card h2{font-size:25px;margin-bottom:9px}.business-preview-card p{color:color-mix(in srgb,var(--preview-primary),transparent 18%);font-size:13px}.preview-action{display:inline-flex;margin-top:20px;padding:9px 15px;border-radius:9px;background:var(--preview-accent);color:#fff;font-size:12px;font-weight:700}
@media(max-width:1000px){.business-identity-layout{grid-template-columns:1fr}.business-preview{position:static;order:-1}.business-preview-card{min-height:0}.colour-fields{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.colour-fields{grid-template-columns:1fr}.business-save-bar .button{width:100%}}

/* CLEO brand logo */
.brand-logo {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.auth-brand-panel .brand {
    width: 100%;
    max-width: 360px;
}

.auth-brand-panel .brand-logo {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 0;
}

/* =========================================================
   CLEO CLIENT REQUEST BOARD
   ========================================================= */

.request-board-panel {
    overflow: hidden;
}

.request-board-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.request-total {
    flex-shrink: 0;
    padding: 8px 13px;
    border: 1px solid #ded7ca;
    border-radius: 999px;
    background: #f7f2e9;
    color: #536174;
    font-size: 13px;
    font-weight: 700;
}

.request-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(245px, 1fr));
    gap: 16px;
    align-items: start;
    margin-top: 24px;
    overflow-x: auto;
    padding: 2px 2px 18px;
}

.request-column {
    min-height: 320px;
    padding: 14px;
    border: 1px solid #e3dccf;
    border-radius: 16px;
    background: #f7f3eb;
}

.request-column-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.request-column-header h3 {
    margin: 0;
    color: #142b4c;
    font-size: 16px;
    line-height: 1.3;
}

.request-column-header p {
    margin: 4px 0 0;
    color: #6d7888;
    font-size: 12px;
    line-height: 1.4;
}

.request-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ffffff;
    color: #183b66;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(20, 43, 76, 0.08);
}

.request-column-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.request-column-empty {
    padding: 30px 15px;
    border: 1px dashed #d5ccbd;
    border-radius: 12px;
    color: #87909c;
    font-size: 13px;
    text-align: center;
}

.request-card {
    display: block;
    padding: 15px;
    border: 1px solid #e1d9cc;
    border-radius: 13px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(20, 43, 76, 0.06);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.request-card:hover {
    transform: translateY(-2px);
    border-color: #bcc8d5;
    box-shadow: 0 8px 22px rgba(20, 43, 76, 0.11);
}

.request-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.request-code {
    color: #7a8491;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.request-card h4 {
    margin: 14px 0 5px;
    color: #142b4c;
    font-size: 16px;
    line-height: 1.35;
}

.request-page {
    margin: 0 0 14px;
    color: #657184;
    font-size: 12px;
}

.request-card-dates {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid #eee7db;
}

.request-card-dates div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.request-card-dates span {
    color: #818a96;
    font-size: 11px;
}

.request-card-dates strong {
    color: #33435a;
    font-size: 11px;
    font-weight: 700;
    text-align: right;
}

.request-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
}

.view-request {
    color: #183b66;
    font-size: 11px;
    font-weight: 800;
}

.request-column-new {
    border-top: 4px solid #b9aa8a;
}

.request-column-seen {
    border-top: 4px solid #7293b3;
}

.request-column-in_progress {
    border-top: 4px solid #d69a58;
}

.request-column-waiting {
    border-top: 4px solid #a48ab7;
}

.request-column-complete {
    border-top: 4px solid #65a57e;
}

/* Status support for the new "Seen" stage */
.status.seen {
    background: #e9f1f8;
    color: #315f89;
}

/* Wider screens */
@media (min-width: 1800px) {
    .request-board {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        overflow-x: visible;
    }
}

/* Tablets and smaller screens */
@media (max-width: 1100px) {
    .request-board {
        grid-template-columns: repeat(5, 270px);
    }
}

/* Phones */
@media (max-width: 700px) {
    .request-board-heading {
        flex-direction: column;
    }

    .request-board {
        grid-template-columns: repeat(5, 82vw);
        scroll-snap-type: x mandatory;
    }

    .request-column {
        scroll-snap-align: start;
    }
}
/* =========================================================
   CLEO MODERN CLIENT DASHBOARD
   ========================================================= */

.client-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 28px;
    padding: 32px 36px;
    border: 1px solid #ded7ca;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at top right,
            rgba(221, 172, 101, 0.15),
            transparent 34%
        ),
        linear-gradient(135deg, #fffdf8 0%, #f5efe5 100%);
    box-shadow: 0 10px 32px rgba(23, 49, 82, 0.06);
}

.welcome-eyebrow,
.section-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: #9a7340;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.client-welcome h1 {
    margin: 0;
    color: #142b4c;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.05;
}

.client-welcome-copy > p {
    max-width: 620px;
    margin: 13px 0 20px;
    color: #657184;
    font-size: 16px;
    line-height: 1.6;
}

.client-account-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #40516a;
    font-size: 13px;
    font-weight: 700;
}

.account-divider {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #b4ab9d;
}

.account-active-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #46a471;
    box-shadow: 0 0 0 4px rgba(70, 164, 113, 0.12);
}

.welcome-button {
    flex-shrink: 0;
    min-width: 180px;
    justify-content: center;
}

.client-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.client-summary-card {
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 118px;
    padding: 22px;
    border: 1px solid #e0d9cd;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 7px 24px rgba(23, 49, 82, 0.05);
}

.client-summary-card.attention {
    border-color: #dfc99e;
    background: #fffaf0;
}

.summary-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #edf2f7;
    color: #183b66;
    font-size: 21px;
    font-weight: 800;
}

.client-summary-card.attention .summary-icon {
    background: #f6ead1;
    color: #976728;
}

.client-summary-card div:last-child {
    display: flex;
    flex-direction: column;
}

.client-summary-card span {
    color: #717d8d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.client-summary-card strong {
    margin: 2px 0;
    color: #142b4c;
    font-size: 29px;
    line-height: 1.1;
}

.client-summary-card small {
    color: #7a8593;
    font-size: 12px;
}

.client-attention-section {
    margin-bottom: 28px;
    padding: 25px;
    border: 1px solid #dfc99e;
    border-radius: 18px;
    background: #fff9ed;
}

.attention-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}

.attention-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #efd8aa;
    color: #8b5b21;
    font-weight: 900;
}

.attention-heading h2 {
    margin: 0 0 3px;
    color: #382d21;
    font-size: 18px;
}

.attention-heading p {
    margin: 0;
    color: #786958;
    font-size: 13px;
}

.attention-request-list {
    display: grid;
    gap: 10px;
}

.attention-request {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 17px;
    border: 1px solid rgba(146, 102, 42, 0.18);
    border-radius: 12px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
}

.attention-request div {
    display: flex;
    flex-direction: column;
}

.attention-request strong {
    color: #263954;
}

.attention-request div span {
    margin-top: 3px;
    color: #8a8074;
    font-size: 11px;
}

.attention-link {
    flex-shrink: 0;
    color: #895b22;
    font-size: 12px;
    font-weight: 800;
}

.client-requests-section {
    padding: 30px;
    border: 1px solid #dfd8cc;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 9px 30px rgba(23, 49, 82, 0.05);
}

.client-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.client-section-heading h2 {
    margin: 0;
    color: #142b4c;
    font-size: 25px;
}

.client-section-heading p {
    margin: 7px 0 0;
    color: #687487;
    font-size: 14px;
}

.request-total-pill {
    flex-shrink: 0;
    padding: 7px 13px;
    border-radius: 999px;
    background: #eef2f6;
    color: #40536d;
    font-size: 12px;
    font-weight: 800;
}

.client-request-list {
    display: grid;
    gap: 18px;
}

.client-request-card {
    padding: 24px;
    border: 1px solid #e4ddd1;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(250, 247, 240, 0.75),
            rgba(255, 255, 255, 1)
        );
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}

.client-request-card:hover {
    transform: translateY(-2px);
    border-color: #cbd3dc;
    box-shadow: 0 10px 25px rgba(23, 49, 82, 0.08);
}

.client-request-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.client-request-code {
    color: #8a94a0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.client-request-top h3 {
    margin: 7px 0 2px;
    color: #142b4c;
    font-size: 21px;
}

.client-request-page {
    margin: 0;
    color: #788391;
    font-size: 12px;
}

.client-progress {
    position: relative;
    margin: 30px 0 16px;
}

.progress-track {
    position: absolute;
    top: 7px;
    right: 10%;
    left: 10%;
    height: 3px;
    border-radius: 999px;
    background: #e3e7eb;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #183b66, #d4a35b);
    transition: width 300ms ease;
}

.progress-step-1 {
    width: 0%;
}

.progress-step-2 {
    width: 25%;
}

.progress-step-3 {
    width: 50%;
}

.progress-step-4 {
    width: 75%;
}

.progress-step-5 {
    width: 100%;
}

.progress-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.progress-stage {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    color: #a0a8b2;
    text-align: center;
}

.progress-dot {
    width: 16px;
    height: 16px;
    border: 3px solid #e3e7eb;
    border-radius: 50%;
    background: #ffffff;
}

.progress-stage.reached {
    color: #183b66;
}

.progress-stage.reached .progress-dot {
    border-color: #183b66;
    background: #183b66;
    box-shadow: 0 0 0 4px rgba(24, 59, 102, 0.09);
}

.progress-stage strong {
    font-size: 11px;
}

.client-progress-message {
    margin: 0 0 20px;
    color: #566579;
    font-size: 13px;
    text-align: center;
}

.client-request-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding-top: 18px;
    border-top: 1px solid #e9e3da;
}

.client-request-dates {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.client-request-dates div {
    display: flex;
    flex-direction: column;
}

.client-request-dates div span {
    margin-bottom: 3px;
    color: #8a939e;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.client-request-dates div strong {
    color: #3b4c63;
    font-size: 12px;
}

.client-view-request {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: #183b66;
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.client-view-request:hover {
    background: #102e51;
}

.client-empty-state {
    padding: 50px 20px;
    text-align: center;
}

.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 16px;
    border-radius: 17px;
    background: #e8f4ed;
    color: #38815a;
    font-size: 24px;
    font-weight: 900;
}

.client-empty-state h3 {
    margin: 0;
    color: #193452;
}

.client-empty-state p {
    margin: 7px 0 20px;
    color: #748091;
}

.client-completed-section {
    margin-top: 20px;
}

.client-completed-section details {
    overflow: hidden;
    border: 1px solid #dfd8cc;
    border-radius: 16px;
    background: #ffffff;
}

.client-completed-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    cursor: pointer;
    list-style: none;
}

.client-completed-section summary::-webkit-details-marker {
    display: none;
}

.client-completed-section summary div {
    display: flex;
    flex-direction: column;
}

.client-completed-section summary span {
    color: #193452;
    font-weight: 800;
}

.client-completed-section summary small {
    margin-top: 3px;
    color: #7a8592;
}

.completed-toggle {
    color: #6e7987 !important;
    font-size: 12px;
}

.completed-request-list {
    border-top: 1px solid #e7e0d5;
}

.completed-request-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 22px;
    border-bottom: 1px solid #eee8df;
    color: inherit;
    text-decoration: none;
}

.completed-request-row:last-child {
    border-bottom: 0;
}

.completed-request-row > div {
    display: flex;
    flex-direction: column;
}

.completed-request-row strong {
    color: #263b58;
}

.completed-request-row span {
    margin-top: 2px;
    color: #87909b;
    font-size: 11px;
}

.completed-request-row > div:last-child {
    align-items: flex-end;
}

/* Tablets */
@media (max-width: 900px) {
    .client-welcome {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-summary-grid {
        grid-template-columns: 1fr;
    }

    .welcome-button {
        width: 100%;
    }
}

/* Phones */
@media (max-width: 700px) {
    .client-welcome {
        padding: 25px 21px;
    }

    .client-welcome h1 {
        font-size: 32px;
    }

    .client-requests-section {
        padding: 21px 16px;
    }

    .client-section-heading,
    .client-request-top,
    .client-request-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-request-card {
        padding: 19px 16px;
    }

    .progress-stage strong {
        font-size: 9px;
    }

    .client-request-dates {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .client-view-request {
        justify-content: center;
        width: 100%;
    }

    .attention-request {
        align-items: flex-start;
        flex-direction: column;
    }

    .completed-request-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .completed-request-row > div:last-child {
        align-items: flex-start;
    }
}


/* ==========================================
   CLEO REQUEST JOURNEY
========================================== */

.request-journey-card {
    margin-bottom: 30px;
    padding: 30px;
    border: 1px solid #dfd8cc;
    border-radius: 22px;
    background:
        radial-gradient(
            circle at top right,
            rgba(210, 161, 91, 0.1),
            transparent 32%
        ),
        #ffffff;
    box-shadow: 0 8px 30px rgba(23, 49, 82, 0.06);
}

.request-journey-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 34px;
}

.request-journey-heading h2 {
    margin: 4px 0 0;
    color: #173152;
    font-size: 34px;
}

.request-journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.journey-stage {
    position: relative;
    min-width: 0;
    text-align: left;
}

.journey-marker {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
}

.journey-dot {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 3px solid #dfe4e9;
    border-radius: 50%;
    background: #ffffff;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    transition:
        background 400ms ease,
        border-color 400ms ease,
        box-shadow 400ms ease,
        transform 400ms ease;
}

.journey-line {
    position: absolute;
    z-index: 1;
    top: 11px;
    right: 0;
    left: 21px;
    height: 3px;
    background: #e1e6eb;
    transition: background 450ms ease;
}

.journey-stage.complete .journey-dot {
    border-color: #183b66;
    background: #183b66;
}

.journey-stage.complete .journey-line {
    background: #183b66;
}

.journey-stage.current .journey-dot {
    transform: scale(1.08);
    border-color: #d2a15b;
    background: #d2a15b;
    box-shadow: 0 0 0 6px rgba(210, 161, 91, 0.14);
}

.journey-simple-label {
    display: block;
    margin-top: 11px;
    padding-right: 14px;
    color: #929ba6;
    font-size: 13px;
}

.journey-stage.complete .journey-simple-label,
.journey-stage.current .journey-simple-label {
    color: #142b4c;
}

.journey-current-summary {
    margin-top: 34px;
    padding: 23px 25px;
    border: 1px solid #ebe2d5;
    border-radius: 16px;
    background: #faf7f1;
}

.journey-current-kicker {
    display: block;
    margin-bottom: 7px;
    color: #9a7340;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.journey-current-summary h3 {
    margin: 0;
    color: #142b4c;
    font-size: 20px;
}

.journey-current-summary p {
    margin: 7px 0 12px;
    color: #657184;
    font-size: 14px;
}

.journey-current-time {
    color: #8b6940;
    font-size: 11px;
    font-weight: 700;
}

/* Keep request details visible while scrolling */
@media (min-width: 1001px) {
    .detail-grid > .request-summary {
        position: sticky;
        top: 24px;
    }
}

@media (max-width: 900px) {
    .request-journey {
        grid-template-columns: 1fr;
    }

    .journey-stage {
        display: grid;
        grid-template-columns: 32px 1fr;
        min-height: 64px;
    }

    .journey-marker {
        align-items: flex-start;
        justify-content: center;
        height: 100%;
    }

    .journey-line {
        top: 21px;
        right: auto;
        bottom: 0;
        left: 14px;
        width: 3px;
        height: auto;
    }

    .journey-simple-label {
        margin: 1px 0 0;
        padding: 0 0 24px 14px;
    }
}

@media (max-width: 700px) {
    .request-journey-card {
        padding: 22px 18px;
    }

    .request-journey-heading {
        flex-direction: column;
    }

    .request-journey-heading h2 {
        font-size: 28px;
    }

    .journey-current-summary {
        padding: 19px;
    }
}
/* ==========================================
   CLEO CONVERSATION EXPERIENCE
========================================== */

.detail-grid > .panel:first-child {
    border-radius: 22px;
    padding: 28px;
}

.request-original {
    padding: 20px 22px;
    border: 1px solid #e7ddcf;
    border-radius: 16px;
    background: linear-gradient(135deg, #faf6ee, #fffdf9);
}

.request-original .message-meta {
    margin-bottom: 14px;
}

.request-original p {
    margin: 0 0 12px;
    color: #263954;
    font-size: 15px;
    line-height: 1.65;
}

.conversation-title {
    margin: 30px 0 8px;
    font-size: 24px;
}

.conversation-title + .muted {
    margin: 0 0 20px;
}

.conversation {
    display: grid;
    gap: 16px;
}

.message {
    max-width: 82%;
    padding: 16px 18px;
    border: 1px solid #e2ddd4;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(23, 49, 82, 0.05);
}

.message.client {
    justify-self: end;
    border-bottom-right-radius: 5px;
    background: #17365d;
    color: #ffffff;
}

.message.client .message-meta,
.message.client .message-meta strong,
.message.client p {
    color: #ffffff;
}

.message.client .message-meta span {
    color: rgba(255, 255, 255, 0.7);
}

.message.cleo {
    justify-self: start;
    border-bottom-left-radius: 5px;
    background: #f7f2e9;
    border-color: #e5d9c7;
}

.message-meta {
    margin-bottom: 8px;
}

.message-meta strong {
    font-size: 12px;
}

.message p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.file-chip {
    margin-top: 10px;
    border-radius: 10px;
    background: #ffffff;
}

.reply-box {
    margin-top: 28px;
    padding: 22px;
    border: 1px solid #e4ddd1;
    border-radius: 16px;
    background: #fbf8f2;
}

.reply-box label {
    color: #243a58;
}

.reply-box textarea {
    min-height: 130px;
    background: #ffffff;
}

.reply-box .button.primary {
    min-height: 46px;
    border-radius: 11px;
}

@media (max-width: 700px) {
    .detail-grid > .panel:first-child {
        padding: 18px;
    }

    .message {
        max-width: 94%;
    }

    .reply-box {
        padding: 17px;
    }
}
/* ==========================================
   CLEO ADHD-FRIENDLY ADMIN DASHBOARD
========================================== */

.admin-today-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 26px;
}

.admin-today-heading h1 {
    margin: 0;
    color: #142b4c;
    font-size: clamp(32px, 4vw, 44px);
}

.admin-today-heading p {
    margin: 8px 0 0;
    color: #687487;
}

.admin-focus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.admin-focus-card {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 112px;
    padding: 20px;
    border: 1px solid #e1d9cd;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 6px 20px rgba(23, 49, 82, 0.05);
}

.admin-focus-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #edf2f7;
    color: #183b66;
    font-size: 20px;
    font-weight: 900;
}

.admin-focus-card.attention .admin-focus-icon {
    background: #fef0ee;
    color: #b42318;
}

.admin-focus-card.waiting .admin-focus-icon {
    background: #fff4e6;
    color: #a15c16;
}

.admin-focus-card.finished .admin-focus-icon {
    background: #eaf7ef;
    color: #26734d;
}

.admin-focus-card > div:last-child {
    display: flex;
    flex-direction: column;
}

.admin-focus-card span {
    color: #748091;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.admin-focus-card strong {
    color: #142b4c;
    font-size: 29px;
    line-height: 1.1;
}

.admin-focus-card small {
    color: #7c8794;
    font-size: 11px;
}

.admin-next-task {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 28px;
    padding: 28px 30px;
    border: 1px solid #d8cdbd;
    border-radius: 21px;
    background:
        radial-gradient(
            circle at top right,
            rgba(213, 164, 91, 0.16),
            transparent 35%
        ),
        linear-gradient(135deg, #fffdf8, #f6efe4);
    box-shadow: 0 9px 28px rgba(23, 49, 82, 0.06);
}

.admin-next-task-client,
.admin-request-client {
    display: flex;
    align-items: center;
    gap: 11px;
}

.admin-next-task-client {
    margin: 8px 0 13px;
}

.client-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #183b66;
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
}

.client-initial.small {
    width: 33px;
    height: 33px;
    border-radius: 10px;
    font-size: 12px;
}

.admin-next-task-client div,
.admin-request-client div {
    display: flex;
    flex-direction: column;
}

.admin-next-task-client span,
.admin-request-client strong {
    color: #253a57;
    font-weight: 800;
}

.admin-next-task-client small,
.admin-request-client span {
    margin-top: 2px;
    color: #89929d;
    font-size: 10px;
}

.admin-next-task h2 {
    margin: 0 0 12px;
    color: #142b4c;
    font-size: 27px;
}

.admin-next-task-copy > p {
    margin: 11px 0 0;
    color: #687487;
    font-size: 13px;
}

.admin-next-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-plan-badge,
.admin-critical-badge {
    display: inline-flex;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.admin-plan-badge.priority {
    background: #f6ead2;
    color: #8c6028;
}

.admin-plan-badge.standard,
.admin-plan-badge.care {
    background: #eaf1f7;
    color: #315f89;
}

.admin-plan-badge.partner {
    background: #17365d;
    color: #ffffff;
}

.admin-critical-badge {
    background: #fef0ee;
    color: #b42318;
}

.admin-start-button {
    flex-shrink: 0;
    min-width: 185px;
    min-height: 48px;
}

.admin-clear-state {
    justify-content: flex-start;
}

.admin-board-section {
    padding: 28px;
    border: 1px solid #ded7ca;
    border-radius: 21px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(23, 49, 82, 0.05);
}

.admin-board-heading {
    margin-bottom: 22px;
}

.admin-board-heading h2 {
    margin: 0;
    color: #142b4c;
    font-size: 25px;
}

.admin-board-heading p {
    margin: 6px 0 0;
    color: #6e7a8a;
    font-size: 13px;
}

.admin-work-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 15px;
    overflow-x: auto;
    padding-bottom: 10px;
}

.admin-board-column {
    min-height: 290px;
    padding: 13px;
    border: 1px solid #e3ddd3;
    border-radius: 16px;
    background: #f7f4ed;
}

.admin-board-new {
    border-top: 4px solid #a99b7c;
}

.admin-board-seen {
    border-top: 4px solid #7692af;
}

.admin-board-in_progress {
    border-top: 4px solid #d09a53;
}

.admin-board-waiting {
    border-top: 4px solid #a98ab7;
}

.admin-column-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.admin-column-heading h3 {
    margin: 0;
    color: #183451;
    font-size: 15px;
}

.admin-column-heading p {
    margin: 4px 0 0;
    color: #798492;
    font-size: 10px;
    line-height: 1.4;
}

.admin-column-heading > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ffffff;
    color: #183b66;
    font-size: 11px;
    font-weight: 800;
}

.admin-column-cards {
    display: grid;
    gap: 11px;
}

.admin-column-empty {
    padding: 28px 12px;
    border: 1px dashed #d4ccbf;
    border-radius: 11px;
    color: #9199a3;
    font-size: 11px;
    text-align: center;
}

.admin-request-card {
    display: block;
    padding: 14px;
    border: 1px solid #e0d8cc;
    border-radius: 13px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 13px rgba(23, 49, 82, 0.05);
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.admin-request-card:hover {
    transform: translateY(-2px);
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(23, 49, 82, 0.1);
}

.admin-request-card.critical {
    border-left: 4px solid #d92d20;
}

.admin-request-card h4 {
    margin: 13px 0;
    color: #142b4c;
    font-size: 15px;
    line-height: 1.35;
}

.admin-request-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-request-due {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid #eee7dd;
}

.admin-request-due span {
    color: #8b949f;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-request-due strong {
    color: #45546a;
    font-size: 10px;
    text-align: right;
}

.admin-finished-section {
    margin-top: 18px;
}

.admin-finished-section details {
    overflow: hidden;
    border: 1px solid #ded7ca;
    border-radius: 15px;
    background: #ffffff;
}

.admin-finished-section summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 20px;
    cursor: pointer;
    list-style: none;
}

.admin-finished-section summary::-webkit-details-marker {
    display: none;
}

.admin-finished-section summary div {
    display: flex;
    flex-direction: column;
}

.admin-finished-section summary span {
    color: #183451;
    font-weight: 800;
}

.admin-finished-section summary small {
    margin-top: 3px;
    color: #7c8794;
}

.admin-finished-list {
    border-top: 1px solid #e7e0d6;
}

.admin-finished-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
    border-bottom: 1px solid #eee8df;
    color: inherit;
    text-decoration: none;
}

.admin-finished-list a:last-child {
    border-bottom: 0;
}

.admin-finished-list a div {
    display: flex;
    flex-direction: column;
}

.admin-finished-list strong {
    color: #253b58;
}

.admin-finished-list span {
    color: #89929d;
    font-size: 11px;
}

@media (max-width: 1150px) {
    .admin-focus-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-work-board {
        grid-template-columns: repeat(4, 275px);
    }
}

@media (max-width: 700px) {
    .admin-today-heading,
    .admin-next-task {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-focus-grid {
        grid-template-columns: 1fr;
    }

    .admin-start-button {
        width: 100%;
    }

    .admin-board-section {
        padding: 20px 15px;
    }
}