/* IFRS 16 Lease Calculator — Plugin Stylesheet v2.2 */

:root{
--navy:#e8eef5;--navy2:#d0dce8;--navy3:#b8ccdc;--navy4:#8aaabf;
--gold:#1a365d;--gold2:#2a4a7f;--gold3:#1a365d;
--ink:#0d1b2a;--ink2:#2d4a63;--ink3:#5a7a94;--ink4:#8aaabf;
--surface:#ffffff;--surface2:#f0f5fa;--surface3:#e2ecf5;
--border:#c5d5e5;--border2:#a8bfd4;
--green:#1a5c3a;--red:#a81c1c;--amber:#8a5a0a;
--blue:#1a3f6f;--radius:10px;--radius-sm:6px;
}

.ifrs16-wrap{font-family:'IBM Plex Sans',sans-serif;background:#dce7f2;color:var(--ink);min-height:100vh}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:#c5d5e5}
::-webkit-scrollbar-thumb{background:#8aaabf;border-radius:3px}
.ifrs16-wrap .ifrs16-header{background:#1a365d;border-bottom:1px solid #0f2340;padding:1rem 2rem;position:sticky;top:0;z-index:10}
.hdr-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;max-width:1440px;margin:0 auto}
header h1{font-size:1.1rem;font-weight:600;color:#e8f0fa;letter-spacing:.01em}
header h1 span{color:#8aaabf;font-weight:400;font-size:.75rem;margin-left:8px;letter-spacing:.02em}
header p{font-size:.72rem;color:#7a9ab5;margin-top:2px}
.layout{display:grid;grid-template-columns:380px 1fr;gap:1.25rem;max-width:1440px;margin:1.25rem auto;padding:0 1.5rem}
@media(max-width:1024px){.layout{grid-template-columns:320px 1fr}}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.sec{font-size:.63rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:10px;margin-top:1.1rem;padding-bottom:5px;border-bottom:1px solid var(--border)}
.sec:first-child{margin-top:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.field{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.field label{font-size:.75rem;color:var(--ink2);display:flex;align-items:center;gap:5px}
.field input,.field select{font-size:.83rem;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface2);color:var(--ink);font-family:inherit;transition:border-color .15s,background .15s}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);background:var(--surface3)}
.field input::placeholder{color:var(--ink4)}
.field select option{background:var(--surface2)}
.field-hint{font-size:.68rem;color:var(--ink3);line-height:1.4}
.badge{font-size:.6rem;padding:1px 6px;border-radius:3px;font-weight:700;white-space:nowrap;text-transform:uppercase;letter-spacing:.04em}
.badge-up{background:rgba(46,184,122,.15);color:var(--green)}
.badge-dn{background:rgba(224,92,106,.15);color:var(--red)}
.badge-info{background:rgba(77,157,224,.15);color:var(--blue)}
.tier-row{display:flex;align-items:center;gap:5px;margin-bottom:6px;flex-wrap:wrap}
.tier-row span{font-size:.7rem;color:var(--ink3);white-space:nowrap}
.tier-row input{font-size:.78rem;padding:4px 7px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:var(--surface2);color:var(--ink);font-family:'IBM Plex Mono',monospace}
.tier-row input.narrow{width:68px}
.tier-row input.wide{width:105px}
.tier-row input[readonly]{background:var(--navy2);color:var(--ink3)}
.btn-remove{background:none;border:none;color:var(--red);cursor:pointer;font-size:.9rem;padding:0 2px;opacity:.7}
.btn-remove:hover{opacity:1}
.btn-add{background:none;border:none;color:var(--gold);font-size:.76rem;cursor:pointer;padding:2px 0;margin-top:2px;letter-spacing:.01em}
.btn-calc{width:100%;padding:10px;background:var(--gold);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.88rem;font-weight:700;cursor:pointer;margin-top:1rem;font-family:inherit;letter-spacing:.03em;transition:background .15s,transform .1s}
.btn-calc:hover{background:var(--gold2)}
.btn-calc:active{transform:scale(.98)}
.btn-secondary{width:100%;padding:7px;background:transparent;color:var(--ink2);border:1px solid var(--border2);border-radius:var(--radius-sm);font-size:.78rem;cursor:pointer;margin-top:5px;font-family:inherit;transition:border-color .15s,color .15s}
.btn-secondary:hover{border-color:var(--gold);color:var(--gold)}
.warn-box{background:rgba(232,168,56,.08);border:1px solid rgba(232,168,56,.35);border-radius:var(--radius-sm);padding:.6rem .9rem;margin-bottom:8px;font-size:.74rem;color:var(--amber);display:none;line-height:1.6}
.warn-box strong{color:var(--gold2)}
.impact-box{background:rgba(77,157,224,.07);border:1px solid rgba(77,157,224,.25);border-radius:var(--radius-sm);padding:.6rem .9rem;margin-bottom:8px;font-size:.74rem;line-height:1.7;color:var(--ink2);display:none}
.impact-row{display:flex;justify-content:space-between;padding:2px 0;font-family:'IBM Plex Mono',monospace;font-size:.73rem}
.iplus{color:var(--green);font-weight:600}
.iminus{color:var(--red);font-weight:600}
.itotal{color:var(--gold);font-weight:700;border-top:1px solid rgba(77,157,224,.25);padding-top:4px;margin-top:2px}
.reassess-block{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem 1rem;margin-top:6px;display:none}
.reassess-block.open{display:block}
.reassess-toggle{background:none;border:none;color:var(--blue);font-size:.76rem;cursor:pointer;padding:2px 0;font-family:inherit;text-decoration:underline;text-underline-offset:2px}
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:1rem}
.metric{background:#d0dce8;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem 1rem;position:relative;overflow:hidden}
.metric::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--gold)}
.metric-lbl{font-size:.67rem;color:var(--ink3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em}
.metric-val{font-size:1.25rem;font-weight:600;color:var(--gold);font-family:'IBM Plex Mono',monospace}
.metric-val.neutral{color:var(--ink)}
.tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:1rem;flex-wrap:wrap;gap:0}
.tab{font-size:.76rem;padding:8px 14px;border:none;background:none;color:var(--ink3);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;letter-spacing:.01em;transition:color .15s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--gold);border-bottom-color:var(--gold);font-weight:500}
.tbl-wrap{overflow-x:auto;max-height:420px;overflow-y:auto}
table{width:100%;border-collapse:collapse;font-size:.76rem;font-family:'IBM Plex Mono',monospace}
thead{position:sticky;top:0;background:var(--surface2);z-index:1}
th{padding:8px 10px;text-align:right;font-size:.63rem;font-weight:600;color:var(--ink3);white-space:nowrap;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.05em}
th:first-child{text-align:left}
td{padding:6px 10px;text-align:right;border-bottom:1px solid var(--border);color:var(--ink)}
td:first-child{text-align:left;color:var(--ink3);font-family:'IBM Plex Sans',sans-serif;font-size:.76rem}
tr:hover td{background:var(--surface3)}
tr.reassess-row td{background:rgba(232,168,56,.08);color:var(--amber)}
.je-block{border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:7px;background:var(--surface2)}
.je-block.initial-je{border-color:rgba(201,168,76,.4);background:rgba(201,168,76,.05)}
.je-block.reassess-je{border-color:rgba(232,168,56,.4);background:rgba(232,168,56,.05)}
.je-date{font-size:.7rem;font-weight:600;color:var(--gold);margin-bottom:6px;letter-spacing:.01em}
.je-line{display:flex;justify-content:space-between;font-size:.76rem;font-family:'IBM Plex Mono',monospace;padding:3px 0;color:var(--ink)}
.je-line.cr{padding-left:24px;color:var(--ink3)}
.je-wrap{max-height:440px;overflow-y:auto}
.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem;margin-bottom:.85rem}
.sum-box{border:1px solid var(--border);border-radius:var(--radius-sm);padding:.9rem;margin-bottom:.85rem;background:var(--surface2)}
.sum-box h4{font-size:.63rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gold);margin-bottom:.6rem}
.sum-row{display:flex;justify-content:space-between;font-size:.78rem;padding:4px 0;border-bottom:1px solid var(--border)}
.sum-row:last-child{border:none;font-weight:600}
.sum-row .lbl{color:var(--ink3)}
.sum-row .val{font-family:'IBM Plex Mono',monospace;color:var(--ink)}
.je-filter,.je-view{font-size:.7rem;padding:4px 12px;border:1px solid var(--border2);border-radius:var(--radius-sm);background:transparent;color:var(--ink3);cursor:pointer;font-family:inherit;transition:all .15s}
.je-filter.active,.je-view.active{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:600}
.je-filter:hover:not(.active),.je-view:hover:not(.active){border-color:var(--gold);color:var(--gold)}
.rules-toggle{width:100%;padding:8px 13px;background:rgba(201,168,76,.08);color:var(--gold);border:1px solid rgba(201,168,76,.3);border-radius:var(--radius-sm);font-size:.78rem;font-weight:600;cursor:pointer;text-align:left;font-family:inherit;margin-top:8px;display:flex;justify-content:space-between;align-items:center;transition:background .15s}
.rules-toggle:hover{background:rgba(201,168,76,.14)}
.rules-panel{display:none;border:1px solid rgba(201,168,76,.2);border-radius:var(--radius-sm);padding:1rem 1.1rem;margin-top:5px;background:rgba(201,168,76,.04);font-size:.75rem;line-height:1.75}
.rules-panel.open{display:block}
.rule-section{margin-bottom:.9rem}
.rule-section:last-child{margin-bottom:0}
.rule-section h4{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--gold);margin-bottom:.35rem}
.rule-section p,.rule-section li{color:var(--ink2);font-size:.74rem}
.rule-section ul{padding-left:1rem}
.rule-section li{margin-bottom:3px}
.rule-ref{font-size:.66rem;color:var(--ink3);font-style:italic;margin-top:.25rem}
.formula-box{background:#d0dce8;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .85rem;margin:.35rem 0;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--ink);white-space:pre-wrap}
.deposit-block{border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;overflow:hidden}
.deposit-.ifrs16-wrap .ifrs16-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;cursor:pointer;background:var(--surface2);user-select:none;transition:background .15s}
.deposit-header:hover{background:var(--surface3)}
.deposit-title{font-size:.78rem;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:7px}
.deposit-arrow{font-size:.65rem;color:var(--ink3);transition:transform .2s}
.deposit-arrow.open{transform:rotate(180deg)}
.deposit-.ifrs16-wrap{padding:10px 12px;background:var(--surface);border-top:1px solid var(--border)}
.deposit-explain{font-size:.72rem;color:var(--ink3);line-height:1.65;margin-bottom:4px}
.deposit-ref{font-size:.66rem;color:var(--gold);font-style:italic;display:block;margin-top:3px}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--gold);color:#fff;border-radius:var(--radius-sm);padding:.65rem 1.2rem;font-size:.8rem;font-weight:600;z-index:100;animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.empty{text-align:center;padding:4rem 2rem;color:var(--ink3);font-size:.85rem}
.empty-icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.5}
.pv-sec-title{font-size:.63rem;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--gold);margin:1.1rem 0 .6rem}
@media print{
  :root{--navy:#fff;--surface:#fff;--surface2:#f5f5f5;--border:#ddd;--border2:#ccc;--ink:#111;--ink2:#444;--ink3:#777;--gold:#8b6914;--gold2:#8b6914}
  
  .ifrs16-wrap{background:#fff!important;color:#111!important}
  .ifrs16-wrap .ifrs16-header{position:relative!important;border-bottom:2px solid #111!important;padding:.5rem 1rem!important}
  header h1{color:#8b6914!important}
  .no-print{display:none!important}
  .layout{grid-template-columns:1fr!important;gap:0!important;padding:0!important;margin:.5rem 0 0!important}
  .panel{border:none!important;border-radius:0!important;padding:.5rem 0!important;background:#fff!important}
  .metrics{grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
  .metric{background:#f5f5f5!important;border:1px solid #ddd!important}
  .metric::before{display:none!important}
  .tabs{display:none!important}
  .tbl-wrap,.je-wrap{max-height:none!important;overflow:visible!important}
  table{font-size:8pt!important}
  th{font-size:7pt!important;padding:4px 7px!important;background:#f0f0f0!important;color:#555!important}
  td{padding:3px 7px!important;color:#111!important;border-bottom:1px solid #eee!important}
  .je-block{break-inside:avoid;margin-bottom:4px!important;padding:6px 9px!important;background:#fff!important;border:1px solid #ddd!important}
  .je-date{color:#8b6914!important}
  .je-line{color:#111!important}
  .je-line.cr{color:#555!important}
  .summary-grid{grid-template-columns:1fr 1fr!important}
  .sum-box{background:#f5f5f5!important;border:1px solid #ddd!important}
  .rules-panel,.rules-toggle,.warn-box,.reassess-block,.deposit-block{display:none!important}
  .print-section-title{display:block!important;font-size:10pt;font-weight:600;color:#111;border-bottom:2px solid #8b6914;padding-bottom:3px;margin:12px 0 6px}
  #tab-sched,#tab-depr,#tab-disc,#tab-summary,#tab-je{display:block!important}
  .print-break{page-break-before:always}
  .print-params{display:block!important}
  .empty{display:none!important}
  .impact-box{display:none!important}
}
.print-section-title{display:none}
.print-params{display:none}

/* ═══ RESPONSIVE — TABLET & MOBILE ═══ */

/* Tablet (≤768px) */
@media(max-width:768px){
  .ifrs16-wrap .ifrs16-header{padding:.75rem 1rem}
  header h1{font-size:1rem}
  header p{display:none}
  .hdr-inner button{font-size:.72rem;padding:5px 10px}

  .layout{padding:0 .75rem;gap:1rem;margin:.75rem auto}

  .panel{padding:1rem}

  /* Stack g2/g3 grids to single column */
  .g2{grid-template-columns:1fr}
  .g3{grid-template-columns:1fr 1fr}

  /* Metrics: 2 per row on tablet */
  .metrics{grid-template-columns:1fr 1fr}
  .metric-val{font-size:1.1rem}

  /* Tabs: scrollable row */
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;padding:8px 12px;font-size:.75rem}

  /* Tables: allow horizontal scroll with visible indicator */
  .tbl-wrap{max-height:320px}
  table{font-size:.72rem}
  th{padding:6px 8px;font-size:.6rem}
  td{padding:5px 8px}

  /* Summary grid: single column */
  .summary-grid{grid-template-columns:1fr}

  /* Journal: filter buttons wrap */
  .je-wrap{max-height:360px}

  /* Tier rows */
  .tier-row input.narrow{width:60px}
  .tier-row input.wide{width:95px}

  /* Deposit blocks */
  .deposit-title{font-size:.76rem}

  /* Toast */
  .toast{bottom:1rem;right:1rem;left:1rem;text-align:center}
}

/* Mobile (≤480px) */
@media(max-width:480px){
  .ifrs16-wrap .ifrs16-header{padding:.6rem .75rem}
  header h1{font-size:.95rem}
  header h1 span{display:none}

  .layout{padding:0 .5rem;gap:.75rem;margin:.5rem auto}
  .panel{padding:.85rem .75rem;border-radius:8px}

  .sec{font-size:.6rem;letter-spacing:.07em}

  /* All grids single column */
  .g2,.g3{grid-template-columns:1fr}

  /* Inputs bigger touch targets */
  .field input,.field select{padding:9px 10px;font-size:.9rem}
  .field label{font-size:.8rem}

  /* Metrics: 2 per row, smaller */
  .metrics{grid-template-columns:1fr 1fr;gap:6px}
  .metric{padding:.65rem .75rem}
  .metric-lbl{font-size:.6rem}
  .metric-val{font-size:1rem}

  /* Tabs: scrollable, bigger touch */
  .tab{padding:9px 11px;font-size:.74rem}

  /* Tables: compact */
  .tbl-wrap{max-height:280px}
  table{font-size:.68rem}
  th{padding:5px 7px;font-size:.57rem}
  td{padding:4px 7px}
  td:first-child{font-size:.68rem}

  /* Journal */
  .je-block{padding:8px 10px}
  .je-date{font-size:.68rem}
  .je-line{font-size:.72rem}
  .je-line.cr{padding-left:14px}
  .je-wrap{max-height:300px}

  /* Filter buttons: wrap and full-width feel */
  .je-filter,.je-view{padding:5px 10px;font-size:.68rem}

  /* Calculate button: bigger on mobile */
  .btn-calc{padding:12px;font-size:.95rem}
  .btn-secondary{padding:9px}

  /* Tier rows: compact */
  .tier-row{gap:4px}
  .tier-row input.narrow{width:55px;font-size:.75rem}
  .tier-row input.wide{width:85px;font-size:.75rem}
  .tier-row span{font-size:.68rem}

  /* Summary */
  .sum-row{font-size:.75rem}
  .sum-box{padding:.75rem}
  .sum-box h4{font-size:.6rem}

  /* Deposit blocks */
  .deposit-.ifrs16-wrap .ifrs16-header{padding:9px 10px}
  .deposit-title{font-size:.75rem}
  .deposit-.ifrs16-wrap{padding:9px 10px}
  .deposit-explain{font-size:.71rem}

  /* Empty state */
  .empty{padding:2.5rem 1rem}
  .empty-icon{font-size:2rem}

  /* Formula box */
  .formula-box{font-size:.66rem}

  /* Impact box */
  .impact-row{font-size:.7rem}

  /* Rules */
  .rules-toggle{font-size:.75rem}
  .rule-section p,.rule-section li{font-size:.72rem}
}

/* Extra small (≤360px) */
@media(max-width:360px){
  .metrics{grid-template-columns:1fr}
  .metric-val{font-size:1.1rem}
  .tier-row input.narrow{width:50px}
  .tier-row input.wide{width:80px}
}