/* Shared ocean palette for the complete application. */
.app .topbar {
    padding-left: 8px !important;
}
.app .topbar .brand {
    margin-left: 0 !important;
}
.app .topbar .app-logo {
    margin-left: 0 !important;
    transform: none !important;
}
.theme-toggle span[aria-hidden] {
    display: inline-block;
    transform: rotate(-35deg);
}
.sample-dashboard .expense-donut:after {
    inset: 32px !important;
}
@media (max-width: 700px) {
    .sample-dashboard .expense-donut:after {
        inset: 28px !important;
    }
}
@media (max-width: 700px) {
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }
    .app .topbar {
        height: 62px !important;
        padding: 0 10px !important;
    }
    .app .shell {
        min-height: calc(100vh - 62px) !important;
    }
    .app .sidebar {
        top: 62px !important;
        width: 270px !important;
        padding: 14px 10px !important;
    }
    .app .sidebar:after {
        display: none;
    }
    .app .main {
        min-width: 0;
        padding: 16px 12px !important;
    }
    .app .page-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }
    .app .page-heading h1 {
        font-size: 23px !important;
    }
    .app .page-heading .primary-btn,
    .app .page-heading .secondary-btn {
        width: 100%;
        justify-content: center;
    }
    .app .card,
    .app .client-form-card,
    .app .client-list,
    .app .report-filter,
    .app .report-results {
        border-radius: 12px !important;
    }
    .app .client-form-card,
    .app .report-filter {
        padding: 14px !important;
    }
    .app .form-grid,
    .app .report-filter .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .app .form-actions {
        gap: 9px !important;
        flex-wrap: wrap;
    }
    .app .form-actions > .primary-btn,
    .app .form-actions > .secondary-btn {
        min-width: 0 !important;
        flex: 1 1 130px;
    }
    .app .grid-toolbar {
        gap: 10px !important;
    }
    .app .grid-page-size,
    .app .grid-search {
        width: 100% !important;
    }
    .app .grid-search input,
    .app .grid-page-size select {
        width: 100% !important;
        min-height: 38px;
    }
    .app .grid-pagination {
        width: 100%;
        justify-content: center;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .app .table-wrap {
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .app .table-wrap > table {
        min-width: max-content;
    }
    .app .success-message,
    .app .error-message,
    .app .global-error-message {
        font-size: 12px;
    }
    .app .project-workspace-head {
        gap: 10px !important;
    }
    .app .project-search,
    .app .project-search input {
        width: 100% !important;
    }
    .app .project-command-summary {
        border-radius: 12px !important;
    }
    .app .project-panel {
        border-radius: 12px !important;
    }
    .app .sample-dashboard {
        min-height: calc(100vh - 62px) !important;
        padding: 14px 12px 22px !important;
    }
    .app .dashboard-hero {
        gap: 10px !important;
    }
    .app .dashboard-hero h1 {
        font-size: 26px !important;
    }
    .app .dashboard-period {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }
    .app .dashboard-financials,
    .app .dashboard-metrics,
    .app .dashboard-insights {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 10px !important;
    }
    .app .financial-card {
        min-height: 106px !important;
        padding: 13px 14px !important;
    }
    .app .financial-total {
        font-size: 23px !important;
    }
    .app .financial-card .spark {
        display: none;
    }
    .app .metric-card {
        min-height: 68px !important;
        padding: 10px 12px !important;
    }
    .app .dash-section {
        min-height: 0 !important;
        padding: 13px !important;
    }
    .app .breakdown {
        grid-template-columns: 125px minmax(0, 1fr) !important;
        gap: 8px !important;
    }
    .app .expense-donut {
        width: 120px !important;
        height: 120px !important;
    }
    .app .expense-donut:after {
        inset: 34px !important;
    }
    .app .legend-row {
        gap: 5px !important;
        font-size: 10px !important;
    }
    .app .legend-row strong {
        font-size: 10px !important;
    }
    .app .legend-row small {
        font-size: 9px !important;
    }
    .app .project-row {
        grid-template-columns: minmax(0, 1fr) 72px auto !important;
        gap: 7px !important;
    }
    .app .recent {
        padding: 13px !important;
    }
    .app .recent .table-wrap {
        margin: 0 -13px;
        padding: 0 13px;
    }
    .app .recent table {
        min-width: 620px !important;
    }
}
@media (max-width: 380px) {
    .app .topbar .brand {
        flex-basis: 142px !important;
    }
    .app .topbar .app-logo {
        width: 145px !important;
    }
    .app .user-menu {
        gap: 3px !important;
    }
    .app .sample-dashboard {
        padding: 12px 10px 20px !important;
    }
    .app .breakdown {
        grid-template-columns: 1fr !important;
        justify-items: center;
    }
    .app .legend {
        width: 100%;
    }
    .app .legend-row {
        grid-template-columns: 9px minmax(0, 1fr) auto auto !important;
    }
    .app .project-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }
    .app .project-row .track {
        display: none;
    }
}
@media (max-width: 700px) {
    .app .client-list .table-wrap,
    .app .expense-lines-card .table-wrap,
    .app .report-results .table-wrap,
    .app .project-expense-details .table-wrap {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        border-radius: 8px !important;
        -webkit-overflow-scrolling: touch;
    }
    .app .client-list .table-wrap > table,
    .app .expense-lines-card .table-wrap > table,
    .app .report-results .table-wrap > table,
    .app .project-expense-details .table-wrap > table {
        display: table !important;
        width: max-content !important;
        min-width: 720px !important;
        border-collapse: collapse !important;
    }
    .app .expense-lines-card .table-wrap > table {
        min-width: 980px !important;
    }
    .app .report-results .table-wrap > table {
        min-width: 860px !important;
    }
    .app .client-list .table-wrap thead,
    .app .expense-lines-card .table-wrap thead,
    .app .report-results .table-wrap thead,
    .app .project-expense-details .table-wrap thead {
        display: table-header-group !important;
    }
    .app .client-list .table-wrap tbody,
    .app .expense-lines-card .table-wrap tbody,
    .app .report-results .table-wrap tbody,
    .app .project-expense-details .table-wrap tbody {
        display: table-row-group !important;
    }
    .app .client-list .table-wrap tr,
    .app .expense-lines-card .table-wrap tr,
    .app .report-results .table-wrap tr,
    .app .project-expense-details .table-wrap tr {
        display: table-row !important;
    }
    .app .client-list .table-wrap th,
    .app .client-list .table-wrap td,
    .app .expense-lines-card .table-wrap th,
    .app .expense-lines-card .table-wrap td,
    .app .report-results .table-wrap th,
    .app .report-results .table-wrap td,
    .app .project-expense-details .table-wrap th,
    .app .project-expense-details .table-wrap td {
        display: table-cell !important;
        padding: 10px 9px !important;
        white-space: nowrap !important;
    }
    .app .client-list .table-wrap td:before,
    .app .expense-lines-card .table-wrap td:before,
    .app .report-results .table-wrap td:before,
    .app .project-expense-details .table-wrap td:before {
        display: none !important;
        content: none !important;
    }
}
@media (max-width: 700px) {
    .app .sample-dashboard .recent .table-wrap {
        display: block !important;
        margin: 0 -13px !important;
        padding: 0 13px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    .app .sample-dashboard .recent table {
        display: table !important;
        width: max-content !important;
        min-width: 620px !important;
        border-collapse: collapse !important;
    }
    .app .sample-dashboard .recent thead {
        display: table-header-group !important;
    }
    .app .sample-dashboard .recent tbody {
        display: table-row-group !important;
    }
    .app .sample-dashboard .recent tr {
        display: table-row !important;
    }
    .app .sample-dashboard .recent th,
    .app .sample-dashboard .recent td {
        display: table-cell !important;
        white-space: nowrap !important;
    }
    .app .sample-dashboard .recent td:before {
        display: none !important;
        content: none !important;
    }
}
.sample-dashboard .section-head a {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-weight: 400 !important;
}
.nav-icon-line svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.nav-icon-rupee {
    font-size: 18px !important;
    font-weight: 700;
    line-height: 1;
}
.header-logo-dark {
    display: none !important;
}
html[data-theme="dark"] .header-logo-light {
    display: none !important;
}
html[data-theme="dark"] .header-logo-dark {
    display: block !important;
}
.topbar {
    padding-left: 0 !important;
}
.topbar .brand {
    justify-content: flex-start !important;
    margin: 0 !important;
}
.topbar .app-logo {
    object-position: left center !important;
    transform: translateX(-12px);
}
@media (min-width: 701px) {
    .sidebar {
        position: sticky !important;
        top: 56px;
        height: calc(100vh - 56px);
        align-self: flex-start;
    }
}
@media (max-width: 700px) {
    .sidebar {
        height: auto !important;
        position: fixed !important;
        top: 54px !important;
    }
}
.sidebar:after {
    top: 72px !important;
    height: auto !important;
    background-image: url("Images/sidebar-building-large.png") !important;
    background-position: center top !important;
    background-size: cover !important;
    opacity: 0.62 !important;
}
.sidebar > * {
    z-index: 1;
}
html[data-theme="dark"] .sidebar:after {
    opacity: 0.2 !important;
}
html:not([data-theme="dark"]) .topbar {
    background: #fff !important;
    border-bottom: 1px solid #e0ebf4 !important;
    box-shadow: 0 2px 14px #164a7408 !important;
}
html:not([data-theme="dark"]) .sidebar {
    background: #fff !important;
    border-right: 1px solid #e0ebf4 !important;
    box-shadow: none !important;
}
html:not([data-theme="dark"]) .nav-label {
    color: #6a8cac !important;
}
html:not([data-theme="dark"]) .nav-link,
html:not([data-theme="dark"]) .nav-group summary {
    color: #163b63 !important;
}
html:not([data-theme="dark"]) .nav-link:hover,
html:not([data-theme="dark"]) .nav-link.active,
html:not([data-theme="dark"]) .nav-group summary:hover {
    background: #e5f5ff !important;
    border-color: #cce9f7 !important;
    color: #087ec7 !important;
    box-shadow: none !important;
}
html:not([data-theme="dark"]) .nav-icon {
    filter: none !important;
    color: #087ec7 !important;
}
html:not([data-theme="dark"]) .user-chip {
    background: #f8fcff !important;
    border-color: #d4e5f1 !important;
    box-shadow: none !important;
}
html:not([data-theme="dark"]) .user-chip .avatar {
    background: linear-gradient(135deg, #55d4de, #1e9ed1) !important;
    color: #07365f !important;
}
html:not([data-theme="dark"]) .user-meta strong {
    color: #123a61 !important;
}
html:not([data-theme="dark"]) .user-role {
    color: #6685a4 !important;
}
html:not([data-theme="dark"]) .theme-toggle {
    color: #163d64 !important;
}
html[data-theme="dark"] .nav-section {
    border-color: #2b526c;
}
html[data-theme="dark"] .nav-icon {
    filter: none !important;
    color: #69d9e4 !important;
}
html[data-theme="dark"] .grid-toolbar {
    color: #a8c4d6 !important;
}
html[data-theme="dark"] .grid-page-size select,
html[data-theme="dark"] .grid-search input {
    background: #0c2031 !important;
    border-color: #315873 !important;
    color: #d9effa !important;
}
html[data-theme="dark"] .grid-page-button {
    border-color: #315873 !important;
    color: #7adddf !important;
}
html[data-theme="dark"] .grid-page-button:hover:not(:disabled),
html[data-theme="dark"] .grid-page-button.active {
    background: #173f58 !important;
    border-color: #52cbd8 !important;
    color: #fff !important;
}
html[data-theme="dark"] .client-list thead th,
html[data-theme="dark"] .report-results thead th,
html[data-theme="dark"] .expense-lines-table thead th {
    background: #16364d !important;
    border-color: #2d526c !important;
    color: #d6edf8 !important;
}
html[data-theme="dark"] .client-list tbody td,
html[data-theme="dark"] .report-results tbody td,
html[data-theme="dark"] .expense-lines-table tbody td {
    background: #10283b !important;
    border-color: #2d526c !important;
    color: #d4e7f2 !important;
}
html[data-theme="dark"] .client-list tbody tr:hover td,
html[data-theme="dark"] .report-results tbody tr:hover td,
html[data-theme="dark"] .expense-lines-table tbody tr:hover td {
    background: #15364d !important;
}
html[data-theme="dark"] .status.active {
    background: #143f43 !important;
    color: #71e1d5 !important;
}
html[data-theme="dark"] .status.inactive {
    background: #412a36 !important;
    color: #ffb7c4 !important;
}
html[data-theme="dark"] .success-message {
    background: #113c42 !important;
    border-color: #287a7f !important;
    color: #8fe8df !important;
}
html[data-theme="dark"] .error-message,
html[data-theme="dark"] .login-error,
html[data-theme="dark"] .global-error-message {
    background: #422a36 !important;
    border-color: #7e4557 !important;
    color: #ffc0cb !important;
}
html[data-theme="dark"] .sample-dashboard .status,
html[data-theme="dark"] .project-status {
    background: #163d58 !important;
    color: #77dce7 !important;
    border: 1px solid #286681 !important;
}
body,
button,
input,
select,
textarea {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}
.shell {
    min-height: calc(100vh - 56px) !important;
}
.topbar {
    height: 56px !important;
    padding: 0 28px !important;
}
.sidebar {
    width: 244px !important;
    padding: 18px 14px !important;
}
.main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 24px 30px;
    background: transparent;
}
.page-heading {
    margin-bottom: 18px;
}
.page-heading h1 {
    font-size: 26px !important;
    letter-spacing: -0.02em;
}
.nav-section {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #dcebf5;
}
.nav-group {
    margin: 4px 0;
}
.nav-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: 0.18s ease;
}
.nav-group summary::-webkit-details-marker {
    display: none;
}
.nav-group summary > span:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
}
.nav-arrow {
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
}
.nav-group[open] .nav-arrow {
    transform: rotate(225deg) translate(-2px, -2px);
}
.nav-group-items {
    display: none;
}
.nav-group[open] .nav-group-items {
    display: block;
}
.nav-group-items .nav-link {
    margin-left: 6px;
    font-size: 13px;
}
.nav-group-items .nav-icon {
    font-size: 14px;
}
.nav-link {
    font-weight: 600 !important;
}
.nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-size: 16px;
}
.card,
.client-form-card,
.client-list,
.report-filter,
.report-results {
    border-radius: 14px !important;
    background: #fff;
}
.table-wrap {
    border-color: #d7e7f3 !important;
}
.grid-toolbar {
    color: #547696 !important;
}
.grid-page-size select,
.grid-search input {
    border-color: #cbdfee !important;
    background: #fbfdff !important;
    color: #183e66 !important;
}
.grid-page-button {
    border-color: #cbdfee !important;
    color: #1671ae !important;
}
.grid-page-button:hover:not(:disabled),
.grid-page-button.active {
    background: #e5f5ff !important;
    border-color: #87cdea !important;
    color: #087ec7 !important;
}
.grid-title h2,
.mvc-page h2 {
    color: #102f5b !important;
}
.grid-title p {
    color: #6480a3 !important;
}
.client-list thead th,
.report-results thead th,
.expense-lines-table thead th {
    background: #edf7ff !important;
    border-color: #cbdfee !important;
    color: #254d78 !important;
}
.client-list tbody td,
.report-results tbody td,
.expense-lines-table tbody td {
    border-color: #d7e7f3 !important;
    color: #294d73 !important;
}
.client-list tbody tr:hover td,
.report-results tbody tr:hover td,
.expense-lines-table tbody tr:hover td {
    background: #f3faff !important;
}
.status.active {
    background: #e3f8f4 !important;
    color: #078975 !important;
}
.status.inactive {
    background: #fff3f4 !important;
    color: #ce3f59 !important;
}
.success-message {
    background: #e8fbf6 !important;
    border-color: #9ee7d7 !important;
    color: #087963 !important;
}
.error-message,
.login-error,
.global-error-message {
    background: #fff3f4 !important;
    border-color: #f4b8c3 !important;
    color: #b93751 !important;
}
.edit-link,
.grid-edit,
.user-actions .edit-link {
    background: #e4f3ff !important;
    color: #0875bb !important;
}
.edit-link:hover,
.grid-edit:hover,
.user-actions .edit-link:hover {
    background: #cdeaff !important;
    color: #066eae !important;
}
.delete-link,
.grid-delete,
.user-actions .delete-link {
    background: #fff0f2 !important;
    color: #d24359 !important;
}
.delete-link:hover,
.grid-delete:hover,
.user-actions .delete-link:hover {
    background: #ffe0e5 !important;
    color: #b92742 !important;
}
.sample-dashboard .dashboard-hero h1,
.sample-dashboard .financial-total,
.sample-dashboard .metric-copy strong,
.sample-dashboard .donut-center {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    letter-spacing: -0.02em !important;
}
.sample-dashboard .dashboard-hero h1 {
    font-weight: 750 !important;
}
.sample-dashboard .financial-total,
.sample-dashboard .metric-copy strong {
    font-weight: 700 !important;
}
.sidebar {
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
.sidebar:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 360px;
    background: url("Images/sidebar-building.png") center bottom/cover no-repeat;
    opacity: 0.52;
    pointer-events: none;
}
.sidebar:has(.nav-group[open]) {
    display: flex;
    flex-direction: column;
}
.sidebar:has(.nav-group[open]):after {
    position: relative;
    display: block;
    order: 999;
    flex: 0 0 190px;
    width: calc(100% + 28px);
    height: 190px;
    margin: auto -14px -18px;
    background-size: cover;
}
.sidebar > * {
    position: relative;
    z-index: 1;
}
html[data-theme="dark"] .sidebar:after {
    opacity: 0.16;
    filter: brightness(0.72) saturate(0.78);
}
.sample-dashboard .card-label {
    font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    letter-spacing: 0.01em;
}
.sample-dashboard .financial-card .spark {
    bottom: 3px !important;
    opacity: 0.42;
    mask-image: linear-gradient(to top, transparent 0%, #000 42%, #000 100%);
    -webkit-mask-image: linear-gradient(
        to top,
        transparent 0%,
        #000 42%,
        #000 100%
    );
}
.sample-dashboard .financial-card .spark-fill {
    opacity: 0.12 !important;
}
:root {
    --navy: #102f5b;
    --blue: #087ec7;
    --soft: #eef7ff;
    --line: #d7e7f3;
    --text: #102a4c;
    --muted: #6480a3;
    --white: #fff;
}
body {
    background:
        radial-gradient(circle at 100% 0, #d9f1ff 0, transparent 30%),
        radial-gradient(circle at 0 100%, #e5f8fa 0, transparent 32%), #eef7ff;
    color: var(--text);
}
/* Shared grid accents and hover states use the ocean theme, not the legacy coral palette. */
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child,
.report-results .table-wrap > table tbody td:first-child,
.plain-report-table tbody td:first-child {
    box-shadow: none !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child:before,
.report-results .table-wrap > table tbody td:first-child:before,
.plain-report-table tbody td:first-child:before {
    background: #087ec7 !important;
}
.client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    tr:hover
    td,
.report-results .table-wrap > table tbody tr:hover td,
.plain-report-table tbody tr:hover td,
.expense-lines-table tbody tr:hover td {
    background: #edf8ff !important;
    border-color: #c9e4f6 !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child,
html[data-theme="dark"]
    .report-results
    .table-wrap
    > table
    tbody
    td:first-child,
html[data-theme="dark"] .plain-report-table tbody td:first-child {
    box-shadow: none !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    td:first-child:before,
html[data-theme="dark"]
    .report-results
    .table-wrap
    > table
    tbody
    td:first-child:before,
html[data-theme="dark"] .plain-report-table tbody td:first-child:before {
    background: #75c9ff !important;
}
html[data-theme="dark"]
    .client-list:not(.expense-lines-card):not(.project-expense-details)
    .table-wrap
    > table
    tbody
    tr:hover
    td,
html[data-theme="dark"] .report-results .table-wrap > table tbody tr:hover td,
.plain-report-table tbody tr:hover td,
html[data-theme="dark"] .expense-lines-table tbody tr:hover td {
    background: #183249 !important;
    border-color: #3b607d !important;
}
.topbar {
    background: linear-gradient(90deg, #102f5b, #174a70) !important;
    border-color: #245a7f !important;
}
.sidebar {
    background: linear-gradient(
        180deg,
        #102f5b,
        #123c61 62%,
        #155574
    ) !important;
}
.nav-label {
    color: #8eddf0 !important;
}
.nav-link,
.nav-group summary {
    color: #e7f6ff !important;
}
.nav-link:hover,
.nav-link.active,
.nav-group summary:hover {
    background: linear-gradient(90deg, #087ec7, #0baeb9) !important;
    border-color: #63d4df !important;
    color: #fff !important;
}
.page-heading h1,
.metric-value,
.panel-heading h2,
.quick-actions h2 {
    color: #102f5b !important;
}
.page-heading p,
.metric-label,
.panel-heading p {
    color: #6480a3 !important;
}
.primary-btn,
.chart-view-details {
    background: linear-gradient(135deg, #087ec7, #0baeb9) !important;
    border-color: #087ec7 !important;
    box-shadow: 0 8px 18px #087ec738 !important;
}
.primary-btn:hover,
.chart-view-details:hover {
    background: linear-gradient(135deg, #066eae, #078f9a) !important;
    border-color: #066eae !important;
    box-shadow: 0 11px 22px #087ec745 !important;
}
.secondary-btn {
    border-color: #c9dfef !important;
    color: #135488 !important;
}
.secondary-btn:hover {
    background: #e9f7ff !important;
    color: #087ec7 !important;
}
.card,
.report-filter,
.report-results,
.login-card {
    border-color: #d7e7f3 !important;
    box-shadow: 0 10px 28px #164a740d !important;
}
.field input,
.field textarea,
.field select,
select,
input[type="date"],
input[type="number"],
input[type="text"],
input[type="password"],
input[type="email"] {
    border-color: #cbdfee !important;
    background: #fbfdff !important;
}
.field input:focus,
.field textarea:focus,
.field select:focus,
select:focus,
input:focus {
    border-color: #087ec7 !important;
    box-shadow: 0 0 0 4px #087ec71c !important;
}
.client-list tbody tr:hover,
.report-grid tbody tr:hover {
    background: #edf8ff !important;
}
.logout,
.user-menu .logout {
    background: #e9f7ff !important;
    border-color: #8fd1ec !important;
    color: #0875bb !important;
    box-shadow: 0 6px 14px #164a741c !important;
}
.logout:hover,
.user-menu .logout:hover {
    background: linear-gradient(135deg, #087ec7, #0baeb9) !important;
    border-color: #087ec7 !important;
    color: #fff !important;
}
.user-chip {
    background: #143d61 !important;
    border-color: #44799d !important;
}
.user-chip .avatar {
    background: linear-gradient(135deg, #54d5dc, #1ba3d4) !important;
    color: #07365f !important;
}
.user-role {
    color: #b7deef !important;
}
.theme-toggle,
.login-theme-control .theme-toggle {
    color: #bdeaff !important;
}
.theme-toggle:hover,
.login-theme-control .theme-toggle:hover {
    color: #62dce1 !important;
    background: transparent !important;
}
.login-page {
    background:
        radial-gradient(circle at 15% 10%, #cceeff 0, transparent 35%),
        radial-gradient(circle at 85% 85%, #c9f1ed 0, transparent 37%),
        linear-gradient(135deg, #edf8ff, #f8fcff) !important;
}
.login-card h1 {
    color: #102f5b !important;
}
html[data-theme="dark"] {
    --navy: #edf8ff;
    --blue: #57d4e1;
    --soft: #091a2a;
    --line: #294a63;
    --text: #e4f3fb;
    --muted: #a8c4d6;
    --white: #102437;
}
html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 100% 0, #154764 0, transparent 30%),
        radial-gradient(circle at 0 100%, #10394c 0, transparent 34%),
        linear-gradient(135deg, #091827, #102b3e) !important;
    color: #e4f3fb;
}
html[data-theme="dark"] .topbar {
    background: linear-gradient(90deg, #0b2237, #123953) !important;
    border-color: #28536e !important;
}
html[data-theme="dark"] .sidebar {
    background: linear-gradient(
        180deg,
        #0b2237,
        #0f314a 62%,
        #12465d
    ) !important;
}
html[data-theme="dark"] .nav-label {
    color: #76dce6 !important;
}
html[data-theme="dark"] .nav-link,
html[data-theme="dark"] .nav-group summary {
    color: #d9effa !important;
}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.active,
html[data-theme="dark"] .nav-group summary:hover {
    background: linear-gradient(90deg, #087ec7, #0b9fad) !important;
    border-color: #63d4df !important;
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .report-filter,
html[data-theme="dark"] .report-results,
html[data-theme="dark"] .login-card {
    background: #10283b !important;
    border-color: #294b64 !important;
    box-shadow: 0 12px 30px #00000030 !important;
}
html[data-theme="dark"] .page-heading h1,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .panel-heading h2,
html[data-theme="dark"] .quick-actions h2,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3 {
    color: #edf8ff !important;
}
html[data-theme="dark"] .page-heading p,
html[data-theme="dark"] .metric-label,
html[data-theme="dark"] .panel-heading p {
    color: #a8c4d6 !important;
}
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select,
html[data-theme="dark"] select,
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"] {
    background: #0c2031 !important;
    border-color: #315873 !important;
    color: #eef9ff !important;
}
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field textarea:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] input:focus {
    border-color: #57d4e1 !important;
    box-shadow: 0 0 0 4px #57d4e126 !important;
}
html[data-theme="dark"] .primary-btn,
html[data-theme="dark"] .chart-view-details {
    background: linear-gradient(135deg, #087ec7, #0baeb9) !important;
    border-color: #42cbd7 !important;
}
html[data-theme="dark"] .secondary-btn {
    background: #16354b !important;
    border-color: #3a617a !important;
    color: #c9e9f5 !important;
}
html[data-theme="dark"] .secondary-btn:hover {
    background: #1c465e !important;
    color: #fff !important;
}
html[data-theme="dark"] .logout,
html[data-theme="dark"] .user-menu .logout {
    background: #153c56 !important;
    border-color: #3b7699 !important;
    color: #bcecf7 !important;
}
html[data-theme="dark"] .logout:hover,
html[data-theme="dark"] .user-menu .logout:hover {
    background: linear-gradient(135deg, #087ec7, #0baeb9) !important;
    border-color: #57d4e1 !important;
    color: #fff !important;
}
html[data-theme="dark"] .user-chip {
    background: #102f48 !important;
    border-color: #38627e !important;
}
html[data-theme="dark"] .user-chip .avatar {
    background: linear-gradient(135deg, #5edce0, #238ec9) !important;
    color: #082846 !important;
}
html[data-theme="dark"] .login-page {
    background:
        radial-gradient(circle at 15% 10%, #15516b 0, transparent 35%),
        radial-gradient(circle at 85% 85%, #104356 0, transparent 37%),
        linear-gradient(135deg, #081827, #102b3f) !important;
}
html[data-theme="dark"] th {
    background: #16364d !important;
    color: #d6edf8 !important;
}
html[data-theme="dark"] th,
html[data-theme="dark"] td {
    border-color: #2d526c !important;
    color: #d4e7f2 !important;
}