@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --nav:#14213d;
  --nav-deep:#0d1628;
  --accent:#fca311;
  --accent-deep:#855300;
  --soft:#f4f7fb;
  --surface:#ffffff;
  --surface-low:#f1f4f8;
  --on-surface:#181c1f;
  --muted:#64748b;
  --outline:#e2e8f0;
  --outline-strong:#c5c6ce;
  --success-bg:#f0fdf4;
  --danger:#ba1a1a;
  --radius:12px;
  --radius-lg:16px;
  --font:'Manrope',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
body{background:var(--soft);font-family:var(--font);color:var(--on-surface);margin:0;-webkit-font-smoothing:antialiased}
.sidebar{width:245px;background:var(--nav);min-height:100vh;position:fixed;inset:0 auto 0 0;color:#fff;padding:22px 14px;z-index:1030}
.sidebar-drawer{background:var(--nav)!important;color:#fff;width:min(86vw,280px)!important}
.sidebar-drawer .offcanvas-header,.sidebar-drawer .offcanvas-body{background:var(--nav)}
.brand{font-weight:800;letter-spacing:.4px;color:#fff;text-decoration:none;font-size:1.05rem;display:flex;align-items:center;gap:10px}
.brand-logo{width:52px;height:52px;object-fit:cover;border-radius:12px;border:2px solid #fff;background:#fdb813;flex-shrink:0;box-shadow:0 2px 8px #0004}
.brand-text{display:block;line-height:1.15}
.brand small{color:var(--accent);display:block;font-weight:500;font-size:.72rem;letter-spacing:0;margin-top:2px}
.topbar-logo{width:34px;height:34px;border-radius:999px;object-fit:cover;flex-shrink:0;border:1px solid #e2e8f0}
.login-logo{display:block;margin:0 auto 14px;width:min(72vw,220px);height:auto;border-radius:16px;box-shadow:0 8px 24px #0003}
.nav-link{color:#cbd5e1;border-radius:9px;padding:10px 12px;margin:3px 0;border-left:3px solid transparent}
.nav-link:hover{background:#ffffff14;color:#fff}
.nav-link.active{background:#ffffff14;color:#fff;border-left-color:var(--accent)}
.main{margin-left:245px;padding:26px;max-width:1100px}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.page-title{font-size:clamp(1.15rem,2.5vw,1.75rem);line-height:1.2;font-weight:800;letter-spacing:-.01em}
.btn-nav{background:var(--nav);color:#fff;border:0;border-radius:10px;width:44px;height:44px;font-size:1.25rem;line-height:1;padding:0;flex-shrink:0}
.btn-nav:hover,.btn-nav:focus{background:#26395d;color:#fff}
.card{border:1px solid var(--outline);border-radius:var(--radius-lg);box-shadow:none;background:var(--surface)}
.card.card-body,.card-body{padding:20px}
.btn-primary{background:var(--nav);border-color:var(--nav);font-weight:700}
.btn-primary:hover,.btn-primary:focus{background:var(--nav-deep);border-color:var(--nav-deep)}
.btn-outline-primary{color:var(--nav);border-color:var(--nav)}
.btn-outline-primary:hover{background:var(--nav);border-color:var(--nav);color:#fff}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#14213d;font-weight:800}
.btn-accent:hover,.btn-accent:focus{background:#e5940a;border-color:#e5940a;color:#14213d}
.metric{padding:18px}
.metric .value{font-size:1.35rem;font-weight:750;font-variant-numeric:tabular-nums}
.metric .label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.table{font-size:.9rem}
.table thead th{color:var(--muted);font-size:.72rem;text-transform:uppercase;white-space:nowrap;font-weight:600;letter-spacing:.04em}
.badge-profit{background:#d1fae5;color:#065f46}
.badge-loss{background:#fee2e2;color:#991b1b}
.login-bg{min-height:100vh;display:grid;place-items:center;background:linear-gradient(145deg,#14213d 0%,#264e70 100%);padding:16px}
.login-card{background:#fff;width:min(92vw,400px);padding:clamp(24px,5vw,36px);border-radius:18px;text-align:center;box-shadow:0 20px 60px #0005}
.login-card h1{font-size:1.25rem;font-weight:800;margin:10px 0 0}
.login-card p{color:var(--muted)}
.login-card form{text-align:left;margin-top:24px}
.brand-mark{margin:auto;width:58px;height:58px;border-radius:17px;background:var(--accent);display:grid;place-items:center;font-weight:900;color:#14213d;font-size:1.3rem}
.fab{position:fixed;right:20px;bottom:20px;border-radius:50px;box-shadow:0 8px 18px #0003}
.stock-card{border:2px solid #1f3d2a;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#e8f5e9,#f7fbf7);box-shadow:0 4px 16px #0f172a14}
.stock-card-head{background:#1f3d2a;color:#fff;padding:14px 18px;text-align:center}
.stock-card-title{font-size:1.25rem;font-weight:800;letter-spacing:.06em}
.stock-card-meta{font-size:.85rem;opacity:.9;margin-top:4px}
.stock-card-table{background:#fff;margin:0}
.stock-card-table thead th{background:#dcedc8;color:#1f3d2a;border:1px solid #a5d6a7;font-size:.72rem;vertical-align:middle;text-transform:none;letter-spacing:0}
.stock-card-table td{border:1px solid #c8e6c9;vertical-align:middle}
.stock-card-table .form-control-sm{border-color:#a5d6a7}
.stock-card-table .ks-sisa{color:#1b5e20;font-size:1.05rem}
.form-label{font-weight:600;font-size:.85rem;color:#45464d}
.form-control:focus,.form-select:focus{
  border-color:var(--nav);box-shadow:0 0 0 3px rgba(20,33,61,.12);
}

/* —— Minimalist Ledger: Rekapan Transaksi —— */
.page-recap .main{max-width:920px}
.recap-filter{
  border:1px solid var(--outline);border-radius:var(--radius-lg);
  background:var(--surface);padding:16px 18px;margin-bottom:20px;
}
.recap-share{
  border:1px solid #cfe0f5;border-radius:var(--radius-lg);
  background:#eef6ff;padding:16px 18px;margin-bottom:16px;
}
.recap-sheet{display:flex;flex-direction:column;gap:28px;margin-bottom:8px}
.recap-section{margin:0}
.recap-section-label{
  display:flex;align-items:center;gap:12px;margin-bottom:12px;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.recap-section-label::after{content:"";flex:1;height:1px;background:var(--outline)}
.recap-section-head{display:none}

.recap-panel{
  border:1px solid var(--outline);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden;
}
.recap-panel-pad{padding:18px}

.recap-metrics{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--outline);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);
}
.recap-metric{
  padding:16px 18px;border-right:1px solid var(--outline);border-bottom:1px solid var(--outline);
  display:flex;flex-direction:column;gap:8px;min-width:0;
}
.recap-metric:nth-child(3n){border-right:0}
.recap-metric:nth-last-child(-n+3){border-bottom:0}
.recap-metric > .form-label{margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.recap-metric .form-control,
.recap-metric .form-control.bg-light{
  border:0;background:transparent!important;padding:0;font-size:1.35rem;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--nav);box-shadow:none;border-radius:0;
  height:auto;min-height:0;
}
.recap-metric .form-control:focus{box-shadow:none;outline:none;background:var(--surface-low)!important;border-radius:8px;padding:4px 8px;margin:-4px -8px}
.recap-metric .form-text{margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.recap-metric-accent{background:var(--surface-low)}
.recap-metric-accent .form-control.bg-light,
.recap-metric-accent #sisa-receh{color:var(--nav)}
.recap-note-line{margin:10px 2px 0;font-size:.82rem;color:var(--muted);font-style:italic}

.recap-table{margin:0}
.recap-table thead th{
  background:var(--surface);border-bottom:1px solid var(--outline);padding:12px 16px;
}
.recap-table td{padding:12px 16px;border-bottom:1px solid var(--outline);vertical-align:middle}
.recap-table tbody tr:last-child td{border-bottom:0}
.recap-table tfoot th,
.recap-table tfoot td{
  background:var(--surface-low);border-top:1px solid var(--outline);border-bottom:0;
  padding:14px 16px;font-size:1rem;color:var(--nav);
}
.recap-empty{padding:18px;margin:0;border:0;border-radius:0;background:var(--surface-low)}

.recap-flow{border:1px solid var(--outline);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
.recap-flow-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--outline);font-size:.95rem;
}
.recap-flow-row:last-child{border-bottom:0}
.recap-flow-row b,.recap-flow-row .amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.recap-flow-input{background:var(--surface-low)}
.recap-flow-field{max-width:160px;text-align:right;font-weight:600;border-radius:8px}
.recap-flow-result{background:var(--success-bg)}
.recap-flow-final{
  background:linear-gradient(180deg,#fffaf0,#fff3d6);
  border-top:2px solid var(--nav);
  padding:20px 16px;flex-direction:column;align-items:center;gap:6px;text-align:center;
}
.recap-flow-final span{
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;color:var(--muted);
}
.recap-flow-final b{
  font-size:clamp(1.6rem,4vw,2.1rem);color:var(--accent);font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.recap-flow-sub{padding:4px 16px 4px 28px;font-size:.82rem;color:var(--muted);border-bottom:0}
.recap-flow-divider{height:8px;background:var(--surface-low);border-bottom:1px solid var(--outline)}

.recap-notes textarea{
  border:1px solid var(--outline);border-radius:var(--radius);min-height:120px;resize:vertical;
  font-size:.95rem;
}
.recap-history{border:1px solid var(--outline);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden}
.recap-history .table{margin:0}
.recap-history .table thead th{background:var(--surface);padding:10px 14px}
.recap-history .table td{padding:12px 14px;border-color:var(--outline)}

.recap-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-top:4px;
}
.recap-save-hint{font-size:.82rem;color:var(--muted);margin:0}
.recap-actions .btn{min-height:44px;border-radius:12px;font-weight:700;padding:.65rem 1.15rem}
.recap-actions .btn-primary{order:2}
.recap-actions .btn-outline-secondary{order:1}

.recap-bottom-spacer{display:none}

/* Tablet */
@media (max-width:991.98px){
  .main{margin-left:0;padding:16px}
  .metric .value{font-size:1.15rem}
  .recap-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recap-metric:nth-child(3n){border-right:1px solid var(--outline)}
  .recap-metric:nth-child(2n){border-right:0}
  .recap-metric:nth-last-child(-n+3){border-bottom:1px solid var(--outline)}
  .recap-metric:nth-last-child(-n+2){border-bottom:0}
}

/* HP — Card-Stack mobile */
@media (max-width:767.98px){
  .main{padding:12px 12px 96px}
  .topbar{margin-bottom:14px}
  .date-pill{font-size:.72rem}
  .card{border-radius:12px}
  .card.card-body,.card-body{padding:14px}
  .metric{padding:14px}
  .metric .value{font-size:1.05rem}
  .table{font-size:.82rem}
  .table thead th{font-size:.68rem}
  .table td,.table th{padding:.45rem .4rem;vertical-align:middle}
  .form-control,.form-select,.btn{min-height:44px}
  .form-control-sm,.form-select-sm,.btn-sm{min-height:36px}
  .table-responsive{margin:0;border-radius:10px;-webkit-overflow-scrolling:touch}
  .stock-card-title{font-size:1.05rem}
  .stock-card-table input.form-control-sm{min-width:64px}
  .btn-lg{width:100%}
  .hide-mobile{display:none!important}

  .recap-sheet{gap:22px}
  .recap-filter{padding:14px}
  .recap-metrics{grid-template-columns:1fr;border-radius:12px}
  .recap-metric{
    border-right:0!important;border-bottom:1px solid var(--outline)!important;
    padding:14px 16px;
  }
  .recap-metric:last-child{border-bottom:0!important}
  .recap-metric .form-control,
  .recap-metric .form-control.bg-light{font-size:1.2rem}
  .recap-panel{border-radius:12px}
  .recap-flow{border-radius:12px}
  .recap-flow-field{max-width:120px;min-height:40px}
  .recap-flow-final{padding:18px 14px}
  .recap-flow-final b{font-size:1.75rem}
  .recap-table thead th,.recap-table td,.recap-table tfoot th{padding:10px 12px}
  .recap-history{border-radius:12px;margin-bottom:8px}

  .recap-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:1040;
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--outline);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:1fr 1.4fr;gap:8px;
    box-shadow:0 -8px 24px rgba(20,33,61,.06);
  }
  .recap-actions .btn{width:100%;margin:0;order:unset}
  .recap-actions .btn-outline-secondary{grid-column:1}
  .recap-actions .btn-primary{grid-column:2}
  .recap-save-hint{display:none}
  .recap-bottom-spacer{display:block;height:8px}
}

@media (max-width:575.98px){
  .page-title{font-size:1.15rem}
  input[type=number]{font-size:16px}
  select.form-select,input.form-control,textarea.form-control{font-size:16px}
  .recap-table .hide-xs{display:none}
}