/* ===================================================================
   DevVault design layer.

   Bootstrap 5.3 exposes per-component CSS variables (--bs-btn-bg,
   --bs-card-bg, --bs-list-group-*), so the stock look is retuned here by
   overriding those rather than fighting the framework with !important.
   Every colour is defined twice: once for light, once under
   [data-bs-theme="dark"], because the navbar toggle switches between them.
   =================================================================== */

:root {
    --dv-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --dv-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --dv-bg: #f6f7f9;
    --dv-surface: #ffffff;
    --dv-surface-2: #f2f4f7;
    --dv-border: #e5e8ec;
    --dv-border-strong: #d3d8e0;
    --dv-text: #14181f;
    --dv-text-muted: #6b7280;
    --dv-text-faint: #98a1ae;

    --dv-accent: #5b5bd6;
    --dv-accent-hover: #4c4cc4;
    --dv-accent-soft: #eeeefc;
    --dv-accent-rgb: 91, 91, 214;

    --dv-danger: #d64545;
    --dv-danger-soft: #fdecec;
    --dv-success: #157f5b;
    --dv-success-soft: #e4f5ee;
    --dv-warning: #b4690e;
    --dv-warning-soft: #fdf0dc;

    --dv-radius: 12px;
    --dv-radius-sm: 8px;
    --dv-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --dv-shadow-lift: 0 4px 12px rgba(16, 24, 40, .08);
}

[data-bs-theme="dark"] {
    --dv-bg: #0f1116;
    --dv-surface: #171a21;
    --dv-surface-2: #1e222b;
    --dv-border: #262b35;
    --dv-border-strong: #333a46;
    --dv-text: #e6e9ee;
    --dv-text-muted: #9aa3b2;
    --dv-text-faint: #6e7889;

    --dv-accent: #8b8bf5;
    --dv-accent-hover: #9c9cf8;
    --dv-accent-soft: #1e1f3d;
    --dv-accent-rgb: 139, 139, 245;

    --dv-danger: #f27272;
    --dv-danger-soft: #2c1a1c;
    --dv-success: #4fc99b;
    --dv-success-soft: #14291f;
    --dv-warning: #e0a94d;
    --dv-warning-soft: #2a2113;

    --dv-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    --dv-shadow-lift: 0 4px 14px rgba(0, 0, 0, .4);
}

/* Retune Bootstrap's own tokens so stock components inherit the palette. */
:root,
[data-bs-theme="dark"] {
    --bs-body-bg: var(--dv-bg);
    --bs-body-color: var(--dv-text);
    --bs-border-color: var(--dv-border);
    --bs-secondary-color: var(--dv-text-muted);
    --bs-tertiary-bg: var(--dv-surface-2);
    --bs-primary: var(--dv-accent);
    --bs-primary-rgb: var(--dv-accent-rgb);
    --bs-link-color: var(--dv-accent);
    --bs-link-hover-color: var(--dv-accent-hover);
    --bs-body-font-family: var(--dv-sans);
    --bs-border-radius: var(--dv-radius-sm);
}

body {
    min-height: 100vh;
    font-family: var(--dv-sans);
    background: var(--dv-bg);
    color: var(--dv-text);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.006em;
}

h1, h2, h3, h4, h5 { letter-spacing: -0.02em; font-weight: 600; }

/* Navigation -------------------------------------------------------- */
.navbar {
    background: var(--dv-surface) !important;
    border-bottom: 1px solid var(--dv-border);
    padding-block: .625rem;
}

.navbar-brand { font-weight: 600; letter-spacing: -0.02em; color: var(--dv-text); }

.navbar .nav-link {
    color: var(--dv-text-muted);
    font-size: .875rem;
    font-weight: 500;
    padding: .4rem .55rem;
    border-radius: var(--dv-radius-sm);
    transition: color .12s, background-color .12s;
    /* Never let a nav item fold into icon-over-text two-liners. */
    white-space: nowrap;
}

/* Same rule for the action buttons (Quick Log was wrapping onto two lines). */
.navbar .btn { white-space: nowrap; }

/* In the narrow band just above the collapse breakpoint the full row is a
   few pixels too wide — the section icons are the cheapest thing to shed.
   Text-only links until there is room for both. */
@media (min-width: 1200px) and (max-width: 1460px) {
    .navbar .navbar-nav .nav-link .bi { display: none; }
}

.navbar .nav-link:hover { color: var(--dv-text); background: var(--dv-surface-2); }
.navbar .nav-link.active { color: var(--dv-accent); background: var(--dv-accent-soft); }

/* Mobile menu.
   The navbar is sticky, so once the page is scrolled it floats above the
   content. Letting the collapse expand inline made the bar grow tall and bury
   whatever was underneath with no visual boundary — it read as broken layout.
   Below the lg breakpoint the menu is therefore a real dropdown panel: taken
   out of flow, anchored under the bar, with its own surface, edge and shadow
   so overlaying is obviously deliberate.

   Deliberately no max-height/overflow here: Bootstrap animates the collapse by
   setting an inline height, and constraining it leaves the panel stuck short
   with an inner scrollbar. The menu is four links and a button row, so it can
   never be tall enough to need scrolling. */
@media (max-width: 1199.98px) {
    .navbar .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--dv-surface);
        border-top: 1px solid var(--dv-border);
        border-bottom: 1px solid var(--dv-border);
        box-shadow: var(--dv-shadow-lift);
        padding: .5rem .75rem .75rem;
    }

    .navbar .navbar-nav { margin-bottom: .5rem; }
    .navbar .nav-link { padding: .55rem .7rem; }

    /* The action row wraps instead of squeezing on a narrow screen. */
    .navbar .navbar-collapse > .d-flex { flex-wrap: wrap; row-gap: .5rem; }
}

/* Buttons ----------------------------------------------------------- */
.btn {
    font-weight: 500;
    font-size: .875rem;
    border-radius: var(--dv-radius-sm);
    padding: .45rem .85rem;
    transition: background-color .12s, border-color .12s, color .12s;
}

.btn-sm { font-size: .8125rem; padding: .35rem .7rem; }

.btn-primary {
    --bs-btn-bg: var(--dv-accent);
    --bs-btn-border-color: var(--dv-accent);
    --bs-btn-hover-bg: var(--dv-accent-hover);
    --bs-btn-hover-border-color: var(--dv-accent-hover);
    --bs-btn-active-bg: var(--dv-accent-hover);
    --bs-btn-active-border-color: var(--dv-accent-hover);
    --bs-btn-disabled-bg: var(--dv-accent);
    --bs-btn-disabled-border-color: var(--dv-accent);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--dv-accent);
    --bs-btn-border-color: var(--dv-border-strong);
    --bs-btn-hover-bg: var(--dv-accent-soft);
    --bs-btn-hover-border-color: var(--dv-accent);
    --bs-btn-hover-color: var(--dv-accent);
    --bs-btn-active-bg: var(--dv-accent-soft);
    --bs-btn-active-color: var(--dv-accent);
    --bs-btn-active-border-color: var(--dv-accent);
}

.btn-outline-secondary {
    --bs-btn-color: var(--dv-text-muted);
    --bs-btn-border-color: var(--dv-border-strong);
    --bs-btn-hover-bg: var(--dv-surface-2);
    --bs-btn-hover-border-color: var(--dv-border-strong);
    --bs-btn-hover-color: var(--dv-text);
    --bs-btn-active-bg: var(--dv-surface-2);
    --bs-btn-active-color: var(--dv-text);
    --bs-btn-active-border-color: var(--dv-border-strong);
}

/* Surfaces ---------------------------------------------------------- */
.card,
.dv-panel {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
}

.card { --bs-card-bg: var(--dv-surface); --bs-card-border-color: var(--dv-border); }

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--dv-border);
    padding: .875rem 1.125rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.card-footer { background: transparent; border-top: 1px solid var(--dv-border); }
.card-body { padding: 1.125rem; }

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--dv-border);
    --bs-list-group-action-hover-bg: var(--dv-surface-2);
    --bs-list-group-action-color: var(--dv-text);
    --bs-list-group-action-hover-color: var(--dv-text);
}

.list-group-item { padding: .875rem 1.125rem; }

/* Page header ------------------------------------------------------- */
.dv-page-head { margin-bottom: 1.5rem; }
.dv-page-head h1 { font-size: 1.375rem; margin: 0; }
.dv-page-head p { font-size: .8125rem; color: var(--dv-text-muted); margin: .2rem 0 0; }

/* Stat tiles -------------------------------------------------------- */
.dv-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .875rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 991px) { .dv-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .dv-stats { grid-template-columns: 1fr; } }

.dv-tile {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    padding: 1rem 1.125rem;
    box-shadow: var(--dv-shadow);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}

.dv-tile-label {
    font-size: .75rem;
    font-weight: 500;
    color: var(--dv-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.dv-stat { font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }

.dv-chip {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.dv-chip-accent  { background: var(--dv-accent-soft);  color: var(--dv-accent); }
.dv-chip-danger  { background: var(--dv-danger-soft);  color: var(--dv-danger); }
.dv-chip-success { background: var(--dv-success-soft); color: var(--dv-success); }
.dv-chip-warning { background: var(--dv-warning-soft); color: var(--dv-warning); }

/* Panels ------------------------------------------------------------ */
.dv-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-panel-title {
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .01em;
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
}

.dv-panel-link { font-size: .75rem; font-weight: 500; text-decoration: none; color: var(--dv-text-muted); }
.dv-panel-link:hover { color: var(--dv-accent); }

/* Rows inside panels ------------------------------------------------ */
.dv-row {
    display: block;
    padding: .875rem 1.125rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--dv-border);
    transition: background-color .12s;
}

.dv-row:last-child { border-bottom: 0; }
.dv-row:hover { background: var(--dv-surface-2); color: inherit; }

.dv-row-title {
    font-size: .875rem;
    font-weight: 500;
    color: var(--dv-text);
    margin-bottom: .3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dv-row-compact { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.dv-row-compact .dv-row-title { margin-bottom: 0; }

.dv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; }
.dv-time { font-size: .75rem; color: var(--dv-text-faint); }

/* Pills -------------------------------------------------------------- */
.dv-pill {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .6875rem;
    font-weight: 500;
    padding: .15rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--dv-border);
    background: var(--dv-surface-2);
    color: var(--dv-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

a.dv-pill:hover { border-color: var(--dv-accent); color: var(--dv-accent); }

.dv-pill-open     { background: var(--dv-warning-soft); color: var(--dv-warning); border-color: transparent; }
.dv-pill-resolved { background: var(--dv-success-soft); color: var(--dv-success); border-color: transparent; }
.dv-pill-count    { background: var(--dv-danger-soft);  color: var(--dv-danger);  border-color: transparent; }
.dv-pill-accent   { background: var(--dv-accent-soft);  color: var(--dv-accent);  border-color: transparent; }

/* Code blocks -------------------------------------------------------- */
pre.dv-code {
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius-sm);
    padding: 1rem;
    margin: 0;
    max-height: 28rem;
    overflow: auto;
}

pre.dv-code code {
    font-family: var(--dv-mono);
    font-size: .8125rem;
    line-height: 1.65;
    background: transparent;
    padding: 0;
}

.dv-code-wrap { position: relative; }

/* Error messages and stack traces are prose-like: wrapping them beats a
   horizontal scrollbar. Actual code keeps its lines intact instead. */
pre.dv-code.dv-code-flow {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.dv-code-wrap .dv-copy-btn {
    position: absolute;
    top: .5rem;
    right: .5rem;
    opacity: 0;
    transition: opacity .15s;
}

.dv-code-wrap:hover .dv-copy-btn,
.dv-code-wrap .dv-copy-btn:focus { opacity: 1; }

.dv-error-preview {
    font-family: var(--dv-mono);
    font-size: .75rem;
    line-height: 1.55;
    color: var(--dv-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Forms -------------------------------------------------------------- */
.form-control, .form-select {
    background: var(--dv-surface);
    border-color: var(--dv-border-strong);
    color: var(--dv-text);
    border-radius: var(--dv-radius-sm);
    font-size: .875rem;
    padding: .45rem .7rem;
}

.form-control:focus, .form-select:focus {
    background: var(--dv-surface);
    color: var(--dv-text);
    border-color: var(--dv-accent);
    box-shadow: 0 0 0 3px rgba(var(--dv-accent-rgb), .15);
}

.form-label { font-size: .8125rem; font-weight: 500; color: var(--dv-text); margin-bottom: .35rem; }
.form-text { font-size: .75rem; color: var(--dv-text-faint); }
.input-group-text { background: var(--dv-surface-2); border-color: var(--dv-border-strong); color: var(--dv-text-muted); }
.dv-search-icon { background: var(--dv-surface); }

/* Modals, dropdowns, alerts ------------------------------------------ */
.modal-content { background: var(--dv-surface); border: 1px solid var(--dv-border); border-radius: var(--dv-radius); }
.modal-header, .modal-footer { border-color: var(--dv-border); }

.dropdown-menu {
    --bs-dropdown-bg: var(--dv-surface);
    --bs-dropdown-border-color: var(--dv-border);
    --bs-dropdown-link-hover-bg: var(--dv-surface-2);
    --bs-dropdown-link-color: var(--dv-text);
    border-radius: var(--dv-radius-sm);
    box-shadow: var(--dv-shadow-lift);
    font-size: .875rem;
}

.alert { border-radius: var(--dv-radius-sm); border: 1px solid transparent; font-size: .875rem; }
.alert-success { background: var(--dv-success-soft); color: var(--dv-success); }
.alert-danger  { background: var(--dv-danger-soft);  color: var(--dv-danger); }
.alert-info    { background: var(--dv-accent-soft);  color: var(--dv-accent); }

/* Empty states -------------------------------------------------------- */
.dv-empty { padding: 2.5rem 1.25rem; text-align: center; color: var(--dv-text-muted); font-size: .875rem; }
.dv-empty i { font-size: 1.75rem; display: block; margin-bottom: .6rem; color: var(--dv-text-faint); }


/* Toolbar (filter bars above lists) --------------------------------- */
.dv-toolbar {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
    padding: .75rem;
    margin-bottom: 1rem;
}

.dv-toolbar .form-control,
.dv-toolbar .form-select { font-size: .8125rem; }

.dv-result-count {
    font-size: .8125rem;
    color: var(--dv-text-muted);
    margin-bottom: .625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

/* Detail pages ------------------------------------------------------- */
.dv-detail-head { margin-bottom: 1.25rem; }

.dv-detail-head h1 {
    font-size: 1.25rem;
    margin: 0 0 .5rem;
    line-height: 1.35;
    word-break: break-word;
}

.dv-section-label {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dv-text-faint);
    margin-bottom: .5rem;
}

/* Definition rows in a sidebar --------------------------------------- */
.dv-facts { display: flex; flex-direction: column; }

.dv-fact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem 1.125rem;
    font-size: .8125rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-fact:last-child { border-bottom: 0; }
.dv-fact dt { color: var(--dv-text-muted); font-weight: 400; margin: 0; }
.dv-fact dd { margin: 0; font-weight: 500; text-align: right; }

/* Solution blocks ---------------------------------------------------- */
.dv-solution { padding: 1.125rem; border-bottom: 1px solid var(--dv-border); }
.dv-solution:last-of-type { border-bottom: 0; }
.dv-solution-body { font-size: .875rem; line-height: 1.65; white-space: pre-wrap; margin: .75rem 0; }

/* Forms -------------------------------------------------------------- */
.dv-form-section { padding: 1.125rem; border-bottom: 1px solid var(--dv-border); }
.dv-form-section:last-of-type { border-bottom: 0; }
.dv-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1.125rem;
    border-top: 1px solid var(--dv-border);
    background: var(--dv-surface-2);
    border-radius: 0 0 var(--dv-radius) var(--dv-radius);
}

textarea.form-control.font-monospace { font-family: var(--dv-mono); font-size: .8125rem; line-height: 1.6; }

/* Snippet cards ------------------------------------------------------ */
.dv-snippet-card {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dv-snippet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-snippet-title { font-size: .875rem; font-weight: 500; color: var(--dv-text); text-decoration: none; }
.dv-snippet-title:hover { color: var(--dv-accent); }
.dv-snippet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .625rem 1rem;
    border-top: 1px solid var(--dv-border);
    margin-top: auto;
}


/* Auth screens -------------------------------------------------------- */
.dv-auth { max-width: 24rem; margin: 0 auto; }

.dv-auth-brand { text-align: center; margin-bottom: 1.5rem; }
.dv-auth-brand h1 { font-size: 1.375rem; margin: 0 0 .35rem; }
.dv-auth-brand p { font-size: .8125rem; color: var(--dv-text-muted); margin: 0; }

.dv-auth-card {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow-lift);
    padding: 1.5rem;
}

.dv-auth-card h2 { font-size: 1rem; margin: 0 0 1.125rem; }

.dv-auth-foot {
    text-align: center;
    font-size: .8125rem;
    color: var(--dv-text-muted);
    margin: 1rem 0 0;
}


/* Credentials ---------------------------------------------------------
   One row per login: role on the left, the copyable values in the middle,
   row actions on the right. Values use the mono face so a lookalike
   character (l vs 1, O vs 0) is distinguishable when read off screen. */
.dv-cred {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1.125rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-cred:last-child { border-bottom: 0; }

.dv-cred-role {
    flex: 0 0 auto;
    min-width: 7rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .25rem;
}
.dv-cred-fields { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; flex: 1 1 auto; min-width: 0; }
.dv-cred-actions { display: flex; gap: .35rem; flex: 0 0 auto; }

.dv-cred-field { display: flex; align-items: center; gap: .5rem; min-width: 0; }

.dv-cred-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dv-text-faint);
    flex: 0 0 auto;
}

.dv-cred-value {
    font-family: var(--dv-mono);
    font-size: .8125rem;
    color: var(--dv-text);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius-sm);
    padding: .2rem .5rem;
    overflow-wrap: anywhere;
    min-width: 0;
}

@media (max-width: 767.98px) {
    .dv-cred { flex-wrap: wrap; }
    .dv-cred-role { min-width: 0; }
    .dv-cred-actions { margin-left: auto; }
}


/* Bulk credential entry ------------------------------------------------
   Six columns: role, username, password, environment, URL, remove. The
   header row is hidden on small screens where the fields stack and each
   input carries its own aria-label instead. */
.dv-bulk-head,
.dv-bulk-row {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.1fr) auto;
    gap: .5rem;
    align-items: start;
}

.dv-bulk-head {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dv-text-faint);
    margin-bottom: .35rem;
}

.dv-bulk-row { margin-bottom: .5rem; }
.dv-bulk-row .btn { margin-top: .1rem; }

@media (max-width: 767.98px) {
    .dv-bulk-head { display: none; }

    .dv-bulk-row {
        grid-template-columns: 1fr auto;
        gap: .4rem;
        padding: .75rem;
        border: 1px solid var(--dv-border);
        border-radius: var(--dv-radius-sm);
        background: var(--dv-surface-2);
        margin-bottom: .75rem;
    }

    .dv-bulk-row > div { grid-column: 1; }
    .dv-bulk-row > .btn { grid-row: 1; grid-column: 2; }
}


/* Collapsible groups --------------------------------------------------- */
.dv-group > summary { cursor: pointer; list-style: none; user-select: none; }
.dv-group > summary::-webkit-details-marker { display: none; }
.dv-group > summary:hover { background: var(--dv-surface-2); }
.dv-group:not([open]) > summary { border-bottom: 0; }

/* Rounded corners must follow the panel when the body is hidden. */
.dv-group > summary { border-radius: var(--dv-radius) var(--dv-radius) 0 0; }
.dv-group:not([open]) > summary { border-radius: var(--dv-radius); }

.dv-group-chevron {
    color: var(--dv-text-faint);
    transition: transform .15s ease;
    display: inline-block;
}

.dv-group[open] > summary .dv-group-chevron { transform: rotate(90deg); }

/* Suggestion chips ----------------------------------------------------- */
.dv-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .5rem; }

.dv-suggest-label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--dv-text-faint);
}

button.dv-suggest-chip { cursor: pointer; }
button.dv-suggest-chip:hover { border-color: var(--dv-accent); color: var(--dv-accent); }

/* Utilities ------------------------------------------------------------
   Bootstrap 5.3 has no min-w-0, but a flex child needs min-width:0 before
   text-overflow can kick in — without it a long title refuses to shrink and
   pushes the status pill off the edge of the row. */
.min-w-0 { min-width: 0; }

/* Misc ---------------------------------------------------------------- */
.dv-tag { font-size: .75rem; text-decoration: none; }
.dv-card-link { text-decoration: none; color: inherit; display: block; }
.dv-card-link:hover .card { border-color: var(--dv-accent); }

.breadcrumb { font-size: .8125rem; --bs-breadcrumb-divider-color: var(--dv-text-faint); }
.breadcrumb a { text-decoration: none; color: var(--dv-text-muted); }
.breadcrumb a:hover { color: var(--dv-accent); }

.table { --bs-table-bg: transparent; --bs-table-color: var(--dv-text); font-size: .875rem; }
.table > thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--dv-text-muted);
    font-weight: 500;
    border-color: var(--dv-border);
}

.pagination {
    --bs-pagination-bg: var(--dv-surface);
    --bs-pagination-border-color: var(--dv-border);
    --bs-pagination-color: var(--dv-text-muted);
    --bs-pagination-active-bg: var(--dv-accent);
    --bs-pagination-active-border-color: var(--dv-accent);
    --bs-pagination-hover-bg: var(--dv-surface-2);
    font-size: .875rem;
}


/* Markdown-rendered solution text -------------------------------------
   Solution descriptions go through Str::markdown() with raw HTML stripped
   (see Solution::descriptionHtml). These rules keep the output looking
   like the rest of the app rather than browser-default HTML. */
.dv-markdown { font-size: .875rem; }
.dv-markdown p { margin-bottom: .5rem; }
.dv-markdown > :last-child { margin-bottom: 0; }

.dv-markdown code {
    font-family: var(--dv-mono);
    font-size: .8125em;
    color: var(--dv-text);
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius-sm);
    padding: .1rem .3rem;
}

.dv-markdown pre {
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius-sm);
    padding: .625rem .75rem;
    overflow-x: auto;
    margin-bottom: .5rem;
}

.dv-markdown pre code { background: none; border: 0; padding: 0; display: block; }

.dv-markdown ul,
.dv-markdown ol { padding-left: 1.25rem; margin-bottom: .5rem; }

.dv-markdown a { color: var(--dv-accent); }

.dv-markdown blockquote {
    border-left: 3px solid var(--dv-border);
    padding-left: .75rem;
    color: var(--dv-text-muted);
    margin: 0 0 .5rem;
}

/* Markdown headings inside a solution should read as emphasis, not as
   competing page headings. */
.dv-markdown h1, .dv-markdown h2, .dv-markdown h3,
.dv-markdown h4, .dv-markdown h5, .dv-markdown h6 {
    font-size: .9375rem;
    font-weight: 600;
    margin: .75rem 0 .35rem;
}


/* Command cheatsheet ---------------------------------------------------
   One row per command inside a collapsible category group: title, the
   command itself with a copy button, optional notes, and actions. */
.dv-cmd {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: .75rem 1.125rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-cmd:last-child { border-bottom: 0; }

.dv-cmd-main { flex: 1 1 auto; min-width: 0; }

.dv-cmd-side { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }

.dv-cmd-code { margin-bottom: 0; padding: .5rem 2.75rem .5rem .75rem; }


/* Attachments ----------------------------------------------------------
   One row per file in the error page's sidebar panel: optional image
   thumbnail, name + size, remove button. */
.dv-attach {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem 1.125rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-attach:last-of-type { border-bottom: 0; }

.dv-attach-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--dv-radius-sm);
    border: 1px solid var(--dv-border);
    background: var(--dv-surface-2);
}

.dv-attach-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }

.dv-attach-name {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--dv-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.dv-attach-name:hover { color: var(--dv-accent); }


/* Playbooks ------------------------------------------------------------
   Reading view: numbered steps with a per-browser done-checkbox, a copyable
   command and a note. Edit view: repeatable rows with reorder buttons. */
.dv-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1.125rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-step:last-child { border-bottom: 0; }
.dv-step-check { padding-top: .1rem; min-height: 0; }
.dv-step-main { flex: 1 1 auto; min-width: 0; }

.dv-step-title {
    font-size: .9375rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.dv-step-number {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--dv-accent);
    background: var(--dv-accent-soft);
    border-radius: 999px;
    padding: .1rem .5rem;
    flex: 0 0 auto;
}

/* A ticked step fades out so the eye lands on what is left. */
.dv-step:has(input:checked) .dv-step-main { opacity: .45; }
.dv-step:has(input:checked) .dv-step-title { text-decoration: line-through; }

.dv-step-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: start;
    padding: .75rem;
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius-sm);
    background: var(--dv-surface-2);
    margin-bottom: .75rem;
}

.dv-step-row-order { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.dv-step-row-fields { display: flex; flex-direction: column; gap: .5rem; }


/* Integration guide ---------------------------------------------------- */
.dv-guide-flow { padding-left: 1.1rem; margin-bottom: 0; }
.dv-guide-flow li { margin-bottom: .5rem; }
.dv-guide-flow li:last-child { margin-bottom: 0; }

.nav-tabs { --bs-nav-tabs-link-active-color: var(--dv-accent); border-color: var(--dv-border); }
.nav-tabs .nav-link { color: var(--dv-text-muted); font-size: .875rem; }
.nav-tabs .nav-link.active {
    color: var(--dv-accent);
    background: var(--dv-surface);
    border-color: var(--dv-border) var(--dv-border) var(--dv-surface);
}

/* The sticky navbar would cover an anchor target; leave room when the
   title's paperclip badge jumps to #attachments. */
#attachments { scroll-margin-top: 4.5rem; }


/* New-since-last-visit ------------------------------------------------
   The navbar count and the row pills for errors that arrived (or recurred)
   while nobody was looking. Cleared by visiting the Errors page. */
.dv-nav-badge {
    display: inline-block;
    min-width: 1.15rem;
    padding: .05rem .3rem;
    margin-left: .15rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    color: #fff;
    background: var(--dv-danger);
    border-radius: 999px;
}

.dv-pill-new {
    background: var(--dv-danger-soft);
    color: var(--dv-danger);
    border-color: transparent;
    font-weight: 600;
}


/* Ctrl+K palette --------------------------------------------------------
   A spotlight-style search over the whole workspace. Bootstrap modal frame,
   custom body. */
.dv-palette-dialog { max-width: 620px; margin-top: 8vh; }

.dv-palette {
    background: var(--dv-surface);
    border: 1px solid var(--dv-border);
    border-radius: var(--dv-radius);
    box-shadow: var(--dv-shadow-lift);
    overflow: hidden;
}

.dv-palette-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--dv-border);
}

.dv-palette-icon { color: var(--dv-text-faint); }

.dv-palette-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--dv-text);
    font-size: 1rem;
}

.dv-palette-hint {
    font-family: var(--dv-mono);
    font-size: .625rem;
    text-transform: uppercase;
    color: var(--dv-text-faint);
    border: 1px solid var(--dv-border);
    border-radius: 4px;
    padding: .1rem .35rem;
}

.dv-palette-body { max-height: 55vh; overflow-y: auto; padding: .4rem; }

.dv-palette-group {
    font-family: var(--dv-mono);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dv-text-faint);
    padding: .55rem .6rem .25rem;
}

.dv-palette-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--dv-text);
    text-decoration: none;
    padding: .5rem .6rem;
    border-radius: var(--dv-radius-sm);
    font-size: .875rem;
    cursor: pointer;
}

.dv-palette-item:hover,
.dv-palette-item.is-active { background: var(--dv-accent-soft); color: var(--dv-text); }

.dv-palette-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dv-palette-sub {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--dv-text-faint);
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dv-palette-meta { flex: 0 0 auto; font-size: .6875rem; color: var(--dv-text-faint); }
.dv-palette-pill { flex: 0 0 auto; }

.dv-palette-empty { padding: 1.2rem .6rem; color: var(--dv-text-muted); font-size: .875rem; }

.dv-palette-foot {
    display: flex;
    gap: 1rem;
    padding: .5rem 1rem;
    border-top: 1px solid var(--dv-border);
    font-size: .6875rem;
    color: var(--dv-text-faint);
}

.dv-palette-foot kbd {
    background: var(--dv-surface-2);
    border: 1px solid var(--dv-border);
    border-radius: 3px;
    color: var(--dv-text-muted);
    font-size: .625rem;
    padding: .05rem .3rem;
}


/* Project stats bars ---------------------------------------------------- */
.dv-proj-bar {
    height: 6px;
    background: var(--dv-surface-2);
    border-radius: 999px;
    overflow: hidden;
    max-width: 420px;
}

.dv-proj-bar-fill {
    display: block;
    height: 100%;
    background: var(--dv-accent);
    border-radius: 999px;
}