/* BEGOS Finans — responsive application shell + shared visual language.
   Loaded last so legacy and V2 screens converge on one UI without browser zoom. */
:root{
  --ui-navy:#10223d;
  --ui-navy-2:#17375f;
  --ui-blue:#2b75eb;
  --ui-green:#0a9a5b;
  --ui-red:#e24455;
  --ui-purple:#7251c7;
  --ui-bg:#f4f7fb;
  --ui-surface:rgba(255,255,255,.96);
  --ui-border:#e2e8f1;
  --ui-text:#10213b;
  --ui-muted:#718198;
  --ui-shadow:0 12px 34px rgba(18,42,73,.045);
}

/* Fluid shell: use the actual monitor instead of leaving large dead margins. */
.app-shell{grid-template-columns:clamp(224px,12.6vw,252px) minmax(0,1fr)}
.app-sidebar{padding:20px 14px 16px}
.app-content.container{
  width:100%;
  max-width:1780px;
  padding:clamp(24px,2.1vw,38px) clamp(24px,2.5vw,48px) 58px;
}
.page-v2,.dashboard-reference,.review-shell{width:100%;max-width:none}

/* Shared premium page title. */
.page-head,.page-v2-head,.plan-page-head{
  align-items:flex-start;
  margin-bottom:22px;
}
.page-head h1,.page-v2-head h1,.plan-page-head h1{
  color:var(--ui-text);
  letter-spacing:-.035em;
}
.page-head h1{font-size:clamp(29px,2vw,36px);margin:0 0 7px}
.page-head p,.page-v2-head p,.plan-page-head p{color:var(--ui-muted);line-height:1.5}
.standard-page{width:100%}
.standard-title-row{display:flex;align-items:flex-start;gap:13px}
.standard-page-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto;margin-top:1px}
.standard-page-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.standard-page-icon.blue{background:#eaf3ff;color:#216fdc}
.standard-page-icon.green{background:#e9f8ef;color:#0b9558}
.standard-page-icon.red{background:#fff0f2;color:#df4052}
.standard-page-icon.purple{background:#f1edff;color:#7050c2}
.standard-page-icon.navy{background:#eaf0f7;color:#203e64}
.standard-eyebrow{display:block;font-size:9px;letter-spacing:.16em;font-weight:850;color:#607691;text-transform:uppercase;margin-bottom:4px}

/* Buttons and surfaces. */
.app-workspace .button,.app-workspace button:not(.remembered-chip):not(.recent-counterparty-row){border-radius:10px;font-weight:800}
.app-workspace .button:not(.button-secondary):not(.secondary-v2),
.app-workspace button[type=submit]:not(.remembered-chip){background:linear-gradient(135deg,#11223d,#183a64);color:#fff;border:0}
.app-workspace .button.button-secondary,.app-workspace .button.secondary-v2{background:#fff;color:#263a55;border:1px solid #d8e0ea}

.data-card,.standard-card{
  background:var(--ui-surface);
  border:1px solid var(--ui-border);
  border-radius:16px;
  box-shadow:var(--ui-shadow);
  overflow:hidden;
}
.data-card-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;border-bottom:1px solid #edf1f5}
.data-card-head h2{font-size:15px;margin:0;color:var(--ui-text)}
.data-card-head p{margin:3px 0 0;color:#8592a3;font-size:10px}
.table-scroll{overflow:auto;max-width:100%}

/* All remaining legacy tables inherit the same card-like treatment. */
.app-workspace table{width:100%;border-collapse:separate;border-spacing:0;background:rgba(255,255,255,.96);border:1px solid var(--ui-border);box-shadow:var(--ui-shadow);border-radius:14px;overflow:hidden}
.app-workspace th{padding:12px 14px;background:#f8fafc;color:#61728b;font-size:10px;font-weight:800;white-space:nowrap;border-bottom:1px solid #e8edf3}
.app-workspace td{padding:12px 14px;font-size:12px;border-bottom:1px solid #eef2f6;color:#24364e;vertical-align:middle}
.app-workspace tbody tr:last-child td{border-bottom:0}
.app-workspace tbody tr:hover td{background:#fbfdff}
.app-workspace td strong{color:#10213b}
.app-workspace td a{font-weight:750;color:#235fae;text-decoration:none}
.app-workspace td a:hover{text-decoration:underline}

/* Compact status language. */
.ui-status{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:850;white-space:nowrap}
.ui-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ui-status.ok{background:#eaf9ef;color:#0b8e53}.ui-status.warning{background:#fff7e7;color:#9a6812}.ui-status.danger{background:#fff0f2;color:#cf3448}.ui-status.neutral{background:#eef2f7;color:#66768c}

/* Calendar: wide enough on desktop, detail still visible without zoom. */
.calendar-layout{grid-template-columns:minmax(0,1.7fr) minmax(300px,.52fr);gap:16px}
.calendar-card-v2{min-width:0}
.calendar-grid-v2.days{min-width:780px}
.calendar-day-v2{min-height:118px}
.day-detail-panel{min-width:0}

/* Receivables/payment forms follow the same width rhythm. */
.receivable-layout{grid-template-columns:minmax(0,1.55fr) minmax(285px,.45fr);gap:16px}
.payment-edit-layout{grid-template-columns:minmax(0,1.4fr) minmax(270px,.45fr);gap:16px}

/* POS plan and generic lists should not look like a narrow document in the middle. */
.plan-page-head,.plan-summary-grid,.plan-table-card,.plan-detail-panel{max-width:none;width:100%}
.plan-table-card,.plan-detail-panel{box-shadow:var(--ui-shadow)}

/* Dashboard fills large screens; typography scales a little with available space. */
.dashboard-reference .dashboard-ref-title h1{font-size:clamp(34px,2.15vw,42px)}
.dashboard-ref-hero{grid-template-columns:minmax(400px,1.08fr) minmax(0,2.35fr)}
.ref-main-balance>strong{font-size:clamp(35px,2.2vw,44px)}
.ref-kpi-content>strong{font-size:clamp(19px,1.25vw,24px)}
.ref-bottom-grid{grid-template-columns:minmax(0,1.35fr) minmax(290px,.78fr) minmax(310px,.86fr)}

/* 1440–1700: normal office monitors. */
@media (max-width:1700px){
  .app-content.container{max-width:none;padding-left:34px;padding-right:34px}
  .dashboard-ref-hero{grid-template-columns:minmax(360px,1fr) minmax(0,2.05fr)}
  .ref-kpi-grid{gap:10px}
  .ref-bottom-grid{grid-template-columns:1.25fr .82fr .9fr}
}

/* 1200–1440: keep everything readable rather than shrinking the whole UI. */
@media (max-width:1440px){
  .app-shell{grid-template-columns:220px minmax(0,1fr)}
  .app-content.container{padding:28px 26px 48px}
  .dashboard-ref-hero{grid-template-columns:1fr}
  .ref-main-balance{min-height:190px}
  .ref-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ref-bottom-grid{grid-template-columns:1fr 1fr}.ref-liquidity{grid-column:1/-1}
  .calendar-layout{grid-template-columns:1fr}.day-detail-panel{order:-1}
  .receivable-layout{grid-template-columns:1fr}.receivable-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
}

@media (max-width:1120px){
  .app-shell{grid-template-columns:205px minmax(0,1fr)}
  .app-content.container{padding:26px 22px 44px}
  .ref-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ref-cashflow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .payment-edit-layout{grid-template-columns:1fr}
}

@media (max-width:860px){
  .app-content.container{max-width:none;padding:22px 16px 40px}
  .dashboard-reference .dashboard-ref-head,.page-v2-head,.page-head,.plan-page-head{gap:14px}
  .ref-kpi-grid,.ref-bottom-grid,.receivable-side{grid-template-columns:1fr}
  .ref-cashflow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calendar-grid-v2.days{min-width:720px}
  .calendar-card-v2{overflow-x:auto}
}

@media (max-width:620px){
  .ref-cashflow{grid-template-columns:1fr}
  .standard-title-row{gap:10px}.standard-page-icon{width:38px;height:38px}.standard-page-icon svg{width:19px;height:19px}
  .page-head h1{font-size:28px}
}

@media print{
  .app-content.container{max-width:none!important;width:100%!important;padding:0!important}
}