/* =========================================================
   APEX PRACTICE PLATFORM
   GLOBAL THEME SYSTEM
========================================================= */

:root {

    /* Brand */
    --apex-orange: #f15a24;
    --apex-orange-hover: #ff6930;

    /* Status */
    --status-success: #42a564;
    --status-danger: #d94b4b;
    --status-warning: #f15a24;
    --status-info: #547fa8;
    --status-purple: #8064a2;

    /* Layout */
    --sidebar-width: 250px;

    /* Animation */
    --theme-transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}


/* =========================================================
   DARK THEME — DEFAULT
========================================================= */

html,
html[data-theme="dark"] {

    color-scheme: dark;

    --bg-page: #090909;
    --bg-sidebar: #080808;
    --bg-topbar: #0d0d0d;

    --bg-panel: #101010;
    --bg-panel-alt: #0c0c0c;
    --bg-control: #171717;
    --bg-hover: #151515;

    --bg-orange-soft: #15100e;
    --bg-orange-card: #24140e;

    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --text-muted: #777777;
    --text-faint: #505050;

    --border-primary: #202020;
    --border-secondary: #292929;
    --border-control: #303030;

    --shadow-modal:
        0 30px 100px rgba(0, 0, 0, .6);

    --overlay:
        rgba(0, 0, 0, .82);

    --calendar-hour-line: #262626;
    --calendar-half-line: #181818;

    --appointment-bg-start: #24140e;
    --appointment-bg-end: #18110f;
    --appointment-border: #3a251e;
}


/* =========================================================
   LIGHT THEME
========================================================= */

html[data-theme="light"] {

    color-scheme: light;

    --bg-page: #f4f5f7;
    --bg-sidebar: #ffffff;
    --bg-topbar: #ffffff;

    --bg-panel: #ffffff;
    --bg-panel-alt: #f8f8f8;
    --bg-control: #ffffff;
    --bg-hover: #f3f3f3;

    --bg-orange-soft: #fff4ef;
    --bg-orange-card: #fff5f0;

    --text-primary: #161616;
    --text-secondary: #555555;
    --text-muted: #727272;
    --text-faint: #9a9a9a;

    --border-primary: #e4e4e4;
    --border-secondary: #dddddd;
    --border-control: #d6d6d6;

    --shadow-modal:
        0 30px 100px rgba(0, 0, 0, .18);

    --overlay:
        rgba(20, 20, 20, .45);

    --calendar-hour-line: #dedede;
    --calendar-half-line: #eeeeee;

    --appointment-bg-start: #fff1eb;
    --appointment-bg-end: #fff8f5;
    --appointment-border: #f0c5b5;
}


/* =========================================================
   GLOBAL FOUNDATION
========================================================= */

html {
    background: var(--bg-page);

    transition:
        var(--theme-transition);
}

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

    transition:
        var(--theme-transition);
}


/* =========================================================
   SHARED PLATFORM SURFACES
========================================================= */

.sidebar {
    background: var(--bg-sidebar);

    border-color:
        var(--border-primary);

    transition:
        var(--theme-transition);
}

.topbar {
    background: var(--bg-topbar);

    border-color:
        var(--border-primary);

    transition:
        var(--theme-transition);
}

.calendar-panel,
.summary-card,
.modal,
.card,
.panel {
    background: var(--bg-panel);

    border-color:
        var(--border-primary);

    transition:
        var(--theme-transition);
}


/* =========================================================
   TEXT
========================================================= */

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--text-primary);
}

.sidebar-label,
.topbar-left,
.date-subtitle,
.appointment-count,
.stat-label,
.form-label,
.form-help,
.summary-note {
    color: var(--text-muted);
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-item {
    color: var(--text-muted);
}

.nav-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.nav-item.active {
    background: var(--bg-orange-soft);
    color: var(--text-primary);
}


/* =========================================================
   CONTROLS
========================================================= */

.form-control,
input,
select,
textarea {
    background: var(--bg-control);
    color: var(--text-primary);

    border-color:
        var(--border-control);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--apex-orange);

    outline: none;
}


/* =========================================================
   BUTTONS
========================================================= */

.apex-primary-btn,
.new-appointment-btn,
.save-appointment {

    background:
        var(--apex-orange);

    color: #ffffff;
}

.apex-primary-btn:hover,
.new-appointment-btn:hover,
.save-appointment:hover {

    background:
        var(--apex-orange-hover);
}


/* =========================================================
   CALENDAR
========================================================= */

.calendar-panel-header {
    border-color:
        var(--border-primary);
}

.practitioner-bar {
    background: var(--bg-panel);

    border-color:
        var(--border-primary);
}

.practitioner-pill {
    background: var(--bg-hover);

    border-color:
        var(--border-secondary);

    color:
        var(--text-muted);
}

.practitioner-pill:hover {
    color:
        var(--text-primary);

    border-color:
        var(--apex-orange);
}

.practitioner-pill.active {
    background:
        var(--apex-orange);

    border-color:
        var(--apex-orange);

    color: #ffffff;
}

.time-column {
    background:
        var(--bg-panel-alt);

    border-color:
        var(--border-primary);
}

.hour-line {
    background:
        var(--calendar-hour-line);
}

.half-line {
    background:
        var(--calendar-half-line);
}

.appointment {
    background:
        linear-gradient(
            135deg,
            var(--appointment-bg-start),
            var(--appointment-bg-end)
        );

    border-left-color:
        var(--apex-orange);

    border-top-color:
        var(--appointment-border);

    border-right-color:
        var(--appointment-border);

    border-bottom-color:
        var(--appointment-border);
}


/* =========================================================
   MODALS
========================================================= */

.modal-overlay {
    background:
        var(--overlay);

    transition:
        background-color .2s ease;
}

.modal {
    box-shadow:
        var(--shadow-modal);
}

.modal-header {
    border-color:
        var(--border-primary);
}

.modal-close {
    background:
        var(--bg-control);

    border-color:
        var(--border-secondary);

    color:
        var(--text-muted);
}

.modal-close:hover {
    color:
        var(--text-primary);

    border-color:
        var(--apex-orange);
}


/* =========================================================
   SUMMARY
========================================================= */

.summary-heading,
.stat {
    border-color:
        var(--border-primary);
}


/* =========================================================
   THEME TOGGLE
========================================================= */

.apex-theme-toggle {

    width: 42px;
    height: 42px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    padding: 0;

    background:
        var(--bg-control);

    border:
        1px solid
        var(--border-secondary);

    color:
        var(--text-primary);

    cursor: pointer;

    border-radius: 50%;

    font-size: 16px;

    transition:
        var(--theme-transition),
        transform .15s ease;
}

.apex-theme-toggle:hover {

    border-color:
        var(--apex-orange);

    transform:
        translateY(-1px);
}

.apex-theme-toggle:focus-visible {

    outline:
        2px solid
        var(--apex-orange);

    outline-offset: 3px;
}


/* =========================================================
   LIGHT MODE REFINEMENTS
========================================================= */

html[data-theme="light"] .brand {
    color: #111111;
}

html[data-theme="light"] .logout {
    color: #777777;
}

html[data-theme="light"] .logout:hover {
    color: var(--apex-orange);
}

html[data-theme="light"] .appointment-patient {
    color: #171717;
}

html[data-theme="light"] .appointment-service {
    color: #606060;
}

html[data-theme="light"] .appointment-meta {
    color: #777777;
}

html[data-theme="light"] .service-preview,
html[data-theme="light"] .new-patient-fields {

    background:
        var(--bg-panel-alt);

    border-color:
        var(--border-primary);
}


/* =========================================================
   PRINT
========================================================= */

@media print {

    .sidebar,
    .topbar,
    .apex-theme-toggle {
        display: none !important;
    }

    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

}