/* ═══════════════════════════════════════════════════════
   KPR FINANCE — DESKTOP STYLES  (≥ 900px)
   Edit this file for desktop-only layout changes.
   Shared tokens/components → app-shared.css
   Mobile layout → app-mobile.css
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   DESKTOP  ≥ 900px
══════════════════════════════════════════ */
@media(min-width:900px){
  .app{flex-direction:row;height:100vh;overflow:hidden}

  .dsk-sidebar{width:200px;flex-shrink:0;height:100vh;display:flex;flex-direction:column;background:var(--bg0);border-right:1px solid var(--bd);overflow:visible;padding-bottom:8px;}
  .light .dsk-sidebar{background:rgba(255,255,255,0.80);border-right-color:rgba(0,0,0,0.06);backdrop-filter:blur(20px);}

  .dsk-logo{width:100%;padding:22px 20px 18px;border-bottom:1px solid rgba(124,109,250,0.08);flex-shrink:0;display:flex;align-items:center;}
  .dsk-logo-text{font-size:16px;font-weight:900;letter-spacing:-.5px;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;border:none;padding:0;cursor:pointer;}

  .dsk-nav{flex:1;width:100%;padding:10px;overflow-y:auto;overflow-x:visible;display:flex;flex-direction:column;gap:3px;}

  .dsk-ni{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border:none;font-size:13px;font-weight:600;color:var(--t2);cursor:pointer;background:none;text-align:left;transition:background .15s,color .15s;white-space:nowrap;border-radius:var(--r-lg);}
  .dsk-ni:hover{background:var(--abg);color:var(--t1);}
  .dsk-ni .ico{display:inline-flex;font-size:16px;width:18px;flex-shrink:0;}
  .dsk-ni::after{display:none !important;}
  .dsk-ni.act{color:var(--accent);background:var(--abg);font-weight:700;}
  .light .dsk-ni.act{background:#1a1523;color:#ffffff;border-radius:var(--r-lg);}
  .dsk-ni.act::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;border-radius:0 3px 3px 0;background:var(--accent);box-shadow:0 0 10px rgba(124,109,250,0.6);}
  .light .dsk-ni.act::before{display:none;}
  .dsk-ni.danger{color:var(--err)}
  .dsk-ni.danger:hover{background:var(--errbg);color:var(--err)}

  .dsk-sep{width:calc(100% - 28px);height:1px;background:rgba(124,109,250,0.08);margin:6px 14px;flex-shrink:0;}

  .dsk-user{width:100%;padding:10px 12px 8px;border-top:1px solid rgba(124,109,250,0.08);flex-shrink:0;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s;position:relative;border-radius:0 0 var(--r-lg) var(--r-lg);}
  .dsk-user:hover{background:var(--abg);}
  .dsk-user img{width:32px;height:32px;border-radius:50%;flex-shrink:0;border:2px solid var(--accent);box-shadow:0 0 12px rgba(124,109,250,0.3);}
  .dsk-user span{display:inline;}

  .dsk-profile-wrap{position:relative;flex-shrink:0;width:100%;overflow:visible;}
  .dsk-profile-popup{position:absolute;bottom:100%;left:200px;min-width:220px;margin-bottom:8px;background:var(--bg1);border:1.5px solid var(--bd2);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);z-index:500;overflow:hidden;}

  .dsk-main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;overflow:hidden}
  .dsk-topbar{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 32px;height:64px;border-bottom:1px solid var(--bd);background:var(--bg0);flex-shrink:0;backdrop-filter:blur(16px);position:relative;z-index:10;overflow:visible;}
  .light .dsk-topbar{background:rgba(255,255,255,0.92);border-bottom-color:rgba(0,0,0,0.06);box-shadow:0 1px 12px rgba(0,0,0,0.05);}
  .dsk-topbar-left{font-size:19px;font-weight:900;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.5px;}
  .dsk-topbar-right{display:flex;gap:10px;align-items:center}
  /* Explicit height (not flex:1) so overflow:auto is guaranteed to engage — flex sizing was being overridden by content height even with min-height:0 in some browsers. */
  .dsk-body{height:calc(100vh - 64px);overflow-y:auto;overflow-x:hidden;padding:28px 32px;width:100%;box-sizing:border-box;}
  .demo-active .dsk-sidebar{height:calc(100vh - 33px)!important;}
  .demo-active .dsk-main{height:calc(100vh - 33px)!important;}
  .demo-active .dsk-body{height:calc(100vh - 97px)!important;}
  .tb{display:none!important}
  .bnav{display:none!important}
  .cnt,.cnt.hn{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;overflow:visible;flex:none;min-width:0;}
  .mobile-only{display:none!important}

  .dsk-stats{display:grid;gap:14px;margin-bottom:22px}
  .dsk-stat{background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r-xl);padding:22px 24px;transition:var(--transition);animation:fadeUp .3s cubic-bezier(.4,0,.2,1) both;position:relative;overflow:hidden;}
  .light .dsk-stat{border-color:transparent;box-shadow:0 4px 20px rgba(0,0,0,0.07);}
  .dsk-stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad1);opacity:0;transition:opacity .2s;}
  .dsk-stat:hover{border-color:rgba(124,109,250,0.22);box-shadow:var(--shadow-glow);transform:translateY(-1px);}
  .dsk-stat:hover::before{opacity:.6;}
  .dsk-stat .lbl{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.09em;margin-bottom:12px}
  .dsk-stat .val{font-size:28px;font-weight:900;letter-spacing:-1px;font-family:'Space Mono','DM Mono',monospace;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
  .light .dsk-stat .val{background:none;-webkit-text-fill-color:var(--t1);color:var(--t1);}

  .dsk-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r-xl);overflow:hidden;margin-bottom:18px;}
  .light .dsk-table{border-color:transparent;box-shadow:0 4px 20px rgba(0,0,0,0.07);}
  .dsk-table thead tr{background:var(--bg2)}
  .dsk-table th{padding:12px 16px;font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.08em;text-align:left;border-bottom:1px solid var(--bd);white-space:nowrap;}
  .dsk-table th:not(:first-child){border-left:1px solid var(--bd)}
  .dsk-table td{padding:0;border-bottom:1px solid var(--bd);vertical-align:middle}
  .dsk-table td:not(:first-child){border-left:1px solid var(--bd)}
  .dsk-table tbody tr:last-child td{border-bottom:none}
  .dsk-table tbody tr{transition:background .1s}
  .dsk-table tbody tr:hover td{background:var(--abg)}
  .dsk-table td input,.dsk-table td select{width:100%;background:transparent;border:none;font-size:13px;color:var(--t1);padding:12px 16px;font-weight:500;}
  .dsk-table td input:focus,.dsk-table td select:focus{outline:none;background:var(--abg)}
  .dsk-table td select{cursor:pointer}
  .dsk-cell{padding:12px 16px}
  .dsk-prog{height:7px;background:var(--bg3);border-radius:100px;margin-top:6px;overflow:hidden}
  .light .dsk-prog{background:#f0ece8;}
  .dsk-prog-fill{height:100%;border-radius:100px;background:var(--grad1);transition:width .4s cubic-bezier(.4,0,.2,1)}
  .light .dsk-prog-fill{background:linear-gradient(90deg,#a78bfa,#f472b6,#fb923c);}
  .dsk-badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.02em}

  /* ── TWO-PANEL SECTION LAYOUT ── */
  .dsk-2col{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start;}
  .dsk-side{background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r-xl);overflow:hidden;position:sticky;top:0;}
  .light .dsk-side{border-color:transparent;box-shadow:0 4px 20px rgba(0,0,0,0.07);}
  .dsk-side-head{padding:16px 18px 14px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:10px;}
  .dsk-side-icon{width:34px;height:34px;border-radius:var(--r-md);background:var(--abg);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .dsk-side-title{font-size:14px;font-weight:700;color:var(--t1);}
  .dsk-side-count{font-size:11px;color:var(--t2);margin-top:1px;}
  .dsk-kv{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;border-bottom:1px solid var(--bd);gap:8px;}
  .dsk-kv .l{font-size:11px;color:var(--t2);white-space:nowrap;}
  .dsk-kv .v{font-size:13px;font-weight:700;text-align:right;font-family:'Space Mono','DM Mono',monospace;}
  .dsk-side-sect{padding:10px 18px;border-top:1px solid var(--bd);}
  .dsk-side-sect-title{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px;}
  .dsk-side-flag-row{display:flex;align-items:center;gap:6px;margin-bottom:5px;font-size:12px;font-weight:600;color:var(--t2);}

  /* ── DASHBOARD QUICK-NAV ── */
  .dsk-qnav{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:22px;}
  .dsk-qnav-item{background:var(--bg1);border:1px solid var(--bd);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:var(--transition);}
  .dsk-qnav-item:hover{background:var(--abg);border-color:rgba(124,109,250,0.25);transform:translateY(-1px);box-shadow:var(--shadow-md);}
  .dsk-qnav-item i{font-size:18px;color:var(--accent2);flex-shrink:0;}
  .dsk-qnav-label{font-size:12px;font-weight:600;color:var(--t2);}
}

/* ══════════════════════════════════════════
   NOVA TOP NAVBAR LAYOUT (desktop ≥ 900px)
══════════════════════════════════════════ */
@media(min-width:900px){
  /* Full-page layout wrapper */
  .nova-layout{
    display:flex;flex-direction:column;
    height:100vh;width:100%;overflow:hidden;
  }

  /* Top navigation bar */
  .nova-topnav{
    display:flex;align-items:center;justify-content:space-between;
    padding:0 32px;height:66px;flex-shrink:0;
    background:rgba(255,255,255,0.85);
    border-bottom:1px solid rgba(0,0,0,0.06);
    backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    box-shadow:0 1px 12px rgba(0,0,0,0.05);
    gap:24px;
    position:relative;z-index:100;
  }

  /* Logo section */
  .nova-topnav-logo{
    display:flex;align-items:center;gap:10px;flex-shrink:0;min-width:0;
  }
  .nova-brand-text{
    font-size:17px;font-weight:900;letter-spacing:-.5px;
    color:var(--t1);background:none;border:none;padding:0;cursor:pointer;
    font-family:'Outfit','DM Sans',sans-serif;
  }

  /* Center nav pills */
  .nova-topnav-pills{
    display:flex;align-items:center;gap:4px;
    background:rgba(0,0,0,0.05);
    border-radius:100px;
    padding:4px;
    flex-shrink:1;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .nova-topnav-pills::-webkit-scrollbar{display:none}
  .light .nova-topnav-pills{background:rgba(0,0,0,0.05);}

  .nova-pill{
    padding:7px 18px;border-radius:100px;border:none;
    font-size:13px;font-weight:600;color:var(--t2);
    background:transparent;cursor:pointer;
    transition:all .18s cubic-bezier(.4,0,.2,1);
    white-space:nowrap;
  }
  .nova-pill:hover{color:var(--t1);background:rgba(255,255,255,0.6);}
  .nova-pill-act{
    background:#1a1523 !important;
    color:#ffffff !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
  }
  .light .nova-pill-act{
    background:#1a1523 !important;
    color:#ffffff !important;
  }

  /* Right controls */
  .nova-topnav-right{
    display:flex;align-items:center;gap:10px;flex-shrink:0;
  }

  /* Scrollable content area */
  .nova-content{
    flex:1;overflow-y:auto;
    padding:28px 40px;
  }
  .nova-content .cnt,.nova-content .cnt.hn{
    max-width:900px;margin:0 auto;padding:0;
  }
}