@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@400;600;700&family=Roboto:wght@400;500;700&family=Manrope:wght@400;600;700&family=Montserrat:wght@400;600;700&family=Open+Sans:wght@400;600;700&family=Nunito:wght@400;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root{
  --bg: #f7f9fc;
  --bg-soft: #eef3fb;
  --panel: #ffffff;
  --panel-2: #f4f7fd;
  --text: #1f2937;
  --muted: #6b7280;

  --primary: #3b82f6;     /* mavi */
  --primary-600:#2563eb;
  --primary-100:#eaf2ff;

  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;

  --border:#e5e7eb;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, .08);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, .10);

  --menu-grad: linear-gradient(135deg, #f8fbff 0%, #eaf1fb 100%);
  --menu-glass: rgba(255,255,255,.65);
  --menu-glass-strong: rgba(255,255,255,.85);

  --radius: 12px;
}

/* ===== Anbar picker (premium + mobile friendly) ===== */
.anbar-picked-label{
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  vertical-align: middle;
}

.anbar-label-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
}

.anbar-label-row > label{
  margin: 0;
  flex: 1 1 auto;
}

.anbar-open-picker-btn{
  margin-left: 0;
  width: 5ch;
  min-width: 5ch;
  height: 24px;
  border: 1px solid #d97706;
  border-radius: 8px;
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  color: #422006;
  background: linear-gradient(135deg,#ffedd5 0%,#fed7aa 55%,#fdba74 100%);
  box-shadow: 0 4px 12px rgba(217,119,6,.22), inset 0 1px 0 rgba(255,255,255,.85);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.anbar-open-picker-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(217,119,6,.28), inset 0 1px 0 rgba(255,255,255,.9);
  filter: saturate(1.05);
}

.anbar-open-picker-btn:active{
  transform: translateY(0);
}

.ap-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  align-items:center;
  justify-content:center;
  padding: clamp(10px, 2vw, 20px);
  background: rgba(16, 74, 48, .58);
  backdrop-filter: blur(5px);
}

.ap-card{
  width: min(520px, 100%);
  max-height: min(82vh, 760px);
  display:flex;
  flex-direction:column;
  gap: 12px;
  background: linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border: 1px solid #dbe7ff;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 24px 60px rgba(2,6,23,.30), 0 1px 0 rgba(255,255,255,.85) inset;
}

.ap-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
}

.ap-header h3{
  margin:0;
  font-size: 18px;
  color:#0f172a;
}

.ap-subtitle{
  margin: 4px 0 0;
  font-size: 12px;
  color:#64748b;
}

.ap-icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid #d4def2;
  background: #f8fbff;
  color: #334155;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.ap-toolbar{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.ap-toolbar-row{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 8px;
}

.ap-main-actions{
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap;
  width: 100%;
}

.ap-chip-btn{
  height: 27px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor:pointer;
  flex: 0 0 auto;
}

.ap-main-actions .ap-chip-btn{
  flex: 1 1 0;
}

.ap-chip-primary{ background:#e0edff; border-color:#b6cdfb; color:#1e3a8a; }
.ap-chip-warn{ background:#fff4d8; border-color:#fde68a; color:#92400e; }
.ap-chip-muted{ background:#f1f5f9; border-color:#cbd5e1; color:#334155; }

.ap-hint{
  margin-left: 0;
  font-size: 11px;
  color:#64748b;
  white-space: normal;
  line-height: 1.35;
}

.ap-list-wrap{
  border:1px solid #dbe7ff;
  border-radius: 14px;
  overflow: auto;
  max-height: min(50vh, 420px);
  background:#fff;
}

.ap-table{
  width:100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ap-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background:#f3f8ff;
  color:#1e293b;
  text-align: left;
  font-weight: 800;
  border-bottom: 1px solid #dbe7ff;
  padding: 10px 8px;
}

.ap-table thead th:nth-child(1){
  width: 44px;
  text-align:center;
}

.ap-table tbody tr:nth-child(odd){
  background: #fcfdff;
}

.ap-table tbody tr:hover{
  background:#eef4ff;
}

.ap-col-check{
  width:44px;
  text-align:center;
  border-bottom:1px solid #edf2ff;
  padding: 6px 4px;
}

.ap-col-value{
  border-bottom:1px solid #edf2ff;
  padding: 6px;
  font-weight: 600;
  color:#0f172a;
}

.ap-col-name{
  border-bottom:1px solid #edf2ff;
  padding: 6px;
  color:#334155;
  font-size: 12px;
}

.ap-choice-radio,
.ap-choice-check{
  transform: scale(1.04);
  accent-color: #2563eb;
  cursor: pointer;
}

.ap-footer{
  display:flex;
  justify-content:flex-end;
  gap: 8px;
}

.ap-action-btn{
  min-height: 36px;
  border-radius: 11px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.ap-apply-btn{
  background: linear-gradient(135deg,#3b82f6,#1d4ed8);
  border-color: #1d4ed8;
  color: #fff;
}

.ap-close-btn{
  background:#f1f5f9;
  border-color:#cbd5e1;
  color:#334155;
}

@media (max-width: 640px){
  .anbar-picked-label{
    display:block;
    width:max-content;
    margin: 6px 0 0;
  }

  .anbar-open-picker-btn{
    margin: 0;
    width: 5ch;
    min-width: 5ch;
    height: 24px;
  }

  .ap-card{
    width:100%;
    max-height: calc(100vh - 16px);
    border-radius: 16px;
    padding: 12px;
    gap: 10px;
  }

  .ap-hint{
    margin-left: 0;
  }

  .ap-list-wrap{
    max-height: calc(100vh - 280px);
  }

  .ap-action-btn{
    flex:1;
    min-height: 40px;
  }
}


* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: var(--app-font-family, "Segoe UI", Tahoma, Arial, sans-serif);
    font-size: var(--app-font-size, 16px);
    line-height: var(--app-line-height, 1.45);
    letter-spacing: var(--app-letter-spacing, 0px);
    height: 100%;
    background-color: #f8f8f8;
}

#wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.side-menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1200;
}

.side-menu.show {
    transform: translateX(0);
}


.side-menu h2 {
    margin-top: 0;
    font-size: 22px;
}

.side-menu button {
    display: block;
    width: 100%;
    margin: 2px 0;
    padding: 7px;
    background: none;
    color: white;
    border: none;
    text-align: left;
    font-size: 14px;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    cursor: pointer;
}



.main-content {
    width: 100%;
    margin-left: 0;
    /* üst: float menyu altında qalmaq üçün kifayət; əvvəl 20px + .page margin ilə üçqat boşluq yaranırdı */
    padding: 8px 20px 20px;
    transition: margin-left 0.3s ease;
    overflow-y: auto;
}

.side-menu.show ~ .main-content {
    margin-left: 260px;
}

#menuButton {
    font-size: 24px;
    background: #3498db;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 15;
}

.page {
    /* #floatMenuBtn: top 12px + h≈40px — bir sətir boşluqla kifayət, köhnə 60px çox idi */
    margin-top: 40px;
    display: none;
}

.page.active {
    display: block;
}

h2 {
    margin-bottom: 20px;
}

label {
    font-weight: bold;
    display: block;
    margin-top: 10px;
}

input {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #2980b9;
    color: white;
    border: none;
    padding: 12px;
    width: 100%;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #1f6391;
}

pre, table {
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
    font-size: 14px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

/* Bütün cədvəllər üçün default hüceyrə stili */
th, td {
    border: 1px solid #000;  /* qara sərhəd */
    padding: 8px;
    text-align: left;
}

th {
    background-color: #ecf0f1;
    font-weight: bold;
}


/* ==== Üst sol “menu” butonu (floatMenuBtn) ==== */
/* FLOAT MENU – glass + gradient ring + icon morph */
#floatMenuBtn{
  position: fixed; top:12px; left:12px;
  width:52px; height:52px;
  padding:0; border:none; cursor:pointer; z-index: 1300;

  /* gradient border + glass iç */
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    radial-gradient(140% 140% at 0% 0%, #dbeafe 0%, #f8fafc 40%, #e9efff 100%) border-box;
  border:1px solid transparent;
  border-radius:14px;

  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .20s ease, background .25s ease, filter .25s ease;
}
#floatMenuBtn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0) 10%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 75%);
  transform: translateX(-130%);
  opacity:.75;
  pointer-events:none;
  transition: transform .55s ease;
}

/* hover / active */
#floatMenuBtn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.02); }
#floatMenuBtn:hover::before{ transform: translateX(130%); }
#floatMenuBtn:active{ transform: translateY(0) scale(.98); }

/* focus halqası */
#floatMenuBtn:focus-visible{
  outline:none; box-shadow: 0 0 0 4px var(--primary-100), var(--shadow-md);
}

/* yumşaq “attention” nəbzi – menu bağlı ikən */
#floatMenuBtn:not([data-open="true"]){
  animation: fm-pulse 2.6s ease-in-out infinite;
}
@keyframes fm-pulse{
  0%{ box-shadow: var(--shadow-sm); }
  50%{ box-shadow: 0 12px 34px rgba(37, 99, 235, .18); }
  100%{ box-shadow: var(--shadow-sm); }
}
/* ===================== Float Menu Btn (optimized) ===================== */
#floatMenuBtn{
  /* İkon ölçülərini buradan tənzimlə */
  --fm-w: 18px;     /* hamburger xəttinin eni (kiçiltmək üçün 16–18) */
  --fm-h: 2px;      /* xətt qalınlığı */
  --fm-gap: 6px;    /* xəttlər arası məsafə */
  --fm-color: #0f172a;

  width: 40px;
  height: 40px;
  padding: 6px;
  overflow: hidden;           /* ripple üçün */
  position: relative;         /* tooltip və ikon üçün referans */
}

/* Tooltip (data-tooltip) */
#floatMenuBtn[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translate(6px, -50%);
  white-space: nowrap;
  pointer-events: none;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
#floatMenuBtn:hover::after{
  opacity: 1;
  transform: translate(0, -50%);
}

/* Hamburger → Arrow ikon animasiyası */
#floatMenuBtn .fm-icon{
  position: absolute;
  inset: 0;
  margin: auto;
  width: var(--fm-w);
  height: var(--fm-h);              /* orta xətt */
  background: var(--fm-color);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease, background .2s ease, width .22s ease;
}
#floatMenuBtn .fm-icon::before,
#floatMenuBtn .fm-icon::after{
  content: "";
  position: absolute;
  left: 0; right: 0; margin: auto;
  width: 100%;
  height: var(--fm-h);
  background: var(--fm-color);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease, background .2s ease, width .22s ease;
  transform-origin: left center;
}
#floatMenuBtn .fm-icon::before{ top: calc(-1 * var(--fm-gap)); }
#floatMenuBtn .fm-icon::after { top: var(--fm-gap); }

/* Açıq halda sola baxan Arrow formasına keçid */
#floatMenuBtn[data-open="true"]{
  background:
    linear-gradient(#f4f7ff, #ffffff) padding-box,
    radial-gradient(140% 140% at 100% 0%, #c7dbff 0%, #eff4ff 60%, #ffffff 100%) border-box;
}
#floatMenuBtn[data-open="true"] .fm-icon{
  width: calc(var(--fm-w) - 2px);
  transform: translateX(2px);
}
#floatMenuBtn[data-open="true"] .fm-icon::before{
  width: 9px;
  transform: translateY(1px) rotate(-42deg);
}
#floatMenuBtn[data-open="true"] .fm-icon::after{
  width: 9px;
  transform: translateY(-1px) rotate(42deg);
}

/* Ripple effekt */
#floatMenuBtn .ripple{
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  aspect-ratio: 1/1;
  background: radial-gradient(circle, rgba(37,99,235,.25) 0%, rgba(37,99,235,0) 60%);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple{
  to{ transform: translate(-50%,-50%) scale(5); opacity: 0; }
}
/* ===================== /Float Menu Btn ===================== */



/* ==== Token status – light + pulse ==== */
#tokenStatus{
  position:fixed;
  top:12px; right:12px;
  width:16px; height:16px;
  border-radius:50%;
  background: var(--danger);
  box-shadow: 0 0 0 0 rgba(239,68,68,.5);
  animation: pulse 1.6s infinite;
  z-index:1000;
  border: 2px solid #fff;
}
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
/* Token yaşıl məlum olduqda (JS ilə class əlavə edə bilərsən: .ok) */
#tokenStatus.ok{ background: var(--success) }
#tokenStatus.ok{ animation-duration: 2.2s }

input, button {
    font-size: 14px;
    padding: 8px;
}

label {
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

.row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.col {
    flex: 1;
}



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

.kv-table th, .kv-table td {
    border: 1px solid #ccc;
    padding: 4px;
    text-align: center
}

.kv-table th {
    background: #f2f2f2
}

.column-box {
    font-size: 12px;
    margin-top: 6px
}

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, .4);
}

/* Bütün modallar üçün qutunu ekranın tam ortasına gətir */
.modal-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;

    background: #fff;
    padding: 15px;
    border: 1px solid #888;
    width: 85%;
    max-width: 400px;
    border-radius: 8px;
    font-size: 14px;
}




.close {
    float: right;
    font-size: 22px;
    cursor: pointer
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 10px;
}

.column-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 10px 0;
    list-style: none;
    margin: 0 auto;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
}

.column-toggle li {
    display: flex;
    align-items: center;
}

.column-toggle input[type="checkbox"] {
    margin-right: 5px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

#mallarFilters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f4f4f4;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
}

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

.mallar-filters select,
.mallar-filters input {
    padding: 4px 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
}


#satisPayiTable th,
#satisPayiTable td {
    font-size: 16px !important; /* Yazı ölçüsünü artırır */
    border: 1px solid #000 !important; /* Hüceyrələrə xət */
}

#satisPayiTable th {
    background-color: yellow !important; /* Başlıqlar üçün sarı fon */
    text-align: center !important; /* Başlıqdakı sözlər ortada */
    font-weight: bold;
}

#satisPayiTable thead th {

    color: #000000 !important;            /* Tünd qara rəngli mətn */
    font-size: 16px !important;           /* Daha böyük yazı ölçüsü */
    font-weight: 900 !important;          /* Daha qalın yazı stili */
    padding: 12px 10px !important;        /* Daxili boÅŸluq */
    text-align: center !important;        /* Mərkəzə düzləndirmə */
    border: 1px solid #1a252f !important;  /* Tünd çərçivə */
    text-transform: uppercase;            /* Böyük hərflər */
    letter-spacing: 0.5px;                /* Hərflər arası məsafə */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); /* Yüngül kölgə */
}

#satisPayiTable th,
#satisPayiTable td {
    font-size: 16px !important; /* Yazı ölçüsünü artırır */
    border: 1px solid #000 !important; /* Hüceyrələrə xət */
}

#dermanTable {
    max-height: 400px;
    overflow-y: auto;
    display: block;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: Calibri, sans-serif;
    font-size: 14px;
}

.table th, .table td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    text-align: center;
}

.table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

/* Cədvəl tam xətli və səliqəli */
.table-bordered {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-weight: bold;
}

.table-bordered th,
.table-bordered td {
    border: 1px solid #999;
    padding: 6px;
    text-align: center;
}

/* Başlıqların fonu sarı və yazılar bold */
.table-bordered thead th {
    background-color: yellow;
    font-weight: bold;
}

body, table {
    font-family: Calibri, sans-serif;
}

.xsResultBox {
    margin-top: 20px;
    background: #fffde7;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.xsTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.xsTable th,
.xsTable td {
    border: 1px solid #aaa;
    padding: 8px 12px;
    text-align: center;
}

.row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
}

#sideMenu {
    overflow-y: auto;
    max-height: 100vh;
}


#transferTable tbody tr:nth-child(even) {
    background-color: #f0f8ff; /* açıq mavi */
}

#transferTable tbody tr:nth-child(odd) {
    background-color: white;
}

.reportTitle {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
    color: #333;
    text-align: center;
}

.kvotaDetailTable {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    margin-top: 10px;
}

.kvotaDetailTable th,
.kvotaDetailTable td {
    border: 1px solid #aaa;
    padding: 10px;
    text-align: center;
}

.kvotaDetailTable th {
    background-color: #4CAF50;
    color: white;
    font-size: 16px;
}

.kvotaDetailTable tr:nth-child(even) {
    background-color: #f9f9f9;
}

.kvotaDetailTable tr:hover {
    background-color: #e0f7fa;
}

#balansTable tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* style.css-ə əlavə et */
.zebra-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.zebra-table tbody tr:nth-child(even) {
    background-color: #ffffff;
}

.zebra-table thead tr {
    background-color: #dddddd;
    font-weight: bold;
    text-align: center;
}

.zebra-table td,
.zebra-table th {
    padding: 6px;
    border: 1px solid #999;
    font-size: 13px;
    text-align: center;
}

.page {
    padding: 6px 15px 15px;
}

.form-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.form-row label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.form-row input, .form-row select {
    padding: 6px;
    min-width: 120px;
}

.date-range input {
    min-width: 130px;
}

.filter-panel {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #f9f9f9;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.primary-btn {
    background: #007bff;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
}

.primary-btn:hover {
    background: #0056b3;
}

.back-btn {
    background: #ccc;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.loading-text {
    margin-top: 10px;
    font-style: italic;
    display: none;
}

.result-section {
    margin-top: 20px;
}

.side-menu {
    background: #1e1e2f;
    padding: 15px;
    width: 250px;
}

.side-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 10px;
    width: 100%;
    color: white;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.side-menu button:hover {
    background: #2c2c40;
    padding-left: 15px;
}

.side-menu .icon {
    width: 20px;
    height: 20px;
}


/* Kvota */
.side-menu button i.fa-clipboard-list { color: #3f51b5; }

/* Dövriyyə */
.side-menu button i.fa-chart-line { color: #009688; }

/* Xüsusi kvota */
.side-menu button i.fa-calculator { color: #795548; }

/* Kvota Əməkdaş */
.side-menu button i.fa-user-friends { color: #8e24aa; }

/* Kvota Qrup */
.side-menu button i.fa-folder-open { color: #ff9800; }

/* Kvota Analizi */
.side-menu button i.fa-chart-pie { color: #4caf50; }

/* Aptekonline */
.side-menu button i.fa-globe { color: #03a9f4; }

/* Marafon */
.side-menu button i.fa-trophy { color: #ffc107; }

/* Satış Payı */
.side-menu button i.fa-chart-area { color: #673ab7; }

/* Bonus Kart */
.side-menu button i.fa-credit-card { color: #9c27b0; }

/* Tələbət Statistikası */
.side-menu button i.fa-tags { color: #e91e63; }

/* Artıq-Əskik */
.side-menu button i.fa-boxes { color: #ff5722; }

/* PS Satışları */
.side-menu button i.fa-receipt { color: #4caf50; }

/* Transfer Yığım */
.side-menu button i.fa-exchange-alt { color: #ff7043; }

/* Transfer Yığım Status */
.side-menu button i.fa-truck { color: #d84315; }

/* İadələrin Analizi */
.side-menu button i.fa-undo-alt { color: #00bcd4; }

/* Qalıq Tənzimləmə */
.side-menu button i.fa-balance-scale { color: #607d8b; }

/* Transfer Sorgu */
.side-menu button i.fa-hospital { color: #f44336; }

/* SIT/SROK */
.side-menu button i.fa-calendar-alt { color: #00acc1; }

/* Mallar */
.side-menu button i.fa-toolbox { color: #6d4c41; }

/* Xüsusi Satışlar */
.side-menu button i.fa-star { color: #ff9800; }

/* Qalığı Satılmalı Mallar */
.side-menu button i.fa-pills { color: #00bcd4; }

/* Satışlar Tablosu */
.side-menu button i.fa-chart-bar { color: #009688; }

/* MaliyyÉ™ */
.side-menu button i.fa-wallet { color: #4caf50; }

/* Kassa Əməkdaş */
.side-menu button i.fa-university { color: #5d4037; }

/* Balans */
.side-menu button i.fa-coins { color: #ffd600; }

/* TOP Əməkdaşlar */
.side-menu button i.fa-medal { color: #ffd700; }

/* Dərman Axtar */
.side-menu button i.fa-prescription-bottle-alt { color: #2196f3; }

/* SifariÅŸ */
.side-menu button i.fa-file-alt { color: #3f51b5; }

/* Sazlamalar */
.side-menu button i.fa-cog { color: #9e9e9e; }

/* Google Drive */
.side-menu button i.fa-google-drive { color: #0f9d58; }


:root{
  --dv-brand: #2D7EF7;
  --dv-accent:#18a999;
  --dv-text:#1f2937;
  --dv-stroke:#e9eef5;
  --dv-soft:#f7f9fc;
}

/* ==== Alt taskbar örtmə probleminə global həll ==== */
:root{ --safe-btm: max(24px, env(safe-area-inset-bottom)); } /* mobil safe-area da nəzərə alınır */
html, body{ height:100%; }
#wrapper{ min-height:100%; }

.main-content{
  position: relative;
  min-height: 100%;
  /* alt boşluq: bütün səhifələr üçün kifayət qədər pay bırakır */
  padding-bottom: calc(120px + var(--safe-btm));
  overflow: auto;             /* skroll həmişə content üzərində olsun */
}

/* Hər .page-in sonunda görünməyən “spacer” – alt hissəni taskbar-dan yuxarıda saxlayır */
.page::after{
  content:"";
  display:block;
  height: calc(100px + var(--safe-btm)); /* ehtiyat boÅŸluq */
}

/* ---- Transfer filter bar (responsive) ---- */
.tr-filters{
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 12px 0 8px;
}
.tr-filters .f{ display:flex; flex-direction:column; gap:6px; }

.tr-filters label{
  font-size: 13px;
  font-weight: 700;
  color: #374151;        /* qara ton – mobil üçün oxunaqlı */
}

.tr-filters select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-weight: 600;
  outline: none;
}
.tr-filters select:focus{
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,.12);
}

/* PlanÅŸet */
@media (max-width: 1024px){
  .tr-filters{ grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}
/* Telefon */
@media (max-width: 560px){
  .tr-filters{ grid-template-columns: 1fr; }
}

#dermanTable {
  width: 100%;
  border-collapse: collapse;
}

#dermanTableContainer {
  max-height: 400px; /* siyahının görünən hündürlüyü */
  overflow-y: auto;
  border: 1px solid #ccc;
}




/* STATUS düyməsini həmişə görünən və öncül et */
#btnCheckStatus{ display:inline-block !important; padding:10px 16px; border:0; border-radius:8px; background:#10b981; color:#fff; font-weight:600; }
@media (max-width:640px){
  #btnCheckStatus{ width:100%; }
}
/* Status sütunu məzmun eninə sıxılsın */
.maliyye-table{ table-layout:auto; }
.maliyye-table th.status-col,
.maliyye-table td.status-cell{
  width:1%;            /* minimal pay ayır */
  white-space:nowrap;  /* sətir qırılmasın */
}
.maliyye-table .status-dots{
  display:inline-flex; align-items:center; gap:4px;
}
.maliyye-table .status-dots .dot{ flex:0 0 auto; }

/* Dar sütunlar: Anbar, Tarix, Status, Dəyiş */
.maliyye-table{ table-layout:auto; }

.maliyye-table th.anbar-col,
.maliyye-table th.tarix-col,
.maliyye-table th.status-col,
.maliyye-table th.deyis-col {
  width:1%;
  white-space:nowrap;
}

.maliyye-table td.status-cell,
.maliyye-table td.anbar-cell,
.maliyye-table td.tarix-cell,
.maliyye-table td.deyis-cell {
  white-space:nowrap;
}

.maliyye-table .status-dots{
  display:inline-flex; align-items:center; gap:4px;
}
.maliyye-table .status-dots .dot{ flex:0 0 auto; }

/* KPI iki sütunlu layout-unuzu saran konteyner üçün */
.kpi-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
}

/* 992px və aşağıda tək sütun */
@media (max-width: 992px) {
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
  .kpi-card {
    margin-inline: 0;
  }
}




/* ===== Kvota Modal Dizaynı ===== */



/* Cədvəl */
.kv-table {
  width: 100%;
  max-width: 100%;          /* ✨ Yanlara daşmasın */
  border-collapse: collapse;
  table-layout: auto;       /* Avtomatik geniÅŸlik */
}

.kv-table th,
.kv-table td {
  padding: 8px;
  border-bottom: 1px solid #eee;
  vertical-align: middle;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

/* Dərman adı soldan görünsün və daha geniş olsun */
.kv-table th:nth-child(2),
.kv-table td:nth-child(2) {
  text-align: left;
  white-space: normal;
  max-width: 260px;
}

/* Başlıq sabit qalsın */
.kv-table thead {
  position: sticky;
  top: 0;
  background: #fafafa;
  z-index: 2;
}

/* Aşağı panel (cəmlər + düymələr) */
.kv-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding-top: 10px;
  margin-top: 10px;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, .04);
  z-index: 2;
}

.kv-totals {
  font-weight: 600;
  margin-bottom: 8px;
}

.kv-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ===== Mobil uyÄŸunluq ===== */
@media (max-width: 600px) {
  .kv-modal {
    width: 98vw;
    max-height: 94vh;
    padding: 12px;
  }

  .kv-table th,
  .kv-table td {
    padding: 6px;
    font-size: 13px;
  }

  .kv-table th:nth-child(2),
  .kv-table td:nth-child(2) {
    max-width: 160px;       /* Telefon ekranında daralsın */
  }

  #kvotaDetayModal input[type="number"] {
    width: 96px;
  }

  .kv-actions {
    gap: 8px;
  }
}

  /* ✅ Səliqəli cədvəl dizaynı */
  .kv-wrap { box-shadow:0 6px 20px rgba(0,0,0,.08); border-radius:12px; overflow:hidden; border:1px solid #e6e6e6; }
  .kv-table { border-collapse:collapse; width:100%; font-size:15px; }
  .kv-table thead th {
    background:#ffe08a; color:#222; text-align:center; padding:10px 8px; border-bottom:2px solid #e0c25f; font-weight:800;
  }
  .kv-table tbody td { padding:8px 10px; border-top:1px solid #efefef; }
  .kv-table tbody tr:nth-child(even){ background:#fafafa; }
  .kv-table tfoot td { padding:8px 10px; background:#f5f5f5; border-top:2px solid #e0e0e0; }

  /* İlk 3 sətir – medal fonu */
  .kv-top-1 { background:#fff9e6 !important; }
  .kv-top-2 { background:#eaf7ff !important; }
  .kv-top-3 { background:#eafaea !important; }


/* ░░ Kompaniyalar – əsas görünüş ░░ */
.komp-wrap{padding-inline:6px;}
.komp-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:10px 0;}
.komp-toolbar .field{display:flex;flex-direction:column;gap:4px;}
.pill-btn{padding:10px 14px;border:1px solid #000;border-radius:12px;background:#e9ecef;font-weight:700;color:#111;cursor:pointer;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.08);transition:transform .06s,background .12s}
.pill-btn:hover{background:#dfe3e8}
.pill-btn:active{background:#d0d4d9;transform:translateY(1px)}

.komp-table-wrap{overflow-x:auto}
.komp-table{border-collapse:collapse;width:100%;min-width:860px;font-family:Calibri}
.komp-table th,.komp-table td{border:1px solid #000;padding:6px 8px}
.komp-table thead th{position:sticky;top:0;background:#f5f5f5;z-index:1;cursor:pointer}
.komp-table tbody tr:nth-child(even){background:#fafafa} /* zebra */

.komp-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-weight:800;color:#000!important;line-height:1}
.komp-badge.var{background:#b7f7b7!important;border:1px solid #0a7a0a!important}
.komp-badge.yox{background:#ffc6c6!important;border:1px solid #b33!important}

/* Filtr modal – Fusion */
#kompFilterModal{position:fixed;inset:0;background:rgba(0,0,0,.25);display:none;align-items:center;justify-content:center;z-index:9999}
#kompFilterBox{background:#fff;width:min(520px,94vw);border:1px solid #000;border-radius:12px;padding:14px;box-shadow:0 8px 28px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.15)}
#kompFilterBox h3{margin:0 0 8px 0;font-size:16px}
#kompFilterBox input[type="text"]{padding:8px;border:1px solid #000;border-radius:8px;outline:none}
#kompFilterList{max-height:60vh;overflow:auto;border:1px solid #000;border-radius:10px;padding:6px}
.komp-opt-row{display:grid;grid-template-columns:26px 1fr;gap:6px;align-items:center;padding:6px 4px;border-bottom:1px dashed #000}
#kompFilterBox button{padding:8px 12px;border:1px solid #000;border-radius:10px;background:#e9ecef!important;color:#111!important;font-weight:700;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.08);cursor:pointer;transition:transform .06s,background .12s}
#kompFilterBox button:hover{background:#dfe3e8!important}
#kompFilterBox button:active{background:#d0d4d9!important;transform:translateY(1px)}



/* Tapşırıq cədvəlləri */
/* Tapşırıq cədvəlləri (yenilənib) */
.tap-table{ border-collapse:collapse; width:100%; }

.tap-table th,
.tap-table td{
  border:1px solid #000;   /* qara sərhəd */
  padding:6px 8px;
}

/* Başlıq hüceyrələri: mərkəz və narıncı fon */
.tap-table thead th{
  text-align:center;
  background:#ffa500;      /* narıncı */
  color:#111;              /* oxunaqlı tünd mətn */
}

/* (İstəsən) sətir hündürlüyü daha səliqəli olsun deyə */
.tap-table td{ vertical-align:middle; }

.tap-row-blue { background: #e6f0ff; }   /* TP_YolaSaldim=1 */
.tap-row-red  { background: #ffecec; }   /* TP_YolaSaldim=0 */
.tap-row-yellow { background: #fff9db; } /* LOCK_ROW=1 (detal) */

.tap-progress {
  width: 100%; height: 22px; border-radius: 999px; background: #f1f5f9; overflow:hidden;
}
.tap-progress > div {
  height:100%; transition: width .25s ease;
  background: linear-gradient(90deg,#34d399,#60a5fa);
  text-align:center; font-size:12px; line-height:22px; color:#0f172a; font-weight:600;
}

/* Tapşırıq kontekst menyusu */
#tap_ctxMenu .ctx-item{
  display:block;
  width:180px;
  padding:10px 14px;
  background:#f8fafc;      /* açıq boz-mavi fon */
  color:#111827;           /* qara ton */
  font-weight:700;         /* bold mətn */
  border:none;
  text-align:left;
  cursor:pointer;
  border-radius:8px;
}
#tap_ctxMenu .ctx-item:hover{ background:#e8f0ff; }   /* hover */
#tap_ctxMenu .ctx-item:active{ background:#dbeafe; }  /* klik */
#tap_ctxMenu .ctx-item:focus{
  outline:2px solid #93c5fd;
  outline-offset:2px;
}

/* ==== Ä°KON ANÄ°MASÄ°YALARI ==== */
.kv-ico { display:inline-block; will-change: transform; }

/* Mövzuya uyğun gradient rəng (istəyə görə) */
.kv-ico-grad{
  background: linear-gradient(90deg, #93c5fd, #86efac, #fde68a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}

/* Davamlı 2D fırlanma */
@keyframes kvSpin { to { transform: rotate(360deg); } }
.kv-anim-spin { animation: kvSpin 6s linear infinite; }

/* “Horizontal 360°” – 3D fırlanma (rotateY) */
@keyframes kvSpinY { to { transform: rotateY(360deg); } }
.kv-anim-spinY { transform-style: preserve-3d; animation: kvSpinY 5.5s linear infinite; }

/* Yüngül yuxarı-aşağı “bounce” */
@keyframes kvBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.kv-anim-bounce { animation: kvBounce 1.8s ease-in-out infinite; }

/* Nəfəs kimi “pulse” */
@keyframes kvPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.kv-anim-pulse { animation: kvPulse 1.7s ease-in-out infinite; }

/* Yüngül yellənmə (swing) */
@keyframes kvSwing {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  50% { transform: rotate(6deg); }
  75% { transform: rotate(-4deg); }
}
.kv-anim-swing { animation: kvSwing 1.2s ease-in-out infinite; }

/* Kiçik sağ-sol “shake” */
@keyframes kvShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}
.kv-anim-shake { animation: kvShake 0.8s ease-in-out infinite; }

/* Hover-only variantları (sonsuz deyil) */
.kv-hover-spinY:hover { animation: kvSpinY 1.2s linear; }
.kv-hover-swing:hover { animation: kvSwing .9s ease-in-out; }
.kv-hover-pulse:hover { animation: kvPulse 1.2s ease-in-out; }

/* Hərəkəti azalt seçimi olanlara hörmət */
@media (prefers-reduced-motion: reduce){
  .kv-anim-spin, .kv-anim-spinY, .kv-anim-bounce, .kv-anim-pulse, .kv-anim-swing, .kv-anim-shake,
  .kv-hover-spinY:hover, .kv-hover-swing:hover, .kv-hover-pulse:hover { animation: none !important; }
}

/* Qaçan adam animasiyası (Marafon) */
@keyframes kvRun {
  0%   { transform: translateX(0) translateY(0) }
  20%  { transform: translateX(2px) translateY(-1px) }
  40%  { transform: translateX(4px) translateY(0) }
  60%  { transform: translateX(6px) translateY(-1px) }
  80%  { transform: translateX(8px) translateY(0) }
  100% { transform: translateX(10px) translateY(-1px) }
}
.kv-anim-run{
  animation: kvRun 0.9s ease-in-out infinite alternate;
}

/* Mövcud gradient və ikon bazası (əvvəlki siniflərlə uyğun) */
.kv-ico{ display:inline-block; will-change:transform; }
.kv-ico-grad{
  background: linear-gradient(90deg,#93c5fd,#86efac,#fde68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}

/* Hərəkəti azalt */
@media (prefers-reduced-motion: reduce){
  .kv-anim-run{ animation:none !important; }
}

/* ===== Mükafat əməkdaş: Apteklər üzrə cədvəl üçün stil ===== */
.kv-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 12px 0;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



.kv-table th {
  background-color: #2c3e50;
  color: white;
  font-weight: 600;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid #000;
}

.kv-table th.left {
  text-align: left;
}

.kv-table tbody tr {
  transition: background-color 0.2s ease;
}

.kv-table tbody tr:hover {
  background-color: #f5f5f5;
}

.kv-table td {
  padding: 10px 8px;
  border: 1px solid #e0e0e0;
  text-align: center;
}

.kv-table td.left {
  text-align: left;
}

.kv-table tfoot tr {
  background-color: #f8f9fa;
  font-weight: bold;
}

.kv-table tfoot td {
  padding: 12px 8px;
  border-top: 2px solid #000;
}

.kv-row-odd {
  background-color: #ffffff;
}

.kv-row-even {
  background-color: #f9f9f9;
}

.kv-headline {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #2c3e50;
}

.kv-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 1rem;
}

.kv-btn {
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.kv-btn:hover {
  background: #f5f5f5;
}

.kv-primary {
  background-color: #3b82f6;
  color: white;
  border-color: #2563eb;
}

.kv-primary:hover {
  background-color: #2563eb;
}

/* For better mobile experience */
@media (max-width: 768px) {
  .kv-table {
    font-size: 12px;
  }

  .kv-table th, .kv-table td {
    padding: 8px 4px;
  }

  .kv-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* Animasiya açarları */
@keyframes kvBob {
  0%   { transform: translateY(0) rotate(-6deg); }
  100% { transform: translateY(-1.8px) rotate(-2deg); }
}
@keyframes kvArmLeft {
  0%   { transform: rotate(30deg); }
  100% { transform: rotate(-10deg); }
}
@keyframes kvArmRight {
  0%   { transform: rotate(-50deg); }
  100% { transform: rotate(-5deg); }
}
@keyframes kvLegLeft {
  0%   { transform: rotate(18deg) translateY(0); }
  100% { transform: rotate(-18deg) translateY(0.6px); }
}
@keyframes kvLegRight {
  0%   { transform: rotate(-22deg) translateY(0.6px); }
  100% { transform: rotate(16deg) translateY(0); }
}
@keyframes kvShadow{
  0%   { transform: scaleX(1);   opacity:.18; }
  100% { transform: scaleX(0.86); opacity:.10; }
}

/* Hərəkəti azalt istəyənlər üçün */
@media (prefers-reduced-motion: reduce){
  .kv-shadow, .kv-body, .kv-arm-left, .kv-arm-right, .kv-leg-left, .kv-leg-right { animation: none !important; }
}
/* Vertikal 360° (rotateX) */
@keyframes kvSpinX { to { transform: rotateX(360deg); } }
.kv-anim-spinX{ transform-style:preserve-3d; animation: kvSpinX 5s linear infinite; }

/* Yan menyuda 3D effekti gücləndirmək üçün (opsional) */
.side-menu{ perspective: 700px; }

.kv-ico{ display:inline-block; will-change:transform; }
.kv-ico-grad{
  background: linear-gradient(90deg,#93c5fd,#86efac,#fde68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
@keyframes kvSpin { to { transform: rotate(360deg); } }
.kv-anim-spin { animation: kvSpin 6s linear infinite; } /* default sürət */

/* Saat əqrəbinin əksi istiqamətində fırlanma */
.kv-anim-spin-ccw{
  animation: kvSpin 6s linear infinite reverse; /* kvSpin artıq varsa, sadəcə reverse */
}

/* Əgər kvSpin yoxdur-sa, əlavə et: */
@keyframes kvSpin { to { transform: rotate(360deg); } }

/* Baza siniflər (əvvəldən yoxdursa) */
.kv-ico{ display:inline-block; will-change:transform; }
.kv-ico-grad{
  background: linear-gradient(90deg,#93c5fd,#86efac,#fde68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}

/* ==== Transfer Yığım İki İstiqamətli Animasiya ==== */
.kv-transfer-icon{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-right:8px;
}

.kv-transfer-icon i{
  font-size:15px;
  color:#22d3ee; /* mövzuya uyğun mavi-aqua ton */
  text-shadow:0 1px 2px rgba(0,0,0,.15);
  will-change:transform;
}

/* Qabağa gedən ox */
.kv-transfer-icon i.fa-arrow-right{
  animation: kvArrowForward 1.2s ease-in-out infinite;
}

/* Geriyə gedən ox */
.kv-transfer-icon i.fa-arrow-left{
  animation: kvArrowBack 1.2s ease-in-out infinite;
}

/* Oxların animasiya açarları */
@keyframes kvArrowForward{
  0%,100% { transform: translateX(0); opacity:0.6; }
  50% { transform: translateX(6px); opacity:1; }
}

@keyframes kvArrowBack{
  0%,100% { transform: translateX(0); opacity:0.6; }
  50% { transform: translateX(-6px); opacity:1; }
}

/* Hərəkəti azalt rejimi */
@media (prefers-reduced-motion: reduce){
  .kv-transfer-icon i{ animation:none !important; }
}

/* İadələrin Analizi cədvəli üçün xətlər */
#iadeTable, #iadeTable th, #iadeTable td {
  border: 1px solid #000;
  border-collapse: collapse;
  padding: 8px;
  text-align: center;
}

#iadeTable th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Qalıq Tənzimləmə – tərəzi animasiyası */
.kv-scale-ico{ display:inline-flex; align-items:center; margin-right:8px; }
.kv-scale-svg{ display:block; }

.kv-beam{
  transform-origin: 60px 27px;             /* ştanganın mərkəzi */
  animation: kvTilt 1.4s ease-in-out infinite alternate;
}
.kv-pan-left{
  transform-origin: 35px 41px;             /* sol kasa ip nöqtəsi */
  animation: kvPanUpDown 1.4s ease-in-out infinite alternate;
}
.kv-pan-right{
  transform-origin: 85px 41px;             /* sağ kasa ip nöqtəsi */
  animation: kvPanUpDownOpp 1.4s ease-in-out infinite alternate;
}

/* ştanga azca sağa-sola əyilsin */
@keyframes kvTilt{
  0%   { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}
/* sol kasa aşağı-yuxarı */
@keyframes kvPanUpDown{
  0%   { transform: translateY(6px); }
  100% { transform: translateY(-6px); }
}
/* sağ kasa əks fazada */
@keyframes kvPanUpDownOpp{
  0%   { transform: translateY(-6px); }
  100% { transform: translateY(6px); }
}

/* Hərəkəti azalt rejimi */
@media (prefers-reduced-motion: reduce){
  .kv-beam, .kv-pan-left, .kv-pan-right{ animation:none !important; }
}

/* Baza */
.kv-ico{display:inline-block;will-change:transform}
.kv-ico-grad{
  background:linear-gradient(90deg,#93c5fd,#86efac,#fde68a);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
@keyframes kvSpin{to{transform:rotate(360deg)}}
.kv-anim-spin{animation:kvSpin 6s linear infinite}

/* Əlavə animasiyalar */
@keyframes kvGlow{0%,100%{text-shadow:0 0 0px rgba(255,215,0,.0)}50%{text-shadow:0 0 10px rgba(255,215,0,.9)}}
.kv-anim-glow{animation:kvGlow 1.6s ease-in-out infinite}

@keyframes kvHue{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}
.kv-anim-hue{animation:kvHue 4s linear infinite}

@keyframes kvTwinkle{0%,100%{opacity:.6}50%{opacity:1}}
.kv-anim-twinkle{animation:kvTwinkle 1.2s ease-in-out infinite}

/* TOP medal üçün parıltı */
.kv-medal{position:relative;display:inline-flex;align-items:center;margin-right:8px}
.kv-medal .kv-spark{
  position:absolute;right:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #ffe082 40%, rgba(255,255,255,0) 70%);
  opacity:.9;animation:kvSpark 1.2s ease-in-out infinite;
}
@keyframes kvSpark{
  0%{transform:scale(.6) rotate(0deg);opacity:.2}
  50%{transform:scale(1.2) rotate(90deg);opacity:1}
  100%{transform:scale(.6) rotate(180deg);opacity:.2}
}
/* Lupa üçün "axtarış" animasiyası */
@keyframes kvScan {
  0%   { transform: translate(0,0) rotate(0deg) scale(1);   opacity:.9 }
  25%  { transform: translate(2px,-2px) rotate(-12deg) scale(1.06); opacity:1 }
  50%  { transform: translate(0,-3px)  rotate(0deg)  scale(1);   opacity:.95 }
  75%  { transform: translate(-2px,-2px) rotate(12deg) scale(1.06); opacity:1 }
  100% { transform: translate(0,0) rotate(0deg) scale(1);   opacity:.9 }
}
.kv-anim-scan{
  animation: kvScan 1.1s ease-in-out infinite;
  text-shadow: 0 0 6px rgba(255,255,255,.35);
}

/* Əgər artıq yoxdursa, əvvəl istifadə etdiklər: */
@keyframes kvSpinX { to { transform: rotateX(360deg); } }
.kv-anim-spinX{ transform-style:preserve-3d; animation: kvSpinX 5s linear infinite; }

@keyframes kvBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
.kv-anim-bounce{ animation: kvBounce 1.8s ease-in-out infinite; }

@keyframes kvSwing { 0%,100%{transform:rotate(0)} 25%{rotate:-8deg} 50%{rotate:6deg} 75%{rotate:-4deg} }
.kv-anim-swing{ animation: kvSwing 1.2s ease-in-out infinite; }

@keyframes kvHue { 0%{filter:hue-rotate(0)} 100%{filter:hue-rotate(360deg)} }
.kv-anim-hue{ animation: kvHue 4s linear infinite; }

@keyframes kvGlow { 0%,100%{text-shadow:0 0 0 rgba(255,215,0,0)} 50%{text-shadow:0 0 10px rgba(255,215,0,.9)} }
.kv-anim-glow{ animation: kvGlow 1.6s ease-in-out infinite; }


/* Mövcud animasiya paketlərin varsa, təkrar etməklə ziddiyyət yaratma. */

.kv-ico{ display:inline-block; will-change:transform; }
.kv-ico-grad{
  background: linear-gradient(90deg,#93c5fd,#86efac,#fde68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
}
@keyframes kvSpin{ to{ transform: rotate(360deg); } }
.kv-anim-spin{ animation: kvSpin 6s linear infinite; }

@keyframes kvHue{ 0%{ filter:hue-rotate(0deg);} 100%{ filter:hue-rotate(360deg);} }
.kv-anim-hue{ animation: kvHue 4s linear infinite; }

/* Tapşırıq detal cədvəli üçün */
.tap-table input.tap-mi-input{
  border:1px solid #000;  /* cədvəl sərhədi ilə eyni */
  height: 26px;
  outline: none;
}
.tap-table input.tap-mi-input:focus{ box-shadow: inset 0 0 0 1px #2563eb; }


/* ===== Mükafat əməkdaş: Apteklər üzrə Stil ===== */
.ap-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.ap-title {
    color: #1e40af;
    font-size: 1.8rem;
    margin-bottom: 1.8rem;
    text-align: center;
    position: relative;
    padding-bottom: 12px;
    font-weight: 700;
}

.ap-title:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    border-radius: 4px;
}

.ap-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    border: 1px solid #e0f2fe;
    transition: transform 0.2s, box-shadow 0.2s;
}

.ap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.1);
}

.ap-card-title {
    color: #1e40af;
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e0f2fe;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ap-card-title:before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 20px;
    background: #3b82f6;
    border-radius: 3px;
}

.ap-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.6rem;
    text-align: center;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.ap-button i {
    font-size: 1rem;
    transition: transform 0.2s;
}

.ap-button:hover i {
    transform: translateX(2px);
}

.ap-button-primary {
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.ap-button-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #0284c7);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.ap-button-outline {
    background: transparent;
    border: 2px solid #3b82f6;
    color: #1e40af;
    font-weight: 600;
}

.ap-button-outline:hover {
    background: rgba(59, 130, 246, 0.08);
    transform: translateY(-2px);
}

.ap-button-lg {
    padding: 0.9rem 2rem;
    font-size: 1.1rem;
    border-radius: 10px;
}

.ap-button-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.ap-status {
    font-size: 0.85rem;
    color: #4b5563;
    margin-top: 0.8rem;
    min-height: 1.25rem;
    padding-left: 4px;
}

.ap-info {
    font-size: 0.95rem;
    color: #1e40af;
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: #f0f9ff;
    border-radius: 10px;
    border-left: 4px solid #0ea5e9;
    line-height: 1.6;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.1);
}

.ap-result {
    margin-top: 2rem;
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
}

.ap-actions {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: center;
}




/* Qiymət analizi table 2025 stili */
.qa-table-wrap{max-height:65vh;overflow:auto;border:1px solid #e5e7eb;border-radius:12px;background:#fff;}
.qa-table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px;}
.qa-table th,.qa-table td{padding:10px 12px;border-bottom:1px solid #f1f5f9;}
.qa-table thead th{position:sticky;top:0;background:#fff;z-index:1;font-weight:700;color:#0f172a;}
.qa-table td.num{text-align:right;}
.qa-table td.cen{text-align:center;}
.qa-table tbody tr:hover{background:#f8fafc;}
@media (max-width: 640px){
  .qa-table{font-size:13px;}
  .qa-table th,.qa-table td{padding:8px 10px;}
}



.dovriyye-column-toggle {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* DÖVRİYYƏ checkbox-ları üçün səliqəli layout */
#columnToggleDovriyye{
  display: flex;
  flex-wrap: wrap;         /* dar ekranda növbəti sətrə keçsin */
  gap: 10px 18px;          /* sıra və sütun arası boşluq */
  align-items: center;
  list-style: none;        /* li nöqtələrini sil */
  margin: 0;
  padding: 6px 0;
}
#columnToggleDovriyye li{
  display: inline-flex !important;  /* yan-yana məcbur et */
  align-items: center;
  gap: 8px;                          /* checkbox ilə yazı arası */
  margin: 0;
}
#columnToggleDovriyye input[type="checkbox"]{ margin: 0; }
#columnToggleDovriyye label{ cursor: pointer; user-select: none; }

/* Eyni məntiq digər bölmələrdəki toggle-lar üçün də işləsin */
[id^="columnToggle"]{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 0; padding: 6px 0;
}
[id^="columnToggle"] li{ display: inline-flex !important; align-items:center; gap:8px; }
[id^="columnToggle"] input[type="checkbox"]{ margin:0; }




/* Add this to your existing dovriyye section styles */
/* style.css — body blokunu TAM ƏVƏZ EDİN */
body{
  --c1:#e8f4ff; --c2:#f3fff6;
  --a1:rgba(120,200,255,.22);
  --a2:rgba(140,255,200,.18);

  min-height:100vh; margin:0;
  background:
    radial-gradient(60% 50% at 10% 20%, var(--a1) 0%, transparent 55%),
    radial-gradient(65% 55% at 90% 80%, var(--a2) 0%, transparent 60%),
    conic-gradient(from 210deg at 50% 50%, var(--c1), var(--c2), var(--c1));
  background-attachment: fixed;
  animation: auroraMove 18s ease-in-out infinite alternate;

  /* incə noise üst qat */
  position: relative;
  isolation: isolate;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'>\
  <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
  <rect width='100%' height='100%' filter='url(#n)' opacity='0.035'/>\
</svg>");
  mix-blend-mode: soft-light;
}
@keyframes auroraMove{
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%; }
  100% { background-position: 10% 5%, 95% 90%, 48% 52%; }
}
@media (prefers-reduced-motion: reduce){
  body{ animation:none; }
}
@media (prefers-color-scheme: dark){
  body{ --c1:#0b1220; --c2:#0f1a2a; --a1:rgba(120,200,255,.20); --a2:rgba(120,255,200,.16); }
}



/* ====== Dövriyyə sütun seçimləri üçün modern CHIP dizaynı ====== */
:root{
  --chip-bg: #f6f8fb;
  --chip-bd: #cfd8e3;
  --chip-tx: #22324d;
  --chip-bg-active: #2b7fff;         /* aktiv rəng */
  --chip-tx-active: #ffffff;
  --chip-shadow: 0 2px 10px rgba(0,0,0,.06);
  --chip-shadow-hover: 0 4px 16px rgba(0,0,0,.10);
}

#columnToggleDovriyye{
  display:flex !important;
  flex-wrap:nowrap !important;   /* ❗ hamısı bir sırada */
  gap:6px !important;
  align-items:center;
  overflow-x:auto;               /* ekran dar olsa, üfüqi sürüşdür */
  padding:4px 0;
  margin:6px 0;
  scrollbar-width: thin;         /* (firefox) incÉ™ skrol */
}
#columnToggleDovriyye li{
  display:block;
  flex:0 0 auto;                 /* sıxılmasın */
  margin:0;
}
#columnToggleDovriyye input[type="checkbox"]{
  inset:auto;                    /* əvvəlki absolute qalsın, problem deyil */
}

/* Kiçik ölçü: hündürlük, yazı, padding */
#columnToggleDovriyye label{
  min-height:26px !important;
  padding:4px 8px !important;
  font-size:12px !important;
  border-radius:999px;
  gap:6px;
}

/* Kiçik “check” nişanı */
#columnToggleDovriyye label::before{
  font-size:12px !important;
}

/* Eyni şeyi digər “columnToggle*” bloklarına da tətbiq etmək istəsən: */
[id^="columnToggle"]{
  display:flex !important;
  flex-wrap:nowrap !important;
  gap:6px !important;
  overflow-x:auto;
}
[id^="columnToggle"] li{ flex:0 0 auto; }
[id^="columnToggle"] label{
  min-height:26px !important; padding:4px 8px !important; font-size:12px !important;
}

/* Eyni dizaynı digər bölmələr üçün də aktiv et (id-si columnToggle ilə başlayanlar) */
[id^="columnToggle"]{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 14px;
  list-style: none;
  margin: 10px 0 6px; padding: 0;
}
[id^="columnToggle"] li{ position: relative; display: block; }
[id^="columnToggle"] input[type="checkbox"]{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; z-index:2; margin:0; }
[id^="columnToggle"] label{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:40px; padding:8px 14px; border-radius:999px;
  background:var(--chip-bg); border:1px solid var(--chip-bd); color:var(--chip-tx);
  font-weight:600; box-shadow:var(--chip-shadow);
  transition: background .2s, color .2s, box-shadow .2s, transform .06s;
  user-select:none;
}
[id^="columnToggle"] li:hover label{ box-shadow:var(--chip-shadow-hover); transform:translateY(-1px); }
[id^="columnToggle"] li:active label{ transform:translateY(0); }
[id^="columnToggle"] input[type="checkbox"]:checked + label{
  background:var(--chip-bg-active); border-color:var(--chip-bg-active); color:var(--chip-tx-active);
  box-shadow:0 4px 18px rgba(43,127,255,.35);
}
[id^="columnToggle"] label::before{
  content:"\002713";
  font-family:system-ui,"Segoe UI Symbol","Apple Color Emoji",sans-serif;
  font-size:14px; line-height:1; opacity:0; transform:scale(.7); transition:opacity .15s, transform .15s;
}
[id^="columnToggle"] input[type="checkbox"]:checked + label::before{ opacity:1; transform:scale(1); }


   /* Modal lay */
/* Xususi kvota - Lokal stilleri ayri xususi_kvota_lokal.css faylina kocuruldu. */



 /* KV cədvəllər – sərt xətlər, səliqə */
.kv-table {
  width: 100%;
  border-collapse: collapse !important; /* xətləri birləşdir */
  table-layout: auto;
  font-family: Calibri, system-ui, sans-serif;
}
.kv-table th,
.kv-table td {
  border: 1px solid #000 !important;   /* hamısında qara xətt */
  padding: 6px 8px !important;
  background-clip: padding-box;         /* rəngləmə sızmasın */
}


/* Mərkəz + bold qara */
.kv-center-bold {
  text-align: center !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Aptek adı hüceyrəsi – mərkəz + bold qara */
.kv-aptek {
  text-align: center !important;
  font-weight: 700 !important;
  color: #111 !important;
}

/* Sütunlar modal (öncəki qaydalar qalır) */
#mk_columns_modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000; }
#mk_columns_modal .modal-inner {
  background:#fff; max-width:520px; margin:8vh auto; padding:16px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
#mk_columns_modal h3 { margin:0 0 10px 0; font-weight:700; color:#111; text-align:center; }
#mk_columns_modal .cols-list { display:grid; grid-template-columns: 1fr 2fr; gap:8px; align-items:center; }
#mk_columns_modal .row { display:contents; }
#mk_columns_modal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.mk-btn { padding:8px 12px; border:none; border-radius:10px; font-weight:700; color:#111; cursor:pointer; }
.mk-btn-blue  { background:#93c5fd; }
.mk-btn-green { background:#86efac; }
.mk-btn-red   { background:#fca5a5; }
.mk-columns-trigger { margin-top:8px; }

/* Masaüstü: wrap ilə üfüqi scroll */
.kv-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}



/* Başlıqların (TH) hamısında sətir qırılması aktiv olsun */

.kv-table thead th {
  white-space: normal !important;    /* nowrap-u söndür */
  overflow-wrap: anywhere !important;/* istənilən yerdə qır */
  word-break: break-word !important; /* uzun sözləri böl */
  hyphens: auto;                     /* tire ilə bölünmə (stəkləyən brauzerlərdə) */
  line-height: 1.15;                 /* sıx görünüş üçün */
}


.zebra tbody tr:nth-child(odd){ background:#ffffff; }
.zebra tbody tr:nth-child(even){ background:#f3f4f6; }
.zebra tfoot td{ font-weight:700; background:#eef2ff; }

/* ===== Kvota – müqayisəli satış cədvəlləri ===== */
.kv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.kv-table thead th{
  background: linear-gradient(180deg,#fde68a,#facc15);
  color:#111827;
  font-weight:800;
  padding:12px 10px;
  border-bottom:2px solid #d4af37;
  white-space:nowrap;
}

.kv-table tbody td{
  padding:10px 10px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}

.kv-table tbody tr:nth-child(even) td{ background:#f8fafc; }
.kv-table tbody tr:hover td{ background:#eef2ff; }

.kv-table tfoot td{
  background:#fff7ed;
  font-weight:800;
  border-top:2px solid #f59e0b;
  text-align:center;                /* Toplam mərkəzdə */
}

/* Sətir nömrəsi/KOD sütunu sındırılmasın */
.kv-table th:first-child,
.kv-table td:first-child{
  white-space: nowrap;
  width: 64px;
  text-align: center;
  font-weight: 800;
}

/* “Aptek adı / Əməkdaş adı / Dərman adı” xanaları sola düz */
.kv-table td.name-cell{ text-align:left; }

/* Rəqəm xanaları sağa düz, mətn bold */
.kv-table td.num-cell{ text-align:center; }
.kv-table .num{ font-weight:800; }

/* 0 dəyərlər – tünd qırmızı */
.kv-table .num.zero{ color:#b91c1c; }


.kv-table thead th{ position: sticky; top: 0; z-index: 1; }

/* CƏM sütunu heç vaxt sındırılmasın */
.kv-table thead th:last-child,
.kv-table tbody td:last-child,
.kv-table tfoot td:last-child{
  white-space: nowrap;
}

/* (opsional) rəqəmlər sabit enlə görünsün */
.kv-table .num{
  font-variant-numeric: tabular-nums;
}

/* Arxiv satışlar siyahısı üçün */
#as_listBox {
  max-height: 260px;
  overflow-y: auto;
}
#as_listTbody tr {
  cursor: pointer;
}
#as_listTbody tr.selected {
  background: #dbeafe;
  font-weight: 600;
}
#as_resultTable tbody tr {
  cursor: pointer;
}

#arxivSatislarPage label {
  font-weight: 500;
}
#arxivSatislarPage input {
  height: 34px;
}
#as_resultTable thead th {
  background: #ffe08a;
}

#as_contextMenu .ctx-item {
  padding: 6px 14px;
  cursor: pointer;
  font-size: 14px;
}
#as_contextMenu .ctx-item:hover {
  background: #2563eb;
  color: white;
}

.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #2563eb;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== Kvota detal cədvəli üslubu ===== */
#kvotaItemDetailPage table thead th {
  background: orange;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

/* Cəmi satış sütunu */
.kv-col-qty {
  font-weight: 700;
  text-align: center;
  background: rgba(37, 99, 235, 0.15); /* filled blue */
}

/* Əməkdaş sütunu */
.kv-col-emp {
  font-weight: 600;
  text-align: left;
}

/* ===== Modal ===== */

.kv-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.kv-modal-content {
  position: relative;
  width: min(420px, 90vw);
  background: #fff;
  margin: 60px auto;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  max-height: 74vh;
}
.kv-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 8px 16px;
  border-bottom: 1px solid #eee;
  gap: 10px;
}
.kv-modal-header #kv_filter_title {
  font-weight: 700;
  font-size: 14px;
}
.kv-modal-close {
  background: #fff;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  transition: 0.15s;
}
.kv-modal-close:hover {
  background: #f3f4f6;
}
.kv-modal-toolbar {
  display: flex;
  gap: 8px;
  padding: 10px 16px 0 16px;
}
.kv-pill {
  border: none;
  border-radius: 999px;
  padding: 4px 12px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
}
.kv-pill-all {
  background: #fde68a;
  color: #1f2937;
}
.kv-pill-none {
  background: #fee2e2;
  color: #1f2937;
}
.kv-modal-body {
  padding: 10px 16px 6px 16px;
  overflow-y: auto;
  max-height: 42vh;
}
.kv-filter-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px dashed #eee;
}
.kv-filter-row:last-child {
  border-bottom: none;
}
.kv-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px 14px 16px;
  border-top: 1px solid #eee;
}
.kv-btn {
  border: none;
  border-radius: 10px;
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  color: #111;
}
.kv-btn-clear {
  background: #fee2e2;
}
.kv-btn-apply {
  background: #bfdbfe;
}

/* Kvota məhsul detalı — incə başlıq, sütun filtr işarəsi */
.kv-item-detail-page .kv-item-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.kv-item-detail-page .kv-item-table-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.kv-item-detail-page .kv-item-shot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  flex-shrink: 0;
  padding: 0.28rem 0.72rem;
  min-height: 1.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid #c4b5fd;
  border-radius: 999px;
  background: linear-gradient(180deg, #faf5ff 0%, #ede9fe 100%);
  color: #5b21b6;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(91, 33, 182, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.kv-item-detail-page .kv-item-shot-btn i {
  font-size: 0.88em;
  opacity: 0.9;
}

.kv-item-detail-page .kv-item-shot-btn:hover:not(:disabled) {
  filter: brightness(1.03);
  box-shadow: 0 2px 8px rgba(91, 33, 182, 0.12);
}

.kv-item-detail-page .kv-item-shot-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.kv-item-detail-page .kv-item-shot-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#kvotaItemDetailPage.kv-item-detail-page table.kv-item-table thead th.kv-item-th {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #334155;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 8px;
  border-bottom: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
  vertical-align: middle;
  line-height: 1.25;
}

#kvotaItemDetailPage.kv-item-detail-page table.kv-item-table thead th.kv-item-th--num {
  width: 2.5rem;
  color: #64748b;
  font-weight: 600;
  cursor: default;
}

#kvotaItemDetailPage.kv-item-detail-page table.kv-item-table thead th.kv-item-th--filter {
  display: table-cell;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}

#kvotaItemDetailPage.kv-item-detail-page table.kv-item-table thead th.kv-item-th--filter:hover {
  background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%);
  color: #3730a3;
}

#kvotaItemDetailPage.kv-item-detail-page .kv-item-th-text {
  display: inline;
  margin-right: 5px;
}

#kvotaItemDetailPage.kv-item-detail-page .kv-item-th-filt {
  font-size: 9px;
  opacity: 0.42;
  vertical-align: middle;
  font-weight: 400;
}

#kvotaItemDetailPage.kv-item-detail-page table.kv-item-table thead th.kv-item-th--filter:hover .kv-item-th-filt {
  opacity: 0.75;
}

/* 2-ci sütun: Aptek */
#kvotaItemDetailPage td.kv-aptek-cell {
  font-weight: 700;
  text-align: center;
}

/* 3-cü sütun: Əməkdaş */
#kvotaItemDetailPage td.kv-emp-cell {
  font-weight: 700;
  text-align: left;
}

/* 4-cü sütun: Cəmi satış */
#kvotaItemDetailPage td.kv-qty-cell {
  font-weight: 700;
  text-align: center;
  background: #dbeafe;      /* filled blue */
  border-left: 1px solid #bfdbfe;
}

.side-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 12px;
  cursor: pointer;
}
.side-btn:hover {
  background: rgba(37, 99, 235, 0.12);
}

/* ==== KVOTA DƏYİŞ MODALI – TAM LAYOUT OVERRIDE ==== */
#kvotaDetayModal .modal-content.kv-modal{
  position: fixed;
  left: 50%;
  top: 4vh;
  transform: translateX(-50%);
  margin: 0;

  width: min(1100px, 96vw);
  max-height: 92vh;

  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}

/* HEADER */
#kvotaDetayModal .kv-detay-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  border-bottom: 1px solid #e5e7eb;
  background:#f8fafc;
}
#kvotaDetayModal .kv-detay-header-text h3{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
#kvotaDetayModal .kv-detay-status{
  margin-top: 2px;
  font-size: 13px;
  color:#6b7280;
}
#kvotaDetayModal .kv-detay-close{
  border: none !important;
  background: transparent !important;
  color:#111 !important;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
}
#kvotaDetayModal .kv-detay-close:hover{
  background:#e5e7eb;
}

/* BODY – yalnız burası scroll olur */
#kvotaDetayModal .kv-detay-body{
  flex: 1 1 auto;
  padding: 10px 16px 12px;
  overflow-y: auto;
}

/* FOOTER – həmişə aşağıda, body-nin üstünə çıxmır */
#kvotaDetayModal .kv-footer{
  flex: 0 0 auto;
  padding: 10px 16px 14px;
  border-top: 1px solid #e5e7eb;
  background:#f8fafc;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Burda sticky-ni ləğv edirik, əgər yuxarıda ümumi .kv-footer varsa */
#kvotaDetayModal .kv-footer{
  position: static !important;
}

/* Düymələr */
#kvotaDetayModal .kv-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#kvotaDetayModal .kv-actions button{
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  background:#e5e7eb;
  color:#111;
}
#kvotaDetayModal #kv_confirmBtn{
  background:#2e7d32 !important;
  color:#fff !important;
}

/* ==== Xüsusi Satışlar – Məhsul seçimi modali ==== */
#lsModal .ls-modal {
  position: fixed;
  left: 50%;
  top: 8vh;
  transform: translateX(-50%);
  margin: 0;

  width: min(720px, 96vw);
  max-height: 86vh;

  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  font-size: 13px;
}

#lsModal .ls-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#lsModal .ls-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

#lsModal .ls-close {
  float: none;
  position: static;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

#lsModal .ls-modal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#lsModal .ls-info {
  margin: 0 0 4px 0;
  font-size: 12px;
  color: #4b5563;
}

/* Siyahı – burası scroll olacaq */
#lsModal .ls-modal-list {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 60vh;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 0;
}

/* Cədvəl fontu bir az kiçik və sıx */
#lsModal .ls-modal-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

#lsModal .ls-modal-list th,
#lsModal .ls-modal-list td {
  line-height: 1.3;
}

/* FOOTER – həmişə görünən düymələr */
#lsModal .ls-modal-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}
/* ==== Cache Modal – Keş Yaddaş ==== */
#cacheModal .cache-modal {
  position: fixed;
  left: 50%;
  top: 6vh;
  transform: translateX(-50%);
  margin: 0;

  width: min(900px, 96vw);
  max-height: 88vh;

  background: #ffffff;
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  font-size: 13px;
}

#cacheModal .cache-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#cacheModal .cache-modal-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #111827;
}

#cacheModal .cache-close {
  float: none;
  position: static;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

/* Body – cədvəl + info scroll zonasında */
#cacheModal .cache-modal-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
}

#cacheModal .cache-info {
  font-size: 12px;
  color: #4b5563;
}

/* Cədvəl üçün scroll konteyner */
#cacheModal .cache-table-wrap {
  flex: 1 1 auto;
  max-height: 60vh;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

/* Cədvəl stili */
#cacheModal .cache-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto; /* eni mətndən asılı olsun */
}
#cacheModal .cache-table thead {
  position: sticky;
  top: 0;
  background: #f3f4f6;
  z-index: 1;
}

#cacheModal .cache-table th,
#cacheModal .cache-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

#cacheModal .cache-table th:last-child,
#cacheModal .cache-table td:last-child {
  text-align: right;
}

/* Footer – həmişə görünən düymələr */
#cacheModal .cache-modal-footer {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

#cacheModal .cache-cleanup-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

#cacheModal .cache-days-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 12px;
}

#cacheModal .cache-days-input {
  width: 84px;
  padding: 7px 9px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 12px;
}

#cacheModal .cache-table tbody tr.cache-row {
  cursor: context-menu;
  transition: background-color .18s ease;
}

#cacheModal .cache-table tbody tr.cache-row:hover {
  background: rgba(22, 163, 74, 0.06);
}

.cache-context-menu {
  position: fixed;
  z-index: 12001;
  min-width: 220px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
}

.cache-context-action {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease, transform .16s ease;
}

.cache-context-action:hover {
  background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
  transform: translateY(-1px);
}

.cache-context-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, #eef2ff 0%, #dbeafe 100%);
  font-size: 14px;
}

.cache-dates-modal {
  width: min(760px, 94vw);
  max-height: 86vh;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(191, 219, 254, 0.65);
  background:
    radial-gradient(circle at top right, rgba(191, 219, 254, 0.38), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.22);
}

.cache-dates-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.88);
}

.cache-dates-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 6px;
}

.cache-dates-head h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
}

.cache-dates-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #334155;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.cache-dates-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 24px 0;
}

.cache-dates-stat {
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(191, 219, 254, 0.8);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(239,246,255,.94) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.cache-dates-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

.cache-dates-stat strong {
  color: #0f172a;
  font-size: 20px;
  font-weight: 700;
}

.cache-dates-body {
  padding: 18px 24px 10px;
  overflow: auto;
}

.cache-dates-status {
  font-size: 13px;
  color: #475569;
  margin-bottom: 14px;
}

.cache-dates-store-meta {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  background: rgba(255, 255, 255, 0.82);
  color: #334155;
  font-size: 13px;
  line-height: 1.5;
}

.cache-dates-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 48px;
}

.cache-date-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(191, 219, 254, 0.88);
  background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.12);
}

.cache-dates-empty {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  color: #64748b;
  font-size: 13px;
}

.cache-dates-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px 22px;
  border-top: 1px solid rgba(226, 232, 240, 0.88);
  background: rgba(248, 250, 252, 0.82);
}

.cache-dates-btn {
  min-width: 132px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.cache-dates-btn:hover {
  transform: translateY(-1px);
}

.cache-dates-btn-ghost {
  border: 1px solid rgba(203, 213, 225, 0.95);
  background: #ffffff;
  color: #334155;
}

.cache-dates-btn-primary {
  border: 1px solid rgba(59, 130, 246, 0.7);
  background: linear-gradient(180deg, #f8fbff 0%, #dbeafe 100%);
  color: #1d4ed8;
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.18);
}

@media (max-width: 720px) {
  .cache-dates-summary {
    grid-template-columns: 1fr;
  }

  .cache-dates-footer {
    flex-direction: column-reverse;
  }

  .cache-dates-btn {
    width: 100%;
  }
}

/* ===== Tələbat–Alış–Satış Balansı (telebatBalansPage) ===== */

#telebatBalansPage h2 {
  margin-bottom: 10px;
  font-size: 18px;
}

/* Yuxarı xülasə hissəsi */
#telebatBalansPage .tas-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 8px 10px;
  margin: 10px 0 8px;
  border-radius: 8px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  font-size: 12px;
}

#telebatBalansPage .tas-summary div {
  white-space: nowrap;
}

/* Cədvəl konteyneri – ayrı scroll */
#telebatBalansPage .tas-table-wrap {
  margin-top: 6px;
  max-height: 60vh;
  overflow: auto;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

/* Cədvəl özü */
#telebatBalansPage .tas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto; /* eni mətndən asılı olsun */
}


#telebatBalansPage .tas-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f4f6;
}

#telebatBalansPage .tas-table th,
#telebatBalansPage .tas-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#telebatBalansPage .tas-table th:nth-child(5),
#telebatBalansPage .tas-table th:nth-child(6),
#telebatBalansPage .tas-table th:nth-child(7),
#telebatBalansPage .tas-table th:nth-child(8),
#telebatBalansPage .tas-table th:nth-child(9),
#telebatBalansPage .tas-table th:nth-child(10) {
  width: 90px;
}

/* Faiz sütunlarını bir az vurğulayaq */
#telebatBalansPage .tas-table td:nth-child(8),
#telebatBalansPage .tas-table td:nth-child(9),
#telebatBalansPage .tas-table td:nth-child(10) {
  font-weight: 600;
}


/* Rəqəmlər sağa düzülü */
#telebatBalansPage .tas-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Sətir arxa fonu – zebra effekti */
#telebatBalansPage .tas-table tbody tr:nth-child(odd) {
  background: #f9fafb;
}

/* Hover effekti */
#telebatBalansPage .tas-table tbody tr:hover {
  background: #e5f3ff;
}

/* Faiz sütunlarını bir az vurğulayaq */
#telebatBalansPage .tas-table td:nth-child(8),
#telebatBalansPage .tas-table td:nth-child(9) {
  font-weight: 600;
}

/* Kiçik ekranlarda sətirlər sıxmadan görünsün */
@media (max-width: 900px) {
  #telebatBalansPage .tas-summary {
    flex-direction: column;
  }

  #telebatBalansPage .tas-table th,
  #telebatBalansPage .tas-table td {
    font-size: 11px;
    padding: 4px 6px;
  }
}

/* ===== Tələbat–Alış–Satış: Statistik kartlar ===== */

#telebatBalansPage .tas-stats {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Kart ümumi stil */
#telebatBalansPage .tas-stat-card {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: #f9fafb;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
  font-size: 12px;
}

/* Mobil üçün ikon sol, mətn sağ – alt-alta uyğun gəlir */
#telebatBalansPage .tas-stat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.6);
}

#telebatBalansPage .tas-stat-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

#telebatBalansPage .tas-stat-body h4 {
  margin: 0 0 4px 0;
  font-size: 13px;
  font-weight: 700;
}

#telebatBalansPage .tas-stat-body p {
  margin: 0 0 4px 0;
  color: #374151;
}

#telebatBalansPage .tas-stat-body ul {
  margin: 0;
  padding-left: 16px;
}

#telebatBalansPage .tas-stat-body ul li {
  margin: 2px 0;
}

#telebatBalansPage .tas-stat-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 4px;
  padding-left: 0;
  list-style: none;
}

/* Rənglər – rəngbərəng kartlar */
#telebatBalansPage .tas-stat-primary {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border-color: #bfdbfe;
  color: #0f172a;
}

#telebatBalansPage .tas-stat-primary .tas-stat-icon {
  background: rgba(59, 130, 246, 0.12);
  color: #1d4ed8;
}

#telebatBalansPage .tas-stat-warn {
  background: linear-gradient(135deg, #fef3c7, #fffbeb);
  border-color: #fde68a;
  color: #7c2d12;
}

#telebatBalansPage .tas-stat-warn .tas-stat-icon {
  background: rgba(234, 179, 8, 0.16);
  color: #ca8a04;
}

#telebatBalansPage .tas-stat-accent {
  background: linear-gradient(135deg, #dcfce7, #ecfdf5);
  border-color: #bbf7d0;
  color: #064e3b;
}

#telebatBalansPage .tas-stat-accent .tas-stat-icon {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

/* Daha kiçik ekranlarda da rahat oxunsun */
@media (max-width: 600px) {
  #telebatBalansPage .tas-stat-card {
    flex-direction: row;
    align-items: flex-start;
  }
}
/* Bütün hüceyrələrdə: qırılmasın, mərkəzə düzülsün */
#telebatBalansPage .tas-table th,
#telebatBalansPage .tas-table td {
  white-space: nowrap;
  text-align: center;
}

#telebatBalansPage .tas-table th:nth-child(1),
#telebatBalansPage .tas-table td:nth-child(1),
#telebatBalansPage .tas-table th:nth-child(2),
#telebatBalansPage .tas-table td:nth-child(2),
#telebatBalansPage .tas-table th:nth-child(3),
#telebatBalansPage .tas-table td:nth-child(3),
#telebatBalansPage .tas-table th:nth-child(4),
#telebatBalansPage .tas-table td:nth-child(4),
#telebatBalansPage .tas-table th:nth-child(5),
#telebatBalansPage .tas-table td:nth-child(5),
#telebatBalansPage .tas-table th:nth-child(6),
#telebatBalansPage .tas-table td:nth-child(6),
#telebatBalansPage .tas-table th:nth-child(7),
#telebatBalansPage .tas-table td:nth-child(7),
#telebatBalansPage .tas-table th:nth-child(8),
#telebatBalansPage .tas-table td:nth-child(8),
#telebatBalansPage .tas-table th:nth-child(9),
#telebatBalansPage .tas-table td:nth-child(9),
#telebatBalansPage .tas-table th:nth-child(10),
#telebatBalansPage .tas-table td:nth-child(10) {
  width: 1%; /* hamısı mətn qədər enli */
}


/* 3-cü sütun (Məhsul) geniş qalsın, soldan hizalansın */
#telebatBalansPage .tas-table th:nth-child(3),
#telebatBalansPage .tas-table td:nth-child(3) {
  text-align: left;
  width: auto;
}


/* Rəqəm sütunları üçün əvvəl yazdığımız sağ hizanı ləğv edirik – mərkəzdə olsun */
#telebatBalansPage .tas-table td.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* ===== Excel-stil Filtr Modal ===== */
.excel-filter-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.2);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: "Segoe UI", sans-serif;
  font-size: 10px;
}

.excel-filter-box {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  width: 260px;
  max-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.excel-filter-header {
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-bottom: 1px solid #ddd;
  background: linear-gradient(to bottom, #f9f9f9, #f3f3f3);
}

.excel-filter-sort {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.excel-filter-sort button {
  flex: 1;
  border: 1px solid #bbb;
  background: #f5f5f5;
  border-radius: 4px;
  padding: 3px 6px;
  cursor: pointer;
  font-size: 12px;
}

.excel-filter-sort button:hover {
  background: #e5e5e5;
}

#excelFilterSearch {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.excel-filter-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
  background: #fff;
}

/* 2 sütunlu layout: 1-ci sütun checkbox, 2-ci sütun mətn */
.excel-filter-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  padding: 2px 4px;
  cursor: default;
  font-size: 13px;       /* düymə font ölçüsü ilə eyni */
  color: #111827;        /* qara yazı */
}

.excel-filter-item input[type="checkbox"] {
  margin: 0 4px 0 2px;
  justify-self: center;
}
.excel-filter-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px;
  background: #fff;
  font-size: 12px; /* body fontu düymə ölçüsü kimi */
}
.excel-filter-footer button {
  padding: 4px 10px;
  border: 1px solid #999;
  border-radius: 4px;
  background: linear-gradient(to bottom, #fdfdfd, #eaeaea);
  cursor: pointer;
  font-weight: 600;
  color: #111827;
}


.excel-filter-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #ddd;
  padding: 6px;
  background: #f9f9f9;
}

.excel-filter-footer button {
  padding: 4px 10px;
  border: 1px solid #999;
  border-radius: 4px;
  background: linear-gradient(to bottom, #fdfdfd, #eaeaea);
  cursor: pointer;
  font-weight: 600;
}

.excel-filter-footer button:hover {
  background: linear-gradient(to bottom, #f3f3f3, #ddd);
}

/* scrollbar tərzi */
.excel-filter-list::-webkit-scrollbar {
  width: 8px;
}
.excel-filter-list::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 4px;
}
.excel-filter-list::-webkit-scrollbar-thumb:hover {
  background: #999;
}
/* Düymə yazıları qara olsun */
.excel-filter-sort button,
.excel-filter-footer button {
  color: #111827; /* qara ton */
}
.excel-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.excel-filter-close {
  border: none;
  background: transparent;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #000000 !important;
}


.excel-filter-close:hover {
  background: rgba(0,0,0,0.06);
}

/* 🔥 Butonun içində NƏ VARSA hamısını qara elə */
.excel-filter-close svg,
.excel-filter-close svg *,
.excel-filter-close *,
.excel-filter-close *::before,
.excel-filter-close *::after {
  width: 14px;
  height: 14px;
  color: #000000 !important;
  fill: #000000 !important;
  stroke: #000000 !important;
}

    /* Side Menu Search Styles */
    .search-container {
        margin: 10px 10px 15px 10px;
    }
    
    .menu-search {
        width: 100%;
        padding: 8px 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        box-sizing: border-box;
        background-color: #f8f9fa;
        transition: all 0.3s ease;
    }
    
    .menu-search:focus {
        outline: none;
        border-color: #4a90e2;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
        background-color: white;
    }
    
    /* Style for filtered out menu items */
    .side-menu button.hidden {
        display: none !important;
    }

    /* Excel tipli filter modalı (Göndərən əməkdaş) */
    .excel-filter-modal{
      position:fixed; inset:0; background:rgba(15,23,42,.45);
      display:flex; align-items:center; justify-content:center;
      z-index:11000;
    }
    .excel-filter-box{
      background:#fff; border-radius:14px;
      box-shadow:0 18px 40px rgba(0,0,0,.25);
      width:min(420px, 96vw);
      max-height:80vh;
      display:flex; flex-direction:column;
      overflow:hidden; border:1px solid #e5e7eb;
      font-family:Calibri,system-ui,sans-serif;
    }
    .excel-filter-header{
      padding:8px 10px; border-bottom:1px solid #e5e7eb;
      background:#f9fafb;
    }
    .excel-filter-top{
      display:flex; align-items:center; justify-content:space-between; gap:8px;
    }
    .excel-filter-left{ display:flex; gap:6px; }
    .excel-filter-btn{
      border:none; border-radius:8px; padding:6px 10px;
      font-weight:700; cursor:pointer; font-size:13px;
      box-shadow:0 2px 5px rgba(0,0,0,.08);
      color:#111827;
      background:#e5f0ff;
    }
    .excel-filter-btn-primary{
      background:#22c55e; color:#111;
    }
    .excel-filter-btn-secondary{
      background:#fee2e2; color:#111;
    }
    .excel-filter-btn:hover{ filter:brightness(1.05); }
    .excel-filter-close{
      border:none; background:transparent; cursor:pointer;
      width:28px; height:28px; border-radius:999px;
      display:inline-flex; align-items:center; justify-content:center;
      color:#6b7280;
    }
    .excel-filter-close:hover{
      background:#e5e7eb; color:#111827;
    }
    .excel-filter-body{
      padding:6px 10px; overflow:auto; max-height:52vh;
    }
    .excel-filter-list{
      display:flex; flex-direction:column; gap:4px;
    }
    .excel-filter-item{
      display:flex; align-items:center; gap:8px;
      padding:4px 6px; border-radius:6px;
    }
    .excel-filter-item:hover{
      background:#f3f4f6;
    }
    .excel-filter-item input[type="checkbox"]{
      width:14px; height:14px;
    }
    .excel-filter-item span{
      font-size:13px; font-weight:600; color:#111827;
    }
    .excel-filter-footer{
      padding:8px 10px; border-top:1px solid #e5e7eb;
      display:flex; justify-content:flex-end; gap:8px;
      background:#f9fafb;
    }

    .excel-filter-btn{
      padding:6px 10px;
      border-radius:8px;
      border:none;
      font-weight:700;
      color:#111827;
      cursor:pointer;
    }
    .excel-filter-btn-primary{ background:#bbf7d0; }   /* yaşıl ton */
    .excel-filter-btn-secondary{ background:#fee2e2; } /* açıq qırmızı */
    #trSenderAll,#trColAll{ background:#e0f2fe; }      /* göyümtül */
    #trSenderNone,#trColNone{ background:#fef9c3; }    /* sarımtıl */




.users-pass-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at top, rgba(125, 211, 252, 0.18), transparent 38%),
    rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(10px);
}

.users-pass-modal.is-open {
  display: flex;
}

.users-pass-dialog {
  position: relative;
  width: min(100%, 420px);
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  box-shadow:
    0 28px 60px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  color: #0f172a;
}

.users-pass-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #e0f2fe, #dbeafe);
  color: #0f4c81;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.users-pass-title {
  margin: 14px 0 8px;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
}

.users-pass-text {
  margin: 0 0 18px;
  color: #475569;
  font-size: 14px;
  line-height: 1.5;
}

.users-pass-form {
  display: grid;
  gap: 12px;
}

.users-pass-label {
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.users-pass-input {
  width: 100%;
  height: 48px;
  padding: 0 15px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  border-radius: 16px;
  outline: none;
  background: rgba(255, 255, 255, 0.92);
  color: #0f172a;
  font-size: 16px;
  font-weight: 700;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.users-pass-input:focus {
  border-color: rgba(14, 116, 144, 0.72);
  box-shadow: 0 0 0 4px rgba(125, 211, 252, 0.28);
  transform: translateY(-1px);
}

.users-pass-input::placeholder {
  color: #94a3b8;
  font-weight: 600;
}

.users-pass-error {
  min-height: 18px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
}

.users-pass-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.users-pass-btn {
  min-width: 90px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: "Montserrat", "Inter", sans-serif;
  letter-spacing: .4px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.users-pass-btn:hover {
  transform: translateY(-1px);
}

.users-pass-btn-primary {
  background:
    linear-gradient(140deg, #fffdf9 0%, #fefaf0 45%, #f8edd8 100%);
  border-color: rgba(214, 190, 151, 0.82);
  color: #111827 !important;
  box-shadow:
    0 9px 18px rgba(120, 96, 60, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.users-pass-btn-primary:hover {
  transform: translateY(-1px) scale(1.01);
  box-shadow:
    0 12px 20px rgba(120, 96, 60, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.users-pass-btn-ghost {
  border-color: rgba(148, 163, 184, 0.34);
  background: rgba(255, 255, 255, 0.82);
  color: #0f172a !important;
}

.users-pass-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #475569;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.users-pass-close:hover {
  transform: rotate(90deg);
  background: #fff;
  color: #0f172a;
}

@media (max-width: 520px) {
  .users-pass-modal {
    padding: 14px;
  }

  .users-pass-dialog {
    padding: 20px 16px 16px;
    border-radius: 22px;
  }

  .users-pass-title {
    font-size: 21px;
  }

  .users-pass-actions {
    justify-content: flex-end;
  }

  .users-pass-btn {
    width: auto;
  }
}

.users-page-shell {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at top right, rgba(125, 211, 252, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.users-page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 4px 0 20px;
}

.users-page-copy {
  max-width: 720px;
}

.users-page-kicker,
.users-table-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(224, 242, 254, 0.92);
  color: #0f4c81;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.users-page-copy h2 {
  margin: 12px 0 8px;
  color: #0f172a;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  font-weight: 900;
}

.users-page-copy p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.6;
}

.users-page-actions,
.users-danger-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

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

.users-info {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 14px;
  font-weight: 800;
  box-sizing: border-box;
}

.users-info-neutral {
  background: rgba(248, 250, 252, 0.9);
  color: #334155;
}

.users-info-loading {
  background: rgba(239, 246, 255, 0.95);
  color: #0f4c81;
}

.users-info-success {
  background: rgba(236, 253, 245, 0.95);
  color: #166534;
}

.users-info-danger {
  background: rgba(254, 242, 242, 0.95);
  color: #b91c1c;
}

.users-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.users-usage-panel {
  margin-bottom: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 22px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(148, 163, 184, 0.08);
  padding: 14px;
}

.users-usage-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.users-usage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.users-usage-head h4 {
  margin: 0;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
}

.users-usage-head small {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.users-usage-table-scroll {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: auto;
}

.users-usage-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.users-usage-table th,
.users-usage-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  text-align: left;
}

.users-usage-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8fafc;
  color: #334155;
  font-weight: 800;
}

.users-usage-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.users-usage-empty strong {
  color: #0f172a;
  font-size: 14px;
}

.users-usage-empty span {
  color: #64748b;
  font-size: 13px;
}

.users-usage-empty-danger {
  border-color: #fecaca;
  background: #fef2f2;
}

.users-stat-card {
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(241,245,249,0.9));
  box-shadow: 0 14px 34px rgba(148, 163, 184, 0.12);
}

.users-stat-card span {
  display: block;
  margin-bottom: 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.users-stat-card strong {
  display: block;
  color: #0f172a;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
}

.users-stat-card small {
  display: block;
  margin-top: 8px;
  color: #475569;
  font-size: 12px;
  font-weight: 700;
}

.users-table-panel {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 28px;
  background: rgba(255,255,255,0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
  overflow: hidden;
}

.users-table-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 16px;
}

.users-table-head h3 {
  margin: 10px 0 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}

.users-table-head small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.users-table-scroll {
  max-height: 460px;
  overflow: auto;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
}

.users-data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.users-data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 16px;
  background: rgba(248, 250, 252, 0.96);
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.users-data-table thead th:first-child,
.users-data-table tbody td:first-child {
  text-align: center;
  width: 72px;
}

.users-data-table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.72);
}

.users-data-table tbody tr:hover {
  background: rgba(224, 242, 254, 0.42);
}

.users-data-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.78);
  vertical-align: middle;
  color: #0f172a;
}

.users-col-index {
  color: #0f4c81;
  font-weight: 900;
}

.users-cell-stack {
  display: grid;
  gap: 4px;
}

.users-cell-stack strong {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.users-cell-stack small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.users-pill,
.users-date {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 800;
  box-sizing: border-box;
}

.users-pill {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.users-pill-pass {
  background: rgba(254, 249, 195, 0.9);
  color: #854d0e;
}

.users-pill-device {
  background: rgba(224, 242, 254, 0.9);
  color: #0f4c81;
}

.users-date {
  background: rgba(236, 253, 245, 0.9);
  color: #166534;
}

.users-empty-state {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 220px;
  padding: 20px;
  color: #475569;
  text-align: center;
}

.users-empty-state strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}

.users-empty-state span {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.6;
}

.users-empty-state-danger strong,
.users-empty-state-danger span {
  color: #991b1b;
}

.users-danger-zone {
  margin-top: 18px;
}

.users-page-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-weight: 700 !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.users-page-btn:hover {
  transform: translateY(-1px);
}

.users-page-btn-soft {
  border-radius: 999px;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border-color: rgba(59, 130, 246, 0.34);
  color: #1d4ed8 !important;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.14);
}

.users-page-btn-outline {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.94);
  border-color: rgba(148, 163, 184, 0.36);
  color: #334155 !important;
  font-size: 11px;
  letter-spacing: 0.01em;
}

.users-page-btn-dark {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
}

.users-page-btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(220, 38, 38, 0.2);
}

.users-ctx-menu {
  position: fixed;
  z-index: 10010;
  min-width: 150px;
  padding: 6px;
  border: 1px solid #d7e2f2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.users-ctx-action {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  text-align: left;
  background: #f8fbff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.users-ctx-action:hover {
  background: #e8f1ff;
}

.users-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 10011;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(5px);
}

.users-detail-card {
  position: relative;
  width: min(520px, 100%);
  max-height: min(78vh, 680px);
  overflow: auto;
  padding: 20px 18px 16px;
  border-radius: 18px;
  border: 1px solid #d9e1ee;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.2);
}

.menu-stats-detail-card {
  width: min(760px, 100%);
}

.menu-stats-detail-table th:first-child,
.menu-stats-detail-table td:first-child {
  width: 56px;
}

.menu-stats-detail-table th:last-child,
.menu-stats-detail-table td:last-child {
  width: 120px;
}

.users-detail-card h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #0f172a;
}

.users-detail-meta {
  margin-bottom: 10px;
  font-size: 13px;
  color: #475569;
}

.users-detail-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.users-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #e4ebf5;
  border-radius: 11px;
  background: #f8fbff;
}

.users-detail-item span {
  color: #64748b;
  font-size: 12px;
  min-width: 22px;
}

.users-detail-item strong {
  color: #0f172a;
  font-size: 14px;
}

.users-detail-empty {
  padding: 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #475569;
  font-size: 13px;
}

.users-detail-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #d4dce8;
  background: #ffffff;
  color: #334155;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.users-detail-close:hover {
  background: #f1f5f9;
}

.warning-compose-modal,
.warning-inbox-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
}

.warning-compose-card,
.warning-inbox-card {
  position: relative;
  width: min(540px, 100%);
  border-radius: 18px;
  border: 1px solid #dbe5f4;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
  padding: 18px;
}

.warning-compose-card h3,
.warning-inbox-card h3 {
  margin: 0 0 10px;
  color: #0f172a;
}

.warning-compose-close,
.warning-inbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  color: #334155;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.warning-compose-users-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.warning-compose-tools {
  display: flex;
  gap: 6px;
}

.warning-mini-btn {
  border: 1px solid #ccd9eb;
  background: #f8fbff;
  color: #334155;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.warning-compose-users {
  max-height: 180px;
  overflow: auto;
  border: 1px solid #dbe6f5;
  border-radius: 12px;
  background: #ffffff;
  padding: 6px;
  margin-bottom: 10px;
}

.warning-user-table {
  width: 100%;
}

.warning-user-head,
.warning-user-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 8px;
}

.warning-user-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f6faff;
  border: 1px solid #e4ecf9;
  border-radius: 10px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 800;
  color: #334155;
  margin-bottom: 6px;
}

.warning-user-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.warning-user-row {
  border: 1px solid #edf2fb;
  border-radius: 10px;
  padding: 7px 8px;
  background: #ffffff;
}

.warning-user-col-check {
  text-align: center;
}

.warning-user-col-email {
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}

.warning-compose-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 5px;
}

.warning-compose-text {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid #d6e2f2;
  padding: 10px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
}

.warning-compose-text:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.25);
}

.warning-compose-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.warning-inbox-from {
  margin-bottom: 8px;
  font-size: 12px;
  color: #64748b;
}

.warning-inbox-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #0f172a;
  font-size: 15px;
  line-height: 1.5;
}

.perm-ctx-menu {
  position: fixed;
  z-index: 10030;
  min-width: 180px;
  padding: 7px;
  border-radius: 14px;
  border: 1px solid #dbe5f4;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
  display: none;
}

.perm-ctx-item {
  width: 100%;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  color: #1e293b;
  border-radius: 10px;
  padding: 8px 10px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.perm-ctx-item + .perm-ctx-item {
  margin-top: 6px;
}

.perm-ctx-item:hover {
  border-color: #c7dbf7;
  background: linear-gradient(180deg, #f9fcff, #edf5ff);
}

.perm-ctx-item-danger {
  color: #b91c1c;
}

.perm-ctx-message-modal {
  position: fixed;
  inset: 0;
  z-index: 10031;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(4px);
}

.perm-ctx-message-card {
  position: relative;
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid #dbe5f4;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
  padding: 18px;
}

.perm-ctx-message-card h3 {
  margin: 0 0 10px;
  color: #0f172a;
}

.perm-ctx-message-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid #dbe3ef;
  background: #ffffff;
  color: #334155;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.perm-ctx-message-target {
  font-size: 13px;
  color: #475569;
  margin-bottom: 8px;
}

.perm-ctx-message-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 6px;
}

.perm-ctx-message-text {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border-radius: 12px;
  border: 1px solid #d6e2f2;
  padding: 10px;
  font-size: 14px;
  color: #0f172a;
  outline: none;
}

.perm-ctx-message-text:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.25);
}

.perm-ctx-message-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.perm-page-shell {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(167, 243, 208, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
  box-shadow:
    0 24px 70px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

.perm-page-hero,
.perm-page-toolbar,
.perm-page-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.perm-page-hero {
  padding-bottom: 20px;
}

.perm-page-copy {
  max-width: 760px;
}

.perm-page-kicker,
.perm-page-mini-kicker,
.perm-modal-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(220, 252, 231, 0.96);
  color: #166534;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.perm-page-copy h2 {
  margin: 12px 0 8px;
  color: #0f172a;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  font-weight: 900;
}

.perm-page-copy p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.6;
}

.perm-page-info {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(248, 250, 252, 0.92);
  color: #334155;
  font-size: 14px;
  font-weight: 800;
}

.perm-page-panel {
  margin-top: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 28px;
  background: rgba(255,255,255,0.88);
  overflow: hidden;
}

.perm-page-panel-head {
  padding: 20px 20px 16px;
}

.perm-page-panel-head h3 {
  margin: 10px 0 0;
  color: #0f172a;
  font-size: 24px;
  font-weight: 900;
}

.perm-page-panel-head small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.perm-email-list {
  display: grid;
  gap: 12px;
  padding: 0 20px 20px;
}

.perm-email-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.92));
  box-shadow: 0 12px 30px rgba(148, 163, 184, 0.1);
}

.perm-email-copy {
  min-width: 0;
  width: 100%;
}

.perm-email-copy strong {
  display: block;
  color: #0f172a;
  font-size: 15px;
  font-weight: 900;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.perm-email-copy small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.perm-email-action-btn {
  min-height: 27px;
  min-width: 66px;
  padding: 0 8px;
  border-radius: 999px;
  font-family: "Montserrat", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  width: auto !important;
  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.12);
  flex: 0 0 auto;
  justify-self: end;
  color: #111827 !important;
}

.perm-empty-state,
.perm-modal-loading {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 180px;
  padding: 20px;
  text-align: center;
  color: #475569;
}

.perm-empty-state strong,
.perm-modal-loading strong {
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}

.perm-empty-state span,
.perm-modal-loading span {
  max-width: 460px;
  font-size: 14px;
  line-height: 1.6;
}

.perm-page-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900 !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.perm-page-btn:hover {
  transform: translateY(-1px);
}

.perm-page-btn-primary {
  background: linear-gradient(135deg, #0f766e, #10b981);
  color: #fff !important;
  box-shadow: 0 14px 30px rgba(16, 185, 129, 0.18);
}

.perm-page-btn-soft {
  background: linear-gradient(135deg, #ecfdf5, #dcfce7);
  color: #166534 !important;
  border-color: rgba(34, 197, 94, 0.22);
}

.perm-page-btn-outline {
  background: rgba(255,255,255,0.88);
  border-color: rgba(148, 163, 184, 0.28);
  color: #0f172a !important;
}

.perm-page-btn-ghost {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.9);
  border-color: rgba(148, 163, 184, 0.24);
  color: #0f172a !important;
  font-size: 12px;
}

.perm-page-btn-soft-danger {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(254, 242, 242, 0.96);
  border-color: rgba(239, 68, 68, 0.22);
  color: #b91c1c !important;
  font-size: 12px;
}

.perm-page-btn-soft-green {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  background: rgba(236, 253, 245, 0.96);
  border-color: rgba(34, 197, 94, 0.22);
  color: #166534 !important;
  font-size: 12px;
}

.perm-page-btn-compact {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  width: auto !important;
  flex: 0 0 auto;
}

.perm-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(circle at top, rgba(167, 243, 208, 0.14), transparent 28%),
    rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(10px);
}

.perm-modal-backdrop.is-open {
  display: flex;
}

.perm-modal-card {
  position: relative;
  width: min(100%, 1080px);
  max-height: min(92vh, 980px);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.97));
  box-shadow:
    0 30px 70px rgba(15, 23, 42, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.92);
  overflow: hidden;
}

.perm-modal-header,
.perm-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
}

.perm-modal-header {
  align-items: flex-start;
  justify-content: flex-start;
  padding-right: 78px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}

.perm-modal-copy h3 {
  margin: 10px 0 6px;
  color: #0f172a;
  font-size: 26px;
  font-weight: 900;
}

.perm-modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.perm-modal-email {
  margin: 0;
  color: #475569;
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.perm-block-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.96);
  color: #166534;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  flex: 0 0 auto;
}

.perm-block-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(16, 185, 129, 0.16);
}

.perm-block-btn.is-blocked {
  border-color: rgba(34, 197, 94, 0.22);
  border-color: rgba(239, 68, 68, 0.22);
  background: rgba(254, 242, 242, 0.96);
  color: #b91c1c;
}

.perm-block-btn.is-blocked:hover {
  box-shadow: 0 8px 16px rgba(239, 68, 68, 0.14);
}

.perm-modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: #475569;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.perm-modal-close:hover {
  transform: rotate(90deg);
  background: #fff;
  color: #0f172a;
}

.perm-modal-body {
  flex: 1;
  overflow: auto;
  padding: 18px 20px 20px;
}

.perm-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid rgba(226, 232, 240, 0.92);
  background: rgba(248,250,252,0.88);
}

.perm-modal-sections {
  display: grid;
  gap: 16px;
}

.perm-section {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 10px 28px rgba(148, 163, 184, 0.08);
  overflow: hidden;
}

.perm-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 12px;
}

.perm-section-head h4 {
  margin: 0 0 6px;
  color: #0f172a;
  font-size: 18px;
  font-weight: 900;
}

.perm-section-head p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.perm-section-actions,
.perm-anbar-toolbar,
.perm-anbar-search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.perm-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.perm-section-body {
  padding: 0 18px 18px;
}

.perm-page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 300px;
  overflow: auto;
  padding-right: 4px;
  align-content: start;
}

.perm-option-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
}

.perm-option-card input[type="checkbox"],
.perm-anbar-table input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
  flex: 0 0 auto;
}

.perm-option-copy {
  min-width: 0;
}

.perm-option-copy strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.perm-option-copy small {
  display: block;
  margin-top: 2px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.perm-anbar-toolbar,
.perm-anbar-search-row {
  justify-content: space-between;
  margin-bottom: 12px;
}

.perm-anbar-note {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

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

.perm-search-wrap label {
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.perm-search-wrap input {
  width: 180px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 12px;
  outline: none;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  background: rgba(255,255,255,0.92);
  box-sizing: border-box;
}

.perm-search-wrap input:focus {
  border-color: rgba(16, 185, 129, 0.56);
  box-shadow: 0 0 0 4px rgba(167, 243, 208, 0.32);
}

.perm-anbar-table-wrap {
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 18px;
}

.perm-anbar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}

.perm-anbar-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 12px 14px;
  background: rgba(248,250,252,0.96);
  border-bottom: 1px solid rgba(226, 232, 240, 0.95);
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
}

.perm-anbar-table thead th:first-child,
.perm-anbar-table tbody td:first-child,
.perm-anbar-table thead th:nth-child(2),
.perm-anbar-table tbody td:nth-child(2) {
  text-align: center;
}

.perm-anbar-table tbody tr:nth-child(even) {
  background: rgba(248,250,252,0.72);
}

.perm-anbar-table tbody tr:hover {
  background: rgba(220,252,231,0.38);
}

.perm-anbar-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  color: #0f172a;
  vertical-align: middle;
}

.perm-api-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.perm-api-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(239, 246, 255, 0.94);
  color: #0f4c81;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 920px) {
  .users-page-hero,
  .users-page-toolbar,
  .users-table-head {
    flex-direction: column;
    align-items: stretch;
  }

  .users-stats {
    grid-template-columns: 1fr;
  }

  .perm-page-hero,
  .perm-page-toolbar,
  .perm-page-panel-head,
  .perm-modal-header,
  .perm-modal-footer,
  .perm-section-head,
  .perm-anbar-toolbar,
  .perm-anbar-search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .perm-page-grid {
    max-height: 280px;
  }
}

@media (max-width: 640px) {
  .users-page-shell {
    padding: 16px;
    border-radius: 24px;
  }

  .users-page-actions,
  .users-danger-zone {
    flex-direction: column;
  }

  .users-page-btn {
    width: 100%;
  }

  .users-data-table thead th,
  .users-data-table tbody td {
    padding: 12px 10px;
  }

  .users-pill,
  .users-date {
    padding: 0 10px;
  }

  .perm-page-shell {
    padding: 16px;
    border-radius: 24px;
  }

  .perm-modal-backdrop {
    padding: 10px;
  }

  .perm-modal-card {
    width: 100%;
    max-height: calc(100vh - 20px);
    border-radius: 22px;
  }

  .perm-modal-header,
  .perm-modal-body,
  .perm-modal-footer,
  .perm-section-head,
  .perm-section-body,
  .perm-email-list,
  .perm-page-panel-head {
    padding-left: 14px;
    padding-right: 14px;
  }

  .perm-search-wrap input {
    width: 100%;
  }

  .perm-page-btn,
  .perm-page-btn-primary,
  .perm-page-btn-soft,
  .perm-page-btn-outline {
    width: 100%;
  }

  .perm-page-btn-compact {
    width: auto !important;
  }

  .perm-compact-row {
    align-self: flex-start;
  }

  .perm-email-item {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .perm-email-action-btn {
    width: auto;
    justify-self: start;
    align-self: start;
  }

  .perm-modal-header {
    padding-right: 64px;
  }

  .perm-modal-close {
    top: 14px;
    right: 14px;
  }

  .perm-page-grid {
    max-height: 260px;
  }
}

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

.msg-users-box {
  max-height: 8.6em;          /* ~8 sətir effekti */
  overflow: auto;
  border: 1px solid #000;
  border-radius: 10px;
}

.msg-users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;            /* kiçik font */
}

.msg-users-table th, .msg-users-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #000;   /* hər sətir arası qara xətt */
  vertical-align: middle;
}

.msg-users-table th {
  position: sticky;
  top: 0;
  background: #f3f4f6;
  z-index: 1;
}

/* ===== Artıq-Əskik Share Modal ===== */
.kv-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.kv-modal-box {
  background: #fff;
  width: 320px;
  max-width: 90%;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.kv-excel-export-wrap{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
  margin-bottom:2px;
}
.kv-excel-export-btn{
  width:32px;
  height:32px;
  border:none;
  border-radius:10px;
  background:#16a34a;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.12);
}
.kv-excel-export-btn:hover{filter:brightness(1.05);}
.kv-excel-export-btn:active{transform:translateY(1px);}


/* ===== Kvota Chat (custom) ===== */
.kvChatShell{
  max-width: 980px;
  margin: 14px auto;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
}
.kvChatHeader{
  display:flex;align-items:center;justify-content:space-between;
  padding: 12px 14px;
  background:
    radial-gradient(900px 380px at 10% 0%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(900px 380px at 90% 0%, rgba(16,185,129,.14), transparent 60%),
    rgba(0,0,0,.02);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.kvChatTitle{display:flex;gap:10px;align-items:center;}
.kvChatLogo{
  width: 38px;height: 38px;border-radius: 12px;
  display:grid;place-items:center;
  font-weight: 900;color:#fff;
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(16,185,129,.90));
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.kvChatTitleMain{font-weight: 900;font-size: 15px;}
.kvChatTitleSub{font-size: 12px;opacity:.72;margin-top:2px;}
.kvChatMeta{
  font-size:12px;opacity:.8;
  background: rgba(0,0,0,.06);
  padding: 6px 10px;border-radius:999px;
}
.kvChatBody{
  height: calc(100vh - 320px);
  min-height: 360px;
  max-height: 720px;
  overflow:auto;
  padding: 14px;
  background:
    radial-gradient(1200px 600px at 80% 0%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 520px at 0% 100%, rgba(16,185,129,.10), transparent 60%),
    #fff;
}
.kvChatRow{display:flex;margin:10px 0;}
.kvChatRow.me{justify-content:flex-end;}
.kvChatRow.other{justify-content:flex-start;}

.kvChatBubble{
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
  backdrop-filter: blur(8px);
  animation: kvPop .14s ease-out;
}
.kvChatRow.me .kvChatBubble{
  background: rgba(99,102,241,.14);
  border-top-right-radius: 8px;
}
.kvChatRow.other .kvChatBubble{
  background: rgba(0,0,0,.03);
  border-top-left-radius: 8px;
}
@keyframes kvPop{from{transform:scale(.98);opacity:.6}to{transform:scale(1);opacity:1}}

.kvChatTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.kvChatName{font-size:12px;font-weight:900;opacity:.85}
.kvChatTime{font-size:11px;opacity:.6}
.kvChatText{font-size:14px;line-height:1.35;white-space:pre-wrap;word-break:break-word}

.kvChatComposer{
  display:flex;gap:10px;
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
}
.kvChatComposer input{
  flex:1;
  border:1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px 12px;
  outline:none;
}
.kvChatComposer input:focus{
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
}
.kvChatSendBtn{
  width: 46px;min-width:46px;height:46px;
  border:0;border-radius: 14px;
  cursor:pointer;color:#fff;font-weight:900;
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(16,185,129,.90));
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.kvChatSendBtn:disabled{opacity:.55;cursor:not-allowed}

/* Söhbət düyməsini heç vaxt gizlətmə */
#sideMenu button[onclick*="chatPage"]{
  display: flex !important;
}

/* ===== Chat layout (sidebar + main) ===== */
.kvChatLayout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  min-height: 520px;
}

.kvChatSidebar{
  border-right: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.75);
  padding: 10px;
}

.kvChatMain{ display:flex; flex-direction:column; }

.kvChatSideBlock{ margin-bottom: 12px; }
.kvChatSideTitle{
  font-weight: 900;
  font-size: 13px;
  opacity: .85;
  margin: 6px 6px 8px;
}

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

.kvChatCard{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  cursor: pointer;
  transition: transform .08s ease, background .12s ease;
}
.kvChatCard:hover{
  background: rgba(99,102,241,.10);
  transform: translateY(-1px);
}
.kvChatAvatar{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  color:#fff; font-weight: 900;
  background: linear-gradient(135deg, rgba(99,102,241,.95), rgba(16,185,129,.90));
}
.kvChatCardText{ min-width:0; }
.kvChatCardName{ font-weight: 900; font-size: 13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kvChatCardSub{ font-size: 12px; opacity:.65; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width: 980px){
  .kvChatLayout{ grid-template-columns: 1fr; }
  .kvChatSidebar{ border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); }
}


/* ========== AI Chatbot UI ========== */
.aiSetCard{
  max-width: 760px;
  background: #0b1220;
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
  color: #e5e7eb;
}
.aiSetRow{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.aiSetRowInline{ flex-direction:row; align-items:center; gap:10px; flex-wrap:wrap; }
.aiSetLabel{ font-weight:800; font-size:13px; color:#cbd5e1; }
.aiSetInput{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background:#0f172a;
  color:#e5e7eb;
  outline:none;
}
.aiSetInput:focus{ border-color: rgba(59,130,246,.8); box-shadow:0 0 0 4px rgba(59,130,246,.15); }

.aiBtnPrimary{
  padding:10px 12px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  color:#0b1220;
  background: linear-gradient(135deg, #38bdf8, #60a5fa);
}
.aiBtnGhost{
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.28);
  background:#0f172a;
}
.aiSetStatus{ font-size:13px; color:#cbd5e1; opacity:.95; }

.aiSwitch{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.aiSwitch input{ display:none; }
.aiSwitchUi{
  width:44px; height:24px; border-radius:999px;
  background: rgba(148,163,184,.25);
  position:relative;
  border:1px solid rgba(148,163,184,.28);
}
.aiSwitchUi::after{
  content:"";
  width:18px; height:18px; border-radius:50%;
  position:absolute; top:2px; left:2px;
  background:#e5e7eb;
  transition: all .18s ease;
}
.aiSwitch input:checked + .aiSwitchUi{
  background: rgba(34,197,94,.35);
  border-color: rgba(34,197,94,.55);
}
.aiSwitch input:checked + .aiSwitchUi::after{ left:22px; background:#bbf7d0; }
.aiSwitchText{ font-weight:800; font-size:13px; color:#e5e7eb; }

/* Floating button */
.aiChatFloat{
  position:fixed;
  right:16px;
  bottom:16px;
  width:54px;
  height:54px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  z-index: 99990;
  color:#0b1220;
  font-size:20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  background: linear-gradient(135deg, #38bdf8, #60a5fa);
}
.aiChatFloat:active{ transform: translateY(1px); }

/* Modal */
.aiChatModal{ position:fixed; inset:0; z-index:99995; }
.aiChatBackdrop{
  position:absolute; inset:0;
  background: rgba(2,6,23,.35);
  backdrop-filter: blur(2px);
}
.aiChatCard{
  position:absolute;
  right:16px;
  bottom:88px;
  width: min(380px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 140px));
  background:#0b1220;
  border:1px solid rgba(148,163,184,.25);
  border-radius:16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.aiChatHeader{
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(11,18,32,1));
}
.aiChatTitle{ font-weight:900; color:#e5e7eb; }
.aiChatSub{ font-size:12px; color:#94a3b8; margin-top:2px; }
.aiChatClose{
  width:32px; height:32px;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.22);
  background:#0f172a;
  color:#e5e7eb;
  cursor:pointer;
  font-size:18px;
}
.aiChatBody{
  flex:1;
  padding:12px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.aiMsg{
  max-width: 88%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.18);
  white-space:pre-wrap;
  line-height:1.35;
}
.aiMsg.user{ margin-left:auto; background:#0f172a; color:#e5e7eb; }
.aiMsg.bot{  margin-right:auto; background: rgba(56,189,248,.10); color:#e5e7eb; }
.aiChatComposer{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid rgba(148,163,184,.18);
  background:#0b1220;
}
.aiChatInput{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.28);
  background:#0f172a;
  color:#e5e7eb;
  outline:none;
}
.aiChatSend{
  width:46px;
  border:none;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  color:#0b1220;
  background: linear-gradient(135deg, #22c55e, #86efac);
}


/* ESP32 Proxy UI */
.card { padding: 14px; border-radius: 14px; background: rgba(255,255,255,0.06); }
.grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.lbl { font-size: 12px; opacity: .8; margin-bottom: 6px; }
.pre { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.25); overflow:auto; }

.btns { display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }
.btn { padding: 10px 12px; border-radius: 12px; border: 0; cursor:pointer; }
.btn.primary { font-weight: 700; }
.btn.danger { font-weight: 700; }

.esp32-status { margin-top: 10px; padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.18); }
.esp32-status.ok { background: rgba(0,128,0,0.25); }
.esp32-status.err { background: rgba(200,0,0,0.25); }
.esp32-status.info { background: rgba(0,90,200,0.25); }

/* =========================
   AI Köməkçi - UI Fix
   ========================= */

.aiChatFloat{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  z-index: 9999;
  background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(59,130,246,.95));
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  color: #fff;
}
.aiFabIcon{font-size: 22px; line-height: 1;}

.aiChatModal{position: fixed; inset: 0; z-index: 9998;}
.aiChatBackdrop{position: absolute; inset: 0; background: rgba(0,0,0,.35);}

.aiChatCard{
  position: absolute;
  right: 18px;
  bottom: 90px;
  width: min(560px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 140px));
  background: rgba(10, 18, 34, .92);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
  overflow: hidden;

  /* ƏN VACİB: composer aşağıda qalsın */
  display: flex;
  flex-direction: column;

  /* Mouse ilə böyüt/balacalt */
  resize: both;
  min-width: 320px;
  min-height: 520px;
}

.aiChatHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.aiChatTitle{color:#fff; font-weight:700; font-size:16px;}
.aiChatSub{color: rgba(255,255,255,.7); font-size:12px; margin-top:2px;}

.aiChatHeaderBtns{display:flex; gap:8px; align-items:center;}
.aiChatClose{
  width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff; cursor:pointer;
}

.aiTabBtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 13px;
}
.aiTabBtn.isActive{
  background: rgba(59,130,246,.28);
  border-color: rgba(59,130,246,.55);
}

.aiChatTabs{flex:1; display:flex; flex-direction:column; min-height:0;}
.aiTabPanel{flex:1; display:flex; flex-direction:column; min-height:0;}

.aiChatBody{
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.aiChatComposer{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px 44px 1fr 54px;
  gap: 10px;
  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(7, 14, 28, .92);
}

.aiIconBtn{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}
.aiIconBtn.isRec{
  background: rgba(239,68,68,.25);
  border-color: rgba(239,68,68,.55);
}

.aiChatInput{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 0 12px;
  outline: none;
}
.aiChatInput::placeholder{color: rgba(255,255,255,.55);}

.aiChatSend{
  width: 54px; height: 44px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  color:#fff;
  background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(34,197,94,.95));
}
.aiSendIcon{font-size: 18px;}

.aiMsgRow{display:flex; margin: 10px 0;}
.aiMsgRow.isUser{justify-content:flex-end;}
.aiMsgRow.isBot{justify-content:flex-start;}

.aiMsg{
  max-width: 92%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
}
.aiMsgUser{
  background: rgba(59,130,246,.22);
  color: #fff;
}
.aiMsgBot{
  background: rgba(255,255,255,.06);
  color: #fff;                 /* ✅ qara yox, ağ */
}

.aiText{white-space:pre-wrap; word-break:break-word; color: inherit;}

.aiSettingsBox{padding: 14px; display:flex; flex-direction:column; gap:10px;}
.aiLabel{color: rgba(255,255,255,.85); font-size: 13px;}
.aiSettingsInput{
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 0 12px;
  outline: none;
}

.aiRow{display:flex; align-items:center; justify-content:space-between;}
.aiRowBtns{gap:10px;}
.aiBtnPrimary{
  flex:1;
  height: 44px;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  background: rgba(59,130,246,.9);
  color: #fff;
  font-weight: 700;
}
.aiBtnGhost{
  flex:1;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}
.aiTestResult{color: rgba(255,255,255,.8); font-size: 13px; padding-top: 2px;}
.aiHint{color: rgba(255,255,255,.70); font-size: 12px; line-height: 1.45; padding-top: 6px;}

.aiSwitchRow{display:flex; align-items:center; gap:10px; color: rgba(255,255,255,.85); font-size: 13px;}
.aiSwitchRow input{display:none;}
.aiSwitch{
  width: 44px; height: 26px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  position: relative;
}
.aiSwitch::after{
  content:"";
  position:absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  transition: .2s;
}
.aiSwitchRow input:checked + .aiSwitch{
  background: rgba(16,185,129,.25);
  border-color: rgba(16,185,129,.55);
}
.aiSwitchRow input:checked + .aiSwitch::after{
  left: 21px;
  background: rgba(16,185,129,.95);
}

.aiTableWrap{overflow:auto; margin-top: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10);}
.aiTable{width:100%; border-collapse: collapse; min-width: 520px; background: rgba(0,0,0,.10);}
.aiTable th, .aiTable td{
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding: 8px 10px;
  color: #fff;                 /* ✅ qara yox, ağ */
  font-size: 12px;
  vertical-align: top;
}
.aiTable th{background: rgba(255,255,255,.06); font-weight: 800;}
.aiNum{text-align:right; white-space:nowrap;}

.aiCardTitle{color:#fff; font-weight:800; font-size: 12px; margin-bottom: 6px; opacity: .95; white-space: pre-wrap;}
.aiImg{width:100%; border-radius: 12px; border: 1px solid rgba(255,255,255,.10);}

/* AI Chatbot settings layout fix */
.aiSwitchBlock{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:wrap;
}

.aiSetActions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.aiSetActions .aiBtnPrimary,
.aiSetActions .aiBtnGhost{
  flex: 1 1 220px;   /* mobil + desktop səliqəli */
  min-width: 180px;
}

/* === İstək sifariş: Anbara əsasən axtar modal fix === */
#istek_modal{
  display: none;            /* JS açanda block edir */
  align-items: center;      /* mərkəz */
  justify-content: center;  /* mərkəz */
  padding: 16px;
}

#istek_modal .modal-content.kv-modal{
  position: relative;       /* generic .modal-content absolute-ni “öldürür” */
  left: auto;
  top: auto;
  transform: none;

  width: min(520px, calc(100vw - 32px));
  max-height: min(86vh, calc(100vh - 32px));
  overflow: hidden;         /* body scroll olacaq */
  display: flex;
  flex-direction: column;
  margin: 0;
}

#istek_modal .kv-modal-body{
  overflow: auto;
  max-height: 60vh;
}

/* footer həmişə görünən qalsın */
#istek_modal .kv-modal-footer{
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
}

.kv-choice-wrap { margin-top: 10px; display: grid; gap: 10px; }
.kv-choice-title { font-weight: 700; }
.kv-choice-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 10px; }
.kv-choice-table th, .kv-choice-table td { padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.kv-choice-table thead th { background: rgba(30,64,175,0.25); text-align: left; }
.kv-choice-table tbody tr { cursor: pointer; }
.kv-choice-table tbody tr:hover { background: rgba(30,64,175,0.18); }
.kv-choice-actions { display: flex; gap: 10px; }
.kv-choice-btn{
  border: 0;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  background: #1e40af;
  color: #fff;
}
.kv-choice-btn:hover{ filter: brightness(1.05); }

/* Seçim cədvəli: ağ fonda qara yazı */
.kv-choice-table,
.kv-choice-table th,
.kv-choice-table td {
  color: #111 !important;
}

.kv-choice-table thead th {
  color: #111 !important;
}

.kv-choice-table tbody tr {
  color: #111 !important;
}

/* Checkbox-lar da görünür olsun */
.kv-choice-table input[type="checkbox"] {
  accent-color: #1e40af;
}

/* Hover zamanı da yazı qara qalsın */
.kv-choice-table tbody tr:hover td {
  color: #111 !important;
}

/* Artiq-Eskik / Kim satib */
#kimSatibModal{
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

#kimSatibModal .ae-kimsatib-modal-card{
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  width: min(700px, calc(100vw - 28px));
  max-height: min(82vh, calc(100vh - 28px));
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.88)),
    linear-gradient(135deg, #f8fafc, #eef2ff);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ae-kimsatib-modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.ae-kimsatib-modal-title{
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ae-kimsatib-modal-meta{
  margin-top: 4px;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
}

.ae-kimsatib-close-btn,
.ae-kimsatib-fetch-btn,
.ae-kimsatib-menu-btn{
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: all .18s ease;
}

.ae-kimsatib-close-btn{
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  background: rgba(255,255,255,0.78);
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.ae-kimsatib-close-btn:hover,
.ae-kimsatib-menu-btn:hover{
  background: #ffffff;
  transform: translateY(-1px);
}

.ae-kimsatib-toolbar{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  background: rgba(255,255,255,0.64);
  margin-bottom: 10px;
}

.ae-kimsatib-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ae-kimsatib-field label{
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.ae-kimsatib-field input{
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 14px;
  background: rgba(255,255,255,0.92);
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
}

.ae-kimsatib-field input:focus{
  outline: none;
  border-color: rgba(59, 130, 246, 0.65);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
}

.ae-kimsatib-fetch-btn{
  width: 40px;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  padding: 0;
  background: linear-gradient(135deg, #ffffff, #e2e8f0);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.ae-kimsatib-fetch-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.ae-kimsatib-fetch-btn:disabled{
  opacity: .7;
  cursor: wait;
  transform: none;
}

.ae-kimsatib-body{
  overflow: auto;
  max-height: calc(82vh - 150px);
  padding-right: 2px;
}

.ae-kimsatib-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 220px;
  border: 1px dashed rgba(148, 163, 184, 0.45);
  border-radius: 20px;
  background: rgba(255,255,255,0.5);
  color: #475569;
  text-align: center;
  padding: 18px;
}

.ae-kimsatib-empty strong{
  color: #0f172a;
  font-size: 17px;
}

.ae-kimsatib-empty-error strong,
.ae-kimsatib-empty-error span{
  color: #b91c1c;
}

.ae-kimsatib-table-wrap{
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.88);
}

.ae-kimsatib-itemref{
  padding: 10px 14px 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.ae-kimsatib-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 460px;
}

.ae-kimsatib-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px 14px;
  background: linear-gradient(180deg, #f8fafc, #eef2ff);
  color: #334155;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ae-kimsatib-table tbody td{
  padding: 11px 14px;
  border-top: 1px solid rgba(226, 232, 240, 0.95);
  color: #111827;
  font-size: 13px;
  font-weight: 600;
}

.ae-kimsatib-table tbody tr:nth-child(even) td{
  background: rgba(248, 250, 252, 0.78);
}

.ae-kimsatib-table tbody tr:hover td{
  background: rgba(238, 242, 255, 0.95);
}

.ae-kimsatib-num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ae-kimsatib-menu{
  min-width: 156px;
  padding: 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(14px);
}

.ae-kimsatib-menu-btn{
  width: 100%;
  padding: 10px 12px;
  background: linear-gradient(135deg, #ffffff, #f8fafc);
  color: #000000;
  text-align: left;
}

@media (max-width: 720px){
  #kimSatibModal{
    padding: 10px;
  }

  #kimSatibModal .ae-kimsatib-modal-card{
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 14px;
    border-radius: 20px;
  }

  .ae-kimsatib-modal-head,
  .ae-kimsatib-toolbar{
    grid-template-columns: 1fr;
    display: grid;
  }

  .ae-kimsatib-close-btn,
  .ae-kimsatib-fetch-btn{
    width: 40px;
  }

  .ae-kimsatib-body{
    max-height: calc(100vh - 220px);
  }
}

.kv-ac-box{
  position:absolute;
  left:0;
  right:0;
  bottom:50px; /* input üstündə çıxsın */
  background:#0b1220;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  z-index:9999;
  max-height: 280px;
  overflow-y: auto;
}

.kv-ac-item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:#e5e7eb;
}

.kv-ac-item:hover,
.kv-ac-item.active{
  background: rgba(30,64,175,0.25);
}

.kv-ac-name{ font-weight:600; }
.kv-ac-score{ opacity:0.7; font-size:12px; }

/* ===== Saatlıq satışlar: Progress + % bar ===== */
.sh-progress-wrap{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px;background:rgba(0,0,0,.02)}
.sh-progress-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.sh-progress-text{font-weight:900}
.sh-progress-info{font-size:12px;opacity:.8}
.sh-progress{height:12px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden}
.sh-progress-bar{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, #22c55e, #3b82f6, #a855f7, #22c55e);
  background-size: 220% 100%;
  animation: shMove 1.2s linear infinite;
  transition: width .25s ease;
}
@keyframes shMove{0%{background-position:0% 0}100%{background-position:220% 0}}

.sh-pct{position:relative;height:22px;border-radius:10px;background:rgba(0,0,0,.06);overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.sh-pct-bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#60a5fa,#22c55e);width:0%}
.sh-pct-txt{position:relative;z-index:2;font-weight:900;font-size:12px;line-height:22px}

/* Saatlıq satışlar: saat sütunu toggle-ları */
.sh-toggles {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  margin: 8px 0 10px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.75);
}

.sh-toggles-left {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.sh-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
  font-weight: 700;
  user-select: none;
}

/* Hamısı / Heç biri düymələri */
.sh-mini-btn{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: 900;
  cursor: pointer;
  color: #000 !important;          /* iç yazı qara */
  background: #fff;                /* fallback */
}

/* Rəngli düymələr */
#sh_hourToggles_aptek_all,
#sh_hourToggles_emp_all{
  background: linear-gradient(90deg,#22c55e,#3b82f6,#a855f7);
  color: #000 !important;          /* qara yazı */
}

#sh_hourToggles_aptek_none,
#sh_hourToggles_emp_none{
  background: linear-gradient(90deg,#f97316,#f43f5e,#a855f7);
  color: #000 !important;          /* qara yazı */
}

/* hover effekti */
#sh_hourToggles_aptek_all:hover,
#sh_hourToggles_emp_all:hover,
#sh_hourToggles_aptek_none:hover,
#sh_hourToggles_emp_none:hover{
  filter: brightness(1.05);
}

/* % progress + tooltip */
.sh-pct {
  position: relative;
  height: 20px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  overflow: hidden;
  min-width: 74px;
}

.sh-pct-bar { height: 100%; }

.sh-pct-txt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  color: #111;
}

/* Tooltip */
.sh-pct[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: -38px;
  transform: translateX(-50%);
  background: rgba(17, 24, 39, .95);
  color: #fff;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 50;
}

.sh-pct[data-tip]:hover::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(17, 24, 39, .95);
  z-index: 50;
}

/* Toplam sətri */
.sh-total-row td {
  font-weight: 900;
  background: rgba(0,0,0,.04);
}

/* Dövriyyə - Hədəf % input ölçü problemi düzəlişi */
.dv-hedef-input{
  width: 48px;            /* digər sütunlarla eyni hiss */
  height: 18px;           /* sətiri böyütməsin */
  padding: 0;             /* hündürlüyü artırmasın */
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  text-align: center;

  font: inherit;          /* cədvəlin fontunu götürsün */
  font-weight: inherit;   /* bold effekti olmasın */
  line-height: 18px;
  box-sizing: border-box;

  -moz-appearance: textfield; /* firefox spinner off */
}

/* Chrome/Edge number spinner off */
.dv-hedef-input::-webkit-outer-spin-button,
.dv-hedef-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.dv-hedef-input:focus{
  outline: 1px solid rgba(0,0,0,.45); /* fokusda səliqəli çərçivə */
  outline-offset: 1px;
  background: rgba(255,255,255,.35);
}

.dv-percent{
  margin-left: 2px;
  font: inherit;
  font-weight: inherit;
}

/* Əlavə sığorta: sətirlər sabit qalsın */
#dovriyye_result table td{
  vertical-align: middle;
  line-height: 18px;
}

/* Kvota bölgüsü - faiz barı */
.kb-bar{
  --p: 0%;
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: #fff3e0;
  border: 1px solid #f3d2a6;
  overflow: hidden;
  min-width: 120px;
}
.kb-bar::before{
  content:"";
  position:absolute;
  inset:0;
  width: var(--p);
  background: linear-gradient(90deg, #ffcc80, #fb8c00);
}
.kb-bar span{
  position:relative;
  z-index:1;
  display:block;
  text-align:center;
  font-weight:800;
  color:#111;
  font-size:12px;
  line-height:22px;
}

.sm-userbar{
  margin:10px;
  padding:8px 10px;
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.sm-usertext{
  flex:1;
  min-width:0;

  font-size:10px;
  font-weight:700;
  line-height:1.2;
  color:#ffffff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);

  /* mail 1 sətirdə qalsın */
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  word-break:normal;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.sm-usertext::-webkit-scrollbar{
  display:none;
}

.sm-logout{
  flex:0 0 32px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.08);
  color:#ffffff;
  cursor:pointer;
  transition:all .15s ease;
}

.sm-logout:hover{
  background:rgba(239,68,68,.20);
  border-color:rgba(239,68,68,.30);
  color:#ffd7d7;
}

.sm-logout:active{
  transform:scale(.96);
}

.sm-logout i{
  font-size:14px;
  pointer-events:none;
}

/* ===== Satış Payı -> Apteklər üzrə səhifə ===== */

#satisPayiApteklerPage{
  padding-top: 8px;
}

#satisPayiApteklerPage .back-btn{
  margin-bottom: 10px;
}

#spAptekTitle{
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
}

#spAptekMount .sp-aptek-shell{
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid #dbeafe;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.10);
  overflow: hidden;
}

#spAptekMount .sp-aptek-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-bottom: 1px solid #bfdbfe;
  flex-wrap: wrap;
}

#spAptekMount .sp-aptek-head h4{
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
}

#spAptekMount .sp-aptek-badge{
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  font-weight: 800;
  font-size: 13px;
  color: #1d4ed8;
  box-shadow: 0 5px 14px rgba(59, 130, 246, 0.10);
}

#spAptekMount .sp-aptek-table-wrap{
  padding: 8px;
  overflow-x: auto;
}

#spAptekMount table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
}

#spAptekMount thead th{
  padding: 9px 8px;
  font-size: 13px;
  text-align: center;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 30%, #db2777 65%, #ea580c 100%);
  background-size: 200% 200%;
  animation: spAptekHeadFlow 6s ease infinite;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

#spAptekMount thead th:first-child{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

#spAptekMount thead th:last-child{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#spAptekMount .sp-aptek-row td{
  background: #fff;
  padding: 7px 8px;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  line-height: 1.2;
}

#spAptekMount .sp-aptek-row td:first-child{
  border-left: 1px solid #e2e8f0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  width: 52px;
}

#spAptekMount .sp-aptek-row td:last-child{
  border-right: 1px solid #e2e8f0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  white-space: nowrap;
  width: 130px;
}

#spAptekMount .sp-aptek-name{
  text-align: left !important;
  min-width: 220px;
  font-weight: 800;
}

#spAptekMount .sp-aptek-money{
  color: #047857;
  font-weight: 900;
}

#spAptekMount .sp-aptek-progress-wrap{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
}

#spAptekMount .sp-aptek-progress{
  position: relative;
  height: 13px;
  flex: 1;
  background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.12);
}

#spAptekMount .sp-aptek-progress-fill{
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e 0%, #16a34a 40%, #2563eb 100%);
  background-size: 200% 100%;
  animation: spAptekFillGrow 0.9s ease-out, spAptekShine 2.4s linear infinite;
}

#spAptekMount .sp-aptek-progress-glow{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-120%);
  animation: spAptekGlow 2s linear infinite;
  pointer-events: none;
}

#spAptekMount .sp-aptek-progress-text{
  min-width: 58px;
  text-align: right;
  font-weight: 900;
  font-size: 12px;
  color: #1d4ed8;
}

#spAptekMount tfoot td{
  background: #f8fafc;
  padding: 8px 8px;
  font-size: 13px;
  font-weight: 900;
  border-top: 2px solid #cbd5e1;
}

#spAptekMount tfoot td:first-child{
  border-bottom-left-radius: 10px;
}

#spAptekMount tfoot td:last-child{
  border-bottom-right-radius: 10px;
}

@keyframes spAptekFillGrow{
  from{ width: 0; }
}

@keyframes spAptekGlow{
  from{ transform: translateX(-120%); }
  to{ transform: translateX(120%); }
}

@keyframes spAptekShine{
  0%{
    filter: saturate(1);
    background-position: 0 0;
  }
  50%{
    filter: saturate(1.15);
    background-position: 100% 0;
  }
  100%{
    filter: saturate(1);
    background-position: 0 0;
  }
}

@keyframes spAptekHeadFlow{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

@media (max-width: 700px){
  #spAptekTitle{
    font-size: 17px;
  }

  #spAptekMount .sp-aptek-head{
    padding: 8px 10px;
  }

  #spAptekMount .sp-aptek-head h4{
    font-size: 14px;
  }

  #spAptekMount .sp-aptek-badge{
    font-size: 12px;
    padding: 5px 8px;
  }

  #spAptekMount .sp-aptek-progress-wrap{
    min-width: 180px;
  }

  #spAptekMount .sp-aptek-name{
    min-width: 160px;
  }

  #spAptekMount .sp-aptek-row td{
    padding: 6px 7px;
    font-size: 12px;
  }

  #spAptekMount thead th{
    padding: 8px 6px;
    font-size: 12px;
  }
}

#spAptekMount .sp-aptek-actions{
  display: flex;
  justify-content: flex-end;
  padding: 8px 8px 0 8px;
}

#spAptekMount .sp-aptek-actions button{
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

#spAptekMount .sp-aptek-actions button:hover{
  transform: translateY(-1px);
}

#spAptekMount .sp-aptek-capture-area{
  background: #ffffff;
  padding: 8px 8px 10px 8px;
}

#spAptekMount .sp-aptek-capture-title{
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  margin: 2px 0 8px 0;
  line-height: 1.25;
}

/* ===== Home Page (premium başlanğıc paneli) ===== */
.main-content:has(#homePage.active) {
  padding-top: 0 !important;
  padding-left: max(4px, env(safe-area-inset-left));
  padding-right: max(4px, env(safe-area-inset-right));
}

#homePage.page {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 6px;
}

#homePage .kv-home-copy {
  /* üst sol üzən menyu düyməsi altında qalmasın */
  padding-left: min(48px, 11vw);
}

.kv-home-shell {
  --kv-home-pad-x: clamp(12px, 2vw, 22px);
  --kv-home-pad-y-top: clamp(6px, 1vw, 10px);
  --kv-home-pad-y-bottom: clamp(12px, 2vw, 20px);
  --kv-home-gap: clamp(12px, 1.8vw, 22px);
  --kv-home-slate-900: #0c1222;
  --kv-home-slate-500: #64748b;
  position: relative;
  margin: 0 auto clamp(6px, 1.2vw, 12px);
  padding: var(--kv-home-pad-y-top) var(--kv-home-pad-x) var(--kv-home-pad-y-bottom);
  max-width: 1180px;
  font-family: "Segoe UI", system-ui, Tahoma, Arial, sans-serif;
  border-radius: clamp(24px, 2.4vw, 36px);
  background:
    radial-gradient(ellipse 85% 65% at 12% -8%, rgba(125, 211, 252, 0.28), transparent 52%),
    radial-gradient(ellipse 70% 55% at 92% 18%, rgba(199, 210, 254, 0.22), transparent 48%),
    radial-gradient(circle at 50% 108%, rgba(251, 191, 36, 0.07), transparent 42%),
    linear-gradient(165deg, #fbfdff 0%, #f4f8fc 38%, #eef4fb 100%);
  border: 1px solid rgba(148, 163, 184, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 28px 64px -12px rgba(15, 23, 42, 0.08),
    0 12px 28px -8px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

/* Ana səhifə: üst padding praktiki sıfır; yalnız notch safe-area */
#homePage .kv-home-shell {
  --kv-home-pad-y-top: max(0px, env(safe-area-inset-top));
}

.kv-home-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.5) 0%, transparent 36%),
    repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.045) 0 1px, transparent 1px 88px);
  pointer-events: none;
}

.kv-home-shell > * {
  position: relative;
  z-index: 1;
}

.kv-home-shell button {
  width: auto;
  margin-top: 0;
}

.kv-home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(200px, 0.82fr);
  gap: var(--kv-home-gap);
  align-items: center;
  padding-block: 0;
  margin-top: 0;
}

.kv-home-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 36rem;
}

.kv-home-copy h1 {
  margin: 0 0 0.22rem;
  font-size: clamp(1.55rem, 2.8vw + 0.55rem, 2.35rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 750;
  color: var(--kv-home-slate-900);
}

.kv-home-mini-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.35rem 0;
  margin: 0;
}

.kv-home-mini-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 1rem 0 0;
  margin-right: 0.65rem;
  border-right: 1px solid rgba(148, 163, 184, 0.22);
  min-width: 0;
}

.kv-home-mini-stat:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.kv-home-mini-value {
  font-size: clamp(1rem, 0.9vw + 0.72rem, 1.15rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--kv-home-slate-900);
  font-variant-numeric: tabular-nums;
}

.kv-home-mini-label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kv-home-slate-500);
  line-height: 1.25;
}

.kv-home-kicker,
.kv-home-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(0.2rem, 0.5vw, 0.35rem);
  padding: 0.22rem 0.6rem 0.22rem 0.62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(125, 211, 252, 0.22);
  color: #0c4a6e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(14, 165, 233, 0.06);
}

.kv-home-feature-card:hover,
.kv-home-quick-card:hover,
.kv-home-ribbon-btn:hover {
  transform: translateY(-3px);
}

.kv-home-orbit {
  position: relative;
  min-height: clamp(128px, 18vw, 168px);
  display: grid;
  place-items: center;
  margin-inline: auto;
  max-width: 260px;
}

.kv-home-logo-wrap {
  position: relative;
  width: clamp(92px, 15vw, 118px);
  height: clamp(92px, 15vw, 118px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.76) 48%, rgba(241, 245, 249, 0.5) 100%);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow:
    0 20px 48px rgba(59, 130, 246, 0.12),
    0 8px 16px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  animation: kvHomeFloat 6.2s ease-in-out infinite;
  overflow: visible;
}

.kv-home-med-logo {
  position: relative;
  width: clamp(72px, 12vw, 88px);
  height: clamp(72px, 12vw, 88px);
  display: grid;
  place-items: center;
}

.kv-home-med-core {
  position: relative;
  z-index: 2;
  width: clamp(56px, 10vw, 70px);
  height: clamp(56px, 10vw, 70px);
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(152deg, #ffffff 0%, #e8f6ff 45%, #e0e7ff 100%);
  color: #0369a1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.88),
    0 12px 24px rgba(14, 165, 233, 0.18);
}

.kv-home-med-core::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(224,242,254,0.26));
}

.kv-home-med-core i {
  position: relative;
  z-index: 1;
  font-size: clamp(22px, 4vw, 28px);
}

.kv-home-med-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: 0 10px 18px rgba(37,99,235,0.24);
}

.kv-home-med-dot-a { top: 4px; right: 4px; }
.kv-home-med-dot-b { bottom: 4px; left: 0; background: linear-gradient(135deg, #22c55e, #0ea5e9); }
.kv-home-med-dot-c { top: 22px; left: -3px; background: linear-gradient(135deg, #f59e0b, #fb7185); }

.kv-home-med-logo::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 34px;
  border: 1px dashed rgba(59,130,246,0.26);
  animation: kvHomeSpinReverse 18s linear infinite;
}

.kv-home-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(59, 130, 246, 0.22);
}

.kv-home-ring-a {
  width: clamp(138px, 22vw, 172px);
  height: clamp(138px, 22vw, 172px);
  animation: kvHomeSpin 20s linear infinite;
}

.kv-home-ring-b {
  width: clamp(168px, 28vw, 208px);
  height: clamp(168px, 28vw, 208px);
  border-style: solid;
  border-color: rgba(14, 165, 233, 0.1);
  animation: kvHomeSpinReverse 26s linear infinite;
}

.kv-home-ring-c {
  width: clamp(196px, 32vw, 236px);
  height: clamp(196px, 32vw, 236px);
  border-color: rgba(251, 191, 36, 0.11);
  animation: kvHomePulseRing 4.4s ease-in-out infinite;
}

.kv-home-float {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.18);
  color: #0c1222;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Simmetrik üçbucaq: üst sol / üst sağ / alt mərkəz */
.kv-home-float-a {
  top: 2px;
  left: 2px;
  animation: kvHomeFloat 5.2s ease-in-out infinite;
}
.kv-home-float-b {
  top: 2px;
  right: 2px;
  animation: kvHomeFloat 5.6s ease-in-out infinite 0.35s;
}
.kv-home-float-c {
  bottom: 4px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 8px);
  animation: kvHomeFloat 5s ease-in-out infinite 0.65s;
}

.kv-home-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(6px, 1.2vw, 10px);
  margin-top: clamp(4px, 1vw, 10px);
  padding-top: clamp(4px, 1vw, 10px);
  border-top: 1px solid rgba(148, 163, 184, 0.12);
  align-items: stretch;
}

.kv-home-stat-card,
.kv-home-section {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 24px;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 20px 40px rgba(148, 163, 184, 0.12);
  backdrop-filter: blur(12px);
}

.kv-home-stat-card.kv-home-stat-card-wide {
  grid-column: auto;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(148, 163, 184, 0.1);
  border-color: rgba(148, 163, 184, 0.14);
}

.kv-home-section {
  margin-top: clamp(10px, 1.5vw, 14px);
  padding: clamp(12px, 1.8vw, 16px);
}

.kv-home-section-head {
  margin-bottom: clamp(8px, 1.2vw, 12px);
}

.kv-home-section-head h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(17px, 2.2vw, 24px);
  font-weight: 400;
}

.kv-home-section .kv-home-section-kicker {
  font-weight: 400;
}

.kv-home-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 124px));
  gap: 5px;
  align-items: stretch;
  justify-content: center;
}

.kv-home-feature-card,
.kv-home-quick-card,
.kv-home-ribbon-btn {
  position: relative;
  color: #0f172a;
  text-align: left;
  border: 1px solid rgba(148, 163, 184, 0.18);
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.kv-home-feature-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 5px;
  min-height: 86px;
  padding: 7px;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.94), rgba(248,250,252,0.88)),
    linear-gradient(135deg, var(--card-tint, rgba(59,130,246,0.12)), transparent 70%);
  box-shadow: 0 18px 36px rgba(148, 163, 184, 0.16);
}

.kv-home-feature-card::after,
.kv-home-quick-card::after {
  content: "";
  position: absolute;
  inset: auto -24% -42% auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: var(--card-glow, rgba(59, 130, 246, 0.18));
  filter: blur(8px);
  pointer-events: none;
}

.kv-home-card-top,
.kv-home-quick-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.kv-home-card-icon,
.kv-home-quick-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f172a;
  background: rgba(255,255,255,0.78);
  box-shadow: 0 10px 24px rgba(148, 163, 184, 0.18);
}

.kv-home-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  font-size: 14px;
}

.kv-home-quick-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 13px;
}

.kv-home-card-badge,
.kv-home-card-count {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.74);
  color: #0f172a;
  font-size: 9px;
  font-weight: 800;
}

.kv-home-card-text h3,
.kv-home-quick-card h3 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
  font-weight: 400;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.kv-home-card-label {
  color: #0369a1;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.kv-home-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 124px));
  gap: 5px;
  align-items: stretch;
  justify-content: center;
}

.kv-home-quick-card {
  min-height: 82px;
  padding: 7px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.88)),
    linear-gradient(135deg, var(--card-tint, rgba(14,165,233,0.12)), transparent 72%);
  box-shadow: 0 18px 34px rgba(148, 163, 184, 0.14);
}

.kv-home-ribbon {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.kv-home-ribbon-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.84);
  color: #0f172a;
  font-weight: 400;
  box-shadow: 0 14px 30px rgba(148, 163, 184, 0.14);
}

.kv-home-ribbon-btn i,
.kv-home-card-icon i,
.kv-home-quick-icon i {
  color: inherit;
}

.kv-home-empty {
  display: grid;
  place-items: center;
  min-height: 104px;
  border: 1px dashed rgba(148, 163, 184, 0.34);
  border-radius: 22px;
  color: #64748b;
  font-weight: 400;
  background: rgba(255,255,255,0.42);
}

.kv-home-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.kv-home-recent-head span {
  color: #0f172a;
  font-size: 14px;
  font-weight: 400;
}

.kv-home-recent-head small {
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
}

.kv-home-recent-stage {
  min-height: 58px;
}

.kv-home-recent-empty {
  display: grid;
  place-items: center;
  min-height: 58px;
  color: #64748b;
  font-size: 12px;
  font-weight: 400;
}

.kv-home-recent-card {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(239,246,255,0.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  animation: kvHomeRecentIn .48s ease forwards;
}

.kv-home-recent-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.kv-home-recent-title-row strong {
  color: #0f172a;
  font-size: 15px;
  font-weight: 400;
}

.kv-home-recent-title-row small {
  color: #475569;
  font-size: 11px;
  font-weight: 400;
}

.kv-home-recent-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kv-home-recent-items span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.74);
  color: #0f172a;
  font-size: 11px;
  font-weight: 400;
  box-shadow: 0 8px 18px rgba(148, 163, 184, 0.12);
}

.kv-home-recent-mavi {
  background: linear-gradient(135deg, rgba(239,246,255,0.96), rgba(219,234,254,0.88));
}

.kv-home-recent-sari {
  background: linear-gradient(135deg, rgba(255,251,235,0.96), rgba(254,240,138,0.32));
}

.kv-home-recent-yasil {
  background: linear-gradient(135deg, rgba(240,253,244,0.96), rgba(187,247,208,0.46));
}

@keyframes kvHomeSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes kvHomeSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes kvHomeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes kvHomePulseRing {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.03); opacity: 1; }
}

@keyframes kvHomeRecentIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv-home-logo-wrap,
  .kv-home-float-a,
  .kv-home-float-b,
  .kv-home-float-c,
  .kv-home-ring-a,
  .kv-home-ring-b,
  .kv-home-ring-c,
  .kv-home-med-logo::after {
    animation: none !important;
  }

  .kv-home-feature-card:hover,
  .kv-home-quick-card:hover,
  .kv-home-ribbon-btn:hover {
    transform: none;
  }
}

@media (max-width: 1100px) {
  .kv-home-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kv-home-card-grid,
  .kv-home-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(108px, 120px));
  }

}

@media (max-width: 820px) {
  .kv-home-shell {
    border-radius: 18px;
    margin-top: 0;
    padding: var(--kv-home-pad-y-top) 10px var(--kv-home-pad-y-bottom);
  }

  .kv-home-hero {
    grid-template-columns: 1fr;
  }

  .kv-home-card-grid,
  .kv-home-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(104px, 116px));
  }

  .kv-home-orbit {
    min-height: 120px;
    max-width: 100%;
  }

  .kv-home-ring-c {
    width: 200px;
    height: 200px;
  }

  .kv-home-ring-b {
    width: 165px;
    height: 165px;
  }

  .kv-home-ring-a {
    width: 132px;
    height: 132px;
  }

  .kv-home-logo-wrap {
    width: 100px;
    height: 100px;
  }

  .kv-home-copy {
    max-width: none;
    padding-left: 0;
  }

  .kv-home-section {
    padding: 12px;
  }

  .kv-home-float {
    padding: 8px 11px;
    font-size: 11.5px;
  }

  .kv-home-float-a {
    top: 4px;
    left: 4px;
  }
  .kv-home-float-b {
    top: 4px;
    right: 4px;
  }
  .kv-home-float-c {
    bottom: 10px;
  }
}

@media (max-width: 560px) {
  .main-content {
    padding: 10px;
  }

  .main-content:has(#homePage.active) {
    padding-top: 0;
    padding-left: 8px;
    padding-right: 8px;
  }

  #homePage.page {
    margin-top: 0;
  }

  .kv-home-shell {
    margin-top: 0;
    border-radius: 14px;
    padding: 8px 9px 12px;
  }

  #homePage .kv-home-shell {
    --kv-home-pad-y-top: max(0px, env(safe-area-inset-top));
    padding: max(0px, env(safe-area-inset-top)) 8px 10px;
  }

  .kv-home-copy h1 {
    font-size: 26px;
  }

  .kv-home-mini-stat {
    padding-right: 0.75rem;
    margin-right: 0.45rem;
  }

  .kv-home-mini-label {
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .kv-home-kicker,
  .kv-home-section-kicker {
    font-size: 10px;
    letter-spacing: .16em;
    padding: 5px 9px;
  }

  .kv-home-card-grid,
  .kv-home-quick-grid {
    grid-template-columns: repeat(auto-fit, minmax(98px, 108px));
    gap: 5px;
  }

  .kv-home-feature-card,
  .kv-home-quick-card {
    min-height: auto;
    padding: 7px;
  }

  .kv-home-ribbon-btn {
    min-height: 40px;
    padding: 0 10px;
  }

  .kv-home-float-b,
  .kv-home-float-c {
    display: none;
  }

  .kv-home-stat-card.kv-home-stat-card-wide {
    padding: 8px 10px;
  }

  .kv-home-recent-stage {
    min-height: 64px;
  }
}

@media (max-width: 390px) {
  .kv-home-card-grid,
  .kv-home-quick-grid {
    grid-template-columns: 1fr;
  }
}

.side-menu button[onclick*="aiBotSettingsPage"]{
  position: relative;
  border-radius: 18px;
  margin: 10px 0 12px;
  padding: 14px 14px;
  background:
    linear-gradient(135deg, rgba(14,165,233,.22), rgba(16,185,129,.18)),
    rgba(255,255,255,.06);
  border: 1px solid rgba(125,211,252,.30);
  box-shadow: 0 16px 30px rgba(14,165,233,.16);
}
.side-menu button[onclick*="aiBotSettingsPage"]::after{
  content: "Hesabat sorush";
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
}
.aiWorkspacePage{
  padding: 18px;
}
.aiWorkspaceShell{
  position: relative;
  margin: 0 auto 24px;
  padding: clamp(16px, 2.6vw, 28px);
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(125,211,252,.22), transparent 28%),
    radial-gradient(circle at right center, rgba(34,197,94,.14), transparent 24%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(247,250,252,.94));
  border: 1px solid rgba(148,163,184,.20);
  box-shadow: 0 24px 80px rgba(148,163,184,.18);
  overflow: hidden;
}
.aiWorkspaceShell::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg, rgba(255,255,255,.66), transparent 28%),
    repeating-linear-gradient(90deg, rgba(148,163,184,.06) 0 1px, transparent 1px 96px);
}
.aiWorkspaceShell > *{
  position: relative;
  z-index: 1;
}
.aiWorkspaceHero{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr);
  gap: 18px;
  align-items: stretch;
}
.aiWorkspaceKicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(125,211,252,.42);
  color: #0369a1;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.aiWorkspaceHeroCopy h2{
  margin: 12px 0 10px;
  color: #0f172a;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.02;
}
.aiWorkspaceHeroCopy p{
  margin: 0;
  max-width: 720px;
  color: #475569;
  font-size: 15px;
  line-height: 1.6;
}
.aiWorkspaceHeroActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 18px;
}
.aiWorkspaceHeroStats{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.aiWorkspaceStatCard,
.aiWorkspacePanel,
.aiWorkspaceChatCard{
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 24px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 20px 40px rgba(148,163,184,.12);
  backdrop-filter: blur(12px);
}
.aiWorkspaceStatCard{
  min-height: 96px;
  padding: 16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.aiWorkspaceStatCard small{
  color:#64748b;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.aiWorkspaceStatCard strong{
  color:#0f172a;
  font-size: 22px;
  font-weight: 900;
}
.aiWorkspaceCapabilities{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 14px;
}
.aiCapabilityPill{
  display:inline-flex;
  align-items:center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(148,163,184,.20);
  color:#0f172a;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(148,163,184,.12);
}
.aiWorkspaceGrid{
  display:grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) minmax(250px, 320px);
  gap: 14px;
  margin-top: 18px;
  align-items: start;
}
.aiWorkspaceRail,
.aiWorkspaceSettings{
  display:grid;
  gap: 14px;
}
.aiWorkspacePanel{
  padding: 14px;
}
.aiWorkspacePanelHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
  margin-bottom: 12px;
}
.aiWorkspacePanelHead h3{
  margin:0;
  color:#0f172a;
  font-size:16px;
}
.aiWorkspacePanelHead span{
  color:#64748b;
  font-size:12px;
  font-weight:700;
}
.aiReportCards,
.aiPromptLibrary,
.aiSessionList,
.aiWorkspaceQuickActions{
  display:grid;
  gap: 10px;
}
.aiReportCardBtn,
.aiPromptLibraryBtn,
.aiSessionCard,
.aiQuickActionBtn{
  width:100%;
  text-align:left;
  border:1px solid rgba(148,163,184,.18);
  border-radius: 18px;
  padding: 12px 13px;
  background:
    linear-gradient(160deg, rgba(255,255,255,.94), rgba(248,250,252,.88)),
    linear-gradient(135deg, rgba(14,165,233,.08), transparent 70%);
  color:#0f172a;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.aiReportCardBtn:hover,
.aiPromptLibraryBtn:hover,
.aiSessionCard:hover,
.aiQuickActionBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(148,163,184,.16);
}
.aiReportCardBtn strong,
.aiPromptLibraryBtn strong,
.aiSessionCard strong{
  display:block;
  margin-bottom: 4px;
  font-size:14px;
}
.aiReportCardBtn span,
.aiPromptLibraryBtn span,
.aiSessionCard span{
  display:block;
  color:#64748b;
  font-size:12px;
  line-height:1.45;
}
.aiSessionCard.isActive{
  border-color: rgba(14,165,233,.42);
  box-shadow: 0 18px 34px rgba(14,165,233,.16);
}
.aiWorkspaceChatCard{
  display:flex;
  flex-direction:column;
  min-height: 760px;
  overflow:hidden;
}
.aiWorkspaceChatHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(148,163,184,.16);
}
.aiWorkspaceChatHead h3{
  margin:0;
  color:#0f172a;
  font-size: 22px;
}
.aiWorkspaceChatHead p{
  margin: 6px 0 0;
  color:#64748b;
  font-size: 13px;
}
.aiWorkspaceBody{
  flex:1;
  min-height: 420px;
  overflow:auto;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.aiWorkspaceComposer{
  display:grid;
  grid-template-columns: 44px 44px minmax(0,1fr) 56px;
  gap:10px;
  padding: 14px 16px 16px;
  border-top:1px solid rgba(148,163,184,.16);
  background: rgba(248,250,252,.86);
}
.aiWorkspaceInputWrap{
  position:relative;
}
.aiWorkspaceInput{
  width:100%;
  min-height: 48px;
  max-height: 140px;
  resize:none;
  padding: 12px 14px;
  border-radius: 16px;
  border:1px solid rgba(148,163,184,.24);
  background:#fff;
  color:#0f172a;
  font-size:14px;
  line-height:1.45;
  outline:none;
  box-sizing:border-box;
}
.aiWorkspaceInput:focus{
  border-color: rgba(14,116,144,.64);
  box-shadow: 0 0 0 4px rgba(125,211,252,.20);
}
.aiWorkspaceQuickActions{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: 0 18px 18px;
}
.aiQuickActionBtn{
  min-height: 68px;
}
.aiMsgRow{
  display:flex;
  margin: 4px 0;
}
.aiMsgRow.isUser{
  justify-content:flex-end;
}
.aiMsgRow.isBot{
  justify-content:flex-start;
}
.aiMsg{
  max-width: min(92%, 760px);
  border-radius: 18px;
  padding: 12px 14px;
  border:1px solid rgba(148,163,184,.16);
}
.aiMsgUser{
  color:#fff;
  background: linear-gradient(135deg, rgba(14,165,233,.92), rgba(37,99,235,.92));
  box-shadow: 0 16px 30px rgba(37,99,235,.18);
}
.aiMsgBot{
  color:#0f172a;
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 28px rgba(148,163,184,.14);
}
.aiText{
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.55;
}
.aiReportWrap{
  display:grid;
  gap: 12px;
}
.aiReportMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.aiMetricChip{
  display:inline-flex;
  align-items:center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(14,165,233,.10);
  color:#0f172a;
  font-size: 12px;
  font-weight: 800;
}
.aiReportTitle{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  color:#0f172a;
}
.aiReportSubtitle{
  margin: 4px 0 0;
  color:#64748b;
  font-size: 12px;
  line-height: 1.45;
}
.aiReportSummary{
  color:#334155;
  font-size: 13px;
  line-height: 1.55;
}
.aiReportTableWrap{
  overflow:auto;
  border-radius: 16px;
  border:1px solid rgba(148,163,184,.18);
}
.aiReportTable{
  width:100%;
  min-width: 520px;
  border-collapse: collapse;
  background: #fff;
}
.aiReportTable th,
.aiReportTable td{
  padding: 10px 12px;
  border-bottom:1px solid rgba(148,163,184,.16);
  font-size: 12px;
  color:#0f172a;
  text-align:left;
  vertical-align: top;
}
.aiReportTable th{
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #f8fafc, #eef6ff);
  font-weight: 800;
}
.aiReportTable tbody tr:nth-child(even){
  background: rgba(241,245,249,.58);
}
.aiReportActions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.aiActionChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border:1px solid rgba(14,165,233,.24);
  background: rgba(14,165,233,.08);
  color:#0f172a;
  font-size:12px;
  font-weight:800;
}
.aiChoiceCard{
  display:grid;
  gap: 10px;
}
.aiChoiceList{
  display:grid;
  gap: 8px;
}
.aiChoiceItem{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(248,250,252,.92);
  border:1px solid rgba(148,163,184,.16);
}
.aiChoiceItem input{
  width:16px;
  height:16px;
}
.aiReportEmpty{
  padding: 14px;
  border-radius: 16px;
  background: rgba(248,250,252,.92);
  border:1px dashed rgba(148,163,184,.30);
  color:#475569;
  font-size:13px;
  line-height:1.55;
}
.aiChatCard .aiReportTable,
.aiChatCard .aiReportTableWrap{
  background: rgba(255,255,255,.98);
}
.aiChatCard .aiMsgBot{
  color:#fff;
  background: rgba(255,255,255,.06);
}
.aiChatCard .aiText,
.aiChatCard .aiReportTitle,
.aiChatCard .aiReportSummary,
.aiChatCard .aiMetricChip,
.aiChatCard .aiReportTable th,
.aiChatCard .aiReportTable td,
.aiChatCard .aiReportSubtitle,
.aiChatCard .aiActionChip{
  color:#fff;
}
.aiChatCard .aiMetricChip,
.aiChatCard .aiActionChip{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.16);
}
.aiChatCard .aiReportTable th{
  background: rgba(255,255,255,.10);
}
.aiChatCard .aiReportTable tbody tr:nth-child(even){
  background: rgba(255,255,255,.04);
}
@media (max-width: 1180px){
  .aiWorkspaceGrid{
    grid-template-columns: minmax(240px, 290px) minmax(0,1fr);
  }
  .aiWorkspaceSettings{
    grid-column: 1 / -1;
  }
}
@media (max-width: 980px){
  .aiWorkspaceHero{
    grid-template-columns: 1fr;
  }
  .aiWorkspaceGrid{
    grid-template-columns: 1fr;
  }
  .aiWorkspaceChatCard{
    min-height: 680px;
  }
}
@media (max-width: 640px){
  .aiWorkspacePage{
    padding: 10px;
  }
  .aiWorkspaceShell{
    margin-top: 0;
    border-radius: 26px;
    padding: 12px;
  }
  .aiWorkspaceComposer{
    grid-template-columns: 42px 42px minmax(0,1fr) 50px;
    padding: 12px;
  }
  .aiWorkspaceChatHead{
    padding: 14px;
  }
  .aiWorkspaceBody{
    padding: 14px;
  }
}

body[data-ui-theme="aurora"]{
  --ui-accent: #6d28d9;
  --ui-accent-soft: #ede9fe;
  --ui-panel-bg: linear-gradient(140deg, #ffffff 0%, #eef2ff 48%, #fdf2f8 100%);
  --ui-panel-border: #ddd6fe;
}

body[data-ui-theme="pearl"]{
  --ui-accent: #0284c7;
  --ui-accent-soft: #e0f2fe;
  --ui-panel-bg: linear-gradient(140deg, #ffffff 0%, #f8fafc 54%, #f0f9ff 100%);
  --ui-panel-border: #dbeafe;
}

body[data-ui-theme="midnight"]{
  --ui-accent: #38bdf8;
  --ui-accent-soft: #082f49;
  --ui-panel-bg: linear-gradient(150deg, #0f172a 0%, #111827 55%, #1e293b 100%);
  --ui-panel-border: #334155;
}

body[data-ui-theme="sunset"]{
  --ui-accent: #ea580c;
  --ui-accent-soft: #ffedd5;
  --ui-panel-bg: linear-gradient(140deg, #fff7ed 0%, #ffedd5 46%, #fffbeb 100%);
  --ui-panel-border: #fdba74;
}

body[data-ui-theme="mint"]{
  --ui-accent: #059669;
  --ui-accent-soft: #d1fae5;
  --ui-panel-bg: linear-gradient(140deg, #f0fdfa 0%, #ecfdf5 48%, #f8fafc 100%);
  --ui-panel-border: #99f6e4;
}

body[data-ui-theme="graphite"]{
  --ui-accent: #64748b;
  --ui-accent-soft: #e2e8f0;
  --ui-panel-bg: linear-gradient(150deg, #0b1220 0%, #1f2937 58%, #334155 100%);
  --ui-panel-border: #475569;
}

body[data-ui-theme="ocean"]{
  --ui-accent: #0ea5e9;
  --ui-accent-soft: #e0f2fe;
  --ui-panel-bg: linear-gradient(140deg, #f0f9ff 0%, #e0f2fe 48%, #ecfeff 100%);
  --ui-panel-border: #7dd3fc;
}

body[data-ui-theme="rose"]{
  --ui-accent: #e11d48;
  --ui-accent-soft: #ffe4e6;
  --ui-panel-bg: linear-gradient(140deg, #fff1f2 0%, #ffe4e6 48%, #fdf2f8 100%);
  --ui-panel-border: #fda4af;
}

.ui-settings-page{
  padding-bottom: 18px;
}

.ui-settings-shell{
  max-width: 900px;
  margin: 0 auto;
  border-radius: 26px;
  padding: clamp(16px, 2.5vw, 24px);
  background: var(--ui-panel-bg, linear-gradient(140deg, #ffffff 0%, #eef2ff 48%, #fdf2f8 100%));
  border: 1px solid var(--ui-panel-border, #ddd6fe);
  box-shadow: 0 16px 42px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255,255,255,.95);
}

body[data-ui-theme="midnight"] .ui-settings-shell{
  box-shadow: 0 20px 45px rgba(2, 6, 23, .56), inset 0 1px 0 rgba(255,255,255,.05);
}

.ui-settings-head{
  display: flex;
  align-items: center;
  gap: 12px;
}

.ui-settings-head h2{
  margin: 0;
  color: #0f172a;
}

body[data-ui-theme="midnight"] .ui-settings-head h2,
body[data-ui-theme="midnight"] .ui-settings-subtitle,
body[data-ui-theme="midnight"] .ui-settings-preview p,
body[data-ui-theme="midnight"] .ui-settings-preview h3,
body[data-ui-theme="midnight"] .ui-settings-card label,
body[data-ui-theme="graphite"] .ui-settings-head h2,
body[data-ui-theme="graphite"] .ui-settings-subtitle,
body[data-ui-theme="graphite"] .ui-settings-preview p,
body[data-ui-theme="graphite"] .ui-settings-preview h3,
body[data-ui-theme="graphite"] .ui-settings-card label{
  color: #f8fafc;
}

.ui-settings-back-btn,
.ui-settings-entry-btn,
.ui-settings-action-btn,
.ui-settings-preview-btn{
  width: auto;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, .18);
  background: #ffffff;
  color: #000;
  font-weight: 700;
  letter-spacing: .15px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, .10);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.ui-settings-back-btn:hover,
.ui-settings-entry-btn:hover,
.ui-settings-action-btn:hover,
.ui-settings-preview-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, .16);
  filter: saturate(1.05);
}

.ui-settings-subtitle{
  margin: 10px 0 16px;
  color: #334155;
  font-size: 14px;
}

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

.ui-settings-card{
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(6px);
  padding: 12px;
}

body[data-ui-theme="midnight"] .ui-settings-card{
  background: rgba(15, 23, 42, .68);
  border-color: rgba(148,163,184,.30);
}

body[data-ui-theme="graphite"] .ui-settings-card{
  background: rgba(15, 23, 42, .62);
  border-color: rgba(148,163,184,.38);
}

.ui-settings-card label{
  margin-top: 0;
  margin-bottom: 8px;
  color: #1e293b;
}

.ui-settings-card select,
.ui-settings-card input[type="range"]{
  margin: 0;
}

.ui-settings-card select{
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.40);
  background: rgba(255,255,255,.96);
  color: #111827;
}

.ui-settings-preview{
  margin-top: 14px;
  border-radius: 20px;
  border: 1px dashed rgba(59,130,246,.35);
  background: linear-gradient(120deg, rgba(255,255,255,.88), rgba(239,246,255,.90));
  padding: 14px;
}

body[data-ui-theme="midnight"] .ui-settings-preview{
  background: linear-gradient(120deg, rgba(30,41,59,.84), rgba(15,23,42,.92));
  border-color: rgba(56,189,248,.30);
}

body[data-ui-theme="graphite"] .ui-settings-preview{
  background: linear-gradient(120deg, rgba(51,65,85,.86), rgba(15,23,42,.90));
  border-color: rgba(148,163,184,.40);
}

.ui-settings-preview h3{
  margin: 0 0 6px;
}

.ui-settings-preview p{
  margin: 0 0 10px;
  color: #374151;
}

.ui-density-preview{
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  margin-bottom: 10px;
  overflow: hidden;
}

.ui-density-preview-row{
  display: grid;
  grid-template-columns: 72px 1fr 80px;
  gap: 8px;
  align-items: center;
  padding: var(--ui-density-preview-pad, 10px) 10px;
  font-size: 12px;
  border-bottom: 1px solid rgba(148,163,184,.22);
}

.ui-density-preview-row:last-child{
  border-bottom: none;
}

.ui-settings-actions{
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ui-settings-action-btn-primary{
  border-color: #c4b5fd;
  background: linear-gradient(130deg, var(--ui-accent-soft, #ede9fe) 0%, #ffffff 100%);
}

.ui-settings-action-btn-warn{
  border-color: #f59e0b;
  background: linear-gradient(130deg, #fff7ed 0%, #ffedd5 100%);
}

.ui-settings-switch-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ui-settings-switch-card > label{
  margin:0;
}

.ui-switch{
  position:relative;
  width:54px;
  height:30px;
  display:inline-block;
}

.ui-switch input{
  opacity:0;
  width:0;
  height:0;
}

.ui-switch-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#d1d5db;
  transition:all .2s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.18);
}

.ui-switch-slider::before{
  content:"";
  position:absolute;
  width:24px;
  height:24px;
  left:3px;
  top:3px;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition:all .2s ease;
}

.ui-switch input:checked + .ui-switch-slider{
  background: var(--ui-accent, #6d28d9);
}

.ui-switch input:checked + .ui-switch-slider::before{
  transform: translateX(24px);
}

body.ui-high-contrast{
  --app-letter-spacing: 0.25px;
}

body.ui-high-contrast .ui-settings-shell{
  border-width: 2px;
}

body.ui-high-contrast button{
  border: 2px solid #000 !important;
  box-shadow: none !important;
}

body.ui-high-contrast .ui-settings-card,
body.ui-high-contrast .ui-settings-preview{
  border-width: 2px;
}

body[data-ui-density="comfortable"]{
  --ui-density-preview-pad: 10px;
  --ui-control-pad-y: 10px;
  --ui-control-font-size: 16px;
}

body[data-ui-density="compact"]{
  --ui-density-preview-pad: 7px;
  --ui-control-pad-y: 8px;
  --ui-control-font-size: 15px;
}

body[data-ui-density="ultra"]{
  --ui-density-preview-pad: 5px;
  --ui-control-pad-y: 6px;
  --ui-control-font-size: 14px;
}

body[data-ui-density] .main-content .page input,
body[data-ui-density] .main-content .page select{
  padding-top: var(--ui-control-pad-y, 10px);
  padding-bottom: var(--ui-control-pad-y, 10px);
  font-size: var(--ui-control-font-size, 16px);
}

body[data-ui-density] .main-content .page button{
  padding-top: calc(var(--ui-control-pad-y, 10px) + 2px);
  padding-bottom: calc(var(--ui-control-pad-y, 10px) + 2px);
  font-size: var(--ui-control-font-size, 16px);
}

body.ui-performance-mode *{
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

body.ui-performance-mode .ui-settings-shell,
body.ui-performance-mode .ui-settings-card,
body.ui-performance-mode .ui-settings-preview{
  backdrop-filter: none !important;
  box-shadow: none !important;
}

body.ui-table-readability .main-content table{
  border-collapse: collapse;
  border: 1px solid #cbd5e1;
}

body.ui-table-readability .main-content table th{
  background: #e2e8f0 !important;
  color: #111827 !important;
  font-weight: 800;
  border-bottom: 2px solid #94a3b8;
}

body.ui-table-readability .main-content table td,
body.ui-table-readability .main-content table th{
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border: 1px solid #cbd5e1;
}

body.ui-table-readability .main-content table tbody tr:nth-child(even){
  background: #f8fafc !important;
}

body.ui-table-readability .main-content table tbody tr:hover{
  background: #e2e8f0 !important;
}

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

@media (max-width: 640px){
  .ui-settings-grid{
    grid-template-columns: 1fr;
  }
  .ui-settings-head{
    flex-wrap: wrap;
  }
  .ui-settings-actions{
    justify-content: stretch;
  }
  .ui-settings-action-btn{
    flex: 1 1 0;
  }
}