/* ============================================================
   PHYSA GLOBAL THEME
   Applies to ALL PHP pages

   Supported:
   - Light Theme
   - Dark Theme

   Pages:
   dashboard.php
   users.php
   patient_form.php
   caregiver.php
   therapist.php
   physio.php
   appointments.php
   payment.php
   report.php
   diagnosis.php
   setting.php
   ============================================================ */


/* ============================================================
   GLOBAL VARIABLES
   ============================================================ */

:root {

    --physa-green: #174D38;
    --physa-maroon: #4D1717;

    --light-background: #CBCBCB;
    --light-card: #F2F2F2;
    --light-white: #FFFFFF;
    --light-text: #222222;
    --light-text-secondary: #666666;
    --light-border: #DDDDDD;

    --dark-background: #171A19;
    --dark-main: #171A19;
    --dark-card: #222725;
    --dark-card-secondary: #292E2C;
    --dark-input: #292E2C;
    --dark-border: #383D3A;
    --dark-border-light: #414744;
    --dark-text: #EEEEEE;
    --dark-text-secondary: #AAAAAA;

    --theme-transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* ============================================================
   GLOBAL RESET
   ============================================================ */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-height: 100%;
}

body {
    overflow-x: hidden;
}


/* ============================================================
   GLOBAL TRANSITION
   ============================================================ */

body,
.main,
.page-content,
.header,
.card,
.content-card,
.dashboard-card,
.stat-card,
.table-card,
.report-card,
.panel,
.box,
.chart-box,
.table-box,
.search-box,
.patient-search-box,
.modal,
.modal-content,
.dropdown,
.dropdown-menu,
input,
select,
textarea,
table,
thead,
tbody,
tr,
td,
th,
button,
.btn,
.page-footer,
.dashboard-footer {
    transition: var(--theme-transition);
}


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

html.theme-light,
body.theme-light,
body.light {

    background: var(--light-background) !important;
    color: var(--light-text) !important;
}


/* ============================================================
   LIGHT MAIN
   ============================================================ */

body.theme-light .main,
body.theme-light .page-content,
body.light .main,
body.light .page-content {

    background: var(--light-background) !important;
    color: var(--light-text) !important;
}


/* ============================================================
   LIGHT SIDEBAR
   ============================================================ */

body.theme-light .sidebar,
body.light .sidebar {

    background: var(--physa-green) !important;
    color: #FFFFFF !important;
}


/* ============================================================
   LIGHT CARDS
   ============================================================ */

body.theme-light .card,
body.theme-light .content-card,
body.theme-light .dashboard-card,
body.theme-light .stat-card,
body.theme-light .table-card,
body.theme-light .report-card,
body.theme-light .panel,
body.theme-light .box,
body.theme-light .chart-box,
body.theme-light .table-box,

body.light .card,
body.light .content-card,
body.light .dashboard-card,
body.light .stat-card,
body.light .table-card,
body.light .report-card,
body.light .panel,
body.light .box,
body.light .chart-box,
body.light .table-box {

    background: var(--light-card) !important;
    color: var(--light-text) !important;
}


/* ============================================================
   LIGHT HEADINGS
   ============================================================ */

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light .page-title,

body.light h1,
body.light h2,
body.light h3,
body.light h4,
body.light h5,
body.light h6,
body.light .page-title {

    color: var(--physa-green);
}


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

body.theme-light p,
body.theme-light label,
body.theme-light small,
body.light p,
body.light label,
body.light small {

    color: inherit;
}


/* ============================================================
   LIGHT TABLE
   ============================================================ */

body.theme-light table,
body.light table {

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


body.theme-light thead,
body.light thead {

    background: var(--physa-green);
    color: #FFFFFF;
}


body.theme-light th,
body.light th {

    background: var(--physa-green);
    color: #FFFFFF;
}


body.theme-light td,
body.light td {

    color: #333333;
    border-color: var(--light-border);
}


/* ============================================================
   LIGHT TABLE ROW
   ============================================================ */

body.theme-light tbody tr,
body.light tbody tr {

    background: var(--light-card);
}


body.theme-light tbody tr:hover,
body.light tbody tr:hover {

    background: #E8E8E8;
}


/* ============================================================
   LIGHT INPUTS
   ============================================================ */

body.theme-light input,
body.theme-light select,
body.theme-light textarea,

body.light input,
body.light select,
body.light textarea {

    background: #FFFFFF;
    color: #222222;
    border-color: #DDDDDD;
}


body.theme-light input::placeholder,
body.theme-light textarea::placeholder,

body.light input::placeholder,
body.light textarea::placeholder {

    color: #999999;
}


/* ============================================================
   LIGHT SEARCH
   ============================================================ */

body.theme-light .search-box,
body.theme-light .patient-search-box,

body.light .search-box,
body.light .patient-search-box {

    background: #FFFFFF;
    color: #222222;
    border-color: #DDDDDD;
}


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

body.theme-light .modal,
body.theme-light .modal-content,

body.light .modal,
body.light .modal-content {

    background: var(--light-card);
    color: var(--light-text);
}


/* ============================================================
   LIGHT DROPDOWNS
   ============================================================ */

body.theme-light .dropdown,
body.theme-light .dropdown-menu,

body.light .dropdown,
body.light .dropdown-menu {

    background: #FFFFFF;
    color: #222222;
}


/* ============================================================
   LIGHT FOOTER
   ============================================================ */

body.theme-light .page-footer,
body.theme-light .dashboard-footer,

body.light .page-footer,
body.light .dashboard-footer {

    color: #666666;
}


/* ============================================================
   ============================================================
   DARK THEME
   ============================================================
   ============================================================ */

html.theme-dark,
body.theme-dark,
body.dark {

    background: var(--dark-background) !important;
    color: var(--dark-text) !important;
}


/* ============================================================
   DARK MAIN
   ============================================================ */

body.theme-dark .main,
body.theme-dark .page-content,
body.dark .main,
body.dark .page-content {

    background: var(--dark-main) !important;
    color: var(--dark-text) !important;
}


/* ============================================================
   DARK SIDEBAR
   ============================================================ */

body.theme-dark .sidebar,
body.dark .sidebar {

    background: var(--physa-green) !important;
    color: #FFFFFF !important;
}


/* ============================================================
   DARK HEADER
   ============================================================ */

body.theme-dark .header,
body.theme-dark .page-header,
body.dark .header,
body.dark .page-header {

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


/* ============================================================
   DARK CARDS
   ============================================================ */

body.theme-dark .card,
body.theme-dark .content-card,
body.theme-dark .dashboard-card,
body.theme-dark .stat-card,
body.theme-dark .table-card,
body.theme-dark .report-card,
body.theme-dark .panel,
body.theme-dark .box,
body.theme-dark .chart-box,
body.theme-dark .table-box,

body.dark .card,
body.dark .content-card,
body.dark .dashboard-card,
body.dark .stat-card,
body.dark .table-card,
body.dark .report-card,
body.dark .panel,
body.dark .box,
body.dark .chart-box,
body.dark .table-box {

    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}


/* ============================================================
   DARK HEADINGS
   ============================================================ */

body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark h5,
body.theme-dark h6,
body.theme-dark .page-title,

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6,
body.dark .page-title {

    color: #8BC9AC !important;
}


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

body.theme-dark p,
body.theme-dark span,
body.theme-dark label,
body.theme-dark small,
body.theme-dark strong,

body.dark p,
body.dark span,
body.dark label,
body.dark small,
body.dark strong {

    color: inherit;
}


/* ============================================================
   DARK SECONDARY TEXT
   ============================================================ */

body.theme-dark .description,
body.theme-dark .subtitle,
body.theme-dark .text-muted,
body.theme-dark .muted,

body.dark .description,
body.dark .subtitle,
body.dark .text-muted,
body.dark .muted {

    color: var(--dark-text-secondary) !important;
}


/* ============================================================
   DARK TABLE
   ============================================================ */

body.theme-dark table,
body.dark table {

    background: var(--dark-card) !important;
    color: #FFFFFF !important;
}


body.theme-dark thead,
body.dark thead {

    background: #333333 !important;
    color: #FFFFFF !important;
}


body.theme-dark th,
body.dark th {

    background: var(--physa-green) !important;
    color: #FFFFFF !important;
}


body.theme-dark tbody tr,
body.dark tbody tr {

    background: var(--dark-card) !important;
    color: #FFFFFF !important;
}


body.theme-dark tbody tr:hover,
body.dark tbody tr:hover {

    background: #383D3A !important;
}


body.theme-dark td,
body.dark td {

    color: #DDDDDD !important;
    border-color: var(--dark-border) !important;
}


/* ============================================================
   DARK INPUTS
   ============================================================ */

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,

body.dark input,
body.dark select,
body.dark textarea {

    background: var(--dark-input) !important;
    color: #FFFFFF !important;
    border-color: var(--dark-border-light) !important;
}


body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder,

body.dark input::placeholder,
body.dark textarea::placeholder {

    color: #888888 !important;
}


/* ============================================================
   DARK SEARCH
   ============================================================ */

body.theme-dark .search-box,
body.theme-dark .patient-search-box,

body.dark .search-box,
body.dark .patient-search-box {

    background: #333333 !important;
    color: #FFFFFF !important;
    border-color: #555555 !important;
}


body.theme-dark .search-box input,
body.theme-dark .patient-search-box input,

body.dark .search-box input,
body.dark .patient-search-box input {

    background: transparent !important;
    color: #FFFFFF !important;
}


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

body.theme-dark button,
body.theme-dark .btn,

body.dark button,
body.dark .btn {

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


/* ============================================================
   DARK LINKS
   ============================================================ */

body.theme-dark a,
body.dark a {

    color: #8BC9AC;
}


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

body.theme-dark .modal,
body.theme-dark .modal-content,

body.dark .modal,
body.dark .modal-content {

    background: var(--dark-card) !important;
    color: #EEEEEE !important;
    border-color: var(--dark-border) !important;
}


/* ============================================================
   DARK DROPDOWN
   ============================================================ */

body.theme-dark .dropdown,
body.theme-dark .dropdown-menu,

body.dark .dropdown,
body.dark .dropdown-menu {

    background: var(--dark-card) !important;
    color: #EEEEEE !important;
    border-color: var(--dark-border) !important;
}


/* ============================================================
   DARK DATE
   ============================================================ */

body.theme-dark .date-display,
body.dark .date-display {

    color: #FFFFFF !important;
}


/* ============================================================
   DARK SECTION LABEL
   ============================================================ */

body.theme-dark .section-label,
body.theme-dark .small-heading,

body.dark .section-label,
body.dark .small-heading {

    color: #BBBBBB !important;
}


/* ============================================================
   DARK VIEW ALL
   ============================================================ */

body.theme-dark .view-all,
body.dark .view-all {

    color: #FFFFFF !important;
}


/* ============================================================
   DARK FOOTER
   ============================================================ */

body.theme-dark .page-footer,
body.theme-dark .dashboard-footer,

body.dark .page-footer,
body.dark .dashboard-footer {

    color: #888888 !important;
}


/* ============================================================
   DARK STATUS
   ============================================================ */

body.theme-dark .status,
body.dark .status {

    color: inherit;
}


/* ============================================================
   DARK FEEDBACK
   ============================================================ */

body.theme-dark .feedback-card,
body.dark .feedback-card {

    background: #292E2C !important;
    border-color: #383D3A !important;
    color: #EEEEEE !important;
}


body.theme-dark .feedback-comment,
body.dark .feedback-comment {

    background: rgba(23,77,56,0.25) !important;
    color: #CCCCCC !important;
}


body.theme-dark .feedback-user strong,
body.dark .feedback-user strong {

    color: #EEEEEE !important;
}


body.theme-dark .feedback-date,
body.dark .feedback-date {

    color: #999999 !important;
}


/* ============================================================
   DARK FORM LABEL
   ============================================================ */

body.theme-dark .form-group label,
body.dark .form-group label {

    color: #DDDDDD !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .main {

        margin-left: 75px;

        width: calc(100% - 75px);

    }

}


@media (max-width: 700px) {

    .sidebar {

        position: relative !important;

        width: 100% !important;

        height: auto !important;

    }

    .main {

        margin-left: 0 !important;

        width: 100% !important;

    }

}

/* ============================================================
   ADDITIONAL DARK THEME OVERRIDES
   REPORT + STATEMENT PAGES
   Theme integration only - existing page design preserved
   ============================================================ */

/* REPORT PAGE */
body.theme-dark .summary-card,
body.dark .summary-card,
body.theme-dark .chart-box,
body.dark .chart-box {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.theme-dark .page-title h1,
body.dark .page-title h1,
body.theme-dark .page-title p,
body.dark .page-title p,
body.theme-dark .card-label,
body.dark .card-label,
body.theme-dark .card-sub,
body.dark .card-sub,
body.theme-dark .month-detail-title,
body.dark .month-detail-title,
body.theme-dark .month-detail-name,
body.dark .month-detail-name,
body.theme-dark .chart-header p,
body.dark .chart-header p,
body.theme-dark .report-footer,
body.dark .report-footer {
    color: var(--dark-text-secondary) !important;
}

body.theme-dark .card-value,
body.dark .card-value,
body.theme-dark .chart-header h2,
body.dark .chart-header h2 {
    color: var(--dark-text) !important;
}

body.theme-dark .month-detail,
body.dark .month-detail {
    border-color: var(--dark-border) !important;
}

body.theme-dark .month-navigation a,
body.dark .month-navigation a,
body.theme-dark .chart-switch,
body.dark .chart-switch,
body.theme-dark .chart-month-navigation .current-month-label,
body.dark .chart-month-navigation .current-month-label {
    background: var(--dark-card-secondary) !important;
    color: #8BC9AC !important;
}

/* STATEMENT PAGE */
body.theme-dark .statement-header,
body.dark .statement-header,
body.theme-dark .statement-container,
body.dark .statement-container,
body.theme-dark .month-card,
body.dark .month-card,
body.theme-dark .month-selection,
body.dark .month-selection {
    background: var(--dark-card) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.theme-dark .statement-title,
body.dark .statement-title,
body.theme-dark .month-name,
body.dark .month-name {
    color: #8BC9AC !important;
}

body.theme-dark .statement-title::after,
body.dark .statement-title::after,
body.theme-dark .month-selection label,
body.dark .month-selection label {
    color: var(--dark-text-secondary) !important;
}

body.theme-dark .month-selection select,
body.dark .month-selection select {
    background: var(--dark-card) !important;
    color: #8BC9AC !important;
}

body.theme-dark .payment-details,
body.dark .payment-details {
    border-color: var(--dark-border) !important;
}

body.theme-dark .payment-table,
body.dark .payment-table {
    background: var(--dark-card) !important;
    border-color: var(--dark-border) !important;
}

body.theme-dark .payment-table td,
body.dark .payment-table td {
    background: var(--dark-card) !important;
    color: #DDDDDD !important;
    border-color: var(--dark-border) !important;
}

body.theme-dark .payment-table tbody tr:hover td,
body.dark .payment-table tbody tr:hover td {
    background: #383D3A !important;
}

body.theme-dark .no-data,
body.dark .no-data {
    background: var(--dark-card) !important;
    color: var(--dark-text-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.theme-dark .statement-btn,
body.dark .statement-btn,
body.theme-dark .back-button,
body.dark .back-button {
    background: var(--dark-card) !important;
}

body.theme-dark .download-btn,
body.dark .download-btn {
    color: #8BC9AC !important;
    border-color: #8BC9AC !important;
}

body.theme-dark .view-btn,
body.dark .view-btn,
body.theme-dark .back-button,
body.dark .back-button {
    color: #D7A4A4 !important;
    border-color: #D7A4A4 !important;
}