/* Buyer Demo Portal — shared theme, mirroring the Deskless Workers site tokens
   (src/styles/global.css). Self-hosted / same-origin so it's CSP-safe. */

:root{
    --primary:#0284C7; --primary-light:#E0F2FE; --primary-dark:#0369A1;
    --purple:#7C3AED; --purple-light:#EDE9FE; --purple-dark:#6D28D9;
    --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB;
    --gray-400:#9CA3AF; --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151;
    --gray-800:#1F2937; --gray-900:#111827; --white:#FFFFFF;
    --green:#059669; --green-light:#D1FAE5; --green-dark:#047857; --amber:#B45309; --amber-light:#FEF3C7;
    --red:#DC2626; --red-light:#FEE2E2;
    --font-sans:"Inter","system-ui","-apple-system","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --radius:12px; --radius-sm:8px; --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-sans);color:var(--gray-800);background:var(--gray-50);
     font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);}
a:hover{color:var(--primary-dark);}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;color:var(--gray-900);}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* ---------- Top bar ---------- */
.bdp-topbar{display:flex;align-items:center;justify-content:space-between;height:60px;
    padding:0 28px;background:var(--white);border-bottom:1px solid var(--gray-200);
    position:sticky;top:0;z-index:10;}
.bdp-brand{font-weight:700;font-size:16px;color:var(--gray-900);display:flex;align-items:center;gap:8px;}
.bdp-brand .bdp-logo{height:24px;width:auto;display:block;}
.bdp-brand .sub{color:var(--gray-400);font-weight:500;}
.bdp-userbox{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--gray-500);}
.bdp-userbox .who{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--gray-700);}

/* ---------- App layout ---------- */
.bdp-layout{display:flex;align-items:stretch;min-height:calc(100vh - 60px);}
.bdp-sidebar{width:256px;flex:0 0 256px;background:var(--white);border-right:1px solid var(--gray-200);padding:16px 0;}
.bdp-nav{position:sticky;top:76px;}
.bdp-nav-group{padding:16px 24px 6px;font-size:11px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gray-400);}
.bdp-nav a{display:block;padding:9px 24px;color:var(--gray-700);text-decoration:none;font-size:14px;
    border-left:3px solid transparent;}
.bdp-nav a:hover{background:var(--gray-50);color:var(--gray-900);}
.bdp-nav a.active{background:var(--primary-light);border-left-color:var(--primary);
    color:var(--primary-dark);font-weight:600;}

.bdp-main{flex:1 1 auto;padding:40px 48px;max-width:840px;}
.bdp-main h2{font-size:24px;margin:0 0 6px;}
.bdp-main .bdp-lead{color:var(--gray-500);margin:0 0 28px;font-size:14px;}
.bdp-main h3{font-size:15px;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);margin:28px 0 10px;}
.bdp-main p{margin:0 0 12px;color:var(--gray-700);}
.bdp-main ol,.bdp-main ul{margin:0 0 14px;padding-left:22px;}
.bdp-main li{margin:7px 0;color:var(--gray-700);}
code{background:var(--gray-100);color:var(--gray-800);padding:2px 7px;border-radius:6px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;}
.bdp-demo-box{margin:8px 0 22px;padding:18px 20px;background:var(--primary-light);
    border:1px solid #bae6fd;border-radius:var(--radius);}
.bdp-demo-box .cred{margin-top:10px;color:var(--gray-700);font-size:14px;}
.bdp-demo-box code{display:inline-block;margin-top:6px;padding:9px 13px;background:var(--gray-900);color:#e5e7eb;}
.bdp-empty{color:var(--gray-500);padding:40px 0;}
.bdp-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
    color:var(--primary);margin:0 0 22px;}

/* ---------- Rich product doc blocks (PDF-sourced content) ---------- */
/* Key/value reference table */
.bdp-info{width:100%;border-collapse:collapse;margin:6px 0 26px;font-size:14px;}
.bdp-info th{width:170px;text-align:left;vertical-align:top;padding:11px 14px;color:var(--gray-500);
    font-weight:600;background:var(--gray-50);border:1px solid var(--gray-200);white-space:nowrap;}
.bdp-info td{padding:11px 14px;border:1px solid var(--gray-200);color:var(--gray-700);}

/* Definition list (the four pillars) */
.bdp-deflist{margin:6px 0 26px;display:grid;gap:12px;}
.bdp-def{padding:14px 16px;border:1px solid var(--gray-200);border-left:3px solid var(--primary);
    border-radius:var(--radius-sm);background:var(--white);}
.bdp-def dt{font-weight:700;color:var(--gray-900);margin:0 0 3px;}
.bdp-def dd{margin:0;color:var(--gray-700);font-size:14px;}

/* Feature cards (What it does / Why it exists) */
.bdp-features{display:grid;gap:14px;margin:6px 0 26px;}
.bdp-feature{border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);
    padding:18px 20px;box-shadow:var(--shadow);}
.bdp-feature-name{font-size:15px;margin:0 0 12px;color:var(--primary-dark);}
.bdp-feature-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.bdp-feature-part .bdp-feature-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;color:var(--gray-400);margin:0 0 4px;}
.bdp-feature-part p{margin:0;font-size:14px;color:var(--gray-700);line-height:1.55;}

/* Flow / role-play tables */
.bdp-flow-wrap{overflow-x:auto;margin:6px 0 26px;}
.bdp-flow{width:100%;border-collapse:collapse;font-size:14px;}
.bdp-flow th{text-align:left;padding:10px 14px;background:var(--primary);color:#fff;font-weight:600;
    font-size:13px;}
.bdp-flow td{padding:11px 14px;border-bottom:1px solid var(--gray-200);color:var(--gray-700);
    vertical-align:top;}
.bdp-flow tbody tr:nth-child(even){background:var(--gray-50);}
.bdp-flow td:first-child{font-weight:600;color:var(--gray-900);white-space:nowrap;}

/* Callout / note box */
.bdp-callout{background:var(--primary-light);border:1px solid #bae6fd;border-radius:var(--radius);
    padding:16px 20px;margin:6px 0 26px;}
.bdp-callout h4{margin:0 0 8px;font-size:14px;color:var(--primary-dark);}
.bdp-callout p{margin:0 0 10px;font-size:14px;color:var(--gray-700);}
.bdp-callout p:last-child{margin-bottom:0;}

/* Presenter narration line */
.bdp-quote{border-left:3px solid var(--purple);background:var(--purple-light);margin:6px 0 14px;
    padding:10px 16px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--gray-800);
    font-style:italic;font-size:14px;}

/* Big headline stat */
.bdp-stat{text-align:center;padding:22px;margin:6px 0 26px;border:1px solid var(--gray-200);
    border-radius:var(--radius);background:var(--gray-50);}
.bdp-stat-value{font-size:44px;font-weight:800;letter-spacing:-.02em;color:var(--primary-dark);line-height:1.05;}
.bdp-stat-label{margin-top:8px;font-size:15px;color:var(--gray-700);}
.bdp-stat-source{margin-top:6px;font-size:12px;color:var(--gray-400);}

/* Value cards (title + lines) */
.bdp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 26px;}
.bdp-vcard{border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);
    padding:18px 20px;box-shadow:var(--shadow);}
.bdp-vcard h4{margin:0 0 10px;font-size:15px;color:var(--gray-900);text-align:center;
    border-bottom:1px solid var(--gray-200);padding-bottom:10px;}
.bdp-vcard-lines{list-style:none;margin:0;padding:0;text-align:center;}
.bdp-vcard-lines li{margin:6px 0;color:var(--gray-600);font-size:14px;}

/* Chips / pill row */
.bdp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 26px;}
.bdp-chip{display:inline-block;padding:8px 16px;border-radius:999px;background:var(--primary-light);
    color:var(--primary-dark);font-weight:600;font-size:14px;border:1px solid #bae6fd;}

/* Screenshots */
.bdp-figure{margin:6px 0 26px;}
.bdp-figure img{display:block;width:100%;height:auto;border:1px solid var(--gray-200);
    border-radius:var(--radius);box-shadow:var(--shadow);}
.bdp-figure-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    min-height:220px;border:2px dashed var(--gray-300);border-radius:var(--radius);background:var(--gray-50);
    color:var(--gray-400);text-align:center;padding:24px;}
.bdp-figure-ph span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;}
.bdp-figure-ph em{font-style:normal;font-size:14px;color:var(--gray-500);max-width:420px;}
.bdp-figure figcaption{margin-top:10px;font-size:13px;color:var(--gray-500);text-align:center;}

/* Brand asset download tiles */
.bdp-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:6px 0 26px;}
.bdp-asset{border:1px solid var(--gray-200);border-radius:var(--radius);overflow:hidden;background:var(--white);
    box-shadow:var(--shadow);display:flex;flex-direction:column;}
.bdp-asset-thumb{display:flex;align-items:center;justify-content:center;height:110px;padding:16px;
    background:var(--gray-50);border-bottom:1px solid var(--gray-200);}
.bdp-asset-thumb img{max-width:100%;max-height:78px;object-fit:contain;}
.bdp-asset-missing{font-size:12px;color:var(--gray-400);}
.bdp-asset-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;}
.bdp-asset-name{font-size:12px;color:var(--gray-600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bdp-asset-dl{font-size:13px;font-weight:600;color:var(--primary);text-decoration:none;white-space:nowrap;}
.bdp-asset-dl:hover{text-decoration:underline;color:var(--primary-dark);}

@media(max-width:640px){
    .bdp-feature-cols{grid-template-columns:1fr;gap:12px;}
    .bdp-flow td:first-child{white-space:normal;}
    .bdp-cards{grid-template-columns:1fr;}
}

/* ---------- Buttons ---------- */
.bdp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-size:14px;font-weight:600;padding:10px 18px;border-radius:var(--radius-sm);
    border:1px solid transparent;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s;}
.bdp-btn-primary{background:var(--primary);color:#fff;}
.bdp-btn-primary:hover{background:var(--primary-dark);color:#fff;}
.bdp-btn-secondary{background:var(--white);color:var(--gray-700);border-color:var(--gray-300);}
.bdp-btn-secondary:hover{background:var(--gray-50);}
.bdp-btn-danger{background:var(--white);color:var(--red);border-color:#fca5a5;}
.bdp-btn-danger:hover{background:var(--red-light);}
.bdp-btn-ghost{background:var(--red);color:#fff;border-color:var(--red);}
.bdp-btn-ghost:hover{background:#b91c1c;border-color:#b91c1c;color:#fff;}
.bdp-btn-sm{padding:6px 12px;font-size:13px;}
.bdp-linkbtn{background:none;border:0;color:var(--primary);font-size:13px;font-weight:600;cursor:pointer;padding:0;}
.bdp-linkbtn:hover{text-decoration:underline;color:var(--primary-dark);}

/* ---------- Admin console ---------- */
.bdp-wrap{max-width:1320px;margin:0 auto;padding:32px 24px 48px;}
/* Two-column workspace: create form (left, narrow, sticky) + logins list
   (right, grows). Both stay in view so there's no scroll to verify a new
   login — only the list itself scrolls once it gets long. */
.bdp-admin-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start;}
.bdp-admin-grid .bdp-card{margin-bottom:0;}
.bdp-create{position:sticky;top:84px;}
.bdp-list .bdp-table-scroll{max-height:calc(100vh - 240px);min-height:240px;overflow:auto;}
.bdp-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);
    padding:24px 26px;margin-bottom:24px;box-shadow:var(--shadow);}
.bdp-card h2{font-size:16px;margin:0 0 18px;}
.bdp-table{width:100%;border-collapse:collapse;font-size:14px;}
.bdp-table th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--gray-200);
    font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);
    position:sticky;top:0;background:var(--white);z-index:1;}
.bdp-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--gray-100);vertical-align:middle;color:var(--gray-700);}
/* Keep the username on a single line — the dashes in "mary-kay-demo" were
   letting it wrap into an ugly stack. */
.bdp-table td:first-child code{white-space:nowrap;}
/* Date+time stays together; the "expires soon" pill drops to its own line. */
.bdp-when{white-space:nowrap;}
.bdp-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:capitalize;}
.bdp-badge.active{background:var(--green-light);color:var(--green);}
.bdp-badge.revoked{background:var(--red-light);color:var(--red);}
.bdp-badge.expired{background:var(--amber-light);color:var(--amber);}
.bdp-actions form{display:inline;margin-left:6px;}
.bdp-actions form:first-child{margin-left:0;}
.bdp-forwho{display:block;margin-top:4px;font-size:12px;color:var(--gray-500);}
.bdp-optional{font-weight:400;font-size:11px;color:var(--gray-400);text-transform:uppercase;letter-spacing:.04em;margin-left:4px;}
.bdp-listnote{margin:14px 0 0;font-size:12px;color:var(--gray-500);}
/* Briefly highlight rows revealed by "Show all" so the change is obvious. */
@keyframes bdp-flash-kf{from{background:var(--primary-light);}to{background:transparent;}}
.bdp-flash > td{animation:bdp-flash-kf 1.8s ease-out;}
.bdp-soon{display:block;width:fit-content;margin-top:5px;padding:2px 8px;border-radius:999px;
    background:var(--amber-light);color:var(--amber);font-size:11px;font-weight:700;white-space:nowrap;}
.bdp-reveal{display:inline-block;}
.bdp-reveal summary{cursor:pointer;color:var(--primary);font-size:13px;font-weight:600;list-style:none;}
.bdp-reveal summary::-webkit-details-marker{display:none;}
.bdp-reveal[open] summary{color:var(--gray-400);font-size:12px;}
.bdp-reveal code{display:inline-block;margin-top:6px;}

/* ---------- Column sort/filter menus (no-JS <details> popovers) ---------- */
.bdp-th{display:inline-flex;align-items:center;gap:5px;}
.bdp-filter{position:relative;display:inline-flex;z-index:2;}
.bdp-filter summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
    color:var(--gray-400);padding:2px;border-radius:4px;}
.bdp-filter summary::-webkit-details-marker{display:none;}
.bdp-filter summary::marker{content:"";}
.bdp-filter summary:hover{color:var(--gray-700);background:var(--gray-100);}
.bdp-filter.on summary{color:var(--primary);}
.bdp-filter[open]{z-index:30;}
.bdp-filter[open] summary{color:var(--primary);background:var(--primary-light);}
.bdp-sort-ico path{fill:currentColor;}
.bdp-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:170px;padding:6px;
    background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-sm);
    box-shadow:0 6px 18px rgba(16,24,40,.14);}
.bdp-menu-right{left:auto;right:0;}
.bdp-menu a{display:block;padding:8px 11px;border-radius:6px;font-size:13px;font-weight:500;
    color:var(--gray-700);text-decoration:none;text-transform:none;letter-spacing:normal;white-space:nowrap;}
.bdp-menu a:hover{background:var(--gray-50);color:var(--gray-900);}
.bdp-menu a.active{background:var(--primary-light);color:var(--primary-dark);font-weight:600;}

.bdp-field{margin-bottom:18px;}
.bdp-field label{display:block;font-size:13px;font-weight:600;color:var(--gray-700);margin:0 0 6px;}
.bdp-input{width:100%;padding:11px 12px;font-size:14px;border:1px solid var(--gray-300);border-radius:var(--radius-sm);
    font-family:inherit;color:var(--gray-800);background:var(--white);}
.bdp-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
/* Password field with an inline show/hide eye toggle. */
.bdp-pw-wrap{position:relative;}
.bdp-pw-wrap .bdp-input{padding-right:44px;}
.bdp-pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:0;padding:6px;border-radius:6px;cursor:pointer;color:var(--gray-400);}
.bdp-pw-toggle:hover{color:var(--gray-700);background:var(--gray-100);}
.bdp-pw-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:1px;}
/* Hidden password (default) shows the crossed eye; revealing shows the open eye. */
.bdp-pw-toggle .ic-eye{display:none;}
.bdp-pw-toggle .ic-eye-off{display:inline;}
.bdp-pw-toggle.on .ic-eye{display:inline;}
.bdp-pw-toggle.on .ic-eye-off{display:none;}
.bdp-hint{font-size:12px;color:var(--gray-500);margin:6px 0 0;}
.bdp-checks{display:flex;flex-wrap:wrap;gap:14px;}
.bdp-checks label{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;color:var(--gray-700);margin:0;cursor:pointer;}
.bdp-checks input{width:16px;height:16px;accent-color:var(--primary);}

/* ---------- Banners ---------- */
.bdp-banner{padding:14px 16px;border-radius:var(--radius-sm);margin-bottom:22px;font-size:14px;}
.bdp-banner.error{background:var(--red-light);border:1px solid #fca5a5;color:var(--red);}
.bdp-banner.notice{background:var(--green-light);border:1px solid #6ee7b7;color:var(--green);}
.bdp-secret{background:var(--green-light);border:1px solid #6ee7b7;}
.bdp-secret h2{color:var(--green-dark);}
.bdp-secret .row{margin-bottom:12px;}
.bdp-secret .row strong{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin-bottom:4px;}
.bdp-secret code{display:block;padding:11px 14px;background:var(--white);color:var(--gray-900);border:1px solid #6ee7b7;border-radius:var(--radius-sm);font-size:15px;word-break:break-all;}
.bdp-secret .warn{font-weight:600;color:var(--green-dark);margin:12px 0 0;font-size:13px;}

/* ---------- Auth (login) card ---------- */
.bdp-auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--gray-50);}
.bdp-auth-card{background:var(--white);border:1px solid var(--gray-200);border-radius:16px;
    padding:36px;width:100%;max-width:400px;box-shadow:0 4px 6px rgba(16,24,40,.03),0 12px 24px rgba(16,24,40,.06);}
.bdp-auth-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--gray-900);margin-bottom:22px;}
.bdp-auth-brand .bdp-logo{height:23px;width:auto;display:block;}
.bdp-auth-card h1{font-size:20px;margin:0 0 4px;}
.bdp-auth-card .sub{color:var(--gray-500);font-size:14px;margin:0 0 22px;}
.bdp-auth-card .bdp-btn{width:100%;margin-top:4px;}

@media(max-width:760px){
    .bdp-layout{flex-direction:column;}
    .bdp-sidebar{width:100%;flex-basis:auto;border-right:0;border-bottom:1px solid var(--gray-200);}
    .bdp-nav{position:static;}
    /* min-width:0 so a wide content table scrolls inside its own wrapper
       rather than stretching the column past the viewport. */
    .bdp-main{padding:24px 20px;min-width:0;}
}

/* Collapse the admin two-column workspace on narrower screens. */
@media(max-width:900px){
    /* minmax(0,1fr) (not 1fr) lets the column shrink below its content's
       intrinsic width, so the wide logins table scrolls INSIDE its own
       container instead of stretching the whole page and pushing the top
       bar past the viewport edge. */
    .bdp-admin-grid{grid-template-columns:minmax(0,1fr);}
    .bdp-create,.bdp-list{position:static;min-width:0;}
    .bdp-admin-grid .bdp-card{margin-bottom:24px;}
    .bdp-list .bdp-table-scroll{max-height:none;}
}

/* ---------- Mobile refinements (phones, ≤640px) ---------- */
@media(max-width:640px){
    /* Top bar: tighter gutters, trim the secondary label, keep it on one row. */
    .bdp-topbar{padding:0 16px;height:56px;}
    .bdp-brand{font-size:15px;gap:6px;}
    .bdp-brand .bdp-logo{height:22px;}
    .bdp-brand .sub{display:none;}
    .bdp-userbox{gap:12px;font-size:13px;}
    .bdp-userbox .who{max-width:120px;}

    /* Admin console: reclaim horizontal space. */
    .bdp-wrap{padding:20px 14px 40px;}
    .bdp-card{padding:18px 16px;}
    .bdp-nav{top:72px;}

    /* The 6-column logins table can't shrink to a phone — let it scroll
       sideways as one piece instead of crushing every column. */
    .bdp-list .bdp-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .bdp-table{min-width:560px;}

    /* Prospect content: turn the key/value reference table into stacked rows
       so nothing gets clipped on a narrow screen. */
    .bdp-info,.bdp-info tbody,.bdp-info tr,.bdp-info th,.bdp-info td{display:block;width:auto;}
    .bdp-info tr{margin-bottom:12px;border:1px solid var(--gray-200);border-radius:var(--radius-sm);overflow:hidden;}
    .bdp-info th{white-space:normal;border:0;border-bottom:1px solid var(--gray-200);}
    .bdp-info td{border:0;}

    /* Big headline stat scales down so it never overflows. */
    .bdp-stat{padding:18px;}
    .bdp-stat-value{font-size:34px;}

    /* Login card: a touch tighter on small screens. */
    .bdp-auth{padding:16px;}
    .bdp-auth-card{padding:26px 22px;}

    /* Main reading column: comfortable phone gutters. */
    .bdp-main{padding:22px 16px;}
    .bdp-main h2{font-size:21px;}
}