/* ==========================================================================
   XP Service Hub - Default (Light) Theme
   Professional light theme inspired by ServiceNow / Freshservice
   ========================================================================== */

/* ---- Light Theme (default) ---- */
:root,
[data-theme="light"] {
    --bg-body:                  #f1f3f4;
    --bg-main:                  #ffffff;
    --bg-sidebar:               #202124;
    --bg-sidebar-hover:         #303134;
    --bg-sidebar-active:        #1a73e8;
    --bg-navbar:                #ffffff;
    --bg-card:                  #ffffff;
    --bg-input:                 #ffffff;
    --bg-input-focus:           #ffffff;
    --bg-dropdown:              #ffffff;
    --bg-modal:                 #ffffff;
    --bg-overlay:               rgba(0, 0, 0, 0.5);
    --bg-code:                  #f1f3f4;
    --bg-table-header:          #f8f9fa;
    --bg-table-hover:           #f1f3f4;
    --bg-table-stripe:          #fafafa;

    --text-primary:             #202124;
    --text-secondary:           #5f6368;
    --text-muted:               #9aa0a6;
    --text-inverse:             #ffffff;
    --text-link:                #1a73e8;
    --text-link-hover:          #1557b0;
    --text-sidebar:             #e8eaed;
    --text-sidebar-muted:       #9aa0a6;
    --text-navbar:              #202124;

    --border-color:             #dadce0;
    --border-color-light:       #e8eaed;
    --border-color-dark:        #bdc1c6;
    --border-color-focus:       #1a73e8;
    --border-color-input:       #dadce0;

    --shadow-sm:                0 1px 2px 0 rgba(60, 64, 67, 0.1),
                                0 1px 3px 1px rgba(60, 64, 67, 0.05);
    --shadow-md:                0 1px 3px 0 rgba(60, 64, 67, 0.15),
                                0 4px 8px 3px rgba(60, 64, 67, 0.1);
    --shadow-lg:                0 4px 8px 0 rgba(60, 64, 67, 0.2),
                                0 8px 16px 6px rgba(60, 64, 67, 0.1);

    color-scheme: light;
}

/* ---- Light-specific component adjustments ---- */
[data-theme="light"] .sidebar,
:root .sidebar {
    background: var(--bg-sidebar);
    color: var(--text-sidebar);
}

[data-theme="light"] .navbar,
:root .navbar {
    background: var(--bg-navbar);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .card,
:root .card {
    background: var(--bg-card);
    border: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-sm);
}

[data-theme="light"] .table th,
:root .table th {
    background: var(--bg-table-header);
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border-color);
}

[data-theme="light"] .form-control,
:root .form-control {
    background: var(--bg-input);
    border-color: var(--border-color-input);
    color: var(--text-primary);
}

[data-theme="light"] .form-control:focus,
:root .form-control:focus {
    border-color: var(--border-color-focus);
    box-shadow: var(--shadow-focus);
}

[data-theme="light"] .dropdown-menu,
:root .dropdown-menu {
    background: var(--bg-dropdown);
    border: 1px solid var(--border-color-light);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .modal-content,
:root .modal-content {
    background: var(--bg-modal);
    box-shadow: var(--shadow-lg);
}