/* ════════════════════════════════════════════════════════
   DevKit — Design System
   Single source of truth for all tools.
   Based on Material 3 + WCAG AA + PatternFly button hierarchy.
   ════════════════════════════════════════════════════════ */

:root {
    /* ─── Brand ─── */
    --dk-primary:        #5FCB71;
    --dk-primary-hover:  #4cc560;
    --dk-primary-dark:   #3dba52;

    /* ─── Neutrals ─── */
    --dk-dark:           #292929;   /* app bar, pane labels */
    --dk-dark-2:         #1f1f1f;   /* darker surfaces */
    --dk-code-bg:        #1e1e2e;   /* code surfaces (editors, code blocks) */
    --dk-code-fg:        #cdd6f4;   /* code text */
    --dk-code-fg-blue:   #74c7ec;   /* accent: links, timestamps */

    /* ─── Surfaces (light) ─── */
    --dk-surface:        #ffffff;   /* main content (documents, previews) */
    --dk-surface-2:      #f5f5f5;   /* toolbars, status bars */
    --dk-surface-3:      #fafafa;   /* page background */
    --dk-border:         #e0e0e0;
    --dk-border-strong:  #d0d0d0;

    /* ─── Text ─── */
    --dk-text:           #292929;
    --dk-text-muted:     #767676;   /* WCAG AA on white */
    --dk-text-on-dark:   rgba(255,255,255,.92);
    --dk-text-on-dark-muted: rgba(255,255,255,.55);

    /* ─── Semantic ─── */
    --dk-danger:         #dc3545;
    --dk-danger-bg:      #fdf0ef;
    --dk-warning:        #e65100;
    --dk-success:        #2e7d32;

    /* ─── Sizing (Material-aligned) ─── */
    --dk-appbar-h:       52px;
    --dk-toolbar-h:      48px;
    --dk-btn-h:          34px;      /* ≥32px per WCAG button min */
    --dk-radius:         6px;
    --dk-radius-sm:      4px;

    /* ─── Spacing scale ─── */
    --dk-gap:            .4rem;

    /* ─── Content (card-based tool layout) ─── */
    --dk-content-max:    1100px;
    --dk-content-pad:    1.5rem;
    --dk-content-gap:    1.25rem;

    /* ─── Font ─── */
    --dk-font:           system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --dk-mono:           "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar          { width: 8px; height: 8px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #c2c2c2; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--dk-primary); }
::-webkit-scrollbar-corner   { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: #c2c2c2 transparent; }

/* Dark scrollbar — for code surfaces */
.dk-dark-scroll::-webkit-scrollbar-thumb { background: #45475a; }
.dk-dark-scroll::-webkit-scrollbar-thumb:hover { background: var(--dk-primary); }
.dk-dark-scroll { scrollbar-color: #45475a transparent; }

/* ─── Utility ─── */
.hidden  { display: none !important; }
.show    { display: block !important; }

/* ════════════════════════════════════════════
   TOOLBAR — Material app bar pattern
   Primary actions left, secondary/meta right
   ════════════════════════════════════════════ */
.dk-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dk-gap);
    background: var(--dk-surface-2);
    border-bottom: 1px solid var(--dk-border);
    padding: 0 1rem;
    min-height: var(--dk-toolbar-h);
    flex-shrink: 0;
}
.dk-toolbar-left  { display: flex; align-items: center; gap: var(--dk-gap); flex-wrap: wrap; }
.dk-toolbar-right { display: flex; align-items: center; gap: var(--dk-gap); margin-left: auto; }

/* ════════════════════════════════════════════
   BUTTONS — hierarchy: primary / secondary / danger / ghost
   ════════════════════════════════════════════ */
.dk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: var(--dk-btn-h);
    padding: 0 .8rem;
    font-family: var(--dk-font);
    font-size: .83rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--dk-border-strong);
    border-radius: var(--dk-radius);
    background: var(--dk-surface);
    color: var(--dk-text);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    user-select: none;
}
.dk-btn:hover { background: #efefef; border-color: #bbb; }
.dk-btn:active { background: #e8e8e8; }
.dk-btn i { font-size: .85em; }

/* Icon-only button — square, same height */
.dk-btn-icon {
    width: var(--dk-btn-h);
    padding: 0;
    min-width: var(--dk-btn-h);
}

/* Primary — one per view, main action */
.dk-btn-primary {
    background: var(--dk-primary);
    border-color: var(--dk-primary);
    color: #fff;
}
.dk-btn-primary:hover  { background: var(--dk-primary-hover); border-color: var(--dk-primary-hover); }
.dk-btn-primary:active { background: var(--dk-primary-dark); }

/* Danger — destructive actions (Clear, Delete) */
.dk-btn-danger {
    background: var(--dk-surface);
    border-color: #e8b0b0;
    color: var(--dk-danger);
}
.dk-btn-danger:hover { background: var(--dk-danger-bg); border-color: var(--dk-danger); }

/* Dark — special emphasis on light toolbar (e.g. Copy) */
.dk-btn-dark {
    background: var(--dk-dark);
    border-color: var(--dk-dark);
    color: #fff;
}
.dk-btn-dark:hover { background: #404040; border-color: #404040; }

/* Ghost — minimal, for pane label actions */
.dk-btn-ghost {
    height: 26px;
    padding: 0 .5rem;
    font-size: .72rem;
    border: 1px solid transparent;
    border-radius: var(--dk-radius-sm);
    background: transparent;
    color: var(--dk-text-on-dark-muted);
}
.dk-btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; border-color: transparent; }
.dk-btn-ghost.dk-btn-icon { width: 26px; min-width: 26px; padding: 0; }

/* Toolbar separator */
.dk-sep {
    width: 1px;
    height: 24px;
    background: var(--dk-border);
    margin: 0 .25rem;
    flex-shrink: 0;
}

/* Select — matches button height */
.dk-select {
    height: var(--dk-btn-h);
    padding: 0 .5rem;
    font-family: var(--dk-font);
    font-size: .83rem;
    border: 1px solid var(--dk-border-strong);
    border-radius: var(--dk-radius);
    background: var(--dk-surface);
    color: var(--dk-text);
    cursor: pointer;
}


/* Ensure I-beam cursor on all text-input fields (some themes/extensions override) */
input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
textarea {
    cursor: text;
}

/* Meta text in toolbar (word count etc) — fixed min-width to prevent jitter */
.dk-meta {
    font-size: .78rem;
    color: var(--dk-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════
   PANE — split editor/preview layout
   ════════════════════════════════════════════ */
.dk-split {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.dk-pane {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.dk-pane.pane-expanded  { flex: 1 1 100% !important; }
.dk-pane.pane-collapsed {
    flex: 0 0 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    border: none !important;
}

/* Pane label — single dark header style everywhere */
.dk-pane-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    background: var(--dk-dark);
    color: var(--dk-text-on-dark-muted);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 0 .75rem;
    min-height: 32px;
    flex-shrink: 0;
    user-select: none;
}
.dk-pane-label-actions { display: flex; align-items: center; gap: .25rem; }

/* ════════════════════════════════════════════
   SPLITTER — drag handle
   ════════════════════════════════════════════ */
.dk-splitter {
    width: 5px;
    background: var(--dk-border);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background .15s;
}
.dk-splitter:hover { background: var(--dk-primary); }
.dk-splitter.hidden { display: none !important; }

/* ════════════════════════════════════════════
   STATUS BADGE — Valid / Invalid / Empty
   ════════════════════════════════════════════ */
.dk-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .12rem .5rem;
    border-radius: 10px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .03em;
    flex-shrink: 0;
}
.dk-badge.valid   { background: rgba(95,203,113,.2); color: var(--dk-primary); }
.dk-badge.invalid { background: rgba(220,53,69,.2);  color: var(--dk-danger); }
.dk-badge.empty   { background: rgba(255,255,255,.08); color: var(--dk-text-on-dark-muted); }

/* ════════════════════════════════════════════
   CODE SURFACE — editors & code areas (always dark)
   ════════════════════════════════════════════ */
.dk-code-surface {
    background: var(--dk-code-bg);
    color: var(--dk-code-fg);
    font-family: var(--dk-mono);
}

/* ════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════ */
.dk-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--dk-dark);
    color: #fff;
    padding: .65rem 1.1rem;
    border-radius: var(--dk-radius);
    font-family: var(--dk-font);
    font-size: .85rem;
    font-weight: 600;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s, transform .2s;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.dk-toast.show { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════
   STATUS BAR (bottom)
   ════════════════════════════════════════════ */
.dk-statusbar {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 0 1rem;
    min-height: 28px;
    background: var(--dk-surface-2);
    border-top: 1px solid var(--dk-border);
    font-size: .73rem;
    color: var(--dk-text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}


/* ════════════════════════════════════════════
   CODE EDITOR — DevKit CodeMirror theme "dk"
   Use with: CodeMirror(el, { theme: 'dk' })
   Scoped under .cm-s-dk so it beats .cm-s-default specificity.
   ════════════════════════════════════════════ */
.CodeMirror.cm-s-dk {
    height: 100%;
    font-family: var(--dk-mono);
    font-size: .9rem;
    line-height: 1.6;
    background: var(--dk-code-bg);
    color: var(--dk-code-fg);
}
.cm-s-dk .CodeMirror-gutters       { background: var(--dk-code-bg); border-right: 1px solid #313244; }
.cm-s-dk .CodeMirror-linenumber    { color: #5c5f77; }
.cm-s-dk .CodeMirror-cursor        { border-left: 1px solid var(--dk-code-fg); }
.cm-s-dk .CodeMirror-selected               { background: rgba(95,203,113,.20); }
.cm-s-dk.CodeMirror-focused .CodeMirror-selected { background: rgba(95,203,113,.28); }
.cm-s-dk .CodeMirror-line::selection,
.cm-s-dk .CodeMirror-line > span::selection { background: rgba(95,203,113,.28); }

/* Syntax tokens (Catppuccin-like, readable on dark) */
.cm-s-dk .cm-header     { color: var(--dk-primary); font-weight: 700; }
.cm-s-dk .cm-header-1   { font-size: 1.15em; }
.cm-s-dk .cm-quote      { color: #9399b2; font-style: italic; }
.cm-s-dk .cm-link       { color: #74c7ec; }
.cm-s-dk .cm-url        { color: #6c7086; }
.cm-s-dk .cm-strong     { color: #f9e2af; font-weight: 700; }
.cm-s-dk .cm-em         { color: #f9e2af; font-style: italic; }
.cm-s-dk .cm-comment    { color: #6c7086; }
.cm-s-dk .cm-string     { color: #a6e3a1; }
.cm-s-dk .cm-string-2   { color: #a6e3a1; }
.cm-s-dk .cm-keyword    { color: #cba6f7; }
.cm-s-dk .cm-atom       { color: #fab387; }
.cm-s-dk .cm-def        { color: #89b4fa; }
.cm-s-dk .cm-variable,
.cm-s-dk .cm-variable-2 { color: var(--dk-code-fg); }
.cm-s-dk .cm-variable-3 { color: #94e2d5; }
.cm-s-dk .cm-number     { color: #fab387; }
.cm-s-dk .cm-property   { color: #89dceb; }
.cm-s-dk .cm-tag        { color: #f38ba8; }
.cm-s-dk .cm-attribute  { color: #fab387; }
.cm-s-dk .cm-meta       { color: #9399b2; }
.cm-s-dk .cm-builtin    { color: #cba6f7; }
.cm-s-dk .cm-bracket    { color: #9399b2; }
.cm-s-dk .cm-hr         { color: #585b70; }

/* Dark scrollbar inside CodeMirror */
.cm-s-dk .CodeMirror-vscrollbar::-webkit-scrollbar,
.cm-s-dk .CodeMirror-hscrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.cm-s-dk .CodeMirror-vscrollbar::-webkit-scrollbar-thumb,
.cm-s-dk .CodeMirror-hscrollbar::-webkit-scrollbar-thumb { background: #3a3a4a; border-radius: 4px; }
.cm-s-dk .CodeMirror-vscrollbar::-webkit-scrollbar-thumb:hover,
.cm-s-dk .CodeMirror-hscrollbar::-webkit-scrollbar-thumb:hover { background: var(--dk-primary); }

/* ════════════════════════════════════════════
   PAGE LAYOUT — card-based tool pattern
   Used by tools that aren't editor-style (regex-tester, unix-timestamp, …)
   ════════════════════════════════════════════ */
.dk-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--dk-font);
    background: var(--dk-surface-3);
    color: var(--dk-text);
}
.dk-page-content {
    flex: 1;
    width: 100%;
    max-width: var(--dk-content-max);
    margin: 0 auto;
    padding: var(--dk-content-pad);
    display: flex;
    flex-direction: column;
    gap: var(--dk-content-gap);
}

/* ════════════════════════════════════════════
   CARD — content card (header + body)
   ════════════════════════════════════════════ */
.dk-card {
    background: var(--dk-surface);
    border: 1px solid var(--dk-border);
    border-radius: 10px;
    overflow: hidden;
}
.dk-card-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--dk-surface-2);
    border-bottom: 1px solid var(--dk-border);
    padding: .6rem 1.25rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dk-text-muted);
}
.dk-card-header .dk-meta {
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.dk-card-body { padding: 1.25rem; }

/* ════════════════════════════════════════════
   INPUT — text/number/date input (matches button height)
   Use with: <input class="dk-input" …>
   ════════════════════════════════════════════ */
.dk-input {
    height: var(--dk-btn-h);
    padding: 0 .65rem;
    font-family: var(--dk-mono);
    font-size: .88rem;
    border: 1px solid var(--dk-border-strong);
    border-radius: var(--dk-radius);
    background: var(--dk-surface);
    color: var(--dk-text);
    transition: border-color .15s;
}
.dk-input:focus  { outline: none; border-color: var(--dk-primary); }
.dk-input.error  { border-color: var(--dk-danger); }
/* date/number inputs get default cursor (native picker) */
.dk-input[type="date"],
.dk-input[type="number"] { cursor: default; }

/* ════════════════════════════════════════════
   TABS — horizontal tab strip + content panel
   Used by tools that need to switch between reference panels
   (regex-tester: Per-line / Library / Code / Cheatsheet)
   ════════════════════════════════════════════ */
.dk-tabs {
    display: flex;
    background: var(--dk-surface-2);
    border-top: 1px solid var(--dk-border);
    border-bottom: 1px solid var(--dk-border);
    flex-shrink: 0;
    overflow-x: auto;
}
.dk-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .9rem;
    height: 36px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--dk-text-muted);
    cursor: pointer;
    user-select: none;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: color .12s, border-color .12s;
    white-space: nowrap;
}
.dk-tab:hover { color: var(--dk-text); }
.dk-tab.active {
    color: var(--dk-text);
    border-bottom-color: var(--dk-primary);
    background: var(--dk-surface);
}
.dk-tab i { font-size: .8rem; }
.dk-tab-count {
    background: var(--dk-primary);
    color: #fff;
    font-size: .68rem;
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}
.dk-tab.active .dk-tab-count { background: var(--dk-primary); }

.dk-tab-content {
    background: var(--dk-surface);
    flex: 1;
    min-height: 0;
    overflow: auto;
}
.dk-tab-panel { display: none; padding: 1.25rem; }
.dk-tab-panel.active { display: block; }

/* ════════════════════════════════════════════
   SITE FOOTER
   ════════════════════════════════════════════ */
.dk-footer {
    text-align: center;
    padding: 1.25rem;
    color: var(--dk-text-muted);
    font-size: .8rem;
    border-top: 1px solid var(--dk-border);
    background: var(--dk-surface);
}