/* =================================================================
   THEME SYSTEM - CSS Variables Approach
   Single file to maintain, toggle via .dark-mode class on <html>
   ================================================================= */

/* ============================================
   DARK THEME (Default - no class)
   Design System Colors from page-edit.css
   ============================================ */
:root {
    /* Background Colors - Design System */
    --bg-primary: #12151a;
    --bg-secondary: #1a1d24;
    --bg-tertiary: #252a33;
    --bg-elevated: #1e222a;
    --bg-card: #1e222a;
    --bg-hover: #252a33;

    /* Text Colors - Design System */
    --text-primary: #e6edf3;
    --text-secondary: #adbac7;
    --text-tertiary: #768390;
    --text-muted: #768390;
    --text-placeholder: #545d68;
    --text-inverse: #ffffff;

    /* Border Colors - Design System */
    --border-light: #2d333b;
    --border-medium: #373e47;
    --border-dark: #444c56;
    --border-default: #2d333b;
    --border-hover: #373e47;
    --border: #2d333b;

    /* Brand Colors - Design System */
    --brand-primary: #4AAEDC;
    --brand-primary-hover: #5cb8e4;
    --brand-primary-muted: rgba(74, 174, 220, 0.15);
    --brand-secondary: #3a9ecc;
    --brand-accent: #3fb950;
    --accent: #4AAEDC;
    --accent-hover: #5cb8e4;

    /* Status Colors - Design System */
    --status-success: #3fb950;
    --status-warning: #d29922;
    --status-error: #f85149;
    --status-danger: #f85149;
    --status-info: #4AAEDC;

    /* Input Colors - Design System */
    --input-bg: #1a1d24;
    --input-border: #2d333b;
    --input-focus: #4AAEDC;
    --input-text: #e6edf3;

    /* Card styling */
    --card-bg: #1e222a;
    --card-border: #2d333b;

    /* Admin Specific - Updated for design system */
    --admin-nav-bg: #1a1d24;
    --admin-nav-text: #e6edf3;
    --admin-nav-hover-bg: rgba(74, 174, 220, 0.15);
    --admin-nav-hover-text: #4AAEDC;
    --admin-content-bg: #12151a;

    /* Header & Footer - Updated */
    --header-bg: #1a1d24;
    --header-text: #e6edf3;
    --footer-bg: #1a1d24;
    --footer-text: #adbac7;

    /* Shadow - Design System */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* ============================================
   LIGHT THEME (When .dark-mode class is present)
   ============================================ */
html.dark-mode {
    /* Background Colors */
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --bg-elevated: #ffffff;

    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --text-inverse: #ffffff;

    /* Border Colors */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #9ca3af;

    /* Brand Colors */
    --brand-primary: #4AAEDC;
    --brand-secondary: #3a8cb8;
    --brand-accent: #5ED8AA;

    /* Status Colors */
    --status-success: #10b981;
    --status-warning: #f59e0b;
    --status-error: #ef4444;
    --status-info: #3b82f6;

    /* Input Colors */
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-focus: #4AAEDC;
    --input-text: #2c3e50;

    /* Admin Specific */
    --admin-nav-bg: #f9fafb;
    --admin-nav-text: #4b5563;
    --admin-nav-hover-bg: #e0f2fe;
    --admin-nav-hover-text: #0369a1;
    --admin-content-bg: #ffffff;

    /* Header & Footer */
    --header-bg: #0B3A68;
    --header-text: #ffffff;
    --footer-bg: #0B3A68;
    --footer-text: #F2EBEA;

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ============================================
   APPLY VARIABLES TO ELEMENTS
   ============================================ */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Header & Footer */
header {
    background-color: var(--header-bg);
    color: var(--header-text);
}

footer,
.footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}

/* Admin Layout */
.admin-hub {
    background-color: var(--bg-primary);
}

.admin-left,
.dashboard-nav-left {
    background-color: var(--admin-nav-bg);
    border-right-color: var(--border-light);
}

.admin-right {
    background-color: var(--admin-content-bg);
}

/* Admin Navigation */
.admin-links a,
.dashboard-links a {
    color: var(--admin-nav-text);
}

.admin-links a:hover,
.dashboard-links a:hover {
    background-color: var(--admin-nav-hover-bg);
    color: var(--admin-nav-hover-text);
}

.admin-links h3,
.dashboard-links h3 {
    color: var(--text-tertiary);
}

/* Admin Content */
.admin-site-settings,
.admin-urgent-reports,
.admin-emails,
.moderate-panel {
    background-color: var(--bg-elevated);
    border-color: var(--border-light);
}

.admin-news-section {
    background-color: var(--bg-secondary);
    border-color: var(--border-light);
}

.admin-site-settings h1,
.admin-site-settings h2,
.admin-site-settings h3,
.admin-news-section h1,
.admin-news-section h2,
.admin-news-section h3 {
    color: var(--text-primary);
}

.admin-site-settings p,
.admin-site-settings span,
.admin-news-section p,
.admin-news-section span {
    color: var(--text-secondary);
}

/* Moderation Panel Text Colors */
.moderate-cont,
.moderate-cont h2,
.moderate-cont h3,
.moderate-cont h4,
.moderate-cont p,
.moderate-cont span,
.moderate-cont div,
.moderation-user-profile,
.moderation-user-profile h2,
.moderation-user-profile h3,
.moderation-user-profile h4,
.moderation-user-profile p,
.moderation-user-profile span,
.moderation-user-profile div,
.moderate-profile-cont,
.moderate-profile-cont h2,
.moderate-profile-cont h3,
.moderate-profile-history,
.moderate-profile-history h3,
.moderate-profile-history h4,
.moderate-profile-history div,
.profile-info-cont,
.profile-info-cont div,
.profile-info-cont span {
    color: var(--text-primary);
}

.delete-confirm,
.delete-confirm h3,
.delete-confirm span,
.delete-confirm-review,
.delete-confirm-review h3,
.delete-confirm-review span {
    color: var(--text-primary);
}

.delete-confirm p,
.delete-confirm-review p {
    color: var(--status-error);
}

/* Moderation Status Indicator Items - dark text for colored backgrounds */
.mod-status-item,
.mod-status-item h3,
.mod-status-item h4,
.mod-status-item div,
.mod-status-item span,
.profile-info-cont,
.profile-info-cont h3,
.profile-info-cont h4,
.profile-info-cont div,
.profile-info-cont span,
.moderate-actions,
.moderate-actions div,
.moderate-actions span {
    color: #1a1a1a !important;
}

/* News Items */
.admin-gemini-news {
    border-color: var(--border-light);
}

.admin-gemini-news:hover {
    background-color: var(--bg-secondary);
    border-color: var(--brand-accent);
}

.admin-gemini-news:hover a,
.admin-gemini-news:hover span,
.admin-gemini-news:hover p {
    color: #1a1a1a;
}

.admin-gemini-news a {
    color: var(--text-primary);
}

.admin-gemini-news span {
    color: var(--text-primary);
}

.admin-gemini-news p {
    color: var(--text-primary);
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
input[type="number"],
select,
textarea {
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--input-focus);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
    color: var(--text-inverse);
}

.btn-cancel {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-medium);
}

.btn-cancel:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Scrollbar Styling */
.admin-right::-webkit-scrollbar-track,
.admin-left::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.admin-right::-webkit-scrollbar-thumb,
.admin-left::-webkit-scrollbar-thumb {
    background: var(--border-dark);
}

.admin-right::-webkit-scrollbar-thumb:hover,
.admin-left::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ============================================
   Dashboard Main Container
   ============================================ */

.dashboard-container {
    background-color: var(--bg-primary);
}

.server-dashboard {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.dashboard-board {
    background-color: var(--bg-secondary);
}

/* ============================================
   Dashboard Page Groups
   ============================================ */

.dashboard-page-group {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    margin-bottom: 15px;
    overflow: hidden;
}

.dashboard-group-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    padding: 14px 16px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dashboard-group-header:hover {
    background-color: var(--bg-tertiary);
}

.dashboard-group-header .group-name {
    color: var(--text-primary);
    font-weight: 600;
}

.dashboard-group-header .group-count {
    color: var(--text-tertiary);
}

.dashboard-group-header .group-toggle-icon {
    color: var(--text-tertiary);
}

.dashboard-group-content {
    background-color: var(--bg-primary);
    padding: 15px;
}

/* ============================================
   Dashboard Server/Page Cards
   ============================================ */

.dashboard-servers-edit,
.profile-servers-edit {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.dashboard-servers-edit:hover,
.profile-servers-edit:hover {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.dashboard-servers-edit a,
.profile-servers-edit a {
    color: var(--text-primary);
    text-decoration: none;
}

.dashboard-servers-edit h2,
.profile-servers-edit h2 {
    color: var(--text-primary);
}

.dashboard-servers-edit h4,
.profile-servers-edit h4 {
    color: var(--text-secondary);
}

.dashboard-servers-edit a img,
.profile-servers-edit a img {
    border-radius: 8px;
}

/* Expand/Collapse controls */
.dashboard-expand-controls {
    margin-bottom: 15px;
}

.expand-collapse-btn {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.expand-collapse-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.expand-collapse-btn i {
    color: var(--brand-primary);
}

/* ============================================
   Settings Form Dashboard
   ============================================ */

.settings-form-dashboard {
    background-color: transparent;
}

.settings-form-dashboard h2 {
    color: var(--text-primary);
}

.settings-form-dashboard a {
    color: var(--brand-primary);
}

.settings-form-dashboard a:hover {
    color: var(--brand-primary-hover);
}
/* =================================================================
   iPhone Duo / foldable foundation (see docs/IPHONE_DUO_DESIGN.md)

   Loaded on every page through $theme_system_includes (style-cache.php),
   before the page stylesheets. js/duo-viewport.js overrides these defaults
   with measured values; the defaults below keep pages safe without JS.

   Size classes (use these exact media queries in page CSS):
     Cover, sideways   @media (max-height: 500px) and (orientation: landscape)                        678 x 466
     Cover, upright    @media (max-width: 560px) and (orientation: portrait)                           466 x 678
     Mid               @media (orientation: landscape) and (min-height: 501px) and (max-height: 700px) 866 x 587
     Phone portrait    @media (max-width: 700px) and (orientation: portrait)                           669 x 951
     Tablet            landscape, 701px+ tall: unchanged

   Variables:
     --rsat/--rsar/--rsab/--rsal   raw safe-area insets (menus, dialogs, dense panels)
     --sat/--sar/--sab/--sal       HUD insets: 0 on the rail side, so content may use the rail
     --ctl/--ctr/--cbl/--cbr       keep-out box width in that corner, 0 elsewhere
     --ctl-h/--ctr-h/--cbl-h/--cbr-h  keep-out box height in that corner, 0 elsewhere
     --tbh                         measured site header height
     --vvh                         measured visible viewport height (use instead of 100vh)
     --duo-hit                     minimum touch target size

   Rules of thumb:
     - Never size anything to the screen with 100vh / 100lvh / 100dvh. Use
       position: fixed; inset: 0 (or % of a fixed parent). max-height in vh is
       tolerated (it can only come out shorter) but % is preferred.
     - Fixed / sticky UI in a corner adds the corner box, e.g.
       right: calc(16px + var(--sar) + var(--ctr));
     - Notifications and toasts go under the header: top: calc(var(--tbh) + 8px + var(--sat));
   ================================================================= */

:root {
    --rsat: env(safe-area-inset-top, 0px);
    --rsar: env(safe-area-inset-right, 0px);
    --rsab: env(safe-area-inset-bottom, 0px);
    --rsal: env(safe-area-inset-left, 0px);
    --sat: env(safe-area-inset-top, 0px);
    --sar: env(safe-area-inset-right, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --ctl: 0px;
    --ctr: 0px;
    --cbl: 0px;
    --cbr: 0px;
    --ctl-h: 0px;
    --ctr-h: 0px;
    --cbl-h: 0px;
    --cbr-h: 0px;
    --tbh: 73px;
    --vvh: 100%;
    --duo-hit: 44px;
}

/* What WebKit paints past the page (the rail, the bottom strip): match the page. */
html {
    background-color: var(--bg-primary, #12151a);
}

/* With viewport-fit=cover the page reaches under the rail. Keep content clear of
   the non-rail insets (ordinary notch / home bar); the rail side stays usable. */
body {
    padding-left: var(--sal);
    padding-right: var(--sar);
}

/* Keep page content out from under the keep-out box (camera punch + clock).
   When the box sits in a top corner it reaches below the sticky header, so
   push the flow below it at the top of the page. Margin keeps the header's
   own height (and --tbh) unchanged; the full page width stays usable. */
html.duo-rail header.hd {
    margin-bottom: max(0px, calc(max(var(--ctl-h), var(--ctr-h)) - var(--tbh)));
}