@import url("./index.css");

:root{
  --bg: #edf2ff;
  --surface: #ffffffee;
  --card-bg: #f6f9ff;
  --panel-bg: #f4f7ff;
  --panel-head-bg: #f0f4ff;
  --primary: #4460ff;
  --primary-dark: #3148e0;
  --primary-light: #6b82ff;
  --accent: #ff7ab6;
  --text: #1f2a46;
  --muted: #637299;
  --muted-soft: #8b98c0;
  --white: #ffffff;
  --border: #d6defc;
  --border-strong: #c2ceff;
  --table-bg: #ffffff;
  --chart-blue: #4c6ef5;
  --chart-blue-light: #8da6ff;
  --proj-summary-border: #dbe3ff;
  --proj-card-border: #dbe3ff;
  --proj-card-bg: #f8faff;
  --proj-card-label: #1e2c54;
  --card-accent-bg: rgba(86,112,255,0.08);

  --status-draft-bg: #ede9ff;
  --status-draft-text: #5342d9;
  --status-open-bg: #e7f1ff;
  --status-open-text: #1d4ed8;
  --status-sent-bg: #fff4dc;
  --status-sent-text: #aa6511;
  --status-paid-bg: #e8fbf4;
  --status-paid-text: #1f8f5f;
  --status-cancel-bg: #ffe5eb;
  --status-cancel-text: #d14362;

  --progress-bg: #e4e9ff;
  --progress-border: #ccd7ff;
  --progress-ok: #30d291;
  --progress-ok-strong: #149b63;
  --progress-warn: #ffd978;
  --progress-warn-strong: #e29a1b;
  --progress-danger: #ffa5b6;
  --progress-danger-strong: #d65374;

  --alert-warn-bg: #fff4d6;
  --alert-error-bg: #ffe3ec;

  --shadow-popup: 0 32px 60px rgba(59,98,255,0.23);
  --shadow-label: 0 8px 24px rgba(60,94,220,0.24);
  --shadow-card-strong: 0 24px 52px rgba(69,96,255,0.18);
  --shadow-table: 0 18px 32px rgba(82,107,255,0.12);
  --shadow-card: 0 18px 40px rgba(72,102,255,0.16);
  --shadow-soft: 0 12px 28px rgba(54,83,209,0.12);
  --shadow-light: 0 6px 16px rgba(54,83,209,0.12);

  --backdrop: rgba(27,41,89,0.5);
  --backdrop-strong: rgba(23,34,72,0.6);
  --field-bg: rgba(255,255,255,0.92);
}

body{
  margin:0;
  min-height:100vh;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(160deg,#f5f8ff 0%,#e8edff 40%,#eef1ff 70%,#f9fbff 100%);
}

.wrap{
  width:min(1180px,94%);
  margin:48px auto 60px;
  display:grid;
  gap:28px;
}

.head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  flex-wrap:wrap;
  padding:28px 34px;
  border-radius:32px;
  background:linear-gradient(140deg,#ffffff 0%,rgba(255,255,255,0.85) 45%,rgba(248,250,255,0.78) 100%);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border);
}

.head h1{
  margin:0;
  font-size:2.4rem;
  letter-spacing:.01em;
  color:var(--text);
}

.head-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.badge,
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 16px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.85);
  font-size:.82rem;
  font-weight:600;
  color:var(--muted);
  box-shadow:var(--shadow-light);
}

.badge.status{
  background:rgba(82,107,255,0.16);
  color:var(--primary-dark);
  border-color:rgba(86,110,255,0.28);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 22px;
  border-radius:16px;
  border:1px solid rgba(62,93,241,0.75);
  background:linear-gradient(145deg,var(--primary) 0%,var(--primary-light) 50%,#5f7cff 100%);
  color:#ffffff;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 16px 32px rgba(68,96,255,0.28);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 24px 48px rgba(60,88,255,0.32);}
.btn:active{transform:translateY(0);box-shadow:0 12px 24px rgba(60,88,255,0.26);}

.btn-ghost{
  background:rgba(255,255,255,0.92);
  color:var(--primary-dark);
  border:1px solid rgba(88,112,255,0.38);
  box-shadow:var(--shadow-light);
}
.btn-ghost:hover{filter:none;transform:translateY(-1px);box-shadow:0 16px 32px rgba(68,96,255,0.16);}

.btn-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 18px;
  border-radius:11px;
  border:1px solid rgba(70,104,255,0.28);
  background:rgba(255,255,255,0.96);
  color:var(--text);
  font-size:.86rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow-light);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-mini:hover{background:linear-gradient(140deg,#ffffff 0%,#eef2ff 100%);transform:translateY(-1px);box-shadow:0 12px 24px rgba(72,102,255,0.18);}
.btn-mini:active{transform:none;box-shadow:0 6px 12px rgba(72,102,255,0.16);}

.btn-brown{
  background:linear-gradient(150deg,#ff7a45 0%,#ff9f72 100%);
  color:#ffffff;
  border-color:#ff925e;
  box-shadow:0 18px 36px rgba(249,115,22,0.28);
}
.btn-brown:hover{filter:brightness(1.04);}

.tabs-wrap{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.tabs{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

.tabs.segmented{
  background:rgba(255,255,255,0.82);
  border-radius:999px;
  border:1px solid rgba(200,210,255,0.9);
  padding:6px 24px;
  flex:1;
  width:100%;
  justify-content:flex-start;
  box-shadow:var(--shadow-light);
}

.tab{
  border:none;
  background:transparent;
  padding:10px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:.9rem;
  color:rgba(36,51,96,0.72);
  cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.tab:hover{background:linear-gradient(150deg,#f0f4ff 0%,#e6edff 100%);color:var(--primary-dark);}
.tab.active{
  background:linear-gradient(150deg,var(--primary) 0%,var(--primary-light) 90%);
  color:#ffffff;
  box-shadow:0 10px 24px rgba(68,96,255,0.28);
}

.tabpanel{display:block;}
.tabpanel.hidden{display:none;}
.tabpanel>.card:not(:last-child){margin-bottom:24px;}

.card{
  background:linear-gradient(155deg,#ffffff 0%,#f6f9ff 60%,rgba(242,247,255,0.95) 100%);
  border-radius:28px;
  border:1px solid rgba(205,214,255,0.82);
  padding:26px 30px;
  box-shadow:var(--shadow-card);
}

.hline{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  padding:0 6px;
}
.hline h3{margin:0;font-size:1.18rem;letter-spacing:.01em;color:var(--text);}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.small{font-size:.86rem;}
.muted{color:var(--muted);}
.stack{display:flex;flex-direction:column;gap:6px;}
.spacer-20{height:20px;}

.dashboard-charts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}
@media (max-width:1080px){.dashboard-charts{grid-template-columns:1fr;}}

.chart-card{
  background:linear-gradient(150deg,#ffffff 0%,#f5f8ff 100%);
  border-radius:32px;
  border:1px solid rgba(205,214,255,0.82);
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  overflow:hidden;
  box-shadow:var(--shadow-card-strong);
}

.chart-card .hline{
  padding:22px 28px;
  background:rgba(68,94,255,0.24);
  border-bottom:1px solid rgba(182,198,255,0.7);
  margin:0;
  border-radius:32px 32px 0 0;
}
.chart-card .hline h3{font-size:1.15rem;color:var(--primary-dark);}
.chart-card .hline label{color:rgba(40,52,92,0.78);font-weight:600;}
.chart-card .hline .actions{gap:12px;}
.chart-card .hline .info-btn{color:var(--primary-dark);}

.chart{
  min-height:230px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
  border:none;
}
.chart svg{width:100%;height:auto;}
.chart svg .lineA,
.chart svg .bar{stroke:var(--chart-blue);fill:var(--chart-blue);}
.chart svg .lineB{stroke:var(--chart-blue-light);}
.chart svg .pointA{fill:var(--chart-blue);}
.chart svg .pointB{fill:var(--chart-blue-light);}
.chart svg .areaA{fill:color-mix(in srgb,var(--chart-blue) 35%, transparent);}
.chart svg .tick,
.chart svg .label{fill:color-mix(in srgb,var(--text) 80%, var(--muted) 20%);font-size:.7rem;}

.chart-note,
.chart-footer{
  display:none!important;
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}
.cards .card{
  padding:24px 28px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  background:linear-gradient(155deg,#ffffff 0%,#eef3ff 60%,rgba(247,250,255,0.92) 100%);
}
.kpi{margin:0;font-size:2.1rem;font-weight:700;color:var(--primary-dark);}
.kpi + .muted{font-size:.85rem;color:var(--muted);font-weight:600;letter-spacing:.01em;}
.kpi-grid{display:none !important;}

.table-wrap{
  margin:16px 0;
  border-radius:24px;
  border:1px solid rgba(206,214,255,0.9);
  background:linear-gradient(145deg,#ffffff 0%,#f7f9ff 100%);
  overflow:hidden;
  box-shadow:var(--shadow-table);
}
#tab-projects .table-wrap,
.invoice-summary .table-wrap{
  border:none;
  box-shadow:none;
  background:transparent;
}
.invoice-summary .table-wrap{
  margin:60px 0 0;
  padding-top:8px;
}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0;}
.table-wrap th,
.table-wrap td{
  padding:14px 20px;
  border-bottom:1px solid rgba(215,222,255,0.8);
  text-align:left;
  font-size:.92rem;
  color:rgba(32,45,86,0.92);
  background:transparent;
}
.table-wrap thead th{
  background:rgba(241,245,255,0.9);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.78rem;
  color:rgba(62,78,125,0.85);
  position:sticky;
  top:0;
  z-index:2;
  text-align:center;
  backdrop-filter:blur(6px);
}
.invoice-summary .table-wrap th,
.invoice-summary .table-wrap td{
  text-align:center;
}
.table-wrap tbody tr:nth-child(even){background:rgba(246,249,255,0.82);}
.table-wrap tbody tr:hover{background:rgba(236,242,255,0.85);}
.table-wrap tbody tr:last-child td{border-bottom:none;}
.tbl-centered td,.tbl-centered th{text-align:center;}
.table-wrap.compact{
  margin:8px 0;
  border-radius:18px;
}
.table-wrap.compact table th,
.table-wrap.compact table td{
  padding:10px 14px;
  font-size:.86rem;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.field label,
.field .field-label{
  font-size:.82rem;
  font-weight:600;
  color:rgba(49,64,108,0.8);
  letter-spacing:.01em;
}

input[type=text],
input[type=email],
input[type=number],
input[type=url],
input[type=date],
input[type=tel],
select,
textarea{
  border:1px solid rgba(200,210,255,0.9);
  border-radius:12px;
  background:var(--field-bg);
  color:var(--text);
  padding:10px 14px;
  font:inherit;
  box-shadow:0 10px 24px rgba(71,102,255,0.08);
  transition:border .15s ease, box-shadow .15s ease, transform .15s ease;
}
textarea{min-height:120px;resize:vertical;}

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:rgba(86,110,255,0.75);
  box-shadow:0 0 0 4px rgba(99,123,255,0.18);
  transform:translateY(-1px);
}

#vat-year{
  min-height:auto;
  padding:8px 32px 8px 14px;
  font-weight:600;
}
#bp-budget_type{
  min-height:auto;
  padding:8px 14px;
  font-weight:600;
}

.hrs-inputs{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  padding:18px 20px;
  background:rgba(255,255,255,0.82);
  border:1px solid rgba(206,214,255,0.85);
  border-radius:22px;
  box-shadow:var(--shadow-light);
}
.hrs-inputs .field{min-width:0;}
.hrs-inputs .project-field{grid-column:span 2;}
.hrs-inputs .left-half,
.hrs-inputs .right-half{
  grid-column:span 3;
}
.hrs-actions{display:flex;justify-content:flex-end;gap:8px;align-items:center;grid-column:1/-1;}

@media (max-width:1100px){
  .hrs-inputs{grid-template-columns:repeat(4,minmax(0,1fr));}
  .hrs-inputs .project-field{grid-column:span 2;}
  .hrs-inputs .left-half,
  .hrs-inputs .right-half{grid-column:span 4;}
}
@media (max-width:760px){
  .hrs-inputs{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hrs-inputs .project-field{grid-column:span 2;}
  .hrs-inputs .left-half,
  .hrs-inputs .right-half{grid-column:span 2;}
}
@media (max-width:520px){
  .hrs-inputs{grid-template-columns:1fr;}
  .hrs-inputs .project-field{grid-column:span 1;}
  .hrs-inputs .left-half,
  .hrs-inputs .right-half{grid-column:span 1;}
}

.proj-grid{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  column-gap:12px;
  row-gap:10px;
  margin:6px 0 14px;
}
.proj-field{padding:0;margin:0;}
#bp-start,
#bp-end{
  color:color-mix(in srgb,var(--text) 70%, var(--muted) 30%);
}
.proj-grid .span-1{grid-column:span 1;}
.proj-grid .span-2{grid-column:span 2;}
.proj-grid .span-3{grid-column:span 3;}
.proj-grid .span-5{grid-column:span 5;}
.proj-grid .span-8{grid-column:span 8;}
.proj-grid .span-5,
.proj-grid .span-8,
.proj-grid .span-3,
.proj-grid .span-2,
.proj-grid .span-1{min-width:0;}
.note-panel{
  display:flex;
  flex-direction:column;
  grid-row:span 4;
}
.note-panel textarea{
  flex:1;
  min-height:205px;
}
.proj-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
.proj-actions .btn-mini{min-width:80px;}

@media (max-width:980px){
  .proj-grid{grid-template-columns:repeat(6,minmax(0,1fr));}
  .note-panel.span-5{grid-column:span 6;}
  .note-panel{grid-row:auto;}
}
@media (max-width:640px){
  .proj-grid{grid-template-columns:1fr;}
  .proj-grid .span-2,
  .proj-grid .span-3,
  .proj-grid .span-5,
  .proj-grid .span-8{grid-column:span 1;}
  .note-panel{grid-row:auto;}
}

.hrs-filters{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:nowrap;
  margin:18px 0;
  overflow-x:auto;
  padding:14px 18px;
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(206,214,255,0.85);
  border-radius:20px;
  box-shadow:var(--shadow-light);
}
.hrs-filters>*{
  flex:0 0 auto;
}
.quarter-group{display:flex;gap:8px;align-items:center;}
.quarter-group .btn-mini{min-width:110px;}
.quarter-group .btn-mini[aria-pressed="true"],
.quarter-group .btn-mini.active{
  background:linear-gradient(150deg,var(--primary) 0%,var(--primary-light) 100%);
  color:#ffffff;
  border-color:rgba(62,93,241,0.65);
  box-shadow:0 12px 24px rgba(62,93,241,0.24);
}
#hrs-project-inp,
#hrs-client-inp,
#hrs-project-filter,
#hrs-client,
#hrs-year{
  min-height:auto;
  padding:10px 32px 10px 14px;
  font-weight:600;
}
#hrs-hours,
#hrs-rate{
  min-height:auto;
  padding:10px 16px;
  font-weight:600;
}

.quarter-summary-footer{margin-top:20px;}
.quarter-summary-table{
  width:100%;
  border-collapse:collapse;
  background:var(--proj-card-bg);
  border:1px solid var(--proj-card-border);
  color:var(--text);
}
.quarter-summary-table caption{
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  text-align:left;
  padding:10px 16px 6px;
}
.quarter-summary-table th,
.quarter-summary-table td{
  padding:16px;
  border:1px solid var(--proj-card-border);
  text-align:center;
  background:rgba(255,255,255,0.85);
}
.quarter-summary-table thead th{
  background:rgba(237,241,255,0.85);
  color:var(--primary-dark);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.quarter-summary-table tbody td{
  background:var(--proj-card-bg);
}
.quarter-summary-table tbody tr:nth-child(even) td{
  background:color-mix(in srgb,var(--proj-card-bg) 94%, #ffffff 6%);
}
.quarter-summary-table tfoot td{
  font-weight:700;
  background:color-mix(in srgb,var(--proj-card-bg) 90%, #ffffff 10%);
}
.quarter-summary-actions{display:flex;justify-content:center;}

.finance-card{display:grid;gap:24px;}
.finance-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.finance-header-actions{align-self:flex-start;}
.finance-filters{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.finance-alert-row{
  width:100%;
  margin-top:0px;
  display:flex;
  justify-content:flex-end;
}
.finance-alert-wrap{
  display:flex;
  justify-content:flex-end;
  width:auto;
}
.finance-quarter-group{display:flex;gap:8px;}
.finance-quarter-group .btn-mini[aria-pressed="true"],
.finance-quarter-group .btn-mini.active{
  background:linear-gradient(150deg,var(--primary) 0%,var(--primary-light) 100%);
  color:#ffffff;
  border-color:rgba(62,93,241,0.65);
  box-shadow:0 12px 24px rgba(62,93,241,0.24);
}

.finance-alert{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  min-width:320px;
  max-width:480px;
  width:auto;
  border-radius:16px;
  border:1px solid rgba(200,210,255,0.9);
  background:linear-gradient(145deg,#ffffff 0%,#f4f8ff 100%);
  box-shadow:var(--shadow-light);
}
.finance-alert-icon{font-size:1.2rem;}
.finance-alert-copy{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}
.finance-alert-head{
  display:flex;
  align-items:center;
  gap:8px;
}
.finance-alert-title{
  margin:0;
  font-weight:700;
  color:var(--primary-dark);
  letter-spacing:.01em;
}
.finance-alert-message{
  margin:0;
  color:var(--muted);
}
.finance-alert-more{
  margin-left:auto;
  border:1px solid rgba(86,110,255,0.35);
  background:rgba(255,255,255,0.92);
  color:var(--primary-dark);
  border-radius:999px;
  padding:6px 14px;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.finance-alert-more:hover{background:linear-gradient(140deg,#ffffff 0%,#eef3ff 100%);transform:translateY(-1px);box-shadow:0 10px 18px rgba(62,93,241,0.16);}
.finance-alert-more:active{transform:none;}
.finance-alert--warn{
  border-color:rgba(255,196,99,0.6);
  background:linear-gradient(145deg,#fffdf4 0%,var(--alert-warn-bg) 100%);
}
.finance-alert--error{
  border-color:rgba(222,109,140,0.55);
  background:linear-gradient(145deg,#fff5f7 0%,var(--alert-error-bg) 100%);
}

.finance-summary-table-wrap{
  border-radius:24px;
  border:1px solid rgba(206,214,255,0.9);
  background:linear-gradient(150deg,#ffffff 0%,#f5f8ff 100%);
  overflow:hidden;
  box-shadow:var(--shadow-table);
}
.finance-summary-table{
  width:100%;
  border-collapse:collapse;
  background:transparent;
}
.finance-summary-table th,
.finance-summary-table td{
  padding:14px 20px;
  border-bottom:1px solid rgba(210,218,255,0.85);
  background:rgba(255,255,255,0.9);
}
.finance-summary-table thead th{
  background:rgba(235,240,255,0.88);
  color:var(--primary-dark);
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  text-align:center;
  border-top:1px solid rgba(210,218,255,0.85);
  border-bottom:1px solid rgba(210,218,255,0.85);
}
.finance-summary-table thead th{position:relative;}
.finance-summary-table thead th:first-child{
  text-align:left;
  border-left:1px solid var(--proj-card-border);
}
.finance-summary-table thead th:last-child{
  text-align:right;
  border-right:1px solid var(--proj-card-border);
}
.finance-summary-table tbody th,
.finance-summary-table tbody td:first-child{
  text-align:left;
  font-weight:600;
}
.finance-summary-table tbody td:nth-child(2){
  text-align:center;
}
.finance-summary-table tbody td:nth-child(3){
  text-align:right;
}
.finance-summary-table tbody tr:nth-child(even) td,
.finance-summary-table tbody tr:nth-child(even) th{
  background:rgba(247,249,255,0.85);
}
.finance-summary-table tfoot th{
  background:rgba(240,244,255,0.88);
  text-align:left;
  font-size:.84rem;
}
.finance-summary-table tfoot td{
  background:rgba(240,244,255,0.9);
  text-align:right;
  font-size:1.04rem;
  font-weight:700;
}
.finance-summary-table tfoot tr:last-child th,
.finance-summary-table tfoot tr:last-child td{
  background:rgba(86,110,255,0.1);
  color:var(--primary-dark);
  border-bottom:0;
}
.finance-summary-table tfoot tr:nth-last-child(2) th,
.finance-summary-table tfoot tr:nth-last-child(2) td{
  background:rgba(247,249,255,0.85);
}
.finance-summary-table tfoot tr:first-child td{
  text-align:center;
}
.finance-summary-table tfoot tr:first-child td.finance-summary-value{
  text-align:center;
}
.finance-summary-table tfoot tr:first-child td.finance-summary-muted{
  border-bottom:1px solid rgba(210,218,255,0.85);
}
.finance-summary-table .finance-summary-input-row th,
.finance-summary-table .finance-summary-input-row td{
  background:rgba(247,249,255,0.92);
}
.finance-summary-table .text-positive,
.finance-summary-table .text-positive .finance-summary-value,
.finance-summary-table .finance-summary-value.text-positive{color:var(--status-paid-text);} 
.finance-summary-table .text-negative,
.finance-summary-table .text-negative .finance-summary-value,
.finance-summary-table .finance-summary-value.text-negative{color:#c24848;}
.finance-summary-label{display:inline-flex;align-items:center;gap:6px;}
.finance-info-btn{
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 90%, #ffffff);
  color:color-mix(in srgb,var(--muted) 65%, var(--text) 35%);
  font-size:.72rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.finance-summary-controls{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.finance-summary-controls input{width:140px;}

.finance-table table th:nth-child(8),
.finance-table table td:nth-child(8){
  min-width:150px;
}
.finance-table table td:nth-child(8){
  padding-top:12px;
  padding-bottom:12px;
}
.finance-table table td:nth-child(8) select{
  min-width:140px;
}
.finance-table .vat-status-select{width:100%;}
.vat-status-select{
  border-radius:999px;
  padding:10px 22px;
  min-height:44px;
  border:1px solid rgba(200,210,255,0.9);
  background:rgba(255,255,255,0.95);
  font-weight:600;
  color:var(--text);
}
.vat-status-select.status-draft{background:color-mix(in srgb,var(--status-draft-bg) 70%, #ffffff);color:var(--status-draft-text);}
.vat-status-select.status-open{background:color-mix(in srgb,var(--status-open-bg) 72%, #ffffff);color:var(--status-open-text);}
.vat-status-select.status-sent{background:color-mix(in srgb,var(--status-sent-bg) 72%, #ffffff);color:var(--status-sent-text);}
.vat-status-select.status-paid{background:color-mix(in srgb,var(--status-paid-bg) 75%, #ffffff);color:var(--status-paid-text);}
.vat-status-select.status-cancelled{background:color-mix(in srgb,var(--status-cancel-bg) 72%, #ffffff);color:var(--status-cancel-text);}
.paid-date-input{width:140px;}

.info{border:none;border-radius:18px;padding:0;background:transparent;}
.info::backdrop{background:var(--backdrop);}
.info-body-wrap{
  background:var(--white);
  border-radius:26px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-popup);
  padding:28px 32px 24px;
  width:min(960px,94vw);
  min-width:min(620px,94vw);
  max-width:min(960px,94vw);
  max-height:min(86vh,900px);
  display:flex;
  flex-direction:column;
  gap:20px;
}
#infoBody{
  flex:1 1 auto;
  overflow:auto;
  min-height:0;
  padding-right:4px;
  scrollbar-gutter:stable;
}
.info-body-wrap>.dialog-actions{
  flex:0 0 auto;
}
@media (max-width:720px){
  .info-body-wrap{
    border-radius:22px;
    padding:22px 20px 18px;
    width:min(96vw,640px);
    min-width:min(96vw,640px);
    max-height:min(86vh,780px);
  }
  #infoBody{
    padding-right:2px;
  }
}
.invoice-dialog .invoice-dialog-content{
  background:#ffffff;
  border-radius:28px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-popup);
  width:min(1100px,94vw);
  min-width:min(780px,94vw);
  padding:28px 34px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.invoice-dialog-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}
.vat-detail-dialog>.vat-detail-inner{
  width:min(1120px,95vw);
  min-width:min(1060px,95vw);
  max-width:min(1180px,95vw);
}
/* Mijn factuurgegevens dialog */
.my-info-dialog-content{
  background:#ffffff;
  border-radius:28px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-popup);
  padding:26px 34px 24px;
  width:min(920px,88vw);
  min-width:min(720px,88vw);
  display:flex;
  flex-direction:column;
  gap:20px;
}
.my-info-title{
  margin:0;
  font-size:1.4rem;
  color:var(--text);
}
.my-info-description{
  margin:0;
}
.my-info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px 16px;
}
.my-info-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.invoice-form-card{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.invoice-form-header h3{
  margin:0;
  font-size:1.6rem;
  color:var(--text);
}
.invoice-filter-row{
  display:grid;
  grid-template-columns:minmax(260px,2fr) auto auto auto;
  gap:12px;
  align-items:end;
}
.invoice-filter-action{
  display:flex;
  align-items:flex-end;
  gap:8px;
}
.invoice-filter-action .btn-mini{
  min-height:44px;
  display:flex;
  align-items:center;
  padding:0 22px;
}
.invoice-hours-table{
  border:1px solid rgba(206,214,255,0.85);
  border-radius:22px;
  background:linear-gradient(145deg,#ffffff 0%,#f6f9ff 100%);
  overflow:hidden;
  box-shadow:var(--shadow-light);
}
.invoice-hours-list{
  width:100%;
  border-collapse:collapse;
}
.invoice-hours-list th:first-child,
.invoice-hours-list td:first-child{
  text-align:center;
  width:48px;
}
.invoice-hours-total{
  margin:8px 0 0;
  color:var(--muted);
  font-weight:600;
}
.invoice-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:flex-start;
}
.invoice-info-panel{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.invoice-info-panel h4{
  margin:0;
  font-size:1.05rem;
  color:var(--primary-dark);
}
.invoice-description textarea{
  min-height:90px;
}
.invoice-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  justify-content:space-between;
  align-items:flex-end;
}
.invoice-meta-row-left{
  display:flex;
  gap:12px 18px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.invoice-meta-row-right{
  display:flex;
  gap:12px 18px;
  flex-wrap:wrap;
  align-items:flex-end;
  margin-left:auto;
}
.invoice-meta-row select#inv-client-country,
.invoice-meta-row select#inv-tax-rate{
  min-height:44px;
  padding:10px 16px;
}
.invoice-meta-row-right .invoice-action-field{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.invoice-meta-row-right .invoice-action-field details summary{
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0 22px;
  white-space:nowrap;
}
.invoice-filter-row #inv-proj-select{
  min-height:44px;
  padding:10px 16px;
}
.invoice-filter-row #inv-from,
.invoice-filter-row #inv-to{
  width:160px;
  padding:10px 16px;
}
.invoice-info-grid #inv-date,
.invoice-info-grid #inv-due{
  padding:10px 14px;
}
.invoice-footer{
  display:grid;
  grid-template-columns:auto auto;
  gap:20px;
  align-items:flex-start;
  justify-content:space-between;
}
.invoice-action-field{
  align-items:flex-end;
  justify-self:end;
  min-width:auto;
}
.invoice-action-field details{
  width:auto;
}
.invoice-action-field .field-label{
  text-align:right;
  align-self:flex-end;
}
.invoice-dropdown summary{
  padding:8px 18px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
}
.invoice-dropdown .dropdown-menu button{
  width:100%;
}
.invoice-dropdown .dropdown-menu{
  min-width:180px;
}
.quote-dialog-content{
  gap:24px;
}
.quote-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px 18px;
}
.quote-form-grid .field-span-2{
  grid-column:1/-1;
}
#quote-client-address,
#quote-client-city,
#quote-client-country,
#quote-customer-id,
#quote-customer-vat,
#quote-summary{
  padding:10px 14px;
}
#quote-body,
#quote-description,
#quote-terms,
#quote-accept-text{
  min-height:110px;
  padding:10px 12px;
  resize:vertical;
}
.field-hint{
  margin:6px 0 0;
  font-size:.78rem;
  color:color-mix(in srgb,var(--muted) 70%, var(--text) 30%);
}
#quote-project,
#quote-tax,
#quote-amount{
  min-height:44px;
  padding:10px 16px;
}
#quote-items,
#quote-notes{
  min-height:90px;
  padding:10px 12px;
  resize:vertical;
}
.quote-vat-grid{
  display:grid;
  gap:8px;
}
.quote-vat-head{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  font-size:.74rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:color-mix(in srgb,var(--muted) 70%, var(--text) 30%);
}
.quote-vat-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.quote-vat-row input{
  min-height:44px;
  padding:10px 16px;
}
.quote-totals-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.quote-totals-grid label{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:.8rem;
  font-weight:600;
  color:color-mix(in srgb,var(--muted) 70%, var(--text) 30%);
}
.quote-totals-grid input{
  min-height:44px;
  padding:10px 16px;
}
.quote-dialog-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.quote-detail-body{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.quote-detail-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.quote-detail-section h4{
  margin:0;
  font-size:1.05rem;
  color:#111111;
}
.quote-detail-text{
  margin:0;
  line-height:1.6;
}
.quote-detail-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.quote-detail-card{
  background:var(--proj-card-bg);
  border:1px solid var(--proj-card-border);
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.quote-detail-card h5{
  margin:0;
  font-size:1rem;
  color:#111111;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
}
.quote-detail-meta-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.quote-detail-meta-table th{
  text-align:left;
  padding:4px 0;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:color-mix(in srgb,var(--muted) 70%, var(--text) 30%);
}
.quote-detail-meta-table td{
  padding:4px 0;
  font-weight:600;
  color:#111111;
}
.quote-detail-meta{
  margin:0;
  font-size:.95rem;
  color:color-mix(in srgb,var(--muted) 70%, var(--text) 30%);
}
.quote-detail-list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:4px;
  list-style:disc;
}
.quote-detail-items-table th,
.quote-detail-items-table td,
.quote-detail-vat-table th,
.quote-detail-vat-table td,
.quote-detail-totals-table th,
.quote-detail-totals-table td{
  padding:10px 14px;
}
.quote-detail-items-table th,
.quote-detail-vat-table th,
.quote-detail-totals-table th{
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:.78rem;
  color:color-mix(in srgb,var(--muted) 70%, var(--text) 30%);
}
.quote-detail-totals-table td,
.quote-detail-totals-table th{
  font-weight:700;
}
.quote-detail-terms{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:6px;
  line-height:1.55;
}
.quote-accept-block .quote-detail-accept-line{
  margin:4px 0;
  font-size:.9rem;
}
.doc-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(76,110,245,0.35);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.doc-badge.quote{
  background:rgba(76,110,245,0.12);
  color:var(--primary-dark);
}
.inv-total-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  font-size:.9rem;
  color:color-mix(in srgb,var(--text) 85%, var(--muted) 15%);
  justify-items:start;
}
.inv-total-row span{
  white-space:nowrap;
}
.inv-total-row strong{
  font-size:1rem;
  color:var(--text);
  text-align:right;
  min-width:96px;
  justify-self:end;
}
.inv-total-row.total strong{
  font-size:1.12rem;
}
.invoice-primary{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  align-self:end;
}
.invoice-primary .btn-mini{
  padding:10px 26px;
  font-weight:600;
}
.invoice-dialog .invoice-dialog-content{
  background:var(--surface);
}
.invoice-detail-body{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.invoice-detail-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.invoice-detail-header h3{
  margin:0;
  font-size:1.5rem;
  color:var(--text);
}
.invoice-detail-meta,
.invoice-detail-meta-secondary{
  margin:0;
  color:color-mix(in srgb,var(--text) 75%, var(--muted) 25%);
}
.invoice-detail-meta-secondary{
  font-size:.9rem;
}
.invoice-detail-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.invoice-detail-section h4{
  margin:0;
  font-size:1.08rem;
  color:color-mix(in srgb,var(--text) 88%, var(--muted) 12%);
}
.invoice-detail-table{
  border:1px solid var(--border);
  border-radius:20px;
  background:var(--surface);
  overflow:hidden;
}
.invoice-detail-table tfoot td{
  text-align:right;
  font-weight:600;
}
.invoice-detail-table tfoot td:first-child{
  text-align:left;
}
.invoice-detail-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:flex-start;
}
.invoice-detail-info-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.invoice-detail-info-panel h4{
  margin:0;
  font-size:1.05rem;
  color:color-mix(in srgb,var(--text) 85%, var(--muted) 15%);
}
.invoice-detail-info-block{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 14px;
  background:color-mix(in srgb,var(--surface) 96%, #ffffff);
  line-height:1.45;
  word-break:break-word;
}
.invoice-detail-description{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 14px;
  background:color-mix(in srgb,var(--surface) 96%, #ffffff);
  line-height:1.6;
  white-space:pre-wrap;
}
.invoice-detail-description h4{
  margin:0 0 6px;
  font-size:1.05rem;
}
.invoice-detail-description p{
  margin:0;
}
.invoice-detail-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:4px;
}
.invoice-detail-actions details{
  flex:0 0 auto;
}

.info table.tbl{
  width:100%;
  border-collapse:collapse;
  background:var(--proj-card-bg);
  border:1px solid var(--proj-card-border);
  border-radius:0;
  overflow:hidden;
}
.info table.tbl thead th,
.info table.tbl tbody td,
.info table.tbl tfoot td{
  padding:10px 16px;
  border:1px solid var(--proj-card-border);
  text-align:center;
  color:#1f2416;
}
.info table.tbl thead th{
  background:color-mix(in srgb,var(--proj-card-bg) 88%, #ffffff 12%);
  font-weight:700;
  color:#202820;
}
.dialog-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
}
#vatAlertInfoDialog .alert-dialog{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:min(480px,92vw);
}
#vat-alert-dialog-countdown{
  font-weight:600;
  color:color-mix(in srgb,var(--text) 78%, var(--muted) 22%);
}
#vatAlertInfoDialog .dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

.proj-detail{
  display:flex;
  flex-direction:column;
  gap:16px;
  color:#141414;
}
.proj-detail-title{
  margin:0;
  font-size:1.34rem;
  color:#111111;
}
.proj-detail-summary{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
  background:var(--proj-card-bg);
  border:1px solid var(--proj-summary-border);
  border-radius:0;
  overflow:hidden;
  color:#141414;
}
.proj-detail-summary thead th,
.proj-detail-summary tbody td{
  padding:12px 18px;
  font-size:.98rem;
  text-align:center;
  border:1px solid var(--proj-summary-border);
  width:16.666%;
}
.proj-detail-summary thead th{
  background:color-mix(in srgb,var(--proj-card-bg) 88%, #ffffff 12%);
  color:#202820;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
}
.proj-detail-summary tbody td{
  background:var(--proj-card-bg);
  color:#2c3424;
  font-weight:600;
}
.proj-detail-summary tbody tr:nth-child(even) td{
  background:color-mix(in srgb,var(--proj-card-bg) 94%, #ffffff 6%);
}
.proj-detail-summary tbody td:nth-child(n+3){
  text-align:center;
}
.proj-detail-summary thead th:nth-child(n+3){
  text-align:center;
}
.proj-detail-summary thead th:first-child{border-top-left-radius:0;}
.proj-detail-summary thead th:last-child{border-top-right-radius:0;}
.proj-detail-summary tbody tr:last-child td:first-child{border-bottom-left-radius:0;}
.proj-detail-summary tbody tr:last-child td:last-child{border-bottom-right-radius:0;}
.proj-detail-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.proj-detail-section h4{
  margin:0;
  font-size:1.05rem;
  color:#111111;
}
.proj-detail-notes{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:4px;
  color:#141414;
  list-style:disc;
}
.proj-detail-notes li{line-height:1.55;}
.proj-detail-section .muted{margin:0;}
.proj-progress{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.proj-progress .prog{margin:4px 0 10px;}
.prog{
  position:relative;
  height:18px;
  border-radius:999px;
  background:var(--progress-bg);
  border:1px solid var(--progress-border);
  overflow:hidden;
}
.prog .bar{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  border-radius:inherit;
  transition:width .55s ease;
}
.prog .bar.ok{background:linear-gradient(90deg,var(--progress-ok) 0%, var(--progress-ok-strong) 100%);}
.prog .bar.warn,
.prog .bar.high{background:linear-gradient(90deg,var(--progress-warn) 0%, var(--progress-warn-strong) 100%);}
.prog .bar.danger{background:linear-gradient(90deg,var(--progress-danger) 0%, var(--progress-danger-strong) 100%);}
.prog .lbl{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  padding:2px 10px;
  border-radius:999px;
  background:#ffffff;
  box-shadow:var(--shadow-label);
  border:1px solid var(--border);
  font-size:.78rem;
  font-weight:700;
  color:#141414;
  transition:left .55s ease;
}
.prog .lbl.ok{color:var(--status-paid-text);}
.prog .lbl.warn,
.prog .lbl.high{color:var(--status-sent-text);}
.prog .lbl.danger{color:var(--status-cancel-text);}
.proj-detail-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.proj-card{
  border:1px solid var(--proj-card-border);
  border-radius:18px;
  background:var(--proj-card-bg);
  box-shadow:none;
  overflow:hidden;
}
.proj-card table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.proj-card td{
  padding:12px 20px;
  font-size:.96rem;
  border-top:1px solid var(--proj-card-border);
  color:#1f2416;
  text-align:left;
}
.proj-card tr:first-child td{border-top:none;}
.proj-card tr.accent{
  background:var(--card-accent-bg);
}
.proj-card tr.accent td{
  font-weight:700;
}
.proj-card td:first-child{
  font-weight:600;
  color:var(--proj-card-label);
}
.proj-card td:last-child{
  text-align:right;
  font-weight:700;
  color:#21271a;
  border-left:1px solid var(--proj-card-border);
}
.proj-card .pos{color:var(--status-paid-text);}
.proj-card .neg{color:var(--status-cancel-text);}
.contact-block{
  border:none;
  border-radius:0;
  background:transparent;
  padding:0;
  display:grid;
  gap:4px;
  box-shadow:none;
}
.contact-block .row{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:1rem;
}
.contact-block .lbl{
  font-weight:700;
  color:#111111;
  min-width:92px;
}
.contact-block .lbl::after{content:":";margin-left:2px;}
.contact-block .val{color:#141414;}
.contact-block .val a{
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
  border:none;
  padding:0;
  background:transparent;
}
.contact-block .val a:hover,
.contact-block .val a:focus-visible{text-decoration:underline;outline:none;}
.proj-detail .table-wrap{
  margin:4px 0 0;
  background:var(--proj-card-bg);
  border:1px solid var(--proj-card-border);
  box-shadow:none;
  border-radius:0;
  overflow:hidden;
}
.proj-detail .table-wrap table{
  width:100%;
  border-collapse:collapse;
  background:var(--proj-card-bg);
}
.proj-detail .table-wrap table th,
.proj-detail .table-wrap table td{
  font-size:.95rem;
  text-align:center;
  color:#1f2416;
  border:1px solid var(--proj-card-border);
  padding:10px 16px;
}
.proj-detail .table-wrap table th{
  text-transform:none;
  letter-spacing:0;
  color:#202820;
  background:color-mix(in srgb,var(--proj-card-bg) 88%, #ffffff 12%);
}
.proj-detail .table-wrap table tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--proj-card-bg) 94%, #ffffff 6%);
}
.proj-detail .table-wrap table .hour-detail{min-width:110px;}
.proj-detail .muted{color:#141414;}

.hrs-detail{
  display:flex;
  flex-direction:column;
  gap:16px;
  color:#141414;
}
.hrs-detail-header{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hrs-detail-title{
  margin:0;
  font-size:1.22rem;
  color:#111111;
}
.hrs-detail-subtitle{
  margin:0;
  font-size:.9rem;
  color:color-mix(in srgb,var(--muted) 70%, var(--text) 30%);
}
.hrs-detail-table{
  border:1px solid var(--proj-card-border);
  border-radius:18px;
  background:var(--proj-card-bg);
  overflow:hidden;
  overflow-x:auto;
}
.hrs-detail-table table{
  width:100%;
  min-width:520px;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
}
.hrs-detail-table thead th{
  padding:14px 16px;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--proj-card-label);
  background:color-mix(in srgb,var(--proj-card-bg) 92%, #ffffff 8%);
  border-bottom:1px solid var(--proj-card-border);
  border-right:1px solid var(--proj-card-border);
  text-align:center;
  vertical-align:middle;
}
.hrs-detail-table thead th:last-child{
  border-right:none;
}
.hrs-detail-table tbody td{
  padding:18px 20px;
  font-size:1.05rem;
  font-weight:700;
  color:#1f2416;
  background:var(--proj-card-bg);
  border-right:1px solid var(--proj-card-border);
  text-align:center;
  vertical-align:middle;
}
.hrs-detail-table tbody td:last-child{
  border-right:none;
}
.hrs-detail-table tbody tr{
  background:var(--proj-card-bg);
}
.hrs-detail-table tbody td.col-project{
  white-space:nowrap;
}
.hrs-detail-section{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.hrs-detail-section h4{
  margin:0;
  font-size:1.02rem;
  color:#111111;
}
.hrs-detail-block{
  border:1px solid var(--proj-card-border);
  border-radius:16px;
  background:var(--proj-card-bg);
  padding:12px 16px;
  line-height:1.55;
  color:#1f2416;
  white-space:pre-wrap;
}
.proj-detail .table-wrap table th:first-child,
.proj-detail .table-wrap table td:first-child{
  border-left:1px solid var(--proj-card-border);
}

@media (max-width:900px){
  .info>div:not(.info-body-wrap):not(.invoice-dialog-content):not(.vat-detail-inner):not(.my-info-dialog-content),
  .info>form:not(.alert-dialog){
    width:min(84vw,760px);
    min-width:min(84vw,760px);
    padding:28px 30px;
  }
}
@media (max-width:720px){
  .info>div:not(.info-body-wrap):not(.invoice-dialog-content):not(.vat-detail-inner):not(.my-info-dialog-content),
  .info>form:not(.alert-dialog){
    width:min(82vw,600px);
    min-width:min(82vw,600px);
    padding:22px;
  }
  .proj-detail-grid{grid-template-columns:1fr;}
}

.vat-detail-dialog::backdrop{background:var(--backdrop-strong);}
.vat-detail-inner{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:22px;
  background:linear-gradient(180deg, var(--surface) 92%, #ffffff 8%);
  border-radius:20px;
}
.vat-detail-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.vat-detail-section{display:flex;flex-direction:column;gap:14px;}
.vat-detail-table th,
.vat-detail-table td{padding:10px 12px;}
.vat-detail-table th:nth-last-child(2),
.vat-detail-table td:nth-last-child(2){
  text-align:center;
  min-width:120px;
}
.vat-detail-table th:first-child,
.vat-detail-table td:first-child{
  white-space:nowrap;
  min-width:120px;
}
.vat-detail-table th:last-child,
.vat-detail-table td:last-child{text-align:right;}
.vat-detail-table td:last-child{min-width:220px;}
.vat-detail-row-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}
.vat-detail-form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.vat-detail-form-attachments{
  display:flex;
  justify-content:flex-start;
  margin-top:10px;
}
.vat-detail-footer{
  margin-top:auto;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.vat-attachment-dialog .vat-detail-footer{margin-top:0;}
.vat-attachment-dialog::backdrop{background:var(--backdrop-strong);}
.vat-attachment-inner{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:24px;
  background:linear-gradient(180deg, var(--surface) 95%, #ffffff 5%);
  border-radius:20px;
  min-width:min(720px,92vw);
  max-width:min(960px,92vw);
}
.vat-attachment-head{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.vat-attachment-list{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
.vat-attachment-item{
  display:grid;
  grid-template-columns:minmax(160px, 240px) 1fr;
  gap:18px;
  border:1px solid var(--border);
  border-radius:16px;
  background:color-mix(in srgb,var(--surface) 90%, #ffffff);
  padding:16px;
}
.vat-attachment-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb,var(--surface) 95%, #ffffff);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  min-height:120px;
}
.vat-attachment-preview img,
.vat-attachment-preview iframe,
.vat-attachment-preview embed,
.vat-attachment-preview object{
  width:100%;
  height:100%;
  object-fit:contain;
}
.vat-attachment-preview iframe,
.vat-attachment-preview embed,
.vat-attachment-preview object{
  border:none;
}
.vat-attachment-preview .preview-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  font-weight:600;
  color:color-mix(in srgb,var(--muted) 80%, var(--text) 20%);
}
.vat-attachment-meta{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vat-attachment-meta strong{
  font-size:1rem;
  color:var(--text);
}
.vat-attachment-meta span{
  color:color-mix(in srgb,var(--text) 70%, var(--muted) 30%);
  font-size:.86rem;
}
.vat-attachment-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.vat-attachment-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.vat-detail-summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 16px;
  background:color-mix(in srgb,var(--surface) 96%, #ffffff);
}

.bp-notes{font-family:inherit;line-height:1.5;}
.table-toolbar{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 18px;
  margin:0 0 16px;
  justify-content:flex-start;
  background:rgba(255,255,255,0.88);
  border:1px solid rgba(206,214,255,0.85);
  border-radius:18px;
  box-shadow:var(--shadow-light);
}
.table-toolbar .field{margin:0;}
.table-toolbar label{font-size:.78rem;color:rgba(36,51,96,0.8);}
.table-toolbar .field .table-filter{
  padding:10px 16px;
  line-height:1.3;
  min-height:44px;
}
.table-toolbar .btn-mini{
  padding:10px 26px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.82rem;
}
.tbl.projects thead th{
  color:color-mix(in srgb,var(--text) 90%, var(--muted) 10%);
  font-weight:700;
  font-size:.86rem;
}
.tbl.projects th:last-child{ text-align:center;}
.tbl.projects th:nth-child(1),
.tbl.projects th:nth-child(2),
.tbl.projects th:nth-child(3),
.tbl.projects td:nth-child(1),
.tbl.projects td:nth-child(2),
.tbl.projects td:nth-child(3){text-align:center;}
.tbl.projects td:last-child{
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.divider{border:none;height:1px;background:var(--border);margin:18px 0;}
.divider.large{height:2px;background:var(--border);margin:20px 0;}
.info-btn{border:none;background:transparent;color:var(--muted);font-weight:600;cursor:pointer;}

details.actions-dropdown{position:relative;}
details.actions-dropdown summary{
  list-style:none;
  cursor:pointer;
  padding:6px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface) 95%, #ffffff);
}
details.actions-dropdown[open] summary{background:color-mix(in srgb,var(--surface) 88%, #ffffff);}
details.actions-dropdown .dropdown-menu{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  min-width:170px;
  background:color-mix(in srgb,var(--surface) 97%, #ffffff);
  border:1px solid var(--border);
  border-radius:12px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
  z-index:8;
}
details.actions-dropdown.drop-up .dropdown-menu{
  top:auto;
  bottom:calc(100% + 6px);
}

@media (max-width:1024px){
  .invoice-filter-row{grid-template-columns:minmax(220px,1fr) auto auto;}
  .invoice-meta-row{
    flex-direction:column;
    align-items:stretch;
  }
  .invoice-meta-row-left,
  .invoice-meta-row-right{
    justify-content:flex-start;
  }
  .invoice-meta-row-right{margin-left:0;}
  .quote-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .quote-totals-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .invoice-dialog .invoice-dialog-content{padding:26px 28px;}
}
@media (max-width:820px){
  .invoice-filter-row{grid-template-columns:1fr 1fr;}
  .invoice-info-grid{grid-template-columns:1fr;}
  .invoice-detail-info-grid{grid-template-columns:1fr;}
  .invoice-footer{grid-template-columns:1fr;gap:18px;}
  .invoice-primary{justify-content:flex-start;}
}
@media (max-width:640px){
  .invoice-filter-row{grid-template-columns:1fr;gap:10px;}
  .invoice-meta-row-left,
  .invoice-meta-row-right{
    width:100%;
  }
  .quote-form-grid{
    grid-template-columns:1fr;
  }
  .quote-totals-grid{
    grid-template-columns:1fr;
  }
  .invoice-filter-row #inv-from,
  .invoice-filter-row #inv-to{
    width:100%;
  }
  .invoice-dialog .invoice-dialog-content{padding:22px 18px;}
}

@media (max-width:880px){
  .head{flex-direction:column;align-items:flex-start;}
  .head-right{width:100%;justify-content:flex-start;}
  .cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
}

@media (max-width:600px){
  .tabs.segmented{width:100%;justify-content:space-between;}
  .tab{flex:1 1 auto;text-align:center;padding:9px 12px;}
  .quarter-group,
  .finance-quarter-group{width:100%;flex-wrap:wrap;}
  .quarter-group .btn-mini,
  .finance-quarter-group .btn-mini{flex:1 1 calc(50% - 6px);}
}
.tab-section{
  display:flex;
  flex-direction:column;
  gap:26px;
}
.card.form-card{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.card.table-card{
  padding:24px 26px 18px;
}
.card.section-card{
  padding:28px 34px;
  display:flex;
  flex-direction:column;
  gap:24px;
}