: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;
}


* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    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;
}

.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;
    cursor: pointer;
}



.main-content {
    width: 100%;
    margin-left: 0;
    padding: 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 {
    margin-top: 60px;
    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;
}

th, td {
    border: 1px solid #ccc;
    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:1000;

  /* 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;
}

/* hover / active */
#floatMenuBtn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); filter: brightness(1.02); }
#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 → X 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;
}
#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;
}
#floatMenuBtn .fm-icon::before{ top: calc(-1 * var(--fm-gap)); }
#floatMenuBtn .fm-icon::after { top: var(--fm-gap); }

/* Açıq halda X 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{ background: transparent; }
#floatMenuBtn[data-open="true"] .fm-icon::before{
  transform: translateY(var(--fm-gap)) rotate(45deg);
}
#floatMenuBtn[data-open="true"] .fm-icon::after{
  transform: translateY(calc(-1 * var(--fm-gap))) rotate(-45deg);
}

/* 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;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4)
}

.modal-content {
    background: #fff;
    margin: 10% auto;
    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
}

/* ====================== MARAFON CƏDVƏLİ ====================== */

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

#marafonTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

#marafonTable th,
#marafonTable td {
    border: 1px solid #ccc;
    padding: 6px 8px;
    text-align: center;
    vertical-align: middle;
    font-size: clamp(10px, 2vw, 13px);
    white-space: nowrap;
}

#marafonTable thead th {
    background: #f0f3f5;
    font-weight: 700;
}

/* 🥇 🥈 🥉 rəngləri */
#marafonTable tbody tr:nth-child(1) td:nth-child(2) {
    background: #66b3ff;
    color: #000;
    font-weight: bold;
}

#marafonTable tbody tr:nth-child(2) td:nth-child(2) {
    background: #ff7f7f;
    color: #000;
    font-weight: bold;
}

#marafonTable tbody tr:nth-child(3) td:nth-child(2) {
    background: #90ee90;
    color: #000;
    font-weight: bold;
}

/* 0 olan dəyərlər */
#marafonTable td.zero {
    color: #d10;
    font-weight: 700;
}


#marafonTable th:nth-child(2),
#marafonTable td:nth-child(2) {
    min-width: 100px;
    max-width: 200px;
    word-break: break-word;
}

/* Vertikal başlıqlar üçün */
#marafonTable th.drug {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    font-size: 12px;
    padding: 4px 6px;
    min-width: 120px;
}

#kvotaEmpTable th,
#kvotaEmpTable td {
    text-align: center;
    padding: 8px;
    font-weight: bold;
    white-space: nowrap;
}

.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;
}


td.emp-name-cell span {
    color: black !important;
    font-weight: bold !important;
    text-align: left !important;
    display: inline-block;
    width: 100%;
    padding-left: 6px;
}

#kvotaEmpTable th,
#kvotaEmpTable td {
    border: 1px solid #000 !important;
}

#kvotaEmpTable th {
    background-color: yellow !important;
    border: 1px solid #000 !important;
}

#kvotaEmpTable th,
#kvotaEmpTable td {
    font-size: 16px !important; /* və ya 18px istəsən daha böyük */
}

#kvotaEmpTable th {
    font-size: 17px !important;
}

#marafonTable th,
#marafonTable td {
    border: 1px solid #000 !important;
}

#marafonTable th,
#marafonTable td {
    font-size: 15px !important;
}

#marafonDetailTable th,
#marafonDetailTable td {
    border: 1px solid #000 !important;
}

#marafonDetailTable th {
    background-color: yellow !important;
    font-weight: bold;
}

#marafonDetailTable th,
#marafonDetailTable td {
    padding: 6px 10px;
    font-size: 15px;
}

#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 */
}

#marafonTable th {
    background-color: yellow !important;
    color: black;
    text-align: center;
    font-weight: bold;
}

#marafonDetailTable th {
    background-color: yellow !important;
    color: black;
    text-align: center;
    font-weight: bold;
}



#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: 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;
}

#transferContextMenu{
  position: fixed; /* ✅ mütləq */
  z-index: 10002;
}




/* TOP Panel – minimal dizayn */
#topEmekdasPage .container{ max-width:1200px; margin:0 auto; padding:12px; }
#topEmekdasPage h2{ margin:6px 0 12px; }
#topEmekdasPage .top-filters{ background:#f7f7fb; border:1px solid #ececf5; padding:10px; border-radius:12px; }
#topEmekdasPage .f-row{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px; align-items:end; }
#topEmekdasPage .f-row label{ display:flex; flex-direction:column; font-size:12px; gap:4px; }
#topEmekdasPage .btn-primary{ padding:10px 14px; border:0; border-radius:10px; background:#3b82f6; color:#fff; cursor:pointer; font-weight:600; }
#topEmekdasPage .hint{ color:#666; }
#topEmekdasPage .grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; margin-top:12px; }
#topEmekdasPage section h3{ margin:6px 0 8px; }
#topEmekdasPage .cards{ display:grid; grid-template-columns: 1fr; gap:12px; }
#topEmekdasPage .card{ border:1px solid #e8e8f0; border-radius:14px; padding:8px 10px; background:#fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
#topEmekdasPage .card-hd{ display:flex; gap:8px; align-items:baseline; margin-bottom:6px; }
#topEmekdasPage .badge{ background:#eef2ff; color:#1d4ed8; font-weight:700; font-size:11px; padding:2px 8px; border-radius:999px; }
#topEmekdasPage .sub{ color:#666; font-size:12px; }
#topEmekdasPage .list{ margin:0; padding:0 2px 6px 2px; list-style:none; }
#topEmekdasPage .list li{ display:grid; grid-template-columns: 28px 1fr auto; gap:8px; align-items:center; padding:6px 4px; border-radius:10px; }
#topEmekdasPage .list li:nth-child(odd){ background:#fafafe; }
#topEmekdasPage .rank{ width:24px; height:24px; display:inline-grid; place-items:center; font-weight:700; background:#f1f5ff; border-radius:8px; }
#topEmekdasPage .who{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#topEmekdasPage .val{ font-variant-numeric: tabular-nums; font-weight:700; }
#topEmekdasPage .unit{ color:#6b7280; font-weight:600; margin-left:4px; }
#topEmekdasPage .loading, #topEmekdasPage .err{ color:#6b7280; padding:8px; }
#topEmekdasPage .li-in{ animation: liIn .35s ease both; }
@keyframes liIn{ from{ transform: translateY(6px); opacity:0 } to{ transform:none; opacity:1 } }
@media (max-width: 900px){ #topEmekdasPage .grid-2{ grid-template-columns: 1fr; } #topEmekdasPage .f-row{ grid-template-columns: 1fr 1fr; } }


/* 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ı ===== */

/* Modal kontent */
.kv-modal {
  display: flex;
  flex-direction: column;
  width: 95vw;
  max-width: 1100px;
  max-height: 92vh;
  padding: 16px;
  overflow: auto;           /* ✨ Scroll birbaşa modalda olsun */
  box-sizing: border-box;
  background: #fff;
  border-radius: 8px;
}

/* 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;
  }
}

#qaliqTenzimlemeTable td:nth-child(10), /* 10-cu sütun: Depo */
#qaliqTenzimlemeTable th:nth-child(10) {
    font-weight: bold;
}

/* ===== Qalıq Tənzimləmə Progress Bar (mobil-uyğun) ===== */
.qaliq-progress-wrap {
  width: 100%;
  max-width: 680px;       /* ekrandan kənara çıxmasın */
  margin: 8px auto 12px;
  padding: 8px 10px;
  box-sizing: border-box;
}

.qaliq-progress {
  width: 100%;
  height: 14px;
  background: #eef1f5;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}

.qaliq-progress__bar {
  height: 100%;
  width: 0%;
  color: #000;
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
  transition: width .25s ease;     /* hamar animasiya */
  background: linear-gradient(90deg,#5ee07a,#39b54a);
  position: relative;
}

.qaliq-progress__bar::after {       /* yüngül parıltı animasiyası */
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: qaliqShimmer 1.4s infinite;
}

@keyframes qaliqShimmer {
  0%   { left: -40%; }
  100% { left: 100%; }
}

.qaliq-progress__text {
  margin-top: 6px;
  text-align: center;
  font-family: Calibri, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  color: #333;
}

  /* ✅ 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;
}

#istek_ctxMenu .ctx-item:hover{ background:#f3f4f6; }

/* İstək sifariş konteks menyu düyməsi: qara + qalın */
#istek_ctxMenu .ctx-item{
  color:#111827;      /* qara */
  font-weight:700;    /* bold */
}

/* İstək sifariş siyahı və detal cədvəlləri üçün qara sərhəd */
#istekPage .kv-table,
#istekPage .kv-table th,
#istekPage .kv-table td,
#istekDetailPage .kv-table,
#istekDetailPage .kv-table th,
#istekDetailPage .kv-table td{
  border:1px solid #000;
}
#istekPage .kv-table,
#istekDetailPage .kv-table{
  border-collapse:collapse;
}

/* Modal */
.kv-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9997;
}
.kv-modal{
  position:fixed; z-index:9998; width:min(680px, 92vw);
  left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.kv-modal-header,.kv-modal-footer{ padding:12px 16px; border-bottom:1px solid #e5e7eb; }
.kv-modal-footer{ border-top:1px solid #e5e7eb; border-bottom:none; }
.kv-modal-body{ padding:14px 16px; }
.kv-form-row{ margin-bottom:10px; }
.kv-form-row input{ padding:8px 10px; border:1px solid #cbd5e1; border-radius:8px; }

/* Rəngli düymə (yazı qara və bold) */
.kv-colored-btn{
  background:linear-gradient(90deg,#fde68a,#86efac,#93c5fd);
  border:none; padding:8px 12px; border-radius:10px; cursor:pointer;
  font-weight:700; color:#111827;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.kv-colored-btn:hover{ filter:brightness(0.98); }

/* Proqress bar */
.kv-progress{
  position:relative; width:260px; height:12px; border-radius:999px; overflow:hidden;
  background:#f1f5f9; border:1px solid #cbd5e1;
}
.kv-progress-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:linear-gradient(90deg,#93c5fd,#86efac,#fde68a);
  transition: width .35s ease;
}
.kv-progress-text{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:700; color:#111827;
}

/* Cədvəl sərhədləri qara (detal + siyahı) */
#istekPage .kv-table, #istekPage .kv-table th, #istekPage .kv-table td,
#istekDetailPage .kv-table, #istekDetailPage .kv-table th, #istekDetailPage .kv-table td{
  border:1px solid #000;
}
#istekPage .kv-table, #istekDetailPage .kv-table{ border-collapse:collapse; }

/* Konteks menyu düyməsi: qara + bold (əvvəlkini saxla) */
#istek_ctxMenu .ctx-item{ color:#111827; font-weight:700; }

/* İstək sifariş ikonu: gradient rəng + yumşaq animasiya */
.kv-istek-ico{
  margin-right:8px;
  font-size:18px;
  /* Mövzuya uyğun gradient (sənin rənglərinə bənzər) */
  background: linear-gradient(90deg, #93c5fd, #86efac, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                 /* ikonun özü gradientlə boyansın */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.12));
  animation: kvFloat 2.8s ease-in-out infinite;
}

/* Hover zamanı yüngül “wiggle” effekti */
button:hover .kv-istek-ico{
  animation: kvWiggle .7s ease-in-out infinite;
}

/* Idle float animasiyası */
@keyframes kvFloat{
  0%   { transform: translateY(0) }
  50%  { transform: translateY(-2px) }
  100% { transform: translateY(0) }
}

/* Wiggle animasiyası (hover) */
@keyframes kvWiggle{
  0%   { transform: rotate(0deg) }
  25%  { transform: rotate(-8deg) }
  50%  { transform: rotate(6deg) }
  75%  { transform: rotate(-4deg) }
  100% { transform: rotate(0deg) }
}

/* Erişilebilirlik: hərəkəti azalt */
@media (prefers-reduced-motion: reduce){
  .kv-istek-ico{ animation: none }
  button:hover .kv-istek-ico{ animation: none }
}

/* ==== İ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ş: Modern Stil ===== */
.me-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

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

.me-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 #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
}

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

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

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

.me-form-group {
    margin-bottom: 1.25rem;
}

.me-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}

.me-form-row .me-form-group {
    flex: 1;
    min-width: 200px;
}

.me-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #4b5563;
    font-size: 0.95rem;
}

.me-input {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
    height: 44px;
    background-color: #f9fafb;
}

.me-input:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2);
    outline: none;
    background-color: #ffffff;
}

.me-hint {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 0.4rem;
    line-height: 1.4;
}

.me-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;
}

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

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

.me-button-primary {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.me-button-primary:hover {
    background: linear-gradient(135deg, #4338ca, #6d28d9);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}

.me-button-outline {
    background: transparent;
    border: 2px solid #4f46e5;
    color: #4f46e5;
    font-weight: 600;
}

.me-button-outline:hover {
    background: rgba(79, 70, 229, 0.08);
    transform: translateY(-2px);
}

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

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

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

.me-info {
    font-size: 0.95rem;
    color: #4b5563;
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid #4f46e5;
    line-height: 1.6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.me-result {
    margin-top: 2rem;
    overflow-x: auto;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

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

/* Ripple effekti */
.ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Loading effekti */
.me-button.loading {
    color: transparent;
    pointer-events: none;
    position: relative;
}

.me-button.loading:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 0.8s ease-in-out infinite;
}

.me-button-outline.loading:after {
    border-top-color: #4f46e5;
}

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

/* Responsive Tənzimləmələr */
@media (max-width: 768px) {
    .me-container {
        padding: 15px;
    }

    .me-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .me-card {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .me-form-row {
        flex-direction: column;
        gap: 1rem;
    }

    .me-form-row .me-form-group {
        min-width: 100%;
    }

    .me-button-group {
        flex-direction: column;
        width: 100%;
    }

    .me-button,
    .me-button-outline {
        width: 100%;
        padding: 0.8rem 1.5rem;
    }

    .me-button-lg {
        padding: 1rem 1.5rem;
    }
}

/* ===== 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;
  }
}

/* Marafon SVG ölçü və yerləşmə */
.kv-marafon-btn .kv-runner{ display:inline-flex; align-items:center; margin-right:8px; }
.kv-runner-svg{ display:block; }

.kv-shadow{ animation: kvShadow 0.6s ease-in-out infinite alternate; }
.kv-body{ transform-origin: 36px 28px; animation: kvBob 0.6s ease-in-out infinite alternate; }

/* QOLLAR – əks faza */
.kv-arm-left  { transform-origin: 34.5px 27px; animation: kvArmLeft 0.6s ease-in-out infinite alternate; }
.kv-arm-right { transform-origin: 43.5px 27px; animation: kvArmRight 0.6s ease-in-out infinite alternate; }

/* AYAQLAR – biri irəli, biri geri */
.kv-leg-left  { transform-origin: 35.5px 40px; animation: kvLegLeft 0.6s ease-in-out infinite alternate; }
.kv-leg-right { transform-origin: 42.5px 40px; animation: kvLegRight 0.6s ease-in-out infinite alternate; }

/* 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;
}
[id^="columnToggle"] label::before{ 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:"✓"; 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 */
#xkLocal_modal{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:9999;
  align-items:center; justify-content:center; padding:12px;
}

/* Kart – mobil üçün uyğun, max hündürlük, sütun layout */
.xk-card{
  background:#fff; width:96vw; max-width:720px;
  max-height: calc(92vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  display:flex; flex-direction:column; overflow:hidden;
}

/* Başlıq */
.xk-header{
  padding:10px 12px; border-bottom:1px solid #eee;
  display:flex; align-items:center; justify-content:space-between;
}

/* Kiçik düymələr */
.xk-btn-sm{ font-size:13px; padding:6px 10px; border:1px solid #e5e7eb; background:#f8fafc; border-radius:8px; cursor:pointer; }
.xk-btn-sm:active{ transform:translateY(1px); }

/* X düyməsi */
.xk-close{ width:28px; height:28px; border-radius:8px; font-size:16px; line-height:26px; text-align:center; }

/* Filtrlər */
.xk-body{ padding:10px 12px; display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }

/* SCROLL bölgəsi – orta hissə */
.xk-content{
  flex:1; overflow:auto; -webkit-overflow-scrolling:touch;
  padding: 0 12px 0 12px;
}

/* Cədvəl konteyneri */
.xk-tablewrap{ border:1px solid #e5e7eb; border-radius:10px; max-height: none; overflow:auto; }
.xk-table thead{ position:sticky; top:0; background:#f8fafc; }
.xk-td{ padding:6px 8px; border-bottom:1px solid #eee; }

/* FOOTER – həmişə görünən */
.xk-footer{
  position:sticky; bottom:0; background:#fff; padding:12px;
  border-top:1px solid #eee; display:flex; gap:8px; justify-content:flex-end;
}

/* Rəngli düymələr (+ qalın yazı) */
.xk-btn-blue{ background:#3b82f6; color:#fff; border:none; } .xk-btn-blue:hover{ background:#2563eb; }
.xk-btn-green{ background:#10b981; color:#fff; border:none; } .xk-btn-green:hover{ background:#059669; }
.xk-btn-red{ background:#ef4444; color:#fff; border:none; } .xk-btn-red:hover{ background:#dc2626; }
.xk-btn-orange{ background:#f59e0b; color:#fff; border:none; } .xk-btn-orange:hover{ background:#d97706; }
.xk-btn-sm b{ color:#fff; font-weight:600; }

/* ===== Apteklər üzrə report (XK Local) ===== */
/* ===== Apteklər üzrə report (overlay) ===== */
#xkLocal_aptekReportWrap{
  position: fixed;
  inset: 0;                 /* ekranı tutur */
  background: #fff;
  z-index: 900;             /* header/hamburger (z>900) üstə qoya bilərsən */
  display: flex;
  flex-direction: column;
  /* Sol “təhlükəsiz zolaq”: JS ilə dinamik veriləcək, yoxdursa 56px */
  --safe-left: 56px;
}
#xkLocal_aptekReportWrap .xk-ar-topbar,
#xkLocal_aptekReportWrap .xk-ar-titlebar,
#xkLocal_aptekReportWrap .xk-ar-tablewrap{
  padding-left: var(--safe-left, 56px); /* hamburger zolağı boş qalsın */
}

#xkLocal_aptekReportWrap .xk-ar-topbar{padding:10px 12px;border-bottom:1px solid #eee;}
#xkLocal_aptekReportWrap .xk-ar-back{background:#3b82f6;color:#fff;border:none;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;}
#xkLocal_aptekReportWrap .xk-ar-back:active{transform:translateY(1px);}
#xkLocal_aptekReportWrap .xk-ar-titlebar{padding:8px 12px 0; text-align:center;}
#xkLocal_aptekReportWrap .xk-ar-title{font-weight:800;color:#111827;}

#xkLocal_aptekReportWrap .xk-ar-tablewrap{margin:12px; border:1px solid #000; border-radius:10px; overflow:auto; max-height:calc(100vh - 170px);}
#xkLocal_aptekReportWrap .xk-ar-table{width:100%; border-collapse:collapse;}
#xkLocal_aptekReportWrap .xk-ar-table thead{position:sticky; top:0; background:#f59e0b; color:#000; z-index:1;}
#xkLocal_aptekReportWrap .xk-ar-th,
#xkLocal_aptekReportWrap .xk-ar-td{padding:10px; border:1px solid #000; text-align:center;}
#xkLocal_aptekReportWrap .xk-ar-table tbody tr:nth-child(even){background:#fffdfa;}
#xkLocal_aptekReportWrap .xk-ar-table tbody tr:hover{background:#fff3d6;}
@media (max-width:640px){
  #xkLocal_aptekReportWrap .xk-ar-th,
  #xkLocal_aptekReportWrap .xk-ar-td{padding:8px;}
}

/* ===== Əməkdaşlar üzrə report (overlay) ===== */
#xkLocal_staffReportWrap{
   position: fixed;
  inset: 0;                 /* ekranı tutur */
  background: #fff;
  z-index: 900;             /* header/hamburger (z>900) üstə qoya bilərsən */
  display: flex;
  flex-direction: column;
  /* Sol “təhlükəsiz zolaq”: JS ilə dinamik veriləcək, yoxdursa 56px */
  --safe-left: 56px;
}
#xkLocal_staffReportWrap .xk-ar-topbar{padding:10px 12px;border-bottom:1px solid #eee;}
#xkLocal_staffReportWrap .xk-ar-back{background:#3b82f6;color:#fff;border:none;border-radius:10px;padding:10px 16px;font-weight:700;cursor:pointer;}
#xkLocal_staffReportWrap .xk-ar-back:active{transform:translateY(1px);}
#xkLocal_staffReportWrap .xk-ar-titlebar{padding:8px 12px 0; text-align:center;}
#xkLocal_staffReportWrap .xk-ar-title{font-weight:800;color:#111827;}

#xkLocal_staffReportWrap .xk-ar-tablewrap{margin:12px; border:1px solid #000; border-radius:10px; overflow:auto; max-height:calc(100vh - 170px);}
#xkLocal_staffReportWrap .xk-ar-table{width:100%; border-collapse:collapse;}
#xkLocal_staffReportWrap .xk-ar-table thead{position:sticky; top:0; background:#f59e0b; color:#000; z-index:1;}
#xkLocal_staffReportWrap .xk-ar-th,
#xkLocal_staffReportWrap .xk-ar-td{padding:10px; border:1px solid #000; text-align:center;}
#xkLocal_staffReportWrap .xk-ar-table tbody tr:nth-child(even){background:#fffdfa;}
#xkLocal_staffReportWrap .xk-ar-table tbody tr:hover{background:#fff3d6;}
@media (max-width:640px){
  #xkLocal_staffReportWrap .xk-ar-th,
  #xkLocal_staffReportWrap .xk-ar-td{padding:8px;}
}


 /* Qalıq Satılmalı Cədvəli */
    #qsTable {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      margin: 20px 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      border-radius: 8px;
      overflow: hidden;
    }

    #qsTable thead th {
      background-color: #2E75B6; /* Mavi başlıq */
      color: white;
      font-weight: 600;
      font-size: 14px;
      text-align: center;
      padding: 12px 8px;
      border: none;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    #qsTable tbody tr {
      transition: background-color 0.15s ease;
    }

    #qsTable tbody tr:nth-child(even) {
      background-color: #f8fafc;
    }

    #qsTable tbody tr:hover {
      background-color: #f1f7ff;
      cursor: pointer;
    }

    #qsTable td {
      padding: 10px 12px;
      border-bottom: 1px solid #e5e7eb;
      color: #1f2937;
      vertical-align: middle;
    }

    /* Sıra nömrəsi */
    #qsTable td:first-child {
      text-align: center;
      color: #4b5563;
      font-weight: 500;
    }

    /* Aptek adı */
    #qsTable td:nth-child(2) {
      font-weight: 600;
      color: #111827;
    }

    /* Qutu sayı */
    #qsTable td:nth-child(3) {
      text-align: center;
      font-weight: 700;
      color: #1d4ed8;
      background-color: #e0f2fe;
    }

    /* Məbləğ */
    #qsTable td:last-child {
      text-align: right;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-weight: 600;
      color: #065f46;
    }

    /* Cəmi sətri */
    #qsTable tfoot td {
      background-color: #2E75B6;
      color: white;
      font-weight: 700;
      padding: 12px 16px;
      text-align: right;
      font-size: 15px;
    }

    #qsTable tfoot td:first-child {
      text-align: left;
      padding-left: 20px;
    }

    /* Responsive üçün */
    @media (max-width: 768px) {
      #qsTable {
        font-size: 14px;
      }

      #qsTable th,
      #qsTable td {
        padding: 8px 10px;
      }
    }




 /* 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 */
}


/* ===== Müqayisəli Satış üçün kiçik əlavələr ===== */
.ms-back{
  background:#e5e7eb; color:#111; font-weight:700;
  display:inline-block; width:auto; padding:8px 12px; margin-bottom:10px;
}
.ms-title{ margin:6px 0 10px 0; }

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

.ms-listbox{
  border:1px solid #e5e7eb; border-radius:8px; padding:6px;
  max-height:55vh; overflow:auto;
}
.ms-list-item{
  display:grid; grid-template-columns:20px 1fr; align-items:center;
  gap:10px; padding:6px 8px; border-bottom:1px dashed #eee;
}
.ms-list-item:last-child{ border-bottom:none; }
.ms-list-item label{ font-weight:600; color:#111; cursor:pointer; }