.costs-panel { display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; height:100%; overflow-y:auto; overflow-x:hidden; padding:2px 8px 22px 2px; scrollbar-color:#355f49 transparent; scrollbar-width:thin; }
.costs-panel[hidden], .costs-panel [hidden] { display:none !important; }
.costs-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.costs-header h3 { margin:3px 0; font-size:25px; }
.costs-header p { margin:0; color:#819189; }
.costs-header>div:last-child { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.costs-header button,.costs-filters button { border:1px solid #34493e; background:#17251e; color:#dfe9e3; border-radius:8px; padding:9px 13px; cursor:pointer; }
.costs-header button:focus-visible,.costs-filters button:focus-visible,.costs-category-bar:focus-visible { outline:2px solid #5bd889; outline-offset:2px; }
.costs-filters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px 9px; align-items:end; padding:10px; min-width:0; overflow:visible; border:1px solid #293a31; background:#132019; border-radius:11px; }
.costs-filters label,.costs-modal label { display:flex; flex-direction:column; gap:5px; min-width:0; font-size:12px; color:#a9b8b0; }
.costs-filters input,.costs-filters select,.costs-modal input,.costs-modal select,.costs-modal textarea { box-sizing:border-box; width:100%; min-width:0; border:1px solid #34483d; background:#101a15; color:#edf4f0; border-radius:7px; padding:8px; }
.costs-competence { position:relative; display:grid; gap:5px; min-width:0; align-self:end; }
.costs-competence>span { font-size:12px; color:#a9b8b0; }
.costs-competence{min-width:0;overflow:visible}
.costs-period-control{display:flex;min-width:0;gap:4px}
.costs-period-control button{flex:0 0 28px;min-width:0;padding:8px 4px;white-space:nowrap}
#costsPeriodButton{flex:1 1 0;overflow:hidden;text-overflow:ellipsis}
#costsPeriodButton{overflow:hidden;color:#e6f1e9;font-weight:650;text-overflow:ellipsis}
.costs-period-popover{position:absolute;z-index:30;top:calc(100% + 7px);left:0;width:250px;padding:10px;border:1px solid rgba(100,166,121,.34);border-radius:11px;background:rgba(11,25,20,.985);box-shadow:0 18px 42px rgba(0,0,0,.42)}
.costs-period-popover header{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:6px;margin-bottom:8px}
.costs-period-popover select,.costs-period-popover button{min-width:0;border:1px solid #34483d;border-radius:7px;background:#13231b;color:#dfeae3}
.costs-period-popover select{padding:7px;text-align:center}
.costs-picker-months{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.costs-picker-months button{padding:8px 4px}
.costs-picker-months button:hover,.costs-picker-months button:focus-visible{border-color:#5bd87a;background:rgba(91,216,122,.1);outline:none}
.costs-picker-months button.is-selected{border-color:#65d57d;background:#2d7547;color:#f4fff6;font-weight:700}
#costsPeriodAll{width:100%;margin-top:8px;padding:8px}
.costs-filter-actions { display:flex; gap:7px; align-items:end; }
.costs-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.costs-summary article { min-width:0; border:1px solid #2d4035; background:linear-gradient(145deg,#15251d,#101b15); border-radius:11px; padding:10px 12px; }
.costs-summary span { display:block; color:#91a399; font-size:12px; }
.costs-summary strong { display:block; overflow:hidden; margin-top:3px; color:#f0f6f2; font-size:18px; text-overflow:ellipsis; white-space:nowrap; }
.costs-dashboard { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); gap:10px; }
.costs-dashboard>section { min-width:0; border:1px solid #2d4035; background:linear-gradient(155deg,#13221a,#0e1914); border-radius:12px; padding:13px; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.costs-dashboard h4 { margin:0 0 12px; color:#b9c9c0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.costs-chart { min-height:190px; position:relative; }
.costs-chart-empty { display:grid; min-height:170px; place-items:center; margin:0; color:#82938a; text-align:center; }
.costs-line-chart{display:grid;grid-template-columns:58px minmax(420px,1fr);height:202px;overflow-x:auto;overflow-y:hidden;padding-top:5px;scrollbar-color:#355f49 transparent;scrollbar-width:thin}
.costs-line-axis{display:flex;flex-direction:column;justify-content:space-between;height:176px;padding:0 8px 0 0;color:#73877c;font-size:9px;text-align:right;white-space:nowrap}
.costs-line-plot{position:relative;height:176px;margin:0 12px 26px 0}
.costs-line-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.costs-grid-line{stroke:rgba(132,164,144,.13);stroke-width:1;vector-effect:non-scaling-stroke}
.costs-line-area{fill:rgba(74,165,107,.085)}
.costs-line-stroke{fill:none;stroke:#58bd79;stroke-width:2.1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(38,111,66,.18))}
.costs-line-point{position:absolute;width:14px;height:14px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);cursor:pointer}
.costs-line-point>i{display:block;width:7px;height:7px;margin:auto;border:2px solid #173222;border-radius:50%;background:#7bd590;box-shadow:0 0 0 1px rgba(112,215,139,.22);transition:transform .15s,box-shadow .15s}
.costs-line-point:hover>i,.costs-line-point:focus-visible>i{transform:scale(1.45);box-shadow:0 0 0 4px rgba(91,216,126,.13)}
.costs-line-point:focus-visible{outline:none}
.costs-line-month{position:absolute;top:calc(100% + 10px);color:#809389;font-size:9px;transform:translateX(-50%);white-space:nowrap}
.costs-chart-tooltip{position:absolute;z-index:5;left:50%;bottom:calc(100% + 8px);display:grid;min-width:128px;gap:2px;padding:9px 10px;border:1px solid rgba(105,169,125,.32);border-radius:9px;background:rgba(8,19,15,.97);color:#e9f3ec;font-size:10px;line-height:1.35;box-shadow:0 12px 28px rgba(0,0,0,.34);opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .14s,transform .14s}
.costs-chart-tooltip strong{color:#a8bcb0;font-size:9px;font-weight:600}.costs-chart-tooltip b{font-size:12px}.costs-chart-tooltip small{color:#82968b}
.costs-line-point:hover .costs-chart-tooltip,.costs-line-point:focus-visible .costs-chart-tooltip,.costs-category-bar:hover .costs-chart-tooltip,.costs-category-bar:focus-visible .costs-chart-tooltip{opacity:1;transform:translate(-50%,0)}
.costs-category-bar { position:relative; display:block; width:100%; margin:0 0 9px; padding:0 0 6px; border:0; background:transparent; color:#dae5df; cursor:pointer; text-align:left; }
.costs-category-bar span { display:flex; justify-content:space-between; gap:8px; font-size:11px; }
.costs-category-bar b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.costs-category-bar em { color:#8fa299; font-style:normal; white-space:nowrap; }
.costs-category-bar::after { content:""; display:block; height:5px; margin-top:6px; border-radius:5px; background:#26372e; }
.costs-category-bar i { position:relative; z-index:1; display:block; height:5px; max-width:100%; margin-bottom:-5px; border-radius:5px; background:var(--cost-color,#3a9b62); box-shadow:0 0 9px color-mix(in srgb,var(--cost-color,#3a9b62) 22%,transparent); }
.costs-category-bar .costs-chart-tooltip{left:auto;right:0;bottom:calc(100% + 4px);transform:translateY(4px)}
.costs-category-bar:hover .costs-chart-tooltip,.costs-category-bar:focus-visible .costs-chart-tooltip{transform:translateY(0)}
.costs-table-wrap { flex:0 0 auto; min-width:0; max-width:100%; overflow:auto; border:1px solid #293a31; border-radius:11px; scrollbar-color:#355f49 transparent; scrollbar-width:thin; }
.costs-table-wrap table { width:100%; min-width:1040px; border-collapse:collapse; }
.costs-table-wrap th { position:sticky; top:0; z-index:1; padding:10px; background:#17271f; color:#a9b8b0; font-size:11px; text-align:left; text-transform:uppercase; }
.costs-table-wrap td { padding:10px; border-top:1px solid #28382f; color:#dae5df; font-size:13px; vertical-align:top; }
.costs-table-wrap td:nth-child(7) { font-weight:700; text-align:right; white-space:nowrap; }
.costs-actions,.cost-attachment-list>div { display:flex; gap:6px; }
.costs-actions button,.cost-attachment-list button { border:1px solid #385044; background:transparent; color:#bcd0c5; border-radius:6px; padding:5px 8px; }
.costs-empty { padding:30px !important; color:#82938a !important; text-align:center; }
.costs-feedback { margin:0; padding:9px 12px; border-radius:8px; background:#34261c; color:#ffd7b5; }
.costs-feedback.is-success { background:#173326; color:#bde8ce; }
.costs-modal { box-sizing:border-box; width:min(760px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:0; overflow:hidden; }
.costs-modal form { box-sizing:border-box; max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; padding:20px; scrollbar-color:#355f49 transparent; scrollbar-width:thin; }
.costs-modal h3 { margin-top:0; }
.costs-modal fieldset { min-width:0; margin:0 0 12px; padding:12px; border:1px solid #32463b; border-radius:9px; }
.costs-modal legend { padding:0 6px; color:#b8c8bf; }
.cost-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.cost-subcategory-field,.costs-filter-subcategory{display:grid;min-width:0;gap:4px}
.cost-subcategory-field>button,.costs-filter-subcategory>button{justify-self:start;min-height:26px;border:1px solid rgba(91,216,137,.38);background:rgba(63,151,92,.12);color:#8ce49a;border-radius:6px;padding:4px 8px;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer}
.cost-subcategory-field>button:hover,.cost-subcategory-field>button:focus-visible,.costs-filter-subcategory>button:hover,.costs-filter-subcategory>button:focus-visible{border-color:#76dc88;background:rgba(63,151,92,.2);color:#b2efbb;outline:none}
.cost-subcategory-field>button:disabled,.costs-filter-subcategory>button:disabled{opacity:.4;cursor:not-allowed}
.cost-subcategory-modal{width:min(390px,calc(100vw - 24px))}
.cost-subcategory-modal form{display:grid;gap:12px}
.cost-subcategory-modal h3,.cost-subcategory-modal p{margin:0}
.cost-subcategory-modal p{color:#9eb0a6;font-size:12px}.cost-subcategory-modal p strong{color:#e3eee7}
.cost-form-competence { display:grid; grid-template-columns:1.3fr .7fr; gap:6px; }
.cost-wide { grid-column:1/-1; }
.costs-modal details { margin:0 0 12px; padding:10px; border:1px solid #32463b; border-radius:9px; }
.costs-modal summary { margin-bottom:10px; cursor:pointer; }
.cost-attachment-list { display:grid; gap:6px; margin:8px 0; }
.costs-panel::-webkit-scrollbar,.costs-table-wrap::-webkit-scrollbar,.costs-month-bars::-webkit-scrollbar,.costs-modal form::-webkit-scrollbar { width:8px; height:8px; }
.costs-panel::-webkit-scrollbar-thumb,.costs-table-wrap::-webkit-scrollbar-thumb,.costs-month-bars::-webkit-scrollbar-thumb,.costs-modal form::-webkit-scrollbar-thumb { border-radius:8px; background:#355f49; }
.costs-panel::-webkit-scrollbar-track,.costs-table-wrap::-webkit-scrollbar-track,.costs-month-bars::-webkit-scrollbar-track,.costs-modal form::-webkit-scrollbar-track { background:transparent; }
@media (max-width:1100px) { .costs-filters{grid-template-columns:repeat(3,minmax(120px,1fr))}.costs-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .costs-dashboard { grid-template-columns:1fr; } }
@media (max-width:640px) { .costs-panel { padding-right:3px; } .costs-header>div:last-child { width:100%; } .costs-header>div:last-child button { flex:1; } .costs-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .costs-filter-actions button { flex:1; } .costs-summary { grid-template-columns:1fr 1fr; } .cost-form-grid { grid-template-columns:1fr; } .cost-wide { grid-column:auto; } .costs-modal form { padding:14px; }.costs-line-chart{grid-template-columns:50px minmax(380px,1fr)}.costs-period-popover{position:fixed;top:50%;left:50%;width:min(280px,calc(100vw - 28px));transform:translate(-50%,-50%)} }
@media (max-width:440px){.costs-filters{grid-template-columns:1fr}.costs-line-month.is-secondary{display:none}}
@media (max-width:420px) { .costs-summary { grid-template-columns:1fr; } .costs-header>div:last-child button { flex-basis:40%; } }