/* ============================================================
   WarehouseIQ — Right Workspace
   Sol navigasyon + sağ çalışma alanı
   ============================================================ */

html,
body{
  min-height:100%;
}

.shell{
  min-height:100vh !important;
}

/* SOL MENÜ */
.side{
  position:fixed !important;
  inset:0 auto 0 0 !important;
  width:272px !important;
  min-width:272px !important;
  height:100vh !important;
  z-index:100 !important;
}

/* SAĞ ÇALIŞMA ALANI */
main{
  margin-left:272px !important;
  width:calc(100vw - 272px) !important;
  max-width:none !important;
  min-height:100vh !important;
  padding:28px 34px 60px !important;
}

/* Genel Bakış — normal dashboard */
body[data-wq-screen="genel"] main{
  background:
    radial-gradient(circle at 85% 0,rgba(49,87,213,.08),transparent 32rem),
    #f4f7fb !important;
}

/* Modül ekranlarında dashboard üst bilgisini kaldır */
body[data-wq-screen]:not([data-wq-screen="genel"]) main .top,
body[data-wq-screen]:not([data-wq-screen="genel"]) main .note,
body[data-wq-screen]:not([data-wq-screen="genel"]) main .kpis,
body[data-wq-screen]:not([data-wq-screen="genel"]) main #genel{
  display:none !important;
}

/* Modül çalışma alanı */
body[data-wq-screen]:not([data-wq-screen="genel"]) main{
  background:
    linear-gradient(180deg,#f7f9fc 0%,#f1f4f8 100%) !important;
}

body[data-wq-screen]:not([data-wq-screen="genel"]) .grid{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
}

.wq-workspace-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  width:100%;
  margin:0 0 18px;
  padding:0;
}

.wq-workspace-kicker{
  margin:0 0 5px;
  color:#6b7890;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.wq-workspace-title{
  margin:0;
  color:#111827;
  font-size:30px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.7px;
}

.wq-workspace-description{
  margin:7px 0 0;
  color:#667085;
  font-size:13px;
}

.wq-workspace-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:32px;
  padding:6px 11px;
  border:1px solid #dce3ed;
  border-radius:999px;
  background:#fff;
  color:#667085;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.wq-workspace-status::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#36a37b;
  box-shadow:0 0 0 4px rgba(54,163,123,.10);
}

/* Seçilen modül gerçek çalışma paneli */
body[data-wq-screen]:not([data-wq-screen="genel"]) .wq-shell-active{
  display:block !important;
  width:100% !important;
  min-height:calc(100vh - 128px) !important;
  margin:0 !important;
  padding:26px !important;
  background:#fff !important;
  border:1px solid #e4e9f1 !important;
  border-radius:20px !important;
  box-shadow:
    0 14px 40px rgba(16,24,40,.07),
    0 2px 8px rgba(16,24,40,.03) !important;
  grid-column:auto !important;
}

/* İç başlıkların gereksiz çift çerçevesini azalt */
body[data-wq-screen]:not([data-wq-screen="genel"])
.wq-shell-active > header{
  margin-bottom:22px !important;
}

/* Form alanları */
body[data-wq-screen]:not([data-wq-screen="genel"])
.wq-shell-active input,
body[data-wq-screen]:not([data-wq-screen="genel"])
.wq-shell-active select,
body[data-wq-screen]:not([data-wq-screen="genel"])
.wq-shell-active textarea{
  min-height:46px !important;
}

/* Mobil */
@media(max-width:760px){
  .side{
    position:fixed !important;
    width:272px !important;
    min-width:272px !important;
  }

  main{
    margin-left:0 !important;
    width:100% !important;
    padding:18px 14px 90px !important;
  }

  .wq-workspace-header{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }

  .wq-workspace-title{
    font-size:26px;
  }

  body[data-wq-screen]:not([data-wq-screen="genel"])
  .wq-shell-active{
    min-height:0 !important;
    padding:18px !important;
    border-radius:15px !important;
  }
}

/* Sidebar menu: full-height scrollable navigation */
.side{
  overflow:hidden !important;
}

.side #warehouse-nav{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding:10px 12px 18px !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}

.side #warehouse-nav::-webkit-scrollbar{
  width:6px;
}

.side #warehouse-nav::-webkit-scrollbar-track{
  background:transparent;
}

.side #warehouse-nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
}

.side #warehouse-nav::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.30);
}

.side .ready{
  flex:0 0 auto !important;
  margin-top:10px !important;
}

@media(max-width:760px){
  .side #warehouse-nav{
    overflow-y:auto !important;
    padding-bottom:90px !important;
  }
}


/* WQ_POLISH_v1 */

/* WQ_POLISH_v1 */

/* ------------------------------------------------------------
   Enterprise Sidebar
   ------------------------------------------------------------ */

.side{
  background:
    radial-gradient(
      circle at 20% -10%,
      rgba(22,182,164,.12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #101a2c 0%,
      #0c1526 100%
    ) !important;

  border-right:1px solid rgba(255,255,255,.07) !important;

  box-shadow:
    12px 0 35px rgba(15,23,42,.10) !important;
}

.brand{
  min-height:82px !important;
  height:auto !important;
  padding:18px 18px 16px !important;
  border-bottom:1px solid rgba(255,255,255,.07) !important;
}

.brand>b{
  width:44px !important;
  height:44px !important;

  border:1px solid rgba(24,182,164,.28) !important;

  background:
    rgba(24,182,164,.10) !important;

  color:#4de0cf !important;

  box-shadow:
    0 8px 20px rgba(24,182,164,.10) !important;
}

.brand strong{
  color:#f8fafc !important;
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:-.2px !important;
}

.brand small{
  color:#8e9bb0 !important;
  font-size:10px !important;
}


/* ------------------------------------------------------------
   Sidebar Status + Logout
   ------------------------------------------------------------ */

.side .ready{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:11px !important;

  margin:12px !important;
  padding:13px !important;

  border:1px solid rgba(255,255,255,.08) !important;

  border-radius:14px !important;

  background:
    rgba(255,255,255,.035) !important;
}

.side .ready > div{
  min-width:0;
}

.side .ready strong{
  color:#eef4fb !important;
  font-size:12px !important;
  font-weight:750 !important;
}

.side .ready small{
  color:#91a0b4 !important;
  font-size:10px !important;
}

#wq-logout{
  width:100% !important;
  min-height:38px !important;

  border:1px solid rgba(255,255,255,.10) !important;

  border-radius:10px !important;

  background:
    rgba(255,255,255,.045) !important;

  color:#d9e2ee !important;

  font-size:12px !important;
  font-weight:750 !important;

  box-shadow:none !important;
}

#wq-logout:hover{
  border-color:rgba(24,182,164,.38) !important;

  background:
    rgba(24,182,164,.10) !important;

  color:#ffffff !important;
}

#wq-logout:disabled{
  opacity:.65 !important;
  cursor:wait !important;
}


/* ------------------------------------------------------------
   Main Canvas
   ------------------------------------------------------------ */

main{
  background:#f3f6fa !important;
}

body[data-wq-screen="genel"] main{
  background:
    radial-gradient(
      circle at 88% -8%,
      rgba(24,182,164,.10),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #f8fafc 0%,
      #f1f5f9 100%
    ) !important;
}


/* ------------------------------------------------------------
   General Dashboard Header
   ------------------------------------------------------------ */

.top{
  padding:24px 26px !important;
  margin-bottom:18px !important;

  border:1px solid #e3e8ef !important;

  border-radius:20px !important;

  background:
    rgba(255,255,255,.96) !important;

  box-shadow:
    0 10px 28px rgba(15,23,42,.055) !important;
}

.top em,
.heading em{
  color:#109c8c !important;
}

.top h1{
  color:#111827 !important;

  font-size:34px !important;

  font-weight:820 !important;

  letter-spacing:-.8px !important;
}

.top p{
  color:#667085 !important;
  font-size:13px !important;
}

.top-actions select{
  min-height:42px !important;

  border:1px solid #d9e0e8 !important;

  border-radius:11px !important;

  background:#fff !important;

  color:#344054 !important;

  font-size:12px !important;
}


/* ------------------------------------------------------------
   Info / Connection Notice
   ------------------------------------------------------------ */

.note{
  padding:14px 16px !important;
  margin-bottom:18px !important;

  border:1px solid #dfe6ee !important;

  border-radius:14px !important;

  background:#ffffff !important;

  box-shadow:
    0 6px 18px rgba(15,23,42,.035) !important;
}

.note strong{
  color:#344054 !important;
}

.note,
.note *{
  font-size:12px !important;
}


/* ------------------------------------------------------------
   KPI Cards
   ------------------------------------------------------------ */

.kpis{
  gap:14px !important;
  margin-bottom:20px !important;
}

.kpi{
  min-height:116px !important;

  padding:18px 18px 16px !important;

  border:1px solid #e3e8ef !important;

  border-radius:16px !important;

  background:#fff !important;

  box-shadow:
    0 7px 20px rgba(15,23,42,.045) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease !important;
}

.kpi:hover{
  transform:translateY(-2px) !important;

  box-shadow:
    0 14px 28px rgba(15,23,42,.08) !important;
}

.kpi .label,
.kpi small{
  color:#7a8799 !important;

  font-size:11px !important;

  font-weight:700 !important;
}

.kpi .value,
.kpi strong{
  color:#111827 !important;

  font-size:28px !important;

  font-weight:820 !important;
}


/* ------------------------------------------------------------
   Workspace
   ------------------------------------------------------------ */

.wq-shell-active{
  background:#fff !important;

  border:1px solid #e2e8f0 !important;

  box-shadow:
    0 18px 45px rgba(15,23,42,.07),
    0 2px 8px rgba(15,23,42,.035) !important;
}

.wq-shell-active h2{
  color:#172033 !important;
  font-weight:800 !important;
}

.wq-shell-active h3{
  color:#344054 !important;
  font-weight:750 !important;
}

.wq-shell-active label{
  color:#475467 !important;
}


/* ------------------------------------------------------------
   Inputs
   ------------------------------------------------------------ */

.wq-shell-active input,
.wq-shell-active select,
.wq-shell-active textarea{
  min-height:46px !important;

  border:1px solid #d8dee8 !important;

  border-radius:11px !important;

  background:#fff !important;

  color:#172033 !important;

  box-shadow:none !important;
}

.wq-shell-active input:focus,
.wq-shell-active select:focus,
.wq-shell-active textarea:focus{
  border-color:#18a997 !important;

  box-shadow:
    0 0 0 3px rgba(24,169,151,.11) !important;
}


/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.wq-shell-active button{
  min-height:42px !important;

  border-radius:10px !important;

  font-weight:750 !important;
}

.wq-shell-active button[type="submit"],
.wq-shell-active .primary,
.wq-shell-active .btn-primary,
.wq-shell-active [data-primary="true"]{
  border-color:transparent !important;

  background:
    linear-gradient(
      135deg,
      #18b6a4,
      #109589
    ) !important;

  color:#fff !important;

  box-shadow:
    0 7px 18px rgba(24,182,164,.20) !important;
}


/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */

.wq-shell-active table{
  border:1px solid #e5eaf0 !important;

  border-radius:12px !important;

  overflow:hidden !important;
}

.wq-shell-active thead th{
  background:#f7f9fc !important;

  color:#667085 !important;

  border-bottom:1px solid #e4e8ee !important;

  font-size:10px !important;

  font-weight:800 !important;

  letter-spacing:.05em !important;
}

.wq-shell-active tbody td{
  border-bottom:1px solid #eef1f5 !important;

  color:#344054 !important;
}


/* ------------------------------------------------------------
   Generic panels
   ------------------------------------------------------------ */

.panel,
.card{
  border-color:#e2e8f0 !important;

  box-shadow:
    0 8px 22px rgba(15,23,42,.045) !important;
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media(max-width:760px){

  .top{
    padding:19px !important;

    border-radius:16px !important;
  }

  .top h1{
    font-size:29px !important;
  }

  .kpis{
    gap:10px !important;
  }

  .kpi{
    min-height:108px !important;

    padding:15px !important;
  }
}



/* WQ_LOGOUT_FLOATING_V2 */

#wq-logout-floating{
  position:fixed !important;
  z-index:10000 !important;
  left:18px !important;
  bottom:18px !important;

  width:236px !important;
  min-height:40px !important;

  padding:9px 14px !important;

  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.045)
    ) !important;

  color:#dce5f0 !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  font-size:12px !important;
  font-weight:750 !important;

  box-shadow:
    0 10px 25px rgba(0,0,0,.16) !important;

  cursor:pointer !important;

  transition:
    background .15s ease,
    border-color .15s ease,
    transform .15s ease !important;
}

#wq-logout-floating:hover{
  background:
    linear-gradient(
      180deg,
      rgba(24,182,164,.18),
      rgba(24,182,164,.10)
    ) !important;

  border-color:
    rgba(24,182,164,.42) !important;

  color:#ffffff !important;

  transform:translateY(-1px) !important;
}

#wq-logout-floating:disabled{
  opacity:.60 !important;
  cursor:wait !important;
  transform:none !important;
}

@media(max-width:760px){
  #wq-logout-floating{
    left:14px !important;
    bottom:82px !important;
    width:calc(100vw - 28px) !important;
  }
}