@font-face { font-family: Cashift; src: url('../fonts/alfont_com_Somar-Regular.otf'); font-weight: 400; font-display: swap; }
@font-face { font-family: Cashift; src: url('../fonts/alfont_com_Somar-Medium.otf'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: Cashift; src: url('../fonts/alfont_com_Somar-Bold.otf'); font-weight: 700 900; font-display: swap; }
:root { --app-primary: #21765e; --app-text: #243d33; --app-muted: #586e63; --app-border: #dce6e0; --app-background: #f5f8f6; --app-radius: 14px; --app-sidebar-width: 260px; }
html { scroll-padding-top: 90px; }
body { margin: 0; }
#app:has(.app-shell) { display: block !important; width: 100%; }
.app-shell { width: 100%; min-height: 100vh; color: var(--app-text); background: var(--app-background); font: 16px/1.6 Cashift, Tahoma, Arial, sans-serif; }
.app-shell *, .app-shell *::before, .app-shell *::after { box-sizing: border-box; }
.app-workspace { min-width: 0; margin-inline-start: var(--app-sidebar-width); transition: margin-inline-start .15s ease; }
.app-navigation { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--app-sidebar-width); z-index: 1100; display: flex; flex-direction: column; gap: 20px; padding: 24px 16px; overflow-y: auto; background: #115c49; color: #fff; }
.app-nav-collapsed .app-navigation { display: none; }
.app-nav-collapsed .app-workspace { margin-inline-start: 0; }
.app-header { position: sticky; top: 0; z-index: 1050; min-height: 76px; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-bottom: 1px solid var(--app-border); }
.app-header-identity, .app-header-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-header-identity strong { display: block; font-size: 1rem; overflow-wrap: anywhere; }
.app-header-identity small { display: block; color: var(--app-muted); font-size: .8rem; }
.app-icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; flex-shrink: 0; background: transparent; border: 1px solid var(--app-border); border-radius: 10px; color: inherit; cursor: pointer; }
.app-brand { display: flex; gap: 12px; align-items: center; color: #fff !important; text-decoration: none; padding: 0 8px 20px; border-bottom: 1px solid #ffffff30; }
.app-brand img { width: 44px; height: 44px; border-radius: 10px; }
.app-brand strong { display: block; font-size: 1.25rem; }
.app-brand small { color: #deeee6; }
.app-menu-search label { display: block; margin-bottom: 6px; font-size: .85rem; color: #deeee6; }
.app-menu-search input { width: 100%; min-height: 44px; border: 1px solid #ffffff55; border-radius: 9px; padding: 8px 12px; color: #fff; background: #ffffff12; font: inherit; }
.app-menu-search input::placeholder { color: #dfebe6; }
.app-menu { display: flex; flex-direction: column; gap: 5px; }
.app-menu a, .app-menu summary { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border-radius: 9px; color: #e4f2eb; text-decoration: none; font-weight: 500; cursor: pointer; }
.app-menu a.active { background: #ffffff22; color: #fff; box-shadow: inset -3px 0 #f5b743; }
[dir=ltr] .app-menu a.active { box-shadow: inset 3px 0 #f5b743; }
.app-menu a:hover, .app-menu summary:hover { background: #ffffff18; color: #fff; }
.app-menu-group summary { list-style: none; }
.app-menu-group summary span { flex: 1; }
.app-menu-group summary::-webkit-details-marker { display: none; }
.app-menu-group > a { margin-inline-start: 20px; font-size: .9rem; }
.app-nav-status { padding: 12px; color: #fff; font-size: .9rem; }
.app-nav-status button { display: block; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 8px; padding: 8px 14px; margin-top: 12px; }
.app-support { margin-top: auto; display: flex; gap: 10px; padding: 14px; color: #fff !important; border-top: 1px solid #ffffff30; }
.app-nav-backdrop, .app-nav-close { display: none; }
.app-shell .app-content { padding: 28px; width: 100%; min-width: 0; outline: none; }
.app-shell .app-content.index_cards { width:100% !important; margin:0 !important; background:transparent; }
.app-shell .app-content > .content, .app-shell .app-content .content .single_project { width:100% !important; margin:0 !important; padding:0; }
.app-content > .content, .app-content .single_project, .app-content > .index_cards { width: 100% !important; margin: 0 !important; padding: 0; min-width: 0; }
.app-content section.content { padding: 0; margin-inline: 0; width: 100%; }
.app-content .welcome { width: 100%; margin-inline: 0; }
.app-content .mud-typography, .app-content .mud-input, .app-content .mud-table, .app-content button, .app-header button { font-family: Cashift, Tahoma, Arial, sans-serif; }
.app-content .mud-table { border: 1px solid var(--app-border); border-radius: var(--app-radius); box-shadow: none; overflow: hidden; }
.app-content .mud-table-head { background: #eff5f1; }
.app-content .mud-table-cell { font-size: .95rem; line-height: 1.65; }
.app-content .mud-paper { border-radius: var(--app-radius); }
.app-content .mud-input-control, .app-content .mud-grid-item { min-width: 0; }
.app-content .mud-button-root { border-radius: 9px; min-height: 40px; text-transform: none; }
.app-content .mud-table-pagination { flex-wrap: wrap; gap: 4px; min-height: 58px; }
.app-content .mud-table-pagination-toolbar { flex-wrap: wrap; height: auto; min-height: 58px; padding: 8px 12px; }
.app-content .mud-table-pagination-actions { margin-inline: 8px 0; }
.app-content .new_job, .app-content .work_btn { background: var(--app-primary); border-radius: 9px; }
.app-page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.app-page-heading h1 { margin: 0; font-size: 1.8rem; font-weight: 700; line-height: 1.4; }
.app-page-heading p { color: var(--app-muted); margin: 6px 0 0; max-width: 65ch; }
.app-eyebrow { color: var(--app-muted); font-size: .85rem; }
.app-page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.app-panel { padding: 24px; background: #fff; border: 1px solid var(--app-border); border-radius: var(--app-radius); margin-bottom: 20px; }
.app-empty { display: grid; justify-items: center; gap: 12px; padding: 40px 20px; text-align: center; color: var(--app-muted); }
.app-empty h3 { color: var(--app-text); font-size: 1.1rem; margin: 0; }
.app-empty p { margin: 0; max-width: 52ch; }
.app-empty > .mud-icon-root { font-size: 36px; }
.app-filter-panel { background: #fff; padding: 18px 20px; border: 1px solid var(--app-border); border-radius: var(--app-radius); margin-bottom: 18px; }
.app-filter-panel > summary { cursor: pointer; font-weight: 600; padding: 4px 0 12px; }
.app-form-message { margin: 12px 0; padding: 14px 18px; border-inline-start: 4px solid #ba303b; border-radius: 8px; color: #8e2430; background: #fff3f3; }
.app-form-message:empty { display: none; }
.app-financial-summary { border: 1px solid var(--app-border); border-radius: var(--app-radius); padding: 20px; background: #f4f8f5; margin-block: 20px; }
.app-financial-summary dl { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 16px; margin: 0; }
.app-financial-summary dt { color: var(--app-muted); font-weight: 400; }
.app-financial-summary dd { font-size: 1.3rem; font-weight: 700; margin: 4px 0; font-variant-numeric: tabular-nums; }
.app-financial-summary p { margin: 12px 0 0; color: var(--app-muted); }
.app-amount-negative { color: #a52332; }
.app-skip-link { position: fixed; inset-block-start: -100px; inset-inline-start: 20px; z-index: 2000; background: #fff; color: var(--app-primary); padding: 12px 20px; border: 2px solid var(--app-primary); border-radius: 8px; }
.app-skip-link:focus { inset-block-start: 8px; }
.app-shell :focus-visible { outline: 3px solid #c48016; outline-offset: 3px; }
.app-shell .app-content:focus { outline:none; }
.app-content .mud-button-filled-primary, .app-content a.new_job { color:#fff; }
.app-content .stats-card-icon .mud-icon-root { color:var(--app-primary); }
.app-financial-summary dd { direction:ltr; unicode-bidi:isolate; text-align:start; }
[dir=rtl] .app-financial-summary dd { text-align:right; }
.app-content .modal .modal-dialog { width: calc(100% - 32px); }
.app-company-identity { display:flex; align-items:center; gap:12px; }
.app-company-identity img { width:44px; height:44px; object-fit:contain; border-radius:8px; border:1px solid var(--app-border); }
.app-company-identity small { display:block; color:var(--app-muted); }
.app-assignment-summary { padding:16px; margin-bottom:20px; background:#f1f7f3; border:1px solid #ccded3; border-radius:12px; }
.app-assignment-summary p { margin:6px 0; }
.app-table-option { display:flex; align-items:center; gap:10px; padding:12px 18px; color:var(--app-muted); cursor:pointer; }
.app-table-option input { width:18px; height:18px; accent-color:var(--app-primary); }
.app-shortcuts { margin-bottom:24px; }
.app-shortcuts h2 { font-size:1.25rem; margin-bottom:16px; }
.app-shortcuts nav { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.app-shortcuts a { display:flex; align-items:center; gap:12px; padding:18px; border:1px solid var(--app-border); border-radius:12px; background:#fff; color:var(--app-primary); text-decoration:none; font-weight:600; }
.app-shortcuts a span { flex:1; }
.app-opportunity-editor .app-opportunity-form .form-group { margin-bottom:18px; }
.app-opportunity-editor .form-group > label { display:block; margin-bottom:6px; color:var(--app-text); }
.app-opportunity-editor .buttons { gap:12px; margin-top:20px; }
.app-opportunity-editor .app-primary-button { background:var(--app-primary); color:#fff; min-height:44px; padding:10px 28px; border-radius:9px; }
.app-opportunity-editor .title_step { font-size:1.2rem; }
.app-opportunity-editor .text_step { display:block; font-size:.9rem; color:var(--app-muted); margin-bottom:20px; }
.app-content .app-filter-panel { margin-block:18px !important; }
.app-content .app-filter-panel .mud-paper { box-shadow:none; }
.app-content .app-financial-summary h3 { font-size:1.1rem; margin-bottom:16px; }
.app-content .modal .modal-content { border-radius: var(--app-radius); }
.app-content .employee-modal.show { position:fixed; inset:0; z-index:1400; background:#102d2480; }
.app-content .employee-modal .modal-dialog { height:calc(100dvh - 32px); max-height:calc(100dvh - 32px); min-height:0; margin:16px auto; }
.app-content .employee-modal-footer { flex-wrap:wrap; }
.app-content .employee-modal-footer .mud-alert { flex-basis:100%; }
.app-content .status-option.approve.active { background:#21765e; border-color:#21765e; }
.app-content .status-option.reject.active { background:#ba303b; border-color:#ba303b; }
@media (max-width: 1023px) {
    .app-workspace, .app-nav-collapsed .app-workspace { margin-inline-start: 0; }
    .app-navigation, .app-nav-collapsed .app-navigation { display: none; }
    .app-nav-open .app-navigation { display: flex; width: min(300px,calc(100vw - 48px)); z-index: 1300; }
    .app-nav-open .app-nav-backdrop { display: block; position: fixed; inset: 0; background: #102d2480; border: 0; z-index: 1250; }
    .app-nav-close { display: inline-grid; align-self: flex-end; color: #fff; }
    .app-header { padding: 10px 16px; min-height: 68px; }
    .app-shell .app-content { padding: 20px; }
}
@media (max-width: 599px) {
    .app-content .employee-modal .status-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .app-content .employee-modal .status-option { padding:12px; }
    .app-content .modern-tabs { flex-wrap:wrap; overflow:visible; }
    .app-content .modern-tab-btn { flex:1 1 45%; min-width:0; white-space:normal; }
    .app-content .stats-cards-wrapper { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .app-content .stats-card { padding:14px; min-height:92px; }
    .app-content .stats-card-icon { width:32px; height:32px; }
    .app-content .stats-card-icon .mud-icon-root { font-size:22px; }
    .app-content .project-metrics { gap:8px; margin-block:16px; }
    .app-content .project-metrics .metric { padding:10px; gap:6px; }
    .app-content .project-metrics .metric-icon { display:none; }
    .app-content .project-metrics .metric > span:not(.metric-icon) { min-height:0; line-height:1.4; }
    .app-content .statistics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .app-content .statistics .card_statistics { width:auto; min-width:0; margin:0; padding:14px; }
    .app-content .mud-table-pagination-toolbar { flex-wrap:wrap; justify-content:center; min-height:60px; height:auto; }
    .app-financial-summary { padding:16px; }
    .app-financial-summary dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .app-financial-summary dd { font-size:1.1rem; overflow-wrap:anywhere; }
    .app-shell .app-content { padding: 16px 12px; }
    .app-header { padding: 10px 12px; gap: 6px; }
    .app-header-identity, .app-header-actions { gap: 6px; }
    .app-header-identity strong { font-size: .9rem; max-width: 140px; }
    .app-header-actions .mud-button-root { min-width: 40px; padding-inline: 6px; }
    .app-page-heading { gap: 14px; margin-bottom: 18px; }
    .app-page-heading h1 { font-size: 1.45rem; }
    .app-panel, .app-filter-panel { padding: 16px; }
    .app-content .mud-table-cell { overflow-wrap: anywhere; }
    .app-content .mud-table-pagination-toolbar > * { margin-block: 3px; }
}
@media (prefers-reduced-motion: reduce) { .app-shell *, .app-shell *::before, .app-shell *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }