/* ============================================================================
   bubblegum-admin.css — NOX LIVE 管理者画面 + 事務所画面 共通 Bubblegum overlay
   ============================================================================
   v0.7.5.l+: admin/* と org/* の両ページに同じ Bubblegum theme を適用。
   どちらも .admin-* / .sidebar-* / .card 系のクラスを共有しているため 1 ファイルで両対応。
   - bubblegum.css のトークン (--b-*) をそのまま使う
   - sidebar / header / card / table / form / button を bubblegum 言語に統一
   - 既存 admin-init.css / org.css の dark theme を !important で上書き
   ============================================================================ */

/* ──── レイアウト本体 ──── */
.admin-layout {
    background: var(--b-bg) !important;
    color: var(--b-ink) !important;
}
.admin-main {
    background: var(--b-bg) !important;
    color: var(--b-ink) !important;
}

/* ──── サイドバー (黒テーマ → 白カード) ──── */
.admin-sidebar {
    background: var(--b-card) !important;
    border-right: 2.5px solid var(--b-ink) !important;
    box-shadow: 4px 0 0 var(--b-pinkS) !important;
    color: var(--b-ink) !important;
}
.admin-sidebar::before { display: none !important; }
.admin-sidebar .logo,
.admin-sidebar .logo-banner {
    color: var(--b-ink) !important;
    font-family: var(--b-fontT) !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}
.admin-sidebar .logo-banner-img,
.admin-sidebar .logo-icon {
    filter: drop-shadow(0 1px 3px rgba(74, 31, 46, 0.18));
}
.admin-sidebar .admin-badge {
    background: var(--b-pink) !important;
    color: #fff !important;
    border: 2px solid var(--b-ink) !important;
    box-shadow: 2px 2px 0 var(--b-yel) !important;
    border-radius: 999px !important;
    font-family: var(--b-font) !important;
    font-weight: 900 !important;
    padding: 3px 10px !important;
}
.sidebar-menu a {
    color: var(--b-ink2) !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    font-family: var(--b-font) !important;
    font-weight: 800 !important;
}
.sidebar-menu a:hover {
    background: var(--b-pinkS) !important;
    color: var(--b-ink) !important;
    border-color: var(--b-pinkE) !important;
}
.sidebar-menu a.active {
    background: var(--b-pink) !important;
    color: #fff !important;
    border-color: var(--b-ink) !important;
    box-shadow: 2px 2px 0 var(--b-ink) !important;
}
.sidebar-badge {
    background: var(--b-yel) !important;
    color: var(--b-ink) !important;
    border: 1.5px solid var(--b-ink) !important;
    border-radius: 999px !important;
    font-family: var(--b-font) !important;
    font-weight: 900 !important;
}
.sidebar-footer {
    border-top: 1.5px dashed var(--b-pinkE) !important;
    color: var(--b-ink2) !important;
}
.sidebar-overlay {
    background: rgba(74, 31, 46, 0.45) !important;
}

/* ──── ヘッダー ──── */
.admin-header h1 {
    color: var(--b-ink) !important;
    font-family: var(--b-fontT) !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: var(--b-ink) !important;
    background: none !important;
    text-shadow: none !important;
}
.admin-header .admin-user {
    color: var(--b-ink2) !important;
    font-weight: 800 !important;
}
.admin-hamburger {
    background: var(--b-card) !important;
    border: 2px solid var(--b-ink) !important;
    box-shadow: 2px 2px 0 var(--b-ink) !important;
    color: var(--b-ink) !important;
    border-radius: 8px !important;
}

/* ──── カード ──── */
.card {
    background: var(--b-card) !important;
    border: var(--b-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--b-shadow) !important;
    color: var(--b-ink) !important;
}
.card-header {
    border-bottom: 1.5px dashed var(--b-pinkE) !important;
    padding-bottom: 10px !important;
    margin-bottom: 14px !important;
}
.card-header h2,
.card h2 {
    color: var(--b-ink) !important;
    font-family: var(--b-fontT) !important;
    font-weight: 900 !important;
    -webkit-text-fill-color: var(--b-ink) !important;
    background: none !important;
    text-shadow: none !important;
}
.card h2 svg {
    color: var(--b-pink) !important;
}

/* ──── stat-card (統計カード) ──── */
.stats-grid {
    gap: 16px !important;
}
.stat-card {
    background: var(--b-pinkS) !important;
    border: var(--b-border) !important;
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 var(--b-ink) !important;
    color: var(--b-ink) !important;
}
.stat-card .value,
.stat-value {
    color: var(--b-pinkD) !important;
    font-family: var(--b-fontT) !important;
    font-weight: 900 !important;
}
.stat-card .label,
.stat-label {
    color: var(--b-ink2) !important;
    font-weight: 800 !important;
}

/* ──── テーブル ──── */
table {
    background: var(--b-card) !important;
    color: var(--b-ink) !important;
    border-radius: 12px !important;
    overflow: hidden;
}
th {
    background: var(--b-pinkS) !important;
    color: var(--b-ink) !important;
    border-bottom: 2px solid var(--b-ink) !important;
    font-family: var(--b-fontT) !important;
    font-weight: 900 !important;
}
td {
    color: var(--b-ink) !important;
    border-bottom: 1.5px dashed var(--b-pinkE) !important;
}
tr:hover td {
    background: var(--b-pinkS) !important;
}

/* ──── フォーム ──── */
.form-group label {
    color: var(--b-ink) !important;
    font-weight: 800 !important;
}
.form-group input,
.form-group select,
.form-group textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    background: var(--b-card) !important;
    color: var(--b-ink) !important;
    border: 2px solid var(--b-ink) !important;
    border-radius: 8px !important;
    font-family: var(--b-font) !important;
}
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--b-pink) !important;
    box-shadow: 2px 2px 0 var(--b-pink) !important;
}

/* ──── ボタン (ヘッダ / メニュー / モーダル系を除く) ──── */
.btn,
.btn-primary,
.btn-secondary,
.btn-sm {
    border-radius: 999px !important;
    font-family: var(--b-font) !important;
    font-weight: 900 !important;
    border: 2px solid var(--b-ink) !important;
    transition: transform 0.08s, box-shadow 0.08s !important;
}
.btn-primary {
    background: var(--b-pink) !important;
    color: #fff !important;
    box-shadow: 3px 3px 0 var(--b-ink) !important;
}
.btn-secondary {
    background: var(--b-card) !important;
    color: var(--b-ink) !important;
    box-shadow: 3px 3px 0 var(--b-ink) !important;
}
.btn-primary:hover, .btn-secondary:hover {
    transform: translate(-1px, -1px) !important;
    box-shadow: 4px 4px 0 var(--b-ink) !important;
}
.btn-primary:active, .btn-secondary:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 var(--b-ink) !important;
}

/* ──── ログインボックス (admin/org 共通) ──── */
.login-container {
    background: var(--b-bg) !important;
    color: var(--b-ink) !important;
}
.login-box {
    background: var(--b-card) !important;
    border: var(--b-border) !important;
    border-radius: 22px !important;
    box-shadow: 8px 8px 0 var(--b-ink) !important;
    color: var(--b-ink) !important;
}
.login-box h1,
.login-box .subtitle {
    color: var(--b-ink) !important;
    -webkit-text-fill-color: var(--b-ink) !important;
    background: none !important;
    text-shadow: none !important;
    font-family: var(--b-fontT) !important;
}
.login-error,
.login-error-box {
    color: var(--b-pinkD) !important;
    font-weight: 800 !important;
}
.home-link,
.home-link-center {
    color: var(--b-ink2) !important;
    text-decoration: none !important;
}
.home-link:hover, .home-link-center:hover {
    color: var(--b-pink) !important;
}

/* ──── モーダル系 ──── */
.modal-content,
.modal-body,
.modal-dialog {
    background: var(--b-card) !important;
    border: var(--b-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--b-shadow-lg) !important;
    color: var(--b-ink) !important;
}
.modal-header {
    border-bottom: 1.5px dashed var(--b-pinkE) !important;
    color: var(--b-ink) !important;
}

/* ──── 各種 UI 補助 ──── */
.hidden { display: none !important; }


/* ============================================================================
   v0.7.5.m+: レスポンシブ (admin + org 共通)
   - タブレット (~1024px): sidebar 220px に圧縮 / 余白圧縮
   - モバイル (~768px): sidebar off-canvas (既存 admin-init.css の transform を尊重)、
     stat 2列、テーブル横スクロール、ヘッダ縮小
   - 極小 (~480px): stat 1列、更にタイト
   既存 admin-init.css の sidebar transform はそのまま動かす (top-level 構造は変更しない)
   ============================================================================ */
@media (max-width: 1024px) {
    .admin-sidebar { width: 220px !important; }
    .admin-main { margin-left: 220px !important; padding: 18px !important; }
    .card { padding: 18px 20px !important; border-radius: 18px !important; }
    .card h2 { font-size: 17px !important; }
    .stats-grid { gap: 12px !important; }
}

@media (max-width: 768px) {
    /* sidebar — admin-init.css の transform off-canvas をそのまま尊重しつつ
       開いた時の見た目だけ bubblegum に統一 */
    .admin-sidebar {
        width: 240px !important;
        box-shadow: 6px 0 18px rgba(74, 31, 46, 0.28) !important;
    }
    /* v0.9.2.w 🔴 **スマホで管理 / 事務所コンソールの本文が 143px しか無かった**。
       上の 1024px ブロックが `margin-left: 220px !important` を当てるため、
       admin-init.css / org.css 側の `@media (max-width: 768px) { .admin-main
       { margin-left: 0 } }` (非 important) が**負けていた**。サイドバーは同じ幅で
       translateX(-100%) して画面外に退避しているのに、本文だけ 220px 押し込まれた
       まま = 実測 375px 幅で本文 143px / 320px 幅で 88px (数値が縦 1 文字ずつに
       割れる)。off-canvas と同じ条件でオフセットも 0 に戻す。
       ★ `!important` の打ち消しは `!important` でしか出来ない (#251 と同型)。 */
    .admin-main { margin-left: 0 !important; padding: 14px !important; }

    /* ヘッダ */
    .admin-header h1 { font-size: 18px !important; }
    .admin-header .admin-user { font-size: 12px !important; }
    .admin-hamburger { padding: 6px 10px !important; }

    /* カード */
    .card {
        padding: 14px 14px !important;
        border-radius: 16px !important;
        box-shadow: 3px 3px 0 var(--b-ink) !important;
    }
    .card h2 { font-size: 15px !important; }
    .card-header { padding-bottom: 8px !important; margin-bottom: 10px !important; }

    /* stat-grid: 2 列固定 */
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-card { padding: 12px !important; }
    .stat-value { font-size: 18px !important; }
    .stat-label { font-size: 10px !important; }

    /* テーブル: 横スクロール wrapper (card 内のテーブルが溢れないように) */
    .card table,
    table {
        font-size: 12px !important;
    }
    th, td { padding: 8px 10px !important; }
    /* card がテーブル直下を持つ場合の overflow allowance */
    .card { overflow-x: auto; }
    /* テーブル本体最低幅で内容を保ち、card 側で横スクロールさせる */
    table { min-width: 480px; }

    /* フォーム入力 */
    .form-group input, .form-group select, .form-group textarea,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="search"] {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }

    /* ボタン */
    .btn-primary, .btn-secondary, .btn { padding: 7px 14px !important; font-size: 12px !important; }
    .btn-sm { padding: 5px 10px !important; font-size: 11px !important; }

    /* ログインボックス mobile */
    .login-box {
        padding: 22px 20px !important;
        box-shadow: 5px 5px 0 var(--b-ink) !important;
        margin: 16px;
    }
    .login-box h1 { font-size: 22px !important; }
}

@media (max-width: 480px) {
    .admin-main { padding: 10px !important; }
    .card { padding: 12px 12px !important; }
    .card h2 { font-size: 14px !important; }
    .stats-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
    .stat-value { font-size: 18px !important; }
    .admin-header h1 { font-size: 16px !important; }
    .admin-header .admin-user span { display: none; }  /* 表示名は省略 (アバターのみ) */
    .login-box { padding: 18px 16px !important; }
    .login-box h1 { font-size: 20px !important; }
}

/* v0.7.5.r+: カテゴリ管理ページ */
.taxonomy-admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.taxonomy-admin-section {
    background: var(--b-paper) !important;
    border: 1.5px dashed var(--b-pinkE) !important;
    border-radius: 14px;
    padding: 12px 14px;
}
.taxonomy-admin-section h3 {
    color: var(--b-ink) !important;
    font-family: var(--b-fontT) !important;
    font-weight: 900;
    font-size: 14px;
    margin: 0 0 10px 0;
}
.taxonomy-admin-section .tag-add-row {
    margin-bottom: 10px;
}
.taxonomy-admin-section table {
    font-size: 12px;
}
.taxonomy-admin-section th, .taxonomy-admin-section td {
    padding: 6px 8px !important;
}
.taxonomy-admin-section input[type="text"],
.taxonomy-admin-section input[type="number"] {
    padding: 4px 8px !important;
    font-size: 12px !important;
}
@media (max-width: 1024px) {
    .taxonomy-admin-grid { grid-template-columns: 1fr; }
}