/**
 * Brutal Blocks: Code Block Styles
 * Zero dependencies. Custom PHP highlighter support.
 * Zebra striping, synchronized editor gutters, and VS Code semantics.
 *
 * Token variable reference (all themes must define every variable below):
 *  --bbt-token-keyword    Primary keywords  (var, const, class, function…)
 *  --bbt-token-keyword2   Control flow      (if, for, return, throw…)
 *  --bbt-token-function   Function names
 *  --bbt-token-string     String literals
 *  --bbt-token-comment    Comments
 *  --bbt-token-number     Numbers, hex colors, units
 *  --bbt-token-variable   Variables ($var, --prop, $bash)
 *  --bbt-token-type       Type annotations, class names, interfaces
 *  --bbt-token-builtin    Built-ins, globals, superglobals
 *  --bbt-token-property   Object properties, HTML attributes, CSS props
 *  --bbt-token-selector   CSS selectors (.class, #id, :pseudo)
 *  --bbt-token-tag        HTML/JSX tags
 *  --bbt-token-regex      Regex literals
 *
 * @package BrutalBlocks
 */

/* =============================================================================
   DEFAULT THEME — VS Code Dark+ (exact match)
   ============================================================================= */
.bbt-code-wrapper,
.bbt-code-editor-wrapper {

    /* UI chrome */
    --bbt-code-bg:         #1e1e1e;
    --bbt-code-text:       #d4d4d4;
    --bbt-code-header-bg:  #2d2d2d;
    --bbt-code-accent:     #3e3e3e;
    --bbt-code-highlight:  rgba(99, 102, 241, 0.2);
    --bbt-code-number:     #858585;
    --bbt-code-zebra:      rgba(255, 255, 255, 0.03);

    /* Syntax tokens — VS Code Dark+ */
    --bbt-token-keyword:   #569cd6;   /* Blue         — var, const, class      */
    --bbt-token-keyword2:  #c586c0;   /* Purple       — if, for, return        */
    --bbt-token-function:  #dcdcaa;   /* Yellow       — function names         */
    --bbt-token-string:    #ce9178;   /* Orange       — string literals        */
    --bbt-token-comment:   #6a9955;   /* Green        — comments               */
    --bbt-token-number:    #b5cea8;   /* Light green  — numbers                */
    --bbt-token-variable:  #9cdcfe;   /* Light blue   — $var, --prop           */
    --bbt-token-type:      #4ec9b0;   /* Teal         — types, class names     */
    --bbt-token-builtin:   #4ec9b0;   /* Teal         — console, Array…        */
    --bbt-token-property:  #9cdcfe;   /* Light blue   — obj.prop, attr=        */
    --bbt-token-selector:  #d7ba7d;   /* Gold         — .class, #id, :hover    */
    --bbt-token-tag:       #f44747;   /* Red          — <div>, </span>         */
    --bbt-token-regex:     #d16969;   /* Muted red    — /pattern/flags         */

    width: 100%;
    margin-bottom: 2rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* =============================================================================
   LIGHT THEME — GitHub Light
   ============================================================================= */
.bbt-theme-light {

    --bbt-code-bg:         #f8f9fa;
    --bbt-code-text:       #24292e;
    --bbt-code-header-bg:  #e1e4e8;
    --bbt-code-accent:     #d1d5da;
    --bbt-code-highlight:  rgba(3, 102, 214, 0.15);
    --bbt-code-number:     #babbbd;
    --bbt-code-zebra:      rgba(0, 0, 0, 0.03);

    /* GitHub Light syntax */
    --bbt-token-keyword:   #d73a49;   /* Red          — keywords               */
    --bbt-token-keyword2:  #d73a49;   /* Red          — control flow           */
    --bbt-token-function:  #6f42c1;   /* Purple       — function names         */
    --bbt-token-string:    #032f62;   /* Dark blue    — strings                */
    --bbt-token-comment:   #6a737d;   /* Gray         — comments               */
    --bbt-token-number:    #005cc5;   /* Blue         — numbers                */
    --bbt-token-variable:  #e36209;   /* Orange       — variables              */
    --bbt-token-type:      #6f42c1;   /* Purple       — types, class names     */
    --bbt-token-builtin:   #005cc5;   /* Blue         — built-ins              */
    --bbt-token-property:  #e36209;   /* Orange       — properties             */
    --bbt-token-selector:  #22863a;   /* Green        — CSS selectors          */
    --bbt-token-tag:       #22863a;   /* Green        — HTML tags              */
    --bbt-token-regex:     #032f62;   /* Dark blue    — regex literals         */
}

/* =============================================================================
   TERMINAL THEME — Classic green-on-black phosphor
   ============================================================================= */
.bbt-theme-terminal {

    --bbt-code-bg:         #0d0d0d;
    --bbt-code-text:       #00ff00;
    --bbt-code-header-bg:  #1a1a1a;
    --bbt-code-accent:     #333333;
    --bbt-code-highlight:  rgba(0, 255, 0, 0.15);
    --bbt-code-number:     #006600;
    --bbt-code-zebra:      rgba(0, 255, 0, 0.03);

    /* Terminal: intentionally monochromatic, brightness carries semantic weight */
    --bbt-token-keyword:   #00ff00;   /* Bright green  — keywords              */
    --bbt-token-keyword2:  #00ff00;   /* Bright green  — control flow          */
    --bbt-token-function:  #00ff00;   /* Bright green  — function names        */
    --bbt-token-string:    #00aa00;   /* Mid green     — strings               */
    --bbt-token-comment:   #005500;   /* Dark green    — comments              */
    --bbt-token-number:    #00ff00;   /* Bright green  — numbers               */
    --bbt-token-variable:  #00ff00;   /* Bright green  — variables             */
    --bbt-token-type:      #00cc00;   /* Mid-bright    — types                 */
    --bbt-token-builtin:   #00cc00;   /* Mid-bright    — built-ins             */
    --bbt-token-property:  #00aa00;   /* Mid green     — properties            */
    --bbt-token-selector:  #00dd00;   /* Near-bright   — selectors             */
    --bbt-token-tag:       #00ff00;   /* Bright green  — tags                  */
    --bbt-token-regex:     #00aa00;   /* Mid green     — regex                 */
}

/* =============================================================================
   MIDNIGHT THEME — Material Oceanic
   ============================================================================= */
.bbt-theme-midnight {

    --bbt-code-bg:         #0f172a;
    --bbt-code-text:       #f8fafc;
    --bbt-code-header-bg:  #1e293b;
    --bbt-code-accent:     #334155;
    --bbt-code-highlight:  rgba(56, 189, 248, 0.2);
    --bbt-code-number:     #475569;
    --bbt-code-zebra:      rgba(255, 255, 255, 0.02);

    /* Material Oceanic syntax */
    --bbt-token-keyword:   #c792ea;   /* Lavender     — keywords               */
    --bbt-token-keyword2:  #89ddff;   /* Cyan         — control flow           */
    --bbt-token-function:  #82aaff;   /* Blue         — function names         */
    --bbt-token-string:    #ecc48d;   /* Amber        — strings                */
    --bbt-token-comment:   #637777;   /* Slate        — comments               */
    --bbt-token-number:    #f78c6c;   /* Peach        — numbers                */
    --bbt-token-variable:  #f07178;   /* Salmon       — variables              */
    --bbt-token-type:      #ffcb6b;   /* Gold         — types, class names     */
    --bbt-token-builtin:   #89ddff;   /* Cyan         — built-ins              */
    --bbt-token-property:  #f07178;   /* Salmon       — properties             */
    --bbt-token-selector:  #c3e88d;   /* Lime         — CSS selectors          */
    --bbt-token-tag:       #f07178;   /* Salmon       — HTML tags              */
    --bbt-token-regex:     #89ddff;   /* Cyan         — regex literals         */
}

/* =============================================================================
   WINDOW STRUCTURE
   ============================================================================= */
.bbt-code-window {
    background:    var(--bbt-code-bg);
    color:         var(--bbt-code-text);
    border-radius: 12px;
    border:        1px solid var(--bbt-code-header-bg);
    overflow:      hidden;
    box-shadow:    0 10px 30px rgba(0, 0, 0, 0.15);
    position:      relative;
}

/* Header bar */
.bbt-code-header {
    background:    var(--bbt-code-header-bg);
    padding:       12px 16px;
    display:       flex;
    align-items:   center;
    gap:           16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bbt-code-dots { display: flex; gap: 8px; }
.bbt-dot {
    width:         12px;
    height:        12px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.2);
}

/* macOS-style traffic lights on dark and light themes */
.bbt-theme-dark .bbt-dot:nth-child(1),
.bbt-theme-light .bbt-dot:nth-child(1) { background: #ff5f56; }
.bbt-theme-dark .bbt-dot:nth-child(2),
.bbt-theme-light .bbt-dot:nth-child(2) { background: #ffbd2e; }
.bbt-theme-dark .bbt-dot:nth-child(3),
.bbt-theme-light .bbt-dot:nth-child(3) { background: #27c93f; }

.bbt-code-filename {
    flex-grow:   1;
    text-align:  center;
    font-size:   13px;
    font-weight: 600;
    opacity:     0.8;
}

.bbt-code-lang-badge {
    font-size:      10px;
    font-weight:    800;
    background:     rgba(0, 0, 0, 0.2);
    padding:        2px 8px;
    border-radius:  4px;
    opacity:        0.6;
    text-transform: uppercase;
}

/* =============================================================================
   FRONTEND: ZEBRA STRIPING & LINE LAYOUT
   ============================================================================= */
.bbt-code-body {
    padding:    16px 0;
    overflow-x: auto;
    font-size:  14px;
    line-height: 1.6;
}

.bbt-code-line {
    display:   flex;
    width:     100%;
    min-width: max-content;
}

.bbt-code-line:nth-child(even) {
    background-color: var(--bbt-code-zebra);
}

.bbt-code-line.is-highlighted {
    background-color: var(--bbt-code-highlight);
    box-shadow: inset 4px 0 0 var(--wp--preset--color--contrast, #6366f1);
}

.bbt-code-line-num {
    width:        50px;
    min-width:    50px;
    text-align:   right;
    padding-right: 15px;
    margin-right: 15px;
    color:        var(--bbt-code-number);
    border-right: 1px solid var(--bbt-code-accent);
    user-select:  none;
    opacity:      0.7;
}

.bbt-code-line-content {
    white-space:   pre;
    padding-right: 20px;
}

/* =============================================================================
   SYNTAX TOKEN CLASSES
   Every class maps to its theme variable. bbt-tk-imp is hardcoded — it must
   always scream regardless of theme, because !important in CSS causes real bugs.
   ============================================================================= */
.bbt-tk-kw   { color: var(--bbt-token-keyword);  font-weight: bold; }
.bbt-tk-kw2  { color: var(--bbt-token-keyword2); font-weight: bold; }
.bbt-tk-fn   { color: var(--bbt-token-function); }
.bbt-tk-str  { color: var(--bbt-token-string); }
.bbt-tk-cm   { color: var(--bbt-token-comment);  font-style: italic; }
.bbt-tk-nu   { color: var(--bbt-token-number); }
.bbt-tk-var  { color: var(--bbt-token-variable); }
.bbt-tk-type { color: var(--bbt-token-type); }
.bbt-tk-bi   { color: var(--bbt-token-builtin); }
.bbt-tk-prop { color: var(--bbt-token-property); }
.bbt-tk-sel  { color: var(--bbt-token-selector); }
.bbt-tk-tag  { color: var(--bbt-token-tag); }
.bbt-tk-rx   { color: var(--bbt-token-regex); }
.bbt-tk-imp  { color: #ff5f56; font-weight: bold; } /* !important — always red, always bold */

/* =============================================================================
   COPY BUTTON (PRO)
   ============================================================================= */
.bbt-code-copy {
    position:       absolute;
    top:            60px;
    right:          12px;
    background:     var(--bbt-code-header-bg);
    color:          var(--bbt-code-text);
    border:         1px solid var(--bbt-code-accent);
    padding:        6px 10px;
    border-radius:  6px;
    cursor:         pointer;
    opacity:        0;
    transition:     all 0.2s ease;
    z-index:        20;
    display:        flex;
    align-items:    center;
    justify-content: center;
    min-width:      32px;
}

.bbt-code-window:hover .bbt-code-copy { opacity: 0.8; }
.bbt-code-copy:hover  { opacity: 1; transform: scale(1.05); }
.bbt-code-copy:active { transform: scale(0.95); }

.bbt-code-copy.copied {
    background:   #27c93f;
    color:        #000;
    border-color: #27c93f;
    opacity:      1;
    transform:    none;
}

/* =============================================================================
   EDITOR LAYOUT — synced gutter + textarea (Gutenberg canvas)
   ============================================================================= */
.bbt-code-editor-layout {
    display:    flex;
    position:   relative;
    background: var(--bbt-code-bg);
    height:     350px;
}

.bbt-code-gutter {
    padding:        20px 0;
    border-right:   1px solid var(--bbt-code-accent);
    overflow:       hidden;
    user-select:    none;
    min-width:      3.5em;
    background:     var(--bbt-code-bg);
    display:        flex;
    flex-direction: column;
}

.bbt-line-num-clickable {
    color:       var(--bbt-code-number);
    font-size:   14px;
    line-height: 1.6;
    padding:     0 15px 0 10px;
    text-align:  right;
    transition:  background 0.2s, color 0.2s;
}

.bbt-line-num-clickable:hover {
    color:      #fff;
    background: rgba(255, 255, 255, 0.1);
}

.bbt-line-num-clickable.is-highlighted {
    color:       var(--wp--preset--color--contrast, #6366f1);
    font-weight: bold;
    background:  var(--bbt-code-highlight);
}

.bbt-code-textarea {
    flex-grow:      1;
    background:     transparent  !important;
    color:          var(--bbt-code-text) !important;
    border:         none         !important;
    padding:        20px         !important;
    font-family:    inherit      !important;
    font-size:      14px         !important;
    line-height:    1.6          !important;
    resize:         none         !important;
    outline:        none         !important;
    white-space:    pre          !important;
    word-wrap:      normal       !important;
    overflow-wrap:  normal       !important;
    overflow-x:     auto         !important;
    overflow-y:     auto         !important;
}