/* ═══════════════════════════════════════════════════════════════
   Storzen Framework  v3.0  —  Admin Styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
.sz-wrap {
    --sz-accent:       #5b4fff;
    --sz-accent-dark:  #4338e0;
    --sz-accent-soft:  #ede9ff;
    --sz-pro:          #f97316;
    --sz-bg:           #f4f5f7;
    --sz-surface:      #ffffff;
    --sz-border:       #e5e3de;
    --sz-text:         #1a1a1a;
    --sz-muted:        #7a7870;
    --sz-radius:       12px;
    --sz-radius-sm:    8px;
    --sz-shadow:       0 1px 3px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.06);
    --sz-toggle-off:   #d4d1cb;
    --sz-t:            .15s ease;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0 !important;
    background: var(--sz-bg);
    min-height: 100vh;
}

.sz-wrap .wp-heading-inline,
.sz-wrap > h1:first-child { display: none !important; }

/* ── Banner ──────────────────────────────────────────────────── */
.sz-banner {
    background: linear-gradient(90deg,#1e1b4b,#312e81);
    color: #c7d2fe;
    font-size: .8rem;
    padding: .5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.sz-banner strong { color:#fff }
.sz-banner__btn {
    margin-left: auto;
    background: var(--sz-accent);
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    padding: .3rem .85rem;
    font-size: .75rem;
    font-weight: 600;
    transition: opacity var(--sz-t);
    white-space: nowrap;
}
.sz-banner__btn:hover { opacity:.85 }
.sz-banner__close {
    background: none; border: none; color: #818cf8;
    cursor: pointer; font-size: .95rem; padding: 0 .2rem; line-height:1;
}

/* ── Plugin header ───────────────────────────────────────────── */
.sz-header {
    background: var(--sz-surface);
    border-bottom: 1px solid var(--sz-border);
    padding: .75rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    position: sticky;
    top: 32px;
    z-index: 90;
    box-shadow: 0 1px 0 var(--sz-border);
}
.sz-header__brand {
    font-weight: 700; font-size: .95rem; color: var(--sz-text);
    display: flex; align-items: center; gap: .45rem; white-space: nowrap;
}
.sz-header__dot {
    display: inline-block; width: 8px; height: 8px;
    background: var(--sz-accent); border-radius: 50%; flex-shrink: 0;
}
.sz-header__nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.sz-header__tab {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem 1rem;
    border-radius: var(--sz-radius-sm);
    font-size: .82rem; font-weight: 500;
    color: var(--sz-muted); text-decoration: none;
    border: 1px solid transparent;
    transition: all var(--sz-t);
}
.sz-header__tab:hover { color:var(--sz-text); background:var(--sz-bg) }
.sz-header__tab--active {
    background: var(--sz-accent) !important;
    color: #fff !important;
    border-color: var(--sz-accent) !important;
}
.sz-header__tab-icon { font-size: .9rem; }

/* ── Body ────────────────────────────────────────────────────── */
.sz-body { padding: 1.5rem; }

/* ── Menu bar (title + tab pills + save) ─────────────────────── */
.sz-menubar {
    background: var(--sz-surface);
    border: 1px solid var(--sz-border);
    border-radius: var(--sz-radius) var(--sz-radius) 0 0;
    overflow: hidden;
}
.sz-menubar__top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: 1.1rem 1.75rem;
}
.sz-menubar__info h2 {
    font-size: 1rem !important; font-weight: 600 !important;
    margin: 0 0 .15rem !important; padding: 0 !important;
    border: none !important; color: var(--sz-text) !important;
    display: flex; align-items: center; gap: .4rem;
}
.sz-menubar__info p { font-size:.78rem; color:var(--sz-muted); margin:0 }

/* ── Tab pills ───────────────────────────────────────────────── */
.sz-tab-pills {
    display: flex; flex-wrap: wrap; gap: .35rem;
    padding: 0 1.75rem .9rem;
}
.sz-tab-pill {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .38rem .95rem;
    border-radius: var(--sz-radius-sm);
    border: 1px solid var(--sz-border);
    font-size: .8rem; font-weight: 500;
    color: var(--sz-muted); text-decoration: none;
    transition: all var(--sz-t);
}
.sz-tab-pill:hover { border-color:var(--sz-accent); color:var(--sz-accent) }
.sz-tab-pill--active {
    background: var(--sz-accent) !important;
    border-color: var(--sz-accent) !important;
    color: #fff !important;
}

/* ── Content card ────────────────────────────────────────────── */
.sz-content {
    background: var(--sz-surface);
    border: 1px solid var(--sz-border);
    border-top: none;
    border-radius: 0 0 var(--sz-radius) var(--sz-radius);
    box-shadow: var(--sz-shadow);
    overflow: hidden;
}

/* ── Section shared ──────────────────────────────────────────── */
.sz-section + .sz-section { border-top: 2px solid var(--sz-bg); }
.sz-section__head {
    padding: .8rem 1.75rem .55rem;
    background: var(--sz-bg);
    border-bottom: 1px solid var(--sz-border);
}
.sz-section__label {
    font-size: .7rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--sz-muted); display: block; margin-bottom: .15rem;
}
.sz-section__head p { font-size:.75rem; color:var(--sz-muted); margin:0 }

/* ════════════════════════════════════════════════════════════
   LAYOUT A  — Settings rows
   ════════════════════════════════════════════════════════════ */
.sz-row {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1rem 1.75rem;
    border-bottom: 1px solid var(--sz-border);
    transition: background var(--sz-t);
}
.sz-row:last-child { border-bottom: none }
.sz-row:hover { background: #fafaf9 }
.sz-row--pro { opacity: .8 }
.sz-row--notice { padding: 1rem 1.75rem }

.sz-row__label {
    flex: 1; min-width: 0;
}
.sz-row__label > label {
    display: flex; align-items: center; gap: .4rem;
    font-size: .85rem; font-weight: 600; color: var(--sz-text);
    cursor: pointer; margin: 0;
}
.sz-row__label > p { font-size:.76rem; color:var(--sz-muted); margin:.2rem 0 0; line-height:1.45 }

.sz-row__control {
    flex-shrink: 0;
    display: flex; align-items: center; gap: .5rem;
    min-width: 280px; justify-content: flex-end;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT B  — Grid toggle cards (original widget-manager UI)
   ════════════════════════════════════════════════════════════ */
.sz-section__head--grid {
    display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
    padding: .7rem 1.5rem .5rem;
}
.sz-section__head--grid .sz-section__label { margin-bottom: 0 }

.sz-grid {
    display: grid;
}
.sz-grid--cols-1 { grid-template-columns: repeat(1,1fr) }
.sz-grid--cols-2 { grid-template-columns: repeat(2,1fr) }
.sz-grid--cols-3 { grid-template-columns: repeat(3,1fr) }
.sz-grid--cols-4 { grid-template-columns: repeat(4,1fr) }
.sz-grid--cols-5 { grid-template-columns: repeat(5,1fr) }
.sz-grid--cols-6 { grid-template-columns: repeat(6,1fr) }

/* Grid card */
.sz-card {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem;
    padding: 1rem 1.5rem;
    border-right: 1px solid var(--sz-border);
    border-bottom: 1px solid var(--sz-border);
    position: relative;
    transition: background var(--sz-t);
    min-height: 62px;
}
.sz-card:hover { background: #fafaf9 }

/* Remove right border on last column */
.sz-grid--cols-2 .sz-card:nth-child(2n),
.sz-grid--cols-3 .sz-card:nth-child(3n),
.sz-grid--cols-4 .sz-card:nth-child(4n),
.sz-grid--cols-5 .sz-card:nth-child(5n),
.sz-grid--cols-6 .sz-card:nth-child(6n) { border-right: none }

/* Pro corner ribbon */
.sz-card--pro .sz-card__corner {
    position: absolute; top: 0; left: 0;
    width: 0; height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: var(--sz-pro) transparent transparent transparent;
}

.sz-card__label {
    font-size: .82rem; font-weight: 500; color: var(--sz-text);
    display: flex; align-items: center; gap: .4rem;
    flex: 1; min-width: 0;
}

/* ── Toggle switch ───────────────────────────────────────────── */
.sz-toggle {
    position: relative; display: inline-block;
    width: 40px; height: 22px; flex-shrink: 0; cursor: pointer;
}
.sz-toggle input {
    opacity: 0; width: 0; height: 0; position: absolute; pointer-events: none;
}
.sz-toggle__track {
    position: absolute; inset: 0;
    background: var(--sz-toggle-off); border-radius: 999px;
    transition: background .2s;
}
.sz-toggle__track::before {
    content: ''; position: absolute;
    width: 16px; height: 16px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sz-toggle input:checked + .sz-toggle__track { background: var(--sz-accent) }
.sz-toggle input:checked + .sz-toggle__track::before { transform: translateX(18px) }
.sz-toggle input:disabled + .sz-toggle__track { opacity: .5; cursor: not-allowed }
.sz-toggle--disabled { opacity:.65 }

/* Large toggle for "enable all" controls */
.sz-toggle--lg { width: 50px; height: 26px; }
.sz-toggle--lg .sz-toggle__track::before { width: 20px; height: 20px; }
.sz-toggle--lg input:checked + .sz-toggle__track::before { transform: translateX(24px) }

/* ── Buttons ─────────────────────────────────────────────────── */
.sz-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    border: none; border-radius: var(--sz-radius-sm);
    padding: .52rem 1.3rem; font-size: .82rem; font-weight: 600;
    font-family: inherit; cursor: pointer;
    transition: all var(--sz-t); text-decoration: none;
}
.sz-btn--primary {
    background: var(--sz-accent); color: #fff !important;
    box-shadow: 0 2px 8px rgba(91,79,255,.28);
}
.sz-btn--primary:hover {
    background: var(--sz-accent-dark); transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(91,79,255,.35);
}
.sz-btn--primary:active { transform: none }
.sz-btn--primary.sz-btn--loading { opacity:.6; cursor:not-allowed; transform:none !important }
.sz-btn--outline {
    background: transparent; color: var(--sz-accent);
    border: 2px solid var(--sz-accent);
}
.sz-btn--outline:hover { background: var(--sz-accent-soft) }
.sz-btn--ghost {
    background: transparent; color: var(--sz-muted);
    border: 1px solid var(--sz-border);
}
.sz-btn--ghost:hover { border-color:var(--sz-text); color:var(--sz-text) }
.sz-btn--sm { padding: .3rem .8rem; font-size: .78rem }

/* ── Form inputs ─────────────────────────────────────────────── */
.sz-input,.sz-select,.sz-textarea {
    border: 1px solid var(--sz-border); border-radius: var(--sz-radius-sm);
    padding: .48rem .75rem; font-size:.85rem; font-family:inherit;
    color: var(--sz-text); background: var(--sz-surface);
    transition: border-color var(--sz-t), box-shadow var(--sz-t);
    width: 280px;
}
.sz-input--number { width: 120px; -moz-appearance:textfield }
.sz-input--number::-webkit-inner-spin-button { opacity:1 }
.sz-input:focus,.sz-select:focus,.sz-textarea:focus {
    outline: none; border-color: var(--sz-accent);
    box-shadow: 0 0 0 3px rgba(91,79,255,.12);
}
.sz-select {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%237a7870' stroke-width='2.5' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.2rem;
}
.sz-textarea { width: 100%; max-width: 520px; resize: vertical; line-height: 1.5 }
.sz-input:disabled,.sz-select:disabled,.sz-textarea:disabled { opacity:.45; cursor:not-allowed }

/* Color */
.sz-color-wrap { display:flex; align-items:center; gap:.5rem }
.sz-color-swatch {
    width:36px; height:36px; border:1px solid var(--sz-border);
    border-radius:6px; padding:2px; cursor:pointer; background:none;
}
.sz-color-text { width:110px !important; font-family:monospace }

/* Radio */
.sz-radio-group { display:flex; flex-direction:column; gap:.4rem }
.sz-radio-group--inline { flex-direction:row; flex-wrap:wrap; gap:.4rem }
.sz-radio-btn {
    display:inline-flex; align-items:center; gap:.35rem;
    padding:.35rem .85rem; border:1px solid var(--sz-border);
    border-radius:var(--sz-radius-sm); cursor:pointer; font-size:.82rem;
    font-weight:500; color:var(--sz-muted); transition:all var(--sz-t); margin:0;
}
.sz-radio-btn:hover { border-color:var(--sz-accent); color:var(--sz-accent) }
.sz-radio-btn input { display:none }
.sz-radio-btn:has(input:checked) { background:var(--sz-accent); border-color:var(--sz-accent); color:#fff }

/* Checkbox group */
.sz-checkbox-group { display:flex; flex-direction:column; gap:.4rem }
.sz-checkbox-item {
    display:flex; align-items:center; gap:.5rem;
    font-size:.85rem; cursor:pointer; margin:0;
    color:var(--sz-text);
}
.sz-checkbox-item input[type="checkbox"] { width:15px; height:15px; accent-color:var(--sz-accent); cursor:pointer }

/* Image field */
.sz-image-field {}
.sz-image-preview { margin-bottom:.6rem }
.sz-image-preview img { max-width:160px; max-height:100px; border-radius:6px; border:1px solid var(--sz-border); display:block }
.sz-image-actions { display:flex; gap:.5rem; align-items:center }

/* Notice */
.sz-notice {
    border-radius: var(--sz-radius-sm); padding:.8rem 1.1rem;
    font-size:.85rem; line-height:1.5; border-left:4px solid;
}
.sz-notice p { margin:.3rem 0 0 }
.sz-notice p:first-child { margin-top:0 }
.sz-notice--info    { background:#eff6ff; border-color:#3b82f6; color:#1e3a5f }
.sz-notice--warning { background:#fffbeb; border-color:#f59e0b; color:#78350f }
.sz-notice--success { background:#f0fdf4; border-color:#22c55e; color:#14532d }
.sz-notice--error   { background:#fef2f2; border-color:#ef4444; color:#7f1d1d }

/* Pro badge */
.sz-pro-badge {
    background: var(--sz-pro); color:#fff;
    font-size:.6rem; font-weight:800; padding:1px 5px 2px;
    border-radius:4px; letter-spacing:.03em; vertical-align:middle; flex-shrink:0;
}

/* Pro lock notice (between menubar and tab content) */
.sz-pro-lock-notice {
    display: flex; align-items: center; gap: .6rem;
    padding: .65rem 1.75rem;
    background: linear-gradient(90deg,#fff7ed,#fff);
    border-top: 1px solid #fed7aa;
    font-size: .82rem; color: #9a3412;
    border-left: 3px solid var(--sz-pro);
}
.sz-pro-lock-notice a { color:var(--sz-pro); font-weight:600; text-decoration:none }
.sz-pro-lock-notice a:hover { text-decoration:underline }

/* Toast */
.sz-toast {
    position:fixed; bottom:1.5rem; right:1.5rem;
    background:#1c1917; color:#fafaf9;
    border-radius:10px; padding:.75rem 1.25rem;
    font-size:.82rem; font-weight:500;
    display:flex; align-items:center; gap:.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    transform:translateY(80px); opacity:0; pointer-events:none;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s;
    z-index:99999;
}
.sz-toast--show   { transform:translateY(0)!important; opacity:1!important }
.sz-toast--error .sz-toast__dot { background:#f87171!important }
.sz-toast__dot { width:8px; height:8px; background:#4ade80; border-radius:50%; flex-shrink:0 }

.sz-empty { padding:2rem 1.75rem; color:var(--sz-muted); font-size:.85rem }

/* ── Responsive ──────────────────────────────────────────────── */
@media screen and (max-width:1200px) {
    .sz-grid--cols-4 { grid-template-columns:repeat(3,1fr) }
    .sz-grid--cols-5 { grid-template-columns:repeat(3,1fr) }
    .sz-grid--cols-6 { grid-template-columns:repeat(3,1fr) }
}
@media screen and (max-width:960px) {
    .sz-grid--cols-3,.sz-grid--cols-4,.sz-grid--cols-5,.sz-grid--cols-6 { grid-template-columns:repeat(2,1fr) }
    .sz-row { flex-direction:column; align-items:flex-start; gap:.65rem }
    .sz-row__control { min-width:unset; width:100%; justify-content:flex-start }
    .sz-input,.sz-select { width:100% }
    .sz-input--number { width:120px }
}
@media screen and (max-width:600px) {
    .sz-body { padding:.75rem }
    .sz-header { padding:.6rem 1rem }
    .sz-menubar__top { padding:.85rem 1rem }
    .sz-tab-pills { padding:0 1rem .75rem }
    .sz-card { padding:.85rem 1rem }
    .sz-row { padding:.85rem 1rem }
    .sz-section__head { padding:.65rem 1rem }
    .sz-grid--cols-2,.sz-grid--cols-3,.sz-grid--cols-4 { grid-template-columns:repeat(2,1fr) }
}
