/* ===================================================================
 * Hong Hac Mods — Admin Panel Shell
 * Design tokens + shared component classes for every admin page.
 * Loaded once from admin/header.php. No page logic lives here.
 * =================================================================== */

:root {
    /* Surfaces */
    --panel-bg: #080b11;
    --panel-surface: rgba(17, 23, 38, 0.82);
    --panel-surface-solid: #111726;
    --panel-surface-2: rgba(22, 30, 49, 0.68);
    --panel-inset: #0b1120;

    /* Lines */
    --panel-border: rgba(148, 163, 184, 0.16);
    --panel-border-strong: rgba(148, 163, 184, 0.28);
    --panel-border-brand: rgba(244, 63, 94, 0.22);

    /* Text — all values below hold >= 4.5:1 on --panel-bg */
    --panel-text: #f1f5f9;
    --panel-text-muted: #a7b4c7;
    --panel-text-faint: #8998ad;

    /* Brand + status */
    --panel-brand: #f43f5e;
    --panel-brand-strong: #e11d48;
    --panel-ok: #34d399;
    --panel-warn: #fbbf24;
    --panel-danger: #fb7185;
    --panel-info: #38bdf8;

    /* Layout rhythm */
    --panel-max: 1600px;
    --panel-gutter: 1rem;
    --panel-radius: 1.25rem;
    --panel-radius-sm: 0.75rem;

    /* Motion — subtle tier */
    --panel-motion: 180ms;
    --panel-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
    :root { --panel-gutter: 1.5rem; }
}

@media (min-width: 1280px) {
    :root { --panel-gutter: 2rem; }
}

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--panel-bg);
    background-image:
        radial-gradient(at 0% 0%, rgba(244, 63, 94, 0.10) 0px, transparent 45%),
        radial-gradient(at 100% 100%, rgba(136, 19, 55, 0.10) 0px, transparent 45%),
        radial-gradient(at 50% 50%, rgba(15, 23, 42, 0.9) 0px, transparent 100%);
    background-attachment: fixed;
    color: var(--panel-text);
}

/* Long IDs, keys, hashes and URLs must wrap instead of forcing a scrollbar. */
code, kbd, samp, .panel-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ------------------------------------------------------------------
 * Layout shell — one shared measure for header, main and footer so
 * nothing drifts toward a screen edge on wide monitors.
 * ------------------------------------------------------------------ */

.panel-shell {
    width: 100%;
    max-width: var(--panel-max);
    margin-inline: auto;
    padding-inline: var(--panel-gutter);
}

/* Pages that genuinely need the whole viewport (builder workspaces). */
.panel-shell-wide {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--panel-gutter);
}

.panel-main {
    padding-block: 1.5rem 2.5rem;
}

@media (min-width: 1024px) {
    .panel-main { padding-block: 2rem 3rem; }
}

.catalog-master-detail {
    display: grid !important;
    grid-template-columns: 100% !important;
    gap: 1.25rem !important;
    align-items: start !important;
}

@media (min-width: 1280px) {
    .catalog-master-detail {
        /* fr units preserve the 24/46/30 proportion after subtracting the gap. */
        grid-template-columns: minmax(280px, 24fr) minmax(440px, 46fr) minmax(320px, 30fr) !important;
    }
}

.catalog-unified-tree {
    scrollbar-gutter: stable;
}

.catalog-detail-panel {
    min-width: 0;
}

.catalog-technical-meta {
    display: none !important;
}

.catalog-quick-action {
    display: none !important;
}

.catalog-card-toolbar {
    justify-content: flex-end;
}

.catalog-menu-action {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .65rem;
    border-radius: .65rem;
    color: #cbd5e1;
    font-size: .75rem;
    font-weight: 700;
    text-align: left;
}

.catalog-menu-action:hover {
    background: rgba(51, 65, 85, .6);
    color: #fff;
}

@media (max-width: 1279px) {
    .catalog-detail-panel {
        position: fixed;
        z-index: 45;
        inset: 1rem 1rem 1rem auto;
        width: min(420px, calc(100vw - 2rem));
        transform: translateX(110%);
        transition: transform .2s ease;
    }
    .catalog-detail-panel.is-open {
        transform: translateX(0);
    }
}

/* Skip link for keyboard users on a nav-heavy shell. */
.panel-skip {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 100;
    transform: translateY(-200%);
    border-radius: 0.75rem;
    background: var(--panel-brand-strong);
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    transition: transform var(--panel-motion) var(--panel-ease);
}

.panel-skip:focus-visible {
    transform: translateY(0);
}

/* ------------------------------------------------------------------
 * Surfaces
 * ------------------------------------------------------------------ */

.glass-panel {
    background: var(--panel-surface);
    backdrop-filter: blur(16px);
    border: 1px solid var(--panel-border-brand);
    box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.55);
}

.glass-card {
    background: var(--panel-surface-2);
    backdrop-filter: blur(12px);
    border: 1px solid var(--panel-border);
}

.panel-card {
    background: var(--panel-surface);
    backdrop-filter: blur(14px);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: 0 10px 36px -14px rgba(0, 0, 0, 0.5);
}

.panel-alert {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius-sm);
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.panel-alert-danger {
    border-color: rgba(244, 63, 94, 0.35);
    background: rgba(127, 29, 29, 0.22);
    color: #fda4af;
}

.panel-inset {
    background: var(--panel-inset);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius-sm);
}

/* ------------------------------------------------------------------
 * Page header block — keeps title, description and actions aligned
 * on one baseline instead of each page inventing its own spacing.
 * ------------------------------------------------------------------ */

.panel-page-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

@media (min-width: 1024px) {
    .panel-page-head {
        flex-direction: row;
        align-items: center;
    }
}

.panel-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

@media (min-width: 1024px) {
    .panel-page-actions { justify-content: flex-end; }
}

.panel-eyebrow {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--panel-text-faint);
}

.panel-title {
    font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    line-height: 1.15;
    text-wrap: balance;
}

.panel-subtitle {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--panel-text-muted);
    max-width: 68ch;
}

/* ------------------------------------------------------------------
 * Toolbars — the main cause of controls drifting to the right edge.
 * They now wrap in place instead of being pushed off-axis.
 * ------------------------------------------------------------------ */

.panel-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
}

.panel-toolbar > .panel-toolbar-grow {
    flex: 1 1 16rem;
    min-width: 0;
}

.panel-toolbar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Chip / badge rows wrap rather than truncate meaning. */
.panel-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
}

/* ------------------------------------------------------------------
 * Tables — every wide table gets a scroll container so the page
 * itself never overflows horizontally.
 * ------------------------------------------------------------------ */

.panel-table-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--panel-radius-sm);
}

.panel-table-scroll > table {
    min-width: 48rem;
}

.panel-table-scroll::-webkit-scrollbar,
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.panel-table-scroll::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
    background: #0d131f;
}

.panel-table-scroll::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #33415a;
    border-radius: 999px;
}

.panel-table-scroll::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

.panel-table-scroll,
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #33415a #0d131f;
}

/* ------------------------------------------------------------------
 * Interaction affordances
 * ------------------------------------------------------------------ */

a,
button,
summary,
[role="button"],
label[for],
select,
input[type="checkbox"],
input[type="radio"],
input[type="color"],
input[type="file"] {
    cursor: pointer;
}

button:disabled,
[aria-disabled="true"] {
    cursor: not-allowed;
}

input[type="text"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
textarea {
    cursor: text;
}

/* One visible focus treatment for the whole panel. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* Nav rails scroll horizontally on narrow viewports without a visible bar. */
.panel-scroll-x {
    display: flex;
    align-items: center;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.panel-scroll-x::-webkit-scrollbar {
    display: none;
}

.panel-scroll-x > * {
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
 * Navigation
 * ------------------------------------------------------------------ */

.panel-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--panel-text-muted);
    transition: background-color var(--panel-motion) var(--panel-ease),
                color var(--panel-motion) var(--panel-ease),
                border-color var(--panel-motion) var(--panel-ease);
}

.panel-nav-link:hover {
    background: rgba(30, 41, 59, 0.7);
    color: #fff;
}

.panel-nav-link[aria-current="page"] {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(244, 63, 94, 0.34);
    color: #fda4af;
}

.panel-nav-mobile-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.75rem;
    padding: 0.5rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--panel-text-muted);
}

.panel-nav-mobile-link[aria-current="page"] {
    background: rgba(244, 63, 94, 0.14);
    color: #fda4af;
}

/* ------------------------------------------------------------------
 * Buttons — shared sizes so every page reads at the same weight.
 * ------------------------------------------------------------------ */

.panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid transparent;
    padding: 0.625rem 1rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color var(--panel-motion) var(--panel-ease),
                border-color var(--panel-motion) var(--panel-ease),
                color var(--panel-motion) var(--panel-ease),
                opacity var(--panel-motion) var(--panel-ease);
}

.panel-btn-sm {
    padding: 0.4375rem 0.75rem;
    font-size: 0.6875rem;
}

.panel-btn-icon {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.panel-btn-primary {
    background: var(--panel-brand-strong);
    border-color: rgba(244, 63, 94, 0.5);
    color: #fff;
}

.panel-btn-primary:hover { background: var(--panel-brand); }

.panel-btn-neutral {
    background: rgba(15, 23, 42, 0.9);
    border-color: var(--panel-border-strong);
    color: var(--panel-text);
}

.panel-btn-neutral:hover { background: rgba(30, 41, 59, 0.95); }

.panel-btn-ok {
    background: #059669;
    border-color: rgba(16, 185, 129, 0.45);
    color: #fff;
}

.panel-btn-ok:hover { background: #10b981; }

.panel-btn-danger {
    background: rgba(76, 5, 25, 0.75);
    border-color: rgba(244, 63, 94, 0.4);
    color: #fda4af;
}

.panel-btn-danger:hover {
    background: rgba(136, 19, 55, 0.8);
    color: #fff;
}

.panel-btn:disabled {
    opacity: 0.5;
}

.panel-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0.375rem;
    border: 1px solid var(--panel-border);
    border-radius: 1rem;
    background: rgba(2, 6, 23, 0.72);
}

.panel-mode-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    text-align: left;
    color: var(--panel-text-muted);
    transition: background-color var(--panel-motion) var(--panel-ease), border-color var(--panel-motion) var(--panel-ease), color var(--panel-motion) var(--panel-ease);
}

.panel-mode-option:hover,
.panel-mode-option.is-active {
    border-color: rgba(244, 63, 94, 0.35);
    background: rgba(244, 63, 94, 0.12);
    color: #fff;
}

.panel-mode-option > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.panel-mode-option small {
    overflow: hidden;
    color: var(--panel-text-faint);
    font-size: 0.6875rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .panel-mode-switch { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    #phonePreviewDrawer .absolute.inset-x-0,
    #phonePreviewDrawer .flex.items-center.justify-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* Desktop catalog builder: navigation stays visible while content scrolls. */
.catalog-tree-node {
    padding-inline-start: calc(var(--tree-depth, 0) * 1rem);
}

@media (min-width: 1024px) {
    .catalog-builder-scroll {
        min-height: calc(100vh - 22rem);
        max-height: calc(100vh - 22rem);
        overflow-y: auto;
    }

    .catalog-builder-scroll > :first-child {
        min-width: 0;
    }

    .catalog-builder-scroll > :last-child {
        min-width: 0;
    }
}

/* ------------------------------------------------------------------
 * Accessibility helpers
 * ------------------------------------------------------------------ */

.panel-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Respect the platform reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Keep modal content usable on short mobile viewports. */
body:has(.fixed.inset-0:not(.hidden)) {
    overflow: hidden;
}

/* ===================================================================
 * STUDIO IDE 3-PANEL LAYOUT (THEO MOCKUP MỚI)
 * Cột 1: Explorer & Recent (270px) | Cột 2: File List (Flex) | Cột 3: Inspector (390px)
 * =================================================================== */
.studio-workspace {
    display: grid !important;
    grid-template-columns: 100% !important;
    gap: 1.25rem;
    align-items: start;
    width: 100%;
}

@media (min-width: 1280px) {
    .studio-workspace {
        display: grid !important;
        grid-template-columns: 270px minmax(460px, 1fr) 390px !important;
        gap: 1.25rem !important;
    }
}

/* Khung Panel nền tối phong cách Obsidian */
.studio-panel {
    background: #111622;
    border: 1px solid #1E293B;
    border-radius: 1.25rem;
    overflow: hidden;
}

/* Card Mod dạng thanh ngang (Horizontal Pill) */
.mod-card-row {
    background: #161D2B;
    border: 1px solid #222E42;
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
}

.mod-card-row:hover {
    background: #1B2436;
    border-color: #2D3D55;
    transform: translateY(-1px);
}

/* Trạng thái Card được chọn */
.mod-card-row.is-active {
    background: #182235;
    border-color: #38BDF8 !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.16);
}

/* Mục Lịch sử Gần đây (Recent History) */
.recent-item-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    border-radius: 0.625rem;
    font-size: 0.75rem;
    color: #94A3B8;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.recent-item-btn:hover {
    background: #1E293B;
    color: #F8FAFC;
}

.recent-item-btn.is-active {
    background: #1E293B;
    color: #38BDF8;
    border-color: rgba(56, 189, 248, 0.3);
    font-weight: 600;
}

/* Segmented Pills Filter & Sort */
.studio-pill-group {
    display: inline-flex;
    align-items: center;
    background: #0B0F17;
    border: 1px solid #1E293B;
    border-radius: 0.625rem;
    padding: 0.2rem;
    gap: 0.2rem;
}

.studio-pill-btn {
    padding: 0.25rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #94A3B8;
    transition: all 0.15s ease;
}

.studio-pill-btn:hover {
    color: #FFFFFF;
}

.studio-pill-btn.active {
    background: #1E293B;
    color: #38BDF8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Inspector Terminal Code Box */
.inspector-code-box {
    background: #0B0F17;
    border: 1px solid #1E293B;
    border-radius: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #38BDF8;
    padding: 0.75rem;
    max-height: 140px;
    overflow-y: auto;
}

/* STUDIO ZEN MODE (ẨN HEADER WEBSITE ĐỂ KHÔNG GIAN STUDIO ĐẠT 100%) */
body.studio-zen-mode > header,
body.studio-zen-mode nav[aria-label="Điều hướng chính"],
body.studio-zen-mode footer {
    display: none !important;
}

body.studio-zen-mode main,
body.studio-zen-mode .panel-shell {
    padding-top: 0.75rem !important;
    max-width: 100% !important;
}