/* ── CX Backend Theme System ────────────────────────────────────
   CSS custom properties drive light ↔ dark.
   [data-theme="dark"] overrides every variable.
   Bootstrap 5.1 dark-mode overrides are in the last section.
   ─────────────────────────────────────────────────────────────── */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --cx-bg:            #f3f4f6;
    --cx-surface:       #ffffff;
    --cx-surface-2:     #f0f1f4;
    --cx-border:        #e2e4ea;

    /* Text */
    --cx-text:          #111827;
    --cx-text-soft:     #374151;
    --cx-text-muted:    #6b7280;

    /* Table */
    --cx-th-bg:         #f3f4f6;
    --cx-th-text:       #374151;
    --cx-tr-even:       #f9fafb;
    --cx-tr-hover:      #f0f2f7;

    /* Inputs */
    --cx-input-bg:      #ffffff;
    --cx-input-border:  #d1d5db;
    --cx-input-text:    #111827;

    /* Chrome — sidebar is always dark (Cloudflare-style) */
    --cx-topbar-bg:     #1a1a1a;
    --cx-topbar-text:   rgba(255, 255, 255, 0.88);
    --cx-sidebar-bg:    #1b1b1b;
    --cx-sidebar-border:#2c2c2c;

    /* Cards */
    --cx-card-bg:       #ffffff;
    --cx-card-border:   #e2e4ea;
    --cx-card-header-bg:#f9fafb;
    --cx-card-shadow:   0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* Alerts */
    --cx-alert-success-bg:  #ecfdf5; --cx-alert-success-text: #065f46; --cx-alert-success-border: #a7f3d0;
    --cx-alert-warning-bg:  #fffbeb; --cx-alert-warning-text: #92400e; --cx-alert-warning-border: #fde68a;
    --cx-alert-danger-bg:   #fef2f2; --cx-alert-danger-text:  #991b1b; --cx-alert-danger-border:  #fca5a5;
    --cx-alert-info-bg:     #eff6ff; --cx-alert-info-text:    #1e40af; --cx-alert-info-border:    #bfdbfe;

    /* Links */
    --cx-link: #2563eb;
}

[data-theme="dark"] {
    /* Surfaces */
    --cx-bg:            #111116;
    --cx-surface:       #1e1e26;
    --cx-surface-2:     #16161e;
    --cx-border:        #2c2c3a;

    /* Text */
    --cx-text:          #e2e4ee;
    --cx-text-soft:     #9fa3b8;
    --cx-text-muted:    #6b7280;

    /* Table */
    --cx-th-bg:         #22222e;
    --cx-th-text:       #b0b4cc;
    --cx-tr-even:       #1a1a24;
    --cx-tr-hover:      #252534;

    /* Inputs */
    --cx-input-bg:      #1e1e28;
    --cx-input-border:  #3a3a4a;
    --cx-input-text:    #e2e4ee;

    /* Chrome */
    --cx-topbar-bg:     #111111;
    --cx-topbar-text:   rgba(255, 255, 255, 0.85);
    --cx-sidebar-bg:    #161616;
    --cx-sidebar-border:#252525;

    /* Cards */
    --cx-card-bg:       #1e1e26;
    --cx-card-border:   #2c2c3a;
    --cx-card-header-bg:#1a1a22;
    --cx-card-shadow:   0 1px 4px rgba(0, 0, 0, 0.3);

    /* Alerts */
    --cx-alert-success-bg:  #052e1c; --cx-alert-success-text: #6ee7b7; --cx-alert-success-border: #065f46;
    --cx-alert-warning-bg:  #27190a; --cx-alert-warning-text: #fcd34d; --cx-alert-warning-border: #78350f;
    --cx-alert-danger-bg:   #2d0a0a; --cx-alert-danger-text:  #fca5a5; --cx-alert-danger-border:  #7f1d1d;
    --cx-alert-info-bg:     #0a1628; --cx-alert-info-text:    #93c5fd; --cx-alert-info-border:    #1e3a5f;

    /* Links */
    --cx-link: #6ea8fe;
}


/* ── Layout ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
    font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft JhengHei', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: var(--cx-bg);
    color: var(--cx-text);
    transition: background-color 0.2s, color 0.2s;
}

/* ── Topbar ─────────────────────────────────────────────────────── */
.cx-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 54px;
    background: var(--cx-topbar-bg);
    color: var(--cx-topbar-text);
    position: sticky;
    top: 0;
    z-index: 1040;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cx-topbar-logo {
    height: 32px;
    width: auto;
    display: block;
    object-fit: contain;
}

.cx-topbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* fallback 登入按鈕（未登入時） */
.cx-topbar-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.cx-topbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
}

/* Icon-only 圓角按鈕（主題切換） */
.cx-topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.cx-topbar-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.cx-topbar-icon-btn .material-icons { font-size: 20px; }

/* Avatar 圓圈 */
.cx-topbar-avatar-wrap { position: relative; }

.cx-topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: background 0.12s;
    line-height: 1;
}

.cx-topbar-avatar:hover { background: #1d4ed8; }

/* 下拉選單 */
.cx-topbar-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 210px;
    background: #ffffff;
    border: 1px solid #e2e4ea;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    overflow: hidden;
}

.cx-topbar-dropdown.open { display: block; }

[data-theme="dark"] .cx-topbar-dropdown {
    background: #1e1e26;
    border-color: #2c2c3a;
}

.cx-topbar-dropdown-header { padding: 12px 14px; }

.cx-topbar-dropdown-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

[data-theme="dark"] .cx-topbar-dropdown-name { color: #e2e4ee; }

.cx-topbar-dropdown-sub {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 2px;
    word-break: break-all;
}

.cx-topbar-dropdown-divider {
    height: 1px;
    background: #e2e4ea;
}

[data-theme="dark"] .cx-topbar-dropdown-divider { background: #2c2c3a; }

.cx-topbar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    transition: background 0.1s;
}

.cx-topbar-dropdown-item:hover {
    background: #f3f4f6;
    color: #111827;
    text-decoration: none;
}

[data-theme="dark"] .cx-topbar-dropdown-item { color: #9fa3b8; }

[data-theme="dark"] .cx-topbar-dropdown-item:hover {
    background: #252534;
    color: #e2e4ee;
}

.cx-topbar-dropdown-item .material-icons { font-size: 16px; opacity: 0.65; }

/* ── Page shell ─────────────────────────────────────────────────── */
.cx-shell {
    display: flex;
    min-height: calc(100vh - 54px);
}

.cx-sidebar {
    flex-shrink: 0;
    width: 220px;
    background-color: var(--cx-sidebar-bg);
    border-right: 1px solid var(--cx-sidebar-border);
    padding: 12px 8px;
}

.cx-main {
    flex: 1;
    min-width: 0;
    padding: 16px;
}

.cx-topbar-brand {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Footer ─────────────────────────────────────────────────────── */
.cx-footer {
    padding: 10px 16px;
    font-size: 0.8rem;
    color: var(--cx-text-muted);
    border-top: 1px solid var(--cx-border);
}

/* ── Utility ────────────────────────────────────────────────────── */
h1 { color: var(--cx-text); }

a:not(.btn):not(.nav-link):not(.page-link) { color: var(--cx-link); }

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.page-link) {
    color: var(--cx-link);
}

table input[type="text"],
table input[type="number"] {
    width: 100%;
    margin: 6px 0;
}

textarea {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    border: 1px solid var(--cx-input-border);
    border-radius: 4px;
    background-color: var(--cx-input-bg);
    color: var(--cx-input-text);
    resize: none;
}

.right-td  { float: right; }
.form-row  { display: flex; }

.action-buttons a {
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 5px;
    white-space: nowrap;
}

/* Legacy button classes */
.edit-button   { background-color: #4caf50; color: white; margin: 5px; }
.delete-button { background-color: #f44336; color: white; margin: 5px; }
.blue-button   { background-color: #2563eb; color: white; margin: 5px; }
.orange-button { background-color: #f59e0b; color: white; margin: 5px; }
.black-button  { background-color: #333;    color: white; margin: 5px; }

a { white-space: nowrap; }
td a { white-space: nowrap; }


/* ── Bootstrap 5.1 dark mode overrides ─────────────────────────────
   Bootstrap 5.1 has no native dark mode — every component that
   uses a hardcoded color is listed here.
   ─────────────────────────────────────────────────────────────── */

/* Body bg */
[data-theme="dark"] .bg-light { background-color: var(--cx-bg) !important; }
[data-theme="dark"] .bg-white { background-color: var(--cx-surface) !important; }

/* Cards */
[data-theme="dark"] .card {
    background-color: var(--cx-card-bg);
    border-color: var(--cx-card-border);
    color: var(--cx-text);
    box-shadow: var(--cx-card-shadow);
}
[data-theme="dark"] .card-header {
    background-color: var(--cx-card-header-bg);
    border-color: var(--cx-card-border);
    color: var(--cx-text);
}
[data-theme="dark"] .card-footer {
    background-color: var(--cx-card-header-bg);
    border-color: var(--cx-card-border);
}
[data-theme="dark"] .shadow-sm { box-shadow: var(--cx-card-shadow) !important; }

/* Tables */
[data-theme="dark"] table { color: var(--cx-text); border-color: var(--cx-border); }
[data-theme="dark"] .table { color: var(--cx-text); border-color: var(--cx-border); }
[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; }
[data-theme="dark"] th {
    background-color: var(--cx-th-bg);
    color: var(--cx-th-text);
    border-color: var(--cx-border);
}
[data-theme="dark"] td { border-color: var(--cx-border); }
[data-theme="dark"] tr:nth-child(even) > td,
[data-theme="dark"] tr:nth-child(even) > th {
    background-color: var(--cx-tr-even);
}
[data-theme="dark"] .table-hover tbody tr:hover > td,
[data-theme="dark"] .table-hover tbody tr:hover > th {
    background-color: var(--cx-tr-hover);
    color: var(--cx-text);
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--cx-input-bg);
    border-color: var(--cx-input-border);
    color: var(--cx-input-text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--cx-input-bg);
    border-color: #6ea8fe;
    color: var(--cx-input-text);
    box-shadow: 0 0 0 0.2rem rgba(110, 168, 254, 0.2);
}
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-control.bg-light {
    background-color: var(--cx-surface-2) !important;
    color: var(--cx-text-soft);
}
[data-theme="dark"] .form-label  { color: var(--cx-text); }
[data-theme="dark"] .form-text   { color: var(--cx-text-muted); }
[data-theme="dark"] .form-check-input {
    background-color: var(--cx-input-bg);
    border-color: var(--cx-input-border);
}

/* Buttons */
[data-theme="dark"] .btn-outline-secondary {
    color: #c0c4d6;
    border-color: #4a4a5a;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #2e2e3a;
    color: #e0e4f0;
    border-color: #5a5a6a;
}
[data-theme="dark"] .btn-outline-primary {
    color: var(--cx-link);
    border-color: var(--cx-link);
}
[data-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--cx-link);
    color: #fff;
}
[data-theme="dark"] .btn-outline-dark {
    color: #c0c4d6;
    border-color: #555;
}
[data-theme="dark"] .btn-outline-dark:hover {
    background-color: #3a3a4a;
    color: #fff;
    border-color: #666;
}
[data-theme="dark"] .btn-outline-danger  { color: #f87171; border-color: #7f1d1d; }
[data-theme="dark"] .btn-outline-danger:hover  { background-color: #7f1d1d; color: #fff; }
[data-theme="dark"] .btn-outline-warning { color: #fbbf24; border-color: #78350f; }
[data-theme="dark"] .btn-outline-warning:hover { background-color: #78350f; color: #fff; }

/* Badges */
[data-theme="dark"] .badge.text-bg-secondary,
[data-theme="dark"] .badge.bg-secondary { background-color: #374151 !important; color: #d1d5db; }
[data-theme="dark"] .badge.text-bg-light,
[data-theme="dark"] .badge.bg-light     { background-color: #2c2c3a !important; color: #b0b4cc; }
[data-theme="dark"] .badge.text-bg-primary,
[data-theme="dark"] .badge.bg-primary   { background-color: #1e3a6e !important; color: #93c5fd; }
[data-theme="dark"] .badge.text-bg-success,
[data-theme="dark"] .badge.bg-success   { background-color: #052e1c !important; color: #6ee7b7; }
[data-theme="dark"] .badge.text-bg-warning,
[data-theme="dark"] .badge.bg-warning   { background-color: #27190a !important; color: #fcd34d; }
[data-theme="dark"] .badge.text-bg-danger,
[data-theme="dark"] .badge.bg-danger    { background-color: #2d0a0a !important; color: #fca5a5; }
[data-theme="dark"] .badge.text-bg-info,
[data-theme="dark"] .badge.bg-info      { background-color: #0a1628 !important; color: #93c5fd; }

/* Alerts */
[data-theme="dark"] .alert-success {
    background-color: var(--cx-alert-success-bg);
    border-color: var(--cx-alert-success-border);
    color: var(--cx-alert-success-text);
}
[data-theme="dark"] .alert-warning {
    background-color: var(--cx-alert-warning-bg);
    border-color: var(--cx-alert-warning-border);
    color: var(--cx-alert-warning-text);
}
[data-theme="dark"] .alert-danger {
    background-color: var(--cx-alert-danger-bg);
    border-color: var(--cx-alert-danger-border);
    color: var(--cx-alert-danger-text);
}
[data-theme="dark"] .alert-info {
    background-color: var(--cx-alert-info-bg);
    border-color: var(--cx-alert-info-border);
    color: var(--cx-alert-info-text);
}

/* Text helpers */
[data-theme="dark"] .text-muted { color: var(--cx-text-muted) !important; }
[data-theme="dark"] .text-dark  { color: var(--cx-text) !important; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--cx-text);
}

/* Borders */
[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end { border-color: var(--cx-border) !important; }

/* Nav pills */
[data-theme="dark"] .nav-pills .nav-link:not(.active) { color: var(--cx-text-soft); }
[data-theme="dark"] .nav-pills .nav-link:hover:not(.active) {
    background-color: var(--cx-surface-2);
    color: var(--cx-text);
}

/* Pagination */
[data-theme="dark"] .page-link {
    background-color: var(--cx-surface);
    border-color: var(--cx-border);
    color: var(--cx-link);
}
[data-theme="dark"] .page-item.active .page-link {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #fff;
}
[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--cx-bg);
    border-color: var(--cx-border);
    color: var(--cx-text-muted);
}

/* Dropdowns */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--cx-surface);
    border-color: var(--cx-border);
    color: var(--cx-text);
}
[data-theme="dark"] .dropdown-item { color: var(--cx-text); }
[data-theme="dark"] .dropdown-item:hover { background-color: var(--cx-surface-2); }
[data-theme="dark"] .dropdown-divider { border-color: var(--cx-border); }

/* Modals */
[data-theme="dark"] .modal-content {
    background-color: var(--cx-surface);
    border-color: var(--cx-border);
    color: var(--cx-text);
}
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--cx-border); }


/* ── Module sidebar nav ─────────────────────────────────────────────
   Sidebar is always dark (both themes) — nav items use fixed
   white-on-dark palette rather than theme variables.
   ─────────────────────────────────────────────────────────────── */

.cx-nav { padding: 12px 0; }

.cx-nav-module-title {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 0 12px 6px;
    margin-bottom: 2px;
}

.cx-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 5px;
    color: rgba(255, 255, 255, 0.62);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.4;
    transition: background 0.1s, color 0.1s;
    margin: 1px 4px;
    white-space: normal;
}

.cx-nav-item:hover {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
}

.cx-nav-item.active {
    background: rgba(37, 99, 235, 0.3);
    color: #93c5fd;
    font-weight: 500;
}

.cx-nav-item .cx-nav-icon {
    font-size: 17px;
    flex-shrink: 0;
    opacity: 0.7;
}

.cx-nav-item.active .cx-nav-icon { opacity: 1; }

.cx-nav-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 8px 12px;
}

.cx-nav-group-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 8px 12px 4px;
    margin-top: 4px;
}


/* ── Key-Value Grid ─────────────────────────────────────────────── */

.cx-kv-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 6px 16px;
    margin: 0;
    font-size: 0.875rem;
}

.cx-kv-grid dt {
    color: var(--cx-text-muted);
    font-weight: 500;
    padding: 0;
    align-self: start;
    margin-top: 2px;
}

.cx-kv-grid dd {
    color: var(--cx-text);
    margin: 0;
    padding: 0;
}

@media (max-width: 576px) {
    .cx-kv-grid { grid-template-columns: 1fr; gap: 2px; }
    .cx-kv-grid dt { font-size: 0.78rem; }
}