/* Client-facing polish: one product, not a leftover Excel file. */
:root {
  --mf-forest: #12352c;
  --mf-forest-mid: #1a4a3c;
  --mf-accent: #1f8a5c;
  --mf-gold: #ffe45c;
  --mf-cream: #fff6c2;
}
html { text-rendering: optimizeLegibility; }
body.simple-app, body.login-body {
  font-family: "SF Pro Display", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}
.simple-app .sidebar {
  background: linear-gradient(180deg, #0e2a24 0%, #12352c 100%);
  border-right: 1px solid #1c4338;
}
.simple-app .brand { letter-spacing: -1.4px; }
.simple-workspace {
  margin: 0 10px 18px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #ffffff0d;
  color: #d5eadc;
  font-size: 13px;
  font-weight: 600;
}
.simple-nav .nav-link {
  border-radius: 10px;
  min-height: 64px;
  padding: 12px 12px;
}
.simple-nav .nav-link.active {
  background: #2a5a48;
  color: #f3fff6;
  box-shadow: inset 0 0 0 1px #3d7a62;
}
.sidebar-partners {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #ffffff14;
  overflow-y: auto;
}
.sidebar-partners .nav-caption { margin: 8px 12px 10px; }
.sidebar-partner-search {
  margin: 0 8px 12px;
  max-width: none;
  min-height: 46px;
  background: #ffffff10;
  border-color: #ffffff22;
}
.sidebar-partner-search input { color: #f3fff6; }
.sidebar-partner-search .icon { color: #b7d0bf; }
.sidebar-partner span {
  min-width: 0;
  overflow: hidden;
}
.sidebar-partner span,
.sidebar-partner small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-partners-empty {
  margin: 8px 14px;
  color: #b7d0bf;
  font-size: 14px;
  line-height: 1.45;
}
.simple-app .topbar {
  background: #fbfdfb;
}
.simple-app .main-content { padding-top: 28px; }

.login-body {
  background:
    radial-gradient(900px 420px at 15% 0%, #1c5a44 0%, transparent 55%),
    #10261f;
}
.login-card {
  box-shadow: 0 24px 80px #04150f55;
  border: 1px solid #e4efe8;
  padding: 40px 42px 36px;
}
.login-card .brand { color: #16382c; margin-bottom: 18px; }
.login-card .eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #3d6a52;
}
.login-card h1 { letter-spacing: -0.8px; }
.login-points {
  display: grid;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  color: #3d5a48;
  font-size: 14px;
}
.login-points li {
  display: flex;
  gap: 8px;
  align-items: center;
}
.login-points b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f8a5c;
  flex-shrink: 0;
}

.daftar-table th {
  background: #1a4a3c;
  color: #f4fff8;
  font-size: 13px;
  letter-spacing: 0.02em;
  border-bottom: 0;
}
.daftar-table td { padding: 7px 8px; }
.daftar-table tbody tr:hover { background: #f4faf6; }
.daftar-table .daftar-remainder {
  background: var(--mf-cream);
  color: #2a2410;
  font-weight: 700;
}
.daftar-total td { background: var(--mf-gold); }
.kunlik-table tbody tr[data-search] { cursor: pointer; }
.kunlik-table .debt-name a { min-height: 44px; }
.simple-debts .daftar-table td { padding: 10px 8px; }
.login-card .eyebrow { display: block; font-size: 12px; letter-spacing: 0.12em; }
.kunlik-kassa {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: start;
  gap: 10px 24px;
  background: #153d32;
  color: #f3fff7;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.kunlik-kassa span { color: #c7e4d3; font-size: 14px; }
.kunlik-kassa strong { font-size: 28px; letter-spacing: -0.7px; }
.kunlik-kassa small {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #c7e4d3;
  font-weight: 500;
  line-height: 1.45;
}
.kunlik-tills { display: flex; flex-wrap: wrap; gap: 16px; color: #d5eadc; font-size: 14px; }
.kunlik-tills strong { color: #fff; }
.simple-app .profile small { display: block; margin-top: 4px; font-size: 12px; }
.simple-app .profile small a { color: #c7e4d3; }
.search-field {
  border-color: #c5d6cb;
  min-height: 46px;
  max-width: 560px;
}
.search-field input { font-size: 15px; }
.quick-actions > a {
  border-color: #cfe0d4;
}
.quick-actions > a:hover {
  border-color: #6fa887;
  background: #f6fbf7;
}
.summary-strip {
  box-shadow: 0 1px 0 #edf3ef;
}
.page-heading h1 { letter-spacing: -0.9px; }
.button.primary {
  background: #1a4a3c;
  border-color: #1a4a3c;
}
.button.primary:hover { background: #12352c; }
.summary-strip strong { letter-spacing: -0.3px; }
.daftar-attach {
  border-color: #d7e6c2;
  background: #f4f8e8;
}
.daftar-pay {
  border-color: #1a4a3c;
  background: #f3faf5;
  margin-bottom: 16px;
}
.daftar-pay .panel-heading { padding-bottom: 0; }
.daftar-pay-form {
  padding: 8px 22px 22px;
  align-items: end;
}
.daftar-pay-form .form-field input,
.daftar-pay-form .form-field select {
  min-height: 46px;
  font-size: 16px;
}
.daftar-table .daftar-pay-cell input {
  background: var(--mf-cream);
  font-weight: 650;
}
.table-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.daftar-table:not(.kunlik-table):not(.rahim-table),
.delivery-table,
#journal-table {
  min-width: 720px;
}
.extras-wide { min-width: 1080px; }
.kunlik-add {
  flex-wrap: wrap;
}
.kunlik-add .form-field {
  flex: 1 1 148px;
}
.kunlik-add .button {
  flex: 0 0 auto;
}
.summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.summary-strip.four {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.kassa-strip {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.kunlik-kassa strong,
.stat-value {
  overflow-wrap: break-word;
}
.summary-strip strong {
  overflow-wrap: break-word;
  font-variant-numeric: tabular-nums;
}
html {
  overflow-x: clip;
}

@media (max-width: 980px) {
  .simple-app .sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .2s, visibility .2s;
  }
  .menu-open .sidebar {
    transform: translateX(0);
    visibility: visible;
  }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 25;
    background: #10262280;
    border: 0;
  }
  .menu-open .sidebar-overlay { display: block; }
  .mobile-menu { display: inline-flex; }
  .app-shell { margin-left: 0; }
  .simple-app .main-content { padding: 24px 18px 32px; }
  .simple-app .page-heading {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .simple-app .heading-actions {
    flex-wrap: wrap;
    width: 100%;
  }
  .simple-app .heading-actions .button {
    flex: 1 1 auto;
    min-width: min(100%, 148px);
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 980px) {
  .kunlik-kassa { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .kunlik-kassa strong { font-size: 22px; }
  .kunlik-tills { flex-direction: column; gap: 6px; }
  .login-card { padding: 28px 20px; width: calc(100% - 24px); }
  .login-body { padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .login-card > .language-switcher {
    float: none;
    margin: 0 0 16px;
  }
  .simple-app .main-content {
    padding: 18px 14px 28px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
  .simple-app .sidebar {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .simple-app .page-heading h1 { font-size: 24px; }
  .simple-app .page-heading p { max-width: none; }
  .simple-app .heading-actions .button { width: 100%; }
  .kunlik-add {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
  }
  .kunlik-add .form-field:first-child,
  .kunlik-add .form-field:nth-child(2) { grid-column: 1 / -1; }
  .kunlik-add .button { grid-column: 1 / -1; width: 100%; }
  .daftar-attach-form { display: grid; grid-template-columns: 1fr; }
  .daftar-attach-form .form-field { min-width: 0; }
  .daftar-panel .panel-heading { align-items: stretch; }
  .daftar-search { min-width: 0; max-width: none; width: 100%; }
  .search-field { max-width: none; }
  .filter-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .filter-bar .search-field { grid-column: 1 / -1; max-width: none; }
  .filter-bar .date-range { grid-column: 1 / -1; }
  .filter-bar > .button { grid-column: 1 / -1; }
  .filter-bar > select { max-width: none; width: 100%; }
  .summary-strip,
  .summary-strip.four,
  .kassa-strip { grid-template-columns: 1fr 1fr; }
  .summary-strip > div,
  .kassa-strip > div {
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .inline-filter.summary-period {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .inline-filter.summary-period .date-range { width: 100%; }
  .inline-filter.summary-period .button { width: 100%; }
  .summary-links { display: grid; grid-template-columns: 1fr; }
  .summary-links .button { width: 100%; justify-content: center; }
  .shipment-total { margin-left: 0; }
  .report-actions { display: grid; grid-template-columns: 1fr; }
  .section-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
  }
  .section-tabs a {
    justify-content: center;
    text-align: center;
    white-space: normal;
    padding: 10px 6px;
    font-size: 13px;
  }
  input, select, textarea { font-size: 16px; }
  .button { min-height: 44px; }
  .pagination {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    text-align: center;
  }
  .simple-file-row { flex-wrap: wrap; }
  .more-menu-items { right: auto; left: 0; min-width: min(255px, calc(100vw - 32px)); }

  .delivery-table thead {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  .delivery-table { min-width: 0; }
  .delivery-table,
  .delivery-table tbody { display: block; width: 100%; }
  .delivery-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 14px 12px;
    border-bottom: 1px solid #e3ebe6;
  }
  .delivery-table td {
    border: 0;
    padding: 0;
    white-space: normal;
  }
  .delivery-table td:first-child { grid-column: 1; grid-row: 1; }
  .delivery-table td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: 13px; color: #53675b; }
  .delivery-table td:nth-child(3) { grid-column: 2; grid-row: 2; }
  .delivery-table td:nth-child(n+4):nth-child(-n+7) { display: none; }
  .delivery-table td:nth-child(8) {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-size: 16px;
  }
  .delivery-table td[colspan] { grid-column: 1 / -1; display: block; }

  #journal-table,
  #daftar-table { min-width: 0; }
  #journal-table thead,
  #daftar-table thead {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  #journal-table,
  #journal-table tbody,
  #daftar-table,
  #daftar-table tbody { display: block; width: 100%; }
  #journal-table tr,
  #daftar-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px 10px;
    padding: 12px 8px;
    border-bottom: 1px solid #e3ebe6;
  }
  #journal-table td,
  #daftar-table td {
    display: block;
    border: 0;
    padding: 0;
    min-width: 0;
    white-space: normal;
  }
  #journal-table td:nth-child(1) { grid-column: 1 / 3; }
  #journal-table td:nth-child(7),
  #daftar-table td:nth-child(15) { grid-column: 3; grid-row: 1; }
  #daftar-table td:nth-child(1) { grid-column: 1 / 3; }
  #daftar-table td:nth-child(2) { grid-column: 1 / -1; }
  #daftar-table .daftar-extra { display: none !important; }
  #daftar-table tr.journal-new {
    grid-template-columns: 1fr;
  }
  #daftar-table tr.journal-new td,
  #journal-table tr.journal-new td {
    grid-column: 1 / -1;
    grid-row: auto;
    width: auto;
  }
  #daftar-table tr.journal-new .daftar-extra { display: block !important; }
  #journal-table tr.journal-new { grid-template-columns: 1fr; }
  #journal-table td[colspan],
  #daftar-table td[colspan] { grid-column: 1 / -1; }
  #daftar-table tr.daftar-total { grid-template-columns: 1fr auto; }
  #daftar-table tr.daftar-total td:first-child { display: none; }
}

@media (max-width: 520px) {
  .kunlik-add { grid-template-columns: 1fr; }
  .kunlik-add .form-field:first-child,
  .kunlik-add .form-field:nth-child(2) { grid-column: auto; }
  .simple-app .heading-actions .button { min-width: 0; }
  .kassa-strip { grid-template-columns: 1fr; }
}

/* One ledger: one hero total, then the sheet, then the add-row. */
.simple-app {
  --paper: #f4f7f4;
  --ink: #173126;
}
.simple-app .main-content {
  background: var(--paper);
}
.simple-app .page-heading {
  margin-bottom: 16px;
  gap: 12px;
}
.simple-app .page-heading h1 {
  font-size: 26px;
  letter-spacing: -0.7px;
  color: #12352c;
}
.simple-app .page-heading p {
  max-width: 42rem;
  margin-top: 4px;
  color: #5b7164;
  font-size: 14px;
  line-height: 1.45;
}
.simple-nav .nav-caption,
.sidebar-partners .nav-caption {
  margin: 10px 12px 6px;
  color: #8eaa98;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.simple-nav .nav-link {
  min-height: 52px;
  padding: 10px 12px;
  margin: 3px 0;
  font-size: 16px;
}
.simple-nav .nav-link small {
  margin-top: 2px;
  font-size: 11px;
}
.sidebar-more {
  margin-top: 8px;
  padding-top: 4px;
  border-top: 1px solid #ffffff14;
}
.section-tabs {
  display: flex;
  gap: 8px;
  min-height: 0;
  margin: 0 0 16px;
  padding: 4px;
  border-bottom: 0;
  background: #e7eee8;
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
}
.section-tabs a {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-height: 40px;
  padding: 7px 14px;
  border-radius: 9px;
  color: #3d5648;
  font-weight: 650;
  line-height: 1.2;
}
.section-tabs a small {
  color: #6b8374;
  font-size: 11px;
  font-weight: 500;
}
.section-tabs a.selected {
  background: #fff;
  color: #12352c;
  box-shadow: 0 1px 0 #c9d6cc;
}
.extras-tabs { margin-bottom: 14px; }
.totals-strip,
.summary-strip,
.kassa-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid #d7e2da;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: none;
}
.totals-strip > div,
.summary-strip > div,
.kassa-strip > div {
  padding: 14px 16px;
  border-right: 1px solid #e6eee8;
}
.totals-strip span,
.summary-strip span,
.kassa-strip span {
  display: block;
  margin-bottom: 6px;
  color: #5d7266;
  font-size: 12px;
  font-weight: 650;
}
.totals-strip strong,
.summary-strip strong,
.kassa-strip strong {
  font-size: 22px;
  letter-spacing: -0.4px;
  color: #12352c;
  font-variant-numeric: tabular-nums;
}
.totals-strip .is-profit,
.totals-strip .is-stock {
  background: #fff6c2;
}
.totals-strip .is-profit strong { color: #3a2f08; }
.link-bar {
  margin: 0 0 16px;
  padding: 10px 14px 12px;
  border: 1px dashed #c5d4c8;
  border-radius: 12px;
  background: #eef4f0;
}
.link-bar-label {
  margin: 0 0 8px;
  color: #4d6657;
  font-size: 12px;
  font-weight: 700;
}
.link-bar-label a { color: #1a4a3c; text-decoration: underline; }
.link-bar-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px 16px;
}
.link-bar-stats span {
  display: block;
  color: #61786b;
  font-size: 11px;
}
.link-bar-stats strong {
  font-size: 16px;
  color: #173126;
  font-variant-numeric: tabular-nums;
}
.sheet-panel {
  border: 1px solid #d7e2da;
  border-radius: 14px;
  box-shadow: none;
  overflow: hidden;
}
.daftar-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}
.composer {
  margin: 0;
  border-top: 1px solid #e3ebe6;
  background: #f7faf7;
}
.composer > summary {
  padding: 14px 18px;
  cursor: pointer;
  color: #1a4a3c;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.composer > summary::-webkit-details-marker { display: none; }
.composer > summary::after {
  content: "+";
  float: right;
  color: #5d7266;
  font-weight: 500;
}
.composer[open] > summary::after { content: "–"; }
.composer .kunlik-add {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px 14px;
  padding: 0 18px 18px;
  align-items: end;
}
.composer .kunlik-add .button { justify-self: start; }
.rate-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  padding: 14px 16px;
  border-bottom: 1px solid #e3ebe6;
  background: #f7faf7;
}
.rate-bar .form-field { margin: 0; min-width: 160px; }
.kunlik-kassa {
  margin-bottom: 14px;
  padding: 14px 18px;
}
.kunlik-kassa strong { font-size: 24px; }
.simple-app .panel { box-shadow: none; }
.simple-details { margin-top: 16px; }

@media (max-width: 760px) {
  .section-tabs {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .section-tabs a { align-items: center; }
  .totals-strip,
  .summary-strip,
  .kassa-strip { grid-template-columns: 1fr 1fr; }
  .link-bar-stats { grid-template-columns: 1fr 1fr; }
  .composer .kunlik-add { grid-template-columns: 1fr 1fr; }
  .composer .kunlik-add .button { grid-column: 1 / -1; width: 100%; }
}

.month-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)) minmax(0, 1fr);
  gap: 0;
  margin: 0 0 16px;
  background: #fff;
  border: 1px solid #d7e2da;
  border-radius: 14px;
  overflow: hidden;
}
.month-hero > div {
  padding: 16px 18px;
  border-right: 1px solid #e6eee8;
}
.month-hero span {
  display: block;
  margin-bottom: 6px;
  color: #5d7266;
  font-size: 12px;
  font-weight: 650;
}
.month-hero strong {
  display: block;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: #12352c;
  font-variant-numeric: tabular-nums;
}
.month-hero small {
  display: block;
  margin-top: 6px;
  color: #61786b;
  font-size: 12px;
  line-height: 1.4;
}
.month-hero.is-gain > div:first-child { background: #fff6c2; }
.month-hero.is-loss > div:first-child { background: #fde8e4; }
.month-hero.is-loss > div:first-child strong { color: #7a241c; }
.month-picks { display: grid; gap: 10px; }
.month-picks p { margin: 0; }
.month-picks strong { font-size: 16px; }
.month-table tr.is-good td:nth-child(2) { color: #1b5e20; font-weight: 700; }
.month-table tr.is-bad td:nth-child(2) { color: #8d2118; font-weight: 700; }
.month-table tr.is-current td { background: #f4faf6; }
.chart-legend .profit { color: #8a7218; }
.chart-legend .profit::before { background: #c9a227; }

@media (max-width: 980px) {
  .month-hero { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .month-hero { grid-template-columns: 1fr; }
  .month-hero > div { border-right: 0; border-bottom: 1px solid #e6eee8; }
}