/* Vitrum ERP — Frontend polish + responsive windows/panels/modals
   Soft teal palette, clear buttons, calmer login. */

:root{
  --vf-teal:#0f766e;
  --vf-teal-soft:#148f85;
  --vf-teal-deep:#0b5f59;
  --vf-ink:#1e293b;
  --vf-muted:#64748b;
  --vf-line:#d5e0e3;
  --vf-surface:#f4f8f8;
  --vf-btn-radius:9px;
  --vf-btn-h:38px;
  --vf-btn-shadow:0 1px 2px rgba(15,40,45,.05),0 3px 8px rgba(15,40,45,.06);
}

/* ========== Buttons (login cinematic excluded) ========== */
.btn,
.vf-btn,
.sbt,
.sb-add,
.sb-pr,
.pkg-master-add,
.edit-btn,
.btn-refresh,
.add-tbl-btn,
#VF_APP .vf-mini,
#VF_APP .vf-btn,
.vf-side-foot button,
.an-card-tools button,
.vp-hero-actions button,
.topbar .btn,
.tacts .btn,
.vf-top-actions .vf-btn,
.pkg-head .btn,
.vf-modal-foot .vf-btn,
input[type=button],
input[type=submit]{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:var(--vf-btn-h);
  padding:8px 14px;
  border-radius:var(--vf-btn-radius);
  border:1px solid #c9d2de;
  background:linear-gradient(180deg,#ffffff 0%,#f4f7fb 100%);
  color:#1f2937;
  font-family:inherit;
  font-weight:650;
  font-size:12px;
  line-height:1.2;
  cursor:pointer;
  box-shadow:var(--vf-btn-shadow);
  transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease;
  text-decoration:none;
  user-select:none;
  white-space:nowrap;
}

.btn:hover,
.vf-btn:hover,
.sbt:hover,
.sb-add:hover,
.sb-pr:hover,
.edit-btn:hover,
.btn-refresh:hover,
#VF_APP .vf-mini:hover,
#VF_APP .vf-btn:hover,
.vf-side-foot button:hover,
.topbar .btn:hover,
.tacts .btn:hover,
.vf-modal-foot .vf-btn:hover{
  background:linear-gradient(180deg,#fff 0%,#eef3f9 100%);
  border-color:#9db0c7;
  transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,23,42,.08),0 8px 16px rgba(15,23,42,.08);
}

.btn:active,.vf-btn:active,.sbt:active{transform:translateY(0);box-shadow:0 1px 2px rgba(15,23,42,.08)}
.btn:disabled,.vf-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.btn.pr,.vf-btn.primary,button.primary,.sbt.a,.sb-add,.sb-pr{
  background:linear-gradient(180deg,var(--vf-teal-soft) 0%,var(--vf-teal) 100%);
  border-color:var(--vf-teal-deep);
  color:#fff;
  box-shadow:0 2px 6px rgba(15,118,110,.22);
}
.btn.pr:hover,.vf-btn.primary:hover,button.primary:hover,.sbt.a:hover,.sb-add:hover,.sb-pr:hover{
  background:linear-gradient(180deg,#17a196 0%,var(--vf-teal-deep) 100%);
  border-color:#094e49;
  color:#fff;
}
.btn.dr,.sbt.r,button.danger,.vf-btn.danger{
  background:linear-gradient(180deg,#fff 0%,#fff5f5 100%);
  border-color:#f0a8b0;color:#dc2626;
}
.btn.dr:hover,.sbt.r:hover,button.danger:hover,.vf-btn.danger:hover{
  background:#fee2e2;border-color:#ef878f;color:#b91c1c;
}
.sbt.d{
  background:linear-gradient(180deg,#fff 0%,#f6f3ff 100%);
  border-color:#cfc4f6;color:#6d28d9;
}

#VF_NAV button{
  width:100%;justify-content:flex-start;min-height:40px;border-radius:10px;
  background:transparent;border-color:transparent;box-shadow:none;
  color:rgba(255,255,255,.78);font-weight:650;
}
#VF_NAV button:hover{
  background:rgba(255,255,255,.08);border-color:transparent;transform:none;box-shadow:none;color:#fff;
}
#VF_NAV button.on{
  background:rgba(255,255,255,.14);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.pkg-proc-buttons button{min-height:34px;min-width:34px;padding:4px;border-radius:8px}

#VF_SYNC_STATUS{
  position:fixed;left:14px;bottom:14px;z-index:100000;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;background:#111827;color:#fff;
  font-size:11px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:.92;pointer-events:none;max-width:calc(100vw - 28px);
}
#VF_SYNC_STATUS.ok{background:#065f46}
#VF_SYNC_STATUS.err{background:#991b1b}
#VF_SYNC_STATUS.warn{background:#92400e}

/* ========== Windows / Modals — always usable ========== */
.vf-modal,
#VF_MODAL.vf-modal{
  align-items:center!important;
  justify-content:center!important;
  padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left))!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch;
}
.vf-modal-box,
#VF_MODAL .vf-modal-box{
  width:min(980px,calc(100vw - 20px))!important;
  max-width:calc(100vw - 20px)!important;
  max-height:min(92vh, calc(100dvh - 20px))!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  margin:auto;
}
.vf-modal-box.sm{width:min(560px,calc(100vw - 20px))!important}
.vf-modal-box.lg,.vf-modal-box.xl{width:min(1180px,calc(100vw - 20px))!important}
.vf-modal-box.xl{width:min(1420px,calc(100vw - 16px))!important}

.vf-modal-head{
  flex:0 0 auto!important;
  flex-wrap:wrap;
  gap:10px!important;
}
.vf-modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.vf-modal-foot{
  flex:0 0 auto!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  align-items:center;
  justify-content:flex-end;
}
.vf-modal-foot .vf-btn{flex:0 1 auto}

/* Wide docs inside modal: scroll horizontally instead of breaking layout */
#VF_MODAL .vf-customer-doc,
#VF_MODAL .vf-doc-paper,
#VF_MODAL .vf-table-wrap,
#VF_MODAL .of-grid,
#VF_MODAL .invoice-compare-shell{
  min-width:0!important;
  max-width:100%;
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
}

/* Edit / design side panels */
.edit-panel.open,
#EDITPANEL.open{
  max-width:100vw!important;
}
.edit-box,
.uie-box{
  max-height:100dvh;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

/* Tables never blow the page */
.vf-table-wrap,
.tw,
.an-shell,
#VF_CONTENT,
.pkg-detail-scroll{
  max-width:100%;
}
.vf-table,
.an-table,
table{
  max-width:100%;
}
.vf-table-wrap,
.of-grid-wrap,
.an-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ========== Tablet ========== */
@media (max-width:1100px){
  .app{flex-direction:column;min-height:100vh}
  .sb{
    width:100%!important;min-width:0!important;height:auto!important;
    position:relative!important;max-height:none;
  }
  .sb-list{
    display:flex;flex-wrap:wrap;gap:4px;max-height:120px;overflow:auto;width:100%;
  }
  .main{width:100%!important;padding:12px!important;min-width:0}
  .pkg-workspace,
  .pkg-workspace.studio-workspace{
    grid-template-columns:1fr!important;height:auto!important;
  }
  .pkg-master{max-height:220px}
  .inv{max-width:100%}
  .inv-head{grid-template-columns:100px 1fr!important}
  .head-right{grid-column:1/-1}

  /* Flow Manager: stack side nav on top */
  #VF_APP.open{
    flex-direction:column!important;
  }
  #VF_APP .vf-side{
    width:100%!important;min-width:0!important;height:auto!important;
    max-height:38vh;overflow:auto;
  }
  #VF_APP .vf-main{min-width:0;flex:1;min-height:0}
  #VF_APP .vf-top{
    height:auto!important;min-height:56px;padding:10px 14px!important;
    flex-wrap:wrap;gap:8px;
  }
  #VF_APP .vf-top-actions{flex-wrap:wrap}
  #VF_APP .vf-content{padding:12px!important;overflow:auto}

  .vf-kpis,.an-grid-2,.an-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .vf-field-row,.vf-field-row.three{grid-template-columns:1fr 1fr!important}
}

/* ========== Phone / small ========== */
@media (max-width:720px){
  /* Login */
  #LG_SCR{
    grid-template-columns:1fr!important;
    padding:12px!important;
  }
  #LG_SCR .lg-cinematic{display:none!important}
  #LG_SCR .lg-box{
    width:min(420px,calc(100vw - 24px))!important;
    margin:auto!important;
    padding:28px 22px!important;
  }

  .topbar{flex-direction:column;align-items:stretch;gap:8px}
  .tacts{flex-wrap:wrap}
  .tacts .btn,.vf-top-actions .vf-btn{flex:1 1 auto;min-width:120px}

  .pkg-general-grid,
  .pkg-layer-grid,
  .pkg-extras-grid,
  .pkg-code-grid,
  .pkg-bottom-grid,
  .pkg-lam-glass-grid,
  .pkg-lam-options,
  .vf-advanced-filter,
  .vf-field-row,
  .vf-field-row.three,
  .vf-accept-live,
  .vf-kpis,
  .an-grid-2,
  .an-grid-3{
    grid-template-columns:1fr!important;
  }

  .an-ref-kpis,.kr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #VF_CONTENT[data-page] .vf-advanced-filter .vf-field.grow{grid-column:span 1!important}
  .footer-sign-grid{grid-template-columns:1fr}

  .btn,.vf-btn,.sbt{min-height:40px;padding:10px 14px;font-size:13px}
  #VF_NAV button{min-height:44px}

  /* Modals → near full-screen sheets */
  .vf-modal,
  #VF_MODAL.vf-modal{
    padding:0!important;
    align-items:stretch!important;
  }
  .vf-modal-box,
  .vf-modal-box.sm,
  .vf-modal-box.lg,
  .vf-modal-box.xl,
  #VF_MODAL .vf-modal-box{
    width:100vw!important;
    max-width:100vw!important;
    max-height:100dvh!important;
    height:100dvh!important;
    border-radius:0!important;
    margin:0!important;
  }
  .vf-modal-head{padding:12px 14px!important}
  .vf-modal-body{padding:12px 14px!important}
  .vf-modal-foot{
    padding:10px 14px!important;
    justify-content:stretch!important;
    border-top:1px solid #e2e8f0;
    background:#f8fafc;
  }
  .vf-modal-foot .vf-btn{
    flex:1 1 calc(50% - 6px);
    min-width:0;
    white-space:normal;
    text-align:center;
  }

  /* Design panel full width */
  .edit-panel,
  #EDITPANEL{
    width:100%!important;
    inset:0!important;
  }
  .edit-box.uie-box{
    width:100%!important;max-width:none!important;border-radius:0!important;
  }

  /* VF app top actions compact */
  #VF_APP .vf-top-actions .vf-btn:not(.primary){font-size:11px}
  #VF_APP .vf-side{max-height:32vh}
  #VF_NAV{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    padding:8px;
  }
  #VF_NAV .vf-nav-label{grid-column:1/-1;margin-top:6px}
  #VF_NAV button{
    justify-content:center;
    flex-direction:column;
    gap:2px;
    min-height:52px;
    padding:6px 4px;
    font-size:10px!important;
  }
  #VF_NAV button span:not(.vf-nav-ico){
    display:block!important;
    white-space:normal;
    line-height:1.15;
    text-align:center;
  }
}

@media (max-width:480px){
  .an-ref-kpis,.kr-kpis{grid-template-columns:1fr!important}
  .sb-logo .vn{font-size:14px}
  .co-name-static{font-size:22px!important}
  #VF_NAV{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vf-modal-foot .vf-btn{flex:1 1 100%}
  #VF_SYNC_STATUS{left:8px;bottom:8px;font-size:10px}
}

/* Prevent horizontal page scroll from wide content */
html,body{overflow-x:hidden}
.app,.main,#VF_APP,.vf-main,#VF_CONTENT{max-width:100vw}

@media print{
  #VF_SYNC_STATUS,.studio-sidebar-toggle{display:none!important}
  .btn,.vf-btn,.sbt{box-shadow:none!important;transform:none!important}
}

/* ========== Softer login (less “AI cinema”, clearer form) ========== */
#LG_SCR{
  background:
    radial-gradient(ellipse 70% 50% at 18% 20%,rgba(20,120,112,.22),transparent 55%),
    radial-gradient(ellipse 55% 45% at 88% 78%,rgba(30,70,90,.18),transparent 50%),
    linear-gradient(160deg,#0c1820 0%,#10242a 48%,#0a141a 100%)!important;
  color:#fff;
}
#LG_SCR:before,
#LG_SCR:after{
  animation:none!important;
  opacity:.35!important;
  filter:none!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%,rgba(0,0,0,.12))!important;
  background-image:none!important;
  mask-image:none!important;
}
#LG_SCR .lg-cinematic{
  opacity:.92;
}
#LG_SCR .lg-cinematic:before,
#LG_SCR .lg-cinematic:after,
#LG_SCR .lg-monument-logo:before,
#LG_SCR .lg-monument-logo:after,
#LG_SCR .lg-box:before,
#LG_SCR .lg-box:after,
#LG_SCR .lg-logo-shine,
#LG_SCR .lg-brand-aura,
#LG_SCR .lg-brand-ring{
  animation:none!important;
  opacity:.25!important;
}
#LG_SCR .lg-monument-copy small{
  letter-spacing:.12em;
  opacity:.65;
  font-size:10px!important;
}
#LG_SCR .lg-monument-copy h1{
  font-weight:650!important;
  letter-spacing:-.02em;
}
#LG_SCR .lg-monument-copy p,
#LG_SCR .lg-cinema-foot{
  opacity:.78;
}

#LG_SCR .lg-box{
  width:min(400px,calc(100vw - 32px))!important;
  padding:32px 30px 28px!important;
  margin:20px!important;
  border-radius:18px!important;
  border:1px solid rgba(255,255,255,.55)!important;
  background:#f7fbfb!important;
  backdrop-filter:none!important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.9) inset!important;
  overflow:visible!important;
  color:var(--vf-ink);
}
#LG_SCR .lg-box:before,
#LG_SCR .lg-box:after{display:none!important}

#LG_SCR .lg-login-brand h2{
  color:#0f3d3a!important;
  font-size:18px!important;
  font-weight:700!important;
  letter-spacing:0!important;
}
#LG_SCR .lg-login-brand p{
  color:var(--vf-muted)!important;
  font-size:12px!important;
}
#LG_SCR .lg-login-title{
  margin:18px 0 6px!important;
  font-size:20px!important;
  font-weight:650!important;
  color:#143532!important;
  letter-spacing:0!important;
}
#LG_SCR .lg-login-sub{
  margin:0 0 18px!important;
  font-size:13px!important;
  color:var(--vf-muted)!important;
  line-height:1.45!important;
}

#LG_SCR .lg-field{margin-bottom:14px!important}
#LG_SCR .lg-field label{
  display:block;
  font-size:11px!important;
  font-weight:650!important;
  color:#3d5a56!important;
  letter-spacing:.04em!important;
  margin-bottom:6px!important;
  text-transform:none!important;
}

.lg-user-combo{
  display:grid;
  gap:8px;
}
.lg-user-combo input,
.lg-user-combo select,
#LG_SCR .lg-field select,
#LG_SCR .lg-field input{
  width:100%;
  min-height:44px!important;
  border:1px solid #c5d4d6!important;
  border-radius:10px!important;
  background:#fff!important;
  padding:0 12px!important;
  font-size:14px!important;
  color:var(--vf-ink)!important;
  box-shadow:0 1px 2px rgba(15,40,45,.04)!important;
  transition:border-color .15s,box-shadow .15s;
}
.lg-user-combo input:focus,
.lg-user-combo select:focus,
#LG_SCR .lg-field select:focus,
#LG_SCR .lg-field input:focus{
  outline:none;
  border-color:var(--vf-teal)!important;
  box-shadow:0 0 0 3px rgba(15,118,110,.14)!important;
}

#LG_SCR .lg-btn{
  position:relative;
  width:100%;
  min-height:48px!important;
  margin-top:8px!important;
  border:1px solid var(--vf-teal-deep)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,var(--vf-teal-soft),var(--vf-teal))!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:.02em!important;
  box-shadow:0 4px 14px rgba(15,118,110,.25)!important;
  cursor:pointer;
  overflow:hidden;
}
#LG_SCR .lg-btn:after{display:none!important}
#LG_SCR .lg-btn:hover{
  background:linear-gradient(180deg,#17a196,var(--vf-teal-deep))!important;
  transform:translateY(-1px);
}
#LG_SCR .lg-btn:active{transform:none}
#LG_SCR .lg-btn:disabled{opacity:.65;cursor:wait;transform:none}

#LG_SCR .lg-err{
  margin-top:10px;
  font-size:12px;
  color:#b91c1c;
  min-height:1.2em;
}
#LG_SCR .lg-hint{
  margin-top:10px;
  font-size:11px;
  color:#64748b;
  line-height:1.5;
  text-align:left;
  padding:8px 10px;
  border-radius:8px;
  background:#eef5f5;
  border:1px solid #d7e4e4;
}
#LG_SCR .lg-hint code{
  font-size:11px;
  padding:1px 5px;
  border-radius:4px;
  background:#fff;
  border:1px solid #d0ddde;
}
#LG_SCR .lg-security{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  color:#6b8588;
}

/* Soften VF panel chrome (same teal family, less glow) */
#VF_APP{
  --vf-accent:var(--vf-teal);
  background:linear-gradient(160deg,#f3f7f7,#f8fafa 50%,#eef4f4)!important;
}
#VF_APP .vf-btn.primary,
#VF_APP .vf-btn.green{
  background:linear-gradient(180deg,var(--vf-teal-soft),var(--vf-teal))!important;
  border-color:var(--vf-teal-deep)!important;
  box-shadow:0 2px 8px rgba(15,118,110,.18)!important;
}
#VF_APP .vf-card,
#VF_APP .an-card,
#VF_APP .vf-kpi,
#VF_APP .vf-table-wrap{
  border-color:#d2dedf!important;
  box-shadow:0 4px 14px rgba(12,45,50,.04)!important;
}

/* Clear button chrome across studio */
.edit-btn,
.btn-refresh,
.topbar .btn,
.tacts .btn{
  border-radius:var(--vf-btn-radius)!important;
  min-height:var(--vf-btn-h);
}
.topbar .btn.pr,
.tacts .btn.pr{
  background:linear-gradient(180deg,var(--vf-teal-soft),var(--vf-teal))!important;
  border-color:var(--vf-teal-deep)!important;
  color:#fff!important;
}