/* START */
 /* ===== Typography ===== */
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

    @font-face{
      font-family: "Twemoji Country Flags";
      src: url(/admin/static/media/TwemojiCountryFlags.e40fbca.woff2) format("woff2");
      unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
      font-display: swap;
    }

    :root{
  --side-bg: #0b0f17;
  --side-bg2: #070a10;
  --side-line: rgba(255,255,255,.08);
  --side-text: #e9eefc;
  --side-muted: rgba(233,238,252,.62);
  --sideW: 280px;
  --page-bg: #f4f6fb;
  --card: #ffffff;
  --line: #edf0f6;
  --text: #0f172a;
  --muted: #64748b;
  --mainPad: 24px;
  --primary: rgb(111, 85, 255);
  --primary2: rgb(95, 70, 230);
  --primarySoft: rgba(111,85,255,.12);
  --ok: #16a34a;
  --bad: #ef4444;
  --shadow: 0 1px 3px rgba(15,23,42,.06);
  --shadow2: 0 1px 2px rgba(15,23,42,.04);
  --r: 10px;
  --r2: 8px;
  --focus: 0 0 0 4px rgba(111,85,255,.18);
  --pdBar1: #0b2a5b;
  --pdBar2: #114a9b;
  --pdBar3: #1677ff;
  --pdBarText: rgba(255,255,255,.92);
  --pdBarTextSoft: rgba(255,255,255,.72);
  --pdBarLine: rgba(255,255,255,.14);
  --pdBarShadow: none;
}


    
    html,body{
  height: 100%;
}

    

    a{
  color: inherit;
}

    button,input,select,textarea{
  font-family: inherit;
}

/* ===================================================================
   ERONTA — Global Select Reset
   Tüm select elementleri panelin input tasarımıyla uyumlu hale getirir.
   =================================================================== */
select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  min-height:44px;
  padding:10px 40px 10px 14px;
  border:1px solid var(--line, #edf0f6);
  border-radius:var(--r2, 12px);
  background-color:var(--card, #fff);
  color:var(--text, #0f172a);
  font-size:13px;
  font-weight:400;
  line-height:1.4;
  cursor:pointer;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1.5 1.5L6 6.5l4.5-5' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px 8px;
  box-sizing:border-box;
}
select:hover{
  border-color:rgba(109,61,228,.30);
}
select:focus{
  border-color:rgba(109,61,228,.50);
  box-shadow:var(--focus, 0 0 0 4px rgba(109,61,228,.18));
}
select:disabled{
  opacity:.55;
  cursor:not-allowed;
  background-color:rgba(15,23,42,.03);
}
select:invalid,
select.is-error{
  border-color:var(--bad, #ef4444);
}
select:invalid:focus,
select.is-error:focus{
  box-shadow:0 0 0 4px rgba(239,68,68,.12);
}


    button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: 12px;
}


    /* Scrollbar */
    *::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

    *::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.18);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.8);
}

    *::-webkit-scrollbar-track{
  background: transparent;
}


    .app{
  display: flex;
  min-height: 100vh;
}


    /* ============ SIDEBAR ============ */
    

    .brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 14px;
  font-weight: 600;
  letter-spacing: .7px;
  user-select: none;
}

    .brandMark{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(109,61,228,.18);
  border: 1px solid rgba(109,61,228,.30);
  display: grid;
  place-items: center;
}

    .brandMark svg{
  width: 18px;
  height: 18px;
}

    .brand span{
  opacity: .98;
}

    .brand-logo{
  height: 55px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
    .brand-logo-wrap{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
}
    .brand-line{
  position: relative;
  height: 2px;
  width: 100%;
  border-radius: 1px;
  overflow: hidden;
  margin-top: -8px;
}
    .brand-line-glow{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 38%;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, #cbf200 40%, #e0ff66 60%, #cbf200 80%, transparent);
  animation: brandGlow 3s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  box-shadow: 0 0 6px rgba(203,242,0,.5);
}
@keyframes brandGlow{
  0%   { left: -38%; animation-timing-function: cubic-bezier(.7,.0,.3,1); }
  30%  { left: 20%; animation-timing-function: cubic-bezier(.2,.0,.8,1); }
  55%  { left: 55%; animation-timing-function: cubic-bezier(.9,.0,.1,1); }
  75%  { left: 40%; animation-timing-function: cubic-bezier(.4,.0,.6,1); }
  100% { left: 100%; }
}
    .brand-mini{
  display: none;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}


    .s-search{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 10px;
  margin: 0 8px 12px;
  transition: padding .25s, margin .25s, background .25s, border-color .25s;
}

    .s-search .sico{
  width: 16px;
  height: 16px;
  opacity: .85;
  flex: 0 0 16px;
}

    .s-search input{
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--side-text);
  font-size: 13px;
}

    .s-search input::placeholder{
  color: rgba(233,238,252,.50);
}

/* ── Sidebar Search Dropdown ── */
.s-search{ position: relative; }

.sr-dropdown{
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #1e2030;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  max-height: 340px;
  overflow-y: auto;
  z-index: 900;
  padding: 6px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.sr-dropdown::-webkit-scrollbar{ width:5px }
.sr-dropdown::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:10px }

.sr-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--side-text, rgba(233,238,252,.85));
  transition: background .15s;
}
.sr-item:hover,
.sr-item.sr-hl{
  background: rgba(255,255,255,.08);
}

.sr-ico{
  width: 18px; height: 18px;
  flex: 0 0 18px;
  opacity: .7;
  display: flex; align-items: center; justify-content: center;
}
.sr-ico svg{ width:100%; height:100% }

.sr-logo{
  width: 20px; height: 20px;
  flex: 0 0 20px;
  border-radius: 4px;
  object-fit: contain;
}

.sr-text{
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sr-group{
  font-size: 10px;
  color: rgba(233,238,252,.40);
  line-height: 1.2;
}
.sr-label{
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sr-label mark{
  background: rgba(203,242,0,.25);
  color: #cbf200;
  border-radius: 2px;
  padding: 0 1px;
}

.sr-empty{
  padding: 14px 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(233,238,252,.40);
}

    .kbd{
  font-size: 11px;
  color: rgba(233,238,252,.75);
  border: 1px solid rgba(233,238,252,.22);
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
}


    .nav{
  padding: 6px 6px 10px;
}

    .nav .group{
  margin: 6px 0;
}

    .nav a,.nav button{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0;
  background: transparent;
  color: var(--side-text);
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  transition: background .12s ease, transform .08s ease, border-color .12s ease;
}

    .nav a:hover,.nav button:hover{
  background: rgba(255,255,255,.06);
}

    .nav a:active,.nav button:active{
  transform: translateY(1px);
}

    .nav .left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

    

    .ico{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
  opacity: .92;
}

    .ico svg{
  width: 18px;
  height: 18px;
}


    .caret{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: .7;
  transition: transform .18s ease;
}

    .acc.open .caret{
  transform: rotate(180deg);
}


    
    .sub a{
  padding: 9px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  color: rgba(233,238,252,.92);
}


   
      /* Seçili menü (soldaki link) */


/* Seçili menüdeki ikonlar da siyah */
.nav .navlink.active .ico,
.nav .navlink.active .ico svg{
  color: #000 !important;
  opacity: 1 !important;
}


/* (Opsiyonel) sadece label değil, içerideki tüm yazı siyah */
.nav .navlink.active .label{
  color: #000 !important;
}

/* ── Sidebar Duyurular (Announcements) ── */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes ann-border-rotate {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

.side-alerts{
  padding: 10px 10px 6px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.sa-header{
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}
.sa-header-title{
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.sa-badge{
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 50px;
  font-weight: 600;
  line-height: 1.3;
  margin-left: auto;
}

/* ── Announcement card with animated conic-gradient border ── */
.sa-ann-card{
  position: relative;
  border-radius: 10px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: transform .3s ease, opacity .3s ease, max-height .3s ease .3s,
              margin-bottom .3s ease .3s;
}
.sa-ann-border-glow{
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: inherit;
  background: conic-gradient(from var(--angle) at 50% 50%, rgba(181,170,170,.2) 0deg, #aaaab5 360deg);
  z-index: 0;
  animation: ann-border-rotate 3s linear infinite;
  padding: 1.5px;
}
.sa-ann-info .sa-ann-border-glow{
  background: conic-gradient(from var(--angle) at 50% 50%, rgba(96,165,250,.15) 0deg, #60a5fa 120deg, rgba(96,165,250,.15) 240deg, #60a5fa 360deg);
}
.sa-ann-warning .sa-ann-border-glow{
  background: conic-gradient(from var(--angle) at 50% 50%, rgba(234,252,136,.15) 0deg, #eafc88 120deg, rgba(234,252,136,.15) 240deg, #eafc88 360deg);
}
.sa-ann-success .sa-ann-border-glow{
  background: conic-gradient(from var(--angle) at 50% 50%, rgba(34,197,94,.15) 0deg, #22c55e 120deg, rgba(34,197,94,.15) 240deg, #22c55e 360deg);
}
.sa-ann-error .sa-ann-border-glow{
  background: conic-gradient(from var(--angle) at 50% 50%, rgba(239,68,68,.15) 0deg, #ef4444 120deg, rgba(239,68,68,.15) 240deg, #ef4444 360deg);
}
.sa-ann-inner{
  position: relative;
  z-index: 1;
  background: #0c111b;
  border-radius: 9px;
  margin: 1.5px;
  overflow: hidden;
}
.sa-ann-x{
  position: absolute;
  top: 4px; left: 4px;
  z-index: 2;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.sa-ann-x:hover{
  color: #fff;
  background: rgba(239,68,68,.6);
}
/* ── Image announcement ── */
.sa-ann-img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 140px;
  object-fit: cover;
  border-radius: 0;
}
/* ── Text announcement ── */
.sa-ann-text{
  padding: 10px 12px 10px 30px;
}
.sa-ann-title{
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  margin-bottom: 3px;
  line-height: 1.3;
}
.sa-ann-msg{
  font-size: 9px;
  color: rgba(255,255,255,.5);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Old card base (kept for compatibility) ── */
.sa-card{
  padding: 6px 8px 5px;
  border-radius: 8px;
  margin-bottom: 5px;
  cursor: default;
  position: relative;
  overflow: hidden;
  max-height: 60px;
  transition: transform .3s ease, opacity .3s ease, max-height .25s ease .25s,
              margin-bottom .25s ease .25s, padding .25s ease .25s;
}

/* ── Severity colors ── */
.sa-critical{
  background: transparent;
  border: 1px solid rgb(219,48,59);
}
.sa-warning{
  background: transparent;
  border: 1px solid #eafc88;
}
.sa-opportunity{
  background: transparent;
  border: 1px solid #529ac3;
}
.sa-info{
  background: transparent;
  border: 1px solid rgba(59,130,246,.4);
}

/* ── Card inner elements ── */
.sa-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 0;
}
.sa-sev{
  font-size: 8px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,.55);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sa-dot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  flex-shrink: 0;
}
.sa-x{
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0 1px;
  flex-shrink: 0;
  transition: color .15s;
}
.sa-x:hover{ color: rgba(255,255,255,.8); }
.sa-title{ display: none; }
.sa-msg{ display: none; }
.sa-foot{
  margin-top: 3px;
}
.sa-action{
  font-size: 8px;
  font-weight: 500;
  color: #60a5fa;
  text-decoration: none;
  transition: color .15s;
}
.sa-action:hover{ color: #93c5fd; }

/* ── AI Action Buttons (Faz 3H) ── */
.ai-actions{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.ai-action-btn{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 500;
  color: #60a5fa;
  background: rgba(96,165,250,.08);
  border: 1px solid rgba(96,165,250,.22);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  line-height: 1.4;
}
.ai-action-btn:hover{
  background: rgba(96,165,250,.18);
  color: #93c5fd;
  border-color: rgba(96,165,250,.38);
}
/* Inside sidebar cards, keep buttons compact */
.sa-foot .ai-actions{ margin-top: 0; }
.sa-foot .ai-action-btn{ font-size: 8px; padding: 2px 7px; border: none; background: transparent; color: #60a5fa; }
.sa-foot .ai-action-btn:hover{ background: transparent; color: #93c5fd; }
/* AI chat message content wrapper */
.ai-msg-content{ display: flex; flex-direction: column; min-width: 0; max-width: 100%; }

/* ── AI Feature Gate Message (Faz 3J) ── */
.ai-gate-msg{
  display: flex; align-items: center; gap: 14px;
  padding: 24px 20px;
  background: rgba(109,61,228,.06);
  border: 1px solid rgba(109,61,228,.14);
  border-radius: 12px;
  margin: 20px auto;
  max-width: 420px;
  color: #b8b8d0;
  font-size: 13px; line-height: 1.5;
}
.ai-gate-icon{
  flex-shrink: 0; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(109,61,228,.12); border-radius: 10px;
  font-size: 18px; color: #a78bfa;
}
.ai-gate-text strong{ color: #e0e0f0; display: block; margin-bottom: 2px; }
.ai-gate-text small{ color: #888; }

/* ── Dismiss animations ── */
.sa-dismissing{
  transform: translateX(-110%);
  opacity: 0;
}
.sa-collapsing{
  max-height: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Collapsed sidebar: hide alerts */
.side.collapsed .side-alerts{ display: none !important; }

/* ══════════════════════════════════════════════
   AI Digest Cards — Faz 3K
   ══════════════════════════════════════════════ */
.digestRow{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}
.digestCard{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 14px 10px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.digestCard:hover{
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.digestCard.dg-unread{
  border-color: rgba(59,130,246,.5);
}
.dgHead{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.dgDot{
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dgLabel{
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .5px; color: rgba(255,255,255,.5);
}
.dgDate{
  margin-left: auto; font-size: 10px; color: rgba(255,255,255,.35);
}
.dgTitle{
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.88);
  margin-bottom: 4px; line-height: 1.3;
}
.dgSummary{
  font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.dgActions{
  display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap;
}
.dgAction{
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: 3px 10px; font-size: 10px; font-weight: 500;
  color: rgba(255,255,255,.7); cursor: pointer; transition: background .15s;
}
.dgAction:hover{
  background: rgba(255,255,255,.14);
}

/* ── Digest Drawer ── */
.digestDrawer{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.digestDrawer.open{ pointer-events: auto; }
.dgDrawerBack{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .25s;
}
.digestDrawer.open .dgDrawerBack{ opacity: 1; }
.dgDrawerPanel{
  position: relative; width: 400px; max-width: 90vw;
  background: var(--bg, #151520);
  border-left: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s ease;
  overflow-y: auto;
}
.digestDrawer.open .dgDrawerPanel{ transform: translateX(0); }
.dgDrawerHead{
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.dgDrawerHead h3{
  flex: 1; font-size: 15px; font-weight: 500; color: #fff; margin: 0;
}
.dgDrawerClose{
  background: none; border: none; color: rgba(255,255,255,.5); font-size: 22px;
  cursor: pointer; line-height: 1;
}
.dgDrawerBody{
  padding: 20px;
}
.dgDrawerDate{
  font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 12px;
}
.dgDrawerText{
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.78);
  margin-bottom: 16px; white-space: pre-wrap;
}
.dgDrawerActions{
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.dgMetricsGrid{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px; margin-bottom: 16px;
}
.dgMetric{
  background: rgba(255,255,255,.04); border-radius: 8px; padding: 10px;
  text-align: center;
}
.dgMetricVal{
  display: block; font-size: 16px; font-weight: 600; color: #fff;
  margin-bottom: 2px;
}
.dgMetricLabel{
  font-size: 10px; color: rgba(255,255,255,.45); text-transform: uppercase;
  letter-spacing: .3px;
}

@media(max-width:600px){
  .digestRow{ grid-template-columns: 1fr; }
  .dgDrawerPanel{ width: 100vw; }
}

/* ══════════════════════════════════════════════
   AI Recommendations — Faz 3L
   ══════════════════════════════════════════════ */
.recRow{
  margin: 14px 0 0;
}
.recRowHead{
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.recRowTitle{
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.7);
  display: flex; align-items: center; gap: 5px;
}
.recRowBadge{
  background: rgba(139,92,246,.25); color: #c4b5fd;
  font-size: 10px; font-weight: 600; border-radius: 10px;
  padding: 1px 8px;
}
.recCards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.recCard{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 12px 14px 10px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.recCard:hover{
  border-color: rgba(139,92,246,.4);
  transform: translateY(-1px);
}
.recCard.rec-unread{
  border-color: rgba(139,92,246,.5);
}
.recHead{
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.recTypeBadge{
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .4px; color: #fff; border-radius: 4px;
  padding: 2px 7px; white-space: nowrap;
}
.recScore{
  margin-left: auto; font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.35);
}
.recTitle{
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.88);
  margin-bottom: 4px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.recMsg{
  font-size: 11px; line-height: 1.45; color: rgba(255,255,255,.5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 6px;
}
.recActions{
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px;
}
.recAction{
  background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.25);
  border-radius: 6px; padding: 3px 10px; font-size: 10px; font-weight: 500;
  color: #c4b5fd; cursor: pointer; transition: background .15s;
}
.recAction:hover{
  background: rgba(139,92,246,.25);
}
.recFoot{
  display: flex; align-items: center; justify-content: space-between;
}
.recDate{
  font-size: 10px; color: rgba(255,255,255,.3);
}
.recDismiss{
  background: none; border: none; color: rgba(255,255,255,.25);
  font-size: 16px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.recDismiss:hover{ color: rgba(255,255,255,.6); }

/* ── Recommendation Drawer ── */
.recDrawer{
  position: fixed; inset: 0; z-index: 9999;
  display: flex; justify-content: flex-end;
  pointer-events: none;
}
.recDrawer.open{ pointer-events: auto; }
.recDrawerBack{
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .25s;
}
.recDrawer.open .recDrawerBack{ opacity: 1; }
.recDrawerPanel{
  position: relative; width: 420px; max-width: 90vw;
  background: var(--bg, #151520);
  border-left: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s ease;
  overflow-y: auto;
}
.recDrawer.open .recDrawerPanel{ transform: translateX(0); }
.recDrawerHead{
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.recDrawerHead h3{
  flex: 1; font-size: 15px; font-weight: 500; color: #fff; margin: 0;
}
.recDrawerClose{
  background: none; border: none; color: rgba(255,255,255,.5); font-size: 22px;
  cursor: pointer; line-height: 1;
}
.recDrawerBody{ padding: 20px; }
.recDrawerDate{
  font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 12px;
}
.recDrawerMsg{
  font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.78);
  margin-bottom: 16px; white-space: pre-wrap;
}
.recDrawerActions{
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.recDrawerTable{
  margin: 12px 0;
}
.recDrawerTable table{
  width: 100%; border-collapse: collapse;
}
.recDrawerTable td{
  padding: 6px 8px; font-size: 12px; color: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.recTdKey{
  font-weight: 500; color: rgba(255,255,255,.45); white-space: nowrap; width: 110px;
}

@media(max-width:600px){
  .recCards{ grid-template-columns: 1fr; }
  .recDrawerPanel{ width: 100vw; }
}

    .profile{
  margin-top: auto;
  padding: 10px 10px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

    .p-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

    .avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.14);
  display: grid;
  place-items: center;
  font-weight: 600;
  letter-spacing: .2px;
}

    .p-txt{
  min-width: 0;
}

    
    
    .dots{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(233,238,252,.85);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .12s ease;
}

    .dots:hover{
  background: rgba(255,255,255,.10);
}


    /* ============ MAIN ============ */
    

    /* Top header like PDF */
    
    
    .h-left{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

    
    .chip .sico{
  width: 16px;
  height: 16px;
  opacity: .75;
}

    .chip.dd{
  cursor: pointer;
}

    .chip.dd:hover{
  border-color: rgba(109,61,228,.25);
}

    .h-right{
  display: flex;
  align-items: center;
  gap: 10px;
}

    .iconBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow2);
  transition: transform .08s ease, border-color .12s ease;
}

    .iconBtn:hover{
  border-color: rgba(109,61,228,.25);
}

    .iconBtn:active{
  transform: translateY(1px);
}

    .iconBtn svg{
  width: 18px;
  height: 18px;
  opacity: .8;
}

    
    .dotLive{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}


    

    
        
    
    .page.show{
  display: block;
}


    /* ===== Dashboard (PDF-like) ===== */
    
    .kpiItem{
  padding: 16px 16px 14px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

    .kpiItem:last-child{
  border-right: 0;
}

    
    
    .chg{
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.02);
  white-space: nowrap;
}

    .chg.ok{
  color: var(--ok);
  border-color: rgba(22,163,74,.18);
  background: rgba(22,163,74,.06);
}

    .chg.bad{
  color: var(--bad);
  border-color: rgba(239,68,68,.18);
  background: rgba(239,68,68,.06);
}


    .chartCard{
  margin-top: 14px;
  padding: 14px;
}

    .chartHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

    
    
    .btn:hover{
  background: rgba(109,61,228,.12);
  border-color: rgba(109,61,228,.28);
}

    .btn:active{
  transform: translateY(1px);
}

    .btn.ghost{
  border: 1px solid var(--line);
  background: #fff;
  color: #0f172a;
  font-weight: 500;
}

    .btn .sico{
  width: 16px;
  height: 16px;
  opacity: .85;
}


    canvas{
  width: 100%;
  height: 340px;
  display: block;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
}


    .channels{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr 220px;
  gap: 12px;
  align-items: stretch;
}

    .chCard{
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

    .brandMini{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.03);
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: .6px;
}

    .chMeta{
  min-width: 0;
}

    .chName{
  font-weight: 600;
}

    .chSub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

    .chRight{
  margin-left: auto;
  text-align: right;
}

    .chMoney{
  font-weight: 700;
}

    .chSmall{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}


    .grid2{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

    .list{
  padding: 14px;
}

    .listHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

    .listHead h3{
  margin: 0;
  font-size: 14px;
}

    .selectMini{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111827;
  font-weight: 500;
  font-size: 12.5px;
  cursor: pointer;
}

    .selectMini .sico{
  width: 14px;
  height: 14px;
  opacity: .65;
}

    
    .row:first-of-type{
  border-top: 0;
}

    .thumb{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.03);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #111827;
}

    .rmeta{
  min-width: 0;
}

    .rname{
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

    .rsub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

    .rright{
  margin-left: auto;
  text-align: right;
}

    .amt{
  font-weight: 700;
}

    .delta{
  margin-top: 4px;
  font-size: 12px;
}


    .metric{
  padding: 14px;
}

    .metric h3{
  margin: 0 0 10px;
  font-size: 14px;
}

    .m{
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.02);
  margin-top: 10px;
}

    .m .k{
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

    .m .v{
  margin-top: 6px;
  font-size: 18px;
  font-weight: 700;
}

    .m .d{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}


    /* ===== Pages header ===== */
    
    .pageTitle{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

    
    
    .actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

    .btnLight{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #fff;
  color: #0f172a;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow2);
}

    .btnLight:hover{
  border-color: rgba(109,61,228,.25);
}

    .btnLight .sico{
  width: 16px;
  height: 16px;
  opacity: .8;
}


    /* ===== Tabs + Table (PDF-like) ===== */
    .tabsRow{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-bottom: 12px;
}

    .tabLink{
  font-weight: 600;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  padding: 8px 2px;
  position: relative;
}

    .tabLink.active{
  color: var(--primary2);
}

    .tabLink.active:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -11px;
  height: 3px;
  border-radius: 5px;
  background: var(--primary);
}


    .tableTools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

    .searchInput{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #fff;
  min-width: 320px;
  box-shadow: var(--shadow2);
}

    .searchInput .sico{
  width: 16px;
  height: 16px;
  opacity: .6;
}

    .searchInput input{
  width: 100%;
  border: 0;
  outline: 0;
  font-size: 13px;
}

    
    
    th,td{
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12.8px;
  text-align: left;
  color: #0f172a;
  vertical-align: middle;
  white-space: nowrap;
}

    
    tr:last-child td{
  border-bottom: 0;
}

    td .muted{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  white-space: normal;
}

    .pillBadge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.02);
  font-weight: 400;
  font-size: 12px;
}
.pillBadge.st-created{color:#68cc93;background:rgb(240,253,245);border-color:rgb(166,244,197)}
.pillBadge.st-ready{color:#529ac3;background:rgb(242,249,254);border-color:#529ac3}
.pillBadge.st-shipped{color:rgb(90,68,213);background:rgb(247,245,255);border-color:rgb(213,205,255)}
.pillBadge.st-delivered{color:rgb(75,85,101);background:rgb(248,250,252);border-color:rgb(227,232,239)}
.pillBadge.st-cancel{color:rgb(219,48,59);background:rgb(255,245,246);border-color:rgb(254,205,202)}
.pillBadge.st-refund-request{color:rgb(247,144,9);background:rgb(254,248,240);border-color:rgb(253,222,181)}
.pillBadge.st-refunded{color:rgb(192,75,151);background:rgb(253,242,250);border-color:rgb(244,196,227)}
.pillBadge.pay-paid{color:#68cc93;background:rgb(240,253,245);border-color:rgb(166,244,197)}
.pillBadge.pay-cancel{color:rgb(219,48,59);background:rgb(255,245,246);border-color:rgb(254,205,202)}
.pillBadge.pay-pending{color:#529ac3;background:rgb(242,249,254);border-color:#529ac3}
.pillBadge.pay-refunded{color:rgb(192,75,151);background:rgb(253,242,250);border-color:rgb(244,196,227)}
.pillBadge.st-delivered svg{width:14px;height:14px;flex-shrink:0}

    .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}


    .pagination{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12.5px;
  flex-wrap: wrap;
}

    .pager{
  display: flex;
  align-items: center;
  gap: 6px;
}

    .pageBtn{
  min-width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
  box-shadow: var(--shadow2);
}

    .pageBtn.active{
  border-color: rgba(109,61,228,.25);
  background: rgba(109,61,228,.08);
  color: var(--primary2);
}


    /* ===== My Apps (PDF-like list) ===== */
    
    .myHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

    .myHead h2{
  margin: 0;
  font-size: 18px;
}

    .myHead p{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

    .myList{
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

    
    .myRow:first-child{
  border-top: 0;
}

    
    .appLogo{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 700;
}

    .myMeta{
  min-width: 0;
}

    .myName{
  font-weight: 700;
}

    .myDate{
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 500;
}

    .kebab{
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow2);
}


    /* ===== Empty placeholder ===== */
    .empty{
  padding: 26px;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
}

    /* ===== APP STORE (PDF'deki gibi) ===== */

.storeTitle{
  display: flex;
  align-items: center;
  gap: 8px;
}


.infoDot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: #64748b;
  font-weight: 700;
  background: #fff;
  font-size: 12px;
}


.storeTab .miniDot{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(109,61,228,.18);
  border: 1px solid rgba(109,61,228,.22);
}


.storeWrap{
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.storeSection{
  border-top: 1px solid var(--line);
}

.storeSection:first-child{
  border-top: 0;
}


.storeGrid{
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}


.appTop{
  display: flex;
  align-items: center;
  gap: 10px;
}


.appName{
  font-weight: 700;
  color: #0f172a;
}


.appBottom{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
}

.appLink{
  font-weight: 700;
  font-size: 12.5px;
  color: var(--primary2);
  cursor: pointer;
  user-select: none;
}


.statusPill .s{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.statusPill.installed{
  border-color: rgba(22,163,74,.18);
  background: rgba(22,163,74,.06);
  color: #15803d;
}

.statusPill.installed .s{
  background: #22c55e;
}

.statusPill.coming{
  border-color: rgba(148,163,184,.35);
  background: rgba(148,163,184,.10);
  color: #475569;
}

.statusPill.coming .s{
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148,163,184,.14);
}


.storeTools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.storeSearch{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  min-width: 320px;
  box-shadow: var(--shadow2);
}

.storeSearch input{
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 13px;
}

.storeSearch .sico{
  width: 16px;
  height: 16px;
  opacity: .6;
}

 /* Store topbar: sekmeler sağda dursun */
.storeTopBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.storeTabs{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  margin-left: auto;
  justify-content: flex-end;
}


/* Sekme görünümü (solda küçük svg ikon) */
.storeTab{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  padding: 8px 10px;
  position: relative;
  user-select: none;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
}

.storeTab:hover{
  background: rgba(109,61,228,.06);
}

.storeTab.active{
  color: var(--primary2);
  background: rgba(109,61,228,.08);
  border-color: rgba(109,61,228,.18);
}

.storeTab.active:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  border-radius: 5px;
  background: var(--primary);
  display: none;
}
 /* alttaki çizgiyi kaldırıyoruz */

.tabIco{
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  opacity: .9;
}

.tabIco svg{
  width: 14px;
  height: 14px;
}

 /* Uygulamalarım listesi screenshot gibi daha “geniş” */
.myAppsCard{
  padding: 18px;
}

.myRow{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-top: 1px solid var(--line);
}

.myRow .appLogoImg{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  padding: 6px;
}

.myRow.sel{
  background: rgba(109,61,228,.05);
  border-left: 4px solid rgba(109,61,228,.35);
}

/* App card büyüt */


/* Logo biraz daha büyük */
.appLogoImg{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
  padding: 6px;
}


/* ===== APP SETUP ===== */


.setupBrand img{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  object-fit: contain;
  padding: 6px;
}


.setupSub{
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}


.setupTab.active:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  border-radius: 5px;
  background: var(--primary);
}


.formGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 980px){ .formGrid{grid-template-columns:1fr;} }

.f{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px;
}

.f label{
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  margin-bottom: 8px;
}

.f input,.f select,.f textarea{
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  outline: 0;
  font-size: 13px;
}
.f select{
  padding-right:40px;
}

.f textarea{
  min-height: 90px;
  resize: vertical;
}


.ck{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(15,23,42,.02);
}

.ck input{
  margin-top: 3px;
}

.ck b{
  font-weight: 700;
}

.ck small{
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 500;
}


.saveRow{
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.btnPrimary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 700;
  border: 1px solid rgba(111,85,255,.22);
  background: rgba(111,85,255,.10);
  color: var(--primary2);
  box-shadow: var(--shadow2);
}

.btnPrimary:disabled{
  opacity: .55;
  cursor: not-allowed;
}

.spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(15,23,42,.18);
  border-top-color: rgba(109,61,228,.95);
  animation: spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

/* ===== ERONTA Toast Notification System ===== */
.erToastContainer{
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: max-content;
  max-width: 94vw;
}

.erToast{
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 8px 24px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: auto;
  max-width: 460px;
  min-width: 200px;
  word-break: break-word;
  opacity: 0;
  will-change: transform, opacity;
}

/* ── Entrance ── */
.erToast--enter{
  animation: erToastIn .32s cubic-bezier(.22,1,.36,1) forwards;
}

/* ── Exit ── */
.erToast--exit{
  animation: erToastOut .26s cubic-bezier(.55,.06,.68,.19) forwards;
}

@keyframes erToastIn{
  0%{opacity:0;transform:translateY(18px) scale(.97)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes erToastOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:0;transform:translateY(14px) scale(.97)}
}

/* ── Icon ── */
.erToastIcon{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* ── Message ── */
.erToastMsg{
  flex: 1;
  min-width: 0;
}

/* ── Close Button ── */
.erToastClose{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: var(--muted);
  padding: 0;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.erToastClose:hover{
  background: rgba(15,23,42,.06);
  color: var(--text);
}
.erToastClose svg{
  width: 13px;
  height: 13px;
}

/* ── Type accent: left border ── */
.erToast--success{ border-left: 3px solid #16a34a; }
.erToast--error{   border-left: 3px solid #ef4444; }
.erToast--warning{ border-left: 3px solid #f59e0b; }
.erToast--info{    border-left: 3px solid #3b82f6; }

/* ── Mobile responsive ── */
@media(max-width:600px){
  .erToastContainer{
    bottom: 16px;
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
    max-width: none;
  }
  .erToast{
    max-width: 100%;
    min-width: 0;
    width: 100%;
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* ── Eski toast class (backward compat) ── */
.toast{ display:none !important; }

/* Eski backBtn'yi artık kullanmıyoruz */
.backBtn{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  display: none !important;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow2);
}


/* Logo satırı içinde minimal geri butonu */
.backInline{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow2);
}

.backInline .sico svg{
  width: 16px;
  height: 16px;
  opacity: .85;
}

/* Sidebar yazıları daha hafif */
.nav a, .nav button{
  font-weight: 500;
}


.nav .label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Sayfa başlıkları */


/* Dashboard KPI değerleri kalsın güçlü ama başlıklar yumuşasın */


/* Genel “kalın” görünen başlıklar */
.chartTitle,
.listHead h3,
.metric h3,
.storeTitle h1,
.storeSectionHead,
.myHead h2,
.setupName{
  font-weight: 600;
}


/* App kart isimleri */
.appName, .myName{
  font-weight: 600;
}

/* global ağırlık yumuşatma */
.storeTab,
.storeSectionHead,
th,
.btn,
.btnLight,
.btnPrimary,
.p-name,
.myName,
.chName,
.rname{
  font-weight: 600 !important;
}

.setupTop{
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}


.setupBrand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}


.setupRight{
  display: flex;
  align-items: center;
  gap: 10px;
}


.setupTabs{
  margin-top: 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
}

/* ===== GLOBAL FONT SCALE ===== */


/* ===== SIDEBAR ===== */
.nav a,
.nav button{
  font-size: 14px;
  font-weight: 500 !important;
}


.nav .sub a{
  font-size: 13.5px;
  font-weight: 500 !important;
}


.p-name{
  font-size: 13.5px;
  font-weight: 500 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.p-org{
  font-size: 12px;
  color: rgba(233,238,252,.70);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}


/* ===== PAGE TITLES ===== */


/* ===== KPI ===== */
.kpiTop{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500 !important;
}


.kpiVal{
  margin-top: 8px;
  font-size: 22px;
  font-weight: 600 !important;
  letter-spacing: .2px;
  color: #0b1220;
}


/* ===== CHART TITLE ===== */
.chartTitle{
  font-weight: 500 !important;
  font-size: 15px;
}


/* ===== STORE ===== */
.storeTitle h1{
  margin: 0;
  font-size: 20px;
  letter-spacing: .2px;
  font-weight: 500 !important;
}


.storeSectionHead{
  padding: 12px 14px;
  font-weight: 500 !important;
  color: #0f172a;
  background: rgba(15,23,42,.02);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}


.appName,
.myName{
  font-size: 14.5px;
  font-weight: 500 !important;
}


.appDesc{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.35;
  min-height: 42px;
}


/* ===== TABLE ===== */


td{
  font-size: 13.5px;
}


td b{
  font-weight: 500 !important;
}


/* ===== BUTTONS ===== */


/* ===== SETUP PAGE ===== */
.setupName{
  font-weight: 500 !important;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===== CHIPS ===== */
.chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 13px;
  color: #111827;
  box-shadow: var(--shadow2);
  font-weight: 500 !important;
}


/* ===== STATUS PILL ===== */
.statusPill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.02);
  font-weight: 500 !important;
  font-size: 12px;
  color: #0f172a;
  white-space: nowrap;
}

/* ===== SIDEBAR PREMIUM MAT ===== */
.side{
  width: 270px;
  background: linear-gradient(180deg,#0c111b,#070b13) !important;
  color: var(--side-text);
  border-right: 1px solid rgba(255,255,255,.06) !important;
  padding: 16px 12px 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}


/* Hover daha soft */
.nav a:hover,
.nav button:hover{
  background: rgba(255,255,255,.04) !important;
}


/* Aktif menü daha premium */
.nav .navlink.active{
  background: #eafc88 !important;
  color: #0b1220 !important;
  border: 1px solid rgba(0,0,0,.08);
}


/* ===== HEADER GLASS EFFECT UPGRADE ===== */
.header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0,0,0,.05) !important;
}


/* ===== CARD SHADOW SOFT ===== */
.card{
  background: var(--card);
  border: 1px solid rgba(15,23,42,.05) !important;
  border-radius: var(--r);
  box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
}


/* ===== BUTTON PREMIUM ===== */
.btn,
.btnLight,
.btnPrimary{
  font-size: 13.5px;
  font-weight: 500 !important;
  border-radius: 5px !important;
  transition: all .18s ease;
}


.btn:hover,
.btnLight:hover,
.btnPrimary:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(109,61,228,.18);
}


/* ===== TABLE CLEANER ===== */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 12px;
  background: #fff;
}


th{
  background: rgba(15,23,42,.02) !important;
  color: #334155;
  font-weight: 500 !important;
  font-size: 13px;
}


/* ===== STORE CARD HOVER EFFECT ===== */
.appCard{
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 18px;
  box-shadow: 0 6px 14px rgba(15,23,42,.05);
  display: flex;
  flex-direction: column;
  min-height: 170px;
  transition: all .2s ease;
}


.appCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  border-color: rgba(109,61,228,.15);
}


/* ===== KPI CARDS SOFT ELEVATION ===== */
.kpiRow{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.05) !important;
}


/* ===== TABS CLEANER ===== */
.setupTab{
  padding: 8px 0;
  font-weight: 500 !important;
  font-size: 13px;
  color: #64748b;
  cursor: pointer;
  position: relative;
}


.setupTab.active{
  color: var(--primary2);
}

/* ===== Sidebar yazılarını incelt (sadece sidebar) ===== */
.side .nav a,
.side .nav button,
.side .nav .label{
  font-weight: 500 !important;
  letter-spacing: .1px;
}


/* Aktif menüde yazı yine net kalsın */
.side .nav .navlink.active,
.side .nav .navlink.active .label{
  font-weight: 600 !important;
}


/* ===== Accordion: smooth open/close ===== */
/* display:none yerine animasyonlu yapı */
.sub{
  margin: 0 0 6px 28px;
  border-left: 1px dashed rgba(233,238,252,.18);
  padding-left: 10px;
  display: block !important;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height .26s ease, opacity .18s ease, transform .18s ease;
  will-change: max-height, opacity, transform;
}


.acc.open + .sub{
  opacity: 1;
  transform: translateY(0);
}


/* Alt linklerde hafif hover */
.sub a:hover{
  background: rgba(255,255,255,.05) !important;
}


/* ===== Dashboard dışı header gizlenecek (JS de ayarlıyor) ===== */
.header.isHidden{
  display: none !important;
}


/* Anlık ziyaretçi tamamen kalksın */
.livePill{
  display: none !important;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(109,61,228,.18);
  background: rgba(109,61,228,.06);
  box-shadow: var(--shadow2);
  font-size: 13px;
  white-space: nowrap;
}


/* Küçük açıklamalar zaten iyi, dokunmuyoruz */
/* Chip logo */
.chipLogo{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  object-fit: contain;
  padding: 2px;
  display: none;
}


/* Dashboard dışı filtreleri gizle */
#dashChips.isHidden{
  display: none !important;
}


/* ===== Theme: light/dark (CSS variables override) ===== */
:root[data-theme="dark"]{
  --page-bg: #0b1220;
  --card: #0f1a33;
  --line: rgba(255,255,255,.08);
  --text: #e9eefc;
  --muted: rgba(233,238,252,.70);
  --shadow: 0 16px 32px rgba(0,0,0,.35);
  --shadow2: 0 10px 18px rgba(0,0,0,.22);
}

/* Marketplace mini logo (sidebar sublink icon) */
.mpLogo{
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  object-fit: contain;
  padding: 2px;
  display: inline-block;
}

:root[data-theme="dark"] .mpLogo{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}

.navlink.active .mpLogo{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.60);
}


:root[data-theme="dark"] body{
  background: var(--page-bg);
  color: var(--text);
}


:root[data-theme="dark"] .header{
  background: rgba(11,18,32,.65);
  border-bottom: 1px solid rgba(255,255,255,.08);
}


:root[data-theme="dark"] .chip,
:root[data-theme="dark"] .iconBtn,
:root[data-theme="dark"] .searchInput,
:root[data-theme="dark"] .storeSearch,
:root[data-theme="dark"] table{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.10) !important;
  color: var(--text) !important;
}


:root[data-theme="dark"] th{
  background: rgba(255,255,255,.06) !important;
  color: rgba(233,238,252,.85) !important;
}


:root[data-theme="dark"] td{
  color: rgba(233,238,252,.92) !important;
}


:root[data-theme="dark"] .muted,
:root[data-theme="dark"] .subtxt{
  color: rgba(233,238,252,.62) !important;
}

:root[data-theme="dark"] select{
  background-color:var(--card);
  border-color:rgba(255,255,255,.12);
  color:var(--text);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1.5 1.5L6 6.5l4.5-5' stroke='%23a8b4c8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] select:hover{
  border-color:rgba(109,61,228,.40);
}
:root[data-theme="dark"] select:focus{
  border-color:rgba(109,61,228,.55);
  background-color:var(--card);
}
:root[data-theme="dark"] select:disabled{
  background-color:rgba(255,255,255,.04);
  color:var(--muted);
}

.app-card{
  margin-bottom: 12px;
}

  .row{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  justify-content: space-between;
}

  .h{
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}

  .small{
  font-size: 12px;
}

  .app-actions{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

  .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(109,61,228,.08);
  color: var(--primary2);
  transition: transform .08s ease, background .12s ease, border-color .12s ease;
}

  .btn.danger{
  background: #ff3b30;
  color: #fff;
  border-color: #ff3b30;
}

  .btn.danger.ghost{
  background: transparent;
  color: #ff3b30;
}

/* responsive store grid */
@media (max-width: 1180px){
  .storeGrid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 740px){
  .storeGrid{grid-template-columns: 1fr;}
  .storeSearch{min-width:100%}
}

    /* Responsive */
    @media (max-width: 1180px){
      .kpiRow{grid-template-columns:1fr 1fr}
      .kpiItem{border-right:0;border-bottom:1px solid var(--line)}
      .kpiItem:nth-last-child(-n+2){border-bottom:0}
      .channels{grid-template-columns:1fr}
      .grid2{grid-template-columns:1fr}
      canvas{height:260px}
    }
    @media (max-width: 860px){
      .searchInput{min-width:100%}
      canvas{height:260px}
    }
    @media (max-width: 740px){
      .searchInput{min-width:100%}
      canvas{height:220px}
    }
/* Product Detail */
.pdSection{
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.pdHead{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pdHeadTitle{
  font-weight: 700;
}

.pdHeadHint{
  color: var(--muted);
  font-weight: 650;
  font-size: 12px;
}


.pdGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pdField{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pdField label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 750;
}

.pdValue{
  font-weight: 600;
}

.pdSpan2{
  grid-column: 1 / span 2;
}


.pdTableWrap{
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.pdTableWrap table{
  width: 100%;
  border-collapse: collapse;
}

.pdTableWrap th, .pdTableWrap td{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.pdTableWrap thead th{
  background: var(--bg2);
  font-weight: 600;
}

.pdTableWrap tbody tr:last-child td{
  border-bottom: none;
}


.pdMedia .mItem{
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg2);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pdMedia img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Products table thumb */
.pCell{
  display: flex;
  gap: 10px;
  align-items: center;
}

.pThumb{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg2);
  overflow: hidden;
  flex: 0 0 auto;
}

.pThumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pInfo b{
  display: block;
}

.pInfo .muted{
  display: block;
}

tr.pRow{
  cursor: pointer;
}

tr.pRow:hover{
  background: rgba(109,61,228,.04);
}


/* Ürün Detay - Açıklama alanı */
#pd_desc{
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* HTML içindeki aşırı uzun link / kelimeler taşmasın */
#pd_desc *{
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: anywhere;
}


/* Resim/tablolar taşmasın */
#pd_desc img,
#pd_desc table{
  max-width: 100%;
}


/* Ürün Detay - Galeri */
#pd_media{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


#pd_media .mItem{
  width: 210px;
  height: 210px;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  border: 1px solid var(--line);
}


#pd_media .mItem img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#pd_desc img, #pd_desc table{
  max-width: 100%;
}

#pd_desc table{
  display: block;
  overflow: auto;
}

/* ===== Product Detail Media Fix ===== */


/* ===== Product Description Scroll Box ===== */
#page-product_detail #pd_desc{
  max-height: 260px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  white-space: normal !important;
  line-height: 1.5;
}


/* HTML içerik içinde taşmaları engelle */
#page-product_detail #pd_desc *{
  max-width: 100%;
  box-sizing: border-box;
}


/* Özellikle img ve tablolar için */
#page-product_detail #pd_desc img{
  max-width: 100%;
  height: auto;
}


#page-product_detail #pd_desc table{
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow: auto;
}


#page-product_detail #pd_desc a{
  word-break: break-word;
}

/* ==== Product Detail Edit Mode ==== */
.pdEditInput{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-weight: 600;
  outline: 0;
}

.pdEditTextarea{
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font-weight: 650;
  outline: 0;
  resize: vertical;
}


/* ==== Media grid items ==== */
.pdMedia{
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
}

.mItem{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
}

.mItem img{
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}


.mOverlay{
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(-2px);
  transition: .15s ease;
}

.mItem:hover .mOverlay{
  opacity: 1;
  transform: translateY(0);
}


.mBtn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(15,23,42,.65);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.mBtnTrash{
  background: rgba(255,59,48,.85);
  border-color: rgba(255,59,48,.2);
}


/* ==== Add tile ==== */
.mAdd{
  height: 140px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-weight: 600;
}

.mAdd span{
  font-size: 28px;
  line-height: 1;
}


/* ==== Image modal ==== */
.pdModal{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.6);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 9999;
}

.pdModal.show{
  display: flex;
}

.pdModalInner{
  width: min(920px, 96vw);
  background: #0b1220;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.pdModalTop{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  color: #fff;
}

.pdModalClose{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
}

.pdModalImg{
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}


/* ===== Product Detail - Topbar ===== */


/* 3 kolon: sol-orta-sağ */
#page-product_detail .pdTopbar{
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg, #fff);
  border-bottom: 1px solid var(--line, #e9e9ef);
  padding: 12px 14px;
  margin: -8px 0 14px;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 520px) 1fr;
  align-items: center;
  gap: 12px;
}


/* Sol breadcrumb */
#page-product_detail .pdCrumb{
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-product_detail .pdCrumbItem.strong{
  color: #eafc88;
}

#page-product_detail .pdCrumbSep{
  opacity: .6;
}


/* Orta başlık tam ortalı */
#page-product_detail .pdTitleCenter{
  text-align: center;
  line-height: 1.15;
}

#page-product_detail .pdTitleMain{
  font-weight: 700;
  color: var(--text, #111827);
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-product_detail .pdTitleSub{
  margin-top: 4px;
  font-weight: 500;
  color: var(--muted, #6b7280);
  font-size: 12px;
}


/* Sağ aksiyonlar */
#page-product_detail .pdActions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* =========================
   IKAS STYLE TOPBAR (Product Detail)
   En alta ekle
   ========================= */

/* Topbar: siyah + sticky + ince çizgi */


/* Grid aynı kalsın ama ortalama garantisi */


/* Breadcrumb: ikas tonu */
#page-product_detail .pdCrumb--ikas{
  color: rgba(233,238,252,.70) !important;
  font-weight: 600 !important;
}

#page-product_detail .pdCrumb--ikas .pdCrumbItem.strong{
  color: #d9f86d !important;
  font-weight: 500 !important;
}

#page-product_detail .pdCrumb--ikas .pdCrumbSep{
  opacity: .55;
}


/* Orta başlık */
#page-product_detail .pdTopbar--ikas .pdTitleMain{
  color: #111827 !important;
  font-weight: 750 !important;
  font-size: 15.5px !important;
}

#page-product_detail .pdTopbar--ikas .pdTitleSub{
  color: #6b7280 !important;
  font-weight: 500 !important;
  font-size: 12px !important;
}


/* Sağ aksiyonlar */
#page-product_detail .pdTopbar--ikas .pdActions{
  justify-content: flex-end;
  gap: 10px;
}


/* Sağdaki küçük icon (⋯) */
#page-product_detail .pdIcon{
  width: 44px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
  font-weight: 600;
  font-size: 20px;
  display: grid;
  place-items: center;
}

#page-product_detail .pdIcon:hover{
  background: #f3f4f6;
  border-color: #d1d5db;
}


/* Sağdaki pill: Satış Kanalları (4) */
#page-product_detail .pdPill{
  height: 40px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #374151;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  cursor: pointer;
  font-weight: 650;
  white-space: nowrap;
}

#page-product_detail .pdPill:hover{
  background: #f3f4f6;
  border-color: #d1d5db;
}

#page-product_detail .pdDot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}

#page-product_detail .pdCount{
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #374151;
}


/* Kaydet butonunu ikas gibi mor yap (senin .btn zaten var, burada üstüne geçiriyoruz) */
#page-product_detail .pdTopbar--ikas .btn{
  height: 40px;
  padding: 0 14px;
  border-radius: 5px !important;
  border: 1px solid rgba(111,85,255,.35) !important;
  background: rgb(111,85,255) !important;
  color: #fff !important;
  box-shadow: none !important;
}

#page-product_detail .pdTopbar--ikas .btn:hover{
  filter: brightness(1.05);
}


/* Geri/Düzenle butonları */
#page-product_detail .pdTopbar--ikas .btnLight{
  height: 40px;
  padding: 0 12px;
  border-radius: 5px !important;
  background: #f9fafb !important;
  border: 1px solid #e5e7eb !important;
  color: #374151 !important;
  box-shadow: none !important;
}

#page-product_detail .pdTopbar--ikas .btnLight:hover{
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}


/* Save status yazısı */
#page-product_detail .pdTopbar--ikas #pd_saveStatus{
  color: #6b7280 !important;
}

/* =========================================
   ERONTA PATCH (layout + typography + PD media + products tools)
   EN ALTA EKLE
   ========================================= */

/* 1) Tüm sayfalar iki yana yaslansın (max-width/padding boşluklarını sıfırla) */
.headerIn{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}


/* bazı kartlar içeride güzel dursun diye istersen 0 yerine 12px yap:
   .content{ padding: 0 12px !important; }
*/

/* pageTop’larda da ekstra boşluklar olmasın */


/* 2) Ürün detaydaki sticky bar en yukarı yapışsın, altındaki “Temel Bilgi” kartına değsin,
      bar biraz daha yüksek olsun (15-20px daha büyük) */
#page-product_detail .pdTopbar.pdTopbar--ikas{
  top: 0 !important;
  z-index: 50;
  margin: 0 !important;
  padding: 18px 16px !important;
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: none;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 640px) 1fr;
  align-items: center;
  gap: 12px;
  border-radius: 0 !important;
}


/* sticky bar altındaki ilk ana kart direkt değsin */
#page-product_detail > .card{
  margin-top: 0 !important;
}


/* 3) Yazılar çok kalın: site genelini incelt, sadece kritik yerleri biraz kalın bırak */
body{
  margin: 0;
  font-family: "Inter","Twemoji Country Flags", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background: var(--page-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14.5px;
  font-weight: 400 !important;
  letter-spacing: .1px;
}

*{
  box-sizing: border-box;
  letter-spacing: .08px;
}


/* Genelde kalın görünen yerleri 500-600 bandına çek */
.pageTitle h1,
.chartTitle,
.storeTitle h1,
.storeSectionHead,
th,
.btn,
.btnLight,
.btnPrimary,
.p-name,
.chName,
.rname,
.appName,
.myName{
  font-weight: 500 !important;
}


/* Normal metinler */
td,
.pageTitle .subtxt,
.muted,
.appDesc,
.p-org{
  font-weight: 400 !important;
}


/* Sadece “ürün adı / ana değerler” bir tık kalın */
.kpiVal,
#page-product_detail .pdTitleMain,
#page-product_detail .pdValue,
td b,
.pInfo b{
  font-weight: 600 !important;
}


/* 4) Ürün detay medya görselleri: ekteki gibi tek sıra, eşit kutular, “Ekle” kutusu düzgün */
#page-product_detail #pd_media{
  display: flex !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px !important;
  align-items: start;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding: 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: #fff !important;
}


/* her görsel kutusu */
#page-product_detail #pd_media .mItem{
  width: 120px !important;
  height: 92px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  flex: 0 0 auto !important;
  display: grid !important;
  place-items: center !important;
}


/* görsel: ikas gibi contain (dağılmasın) */
#page-product_detail #pd_media .mItem img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block;
  background: #fff !important;
}


/* “Ekle” kutun (mAdd kullanıyorsan) */
#page-product_detail #pd_media .mAdd{
  width: 120px !important;
  height: 92px !important;
  border-radius: 6px !important;
  border: 2px dashed rgba(15,23,42,.15) !important;
  background: #f8fafc !important;
  flex: 0 0 auto !important;
}

#page-product_detail #pd_media .mAdd span{
  font-size: 22px !important;
}


/* 5) Ürün listesi: arama + filtre alanı ekteki gibi (daha düz/temiz, aynı hizada) */
#page-products_all .tableTools{
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 0 12px !important;
  margin: 0 0 12px !important;
}


/* arama kutusu daha kompakt */
#page-products_all .searchInput{
  max-width: 200px !important;
  height: 40px !important;
  padding: 0 12px !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}


/* arama input */
#page-products_all .searchInput input{
  font-size: 13.5px !important;
  font-weight: 400 !important;
}


/* Filtre butonu ekteki gibi */
#page-products_all .btnLight{
  height: 40px !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  font-weight: 500 !important;
}


/* tabs row */
#page-products_all .tabsRow{
  padding: 0 !important;
  margin: 0 !important;
}


/* Üst boşlukların tamamen gitmesi için (kart iç padding’leri koruyarak) */


/* Not: Eğer tüm sayfalarda içerik kenara sıfır çok sert geldiyse,
   sadece main içeriğe minimal nefes:
   .content{ padding: 0 12px !important; }
*/
/* ===== PAGE TITLES = PRODUCT DETAIL TONE (left aligned) ===== */
/* ===== PAGE TITLES = PRODUCT DETAIL TONE (left aligned) ===== */
/* =========================================================
   GLOBAL STICKY PAGE HEADER (ALL PAGES)
   - pageTop: sticky + full-bleed (edge-to-edge)
   - content remains 15px inset
   ========================================================= */

/* content 15px inset (senin istediğin) */


/* pageTop = tüm sayfaların başlığı (Ürünler/Siparişler/Ayarlar...) */


/* pageTop içi hizalama */
.pageTop{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 12px;
  margin: 0 0 12px !important;
  padding: 12px 15px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
  background: var(--card, #fff) !important;
  border-bottom: 1px solid var(--line, #e7ecf3) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}


/* Ürün detay barı zaten var: onu da aynı şekilde full-bleed + sticky yap */
.pdTopbar{
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  border-bottom: 1px solid var(--line, #e7ecf3) !important;
}


/* Başlık tipografisi: ürün detay gibi “net ama aşırı kalın değil” */
.pageTitle h1{
  margin: 0 !important;
  font-size: 18px !important;
  letter-spacing: .1px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}

.pageTitle .subtxt{
  font-size: 12.5px !important;
  color: rgba(15,23,42,.55) !important;
  font-weight: 520 !important;
  margin-top: 4px !important;
}


/* scroll sırasında barın altında içerik “takılmasın” diye sayfa içindeki ilk card’a biraz nefes */
.page.show > .card:first-of-type{
  margin-top: 10px !important;
}

/* =========================================================
   ERONTA – GLOBAL STICKY BREADCRUMB TOPBAR (ALL PAGES)
   Amaç: Ürün detay (pdTopbar) tonlarında
   - Sol: "Ürünler › Tüm Ürünler"
   - Sağ: Sayfa aksiyonları
   - Sticky, iki yana yaslı
   Not: page-product_detail kendi pdTopbar'ını kullanır (global gizleniyor)
   ========================================================= */

/* Eğer main içinde eski header/pageTop alanları boşluk bırakıyorsa */
.main{
  flex: 1;
  min-width: 0;
  position: relative;
}


/* Global topbar wrap (sticky) */


/* pdTopbar--ikas stilini birebir uygula */


/* Breadcrumb (sol) – pdTopbar hissi */


/* Crumb item */


/* Sep */


/* Strong (ikinci parça) */


/* Sağ aksiyonlar */

.gTopbar .btnLight{
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
}


.gTopbar .btnLight:hover{
  background: #f3f4f6;
}

.gTopbar .btn{
  background: var(--primary);
  color: #fff;
}

/* Sağda butonlar taşınca kırpmasın */
.gTopbar .pdActions > *{
  white-space: nowrap;
}


/* Global bar açıkken içerik üst boşluğu: 
   Eğer içerik barın altına yapışmasın istersen */
.content{
  padding: 10px !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  padding-top: 24px !important;
  padding-bottom: 18px !important;
}


/* =========================================================
   SAYFA İÇİ BAŞLIKLARI "KAPATMA" (İSTEĞE BAĞLI)
   Sen breadcrumb kullanacağın için bazı eski pageTop/storeTopBar
   alanları görünmesin diye. İstersen yorumdan çıkar.
   ========================================================= */

/* Ürün listesi gibi sayfalardaki klasik pageTop'u gizle (sen kullanmıyorsun) */
/* .pageTop{ display:none !important; } */

/* App store eski üst bar'ı yerine breadcrumb: */
/* .storeTopBar{ display:none !important; } */


/* =========================================================
   RESPONSIVE: Mobile
   ========================================================= */
@media (max-width: 860px){
  .gTopbar{
    padding: 10px 12px;
    min-height: 52px;
    gap: 10px;
  }

  .gTopbar .pdCrumbItem,
  .gTopbar .pdCrumbSep{
    font-size: 13px;
  }

  .gTopbar .pdActions{
    gap: 8px;
  }
}

@media (max-width: 520px){
  /* Çok dar ekranlarda aksiyonlar alt satıra düşsün */
  .gTopbar{
    align-items: flex-start;
    flex-direction: column;
  }
  .gTopbar .pdActions{
    width: 100%;
    justify-content: flex-start;
  }
}
/* Sticky wrapper */
.gTopbarWrap{
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}


/* Bar */
.gTopbar{
  background: #fff;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  min-height: 56px;
  border-bottom: none;
}


/* Sol breadcrumb */
.gTopbar .pdCrumb{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -.2px;
  color: #111827;
}


/* Breadcrumb item */
.gTopbar .pdCrumbItem{
  color: #6b7280;
  font-weight: 500;
  font-size: 14px;
}


/* Sep */
.gTopbar .pdCrumbSep{
  color: #d1d5db;
  font-weight: 600;
  font-size: 14px;
  opacity: .9;
}


/* Strong (ikinci parça) */
.gTopbar .pdCrumbItem.strong{
  color: #111827;
  font-weight: 700;
}


/* Sağ aksiyonlar */
.gTopbar .pdActions{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}


/* Sagdaki butonlar */
.gTopbar .pdActions .btnLight,
.gTopbar .pdActions .btn{
  border-color: #e5e7eb !important;
}


/* Light buton (bar üstü) */
.gTopbar .pdActions .btnLight{
  background: #f3f4f6 !important;
  color: #374151 !important;
  box-shadow: none !important;
  border-color: #e5e7eb !important;
}

.gTopbar .pdActions .btnLight:hover{
  background: #e5e7eb !important;
}


/* Primary btn (bar üstü) */
.gTopbar .pdActions .btn{
  background: var(--primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  border-color: var(--primary) !important;
}

.gTopbar .pdActions .btn:hover{
  background: var(--primary2) !important;
}


/* Eğer sağda ikon/pill kullanıyorsan (pdPill tarzı) */
.gTopbar .pdPill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 600;
}

.gTopbar .pdPill:hover{
  background: rgba(255,255,255,.16);
}


.gTopbar .pdPill .pdDot{
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.92);
  opacity: .9;
}

.gTopbar .pdPill .pdCount{
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  font-weight: 700;
}


/* Sağdaki ikon buton (⋯ vs) */
.gTopbar .pdIcon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  font-weight: 700;
}

.gTopbar .pdIcon:hover{
  background: rgba(255,255,255,.16);
}


/* Bar üstündeki küçük ikonlar (sico / ico) beyazlaşsın */
.gTopbar .sico,
.gTopbar .ico{
  color: rgba(255,255,255,.92) !important;
  opacity: .95;
}


/* =========================================================
   Ürün detay sayfasında global barı gizle (double header olmasın)
   (HTML'de global barın id'si varsa #gTopbarWrap gibi kullan)
   ========================================================= */
/* #page-product_detail.show ~ .gTopbarWrap { display:none !important; } */

/* Daha sağlam: body'ye js ile data-page="product_detail" basıyorsan:
   body[data-page="product_detail"] .gTopbarWrap{display:none!important;}
*/

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width: 860px){
  .gTopbar{ padding: 10px 12px; min-height: 52px; gap:10px; }
  .gTopbar .pdCrumbItem, .gTopbar .pdCrumbSep{ font-size: 13px; }
  .gTopbar .pdActions{ gap:8px; }
}
@media (max-width: 520px){
  .gTopbar{ flex-direction: column; align-items: flex-start; }
  .gTopbar .pdActions{ width:100%; justify-content:flex-start; }
}
#page-product_detail.show ~ .gTopbarWrap{
  display: none !important;
}

/* UNIFIED PAGINATION: tüm sipariş ve ürün sayfalarında altta sabit */
[id^="page-orders"] .prListFooter,
[id^="page-products"] .prListFooter{
  position: fixed;
  left: var(--sideW);
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-radius: 0;
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(15,23,42,.06);
  z-index: 50;
  margin: 0;
  gap: 14px;
  flex-wrap: wrap;
}

/* Pagination altı boşluk */
[id^="page-orders"] .prTableWrap,
[id^="page-products"] .prTableWrap{
  padding-bottom: 60px;
}

/* Pagination info text */
[id^="page-orders"] [id$="Info"] span,
[id^="page-orders"] [id*="ordersInfo"],
[id^="page-products"] [id*="productsInfo"]{
  color: #7c8a9a;
  font-size: 12px;
  font-weight: 500;
}

/* Pager buttons */
[id^="page-orders"] .pager,
[id^="page-products"] .pager{
  display: flex;
  align-items: center;
  gap: 6px;
}
[id^="page-orders"] .pageBtn,
[id^="page-products"] .pageBtn{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: .18s ease;
}
[id^="page-orders"] .pageBtn:hover,
[id^="page-products"] .pageBtn:hover{
  background: #f8fafc;
}
[id^="page-orders"] .pageBtn.active,
[id^="page-products"] .pageBtn.active{
  background: rgb(111, 85, 255);
  color: #fff;
  border-color: rgb(111, 85, 255);
}

@media (max-width: 900px){
  [id^="page-orders"] .prListFooter,
  [id^="page-products"] .prListFooter{
    left: calc(var(--sideW) + var(--mainPad));
    right: var(--mainPad);
  }
}
/* MAIN tamamen kenarlara yaslı */
.app main{
  padding: 0 !important;
  margin: 0 !important;
}

.page{
  display: none;
  padding: 0 !important;
  margin: 0 !important;
}

.tableWrap{
  padding: 14px;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* ===== IKAS-LIKE ORDERS UI ===== */
.ordersTabs{
  display: flex;
  gap: 18px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 10px 2px;
  overflow: auto;
}

.ordersTab{
  font-weight: 500;
  color: var(--muted);
  padding: 10px 2px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.ordersTab.active{
  color: var(--primary);
  border-bottom-color: var(--primary);
}


.statusChip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid var(--line);
  background: var(--bg2);
}

.statusChip.ok{
  background: rgba(22,163,74,.10);
  border-color: rgba(22,163,74,.25);
}

.statusChip.bad{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.25);
}

.statusChip.warn{
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.25);
}


.channelCell{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.channelLogo{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-block;
  object-fit: cover;
  border: 1px solid var(--line);
}

.orderNoLink{
  font-weight: 950;
  color: var(--text);
  text-decoration: none;
}

.orderNoLink:hover{
  text-decoration: underline;
}

.customerSub{
  color: var(--muted);
  font-weight: 650;
  font-size: 12.5px;
}

/* ===== Orders (ikas-like) ===== */
.topbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
}

.hTitle{
  font-size: 20px;
  font-weight: 700;
}

.hSub{
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}


.tableWrap .table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th{
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(0,0,0,0.02), rgba(0,0,0,0));
}

.table tbody td{
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.table tbody tr:hover td{
  background: rgba(0,0,0,.015);
}


.odRowMain{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.odNo{
  font-weight: 700;
}

.odSub2{
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
}


/* =========================================================
   ORDER DETAIL (HB-like) - FULL OVERRIDE (scoped)
   Width: 1200px
   ========================================================= */

/* =========================================================
   ORDER DETAIL (HB-like) - FULL OVERRIDE (scoped)
   Width: 1200px
   ========================================================= */

/* =========================
   ORDER DETAIL – Ikas/HB-like
   Scoped: only #page-order_detail
   ========================= */

#page-order_detail{
  background: #f8f9fb;
}

/* Topbar */
#page-order_detail .odTopbar{
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #0b0b0b;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#page-order_detail .odTopbarIn{
  height: 64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 16px;
}
#page-order_detail .odTopLeft{display:flex;flex-direction:column;gap:2px}
#page-order_detail .odTopLine1,
#page-order_detail .odTopLine2{
  color:#fff;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.1;
}
#page-order_detail .odTopLine3{
  color: rgba(255,255,255,.70);
  font-weight: 600;
  font-size: 13px;
}
#page-order_detail .odTopRight{display:flex;align-items:center;gap:10px}
#page-order_detail .odTopBtn{
  background: transparent;
  color:#fff;
  font-weight: 500;
  border:1px solid rgba(255,255,255,.18);
  padding: 10px 14px;
  border-radius: 10px;
}
#page-order_detail .odTopBtn:hover{background: rgba(255,255,255,.08)}
#page-order_detail .odTopBtnIcon{width:44px; padding:10px 0}

/* Canvas + wrap */
#page-order_detail .odCanvas{min-height: calc(100vh - 64px);}
#page-order_detail .odWrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 14px 26px;
}

/* Pills (removed – badges moved to top bar) */

/* Grid */
#page-order_detail .odGrid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
  align-items:start;
}
@media (max-width: 1020px){
  #page-order_detail .odGrid{grid-template-columns:1fr}
}

/* Cards */
#page-order_detail .odCard{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  box-shadow: none;
  padding:16px;
}
#page-order_detail .odCard + .odCard{margin-top:14px}

/* Card head */
#page-order_detail .odCardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}
#page-order_detail .odCardHead.simple{margin-bottom:12px}
#page-order_detail .odCardTitle{
  font-weight: 700;
  font-size: 18px;
  color:#111827;
  display:flex;
  align-items:baseline;
  gap:10px;
}
#page-order_detail .odCardTitleSub{
  font-size: 12.5px;
  font-weight: 500;
  color:#6b7280;
}
#page-order_detail .odCardHeadRight{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* Buttons like screenshot */
#page-order_detail .odBtn{
  height: 38px;
  border-radius: 10px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 13px;
  cursor:pointer;
}
#page-order_detail .odBtnLight{
  background:#fff;
  border:1px solid #d7dbe9;
  color:#111827;
}
#page-order_detail .odBtnLight:hover{background:#f7f8fc}
#page-order_detail .odBtnPrimary{
  background:#5a2fe0;
  border:1px solid #5a2fe0;
  color:#fff;
}
#page-order_detail .odBtnPrimary:hover{filter:brightness(0.98)}
#page-order_detail .odBtnIcon{
  width:44px;
  padding:0;
  text-align:center;
  background:#fff;
  border:1px solid #d7dbe9;
  font-size:18px;
}

/* Table */
#page-order_detail .odTableWrap{
  border:1px solid #eceef7;
  border-radius:12px;
  overflow:hidden;
}
#page-order_detail table.odTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
#page-order_detail table.odTable thead th{
  text-align:left;
  font-weight:600;
  font-size:12.5px;
  color:#6b7280;
  background:#f8f9fd;
  padding:12px 14px;
  border-bottom:1px solid #eceef7;
}
#page-order_detail table.odTable tbody td{
  padding:14px;
  border-bottom:1px solid #f0f1f6;
  color:#111827;
  font-weight:500;
  font-size:13px;
  vertical-align:middle;
}

/* Product cell */
#page-order_detail .odProdCell{display:flex;gap:12px;align-items:center}
#page-order_detail .odProdThumb{
  width:42px;
  height:42px;
  border-radius:10px;
  background:#f2f3f7;
  border:1px solid #e6e8f2;
  overflow:hidden;
  flex:0 0 auto;
}
#page-order_detail .odProdThumb img{width:100%;height:100%;object-fit:cover;display:block}
#page-order_detail .odProdName{font-weight:700}
#page-order_detail .odProdSub{margin-top:2px;color:#6b7280;font-weight:500;font-size:12px}

/* Card footer rows */
#page-order_detail .odCardFoot{padding-top:12px}
#page-order_detail .odFootRows{display:flex;flex-direction:column;gap:8px}
#page-order_detail .odFootRow{display:flex;justify-content:space-between;gap:12px}
#page-order_detail .odFootKey{color:#6b7280;font-weight:600}
#page-order_detail .odFootVal{color:#111827;font-weight:700}
#page-order_detail .odFootTotal{font-size:16px}

/* Customer grid (3 col) */
#page-order_detail .odCustomerGrid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:16px;
  margin-top:8px;
}
@media (max-width: 1020px){
  #page-order_detail .odCustomerGrid{grid-template-columns:1fr}
}
#page-order_detail .odBoxTitle{font-weight:700;color:#111827;margin-bottom:6px}
#page-order_detail .odBoxText{
  font-size:14px;
  font-weight:500;
  color:#0f172a;
  margin-bottom:6px;
}
#page-order_detail .odBoxHint{
  font-size:12px;
  font-weight:500;
  color:#94a3b8;
}
#page-order_detail .odBoxPre{
  font-size:13px;
  font-weight:500;
  color:#334155;
  white-space:pre-line;
  line-height:1.6;
}

/* Side */
#page-order_detail .odSide{display:flex;flex-direction:column;gap:14px}
#page-order_detail .odSideTitle{font-weight:700;color:#111827;margin-bottom:10px}
#page-order_detail .odSideRow{margin:6px 0}
#page-order_detail .odMuted{color:#6b7280;font-weight:500}
#page-order_detail .odSep{height:1px;background:#eceef7;margin:12px 0}
#page-order_detail .odKV{display:flex;justify-content:space-between;gap:12px}
#page-order_detail .odK{color:#6b7280;font-weight:600}
#page-order_detail .odV{color:#111827;font-weight:700}
#page-order_detail .odKVTotal .odK,
#page-order_detail .odKVTotal .odV{font-size:16px}

/* Note card (purple-ish like screenshot) */
#page-order_detail .odNoteCard{
  background: #f3f1ff;
  border-color: rgba(90,47,224,.25);
}
#page-order_detail .odNoteCard .odSideTitle{color:#231a6b}
#page-order_detail .odSideText{color:#111827;font-weight:600;white-space:pre-line}

/* Channel row */
#page-order_detail .odChannelRow{display:flex;align-items:center;gap:10px;font-weight:700}
#page-order_detail #odSummaryChannelLogo{
  width:22px;
  height:22px;
  border-radius:6px;
  object-fit:cover;
  display:none;
}

/* Tags input */
#page-order_detail .odInp{
  height: 40px;
  width:100%;
  border-radius: 10px;
  border:1px solid #d7dbe9;
  padding: 0 12px;
  font-weight: 600;
  outline:none;
}
#page-order_detail .odInp:focus{border-color: rgba(90,47,224,.55)}
/* GENEL YAZI AĞIRLIĞI */


/* ÜRÜN ADI SADECE KALIN */
.odProdName {
  font-weight: 500 !important;
}

/* Başlıklar da hafif */
.odCardTitle,
.odBoxTitle,
.odSideTitle {
  font-weight: 400 !important;
}

/* Address boxes separator */
#page-order_detail .odCustomerGrid .odBox{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:16px 18px;
  line-height:1.5;
}

/* Desktop: yan yana kutular arası dikey çizgi */
@media (min-width: 900px){
  #page-order_detail .odCustomerGrid{
    gap:0 !important;
  }
  #page-order_detail .odCustomerGrid .odBox{
    border-radius:0 !important;
    border-right:none;
  }
  #page-order_detail .odCustomerGrid .odBox:last-child{
    border-right:1px solid var(--line);
  }
  #page-order_detail .odCustomerGrid .odBox:first-child{
    border-top-left-radius:14px !important;
    border-bottom-left-radius:14px !important;
  }
  #page-order_detail .odCustomerGrid .odBox:last-child{
    border-top-right-radius:14px !important;
    border-bottom-right-radius:14px !important;
  }
}

/* Mobile: üst üste kutular arası yatay çizgi */
@media (max-width: 899px){
  #page-order_detail .odCustomerGrid{
    gap:10px;
  }
}
#page-order_detail .odShipRow{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 0;
}
#page-order_detail .odShipLogo{
  width:48px;
  height:48px;
  object-fit:contain;
}
#page-order_detail .odShipLogo img{
  max-width:100%;
  max-height:100%;
  display:block;
  border-radius:6px;
}
#page-order_detail .odIconBtn{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:4px;
}
#page-order_detail .odIconBtn .sico{
  width:16px;height:16px;
}
/* === ICON SYSTEM (fix svg sizes + visibility) === */
#page-order_detail .odIconBtn:hover{
  opacity:.7;
}
#page-order_detail .odTotalRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #e6e8f0;
  padding-top:10px;
  margin-top:8px;
}
#page-order_detail .odTotalLabel{
  font-size:13px;
  font-weight:500;
  color:#64748b;
}
#page-order_detail .odTotalValue{
  font-size:18px;
  font-weight:600;
  color:#111827;
}
/* buton içindeki ikonlar */
.odBtn .sico, .odTopBtn .sico{ width:16px; height:16px; }
.odBtnIcon .sico, .odTopBtnIcon .sico{ width:18px; height:18px; }

/* ikonlar bazı yerlerde görünmüyorsa: (çok açık renk vs) */
.odTopbar, .odCardHead, .odSideTitle { color:#0f172a; } /* örnek: koyu yazı rengi */
.odTopbar .odTopBtn{ color:inherit; }

/* icon-only button (kopyala vs) */
.odIconBtn{
  width:34px;
  height:34px;
  padding:0;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.odShipLogo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-right:8px;
}
.odShipLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
/* ===== GLOBAL ICON SYSTEM (MENU + EVERYWHERE) ===== */
.sico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  line-height:1;
  color:inherit;
}

.sico svg{
  width:100%;
  height:100%;
  display:block;
}

/* svg’lerde stroke/fill currentColor olsun */


/* bazı ikonlar fill kullanıyorsa (örn dot/circle), bunu da aç */
.sico svg [fill="currentColor"]{
  fill: currentColor;
}
/* ===== ORDER DETAIL ICON SIZES (scoped) ===== */
#page-order_detail .odBtn .sico,
#page-order_detail .odTopBtn .sico{
  width:16px;
  height:16px;
}

#page-order_detail .odBtnIcon .sico,
#page-order_detail .odTopBtnIcon .sico{
  width:18px;
  height:18px;
}
#page-order_detail .odShipLogo{
  display:inline-flex;
  width:22px;height:22px;
  align-items:center;justify-content:center;
  margin-right:8px;
  vertical-align:middle;
}
#page-order_detail .odShipLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  border-radius:6px;
}

#page-order_detail .odIconBtn{
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  padding:0;
}
#page-order_detail .odIconBtn .sico{
  width:16px;height:16px;
}
/* =========================================================
   ICON SYSTEM - SAFE MODE (stroke + fill compatible)
   Bu blok, ikonların kaybolmasını engeller.
   En sona koy.
   ========================================================= */

.sico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  line-height:1;
  color:inherit; /* ikon rengi parent'tan gelsin */
}

.sico svg{
  width:100%;
  height:100%;
  display:block;
}

/* 1) Default: stroke ikonlar için */


/* 2) Fill ile çizilen ikonları destekle:
      Eğer SVG içinde fill verilmişse currentColor'a çevir */
.sico svg [fill]:not([fill="none"]){
  fill: currentColor;
  stroke: none;
}

/* 3) Stroke'u olmayan ama fill'i de olmayan path’ler için güvenlik:
      (bazı ikon setlerinde path sadece stroke ile çizilir) */
.sico svg [stroke="none"]{
  stroke: none;
}

/* 4) Eğer ikonun hem fill hem stroke'u varsa ikisini de currentColor yap */
.sico svg [stroke]:not([stroke="none"]){
  stroke: currentColor;
}

/* 5) Bazı ikon setleri path'e style ile fill basar; onu da yakala */
.sico svg path[style*="fill:"]{
  fill: currentColor !important;
}

/* Order detail özel boyutlar (sende vardı, kalsın) */
#page-order_detail .odBtn .sico,
#page-order_detail .odTopBtn .sico{ width:16px; height:16px; }

#page-order_detail .odBtnIcon .sico,
#page-order_detail .odTopBtnIcon .sico{ width:18px; height:18px; }
/* =========================================================
   ICON SYSTEM - SAFE (stroke + fill uyumlu)
   En sona ekle. Var olan fill:none kurallarını ezer.
   ========================================================= */


/* GLOBAL ICON SYSTEM */
.sico svg *{
  stroke: currentColor;
  fill: none;
}
.sico, .ico, .caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  line-height:1;
  color: inherit;         /* ikon rengi yazıdan gelsin */
  opacity: .92;
}

.caret{ width:16px; height:16px; flex-basis:16px; opacity:.7; }

.sico svg, .ico svg, .caret svg{
  width:100%;
  height:100%;
  display:block;
}

/* Stroke ikonlar için */
.sico svg *, .ico svg *, .caret svg *{
  stroke: currentColor;
  /* fill'i asla 'none' yapma: fill ikonlar kayboluyor */
}

/* Fill ile çizilen parçalar için */
.sico svg [fill]:not([fill="none"]),
.ico  svg [fill]:not([fill="none"]),
.caret svg [fill]:not([fill="none"]){
  fill: currentColor !important;
  stroke: none !important;
}

/* Bazı ikonlarda stroke hiç yoksa yine görünür kalsın */
.sico svg path:not([fill]),
.ico  svg path:not([fill]),
.caret svg path:not([fill]){
  fill: none;
}
/* =========================================================
   ORDER DETAIL — PREMIUM POLISH (scoped)
   Only affects #page-order_detail
   ========================================================= */

#page-order_detail{
  background: #f8f9fb;
  color: #0f172a;
}

/* Topbar daha premium */
#page-order_detail .odTopbar{
  background: #0c111b;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
#page-order_detail .odTopLine1{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
#page-order_detail .odTopLine3{
  font-size: 13px;
  font-weight: 600;
  opacity: .9;
}

/* Topbar butonları */
#page-order_detail .odTopBtn{
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,.18);
}
#page-order_detail .odTopBtn:hover{ background: rgba(255,255,255,.08); }

/* Canvas spacing */
#page-order_detail .odWrap{
  padding: 18px 16px 28px;
}

/* Pills */
#page-order_detail .odPill{
  height: 34px;
  font-weight: 500;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(16,24,40,.03);
}

/* Grid ve kartlar */
#page-order_detail .odCard{
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  padding: 16px;
}
#page-order_detail .odCardTitle{
  font-size: 16px;
  font-weight: 600;
}
#page-order_detail .odCardTitleSub{
  font-weight: 600;
  opacity: .9;
}

/* Buttons */
#page-order_detail .odBtn{
  height: 38px;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 600;
  font-size: 13px;
}
#page-order_detail .odBtnLight{
  background: #fff;
  border: 1px solid #d7dbe9;
}
#page-order_detail .odBtnLight:hover{ background:#f7f8fc; }
#page-order_detail .odBtnPrimary{
  background: #5a2fe0;
  border-color: #5a2fe0;
  box-shadow: none;
}
#page-order_detail .odBtnPrimary:hover{ filter: brightness(.98); }
#page-order_detail .odBtnIcon{
  width: 44px;
  padding: 0;
}

/* Table polish */
#page-order_detail .odTableWrap{
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
#page-order_detail table.odTable thead th{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
}
#page-order_detail table.odTable tbody td{
  font-weight: 500;
  font-size: 13px;
}
#page-order_detail table.odTable tbody tr:hover td{
  background: #fafbff;
}

/* Footer rows */
#page-order_detail .odFootKey{
  font-weight: 500;
  color:#64748b;
}
#page-order_detail .odFootVal{
  font-weight: 600;
}
#page-order_detail .odFootTotal{
  font-size: 16px;
}

/* Customer boxes */
#page-order_detail .odBoxTitle{
  font-size:12px;
  font-weight:600;
  letter-spacing:.3px;
  color:#64748b;
  margin-bottom:6px;
  text-transform:uppercase;
}

#page-order_detail .odBoxText,
#page-order_detail .odBoxPre{
  font-weight: 550;
  color:#0f172a;
}

/* Side titles + KV */
#page-order_detail .odSideTitle{
  font-weight: 600;
}
#page-order_detail .odK{
  font-weight: 500;
  color:#64748b;
}
#page-order_detail .odV{
  font-weight: 600;
}

/* Note card */
#page-order_detail .odNoteCard{
  border-radius: 16px;
}
#page-order_detail .odSideText{
  font-weight: 500;
}

/* Icons in order_detail – daha net */
#page-order_detail .sico{ opacity: .95; }
#page-order_detail .odCardTitle .sico{ color:#5a2fe0; } /* başlık ikonları mor */
#page-order_detail #odPrintLabel .sico{ color:#16a34a; } /* kargo etiketi yeşil */
#page-order_detail #odPrintPacking .sico{ color:#0ea5e9; } /* pdf mavi */
/* =========================================
   ORDER DETAIL – Shipping/Total Footer (Premium)
   ========================================= */

#page-order_detail .odCardFoot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f6;
}

#page-order_detail .odFootRows{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Sol: Kargo alanı */
#page-order_detail .odShipRow{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 0;
  flex: 1 1 520px;
  min-width: 320px;
}

/* Logo büyüsün ve “badge” gibi dursun */
#page-order_detail .odShipLogo{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f6f7fb;
  border: 1px solid #e7e9f2;
  padding: 10px;
  object-fit: contain;
}

/* Kargo ismi + chip satırı */
#page-order_detail .odShipInfo{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

#page-order_detail .odShipName{
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  letter-spacing: -.2px;
}

/* Barkod satırını “chip” yap */
#page-order_detail .odShipCode{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid #e7e9f2;
  background: #fbfcff;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;
}

/* Kopyala butonu chip içinde küçük */
#page-order_detail .odShipCode .odIconBtn{
  width: 32px;
  height: 32px;
  border-radius: 5px;
  border: 1px solid #e7e9f2;
  background: #fff;
}
#page-order_detail .odShipCode .odIconBtn:hover{
  background: #f3f4f8;
}

/* Sağ: Toplam alanını “checkout box” yap */
#page-order_detail .odTotalRow{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(90,47,224,.22);
  background: rgba(90,47,224,.06);
  flex: 0 0 auto;
}

#page-order_detail .odTotalLabel{
  font-size: 12px;
  font-weight: 600;
  color: #5a2fe0;
  letter-spacing: .3px;
  text-transform: uppercase;
}

#page-order_detail .odTotalValue{
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}
/* Ürün adı ve barkodun daha okunur olması */
#page-order_detail .odProdName{ font-weight: 600; }
#page-order_detail .odProdSub{ color:#64748b; font-weight:600; }
#page-order_detail table.odTable tbody td{ vertical-align: top; }
/* =========================================
   ORDER DETAIL – SHIPPING WIDGET (like screenshot)
   ========================================= */

#page-order_detail .odShipWidget{
  padding: 26px 0 10px;
  display:flex;
  justify-content:center;
}

#page-order_detail .odShipWidgetInner{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e7e9f2;
  box-shadow: 0 10px 28px rgba(16,24,40,.06);
  max-width: 520px;
  width: 100%;
}

#page-order_detail .odShipWidgetIcon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #f6f7fb;
  border: 1px solid #e7e9f2;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex: 0 0 56px;
}

#page-order_detail .odShipLogo{
  width: 40px;
  height: 40px;
  object-fit: contain;
  display:block;
}

#page-order_detail .odShipWidgetText{
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-width: 0;
}

#page-order_detail .odShipTitle{
  font-weight: 600;
  font-size: 14px;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#page-order_detail .odShipBarcodePill{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 5px;
  background: #f7f8fd;
  border: 1px solid #e7e9f2;
  width: fit-content;
}

#page-order_detail .odShipBarcodePill .sico{
  width: 16px;
  height: 16px;
  color: #64748b;
}

#page-order_detail .odShipBarcodeVal{
  font-weight: 600;
  font-size: 13px;
  color: #334155;
  letter-spacing: .2px;
}

#page-order_detail .odShipBarcodePill .odIconBtn{
  width: 34px;
  height: 34px;
  border-radius: 5px;
  border: 1px solid #e7e9f2;
  background: #fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

#page-order_detail .odShipBarcodePill .odIconBtn:hover{
  background:#eef0f6;
}
/* =========================================================
   ORDER DETAIL BUTTONS
   ========================================================= */

#page-order_detail .odActionBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;

  height:36px;
  padding:0 14px;

  font-size:13px;
  font-weight:500;

  border-radius:10px;
  border:1px solid #e5e7ef;

  background:#fff;
  color:#344054;

  cursor:pointer;
  transition:all .15s ease;
}

#page-order_detail .odActionBtn .sico{
  width:16px;
  height:16px;
}

#page-order_detail .odActionBtn:hover{
  background:#f6f7fb;
}


/* PRIMARY BUTTON */

#page-order_detail .odActionBtnPrimary{
  border:none;
  color:#fff;

  background:linear-gradient(
    135deg,
    #6d3de4,
    #5a2fe0
  );

  box-shadow:0 4px 14px rgba(90,47,224,.25);
}

#page-order_detail .odActionBtnPrimary:hover{
  filter:brightness(1.05);
}


/* ICON BUTTON */

#page-order_detail .odActionBtnIcon{
  width:36px;
  padding:0;
  justify-content:center;
}



/* =========================================================
   PRODUCT CARD HEADER
   ========================================================= */

#page-order_detail .odCardHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}

#page-order_detail .odHeadLeft{
  display:flex;
  align-items:center;
  gap:10px;
}

#page-order_detail .odHeadIcon{
  width:32px;
  height:32px;

  border-radius:8px;
  background:#f5f6fb;

  display:flex;
  align-items:center;
  justify-content:center;
}

#page-order_detail .odHeadTitle{
  font-size:15px;
  font-weight:600;
}

#page-order_detail .odHeadSub{
  margin-left:8px;
  font-size:12px;
  color:#667085;
}



/* =========================================================
   SHIPPING CENTER (PDF STYLE)
   ========================================================= */

#page-order_detail .odShipCenter{
  margin-top:30px;
  display:flex;
  justify-content:center;
}

#page-order_detail .odShipCenterInner{
  display:flex;
  align-items:flex-start;
  gap:16px;

  padding:20px 26px;

  border-radius:14px;
  border:1px solid #e7e9f2;

  background:#fafbff;

  min-width:360px;
}

#page-order_detail .odShipBadgeIcon{
  width:44px;
  height:44px;

  border-radius:10px;

  background:#f1f3f9;

  display:flex;
  align-items:center;
  justify-content:center;
}

#page-order_detail .odShipLogo{
  width:32px;
  height:32px;
  object-fit:contain;
}

#page-order_detail .odShipBlock{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#page-order_detail .odShipLine{
  display:flex;
  gap:12px;
  font-size:13px;
  margin-top: -5px;
}

#page-order_detail .odShipK{
  width:120px;
  color:#667085;
  font-weight:500;
}

#page-order_detail .odShipV{
  font-weight:500;
  color:#111827;

  display:flex;
  align-items:center;
  gap:8px;
}



/* =========================================================
   COPY BUTTON
   ========================================================= */

#page-order_detail .odMiniIconBtn{
  width:28px;
  height:28px;

  border-radius:8px;
  border:1px solid #e5e7ef;

  background:#fff;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;
}

#page-order_detail .odMiniIconBtn:hover{
  background:#f4f5fa;
}



/* =========================================================
   ORDER SUMMARY RIGHT PANEL
   ========================================================= */

#page-order_detail .odKV{
  display:flex;
  justify-content:space-between;
  align-items:center;

  font-size:13px;
  padding:6px 0;
}

#page-order_detail .odKVTotal{
  font-weight:600;
  font-size:15px;
}

#page-order_detail .odSep{
  height:1px;
  background:#e7e9f2;
  margin:10px 0;
}
/* ===== ORDER DETAIL - PDF shipping layout (uses odCardFoot ids) ===== */
#page-order_detail .odCardFoot{
  margin-top: 18px;
}

/* bloğu ortala ama içerik sol hizalı */
#page-order_detail .odCardFoot .odFootRows{
  display:flex;
  flex-direction:column;
  gap: 10px;

  /* ortada konum */
  width: min(560px, 100%);
  margin: 18px auto 0;

  /* sol hizalı his */
  align-items: stretch;
}

/* her satır PDF kutusu gibi */
#page-order_detail .odCardFoot .odFootRow{
  display:grid;
  grid-template-columns: 165px 1fr;
  align-items:center;
  gap: 12px;

  background:#f7f8fd;
  border:1px solid #e7e9f2;
  border-radius:14px;
  padding: 14px 16px;

  box-shadow: 0 10px 22px rgba(16,24,40,.05);
}

#page-order_detail .odCardFoot .odFootKey{
  color:#667085;
  font-weight:500;
  font-size:13px;
}

#page-order_detail .odCardFoot .odFootVal{
  color:#111827;
  font-weight:600;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

#page-order_detail #odShipInfo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

#page-order_detail #odShipInfo img {
   width: 70px;
}
#page-order_detail #odCopyShipBarcode{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid #e5e7ef;
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
#page-order_detail #odCopyShipBarcode:hover{
  background:#f2f4f8;
}

/* Toplam satırı daha güçlü */
#page-order_detail .odCardFoot .odFootRow:last-child{
  background:#fff;
  border-color:#dfe3f0;
}
#page-order_detail #odTotal{
  font-size:15px;
  font-weight:500;
}

@media (max-width:520px){
  #page-order_detail .odCardFoot .odFootRow{
    grid-template-columns: 120px 1fr;
    padding: 12px 12px;
    border-radius: 12px;
  }
}/* ===== SIMPLE SHIPPING (PDF style) ===== */

.odShipSimple{
  display:flex;
  align-items:flex-start;
  gap:14px;

  margin-top:18px;
  padding-left:6px;
}

.odShipLogo{
  width:32px;
  height:32px;
  object-fit:contain;
}

.odShipText{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.odShipLine{
  font-size:13px;
  color:#111;
}

.odShipLabel{
  font-weight:500;
  margin-right:6px;
  color: #adadad;
}

.odCopyBtn{
  border:none;
  background:none;
  cursor:pointer;
  margin-left:6px;
  opacity:.6;
}

.odCopyBtn:hover{
  opacity:1;
}
.odShipSimple{
display:flex;
align-items:flex-start;
gap:12px;
margin-top:18px;
}

/* LOGO */
.odShipLogo{
width:34px;
height:34px;
object-fit:contain;
flex-shrink:0;   /* LOGO KAYBOLMASIN */
}

/* TEXT BLOK */
.odShipText{
display:flex;
flex-direction:column;
gap:4px;
}

/* SATIR */
.odShipLine{
display:flex;
align-items:center;
flex-wrap:wrap;  /* uzun yazı taşmasın */
font-size:13px;
}



/* uzun kargo adı düzgün kırılır */
#odShipInfo{
word-break:break-word;
}
.erFilterTools{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.erFilterTools .searchInput{
  display:flex;
  align-items:center;
  gap:8px;
      height: 38px;
    min-width: 280px;
    flex: 0 0 auto;
    padding: 0 12px;
}

#page-orders_all .card.tableWrap,
#page-orders_ikas .card.tableWrap,
#page-orders_ticimax .card.tableWrap{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 230px);
}

#page-orders_all .card.tableWrap > .tableWrap,
#page-orders_ikas .card.tableWrap > .tableWrap,
#page-orders_ticimax .card.tableWrap > .tableWrap{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}

.erFilterPop[hidden]{ display:none!important; }

.erFilterPop{
  position:fixed;
  inset:0;
  z-index:9999;
}

.erFilterBack{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.18);
}

.erFilterPanel{
    position: absolute;
    top: 130px;
    left: 32%;
    transform: translateX(-50%);
    width: min(600px, calc(100vw - 32px));
    background: #fff;
    border: 1px solid #ece8f8;
    border-radius: 10px;
    box-shadow: 0 20px 70px rgba(16, 24, 40, .12);
    overflow: hidden;
}



.erFilterTop,
.erFilterBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
}

.erFilterTop{
  border-bottom:1px solid #f0edf8;
}

.erFilterBody{
  padding:16px 18px 14px;
}

.erFilterTitle{
  font-weight:950;
  font-size:18px;
}

.erFilterIconBtn{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:18px;
  opacity:.7;
}

.erFilterRows{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.erFilterRow{
  display:grid;
  grid-template-columns:220px 180px 1fr 48px;
  gap:10px;
  align-items:center;
}

.erFilterControl{
  height:42px;
  border:1px solid #e8e8ef;
  border-radius:10px;
  padding:0 12px;
  font:inherit;
  background:#fff;
}
select.erFilterControl{
  padding-right:36px;
  min-height:42px;
}

.erFilterControl:focus{
  outline:none;
  border-color:#bca8ff;
  box-shadow:0 0 0 4px rgba(124,58,237,.10);
}

.erFilterAdd{
  margin-top:14px;
  border:none;
  background:transparent;
  color:#7c3aed;
  font-weight:600;
  cursor:pointer;
}

.erFilterRemove{
  width:42px;
  height:42px;
  border:1px solid #ece8f8;
  border-radius:10px;
  background:#fff;
  cursor:pointer;
  font-size:18px;
}

@media (max-width: 900px){
  .erFilterRow{
    grid-template-columns:1fr;
  }

  .erFilterPanel{
    top:88px;
    width:min(100vw - 16px, 980px);
  }
}
/* =========================================
   APP STORE - ERONTA PANEL UYUM PATCH
   ========================================= */

#page-app_store .pageTop{
  margin-bottom: 12px;
}

#page-app_store .storeWrapPro{
  overflow: hidden;
  border-radius: 16px;
}

#page-app_store .storeToolsPro{
  padding: 14px 16px;
  background: linear-gradient(180deg,#ffffff,#fcfdff);
}

#page-app_store .storeToolsRight{
  display:flex;
  align-items:center;
  gap:10px;
}

#page-app_store .storeTabsWrap{
  padding: 0 16px 14px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

#page-app_store .storeTabs{
  margin-bottom: 0 !important;
}

#page-app_store .storeSectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600 !important;
}

#page-app_store .storeGrid{
  padding: 16px;
  gap: 14px;
}

#page-app_store .appCardPro{
  min-height: 196px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 22px rgba(15,23,42,.05);
}

#page-app_store .appCardPro:hover{
  transform: translateY(-2px);
  border-color: rgba(109,61,228,.18);
  box-shadow: 0 14px 30px rgba(15,23,42,.08);
}

#page-app_store .appTop{
  align-items: center;
}

#page-app_store .appHeadMeta{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#page-app_store .appName{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600 !important;
  color: #0f172a;
}

#page-app_store .appMini{
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}

#page-app_store .appDesc{
  margin-top: 12px;
  min-height: 54px;
  line-height: 1.45;
  font-size: 12.8px;
  color: var(--muted);
  font-weight: 400 !important;
}

#page-app_store .appBottom{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(15,23,42,.05);
}

#page-app_store .appBtn{
  min-width: 118px;
  justify-content: center;
  box-shadow: none !important;
}

#page-app_store .appLink{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#page-app_store .appLogoImg{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  padding: 7px;
  flex: 0 0 46px;
}

#page-app_store .appLogoGhost{
  display:grid;
  place-items:center;
  font-weight: 500;
  color: var(--muted);
  background: #f8fafc;
}

#page-app_store .appCardGhost{
  opacity: .72;
  border-style: dashed;
}

#page-app_store .statusPill{
  flex: 0 0 auto;
}

#page-app_store .storeSearch{
  min-width: 360px;
  height: 42px;
  padding: 0 12px;
  box-shadow: none;
}

#page-app_store .storeSearch input{
  font-size: 13.5px;
}

#page-app_store .storeTab{
  min-height: 38px;
  font-weight: 500 !important;
}

#page-app_store .btnLight{
  min-height: 40px;
  padding: 0 14px;
  box-shadow: none;
}

@media (max-width: 1180px){
  #page-app_store .storeGrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 760px){
  #page-app_store .storeGrid{
    grid-template-columns: 1fr;
  }

  #page-app_store .storeSearch{
    min-width: 100%;
  }

  #page-app_store .storeToolsPro{
    align-items: stretch;
  }

  #page-app_store .storeToolsRight{
    width: 100%;
    justify-content: flex-end;
  }

  #page-app_store .appBottom{
    flex-direction: column;
    align-items: stretch;
  }

  #page-app_store .appBtn{
    width: 100%;
  }

  #page-app_store .statusPill{
    justify-content: center;
  }
}/* =========================================
   APP SETUP + XML IMPORT PANEL PATCH
   ========================================= */

.setupShell{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.setupHero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
}

.setupHeroLeft{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.setupHeroLogoWrap{
  width:56px;
  height:56px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  display:grid;
  place-items:center;
  flex:0 0 56px;
}

.setupHeroLogo{
  width:34px;
  height:34px;
  object-fit:contain;
}

.setupHeroMeta{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.setupHeroTitle{
  font-size:18px;
  line-height:1.15;
  font-weight:600 !important;
  color:#0f172a;
}

.setupHeroSub{
  font-size:13px;
  color:var(--muted);
  font-weight:400 !important;
}

.setupHeroBadges{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
  flex-wrap:wrap;
}

.setupHeroActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.setupTabsBar{
  padding:0 16px;
}

.setupBodyArea{
  min-height:120px;
}

.setupPanelGrid{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) 360px;
  gap:12px;
}

.setupMainCol,
.setupSideCol{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.setupSticky{
  position:sticky;
  top:76px;
}

.setupCard{
  padding:16px;
}

.setupCardHead{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:14px;
}

.setupCardTitle{
  font-size:14px;
  color:#0f172a;
  font-weight:600 !important;
}

.setupCardSub{
  font-size:12.5px;
  color:var(--muted);
  font-weight:400 !important;
}

.setupFormGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.setupField{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.setupFieldFull{
  grid-column:1 / -1;
}

.setupField > label{
  font-size:12.5px;
  color:#334155;
  font-weight:500 !important;
}

.setupHint{
  font-size:12px;
  color:var(--muted);
}

.setupActionRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.setupChecks{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.setupCheck{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid rgba(15,23,42,.06);
  background:#fff;
  border-radius:12px;
  padding:12px;
}

.setupCheck input{
  margin-top:2px;
}

.setupCheckTitle{
  font-size:13px;
  color:#0f172a;
  font-weight:500 !important;
}

.setupCheckSub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.setupPrimaryActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.setupStatusText{
  font-size:12.8px;
  color:var(--muted);
  line-height:1.5;
}

.setupPreviewBox{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  background:rgba(15,23,42,.025);
  border:1px solid rgba(15,23,42,.06);
  border-radius:12px;
  padding:12px;
  max-height:320px;
  overflow:auto;
}

.setupAttrRows{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#xmlimport_dragdrop{
  min-width:0;
}

#xmlimport_dragdrop .card{
  box-shadow:none !important;
}

#xmlimport_dragdrop .xml-drag-item{
  transition:all .16s ease;
}

#xmlimport_dragdrop .xml-drag-item:hover{
  transform:translateY(-1px);
  border-color:rgba(109,61,228,.18) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.06);
}

#xmlimport_dragdrop .xml-drop-target,
#xmlimport_dragdrop .xml-drop-target-attrs{
  transition:all .16s ease;
}

#xmlimport_dragdrop .xml-drop-target .btnLight,
#xmlimport_dragdrop .xml-drop-target-attrs .btnLight{
  min-height:34px;
  padding:0 10px;
  font-size:12px;
}

#xmlimport_dragdrop [id="xml_drag_items"],
#xmlimport_dragdrop [id="xml_drop_targets"]{
  scrollbar-width:thin;
}

@media (max-width: 1180px){
  .setupPanelGrid{
    grid-template-columns:1fr;
  }

  .setupSticky{
    position:static;
    top:auto;
  }
}

@media (max-width: 760px){
  .setupHero{
    flex-direction:column;
    align-items:stretch;
  }

  .setupHeroActions{
    width:100%;
    justify-content:flex-start;
  }

  .setupFormGrid{
    grid-template-columns:1fr;
  }

  .setupTabsBar{
    padding:0 12px;
  }

  .setupCard{
    padding:14px;
  }

  .setupActionRow{
    flex-direction:column;
    align-items:stretch;
  }

  .setupPrimaryActions{
    width:100%;
  }

  #xmlimport_dragdrop > div{
    grid-template-columns:1fr !important;
  }
}/* =========================================
   SETUP FORM INPUT / SELECT PATCH
   ========================================= */

.setupCard .in,
.setupCard input.in,
.setupCard select.in,
.setupCard textarea.in{
  width:100%;
  min-height:44px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:0 14px;
  font-size:13px;
  color:#0f172a;
  outline:none;
  box-shadow:none;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.setupCard textarea.in{
  min-height:110px;
  padding:12px 14px;
  resize:vertical;
}

.setupCard select.in{
  padding-right:40px;
}

.setupCard .in:focus,
.setupCard input.in:focus,
.setupCard select.in:focus,
.setupCard textarea.in:focus{
  border-color:rgba(109,61,228,.45);
  box-shadow:0 0 0 4px rgba(109,61,228,.08);
  background:#fff;
}

.setupCard .in::placeholder{
  color:#94a3b8;
}

.setupFormGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.setupField{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.setupFieldFull{
  grid-column:1 / -1;
}

.setupField > label{
  font-size:12.5px;
  color:#334155;
  font-weight:600;
}

.setupHint{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.setupActionRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.setupPrimaryActions{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.setupChecks{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.setupCheck{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid rgba(15,23,42,.06);
  background:#fff;
  border-radius:12px;
  padding:12px;
}

.setupCheck input[type="checkbox"]{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:#6d3de4;
}

.setupCheckTitle{
  font-size:13px;
  color:#0f172a;
  font-weight:600;
}

.setupCheckSub{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.45;
}

.setupStatusText{
  font-size:12.8px;
  color:var(--muted);
  line-height:1.55;
}

.setupPreviewBox{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  background:rgba(15,23,42,.025);
  border:1px solid rgba(15,23,42,.06);
  border-radius:12px;
  padding:12px;
  max-height:320px;
  overflow:auto;
}

@media (max-width: 760px){
  .setupFormGrid{
    grid-template-columns:1fr;
  }

  .setupActionRow{
    flex-direction:column;
    align-items:stretch;
  }

  .setupPrimaryActions{
    width:100%;
  }
}

/* =========================================================
   ORDERS SKELETON
   ========================================================= */
:root{
  --sk-base:#eef2f6;
  --sk-hi:#ffffff;
  --sk-br:10px;
}

.sk{
  position:relative;
  overflow:hidden;
  background:var(--sk-base);
  border-radius:var(--sk-br);
}

.sk::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,0) 100%
  );
  animation:skShimmer 1.15s infinite;
}

@keyframes skShimmer{
  100%{ transform:translateX(100%); }
}

.sk-line{ height:12px; }
.sk-line.sm{ height:10px; }
.sk-line.lg{ height:16px; }

.sk-w20{ width:20%; }
.sk-w25{ width:25%; }
.sk-w30{ width:30%; }
.sk-w35{ width:35%; }
.sk-w40{ width:40%; }
.sk-w50{ width:50%; }
.sk-w60{ width:60%; }
.sk-w70{ width:70%; }
.sk-w80{ width:80%; }
.sk-w90{ width:90%; }
.sk-w100{ width:100%; }

.sk-circle{
  width:30px;
  height:30px;
  border-radius: 999px;
}

.sk-thumb{
  width:44px;
  height:44px;
  border-radius:12px;
}

.sk-pill{
  width:84px;
  height:24px;
  border-radius: 999px;
  display:inline-block;
}

.sk-btn{
  width:130px;
  height:36px;
  border-radius:10px;
}

.sk-btn.sm{
  width:36px;
}

.sk-stack{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sk-row-flex{
  display:flex;
  align-items:center;
  gap:12px;
}

.sk-inline{
  display:inline-block;
  vertical-align:middle;
}

#ordersTbodyAll,
#ordersTbodyIkas,
#ordersTbodyTicimax,
#odItems{
  transition:opacity .18s ease;
}
#page-order_detail{
  --od-sk:#eef2f6;
}

#page-order_detail .sk-pill{
  width:84px;
  height:24px;
  border-radius: 999px;
  display:inline-block;
}

#page-order_detail .sk-btn{
  width:132px;
  height:36px;
  border-radius:10px;
  display:inline-block;
}

#page-order_detail .sk-btn.sm{
  width:36px;
}

#page-order_detail .sk-thumb{
  width:52px;
  height:52px;
  border-radius:12px;
}

#page-order_detail .sk-boxline{
  display:flex;
  flex-direction:column;
  gap:8px;
}

#odItems,
#odCustomer,
#odCustomerHint,
#odAddress,
#odInvoiceAddress,
#odCustomerNote,
#odSubTotal,
#odTax,
#odGrandTotal,
#odShipInfo,
#odShipBarcode,
#odTopLine1,
#odTopLine3{
  transition:opacity .18s ease;
}
/* PRODUCTS SKELETON */
#productsTbody{
  transition: opacity .18s ease;
}

.sk-check{
  width:16px;
  height:16px;
  border-radius:4px;
}

.sk-thumb-sm{
  width:44px;
  height:44px;
  border-radius:10px;
}

.sk-pill-sm{
  width:86px;
  height:26px;
  border-radius: 999px;
  display:inline-block;
}
.prTopbar{
  position: sticky;
  top: 0;
  z-index: 30;
  background: #fff;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.prTopbarIn{
  max-width: 1550px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.prTopLeft{
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.odTopMeta{
  display: flex;
  align-items: center;
  gap: 8px;
}

.odTopBadge{
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #e7e9f2;
  background: #fff;
  font-weight: 600;
  font-size: 12px;
  color: #111827;
  white-space: nowrap;
}

.odTopBadge.st-created{color:#68cc93;background:rgb(240,253,245);border-color:rgb(166,244,197)}
.odTopBadge.st-ready{color:#529ac3;background:rgb(242,249,254);border-color:#529ac3}
.odTopBadge.st-shipped{color:rgb(90,68,213);background:rgb(247,245,255);border-color:rgb(213,205,255)}
.odTopBadge.st-delivered{color:rgb(75,85,101);background:rgb(248,250,252);border-color:rgb(227,232,239)}
.odTopBadge.st-cancel{color:rgb(219,48,59);background:rgb(255,245,246);border-color:rgb(254,205,202)}
.odTopBadge.st-refund-request{color:rgb(247,144,9);background:rgb(254,248,240);border-color:rgb(253,222,181)}
.odTopBadge.st-refunded{color:rgb(192,75,151);background:rgb(253,242,250);border-color:rgb(244,196,227)}

.odTopBadgePay{
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
  color: #166534;
}

.odTopSep{
  color: #cbd5e1;
  font-size: 12px;
  user-select: none;
}

.odTopDate{
  font-size: 12px;
  font-weight: 500;
  color: #667085;
  white-space: nowrap;
}

.prTopLine1{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #0f172a;
}

.prTopLine2{
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: #667085;
}

.prTopRight{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.prTopBtn{
  height: 34px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.82);
  color: #334155;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: .18s ease;
  display: flex;
    gap: 10px;
    align-items: center;
}

.prTopBtn:hover{
  background: #fff;
  border-color: rgba(15,23,42,.14);
  color: #0f172a;
}

.prTopBtnIcon{
  width: 34px;
  padding: 0;
}

.prTopBtnPrimary{
  background: rgb(111, 85, 255);
  color: #fff;
  border-color: rgb(111, 85, 255);
}

.prTopBtnPrimary:hover{
  background: rgb(95, 70, 230);
  border-color: rgb(95, 70, 230);
  color: #fff;
}

.prCanvas{
  padding: 22px 10px 28px;
  background: #f8fafc;
}

.prWrap{
  max-width: 1550px;
  margin: 0 auto;
}

.prPills{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}

.prPillBtn{
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.78);
  color: #344054;
  font-size: 12px;
  font-weight: 500;
}

.prDot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.prCount{
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid rgba(15,23,42,.06);
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
}

.prGrid{
  display: grid;
  grid-template-columns: minmax(0,1fr) 290px;
  gap: 18px;
  align-items: start;
}

.prMain,
.prSide{
  min-width: 0;
}

.prCard{
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  padding: 18px;
  margin-bottom: 16px;
}

.prCardHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.prHeadLeft{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.prHeadIcon{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex: 0 0 auto;
}

.prHeadTitle{
  font-size: 14px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #0f172a;
}

.prHeadSub{
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  color: #667085;
}

.prInfoGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.prBox{
  background: #fff;
  border: 1px solid rgba(15,23,42,.05);
  border-radius: 8px;
  padding: 14px;
  min-width: 0;
}

.prSpan2{ grid-column: span 2; }
.prSpan3{ grid-column: span 3; }

.prBoxTitle{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #98a2b3;
}

.prBoxTitle .sico{
  opacity: .72;
  transform: scale(.92);
}

.prBoxText{
  font-size: 14px;
  line-height: 1.55;
  font-weight: 500;
  color: #101828;
  letter-spacing: -.01em;
  word-break: break-word;
}

.prBoxPre{
  font-size: 13px;
  line-height: 1.72;
  font-weight: 500;
  color: #344054;
  white-space: pre-wrap;
  word-break: break-word;
}

.prTableWrap{
  overflow: auto;
}

.prTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.prTable thead th{
  text-align: left;
  padding: 10px 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.06);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #98a2b3;
  white-space: nowrap;
}

.prTable tbody td{
  padding: 5px 10px;
  border-bottom: 1px solid rgba(15,23,42,.04);
  color: #344054;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 500;
  vertical-align: middle;
}

.prTable tbody tr:last-child td{
  border-bottom: none;
}

.prMedia{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(110px,1fr));
  gap: 10px;
}

.prMedia .mItem,
.prMedia .mAdd{
  min-height: 110px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.06);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.prMedia .mItem:hover,
.prMedia .mAdd:hover{
  transform: translateY(-1px);
  border-color: rgba(15,23,42,.1);
  box-shadow: 0 8px 20px rgba(15,23,42,.05);
}

.prSide .prCard{
  position: sticky;
  top: 84px;
}

.prSideTitle{
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
}

.prSideRow{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.prSideStrong{
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
  color: #101828;
  word-break: break-word;
}

.prKV{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.prK{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 500;
}

.prV{
  color: #111827;
  font-size: 12px;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

.prSep{
  height: 1px;
  background: rgba(15,23,42,.05);
  margin: 12px 0;
}

.prMuted{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 500;
}

#page-product_detail .sk{
  background: #eef2f6;
}

#page-product_detail .sk-line{
  height: 10px;
}

#page-product_detail .sk-pill{
  width: 78px;
  height: 22px;
  border-radius: 999px;
}

@media (max-width: 1100px){
  .prGrid{
    grid-template-columns: 1fr;
  }

  .prSide .prCard{
    position: static;
  }
}

@media (max-width: 768px){
  .prTopbarIn{
    flex-direction: column;
    align-items: flex-start;
  }

  .prInfoGrid{
    grid-template-columns: 1fr;
  }

  .prSpan2,
  .prSpan3{
    grid-column: auto;
  }
}

#page-product_detail .sk{
  background: #eef2f6;
}

#page-product_detail .sk-line{
  height: 11px;
}

#page-product_detail .sk-pill{
  width: 78px;
  height: 22px;
  border-radius: 999px;
}
#page-product_detail .sico{
  color: #6b7280;
}

#page-product_detail .prHeadIcon .sico,
#page-product_detail .prBoxTitle .sico{
  color: #6b7280;
}
/* (duplicate block 2 removed – canonical styles in final block) */

#page-orders_all #ordersInfoAll{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 500;
}

#page-orders_all .prListTools{
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-orders_all .searchInput{
  height: 38px;
  min-width: 280px;
  flex: 0 0 auto;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page-orders_all .searchInput input{
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 13px;
  color: #0f172a;
}

#page-orders_all .searchInput .sico,
#page-orders_all .prHeadIcon .sico{
  color: rgb(111, 85, 255);
}

#page-orders_all .btnLight{
  height: 38px;
  padding: 0 14px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
}

#page-orders_all .btnLight:hover{
  background: #f8fafc;
}

#page-orders_all .pager{
  display: flex;
  align-items: center;
  gap: 6px;
}

#page-orders_all .pageBtn{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: .18s ease;
}

#page-orders_all .pageBtn:hover{
  background: #f8fafc;
}

#page-orders_all .pageBtn.active{
  background: rgb(111, 85, 255);
  color: #fff;
  border-color: rgb(111, 85, 255);
}

#page-products_all #productsInfo{
  color: #98a2b3;
  font-size: 12px;
  font-weight: 500;
}

#page-products_all .prListTools{
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-products_all .searchInput{
  height: 38px;
  min-width: 280px;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page-products_all .searchInput input{
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 13px;
  color: #0f172a;
}

#page-products_all .searchInput .sico,
#page-products_all .prHeadIcon .sico{
  color: rgb(111, 85, 255);
}

#page-products_all .btnLight{
  height: 38px;
  padding: 0 14px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
}

#page-products_all .btnLight:hover{
  background: #f8fafc;
}

#page-products_all .pager{
  display: flex;
  align-items: center;
  gap: 6px;
}

#page-products_all .pageBtn{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: .18s ease;
}

#page-products_all .pageBtn:hover{
  background: #f8fafc;
}

#page-products_all .pageBtn.active{
  background: rgb(111, 85, 255);
  color: #fff;
  border-color: rgb(111, 85, 255);
}

#page-products_all .prTabsRow{
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

#page-products_all .prTabsRow .tabLink{
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  border-radius: 10px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: all .15s;
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}

#page-products_all .prTabsRow .tabLink:hover{
  color: var(--primary, #6d3de4);
  background: rgba(109,61,228,.06);
}

#page-products_all .prTabsRow .tabLink.active{
  color: var(--primary, #6d3de4);
  font-weight: 600;
  background: transparent;
  border: none;
}

#page-products_all .prTabsRow .tabLink.active:after{
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2.5px;
  border-radius: 3px;
  background: var(--primary, #6d3de4);
}

#page-products_all .prTopbar{
  position: sticky;
  top: 0;
  z-index: 40;
}

#page-products_all .prPills{
  position: sticky;
  top: 66px;
  z-index: 31;
  background: linear-gradient(180deg, rgba(248,250,252,.96) 0%, rgba(248,250,252,.9) 100%);
  backdrop-filter: blur(10px);
  padding: 5px 0 8px;
  margin-bottom: 14px;
}



#page-products_all .prCard{
  overflow: visible;
}
#page-products_all .prTableWrap{
  overflow: auto;
}

#page-orders_all #ordersInfoAll,
#page-orders_ikas #ordersInfoIkas,
#page-orders_ticimax #ordersInfoTicimax{
  color: #7c8a9a;
  font-size: 12px;
  font-weight: 500;
}

#page-orders_all .prListTools,
#page-orders_ikas .prListTools,
#page-orders_ticimax .prListTools{
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#page-orders_all .searchInput,
#page-orders_ikas .searchInput,
#page-orders_ticimax .searchInput{
  height: 38px;
  min-width: 280px;
  flex: 0 0 auto;
  padding: 0 12px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.9);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#page-orders_all .searchInput input,
#page-orders_ikas .searchInput input,
#page-orders_ticimax .searchInput input{
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 13px;
  color: #0f172a;
}

#page-orders_all .searchInput .sico,
#page-orders_all .prHeadIcon .sico,
#page-orders_ikas .searchInput .sico,
#page-orders_ikas .prHeadIcon .sico,
#page-orders_ticimax .searchInput .sico,
#page-orders_ticimax .prHeadIcon .sico{
  color: rgb(111, 85, 255);
}

#page-orders_all .btnLight,
#page-orders_ikas .btnLight,
#page-orders_ticimax .btnLight{
  height: 38px;
  padding: 0 14px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
}

#page-orders_all .btnLight:hover,
#page-orders_ikas .btnLight:hover,
#page-orders_ticimax .btnLight:hover{
  background: #f8fafc;
}

#page-orders_all .pager,
#page-orders_ikas .pager,
#page-orders_ticimax .pager{
  display: flex;
  align-items: center;
  gap: 6px;
}

#page-orders_all .pageBtn,
#page-orders_ikas .pageBtn,
#page-orders_ticimax .pageBtn{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: .18s ease;
}

#page-orders_all .pageBtn:hover,
#page-orders_ikas .pageBtn:hover,
#page-orders_ticimax .pageBtn:hover{
  background: #f8fafc;
}

#page-orders_all .pageBtn.active,
#page-orders_ikas .pageBtn.active,
#page-orders_ticimax .pageBtn.active{
  background: rgb(111, 85, 255);
  color: #fff;
  border-color: rgb(111, 85, 255);
}


.ordChannelLogo img{
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  border-radius: 7px;
}

#page-orders_all .prTable tbody td:last-child,
#page-orders_ikas .prTable tbody td:last-child,
#page-orders_ticimax .prTable tbody td:last-child{
  text-align: center;
}


.prdMarketLogo img{
      width: 25px;
    height: 25px;
    object-fit: contain;
    display: block;
    border-radius: 4px;
}

#page-products_all .prTable tbody td:nth-child(4){
      text-align: center;
    display: flex;
    gap: 3px;
}
.navlogoWrap{
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.navlogoImg{
  width: 15px;
  height: 15px;
  object-fit: contain;
  display: block;
}
.navlogoWrap{
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
}

.navlogoImg{
  width: 15px;
  height: 15px;
  object-fit: contain;
  display: block;
  border-radius: 4px;
}
/* (duplicate block 1 removed – canonical styles below) */
#page-order_detail .prHeadIcon .sico,
#page-order_detail .prBoxTitle .sico,
#page-order_detail .prSideTitle .sico,
#page-order_detail .odInlinePanelTitle .sico{
  color: rgb(111, 85, 255);
}

#page-order_detail .odPill{
  display:inline-flex;
  align-items:center;
  height:30px;
  padding:0 12px;
  border-radius: 5px;
  border:1px solid rgba(15,23,42,.06);
  background:rgba(255,255,255,.78);
  color:#344054;
  font-size:12px;
  font-weight:500;
}

#page-order_detail .odPillGreen{
  background:rgba(34,197,94,.08);
  color:#15803d;
  border-color:rgba(34,197,94,.14);
}

#page-order_detail .odInlinePanel{
  margin-top:14px;
  padding:14px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
}

#page-order_detail .odInlinePanelTitle{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  font-size:13px;
  font-weight:600;
  color:#0f172a;
}

#page-order_detail .odInlinePanelBody{
  display:flex;
  flex-direction:column;
  gap:10px;
}

#page-order_detail .odKvStart{
  justify-content:flex-start;
  gap:10px;
}

#page-order_detail .odLeftValue{
  text-align:left;
}

#page-order_detail .odChannelRow{
  display:flex;
  align-items:center;
  gap:10px;
}

#page-order_detail #odSummaryChannelLogo{
  width:28px;
  height:28px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid #e5e7eb;
  background:#fff;
}

#page-order_detail .odTotalRow .prK,
#page-order_detail .odTotalRow .prV{
  font-weight:600;
  color:#101828;
}

#page-order_detail #odShipInfo img{
  width:18px;
  height:18px;
  object-fit:contain;
  margin-right:6px;
  vertical-align:-4px;
}
#page-order_detail .prHeadIcon .sico,
#page-order_detail .prBoxTitle .sico,
#page-order_detail .prSideTitle .sico,
#page-order_detail .odInlinePanelTitle .sico,
#page-order_detail .odHeroIcon .sico,
#page-order_detail .odMetaChip .sico{
  color: #6b7280;
}

#page-order_detail .odHeroHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

#page-order_detail .odHeroLeft{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

#page-order_detail .odHeroIcon{
  width:42px;
  height:42px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  background: #f3f4f6;
  border:1px solid #e5e7eb;
}

#page-order_detail .odHeroTitle{
  font-size:16px;
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.02em;
  color:#111827;
}

#page-order_detail .odHeroSub{
  margin-top:4px;
  font-size:12px;
  line-height:1.5;
  color:#6b7280;
  font-weight:500;
}

#page-order_detail .odHeroMeta{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

#page-order_detail .odMetaChip{
  height:30px;
  padding:0 10px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#f9fafb;
  border:1px solid #e5e7eb;
  color:#374151;
  font-size:12px;
  font-weight:500;
}

#page-order_detail .odHeroActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

#page-order_detail .odHeroStrip{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

#page-order_detail .odHeroStripItem{
  padding:12px 14px;
  border-radius:10px;
  background:#fff;
  border:1px solid #e5e7eb;
}

#page-order_detail .odHeroStripLabel{
  font-size:11px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#9ca3af;
  margin-bottom:6px;
}

#page-order_detail .odHeroStripValue{
  font-size:14px;
  font-weight:600;
  color:#111827;
  line-height:1.4;
}

#page-order_detail .odKvStart{
  justify-content:flex-start;
  gap:10px;
}

#page-order_detail .odLeftValue{
  text-align:left;
}

#page-order_detail .odChannelRow{
  display:flex;
  align-items:center;
  gap:10px;
}

#page-order_detail #odSummaryChannelLogo{
  width:28px;
  height:28px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid rgba(15,23,42,.06);
  background:#fff;
}

#page-order_detail .odTotalRow .prK,
#page-order_detail .odTotalRow .prV{
  font-weight:600;
  color:#101828;
}

#page-order_detail #odShipInfo img{
  width:18px;
  height:18px;
  object-fit:contain;
  margin-right:6px;
  vertical-align:-4px;
}

@media (max-width: 900px){
  #page-order_detail .odHeroHead{
    flex-direction:column;
  }

  #page-order_detail .odHeroStrip{
    grid-template-columns:1fr;
  }
}


/* ============ PRICE LISTS MODULE ============ */

/* Modal overlay */
.plModal{
  position:fixed;
  inset:0;
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:plFadeIn .15s ease;
}

@keyframes plFadeIn{
  from{opacity:0}
  to{opacity:1}
}

.plModalBack{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(4px);
}

.plModalBox{
  position:relative;
  background:var(--card);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  width:100%;
  max-width:480px;
  max-height:90vh;
  overflow-y:auto;
  animation:plSlideUp .2s ease;
}

.plModalWide{
  max-width:720px;
}

@keyframes plSlideUp{
  from{transform:translateY(20px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.plModalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 0;
}

.plModalTitle{
  font-size:17px;
  font-weight:500;
  color:var(--text);
}

.plModalClose{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
  color:var(--muted);
  padding:4px;
  border-radius:8px;
  line-height:1;
}

.plModalClose:hover{
  background:rgba(0,0,0,.06);
}

.plModalBody{
  padding:20px 24px;
}

.plModalFoot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 24px 20px;
}

/* Form elements */
.plFormGroup{
  margin-bottom:16px;
}

.plLabel{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}

.plInput{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--r2);
  font-size:14px;
  font-family:inherit;
  background:var(--card);
  color:var(--text);
  transition:border-color .15s, box-shadow .15s;
  box-sizing:border-box;
}

.plInput:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--focus);
}

.plInput:disabled{
  background:#f8fafc;
  color:var(--muted);
}

.plSelect{
  padding-right:36px;
}

/* Choice cards */
.plChoiceGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.plChoiceCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:24px 16px;
  border:1.5px solid var(--line);
  border-radius:var(--r2);
  background:var(--card);
  cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
  text-align:center;
}

.plChoiceCard:hover{
  border-color:var(--primary);
  box-shadow:var(--focus);
}

.plChoiceIcon{
  width:48px;
  height:48px;
  border-radius:10px;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
}

.plChoiceIcon .sico{
  width:22px;
  height:22px;
}

.plChoiceLabel{
  font-size:14px;
  font-weight:500;
  color:var(--text);
}

.plChoiceSub{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

/* Price input in detail table */
.plPriceInput{
  width:100%;
  max-width:120px;
  padding:7px 10px;
  border:1.5px solid var(--line);
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  font-family:inherit;
  background:var(--card);
  color:var(--text);
  text-align:right;
  transition:border-color .15s, box-shadow .15s;
}

.plPriceInput:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:var(--focus);
}

.plPriceInput::-webkit-inner-spin-button,
.plPriceInput::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.plPriceInput{
  -moz-appearance:textfield;
}

/* Delete item button */
.plDeleteItemBtn{
  border:none;
  background:none;
  color:var(--muted);
  cursor:pointer;
  font-size:14px;
  padding:4px 8px;
  border-radius:6px;
  transition:color .15s, background .15s;
}

.plDeleteItemBtn:hover{
  color:var(--bad);
  background:rgba(239,68,68,.08);
}

/* Danger button (topbar) */
.prTopBtnDanger{
  background:#fef2f2;
  color:#dc2626;
  border:1.5px solid #fecaca;
  font-weight:600;
}

.prTopBtnDanger:hover{
  background:#fee2e2;
  border-color:#f87171;
}

/* Price list row hover */
tr.plRow:hover{
  background:rgba(109,61,228,.04);
}

tr.pldItemRow:hover{
  background:#f8fafc;
}

/* prHeadRight for button alignment */
.prHeadRight{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

#page-price_list_detail .prCardHead{
  align-items:flex-start;
  flex-wrap:wrap;
}

/* ========================= SAVED FILTER TABS ========================= */

#productsSavedTabs,
#ordersSavedTabs,
.ordersSavedTabsSync{
  display:flex;
  gap:0;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
  padding-bottom:2px;
}

#productsSavedTabs .tabLink,
#ordersSavedTabs .tabLink,
.ordersSavedTabsSync .tabLink{
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
  flex-shrink:0;
  cursor:pointer;
}

.tabDelBtn{
  border:none;
  background:transparent;
  cursor:pointer;
  font-size:13px;
  color:#94a3b8;
  margin-left:4px;
  padding:0 2px;
  line-height:1;
  transition:color .15s;
}
.tabDelBtn:hover{
  color:#ef4444;
}

#ordersSavedTabs .tabLink,
.ordersSavedTabsSync .tabLink{
  padding:8px 14px;
  font-size:13px;
  font-weight:500;
  color:#64748b;
  border-radius:10px;
  transition:all .15s;
  position:relative;
}
#ordersSavedTabs .tabLink:hover,
.ordersSavedTabsSync .tabLink:hover{
  color:var(--primary, #6d3de4);
  background:rgba(109,61,228,.06);
}
#ordersSavedTabs .tabLink.active,
.ordersSavedTabsSync .tabLink.active{
  color:var(--primary, #6d3de4);
  font-weight:600;
}
#ordersSavedTabs .tabLink.active:after,
.ordersSavedTabsSync .tabLink.active:after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:0;
  height:2.5px;
  border-radius:3px;
  background:var(--primary, #6d3de4);
}

/* ===================================================================
   ERONTA — Product Edit Mode
   =================================================================== */

.erEditInput{
  width:100%;
  min-height:38px;
  padding:6px 12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:10px;
  font-size:13px;
  font-weight:500;
  color:#101828;
  background:#fff;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.erEditInput:focus{
  border-color:var(--primary, #6d3de4);
  box-shadow:0 0 0 3px rgba(109,61,228,.1);
}

.erEditSmall{
  max-width:180px;
}

.erEditTextarea{
  width:100%;
  min-height:100px;
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:10px;
  font-size:13px;
  font-weight:500;
  color:#344054;
  background:#fff;
  outline:none;
  resize:vertical;
  font-family:inherit;
  line-height:1.6;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.erEditTextarea:focus{
  border-color:var(--primary, #6d3de4);
  box-shadow:0 0 0 3px rgba(109,61,228,.1);
}

.erEditAttrDel{
  width:28px;
  height:28px;
  border:1px solid rgba(15,23,42,.1);
  border-radius:8px;
  background:none;
  cursor:pointer;
  font-size:12px;
  color:#94a3b8;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.erEditAttrDel:hover{
  background:rgba(239,68,68,.08);
  border-color:rgba(239,68,68,.25);
  color:#ef4444;
}

/* ===================================================================
   ERONTA — Media Edit Mode (Drag & Drop, Delete, Upload)
   =================================================================== */

.erMediaEditItem{
  position:relative;
  cursor:grab;
}
.erMediaEditItem:active{
  cursor:grabbing;
}

.erMediaOverlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  opacity:0;
  transition:opacity .15s ease;
  border-radius:16px;
}
.erMediaEditItem:hover .erMediaOverlay{
  opacity:1;
}

.erMediaDelBtn{
  width:36px;
  height:36px;
  border-radius:10px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.1);
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease;
}
.erMediaDelBtn:hover{
  background:#fee2e2;
}

.erMediaOrder{
  position:absolute;
  top:6px;
  left:6px;
  width:24px;
  height:24px;
  border-radius:8px;
  background:rgba(255,255,255,.9);
  font-size:11px;
  font-weight:500;
  color:#334155;
  display:flex;
  align-items:center;
  justify-content:center;
}

.erMediaDragging{
  opacity:.4;
  transform:scale(.95);
}
.erMediaDragOver{
  border-color:var(--primary, #6d3de4) !important;
  box-shadow:0 0 0 3px rgba(109,61,228,.15);
}

.erMediaUploadZone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:2px dashed rgba(15,23,42,.12) !important;
  background:rgba(15,23,42,.015) !important;
  transition:border-color .15s ease, background .15s ease;
}
.erMediaUploadZone:hover,
.erMediaUploadZone.erExpDropActive{
  border-color:var(--primary, #6d3de4) !important;
  background:rgba(109,61,228,.03) !important;
}

/* ===================================================================
   ERONTA — Export/Import Modal
   =================================================================== */

.erExportModal{
  z-index:9500;
}

.erExpInfo{
  background:rgba(109,61,228,.04);
  border:1px solid rgba(109,61,228,.12);
  border-radius:12px;
  padding:12px 16px;
  font-size:13px;
  font-weight:500;
  color:#334155;
  margin-bottom:18px;
}

.erExpFormGroup{
  margin-bottom:16px;
}

.erExpLabel{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#101828;
  margin-bottom:8px;
}

.erExpRadioGroup{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.erExpRadio{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.08);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.erExpRadio:hover{
  border-color:rgba(109,61,228,.2);
  background:rgba(109,61,228,.02);
}
.erExpRadio input[type="radio"]{
  margin-top:3px;
  accent-color:var(--primary, #6d3de4);
}

.erExpRadioLabel{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.erExpRadioLabel b{
  font-size:13px;
  font-weight:600;
  color:#101828;
}
.erExpRadioSub{
  font-size:12px;
  color:#94a3b8;
  font-weight:500;
}

.erExpDropZone{
  border:2px dashed rgba(15,23,42,.14);
  border-radius:14px;
  padding:32px 20px;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.erExpDropZone:hover,
.erExpDropZone.erExpDropActive{
  border-color:var(--primary, #6d3de4);
  background:rgba(109,61,228,.03);
}

.erExpDropIcon{
  font-size:32px;
  margin-bottom:8px;
}
.erExpDropText{
  font-size:13px;
  font-weight:600;
  color:#334155;
}
.erExpDropSub{
  font-size:12px;
  color:#94a3b8;
  margin-top:4px;
}

.erExpFileName{
  margin-top:10px;
  font-size:13px;
  font-weight:500;
  color:var(--primary, #6d3de4);
}

.erExpResultBox{
  margin-top:12px;
  padding:14px 16px;
  background:rgba(22,163,74,.04);
  border:1px solid rgba(22,163,74,.15);
  border-radius:12px;
}
.erExpResultTitle{
  font-size:14px;
  font-weight:500;
  color:#15803d;
  margin-bottom:10px;
}
.erExpResultRow{
  font-size:13px;
  color:#334155;
  margin-bottom:4px;
}
.erExpResultErrors{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(15,23,42,.06);
}
.erExpResultError{
  font-size:12px;
  color:#dc2626;
  margin-top:4px;
}

/* ===================================================================
   ERONTA — Selection Bar
   =================================================================== */

.erSelBar{
  display:none;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  background:rgba(109,61,228,.04);
  border:1px solid rgba(109,61,228,.12);
  border-radius:12px;
  margin-bottom:10px;
  font-size:13px;
  font-weight:500;
  color:#334155;
}
.erSelCount{
  font-weight:500;
  color:var(--primary, #6d3de4);
}
.erSelClearBtn{
  margin-left:auto;
  border:none;
  background:none;
  font-size:12px;
  font-weight:600;
  color:#94a3b8;
  cursor:pointer;
  padding:4px 8px;
  border-radius:6px;
}
.erSelClearBtn:hover{
  background:rgba(0,0,0,.04);
  color:#475569;
}
.erBulkBtn{
  border:none;
  background:var(--primary, rgb(111,85,255));
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:8px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:opacity .15s;
}
.erBulkBtn:hover{opacity:.85}
.erBulkBtn:disabled{opacity:.5;cursor:not-allowed}
.erBulkBtn .sico{font-size:13px}

/* Page size select */
.erPageSize{
  appearance:none;
  -webkit-appearance:none;
  min-height:auto;
  background:#fff;
  border:1px solid var(--line, #e2e8f0);
  border-radius:8px;
  padding:5px 28px 5px 10px;
  font-size:12.5px;
  font-weight:600;
  color:var(--text, #1e293b);
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
  background-size:10px 6px;
  min-width:56px;
  line-height:1.4;
}
.erPageSize:hover{
  border-color:#cbd5e1;
}
.erPageSize:focus{
  outline:none;
  border-color:var(--primary, #6d3de4);
  box-shadow:0 0 0 3px rgba(109,61,228,.08);
}

/* ===================================================================
   ERONTA — Topbar Action Buttons
   =================================================================== */

.prTopActions{
  display:flex;
  gap:8px;
  align-items:center;
}

.prTopBtnDanger{
  border-color:rgba(239,68,68,.25);
  color:#dc2626;
}
.prTopBtnDanger:hover{
  background:rgba(239,68,68,.05);
}

/* ===================================================================
   ERONTA — Trendyol / Generic Modal Overlay
   =================================================================== */

.erModalOverlay{
  position:fixed;
  inset:0;
  z-index:9600;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.45);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  animation: erModalFadeIn .2s ease;
}
@keyframes erModalFadeIn{
  from{ opacity:0 }
  to{ opacity:1 }
}

.erModal{
  background:#fff;
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
  width:92vw;
  max-width:480px;
  max-height:90vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  animation: erModalSlideUp .25s ease;
}
@keyframes erModalSlideUp{
  from{ opacity:0; transform:translateY(16px) }
  to{ opacity:1; transform:translateY(0) }
}

.erModalHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid var(--line);
}
.erModalTitle{
  font-weight:600;
  font-size:16px;
}
.erModalClose{
  background:none;
  border:none;
  font-size:22px;
  cursor:pointer;
  color:var(--muted);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:8px;
}
.erModalClose:hover{
  background:var(--bg-soft);
}
.erModalBody{
  flex:1;
  overflow-y:auto;
}
.erModalFooter{
  border-top:1px solid var(--line);
}

/* Data table inside setup cards */
.dataTable{
  width:100%;
  border-collapse:collapse;
}
.dataTable th{
  text-align:left;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.dataTable td{
  padding:10px 14px;
  font-size:13px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.dataTable tr:last-child td{
  border-bottom:none;
}
.dataTable tr:hover td{
  background:var(--bg-soft);
}

/* Multi-logo flex container for marketplace column */
.prdMarketLogos{
  display:flex;
  gap:4px;
  align-items:center;
}
#tyOrdPager{
  display:flex;
  align-items:center;
  gap:6px;
  justify-content:center;
  padding:14px 0;
}
.pagerWrap{
  padding: 12px 18px;
    display: flex;
    justify-content: center;
    gap: 15px;
}
#hbMapHbCatDropdown{
  background:#fff!important;}
  
.hbUnmMenu{
      
    background-color: #fff!important;;
    }

/* ===== Global Design Refinements ===== */

/* --- 1) All buttons: border-radius 5px --- */
.prTopBtn,
.prTopBtnPrimary,
.prTopBtnDanger,
.prTopBtnIcon,
.btnLight,
.btnPrimary,
.erSelClearBtn,
.pageBtn,
.erPageSize,
.chip,
.prPillBtn,
.erFilterChip,
.erFilterChipRemove,
.erSavedFilterChip,
.tabLink,
.filterBtn{
  border-radius: 5px !important;
}

.searchInput{
  border-radius: 5px !important;
}

.searchInput input{
  border-radius: 5px !important;
}

/* --- 2) Primary/important buttons: rgb(111, 85, 255) --- */
.prTopBtnPrimary,
.btnPrimary,
button.btnPrimary,
.prTopBtn.prTopBtnPrimary{
  background: rgb(111, 85, 255) !important;
  border-color: rgb(111, 85, 255) !important;
  color: #fff !important;
}

.prTopBtnPrimary:hover,
.btnPrimary:hover{
  background: rgb(95, 70, 230) !important;
  border-color: rgb(95, 70, 230) !important;
  color: #fff !important;
}

/* --- 3) Product detail: match the list page design --- */
/* Reduce card border-radius to match list feel */
.prCard{
  border-radius: 10px;
}

/* Reduce info grid box radius */
.prBox{
  border-radius: 8px;
}

/* Head icon radius */
.prHeadIcon{
  border-radius: 8px;
}

/* Media items radius */
.prMedia .mItem,
.prMedia .mAdd{
  border-radius: 8px;
}

/* Pill badges radius */
.pillBadge{
  border-radius: 5px !important;
}

/* Side card follow same radius */
.prSide .prCard{
  border-radius: 10px;
}

/* Kebab/dropdown menu radius */
.kebabMenu,
.erDropdown,
.erDropdownMenu{
  border-radius: 5px !important;
}

/* Modals, dialogs, popups */
.erModalCard,
.erModal .erModalCard{
  border-radius: 10px !important;
}

/* Input and select fields */
.erInput,
.erSelect,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
textarea{
  border-radius: 5px !important;
}

/* Toast notifications */
.erToast{
  border-radius: 8px !important;
}

/* Saved filter tabs */
.prTabsRow .tabLink{
  border-radius: 5px !important;
}

/* Status chips in tables */
.oStatusBadge{
  border-radius: 5px !important;
}


/* ======================================================
   SIDEBAR COLLAPSE / EXPAND + MOBILE RESPONSIVE
   ====================================================== */

/* ── Toggle button (ERONTA yazısının yanında) ── */
.side-toggle{
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(233,238,252,.45);
  transition: color .15s, background .15s;
  padding: 0;
  flex-shrink: 0;
}
.side-toggle:hover{
  color: rgba(233,238,252,.85);
  background: rgba(255,255,255,.08);
}
.side-toggle-ico{
  width: 16px;
  height: 16px;
  display: block;
}
.side-toggle-ico svg{
  width: 16px;
  height: 16px;
  display: block;
}

/* ── Sidebar transition ── */
.side{
  transition: width .25s cubic-bezier(.4,0,.2,1), padding .25s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
/* Collapsed: allow flyout overflow + stack above main */
.side.collapsed{
  overflow: visible !important;
  z-index: 100;
}
.side .nav{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.side.collapsed .nav{
  overflow: visible;
}

/* ── Brand in collapsed: show only "E" ── */
.brand{
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

/* ── Collapsed state (desktop) ── */
.side.collapsed{
  width: 64px !important;
  padding: 16px 8px 12px !important;
}

/* Desktop collapsed: pagination left kayar */
.app.side-collapsed [id^="page-orders"] .prListFooter,
.app.side-collapsed [id^="page-products"] .prListFooter{
  left: 64px;
}

/* Brand: hide logo, show E mini */
.side.collapsed .brand-logo-wrap{
  display: none;
}
.side.collapsed .brand-mini{
  display: block;
  width: 32px;
  height: 32px;
  padding: 3px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
}
.side.collapsed .brand-mini:hover{
  background: rgba(255,255,255,.14);
}

/* Hide toggle icon when collapsed (E harfi toggle görevi görüyor) */
.side.collapsed .side-toggle{
  display: none;
}

/* Search box: compact magnifier only (same total height as open) */
.side.collapsed .s-search{
  justify-content: flex-start;
  padding: 10px 10px;
  margin: 0 4px 12px;
  border: 1px solid transparent;
  background: transparent;
}
.side.collapsed .s-search input,
.side.collapsed .s-search .kbd{
  display: none;
}
.side.collapsed .s-search .sico{
  opacity: .7;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* Nav labels, carets, navlogo text: hide */
.side.collapsed .nav .label,
.side.collapsed .nav .caret,
.side.collapsed .nav .navlogoImg + .label{
  display: none;
}

/* Nav items: left-aligned icons when collapsed */
.side.collapsed .nav a,
.side.collapsed .nav button{
  justify-content: flex-start;
  padding: 10px 10px;
}
.side.collapsed .nav .left{
  gap: 0;
}

/* Accordion subs: hide in collapsed */
.side.collapsed .sub{
  display: none !important;
}

/* Profile: compact */
.side.collapsed .profile{
  padding: 8px 4px;
}
.side.collapsed .p-txt,
.side.collapsed .dots{
  display: none;
}
.side.collapsed .p-left{
  justify-content: flex-start;
  width: 100%;
  padding-left: 4px;
}

/* Collapsed side: hide kbd shortcut */
.side.collapsed .kbd{
  display: none;
}

/* ── Main content: expand when sidebar collapses ── */
/* (flex:1 already handles this, but animate smoothly) */

/* ── Tooltip for single navlinks (no sub) ── */
.side.collapsed .nav .group > a.navlink{
  position: relative;
}
.side.collapsed .nav .group > a.navlink::after{
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  background: #1c2940;
  color: #e2e8f0;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: auto;
  transition: opacity .15s;
  z-index: 200;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.side.collapsed .nav .group > a.navlink:hover::after{
  opacity: 1;
}

/* ── Collapsed Flyout Popup (accordion groups) ── */
.side.collapsed .nav .group{
  position: relative;
}
/* Invisible hover bridge so mouse can reach the flyout */
.side.collapsed .nav .group::after{
  content: "";
  position: absolute;
  top: 0;
  right: -14px;
  width: 14px;
  height: 100%;
  pointer-events: auto;
}
.side.collapsed .nav .group:hover > .sub{
  display: block !important;
  position: absolute !important;
  left: 100%;
  top: -4px;
  margin: 0 !important;
  border-left: none !important;
  padding: 6px !important;
  background: #1c2940;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  min-width: 200px;
  max-height: none !important;
  opacity: 1 !important;
  transform: none !important;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  overflow: visible !important;
  pointer-events: auto;
}
/* Show labels inside flyout */
.side.collapsed .nav .group:hover > .sub .label{
  display: inline !important;
}
/* Flyout items layout */
.side.collapsed .nav .group:hover > .sub a{
  justify-content: flex-start !important;
  padding: 8px 12px !important;
  cursor: pointer;
}
.side.collapsed .nav .group:hover > .sub .left{
  gap: 10px !important;
}

/* ── Burger button (hidden - using collapsed sidebar instead) ── */
.sideburger{
  display: none !important;
}

/* ── Mobile overlay ── */
.side-overlay{
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 55;
  opacity: 0;
  transition: opacity .25s;
}
.side-overlay.active{
  display: block;
  opacity: 1;
}

/* ════════════════════════════════════════
   MOBILE RESPONSIVE SIDEBAR
   Mobilde sidebar daralık (collapsed) kalır,
   E harfine basınca tam açılır, toggle ile kapanır.
   ════════════════════════════════════════ */
@media (max-width: 768px){
  /* Sidebar: normal flex, collapsed dar */
  .side{
    position: sticky !important;
    top: 0;
    width: 64px !important;
    min-width: 64px !important;
    height: 100vh !important;
    padding: 16px 8px 12px !important;
    flex-shrink: 0;
    transition: width .25s cubic-bezier(.4,0,.2,1), min-width .25s cubic-bezier(.4,0,.2,1), padding .25s cubic-bezier(.4,0,.2,1);
    z-index: 60;
  }

  /* Collapsed mobile: aynı desktop collapsed kuralları */
  .side:not(.mobile-open) .brand-logo-wrap{
    display: none;
  }
  .side:not(.mobile-open) .brand-mini{
    display: block;
    width: 32px;
    height: 32px;
    padding: 3px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;
    cursor: pointer;
  }
  .side:not(.mobile-open) .side-toggle{ display: none; }
  .side:not(.mobile-open) .s-search{ justify-content:flex-start; padding:10px 10px; margin:0 4px 12px; border:1px solid transparent; background:transparent; }
  .side:not(.mobile-open) .s-search input,
  .side:not(.mobile-open) .s-search .kbd{ display:none; }
  .side:not(.mobile-open) .nav .label,
  .side:not(.mobile-open) .nav .caret{ display:none; }
  .side:not(.mobile-open) .nav a,
  .side:not(.mobile-open) .nav button{ justify-content:flex-start; padding:10px 10px; }
  .side:not(.mobile-open) .nav .left{ gap:0; }
  .side:not(.mobile-open) .sub{ display:none !important; }
  .side:not(.mobile-open) .profile{ padding:8px 4px; }
  .side:not(.mobile-open) .p-txt,
  .side:not(.mobile-open) .dots{ display:none; }
  .side:not(.mobile-open) .p-left{ justify-content:flex-start; width:100%; padding-left:4px; }
  .side:not(.mobile-open) .kbd{ display:none; }

  /* Mobile-open = tam genişlik sidebar, mainı sağa iter */
  .side.mobile-open{
    width: 280px !important;
    min-width: 280px !important;
    padding: 16px 12px 12px !important;
  }
  .side.mobile-open .side-toggle{ display: grid; }

  /* Mobile-open: tüm içerikleri göster (desktop collapsed override'ları sıfırla) */
  .side.mobile-open .brand-logo-wrap{ display: flex !important; }
  .side.mobile-open .brand-mini{ display: none !important; }
  .side.mobile-open .s-search{ justify-content: space-between !important; padding: 10px 10px !important; margin: 0 8px 12px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 12px !important; }
  .side.mobile-open .s-search input,
  .side.mobile-open .s-search .kbd{ display: block !important; }
  .side.mobile-open .nav .label{ display: inline !important; }
  .side.mobile-open .nav .caret{ display: inline !important; }
  .side.mobile-open .nav a,
  .side.mobile-open .nav button{ justify-content: space-between !important; padding: 10px 10px !important; }
  .side.mobile-open .nav .left{ gap: 10px !important; }
  .side.mobile-open .sub{ position: relative !important; left: auto !important; background: none !important; border: none !important; box-shadow: none !important; min-width: 0 !important; }
  .side.mobile-open .profile{ padding: 10px 10px 12px !important; }
  .side.mobile-open .p-txt{ display: block !important; }
  .side.mobile-open .dots{ display: grid !important; }
  .side.mobile-open .p-left{ justify-content: flex-start !important; width: auto !important; }
  .side.mobile-open .kbd{ display: block !important; }

  /* Main: flex ile sidebarın yanında, kendi içinde scroll */
  .main{
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    height: 100vh;
    overflow-y: auto;
    overflow-x: auto;
  }

  /* App: viewport yüksekliğinde, sayfa scroll'u yok */
  .app{
    height: 100vh;
    overflow: hidden;
  }

  /* Overlay sadece mobile-open'da */
  .side-overlay.active{
    display: block;
    opacity: 1;
  }
}


/* ======================================================
   STICKY ORDER NUMBER COLUMN (mobile only)
   Mobilde sipariş no sütunu yatay kaydırmada sabit kalır,
   sağında gölge efekti oluşur.
   ====================================================== */
@media (max-width: 768px){
  /* Checkbox column (1st) - sticky */
  [id^="page-orders"] .prTable thead th:nth-child(1),
  [id^="page-orders"] .prTable tbody td:nth-child(1){
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--card);
  }

  /* Order number column (2nd) - sticky */
  [id^="page-orders"] .prTable thead th:nth-child(2),
  [id^="page-orders"] .prTable tbody td:nth-child(2){
    position: sticky;
    left: 44px;
    z-index: 2;
    background: var(--card);
  }

  /* Shadow on the order number column right edge */
  [id^="page-orders"] .prTable thead th:nth-child(2)::after,
  [id^="page-orders"] .prTable tbody td:nth-child(2)::after{
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    bottom: 0;
    width: 8px;
    background: linear-gradient(90deg, rgba(0,0,0,.06), transparent);
    pointer-events: none;
  }

  /* Keep header row above sticky columns */
  [id^="page-orders"] .prTable thead th{
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--card);
  }
}


/* ======================================================
   MOBILE FIXED PAGINATION
   Mobilde sidebar dar olduğu için left değişir.
   ====================================================== */
@media (max-width: 768px){
  [id^="page-orders"] .prListFooter,
  [id^="page-products"] .prListFooter{
    left: 64px !important;
    right: 0 !important;
    padding: 10px 14px !important;
  }

  /* Sidebar açıkken pagination da kayar */
  .app.side-mobile-open [id^="page-orders"] .prListFooter,
  .app.side-mobile-open [id^="page-products"] .prListFooter{
    left: 280px !important;
  }
}

/* ======================================================
   BUYBOX – Complete Styles (redesigned)
   ====================================================== */

/* ----- Summary Stat Row ----- */
.bbStatRow{
  display:flex; flex-wrap:wrap; gap:14px; margin-bottom:20px;
}
.bbStat{
  flex:1; min-width:130px;
  padding:14px 16px; border-radius:var(--r);
  display:flex; flex-direction:column; gap:2px;
}
.bbStatNum{ font-size:22px; font-weight:600; line-height:1.2; }
.bbStatLbl{ font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:.4px; opacity:.7; }
.bbStatDefault{ background:#f8f9fc; border:1px solid var(--line); color:var(--text); }
.bbStatInfo{   background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; }
.bbStatGreen{  background:#ecfdf5; border:1px solid #a7f3d0; color:#059669; }
.bbStatGreen .bbStatNum{ color:#059669; }
.bbStatOrange{ background:#fff7ed; border:1px solid #fed7aa; color:#ea580c; }
.bbStatOrange .bbStatNum{ color:#ea580c; }
.bbStatRed{    background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }

/* ----- Rank badge ----- */
.bbRank{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:24px; border-radius:5px;
  font-size:11px; font-weight:600; padding:0 6px;
}
.bbRank1{ background:#fef3c7; color:#d97706; }
.bbRank3{ background:#e0e7ff; color:#4f46e5; }
.bbRankLost{ background:#fee2e2; color:#dc2626; }
.bbRankNone{ background:#f1f5f9; color:#94a3b8; }

/* ----- Product cell in tables ----- */
.bbProd{ display:flex; align-items:center; gap:10px; }
.bbThumb{
  width:36px; height:36px; border-radius:6px;
  object-fit:cover; border:1px solid rgba(15,23,42,.06);
  flex-shrink:0; background:#f8f9fc;
}
.bbThumbEmpty{
  width:36px; height:36px; border-radius:6px;
  background:#f8f9fc; border:1px dashed rgba(15,23,42,.08);
}
.bbProdName{
  font-weight:500; font-size:13px; color:#0f172a;
  max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  line-height:1.3;
}
.bbProdSub{ font-size:11px; color:#94a3b8; font-family:monospace; margin-top:1px; }

/* ----- Action buttons & inputs ----- */
.bbActBtn{
  padding:5px 12px; border-radius:5px;
  font-size:12px; font-weight:500; cursor:pointer;
  border:1px solid rgba(15,23,42,.08); background:#fff; color:var(--text);
  transition:all .15s; white-space:nowrap;
}
.bbActBtn:hover{ border-color:var(--primary); color:var(--primary); }
.bbActDanger:hover{ border-color:#ef4444; color:#ef4444; }
.bbActGroup{ display:flex; gap:6px; align-items:center; }

.bbPriceInput{
  width:80px; height:30px; padding:0 8px; border-radius:5px;
  border:1px solid rgba(15,23,42,.08); font-size:13px; text-align:right;
  font-variant-numeric:tabular-nums; outline:none;
}
.bbPriceInput:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(111,85,255,.08); }

/* ----- Checkbox label ----- */
.bbCheckLabel{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:#475569; font-weight:500; cursor:pointer;
  padding:6px 12px; border-radius:5px; background:rgba(15,23,42,.02);
  border:1px solid rgba(15,23,42,.06); user-select:none;
}
.bbCheckLabel input[type="checkbox"]{ accent-color:var(--primary); }

/* ----- Marketplace badges ----- */
.bbMpBadge{
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:10px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase;
}
.bbMpTy{ background:#f97316; color:#fff; }
.bbMpHb{ background:#ef4444; color:#fff; }

/* ----- Status badges ----- */
.bbBadge{
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:11px; font-weight:600;
}
.bbBadgeOn{ background:#d1fae5; color:#059669; }
.bbBadgeOff{ background:#fee2e2; color:#dc2626; }

/* ----- Tags (excluded brands/barcodes) ----- */
.bbTagList{ display:flex; flex-wrap:wrap; gap:8px; padding:16px; }
.bbTag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:5px;
  background:rgba(15,23,42,.03); border:1px solid rgba(15,23,42,.06);
  color:#334155; font-size:12px; font-weight:500;
}
.bbTagDel{
  background:none; border:none; cursor:pointer; font-size:16px;
  color:#94a3b8; padding:0; line-height:1;
}
.bbTagDel:hover{ color:#ef4444; }

/* ----- Sync progress bar ----- */
.bbSyncBar{
  padding:12px 20px; margin:0 20px 16px;
  border-radius:var(--r); background:#f8f9fc; border:1px solid var(--line);
}
.bbSyncBarInner{
  height:8px; border-radius:4px; background:#e2e8f0; overflow:hidden;
}
.bbSyncBarFill{
  height:100%; border-radius:4px; background:var(--primary);
  transition:width .3s;
}
.bbSyncMsg{ font-size:12px; color:#64748b; margin-top:6px; }

/* ----- Excluded row ----- */
.bbExcluded{ opacity:.5; }

/* ----- Misc ----- */
.bbMuted{ font-size:13px; color:#94a3b8; }
.bbPageInfo{ font-size:13px; color:#64748b; font-weight:500; }
.bbSmBtn{ padding:5px 12px !important; font-size:12px !important; }

/* ----- Input for settings ----- */
.bbInput{
  height:36px; padding:0 12px; border-radius:5px;
  border:1px solid rgba(15,23,42,.08); font-size:13px;
  background:#fff; color:var(--text); outline:none;
  transition:border .15s; width:100%;
}
.bbInput:focus{ border-color:var(--primary); box-shadow:0 0 0 2px rgba(111,85,255,.08); }

/* ----- Settings 2-col grid ----- */
.bbSettGrid2{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media(max-width:900px){ .bbSettGrid2{ grid-template-columns:1fr; } }

.bbSettBody{ padding:20px; display:flex; flex-direction:column; gap:16px; }
.bbSettField{ display:flex; flex-direction:column; gap:4px; }
.bbSettField label{ font-size:13px; font-weight:500; color:#475569; }

/* ----- Commission tier cards ----- */
.bbTierGrid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px; padding:20px;
}
.bbTierCard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:20px; text-align:center;
  transition:box-shadow .2s;
}
.bbTierCard:hover{ box-shadow:var(--shadow); }
.bbTierNum{ font-size:14px; font-weight:500; margin-bottom:8px; }
.bbTierRange{ font-size:12px; color:#64748b; margin-bottom:10px; }
.bbTierPct{ font-size:18px; color:var(--text); }

/* ----- Commission tier cards (per-product in table) ----- */
.bbTierCards{ display:flex; gap:10px; flex-wrap:wrap; }
.bbTierCard{
  flex:1 1 0; min-width:110px; max-width:160px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  padding:12px 10px; text-align:center;
  transition:box-shadow .2s;
}
.bbTierCard:hover{ box-shadow:var(--shadow); }
.bbTierRange{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; line-height:1.3; }
.bbTierRange small{ font-weight:500; }
.bbTierLabel{ font-size:11px; color:#94a3b8; margin-bottom:4px; }
.bbTierPct{ font-size:17px; font-weight:500; color:#e67e22; }

/* ----- Logs (compact in-page & modal) ----- */
.bbLogTable{ font-size:13px; }
.bbLogTable th{ font-weight:500; color:#475569; }
.bbLogThumb{
  width:30px; height:30px; border-radius:5px;
  object-fit:cover; border:1px solid rgba(15,23,42,.06);
}
.bbLogProd{ display:flex; align-items:center; gap:8px; }
.bbLogType{
  display:inline-block; padding:2px 8px; border-radius:4px;
  font-size:10px; font-weight:600;
  background:rgba(59,130,246,.06); color:#3b82f6;
}
.bbLogDetail{
  max-width:160px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font-size:12px; color:#94a3b8;
}

/* ----- Modal ----- */
.bbModal{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35); backdrop-filter:blur(4px);
}
.bbModalBox{
  background:#fff; border-radius:var(--r);
  width:520px; max-width:95vw;
  box-shadow:0 12px 40px rgba(15,23,42,.10);
  overflow:hidden;
}
.bbModalWide{ width:900px; }
.bbModalHead{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid rgba(15,23,42,.06);
  font-weight:600; font-size:14px; color:#0f172a;
}
.bbModalClose{
  background:none; border:none; font-size:22px;
  cursor:pointer; color:#94a3b8; line-height:1;
}
.bbModalClose:hover{ color:var(--text); }
.bbModalBody{ padding:20px; }

/* ----- Brand picker modal list ----- */
.bbBrandPickList{ max-height:300px; overflow:auto; }
.bbBrandPickItem{
  padding:10px 14px; cursor:pointer; border-radius:5px;
  font-size:13px; transition:background .1s;
}
.bbBrandPickItem:hover{ background:rgba(15,23,42,.03); }

/* ----- Product Picker Modal ----- */
.bbPickerRow{
  display:flex; align-items:center; gap:12px;
  padding:10px 20px; border-bottom:1px solid rgba(15,23,42,.04);
  transition:background .1s; cursor:pointer;
}
.bbPickerRow:hover{ background:#f8fafc; }
.bbPickerRow.bbPickerSelected{ background:#f0f0ff; }
.bbPickerRow.bbPickerAlready{ opacity:.45; }
.bbPickerCheck{
  width:18px; height:18px; accent-color:var(--primary);
  flex-shrink:0; cursor:pointer;
}
.bbPickerImg{
  width:38px; height:38px; border-radius:var(--r2);
  object-fit:cover; border:1px solid var(--line);
  flex-shrink:0; background:#f8f9fc;
}
.bbPickerImgEmpty{
  width:38px; height:38px; border-radius:var(--r2);
  background:#f1f3f8; border:1px dashed #d4d9e4; flex-shrink:0;
}
.bbPickerName{
  font-weight:500; font-size:13px; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:400px;
}
.bbPickerSub{ font-size:11px; color:#94a3b8; font-family:monospace; }
.bbPickerBrand{ font-size:11px; color:#64748b; font-weight:500; }

/* ----- prCardBody (generic) ----- */
.prCardBody{ padding:0 20px 20px; }

/* ----- Page dots (pagination ellipsis) ----- */
.pageDots{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; font-size:14px; color:#94a3b8;
}

/* ======================================================
   BUYBOX – Fixed Pagination (same pattern as orders/products)
   ====================================================== */
[id^="page-bb_"] .prListFooter{
  position: fixed;
  left: var(--sideW);
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-radius: 0;
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(15,23,42,.06);
  z-index: 50;
  margin: 0;
  gap: 14px;
  flex-wrap: wrap;
}
[id^="page-bb_"] .prTableWrap{
  padding-bottom: 60px;
}
[id^="page-bb_"] .bbPageInfo{
  color: #7c8a9a;
  font-size: 12px;
  font-weight: 500;
}
[id^="page-bb_"] .pager{
  display: flex;
  align-items: center;
  gap: 6px;
}
[id^="page-bb_"] .pageBtn{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: .18s ease;
}
[id^="page-bb_"] .pageBtn:hover{
  background: #f8fafc;
}
[id^="page-bb_"] .pageBtn.active{
  background: rgb(111, 85, 255);
  color: #fff;
  border-color: rgb(111, 85, 255);
}
.app.side-collapsed [id^="page-bb_"] .prListFooter{
  left: 64px;
}
@media (max-width: 768px){
  [id^="page-bb_"] .prListFooter{
    left: 64px !important;
    right: 0 !important;
    padding: 10px 14px !important;
  }
  .app.side-mobile-open [id^="page-bb_"] .prListFooter{
    left: 280px !important;
  }
}

/* ----- Auto-Sync Status Banner ----- */
.bbSyncStatusBanner{
  padding: 16px 20px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 500;
}
.bbSyncStatusBanner.bbSyncRunning{
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.bbSyncStatusBanner.bbSyncStopped{
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.bbSyncStatusDot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bbSyncRunning .bbSyncStatusDot{
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.25);
  animation: bbPulse 2s infinite;
}
.bbSyncStopped .bbSyncStatusDot{
  background: #ef4444;
}
@keyframes bbPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(34,197,94,.25); }
  50%{ box-shadow:0 0 0 6px rgba(34,197,94,.15); }
}
.bbSyncStatusInfo{
  flex: 1;
}
.bbSyncStatusInfo .bbSyncStatusTitle{
  font-weight: 600;
  font-size: 14px;
}
.bbSyncStatusInfo .bbSyncStatusSub{
  font-size: 12px;
  opacity: .75;
  margin-top: 2px;
}
.bbSyncStatusActions{
  display: flex;
  gap: 8px;
}

/* ======================================================
   BUYBOX — Lock Overlay (paket kısıtlaması)
   ====================================================== */
.bbLockOverlay{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: calc(100vh - 80px);
}
.bbLockBox{
  text-align: center;
  max-width: 420px;
}
.bbLockIcon{
  margin-bottom: 20px;
  opacity: .6;
}
.bbLockTitle{
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.3;
}
.bbLockDesc{
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 24px;
}
.bbLockActions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.bbLockBtn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity .2s ease;
}
.bbLockBtnTrial{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(111,85,255,.18);
}
.bbLockBtnTrial:hover{
  opacity: .9;
}
.bbLockBtnTrial:disabled{
  opacity: .5;
  cursor: not-allowed;
}
.bbLockBtnBuy{
  background: #f59e0b;
  color: #fff;
  box-shadow: 0 1px 3px rgba(245,158,11,.18);
}
.bbLockBtnBuy:hover{
  opacity: .9;
}

/* ======================================================
   BUYBOX — Trial / Subscription Banner (topbar'da)
   ====================================================== */
.bbTrialBanner{
  margin-top: 4px;
}
.bbTrialBadge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(245,158,11,.08);
  color: #d97706;
  border: 1px solid rgba(245,158,11,.15);
}
.bbTrialDot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  animation: bbTrialPulse 2s infinite;
}
@keyframes bbTrialPulse{
  0%,100%{ box-shadow: 0 0 0 2px rgba(245,158,11,.2); }
  50%{ box-shadow: 0 0 0 5px rgba(245,158,11,.1); }
}


/* =========================================================
   DASHBOARD v2 — Dropdowns, Modals, Channels, TopSellers
   ========================================================= */

/* --- KPI Row: 3 columns instead of 5 --- */
#dashKpiRow{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --- Dashboard Dropdown Overlay --- */
.dashDropOverlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
  background: transparent;
}
.dashDropOverlay.open{
  display: block;
}

/* --- Dashboard Dropdown Panel --- */
.dashDrop{
  display: none;
  position: absolute;
  z-index: 100;
  top: 54px;
  left: 12px;
  min-width: 280px;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(15,23,42,.12);
  overflow: hidden;
  animation: dashDropIn .15s ease;
}
.dashDrop.open{
  display: block;
}
.dashDropSmall{
  min-width: 180px;
  max-width: 220px;
  top: auto;
  left: auto;
}

@keyframes dashDropIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.dashDropTitle{
  padding: 12px 16px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.dashDropList{
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}

.dashDropItem{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: #0f172a;
  transition: background .1s ease;
}
.dashDropItem:hover{
  background: rgba(109,61,228,.04);
}
.dashDropItem.active{
  background: rgba(109,61,228,.07);
  color: var(--primary2);
  font-weight: 600;
}

.dashDropItemLogo{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  object-fit: contain;
  padding: 2px;
}
.dashDropItemAbbr{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.03);
  font-size: 10px;
  font-weight: 700;
  color: #334155;
}

.dashDropCheck{
  margin-left: auto;
  color: var(--primary2);
  font-weight: 700;
  font-size: 15px;
}

/* Custom Date Inputs */
.dashDropCustomDate{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
}
.dashDropCustomDate label{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.dashDropCustomDate input[type="date"]{
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #0f172a;
  background: #fff;
}
.dashDropCustomDate input[type="date"]:focus{
  border-color: rgba(109,61,228,.4);
  outline: none;
}

/* --- Chart Legend --- */
.chartLegend{
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.chartLegendItem{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chartLegendDot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* --- Channel Distribution --- */
#dashChannels{
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#dashChannelsList{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}

/* --- Dashboard Modal --- */
.dashModal{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.dashModal.open{
  display: flex;
}
.dashModalBack{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(4px);
}
.dashModalPanel{
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 800px;
  max-height: 85vh;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15,23,42,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: dashModalIn .2s ease;
}
@keyframes dashModalIn{
  from{ opacity: 0; transform: scale(.96) translateY(8px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}
.dashModalHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.dashModalHead h3{
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}
.dashModalClose{
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #64748b;
  transition: all .12s ease;
}
.dashModalClose:hover{
  border-color: rgba(109,61,228,.25);
  color: #0f172a;
}
.dashModalBody{
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1;
}
.dashModalTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.dashModalTable th{
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: rgba(15,23,42,.02);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.dashModalTable td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15,23,42,.04);
  vertical-align: middle;
}
.dashModalTable tbody tr:last-child td{
  border-bottom: 0;
}
.dashModalTable tbody tr:hover{
  background: rgba(109,61,228,.02);
}
.tsIdx{
  width: 28px;
  min-width: 28px;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}
.tsRow{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(15,23,42,.04);
  overflow: hidden;
}
.tsRow:last-child{ border-bottom: 0; }
.tsThumb{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(109,61,228,.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tsInitial{
  font-weight: 600;
  font-size: 15px;
  color: var(--primary, #6d3de4);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.tsMeta{
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.tsName{
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tsSub{
  color: var(--muted);
  font-size: 11px;
  margin-top: 1px;
}
.tsRight{
  text-align: right;
  white-space: nowrap;
  width: 110px;
  min-width: 110px;
  flex-shrink: 0;
}
.tsAmount{
  font-weight: 600;
  font-size: 13px;
}
.tsChg{
  text-align: center;
  white-space: nowrap;
  width: 100px;
  min-width: 100px;
  flex-shrink: 0;
}

/* =========================================================
   SALES REPORT
   ========================================================= */

/* -- Tabs -- */
.repTabs{
  display: flex;
  gap: 4px;
  padding: 0 0 12px;
}
.repTab{
  padding: 8px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card, #fff);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}
.repTab:hover{
  border-color: rgba(109,61,228,.25);
  color: var(--text);
}
.repTab.active{
  background: var(--primary, #6d3de4);
  border-color: var(--primary, #6d3de4);
  color: #fff;
}

/* -- Filters -- */
.repFilters{
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 16px;
}
.repFilterGroup{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.repFilterLabel{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.repSelect,
.repDateInput{
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card, #fff);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  outline: none;
  transition: border-color .15s ease;
  min-width: 140px;
}
.repSelect:focus,
.repDateInput:focus{
  border-color: var(--primary, #6d3de4);
}
.repApplyBtn{
  height: 38px;
  padding: 0 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  background: var(--primary, #6d3de4);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity .15s;
}
.repApplyBtn:hover{ opacity: .88; }

/* -- Table Card -- */
.repTableCard{
  position: relative;
  border-radius: 10px;
}

/* -- Loading -- */
.repLoading{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.repSpinner{
  width: 22px; height: 22px;
  border: 3px solid var(--line);
  border-top-color: var(--primary, #6d3de4);
  border-radius: 50%;
  animation: repSpin .7s linear infinite;
}
@keyframes repSpin{ to{ transform: rotate(360deg); } }

/* -- Empty -- */
.repEmpty{
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

/* -- Table Wrap + Sticky Column -- */
.repTableWrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.repTable{
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.repTable th,
.repTable td{
  padding: 10px 14px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.repTable th{
  position: sticky;
  top: 0;
  background: var(--card, #fff);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--muted);
  z-index: 2;
}
.repTable tbody tr:hover td{
  background: rgba(109,61,228,.025);
}
.repTable tbody tr:hover td.repStickyCol{
  background: var(--card, #fff);
  box-shadow: inset 0 0 0 2000px rgba(109,61,228,.025);
}
.repTable tbody tr:last-child td{
  border-bottom: 0;
}

/* Sticky first column */
.repStickyCol{
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--card, #fff);
  min-width: 260px;
  max-width: 340px;
}
.repTable th.repStickyCol{
  z-index: 5;
}
/* shadow on scroll */
.repStickyCol::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8px;
  width: 8px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(15,23,42,.06), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.repTableWrap.scrolled .repStickyCol::after{
  opacity: 1;
}

/* Total column */
.repTotalCol{
  background: rgba(109,61,228,.03);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.repTable th.repTotalCol{
  background: var(--card, #fff);
}
.repTable td.repTotalCol{
  background: var(--card, #fff);
}

/* Bucket columns */
.repBucketCol{
  text-align: right;
  min-width: 100px;
}

/* Zero value */
.repZero{
  color: var(--line);
}

/* -- Product cell in sticky col -- */
.repProductCell{
  display: flex;
  align-items: center;
  gap: 10px;
}
.repProdImg{
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 6px;
  object-fit: cover;
  background: rgba(109,61,228,.06);
}
.repProdInfo{
  min-width: 0;
  overflow: hidden;
}
.repProdName{
  font-weight: 500;
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.repProdBarcode{
  font-size: 11px;
  color: var(--muted);
  margin-top: 1px;
}
.repGroupName{
  font-weight: 500;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* Responsive */
@media (max-width: 768px) {
  .repFilters{ flex-direction: column; align-items: stretch; }
  .repFilterGroup{ width: 100%; }
  .repSelect, .repDateInput{ width: 100%; }
  .repStickyCol{ min-width: 180px; max-width: 220px; }
  .repProdName{ max-width: 140px; }
  .repGroupName{ max-width: 160px; }
}

/* Dark mode */
:root[data-theme="dark"] .repTab{
  background: var(--card);
  border-color: var(--line);
  color: var(--muted);
}
:root[data-theme="dark"] .repTab.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
:root[data-theme="dark"] .repStickyCol,
:root[data-theme="dark"] .repTable td.repTotalCol{
  background: var(--card);
}
:root[data-theme="dark"] .repTable tbody tr:hover td.repStickyCol{
  background: var(--card);
}
:root[data-theme="dark"] .repTable th{
  background: var(--card);
}

/* -- Date picker styling -- */
.repDateInput::-webkit-calendar-picker-indicator{
  opacity: .5;
  cursor: pointer;
  filter: none;
  transition: opacity .15s;
}
.repDateInput::-webkit-calendar-picker-indicator:hover{
  opacity: .9;
}
:root[data-theme="dark"] .repDateInput::-webkit-calendar-picker-indicator{
  filter: invert(1);
}

/* -- Report pagination footer -- */
[id^="page-rep_"] .prListFooter{
  position: fixed;
  left: var(--sideW);
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-radius: 0;
  background: rgba(255,255,255,.65);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 16px rgba(15,23,42,.06);
  z-index: 50;
  margin: 0;
  gap: 14px;
  flex-wrap: wrap;
}
[id^="page-rep_"] .repTableWrap{
  padding-bottom: 60px;
}
[id^="page-rep_"] .pager{
  display: flex;
  align-items: center;
  gap: 6px;
}
[id^="page-rep_"] .pageBtn{
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  transition: .18s ease;
}
[id^="page-rep_"] .pageBtn:hover{
  background: #f8fafc;
}
[id^="page-rep_"] .pageBtn.active{
  background: rgb(111,85,255);
  color: #fff;
  border-color: rgb(111,85,255);
}
.app.side-collapsed [id^="page-rep_"] .prListFooter{
  left: var(--sideCollW);
}
@media (max-width: 900px){
  [id^="page-rep_"] .prListFooter{
    left: 0;
  }
}
:root[data-theme="dark"] [id^="page-rep_"] .prListFooter{
  background: rgba(30,30,40,.65);
  border-top-color: var(--line);
}
:root[data-theme="dark"] [id^="page-rep_"] .pageBtn{
  background: var(--card);
  border-color: var(--line);
  color: var(--text);
}

/* Skeleton loading */
@keyframes skelPulse{
  0%{ opacity:.08 }
  50%{ opacity:.16 }
  100%{ opacity:.08 }
}
.skelBlock{
  background: currentColor;
  opacity: .08;
  border-radius: 6px;
  animation: skelPulse 1.4s ease-in-out infinite;
}
.skelCircle{
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: currentColor;
  opacity: .08;
  animation: skelPulse 1.4s ease-in-out infinite;
}
.skelRect{
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 8px;
  background: currentColor;
  opacity: .08;
  animation: skelPulse 1.4s ease-in-out infinite;
}
#dashSkeleton .kpiItem .skelBlock:nth-child(2){ animation-delay:.15s }
.skelChartArea{
  height: 300px;
  margin-top: 8px;
  position: relative;
  overflow: hidden;
}
.skelLine{
  width: 100%;
  height: 100%;
  color: var(--text, #0f172a);
  transform-origin: bottom;
  animation: skelLineGrow .9s ease-out both;
}
@keyframes skelLineGrow{
  0%{ transform: scaleY(0); opacity: 0 }
  40%{ opacity: 1 }
  100%{ transform: scaleY(1); opacity: 1 }
}
.skelXAxis{
  display: flex;
  justify-content: space-between;
  padding: 8px 4px 0;
}
@keyframes skelShimmerSlide{
  0%{ transform: translateX(0) }
  100%{ transform: translateX(1600px) }
}
.skelShimmerRect{
  animation: skelShimmerSlide 2s ease-in-out infinite;
}

.dashModalChannel{
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashModalChLogo{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(15,23,42,.08);
  object-fit: contain;
  padding: 2px;
}
.dashModalChAbbr{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(15,23,42,.03);
  font-size: 9px;
  font-weight: 700;
}

/* --- Top Sellers dropdown position --- */
#page-dash{
  position: relative;
}
#topSellersDrop{
  position: absolute;
  right: 14px;
}

/* --- Channels btn alignment --- */
#dashChannels > .btn{
  align-self: flex-start;
}

/* --- Responsive overrides for new dash --- */
@media (max-width: 1180px){
  #dashKpiRow{ grid-template-columns: 1fr 1fr; }
  #dashChannelsList{ grid-template-columns: 1fr; }
}
@media (max-width: 740px){
  #dashKpiRow{ grid-template-columns: 1fr; }
  .dashModalPanel{ width: 96%; max-height: 90vh; }
  .dashDrop{ min-width: 260px; left: 4px; right: 4px; }
}

/* --- Dark mode support --- */
:root[data-theme="dark"] .dashDrop{
  background: var(--card);
  border-color: rgba(255,255,255,.10);
}
:root[data-theme="dark"] .dashDropItem{
  color: var(--text);
}
:root[data-theme="dark"] .dashDropItem:hover{
  background: rgba(255,255,255,.05);
}
:root[data-theme="dark"] .dashDropItem.active{
  background: rgba(109,61,228,.12);
}
:root[data-theme="dark"] .dashDropItemLogo{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
:root[data-theme="dark"] .dashDropItemAbbr{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
:root[data-theme="dark"] .dashDropCustomDate input[type="date"]{
  background: var(--card);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
:root[data-theme="dark"] .dashModalPanel{
  background: var(--card);
  border-color: rgba(255,255,255,.10);
}
:root[data-theme="dark"] .dashModalClose{
  background: var(--card);
  border-color: rgba(255,255,255,.12);
  color: var(--muted);
}
:root[data-theme="dark"] .dashModalTable th{
  background: rgba(255,255,255,.04);
  color: rgba(233,238,252,.70);
}
:root[data-theme="dark"] .dashModalTable td{
  border-bottom-color: rgba(255,255,255,.06);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════
   FAZ 3C.5 — Help Drawer
   ═══════════════════════════════════════════════════════════ */

/* ── Info Button ── */
.help-info-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(109,61,228,.08); border: 1px solid rgba(109,61,228,.18);
  color: var(--primary, #6D3DE4); cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  transition: all .2s; flex-shrink: 0;
}
.help-info-btn:hover{
  background: rgba(109,61,228,.16); border-color: rgba(109,61,228,.32);
  transform: scale(1.08);
}
.help-info-btn:active{ transform: scale(.95); }

/* ── Overlay ── */
.help-drawer-overlay{
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(10,12,28,.45); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.help-drawer-overlay.open{
  opacity: 1; pointer-events: auto;
}

/* ── Drawer Container ── */
.help-drawer{
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 92vw; z-index: 9999;
  background: var(--card, #fff);
  box-shadow: -8px 0 36px rgba(10,12,28,.18);
  display: flex; flex-direction: column;
  transform: translateX(110%);
  transition: transform .32s cubic-bezier(.4,0,.2,1);
  border-left: 1px solid rgba(109,61,228,.10);
}
.help-drawer.open{
  transform: translateX(0);
}

/* ── Header ── */
.help-drawer-header{
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid rgba(109,61,228,.08);
  min-height: 60px;
}
.help-drawer-logo{
  width: 34px; height: 34px; border-radius: 8px;
  object-fit: contain; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.06); padding: 3px;
  background: #fff;
}
.help-drawer-icon{
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(109,61,228,.08); color: var(--primary);
  font-size: 16px; flex-shrink: 0;
}
.help-drawer-title{
  font-size: 15px; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.help-drawer-close{
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--muted); font-size: 17px;
  background: transparent; border: 1px solid transparent;
  transition: all .18s;
}
.help-drawer-close:hover{
  background: rgba(109,61,228,.06); border-color: rgba(109,61,228,.14);
  color: var(--text);
}

/* ── Body (scrollable) ── */
.help-drawer-body{
  flex: 1; overflow-y: auto; padding: 20px;
  scrollbar-width: thin;
}

/* ── Footer ── */
.help-drawer-footer{
  display: flex; gap: 8px; padding: 14px 20px;
  border-top: 1px solid rgba(109,61,228,.08);
}
.help-drawer-footer .hd-btn{
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border-radius: 10px; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all .18s; border: none;
}
.hd-btn-primary{
  background: var(--primary, #6D3DE4); color: #fff;
}
.hd-btn-primary:hover{ filter: brightness(1.08); }
.hd-btn-secondary{
  background: rgba(109,61,228,.08); color: var(--primary);
  border: 1px solid rgba(109,61,228,.14);
}
.hd-btn-secondary:hover{ background: rgba(109,61,228,.14); }

/* ── Loading State ── */
.hd-loading{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 20px; gap: 14px;
}
.hd-loading-spinner{
  width: 32px; height: 32px; border: 3px solid rgba(109,61,228,.12);
  border-top-color: var(--primary); border-radius: 50%;
  animation: hdSpin .7s linear infinite;
}
@keyframes hdSpin{ to{ transform: rotate(360deg); } }
.hd-loading-text{ font-size: 13px; color: var(--muted); }

/* ── Content Sections ── */
.hd-brand{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(109,61,228,.06);
}
.hd-brand-img{
  width: 38px; height: 38px; border-radius: 10px;
  object-fit: contain; border: 1px solid rgba(0,0,0,.06);
  padding: 4px; background: #fff;
}
.hd-brand-name{
  font-size: 16px; font-weight: 600; color: var(--text);
}

.hd-section{
  display: flex; gap: 12px; margin-bottom: 18px;
}
.hd-section-icon{
  width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(109,61,228,.07); color: var(--primary);
  font-size: 14px; flex-shrink: 0; margin-top: 1px;
}
.hd-section-body{ flex: 1; min-width: 0; }
.hd-section-title{
  font-size: 13px; font-weight: 600; color: var(--text);
  margin-bottom: 6px;
}
.hd-text{
  font-size: 13px; color: var(--muted); line-height: 1.6;
}

/* Steps */
.hd-steps{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.hd-step{
  display: flex; align-items: flex-start; gap: 10px;
}
.hd-step-num{
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary, #6D3DE4); color: #fff;
  font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.hd-step-text{
  font-size: 13px; color: var(--text); line-height: 1.55;
  padding-top: 1px;
}

/* Warnings */
.hd-section-warn .hd-section-icon{
  background: rgba(245,166,35,.10); color: #F5A623;
}
.hd-warn-item{
  font-size: 12.5px; color: #b87a00; line-height: 1.55;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(245,166,35,.06); border: 1px solid rgba(245,166,35,.14);
  margin-bottom: 6px;
}

/* Tips */
.hd-section-tip .hd-section-icon{
  background: rgba(46,213,115,.10); color: #27ae60;
}
.hd-tip-item{
  font-size: 12.5px; color: var(--text); line-height: 1.55;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(46,213,115,.05); border: 1px solid rgba(46,213,115,.12);
  margin-bottom: 6px;
}

/* Empty State */
.hd-empty{
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 48px 20px; gap: 12px;
}

/* ── Dark mode ── */
:root[data-theme="dark"] .help-info-btn{
  background: rgba(109,61,228,.12); border-color: rgba(109,61,228,.24);
  color: #a78bfa;
}
:root[data-theme="dark"] .help-drawer{
  background: var(--card); border-left-color: rgba(255,255,255,.06);
  box-shadow: -8px 0 36px rgba(0,0,0,.35);
}
:root[data-theme="dark"] .help-drawer-logo{
  border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.06);
}
:root[data-theme="dark"] .help-drawer-header{
  border-bottom-color: rgba(255,255,255,.06);
}
:root[data-theme="dark"] .help-drawer-footer{
  border-top-color: rgba(255,255,255,.06);
}
:root[data-theme="dark"] .hd-brand-img{
  border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.06);
}
:root[data-theme="dark"] .hd-section-icon{
  background: rgba(109,61,228,.12);
}
:root[data-theme="dark"] .hd-warn-item{
  background: rgba(245,166,35,.08); border-color: rgba(245,166,35,.18);
  color: #f5c542;
}
:root[data-theme="dark"] .hd-tip-item{
  background: rgba(46,213,115,.08); border-color: rgba(46,213,115,.14);
}
:root[data-theme="dark"] .hd-btn-secondary{
  background: rgba(109,61,228,.12); border-color: rgba(109,61,228,.22);
}

/* ── Responsive ── */
@media (max-width: 500px){
  .help-drawer{ width: 100%; max-width: 100%; }
}


/* ═══════════════════════════════════════════════
   SMART CONTROL PAGE  — Faz 3L
   ═══════════════════════════════════════════════ */

/* KPI Row */
.scKpiRow{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-bottom:24px;
}
.scKpi{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:20px 22px; display:flex; flex-direction:column; gap:4px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  transition: box-shadow .2s, border-color .2s;
}
.scKpi:hover{ border-color:rgba(111,85,255,.18); box-shadow:0 2px 8px rgba(111,85,255,.08); }
.scKpiLabel{ font-size:12px; color:#64748b; font-weight:500; letter-spacing:.3px; text-transform:uppercase; }
.scKpiVal{ font-size:28px; font-weight:600; color:#0f172a; line-height:1.15; }
.scKpiSub{ font-size:12px; color:#94a3b8; }

/* Tabs */
.scTabs{
  display:flex; gap:4px; margin-bottom:20px;
  background:rgba(0,0,0,.03); border-radius:10px; padding:4px;
  width:fit-content;
}
.scTab{
  border:none; background:transparent; cursor:pointer;
  padding:9px 22px; border-radius:8px; font-size:13px; font-weight:500;
  color:#64748b; display:flex; align-items:center; gap:7px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.scTab:hover{ color:#0f172a; background:rgba(255,255,255,.5); }
.scTab.active{
  background:#fff; color:rgb(111,85,255);
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.scTabBadge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px;
  border-radius:10px; font-size:11px; font-weight:600;
  background:rgba(111,85,255,.1); color:rgb(111,85,255);
}
.scTab.active .scTabBadge{ background:rgba(111,85,255,.15); }

/* Panels */
.scPanel{ display:none; }
.scPanel.show{ display:block; }

/* Filter Bar */
.scFilterBar{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px;
}
.scFilterChip{
  border:1px solid rgba(0,0,0,.08); background:#fff; cursor:pointer;
  padding:6px 14px; border-radius:20px; font-size:12px; font-weight:500;
  color:#475569; display:flex; align-items:center; gap:6px;
  transition: all .2s;
}
.scFilterChip:hover{ border-color:rgba(111,85,255,.25); color:rgb(111,85,255); }
.scFilterChip.active{
  background:rgb(111,85,255); color:#fff; border-color:rgb(111,85,255);
}
.scChipDot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
}
.scChipCount{
  font-size:11px; opacity:.7;
}

/* Card Grid */
.scGrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px;
}

/* Card */
.scCard{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:18px 20px; cursor:pointer;
  transition: box-shadow .2s, border-color .2s, transform .15s;
  display:flex; flex-direction:column; gap:8px; position:relative;
}
.scCard:hover{
  border-color:rgba(111,85,255,.2); box-shadow:0 4px 16px rgba(111,85,255,.08);
  transform:translateY(-1px);
}
.scCard.sc-unread::before{
  content:""; position:absolute; top:10px; left:10px;
  width:7px; height:7px; border-radius:50%; background:rgb(111,85,255);
}

.scCardHead{
  display:flex; align-items:center; gap:8px;
}
.scCardBadge{
  display:inline-block; padding:3px 10px; border-radius:6px;
  font-size:11px; font-weight:500; color:#fff; white-space:nowrap;
}
.scCardScore{
  margin-left:auto; font-size:12px; font-weight:600; color:#64748b;
  background:rgba(0,0,0,.04); padding:2px 8px; border-radius:6px;
}
.scCardTitle{
  font-size:14px; font-weight:500; color:#0f172a; line-height:1.4;
}
.scCardMsg{
  font-size:13px; color:#64748b; line-height:1.5;
}

.scCardActions{
  display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;
}
.scCardAction{
  border:1px solid rgba(111,85,255,.2); background:rgba(111,85,255,.04);
  color:rgb(111,85,255); padding:5px 12px; border-radius:6px;
  font-size:12px; font-weight:500; cursor:pointer;
  transition: background .2s, color .2s;
}
.scCardAction:hover{
  background:rgb(111,85,255); color:#fff;
}

.scCardFoot{
  display:flex; align-items:center; justify-content:space-between; margin-top:auto;
}
.scCardDate{ font-size:11px; color:#94a3b8; }
.scCardMeta{ font-size:11px; color:#94a3b8; text-transform:capitalize; }
.scCardDismiss{
  border:none; background:none; cursor:pointer; font-size:18px;
  color:#cbd5e1; line-height:1; padding:2px 4px; border-radius:4px;
  transition: color .2s, background .2s;
}
.scCardDismiss:hover{ color:#ef4444; background:rgba(239,68,68,.06); }

/* Empty State */
.scEmpty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:48px 24px; gap:12px; color:#94a3b8; text-align:center;
}
.scEmpty p{ font-size:14px; max-width:360px; line-height:1.6; }

/* Health Cards */
.scHealthGrid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:16px;
}
.scHealthCard{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px;
  padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.scHealthHead{
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
  padding-bottom:14px; border-bottom:1px solid rgba(0,0,0,.05);
}
.scHealthHead h4{ font-size:15px; font-weight:500; color:#0f172a; margin:0; }
.scHealthBody{ display:flex; flex-direction:column; gap:10px; }
.scHealthRow{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; padding:4px 0;
}
.scHealthLabel{ color:#64748b; }
.scHealthVal{ color:#0f172a; font-weight:500; }

/* Drawer */
.scDrawer{
  position:fixed; top:0; right:-480px; width:460px; max-width:100%;
  height:100vh; background:#fff; z-index:1100;
  box-shadow:-8px 0 30px rgba(0,0,0,.1);
  transition: right .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.scDrawer.open{ right:0; }
.scDrawerPanel{
  display:flex; flex-direction:column; flex:1; min-height:0;
  background:#fff; position:relative;
}
.scDrawerBack{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.18); cursor:default; z-index:-1;
}
.scDrawer.open .scDrawerBack{ display:block; }
.scDrawerHead{
  display:flex; align-items:center; gap:12px; padding:22px 24px 16px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.scDrawerBadge{
  padding:4px 12px; border-radius:6px; font-size:11px; font-weight:500; color:#fff;
}
.scDrawerTitleBlock{ flex:1; }
.scDrawerTitle{
  font-size:16px; font-weight:500; color:#0f172a; margin:0;
}
.scDrawerClose{
  border:none; background:none; cursor:pointer; font-size:22px;
  color:#94a3b8; padding:4px; border-radius:6px; transition: color .2s;
}
.scDrawerClose:hover{ color:#ef4444; }

.scDrawerBody{
  flex:1; overflow-y:auto; padding:24px;
}
.scDrawerDate{ font-size:12px; color:#94a3b8; margin-bottom:12px; }
.scDrawerMsg{ font-size:14px; color:#334155; line-height:1.7; margin-bottom:20px; }

.scDrawerTable{ margin-bottom:20px; }
.scDrawerTable table{ width:100%; border-collapse:collapse; font-size:13px; }
.scDrawerTable td{ padding:8px 0; border-bottom:1px solid rgba(0,0,0,.04); }
.scTdKey{ color:#64748b; width:130px; }

.scDrawerActions{ display:flex; gap:8px; flex-wrap:wrap; }
.scDrawerAction{
  padding:8px 18px; border-radius:8px; font-size:13px; font-weight:500;
  background:rgb(111,85,255); color:#fff; border:none; cursor:pointer;
  transition: opacity .2s;
}
.scDrawerAction:hover{ opacity:.85; }

/* Drawer overlay handled by .scDrawerBack */

/* ── SC Dark mode ── */
:root[data-theme="dark"] .scKpi{ background:#1e1e2e; border-color:rgba(255,255,255,.06); }
:root[data-theme="dark"] .scKpiVal{ color:#e2e8f0; }
:root[data-theme="dark"] .scKpiLabel{ color:#94a3b8; }
:root[data-theme="dark"] .scTabs{ background:rgba(255,255,255,.04); }
:root[data-theme="dark"] .scTab{ color:#94a3b8; }
:root[data-theme="dark"] .scTab:hover{ color:#e2e8f0; background:rgba(255,255,255,.06); }
:root[data-theme="dark"] .scTab.active{ background:#1e1e2e; color:rgb(139,92,246); }
:root[data-theme="dark"] .scFilterChip{ background:#1e1e2e; border-color:rgba(255,255,255,.08); color:#cbd5e1; }
:root[data-theme="dark"] .scFilterChip.active{ background:rgb(111,85,255); color:#fff; }
:root[data-theme="dark"] .scCard{ background:#1e1e2e; border-color:rgba(255,255,255,.06); }
:root[data-theme="dark"] .scCard:hover{ border-color:rgba(139,92,246,.25); box-shadow:0 4px 16px rgba(139,92,246,.12); }
:root[data-theme="dark"] .scCardTitle{ color:#e2e8f0; }
:root[data-theme="dark"] .scCardMsg{ color:#94a3b8; }
:root[data-theme="dark"] .scCardScore{ background:rgba(255,255,255,.06); color:#a5b4fc; }
:root[data-theme="dark"] .scHealthCard{ background:#1e1e2e; border-color:rgba(255,255,255,.06); }
:root[data-theme="dark"] .scHealthHead{ border-bottom-color:rgba(255,255,255,.06); }
:root[data-theme="dark"] .scHealthHead h4{ color:#e2e8f0; }
:root[data-theme="dark"] .scHealthVal{ color:#e2e8f0; }
:root[data-theme="dark"] .scDrawer{ background:#1e1e2e; box-shadow:-8px 0 30px rgba(0,0,0,.4); }
:root[data-theme="dark"] .scDrawerPanel{ background:#1e1e2e; }
:root[data-theme="dark"] .scDrawerHead{ border-bottom-color:rgba(255,255,255,.06); }
:root[data-theme="dark"] .scDrawerTitle{ color:#e2e8f0; }
:root[data-theme="dark"] .scDrawerMsg{ color:#cbd5e1; }
:root[data-theme="dark"] .scDrawerTable td{ border-bottom-color:rgba(255,255,255,.04); }

/* ── SC Responsive ── */
@media (max-width: 900px){
  .scKpiRow{ grid-template-columns:repeat(2,1fr); }
  .scGrid{ grid-template-columns:1fr; }
  .scHealthGrid{ grid-template-columns:1fr; }
}
@media (max-width: 500px){
  .scKpiRow{ grid-template-columns:1fr; }
  .scDrawer{ width:100%; }
}

/* ── Impersonation Bar ── */
.impersonateBar{
  position:fixed;top:0;left:0;right:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:8px 20px;
  background:linear-gradient(135deg,#d32f2f 0%,#b71c1c 100%);
  color:#fff;font-size:13px;font-weight:500;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.impersonateBar.active ~ .app{ margin-top:40px; }

/* ── Permission Checkbox ── */
.permCheck{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;cursor:pointer;padding:6px 10px;border-radius:8px;border:1px solid var(--line);transition:background .15s}
.permCheck:hover{background:var(--bg2)}
.permCheck input{accent-color:var(--primary)}

/* ── Global Font Weight Softener ──
   Inter renders heavy – aggressively soften all inline weights. */
.page [style*="font-weight:1000"],
.page [style*="font-weight: 1000"]{font-weight:600 !important}
.page [style*="font-weight:900"],
.page [style*="font-weight: 900"]{font-weight:600 !important}
.page [style*="font-weight:800"],
.page [style*="font-weight: 800"]{font-weight:500 !important}
.page [style*="font-weight:700"],
.page [style*="font-weight: 700"]{font-weight:500 !important}
.page [style*="font-weight:650"],
.page [style*="font-weight: 650"]{font-weight:400 !important}
.page [style*="font-weight:600"],
.page [style*="font-weight: 600"]{font-weight:500 !important}
.erModal [style*="font-weight:1000"],
.erModal [style*="font-weight: 1000"]{font-weight:600 !important}
.erModal [style*="font-weight:900"],
.erModal [style*="font-weight: 900"]{font-weight:600 !important}
.erModal [style*="font-weight:800"],
.erModal [style*="font-weight: 800"]{font-weight:500 !important}
.erModal [style*="font-weight:700"],
.erModal [style*="font-weight: 700"]{font-weight:500 !important}
.erModal [style*="font-weight:650"],
.erModal [style*="font-weight: 650"]{font-weight:400 !important}
.erModal [style*="font-weight:600"],
.erModal [style*="font-weight: 600"]{font-weight:500 !important}

/* ===== Pixel UI Mode (toggle: body.pixel-ui) ===== */
body.pixel-ui{
  --pxCut: 4px;
}

body.pixel-ui .main{
  background-image: linear-gradient(rgba(111,85,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(111,85,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
}

body.pixel-ui .card,
body.pixel-ui .btn,
body.pixel-ui .btnLight,
body.pixel-ui .btnPrimary,
body.pixel-ui .appCard,
body.pixel-ui .kpiRow,
body.pixel-ui .kpiItem,
body.pixel-ui .nav a,
body.pixel-ui .nav button,
body.pixel-ui input,
body.pixel-ui select,
body.pixel-ui textarea,
body.pixel-ui .tabLink,
body.pixel-ui .tabsRow,
body.pixel-ui .erFilterPanel,
body.pixel-ui .erModalCard,
body.pixel-ui table,
body.pixel-ui th,
body.pixel-ui td{
  border-radius: 0 !important;
  clip-path: polygon(0 var(--pxCut),var(--pxCut) var(--pxCut),var(--pxCut) 0,calc(100% - var(--pxCut)) 0,calc(100% - var(--pxCut)) var(--pxCut),100% var(--pxCut),100% calc(100% - var(--pxCut)),calc(100% - var(--pxCut)) calc(100% - var(--pxCut)),calc(100% - var(--pxCut)) 100%,var(--pxCut) 100%,var(--pxCut) calc(100% - var(--pxCut)),0 calc(100% - var(--pxCut)));
}

body.pixel-ui .card,
body.pixel-ui .appCard,
body.pixel-ui .kpiRow,
body.pixel-ui .kpiItem,
body.pixel-ui table{
  border: 2px solid #d1d5db !important;
  box-shadow: 4px 4px 0 rgba(15,23,42,.07) !important;
}

body.pixel-ui .btn,
body.pixel-ui .btnLight,
body.pixel-ui .btnPrimary{
  border-width: 2px !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
}

body.pixel-ui .btn:hover,
body.pixel-ui .btnLight:hover,
body.pixel-ui .btnPrimary:hover{
  transform: translate(-2px,-2px) !important;
  box-shadow: 4px 4px 0 var(--text) !important;
}

body.pixel-ui .btn:active,
body.pixel-ui .btnLight:active,
body.pixel-ui .btnPrimary:active{
  transform: translate(0,0) !important;
  box-shadow: none !important;
}

body.pixel-ui .tabLink.active::after{
  height: 4px !important;
  border-radius: 0 !important;
}

body.pixel-ui input[type="checkbox"],
body.pixel-ui input[type="radio"]{
  clip-path: none !important;
  width: 16px;
  height: 16px;
  border-radius: 4px !important;
  accent-color: var(--primary);
  box-shadow: none !important;
}

body.pixel-ui input[type="radio"]{
  border-radius: 50% !important;
}