/* panelcore.css — admin/backoffice skin (child) — load AFTER core.css
   Goal: same markup contract, slightly "tool/app" vibe vs front-office.

   NOTE:
   - This file is panel-scoped via: html[data-area="panel"] { ... }
   - Notice taxonomy aligned with blocks-core.css: info|success|warn|danger
*/

html[data-area="panel"] {
    /* panel accent (kept subtle) */
    --panel-accent: #5b6cff;
    --panel-accent-weak: rgba(91, 108, 255, 0.12);

    /* surfaces */
    --panel-bg: #f6f7fb;
    --panel-surface: #ffffff;
    --panel-surface-2: #f1f3f9;

    /* borders/shadows */
    --panel-border: rgba(17, 17, 17, 0.12);
    --panel-shadow: 0 6px 20px rgba(17, 17, 17, 0.08);

    /* text tweaks */
    --panel-fg: var(--fg);
    --panel-muted: rgba(17, 17, 17, 0.60);

    /* controls */
    --ctl-h: 38px;
    --ctl-radius: 10px;
    --ctl-pad-x: 12px;
    --ctl-focus: 0 0 0 3px var(--panel-accent-weak);
}

/* A) Panel "environment" */
html[data-area="panel"] body {
    background: var(--panel-bg);
    color: var(--panel-fg);

    background-image: repeating-linear-gradient(
            90deg,
            rgba(0, 6, 90, 0.040) 0,
            rgba(0, 6, 90, 0.040) 1px,
            transparent 1px,
            transparent 4px
    );
}

/* header/footer chrome */
html[data-area="panel"] .site-header {
    background: var(--panel-surface);
    border-bottom: 1px solid var(--panel-border);
}
html[data-area="panel"] .site-inner { padding: 22px 0; }
html[data-area="panel"] .site-footer {
    border-top: 1px solid var(--panel-border);
    color: var(--panel-muted);
}

/* Breadcrumb slightly stronger */
html[data-area="panel"] .breadcrumb { color: var(--panel-muted); }

/* B) Doc card look */
html[data-area="panel"] .doc.doc--page,
html[data-area="panel"] .doc.doc--post,
html[data-area="panel"] .list,
html[data-area="panel"] .error {
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    box-shadow: var(--panel-shadow);
    padding: 16px 16px;
}

html[data-area="panel"] .doc__header { margin-bottom: 12px; }
html[data-area="panel"] .doc__title { letter-spacing: 0.2px; }

/* utility (panel tuned) */
html[data-area="panel"] .muted { color: var(--panel-muted); }

/* C) Links + current marker */
html[data-area="panel"] a { text-underline-offset: 3px; }
html[data-area="panel"] a:hover { text-decoration: underline; }

html[data-area="panel"] .nav__link.is-current {
    text-decoration: none;
    position: relative;
}
html[data-area="panel"] .nav__link.is-current::after {
    content: "";
    position: absolute;
    left: var(--nav-px);
    right: var(--nav-px);
    bottom: 10px;
    height: 2px;
    border-radius: 99px;
    background: var(--panel-accent);
    opacity: 0.9;
}

/* D) Forms */
html[data-area="panel"] label {
    font-weight: 600;
    font-size: 0.95rem;
}

/* exclude hidden inputs */
html[data-area="panel"] input:not([type="hidden"]),
html[data-area="panel"] textarea,
html[data-area="panel"] select {
    width: 100%;
    font-family: var(--font);
    font-size: 1rem;
    color: var(--panel-fg);

    background: var(--panel-surface-2);
    border: 1px solid var(--panel-border);
    border-radius: var(--ctl-radius);

    padding: 10px var(--ctl-pad-x);
    min-height: var(--ctl-h);

    outline: none;
}

html[data-area="panel"] textarea {
    min-height: 140px;
    resize: vertical;
}

html[data-area="panel"] input:not([type="hidden"]):focus,
html[data-area="panel"] textarea:focus,
html[data-area="panel"] select:focus {
    border-color: rgba(91, 108, 255, 0.55);
    box-shadow: var(--ctl-focus);
    background: #fff;
}

/* spacing helper inside your existing <p> blocks */
html[data-area="panel"] form p { margin-bottom: 14px; }

/* panel separators */
html[data-area="panel"] hr {
    border: 0;
    border-top: 1px solid var(--panel-border);
    margin: 14px 0;
}

/* Small panel helpers (opt-in)
   Rule:
   - .panel-box     = semantic container (card-like group)
   - .panel-section = logical subdivision (lighter, no shadow)
   - .panel-toolbar = actions row
   - .panel-help    = explanation text
*/
html[data-area="panel"] .panel-box {
    padding: 12px;
    background: var(--panel-surface);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: none;
}

html[data-area="panel"] .panel-section {
    margin-top: 10px;
    padding: 12px;
    background: var(--panel-surface-2);
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    box-shadow: none;
}

html[data-area="panel"] .panel-help { margin-top: 0; }

html[data-area="panel"] .is-hidden { display: none; }

/* E) Buttons */
html[data-area="panel"] button,
html[data-area="panel"] input[type="submit"] {
    appearance: none;
    border: 1px solid rgba(91, 108, 255, 0.35);
    background: var(--panel-accent);
    color: #fff;

    font-family: var(--font);
    font-weight: 700;
    font-size: 0.98rem;

    min-height: var(--ctl-h);
    padding: 0 14px;
    border-radius: 12px;

    cursor: pointer;
    box-shadow: 0 8px 18px rgba(91, 108, 255, 0.18);
}

html[data-area="panel"] button:hover,
html[data-area="panel"] input[type="submit"]:hover { filter: brightness(0.98); }

html[data-area="panel"] button:active,
html[data-area="panel"] input[type="submit"]:active { transform: translateY(1px); }

html[data-area="panel"] button:focus-visible,
html[data-area="panel"] input[type="submit"]:focus-visible {
    outline: none;
    box-shadow: var(--ctl-focus), 0 8px 18px rgba(91, 108, 255, 0.18);
}

/* Secondary button (opt-in) */
html[data-area="panel"] .button--secondary {
    background: var(--panel-surface);
    color: var(--panel-fg);
    border-color: var(--panel-border);
    box-shadow: none;
}
html[data-area="panel"] .button--secondary:hover { background: var(--panel-surface-2); }

/* F) Toolbar row */
html[data-area="panel"] .panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;

    background: rgba(91, 108, 255, 0.06);
    border: 1px solid rgba(91, 108, 255, 0.18);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

/* G) Lists */
html[data-area="panel"] ul { padding-left: 18px; }
html[data-area="panel"] li { margin: 6px 0; }

html[data-area="panel"] .item-list { list-style: none; padding-left: 0; margin: 0; }
html[data-area="panel"] .item-list .item {
    border: 1px solid var(--panel-border);
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    margin: 10px 0;
}
html[data-area="panel"] .item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}
html[data-area="panel"] .item-title { font-weight: 700; }
html[data-area="panel"] .item-meta {
    font-size: 0.9rem;
    color: var(--panel-muted);
}

/* H) Notices (taxonomy aligned with blocks-core.css) */
html[data-area="panel"] .notice {
    border-radius: 12px;
    border: 1px solid var(--panel-border);
    padding: 10px 12px;
    margin: 10px 0;
    background: #fff;
}

html[data-area="panel"] .notice--info {
    border-color: rgba(91, 108, 255, 0.25);
    background: rgba(91, 108, 255, 0.06);
}
html[data-area="panel"] .notice--success {
    border-color: rgba(46, 160, 67, 0.30);
    background: rgba(46, 160, 67, 0.08);
}
html[data-area="panel"] .notice--warn {
    border-color: rgba(245, 158, 11, 0.35);
    background: rgba(245, 158, 11, 0.10);
}
html[data-area="panel"] .notice--danger {
    border-color: rgba(220, 38, 38, 0.35);
    background: rgba(220, 38, 38, 0.08);
}

/* I) Small code blocks */
html[data-area="panel"] code {
    background: rgba(17, 17, 17, 0.06);
    padding: 2px 6px;
    border-radius: 8px;
}

/* J) Narrow screens */
@media (max-width: 520px) {
    html[data-area="panel"] .doc.doc--page,
    html[data-area="panel"] .doc.doc--post,
    html[data-area="panel"] .list,
    html[data-area="panel"] .error { padding: 14px 12px; }

    html[data-area="panel"] .item-row {
        flex-direction: column;
        align-items: flex-start;
    }
}