/* ─── Lucide icon sizing ────────────────────────────────────────── */
.icon { display:inline-block; width:1em; height:1em; vertical-align:-0.125em; stroke-width:2; flex-shrink:0; }
.icon-sm { width:.85em; height:.85em; }
.icon-lg { width:1.25em; height:1.25em; }

/* ─── Design tokens ────────────────────────────────────────────── */
:root, [data-theme="light"] {
    --bg-0:      #f4f4f4;   /* page */
    --bg-1:      #ffffff;   /* cards, panels */
    --bg-2:      #eeeeee;   /* subtle sections */
    --border:    #dcdcdc;
    --text-1:    #1a1a1a;
    --text-2:    #5a5a5a;
    --accent:    #e31837;   /* DNOW red */
    --accent-dk: #b81229;   /* hover state */
    --nav-dark:  #1a1a1a;   /* utility bar */
    --danger:    #c0392b;
    --success:   #2e8540;
    --warning:   #b07d10;
    color-scheme: light;
}
[data-theme="dark"] {
    --bg-0:      #111111;
    --bg-1:      #1c1c1c;
    --bg-2:      #252525;
    --border:    #2e2e2e;
    --text-1:    #ebebeb;
    --text-2:    #999;
    --accent:    #e31837;
    --accent-dk: #f54254;
    --nav-dark:  #0a0a0a;
    --danger:    #c0392b;
    --success:   #2e8540;
    --warning:   #c08a2a;
    color-scheme: dark;
}

/* ─── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
    background: var(--bg-0);
    color: var(--text-1);
    font: 15px/1.6 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

/* ─── Typography ───────────────────────────────────────────────── */
h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.3rem;  font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 600; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--text-2); }

/* Section label — red left-bar accent, like DNOW "▌ Why Choose" */
.section-label {
    display: flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--accent); margin-bottom: 10px;
}
.section-label::before {
    content: ""; display: inline-block;
    width: 4px; height: 1em; background: var(--accent); border-radius: 2px;
    flex-shrink: 0;
}

/* ─── No-emoji mode (admin setting) ────────────────────────────── */
/* Blank font covering all emoji Unicode ranges — emojis render as zero-width */
@font-face {
    font-family: 'NoEmoji';
    src: local('Arial');  /* exists on every OS but we override the ranges */
    unicode-range:
        U+00A9, U+00AE,            /* © ® */
        U+2000-206F,               /* General punctuation */
        U+2100-214F,               /* Letterlike symbols */
        U+2190-21FF,               /* Arrows */
        U+2300-23FF,               /* Misc technical */
        U+2460-24FF,               /* Enclosed alphanumerics */
        U+25A0-25FF,               /* Geometric shapes */
        U+2600-27BF,               /* Misc symbols, dingbats */
        U+2900-297F,               /* Supplemental arrows */
        U+1F000-1F02F,             /* Mahjong tiles */
        U+1F0A0-1F0FF,             /* Playing cards */
        U+1F100-1F1FF,             /* Enclosed alphanumeric supplement */
        U+1F200-1F2FF,             /* Enclosed ideographic supplement */
        U+1F300-1F5FF,             /* Misc symbols and pictographs */
        U+1F600-1F64F,             /* Emoticons */
        U+1F650-1F67F,             /* Ornamental dingbats */
        U+1F680-1F6FF,             /* Transport and map */
        U+1F700-1F77F,             /* Alchemical symbols */
        U+1F780-1F7FF,             /* Geometric shapes extended */
        U+1F800-1F8FF,             /* Supplemental arrows-C */
        U+1F900-1F9FF,             /* Supplemental symbols */
        U+1FA00-1FA6F,             /* Chess symbols */
        U+1FA70-1FAFF;             /* Symbols and pictographs extended-A */
}
/* When no-emoji: inject the blank font at the START of the font stack */
.no-emoji, .no-emoji * {
    font-family: 'NoEmoji', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ─── Theme picker (settings page) ────────────────────────────── */
.theme-picker { display: flex; gap: 14px; flex-wrap: wrap; }
.theme-option {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: none; border: 2px solid var(--border); border-radius: 10px;
    padding: 10px; cursor: pointer; transition: border-color 150ms;
    width: 100px;
}
.theme-option:hover { border-color: var(--text-2); }
.theme-option-active { border-color: var(--accent) !important; }

.theme-preview {
    width: 76px; height: 52px; border-radius: 6px; overflow: hidden;
    display: flex; flex-direction: column; border: 1px solid rgba(0,0,0,.08);
}
.theme-preview-light { background: #f4f4f4; }
.theme-preview-dark  { background: #111111; }
.theme-preview-system {
    background: linear-gradient(135deg, #f4f4f4 50%, #111111 50%);
}

.theme-preview-bar {
    height: 12px; flex-shrink: 0;
}
.theme-preview-light .theme-preview-bar  { background: #1a1a1a; }
.theme-preview-dark  .theme-preview-bar  { background: #0a0a0a; }
.theme-preview-system .theme-preview-bar { background: linear-gradient(135deg, #1a1a1a 50%, #0a0a0a 50%); }

.theme-preview-content { flex: 1; padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; }
.theme-preview-line {
    height: 5px; border-radius: 3px;
}
.theme-preview-light .theme-preview-line  { background: #c0c0c0; }
.theme-preview-dark  .theme-preview-line  { background: #333; }
.theme-preview-system .theme-preview-line { background: #999; }
.theme-preview-line.short { width: 60%; }

.theme-option-label { font-size: .82rem; font-weight: 600; color: var(--text-1); }

/* ─── Demo / POC banner ────────────────────────────────────────── */
.demo-banner {
    background: var(--accent);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 6px 44px; position: relative; min-height: 30px;
}
.demo-banner-pill {
    background: rgba(0,0,0,.22); color: #fff;
    font-size: .65rem; font-weight: 900; letter-spacing: .12em;
    text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
    flex-shrink: 0;
}
.demo-banner-text {
    color: rgba(255,255,255,.92); font-size: .75rem;
    font-weight: 500; letter-spacing: .02em; text-align: center;
}
.demo-banner-dismiss {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none;
    color: rgba(255,255,255,.6); font-size: .8rem;
    cursor: pointer; padding: 4px 6px; border-radius: 4px;
    line-height: 1;
}
.demo-banner-dismiss:hover { color: #fff; background: rgba(0,0,0,.15); }

/* ─── Global search (nav bar) ──────────────────────────────────── */
.topnav-search {
    display: flex; align-items: center; position: relative;
    flex-shrink: 0;
}
.topnav-search-icon {
    position: absolute; left: 10px; font-size: .85rem; pointer-events: none;
    color: var(--text-2);
}
.topnav-search-input {
    width: 200px; padding: 6px 32px 6px 30px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-2); color: var(--text-1);
    font: inherit; font-size: .85rem;
    transition: width 200ms ease, border-color 150ms;
}
.topnav-search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(227,24,55,.1);
    width: 280px;
}
.topnav-search-input::placeholder { color: var(--text-2); }
.search-kbd {
    position: absolute; right: 8px;
    background: var(--bg-0); border: 1px solid var(--border);
    border-radius: 4px; padding: 1px 5px;
    font-size: .7rem; color: var(--text-2); font-family: inherit;
    pointer-events: none;
}

/* ─── Top nav ──────────────────────────────────────────────────── */
.topnav-utility {
    background: var(--nav-dark); color: #fff;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 32px; height: 36px; font-size: .8rem; gap: 20px;
}
.topnav-utility a { color: #ccc; }
.topnav-utility a:hover { color: #fff; text-decoration: none; }

.topnav-main {
    background: var(--bg-1); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; padding: 0 32px;
    height: 60px; gap: 32px; position: sticky; top: 0; z-index: 100;
    box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.topnav-brand {
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap; flex-shrink: 0;
}
.topnav-brand:hover { text-decoration: none; }
/* DNOW wordmark is landscape — allow it to breathe at natural ratio */
.topnav-logo { height: 26px; width: auto; max-width: 120px; flex-shrink: 0; }
.topnav-brand-name {
    font-size: 1.15rem; font-weight: 800; color: var(--text-1);
    letter-spacing: -.02em;
}

/* ── Project switcher ──────────────────────────────────────────── */
.project-switcher {
    position: relative; flex-shrink: 0;
    border-left: 1px solid var(--border); padding-left: 16px; margin-left: 4px;
}
.project-switcher-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text-2); cursor: pointer;
    font-size: .82rem; font-weight: 500; max-width: 200px;
    transition: border-color .15s, color .15s;
}
.project-switcher-btn:hover { border-color: var(--accent); color: var(--text-1); }
.project-switcher-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.project-switcher-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px;
}
.project-switcher-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0;
    min-width: 240px; background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.16); z-index: 200;
    padding: 6px; max-height: 70vh; overflow-y: auto;
}
.project-switcher.open .project-switcher-menu { display: block; }
.project-switcher-head {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-2); font-weight: 700; padding: 6px 10px 4px;
}
.project-switcher-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 6px; color: var(--text-1);
    font-size: .86rem; text-decoration: none;
}
.project-switcher-item:hover { background: var(--bg-2, #2a2a2a); text-decoration: none; }
.project-switcher-item.active { font-weight: 700; }
.project-switcher-all {
    border-top: 1px solid var(--border); margin-top: 4px; padding-top: 9px;
    color: var(--text-2); font-size: .82rem;
}

.topnav-links {
    display: flex; align-items: center; gap: 4px; flex: 1;
}
.topnav-link {
    padding: 6px 12px; border-radius: 6px; font-size: .9rem;
    color: var(--text-2); white-space: nowrap;
}
.topnav-link:hover { color: var(--text-1); background: var(--bg-2); text-decoration: none; }
.topnav-link.active { color: var(--accent); font-weight: 600; }

.topnav-sep {
    width: 1px; height: 24px; background: var(--border); flex-shrink: 0;
}

/* User menu in nav */
.topnav-user { position: relative; flex-shrink: 0; }
.user-trigger {
    display: flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    padding: 5px 8px; cursor: pointer; color: inherit; font: inherit; text-align: left;
}
.user-trigger:hover { background: var(--bg-2); border-color: var(--border); }
.user-trigger .avatar { width: 30px; height: 30px; flex-shrink: 0; }
.user-trigger-meta { line-height: 1.2; }
.user-trigger-meta .user-name { font-size: .85rem; color: var(--text-1); font-weight: 600; }
.user-trigger-meta .user-email { font-size: .72rem; color: var(--text-2); }
.user-trigger-caret { color: var(--text-2); font-size: .7rem; }

.user-menu-pop {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; min-width: 180px;
    display: flex; flex-direction: column; gap: 2px; z-index: 200;
}
.user-menu-pop[hidden] { display: none; }
.user-menu-item {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px; border-radius: 5px;
    background: transparent; border: none; color: var(--text-2);
    font: inherit; font-size: .88rem; text-align: left; cursor: pointer; width: 100%;
}
.user-menu-item:hover { background: var(--bg-2); color: var(--text-1); text-decoration: none; }
.user-menu-item.danger:hover { color: var(--danger); }

/* ─── Layout wrapper ───────────────────────────────────────────── */
.page-wrap {
    max-width: 1200px; margin: 0 auto; padding: 36px 32px;
}
.page-wrap-wide {
    max-width: 1400px; margin: 0 auto; padding: 36px 32px;
}

/* ─── Avatar ───────────────────────────────────────────────────── */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-2); object-fit: cover; }

/* ─── Notification bell ────────────────────────────────────────── */
.notif-wrap    { position: relative; flex-shrink: 0; }
.notif-bell {
    background: transparent; border: none; cursor: pointer;
    font-size: 1.05rem; padding: 4px 6px; border-radius: 6px;
    position: relative; color: var(--text-2); line-height: 1;
}
.notif-bell:hover { background: var(--bg-2); }
.notif-badge {
    position: absolute; top: -2px; right: -4px;
    background: var(--accent); color: #fff;
    font-size: .6rem; font-weight: 800; line-height: 1;
    padding: 2px 4px; border-radius: 999px; min-width: 14px; text-align: center;
}
.notif-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    width: 320px; background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 300; overflow: hidden;
}
.notif-header {
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: var(--bg-2);
}
.notif-list  { max-height: 380px; overflow-y: auto; }
.notif-empty { padding: 20px 16px; text-align: center; color: var(--text-2); font-size: .88rem; }
.notif-item  {
    display: block; padding: 12px 16px; border-bottom: 1px solid var(--border);
    color: var(--text-1); text-decoration: none; transition: background 120ms;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-2); text-decoration: none; }
.notif-unread { background: rgba(227,24,55,.04); }
[data-theme="dark"] .notif-unread { background: rgba(227,24,55,.08); }
.notif-actor  { font-size: .85rem; font-weight: 600; margin-bottom: 3px; }
.notif-preview{ font-size: .8rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-time   { font-size: .72rem; color: var(--text-2); margin-top: 3px; }

/* ─── SSO buttons ──────────────────────────────────────────────── */
.sso-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 11px 16px; margin-bottom: 10px;
    border-radius: 7px; border: 1px solid var(--border);
    background: var(--bg-1); color: var(--text-1);
    font: inherit; font-size: .92rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: border-color 120ms, box-shadow 120ms;
}
.sso-btn:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); text-decoration: none; }
.sso-btn-okta  { border-color: #007DC1; }
.sso-btn-okta:hover { border-color: #005f94; box-shadow: 0 2px 10px rgba(0,125,193,.15); }
.sso-divider {
    text-align: center; color: var(--text-2); font-size: .82rem;
    margin: 4px 0 14px;
}

/* ─── Auth pages ───────────────────────────────────────────────── */
.main-auth {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 24px;
    background: var(--bg-0);
}
.auth-card {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 12px;
    padding: 28px 28px 24px; width: 100%;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}
.auth-card h1 { font-size: 1.3rem; font-weight: 700; }
.auth-card .auth-sub { color: var(--text-2); font-size: .9rem; margin-bottom: 24px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label,
.form-stack label { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--text-2); }
.auth-alt { margin-top: 20px; font-size: .88rem; color: var(--text-2); text-align: center; }

/* ─── Form elements ────────────────────────────────────────────── */
input, select, textarea {
    color-scheme: light dark;
    background: var(--bg-1); color: var(--text-1);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 9px 12px; font: inherit; width: 100%;
    transition: border-color 120ms;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(227,24,55,.1);
}
.form-stack { display: flex; flex-direction: column; gap: 16px; max-width: 520px; margin-top: 16px; }
.form-section-title { margin-top: 12px; color: var(--text-1); }
.checkbox-inline { flex-direction: row !important; align-items: center; gap: 8px; }
.checkbox-inline input { width: auto; }

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-2); color: var(--text-1);
    font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
    transition: background 120ms, border-color 120ms;
    white-space: nowrap;
}
.btn:hover { background: var(--bg-0); border-color: #bbb; text-decoration: none; }
.btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.btn-primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); filter: none; }
.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(.9); }

/* ─── Flash / alerts ───────────────────────────────────────────── */
.flash {
    padding: 11px 16px; border-radius: 6px; margin-bottom: 14px;
    border: 1px solid var(--border); background: var(--bg-1);
    font-size: .9rem;
}
.flash-success { border-color: var(--success); background: #f0faf2; color: #1f5c30; }
.flash-error   { border-color: var(--danger);  background: #fff0f0; color: #7a1a1a; }
.flash-warning { border-color: var(--warning);  background: #fffbf0; color: #6b4a0a; }
[data-theme="dark"] .flash-success { background: #112215; color: #6fcf8c; }
[data-theme="dark"] .flash-error   { background: #1e0d0d; color: #f08080; }
[data-theme="dark"] .flash-warning { background: #1e1500; color: #f0c060; }

/* Email verify banner */
.verify-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 16px; margin-bottom: 16px; border-radius: 6px;
    background: #fffbf0; border: 1px solid var(--warning); color: #6b4a0a;
}
.verify-banner-btn {
    background: var(--warning); border: 1px solid var(--warning); color: #fff;
    padding: 5px 14px; border-radius: 5px; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.verify-banner-btn:hover { filter: brightness(.9); }

/* ─── Cards ────────────────────────────────────────────────────── */
.card {
    background: var(--bg-1); border: 1px solid var(--border);
    border-radius: 8px; padding: 20px 22px;
}
.card + .card { margin-top: 12px; }

/* Home quick-access grid */
.home-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px; margin-top: 24px;
}
.home-card {
    display: block; padding: 20px 20px 18px;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px;
    color: inherit; cursor: pointer; font: inherit; text-align: left;
    transition: border-color 150ms, box-shadow 150ms, transform 150ms;
}
.home-card:hover {
    border-color: var(--accent); box-shadow: 0 4px 16px rgba(227,24,55,.1);
    text-decoration: none; transform: translateY(-2px);
}
.home-card-icon { font-size: 1.5rem; margin-bottom: 10px; }
.home-card-title { font-size: .97rem; font-weight: 700; color: var(--text-1); margin-bottom: 5px; }
.home-card-text  { font-size: .84rem; color: var(--text-2); line-height: 1.5; }
.home-card code  { background: var(--bg-0); padding: 1px 5px; border-radius: 3px; font-size: .78rem; }

/* ─── Theme toggle ─────────────────────────────────────────────── */
.theme-toggle {
    background: transparent; border: 1px solid var(--border); color: var(--text-2);
    border-radius: 6px; padding: 5px 10px; font-size: .8rem; cursor: pointer;
}
.theme-toggle:hover { color: var(--text-1); border-color: var(--text-2); }

/* ─── Detail section spacing ───────────────────────────────────── */
.detail-section { margin-bottom: 28px; }
.detail-section h1 { margin-bottom: 6px; }