@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700;750;800&display=swap');

/* Shared palette for Workspace, standalone screens, and E-Leave. */
:root {
    --ws-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --ws-font-scale: 1;
    font-size: calc(16px * var(--ws-font-scale));
    --ws-primary: #2563eb;
    --ws-primary-hover: #1d4ed8;
    --ws-primary-rgb: 37, 99, 235;
    --ws-navy: #173968;
    --ws-ink: #203858;
    --ws-muted: #73839a;
    --ws-page: #f5f7fc;
    --ws-surface: #fff;
    --ws-soft: #edf3ff;
    --ws-border: #e2e9f4;
    --ws-radius: 10px;
    --ws-shadow: 0 6px 24px rgb(27 64 120 / 4%);
    --bs-primary: var(--ws-primary);
    --bs-primary-rgb: var(--ws-primary-rgb);
    --bs-link-color: var(--ws-primary);
    --bs-link-color-rgb: var(--ws-primary-rgb);
    --bs-link-hover-color: var(--ws-primary-hover);
    --bs-link-hover-color-rgb: 29, 78, 216;
    --bs-primary-bg-subtle: var(--ws-soft);
    --bs-primary-border-subtle: #cddfff;
    --bs-primary-text-emphasis: #1e4691;
    --bs-body-font-family: var(--ws-font-family);
    --bs-body-color: var(--ws-ink);
    --bs-body-bg: var(--ws-page);
    --bs-border-color: var(--ws-border);
    --bs-border-radius: 7px;
}

body.workspace-theme {
    background: var(--ws-page) !important;
    color: var(--ws-ink);
    font-family: var(--ws-font-family) !important;
    font-size: 1rem;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
.workspace-theme :is(h1,h2,h3,h4,h5,h6) {font-family: var(--ws-font-family) !important; letter-spacing: -.035em;}
.workspace-theme :is(button,input,select,textarea,optgroup,option) {font-family: var(--ws-font-family) !important;}
.workspace-theme :is(.ql-container,.ql-editor,.ql-toolbar,.fc,.dropdown-menu,.popover,.tooltip) {font-family: var(--ws-font-family);}
.workspace-theme :is(button,input,textarea)::placeholder {font-family: var(--ws-font-family);}
.workspace-theme :is(button,a,input,select,textarea,summary):focus-visible {outline: 3px solid #8bb5ff; outline-offset: 3px;}
.workspace-theme ::selection {background: #d6e5ff; color: #173968;}
.workspace-theme .text-muted {color: var(--ws-muted) !important;}
.workspace-theme .topBar {background: var(--ws-navy) !important;}
.workspace-theme .navbar {border-bottom: 1px solid #ffffff20; padding: 13px 20px;}
.workspace-theme .navbar-brand {font-family: var(--ws-font-family); font-size:calc(18px * var(--ws-font-scale,1.25)); font-weight: 750; letter-spacing: -.6px;}
.workspace-theme .navbar-brand img {width: 36px; margin-right: 5px;}
.workspace-theme .sidebar-section > summary {display: flex; align-items: center; cursor: pointer; list-style: none;}
.workspace-theme .sidebar-section > summary::-webkit-details-marker {display: none;}
.workspace-theme .sidebar-section > summary::after {content: ''; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); flex-shrink: 0;}
.workspace-theme .sidebar-section[open] > summary::after {transform: rotate(45deg);}
.workspace-theme .sidebar-section > summary:focus-visible {outline: 3px solid #8bb5ff; outline-offset: 2px;}
.workspace-theme .navbar .btn {border-radius: 7px;}
.workspace-theme nav.navBg:not(.navbar),
.workspace-theme #sidebarMenu {background: var(--ws-surface) !important; color: var(--ws-ink) !important; border-right: 1px solid var(--ws-border);}
.workspace-theme nav.navBg:not(.navbar) {width: clamp(224px, 14rem, 336px); flex-shrink: 0; min-width: 0;}
.workspace-theme nav.navBg:not(.navbar) .nav-link {color: #687e9d !important; font-size:1rem; font-weight: 500; border-radius: 7px; padding: 10px 12px; margin: 3px 0; transition: background .15s, color .15s;}
.workspace-theme :is(nav.navBg:not(.navbar),#sidebarMenu,.sidebar) .nav-link {font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere;}
.workspace-theme :is(nav.navBg:not(.navbar),#sidebarMenu,.sidebar) .nav-link > i {font-size: 1em; flex-shrink: 0;}
@media(min-width:761px) {
    .workspace-theme.eleave-app .sidebar {width: 14rem;}
    .workspace-theme.eleave-app .main-shell {margin-left: 14rem;}
}
.workspace-theme nav.navBg:not(.navbar) .nav-link:hover,
.workspace-theme nav.navBg:not(.navbar) .nav-link:focus-visible {background: #f4f7ff; color: var(--ws-primary) !important;}
.workspace-theme nav.navBg:not(.navbar) .nav-link[aria-current="page"] {background: var(--ws-soft); color: var(--ws-primary) !important; font-weight: 700;}
.workspace-theme nav.navBg:not(.navbar) .nav-link i {color: #7d97bf;}
.workspace-theme nav.navBg:not(.navbar) .nav-link[aria-current="page"] i {color: var(--ws-primary);}
.workspace-theme #sidebarMenu .btn-close-white {filter: none;}
.workspace-theme .scrollable-menu::-webkit-scrollbar-thumb,
.workspace-theme .scrollable-menu-workplace::-webkit-scrollbar-thumb {background: #cad8ec;}
.workspace-theme :is(.dashboard-page,.profile-page,.calendar-page,.kanban-page,.notification-page) {background: var(--ws-page) !important;}
.workspace-theme :is(.card,.dashboard-hero,.dashboard-panel,.metric-card,.suggestion-card,.profile-hero,.profile-panel,.profile-card,.calendar-hero,.calendar-panel,.calendar-card,.kanban-hero,.kanban-panel,.notification-hero,.notification-panel) {border-color: var(--ws-border); border-radius: var(--ws-radius); box-shadow: var(--ws-shadow);}
.workspace-theme :is(.dashboard-title,.profile-title,.panel-title,.calendar-title,.kanban-title,.notification-title,.metric-value) {color: var(--ws-ink);}
.workspace-theme :is(.dashboard-subtitle,.profile-muted,.panel-eyebrow,.metric-label) {color: var(--ws-muted);}
.workspace-theme .dashboard-page :is(.metric-label,.panel-eyebrow,.small,small) {font-size: 1rem; line-height: 1.5;}
.workspace-theme .dashboard-page .panel-title {font-size: 1.1rem;}
.workspace-theme :is(.card-header,.modal-header) {background: #f8faff; border-bottom-color: var(--ws-border);}
.workspace-theme .btn {border-radius: 7px; font-weight: 600; font-size: .85rem; padding: .55rem .85rem;}
.workspace-theme .btn-sm {padding: .3rem .6rem; font-size: .75rem;}
.workspace-theme .btn-primary {--bs-btn-bg: var(--ws-primary); --bs-btn-border-color: var(--ws-primary); --bs-btn-hover-bg: var(--ws-primary-hover); --bs-btn-hover-border-color: var(--ws-primary-hover); --bs-btn-active-bg: #1e40af; --bs-btn-active-border-color: #1e40af; --bs-btn-disabled-bg: #8daef5; --bs-btn-disabled-border-color: #8daef5; --bs-btn-focus-shadow-rgb: var(--ws-primary-rgb);}
.workspace-theme .btn-outline-primary {--bs-btn-color: var(--ws-primary); --bs-btn-border-color: #bed3fb; --bs-btn-hover-bg: var(--ws-primary); --bs-btn-hover-border-color: var(--ws-primary); --bs-btn-active-bg: var(--ws-primary); --bs-btn-active-border-color: var(--ws-primary);}
.workspace-theme .btn-dark.topBar {background: var(--ws-primary) !important; border-color: var(--ws-primary);}
.workspace-theme :is(.form-control,.form-select) {border-color: #dbe4f1; border-radius: 7px; color: var(--ws-ink);}
.workspace-theme :is(.form-control,.form-select):focus {border-color: #8bb5ff; box-shadow: 0 0 0 .2rem rgb(37 99 235 / 12%);}
.workspace-theme .form-check-input:checked {background-color: var(--ws-primary); border-color: var(--ws-primary);}
.workspace-theme .table {--bs-table-color: var(--ws-ink); --bs-table-border-color: var(--ws-border); --bs-table-striped-bg: #f8faff; --bs-table-hover-bg: #edf3ff;}
.workspace-theme .table thead th {background: #f8faff; color: #6b81a0; font-size: .75rem; font-weight: 600; border-bottom-color: var(--ws-border);}
.workspace-theme .table > :not(caption) > * > * {padding: .85rem;}
.workspace-theme .dropdown-menu {border-color: var(--ws-border); border-radius: 9px; box-shadow: 0 12px 30px #17396812;}
.workspace-theme .dropdown-item:hover {background: var(--ws-soft); color: var(--ws-primary);}
.workspace-theme .dropdown-item.active {background: var(--ws-primary); color: white;}
.workspace-theme .modal-content {border: 1px solid var(--ws-border); border-radius: 12px;}
.workspace-theme .pagination {--bs-pagination-color: var(--ws-primary); --bs-pagination-active-bg: var(--ws-primary); --bs-pagination-active-border-color: var(--ws-primary); --bs-pagination-hover-color: var(--ws-primary-hover); --bs-pagination-border-color: var(--ws-border);}
.workspace-theme .quick-action:hover {border-color: var(--ws-primary); color: var(--ws-primary);}
.workspace-theme :is(.suggestion-icon,.profile-icon) {background: var(--ws-soft); color: var(--ws-primary);}
.workspace-theme .status-fill {background: var(--ws-primary);}
.workspace-theme .fc {--fc-button-bg-color: var(--ws-primary); --fc-button-border-color: var(--ws-primary); --fc-button-hover-bg-color: var(--ws-primary-hover); --fc-button-hover-border-color: var(--ws-primary-hover); --fc-button-active-bg-color: #1e40af; --fc-button-active-border-color: #1e40af; --fc-border-color: var(--ws-border); --fc-today-bg-color: #edf3ff; --fc-page-bg-color: var(--ws-surface);}
.workspace-theme :is(.ql-toolbar.ql-snow,.ql-container.ql-snow) {border-color: var(--ws-border);}
.workspace-theme .ql-snow :is(.ql-picker-item.ql-selected,.ql-picker-label.ql-active) {color: var(--ws-primary);}
.workspace-theme footer .topBar {background: #edf2fa !important; color: #7689a6 !important; border-top: 1px solid var(--ws-border); font-size:calc(11px * var(--ws-font-scale,1.25));}

/* Auth and utility pages that render outside the main Workspace shell. */
.workspace-standalone :is(.card.shadow,.card.shadow-lg) {box-shadow: 0 15px 50px #1739680c !important;}
.workspace-standalone.vh-100 {min-height: 100vh; height: auto !important; padding: 24px; background: radial-gradient(ellipse at top right,#e6efff,transparent 65%),var(--ws-page) !important;}
.workspace-standalone.vh-100 > .card {width: 410px !important; max-width: 100%; border: 1px solid var(--ws-border); border-radius: 14px !important;}
.workspace-standalone .card-footer {background: #f8faff; border-color: var(--ws-border);}
.workspace-standalone > h2 {margin: 32px 32px 20px;}
.workspace-standalone > form {margin: 0 32px 32px; max-width: 650px; padding: 24px; border: 1px solid var(--ws-border); border-radius: 10px; background: var(--ws-surface);}
.workspace-standalone > form :is(input:not([type="hidden"]):not([type="checkbox"]),textarea,select) {border: 1px solid var(--ws-border); border-radius: 6px; padding: 9px 12px; max-width: 100%;}
.workspace-standalone > form :is(button,input[type="submit"]) {border: 0; border-radius: 7px; background: var(--ws-primary); color: white; padding: 10px 18px;}

/* E-Leave uses the same tokens without inheriting Bootstrap's layout rules. */
.eleave-app {--ink: var(--ws-ink); --muted: var(--ws-muted); --accent: var(--ws-primary); --line: var(--ws-border); --page: var(--ws-page);}
.eleave-app .brand-mark {background: var(--ws-primary);}
.eleave-app .featured {background: var(--ws-navy);}
.eleave-app .button.primary {background: var(--ws-primary); border-color: var(--ws-primary);}
.eleave-app .login-art {background: var(--ws-navy);}

/* Keep the existing dark-mode preference readable throughout Workspace. */
body.workspace-theme.dark-mode {
    --ws-page: #0f1c30; --ws-surface: #182a43; --ws-ink: #e3edff;
    --ws-muted: #9fb0cb; --ws-border: #2b4162; --ws-soft: #203c66;
    --bs-body-color: var(--ws-ink); --bs-body-bg: var(--ws-page);
    color: var(--ws-ink) !important;
}
.workspace-theme.dark-mode :is(.navbar,.topBar) {background: #132e52 !important;}
.workspace-theme.dark-mode :is(.card,.dashboard-hero,.dashboard-panel,.metric-card,.suggestion-card,.profile-hero,.profile-panel,.profile-card,.calendar-hero,.calendar-panel,.calendar-card,.kanban-hero,.kanban-panel,.notification-hero,.notification-panel,.modal-content,.dropdown-menu,.comment-panel) {background: var(--ws-surface) !important; color: var(--ws-ink); border-color: var(--ws-border);}
.workspace-theme.dark-mode :is(.card-header,.modal-header,.card-footer,.quick-action) {background: #1b304e; color: var(--ws-ink);}
.workspace-theme.dark-mode :is(.dashboard-title,.profile-title,.panel-title,.calendar-title,.kanban-title,.notification-title,.metric-value) {color: var(--ws-ink);}
.workspace-theme.dark-mode nav.navBg:not(.navbar) .nav-link {color: #b6c9e9 !important;}
.workspace-theme.dark-mode nav.navBg:not(.navbar) .nav-link[aria-current="page"] {color: #a8caff !important;}
.workspace-theme.dark-mode nav.navBg:not(.navbar) .nav-link:hover {background: #203c66; color: #dce9ff !important;}
.workspace-theme.dark-mode .table {--bs-table-bg: var(--ws-surface); --bs-table-striped-bg: #1b304e; --bs-table-hover-bg: #213e66;}
.workspace-theme.dark-mode .table thead th {background: #1c3455; color: #b4c9e9;}
.workspace-theme.dark-mode :is(.form-control,.form-select,.ql-toolbar,.ql-container) {background: #13253e; color: var(--ws-ink); border-color: var(--ws-border);}
.workspace-theme.dark-mode :is(.form-control,.form-select)::placeholder {color: #8ea6c9;}
.workspace-theme.dark-mode .text-muted {color: var(--ws-muted) !important;}
@media(max-width:767px) {
    .workspace-theme .navbar {padding: 10px 12px;}
    .workspace-theme .navbar-brand {font-size:calc(14px * var(--ws-font-scale,1.25));}
    .workspace-theme .navbar-brand img {width: 29px;}
    .workspace-theme .navbar .btn {padding: .4rem .6rem;}
    .workspace-standalone.vh-100 {padding: 16px;}
    .workspace-standalone > form {margin-inline: 16px; padding: 18px;}
}

/* Let content shrink inside the sidebar layout instead of widening phones. */
.workspace-app > .workspace-layout {width: 100%; min-width: 0;}
.workspace-app > .workspace-layout > .flex-grow-1 {flex: 1 1 0%; min-width: 0; max-width: 100%;}
.workspace-app > .navbar {width: 100%; min-width: 0;}
.workspace-theme .dashboard-page {min-width: 0;}
.workspace-theme .dashboard-title {overflow-wrap: anywhere;}
@media(max-width:767px) {
    .workspace-app > .navbar > .container-fluid {display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding-inline: 0;}
    .workspace-theme .navbar-brand {display: flex; align-items: center; gap: 6px; min-width: 0; margin-right: 0; white-space: normal; overflow-wrap: anywhere; font-size: clamp(12px,.85rem,18px); line-height: 1.2;}
    .workspace-theme .navbar-brand img {width: 24px; margin: 0; flex-shrink: 0;}
    .workspace-theme .workspace-header-actions {gap: 6px !important; min-width: 0;}
    .workspace-theme .workspace-header-actions .btn {display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 40px; padding: 4px 6px; margin: 0 !important; font-size: .85rem;}
    .workspace-theme #sidebarMenu {max-width: 92vw;}
    .workspace-theme .dashboard-page > .container-fluid {padding: 16px !important;}
    .workspace-theme .dashboard-page :is(.dashboard-hero,.dashboard-panel,.metric-card) {padding: 16px; min-width: 0;}
    .workspace-theme .dashboard-page .dashboard-title {font-size: clamp(1.25rem,6vw,1.75rem); line-height: 1.3;}
    .workspace-theme .dashboard-page :is(.row > *,.suggestion-card,.suggestion-row > div) {min-width: 0; overflow-wrap: anywhere;}
    .workspace-theme #work-status-form {width: 100%; min-width: 0;}
    .workspace-theme #work-status-form > div {flex: 1 1 100%; min-width: 0;}
    .workspace-theme #work-status-form :is(select,button,a) {max-width: 100%; white-space: normal;}
    .workspace-theme #work-status-form :is(button,a) {flex: 1 1 auto;}
}