/* EsHub uses Luna's dark palette and components with a compact application layout. */
:root { color-scheme: dark; }
html, body { min-height: 100%; margin: 0; }
body { background: #191b21; color: #d8dbe3; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; }
a:hover { text-decoration: none; }
.app-shell { min-height: 100vh; display: flex; }
.app-sidebar { width: 230px; flex: 0 0 230px; background: #202229; border-right: 1px solid #30333d; }
.app-brand { min-height: 82px; display: flex; align-items: center; gap: 12px; padding: 20px 24px; color: #f4f5f8; font-size: 20px; font-weight: 700; letter-spacing: .02em; }
.app-brand:hover { color: #fff; }
.app-brand small { display: block; color: #9297a5; font-size: 11px; font-weight: 400; letter-spacing: .02em; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #f6a821; color: #23252b; font-weight: 800; }
.sidebar-label { color: #777d8c; font-size: 10px; font-weight: 700; letter-spacing: .12em; margin: 28px 24px 12px; }
.sidebar-link { display: flex; align-items: center; gap: 13px; margin: 0 12px; padding: 12px; border-radius: 7px; color: #aeb3c0; }
.app-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar-link.active { color: #f8bd55; background: #34302a; }
.sidebar-link i { width: 19px; text-align: center; }
.app-main { flex: 1; min-width: 0; }
.app-topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; background: #202229; border-bottom: 1px solid #30333d; }
.topbar-title { color: #f1f2f5; font-weight: 600; }
.topbar-title span { padding: 0 9px; color: #666c79; }
.user-menu { display: flex; gap: 10px; align-items: center; color: #d4d6dd; }
.user-menu form { margin: 0 0 0 12px; }
.user-menu .year-form { display: flex; align-items: center; gap: 8px; margin: 0 12px 0 0; }
.year-form label { margin: 0; color: #b9bec8; }
.year-form select { width: 90px; height: 34px; padding: 4px 8px; }
.user-avatar { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 50%; background: #393c47; color: #c5cad4; }
.logout-button { border: 1px solid #484c58; background: transparent; border-radius: 5px; color: #bfc3cd; padding: 6px 10px; cursor: pointer; }
.logout-button:hover { color: #fff; border-color: #9297a5; }
.app-content { padding: 22px 40px 60px; max-width: 1800px; margin: 0 auto; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 30px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .13em; color: #f1ae3e; margin-bottom: 8px; }
h1 { margin: 0 0 7px; color: #f3f4f7; font-size: 28px; font-weight: 600; }
.page-heading p, .section-title p { color: #999fac; margin: 0; }
.stat-card { display: flex; align-items: center; gap: 14px; min-width: 215px; padding: 15px 18px; background: #262932; border: 1px solid #393c46; border-radius: 8px; }
.stat-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; color: #f2b24a; background: #443b2e; font-size: 18px; }
.stat-card small, .stat-card strong { display: block; }.stat-card small { color: #a7acb8; }.stat-card strong { color: #fff; font-size: 22px; line-height: 1.3; }
.surface { background: #262932; border: 1px solid #393c46; border-radius: 8px; margin-bottom: 22px; }
.filters-card { padding: 24px; }.section-title h2, .table-heading h2 { margin: 0 0 5px; color: #f0f1f4; font-size: 17px; font-weight: 600; }
.filter-row { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.account-filters, .import-form { display: flex; align-items: end; gap: 18px; flex-wrap: wrap; margin: 0; }.field-group label, .file-label { display: block; color: #b9bec8; font-size: 12px; font-weight: 600; margin-bottom: 7px; }
.account-select { min-width: 175px; height: 38px; }.hidden-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; color: #d0d3dc; font-weight: 400; cursor: pointer; }.hidden-filter input { accent-color: #f6a821; }
.import-form { gap: 10px; }.import-form .file-label { position: absolute; width: 1px; height: 1px; overflow: hidden; }.import-form input[type=file] { max-width: 240px; color: #aeb3be; font-size: 12px; }.import-form input::file-selector-button { padding: 8px 10px; margin-right: 8px; color: #e1e3e8; background: #373a44; border: 1px solid #515560; border-radius: 5px; cursor: pointer; }.btn-accent { border-radius: 5px; padding: 8px 14px; font-weight: 600; }.btn-accent i { margin-right: 5px; }
.table-heading { padding: 22px 24px 17px; }.table-heading span { color: #999fac; font-size: 12px; }.movements-table { margin: 0; color: #c9cdd6; }.movements-table thead th { color: #9da4b1; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; background: #2c2f39; border: 0; white-space: nowrap; }.movements-table th, .movements-table td { padding: 13px 16px; vertical-align: middle; border-top: 1px solid #383b45; }.movements-table tbody tr:hover { background: #2e313b; }.movements-table .amount { text-align: right; white-space: nowrap; font-weight: 600; }.positive { color: #73cba4; }.negative { color: #e39391; }.date-cell { white-space: nowrap; color: #aeb4c0; }.description-cell { min-width: 220px; color: #e3e5eb; }.row-action { color: #d7dbe4; background: #363943; border: 1px solid #50545f; border-radius: 5px; padding: 5px 10px; cursor: pointer; }.row-action:hover { color: #fff; border-color: #f1ae3e; }.empty-state { text-align: center; padding: 40px !important; color: #999fac; }
.content > div { opacity: 1; }
@media (max-width: 767px) { .app-shell { display: block; }.app-sidebar { width: 100%; display: flex; align-items: center; border-bottom: 1px solid #393c46; }.app-brand { min-height: 65px; padding: 12px 16px; }.sidebar-label { display: none; }.sidebar-link { margin: 0; }.app-topbar { height: 58px; padding: 0 16px; }.app-content { padding: 25px 16px; }.page-heading { align-items: flex-start; flex-direction: column; }.stat-card { min-width: 0; width: 100%; }.user-name { display: none; }.filter-row { align-items: stretch; }.account-filters, .import-form { width: 100%; }.topbar-title { font-size: 12px; } }

.expense-form { margin-top: 24px; }
.expense-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.expense-fields .field-group { flex: 1 1 150px; }
.expense-fields .expense-description { flex: 3 1 260px; }
.expense-fields .form-control { height: 38px; }
.expense-fields .btn { margin-top: 25px; }
.expense-fields .text-danger { display: block; font-size: 12px; margin-top: 5px; }
@media (max-width: 767px) { .app-sidebar nav { display: flex; flex-wrap: wrap; } .expense-fields .btn { margin-top: 0; } }
.summary-table th { color: #e3e5eb; font-weight: 600; width: 32%; }
.summary-table .amount { width: 170px; }
.summary-note { padding: 14px 24px; margin: 0; color: #aeb4c0; }
.personal-summary { overflow: hidden; }
.summary-name { padding: 12px 22px; background: #f2b12f; color: #24262d; font-size: 18px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.personal-summary .summary-table th, .personal-summary .summary-table td.amount { background: #c9d9ef; color: #18283a; border-color: #a7bfdd; }
.personal-summary .summary-table tr:nth-child(2) th, .personal-summary .summary-table tr:nth-child(2) td.amount { background: #a9c6e6; }
.personal-summary .summary-table tr.summary-below th, .personal-summary .summary-table tr.summary-below td.amount { background: #bd5155; border-color: #a9484c; color: #fff; }
.personal-summary .summary-table tr.summary-above th, .personal-summary .summary-table tr.summary-above td.amount { background: #438764; border-color: #397858; color: #fff; }
.reimbursements-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.reimbursements-overview > .surface { margin-bottom: 22px; min-width: 0; }
@media (max-width: 1050px) { .reimbursements-overview { grid-template-columns: 1fr; gap: 0; } }
.sidebar-sublink { margin-left: 34px; font-size: 13px; }
.invoice-file-list { margin: 22px 0 12px; padding-left: 22px; color: #d8dbe3; line-height: 1.9; }
.movement-search { display: flex; align-items: end; flex-wrap: wrap; gap: 14px; padding: 0 24px 20px; }
.movement-search .field-group { flex: 1 1 160px; }
.movement-search .search-description { flex: 2 1 260px; }
.movement-search .form-control { height: 38px; }
.movement-search .btn { height: 38px; }
.movement-pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 24px 20px; color: #999fac; font-size: 12px; }
.movement-pagination .pagination { margin: 0; }
.movement-pagination .page-link { color: #d8dbe3; background: #30333d; border-color: #454955; }
.movement-pagination .page-item.active .page-link { color: #24262d; background: #f2b12f; border-color: #f2b12f; }
.movement-pagination .page-item.disabled .page-link { color: #777d8c; background: #292c34; }
@media (max-width: 767px) { .movement-search { padding-left: 16px; padding-right: 16px; }.movement-search .field-group, .movement-search .search-description { flex-basis: 100%; }.movement-pagination { align-items: flex-start; flex-direction: column; padding-left: 16px; padding-right: 16px; }.movement-pagination .pagination { flex-wrap: wrap; } }
.split-select { max-width: 150px; }
.payment-status { display: inline-block; border-radius: 5px; padding: 4px 9px; font-weight: 600; white-space: nowrap; }
.payment-paid { background: #254b3b; color: #9be3b9; }
.payment-unpaid { background: #583637; color: #ffc1bd; }
.movement-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.movement-actions form { margin: 0; }
.invoice-pending { color: #f8bd55; white-space: nowrap; }
.invoice-due-form { display: flex; align-items: center; gap: 8px; margin: 0; }
.invoice-due-form .form-control { width: 155px; min-width: 155px; }
.invoice-detail-row td { background: #22252d; color: #c9cdd6; white-space: pre-wrap; overflow-wrap: anywhere; }
.invoice-detail-label { color: #f1ae3e; font-size: 11px; font-weight: 700; margin-right: 8px; text-transform: uppercase; }
.summary-open { border: 0; padding: 0; color: #f8bd55; background: transparent; text-decoration: underline; cursor: pointer; font-weight: 600; }
.summary-dialog { width: min(950px, 94vw); max-height: 85vh; border: 1px solid #50545f; border-radius: 8px; padding: 20px; background: #262932; color: #d8dbe3; }
.summary-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.dialog-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 16px; }
.dialog-heading h2, .cash-heading h2 { color: #f0f1f4; font-size: 17px; margin: 0; }
.dialog-total { text-align: right; font-weight: 700; padding: 16px 0 0; }
.cash-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: start; }
.cash-card { min-width: 0; overflow: hidden; }
.cash-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px; }
.cash-heading strong { color: #f8bd55; white-space: nowrap; }
.cash-note { padding: 0 20px; color: #999fac; }
.cash-add { margin: 0 20px 16px; }
.cash-add summary { cursor: pointer; display: inline-block; }
.cash-add-form { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-top: 12px; }
.cash-add-form .field-group { flex: 1 1 140px; }
.cash-add-form label { width: 100%; }
@media (max-width: 1300px) { .cash-cards { grid-template-columns: 1fr; gap: 0; } }
.cash-opening-form { margin-top: 18px; }
.month-navigation { display: flex; align-items: center; gap: 8px; }
.month-navigation-button { display: grid; place-items: center; width: 38px; height: 38px; font-size: 18px; line-height: 1; }
.month-navigation-button.disabled { opacity: .45; cursor: default; }
.movements-table .cash-secondary { font-size: 11px; }
.salary-input { width: 115px; min-width: 115px; text-align: right; }
.salary-actions { display: flex; align-items: center; gap: 8px; }
.cash-row-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.cash-row-actions > form { margin: 0; }
.cash-row-actions summary { cursor: pointer; display: inline-block; }
.cash-row-actions details[open] { flex-basis: 100%; min-width: 250px; }
.cash-icon-actions { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.cash-icon-actions > form { margin: 0; }
.cash-icon-actions details[open] { flex: 0 0 auto; min-width: 250px; }
.cash-icon-button { display: inline-grid !important; place-items: center; width: 34px; height: 34px; padding: 0; }
.cash-edit-dialog { width: min(440px, calc(100vw - 32px)); max-width: calc(100vw - 32px); }
.cash-edit-form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.cash-edit-form .field-group { flex: none; width: 100%; min-width: 0; }
.cash-edit-form .form-control { width: 100%; }
.cash-edit-form .btn { align-self: flex-start; }
.hardware-totals { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; padding: 18px 24px; color: #f0f1f4; }
.incomplete-warning { background: #fff3cd; border-color: #e0bd57; color: #493600; }
.incomplete-warning a, .incomplete-warning a:visited { color: #15477a; font-weight: 600; text-decoration: underline; }
.incomplete-warning a:hover, .incomplete-warning a:focus { color: #092b4e; }