*{box-sizing:border-box}

/* ══════════════════════════════════════════════════════════════
   Theme tokens — dark default, light override via body.k-light
   ══════════════════════════════════════════════════════════════ */
:root {
    /* Global SVG text */
    --layout-text:              #94a3b8;

    /* Area labels */
    --layout-area-text:         rgba(255, 255, 255, 0.75);

    /* Building area */
    --layout-building-fill:     rgba(148, 163, 184, 0.2);
    --layout-building-stroke:   rgba(148, 163, 184, 1);

    /* Inactive */
    --layout-inactive-from:     #1e293b;
    --layout-inactive-to:       #0f172a;
    --layout-inactive-stroke:   #334155;
    --layout-inactive-text:     #475569;

    /* Idle */
    --layout-idle-from:         #1d4ed8;
    --layout-idle-to:           #1e3a8a;
    --layout-idle-stroke:       #3b82f6;
    --layout-idle-text:         #93c5fd;

    /* Pending */
    --layout-pending-from:      #b91c1c;
    --layout-pending-to:        #7f1d1d;
    --layout-pending-stroke:    #ef4444;
    --layout-pending-text:      #fca5a5;

    /* Delivering */
    --layout-delivering-from:   #16a34a;
    --layout-delivering-to:     #14532d;
    --layout-delivering-stroke: #22c55e;
    --layout-delivering-text:   #86efac;

    /* Paid */
    --layout-paid-from:         #d97706;
    --layout-paid-to:           #78350f;
    --layout-paid-stroke:       #f59e0b;
    --layout-paid-text:         #fcd34d;

    /* Expander (layout editor) */
    --layout-expander-fill:     #1e293b;
    --layout-expander-stroke:   #475569;
}

body.k-light {
    --layout-text:              #475569;
    --layout-area-text:         rgba(15, 23, 42, 0.75);
    --layout-building-fill:     rgba(71, 85, 105, 0.1);
    --layout-building-stroke:   rgba(71, 85, 105, 1);

    --layout-inactive-from:     #bdc7c7;
    --layout-inactive-to:       #f2f1f9;
    --layout-inactive-stroke:   #94a3b8;
    --layout-inactive-text:     #64748b;

    --layout-idle-from:         #bfdbfe;
    --layout-idle-to:           #dbeafe;
    --layout-idle-stroke:       #2563eb;
    --layout-idle-text:         #1d4ed8;

    --layout-pending-from:      #fecaca;
    --layout-pending-to:        #fee2e2;
    --layout-pending-stroke:    #dc2626;
    --layout-pending-text:      #b91c1c;

    --layout-delivering-from:   #bbf7d0;
    --layout-delivering-to:     #dcfce7;
    --layout-delivering-stroke: #16a34a;
    --layout-delivering-text:   #15803d;

    --layout-paid-from:         #fde68a;
    --layout-paid-to:           #fef3c7;
    --layout-paid-stroke:       #d97706;
    --layout-paid-text:         #92400e;

    --layout-expander-fill:     #e2e8f0;
    --layout-expander-stroke:   #94a3b8;
}

/* ── Area fills — target rect specifically so fill/stroke don't cascade to text ── */
svg .layout-area rect{
    stroke-width: 0;
    transition: stroke-width .2s ease;
}
svg .layout-area rect{
    fill: var(--layout-building-fill);
    stroke: var(--layout-building-stroke);
    stroke-width: .75;
}
svg .layout-area.Bar rect{
    fill: rgb(12, 62, 201);
}
svg .layout-area.WC rect{
    fill: rgb(231, 39, 39);
    stroke-width: 2;
}
svg .layout-area.Kitchen rect{
    fill: rgb(13, 197, 96);
}

/* ── Area text ── */
svg .layout-area text{
    user-select: text;
    font-size: 5px;
    font-weight: 200;
    fill: var(--layout-area-text);
    pointer-events: all;
}

/* ── Global SVG text ── */
svg text{
    user-select: none;
    fill: var(--layout-text);
}

/* ── Table group interaction ── */
svg .layout-table:has(.selected){ cursor: move; }
svg:not(.view-only) .layout-table{ cursor: pointer; }

/* ── Table rect base ── */
svg .layout-table rect{
    stroke-width: 0.5;
    rx: 3px;
}

/* ── Table states ── */
svg .layout-table.table-state-inactive rect{
    fill: url(#grad-inactive);
    stroke: var(--layout-inactive-stroke);
}
svg .layout-table.table-state-idle rect{
    fill: url(#grad-idle);
    stroke: var(--layout-idle-stroke);
}
svg .layout-table.table-state-pending rect{
    fill: url(#grad-pending);
    stroke: var(--layout-pending-stroke);
    stroke-width: 2;
    animation: pending-pulse 1.2s ease-in-out infinite;
}
svg .layout-table.table-state-delivering rect{
    fill: url(#grad-delivering);
    stroke: var(--layout-delivering-stroke);
}
svg .layout-table.table-state-paid rect{
    fill: url(#grad-paid);
    stroke: var(--layout-paid-stroke);
}

/* ── Selected override ── */
svg .layout-table.selected rect{
    stroke: #f87171 !important;
    stroke-width: 0.75 !important;
}

/* ── Table text color per state ── */
svg .layout-table.table-state-inactive text{ fill: var(--layout-inactive-text); }
svg .layout-table.table-state-idle text{ fill: var(--layout-idle-text); }
svg .layout-table.table-state-pending text{ fill: var(--layout-pending-text); }
svg .layout-table.table-state-delivering text{ fill: var(--layout-delivering-text); }
svg .layout-table.table-state-paid text{ fill: var(--layout-paid-text); }

/* ── Expander (layout editor) ── */
svg .expander{
    fill: var(--layout-expander-fill);
    stroke: var(--layout-expander-stroke);
    stroke-width: 1;
    opacity: 1;
}

/* ── Animations ── */
@keyframes pending-pulse{
    0%, 100%{ stroke-width: 2; stroke-opacity: 1; }
    50%{ stroke-width: 4; stroke-opacity: 0.4; }
}

@keyframes pick{
    0%{stroke-width:0}
    25%{stroke-width:1%}
    100%{stroke-width:0}
}

/* ── Drag-over tokens ── */
:root {
    --layout-drag-over-from:    #4c1d95;
    --layout-drag-over-to:      #2e1065;
    --layout-drag-over-stroke:  #a855f7;
    --layout-drag-over-text:    #e9d5ff;
    --layout-drag-over-glow:    rgba(168, 85, 247, 0.55);
}
body.k-light {
    --layout-drag-over-from:    #ede9fe;
    --layout-drag-over-to:      #ddd6fe;
    --layout-drag-over-stroke:  #7c3aed;
    --layout-drag-over-text:    #4c1d95;
    --layout-drag-over-glow:    rgba(124, 58, 237, 0.35);
}

/* ── Drag-over state (overrides all table states) ── */
svg .layout-table.drag-over rect {
    fill: var(--layout-drag-over-from) !important;
    stroke: var(--layout-drag-over-stroke) !important;
    stroke-width: 2.5 !important;
    filter: drop-shadow(0 0 8px var(--layout-drag-over-glow));
    animation: drag-over-pulse 0.7s ease-in-out infinite !important;
}
svg .layout-table.drag-over text {
    fill: var(--layout-drag-over-text) !important;
}

@keyframes drag-over-pulse {
    0%, 100% { stroke-width: 2.5; filter: drop-shadow(0 0 6px var(--layout-drag-over-glow)); }
    50%       { stroke-width: 4;   filter: drop-shadow(0 0 16px var(--layout-drag-over-glow)); }
}