/* Davomat */
#att-today-body td, #att-late-body td, #att-log-body td { vertical-align: top; }
.att-ignored { text-decoration: line-through; opacity: .6; }
.att-events { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13px; }
.att-events .btn.link { padding: 0 4px; font-size: 12px; }
.att-actions { display: flex; flex-wrap: wrap; gap: 2px; }
.att-dialog-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.att-dialog-head label { margin-bottom: 0; }
.att-urls { display: grid; gap: 8px; margin: 8px 0 12px; }
.att-url { display: flex; align-items: center; gap: 10px; }
.att-url code { flex: 1; background: var(--peach-soft); border-radius: 8px; padding: 8px 10px; font-size: 13px; word-break: break-all; }
.att-steps { padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.att-settings { display: grid; gap: 12px; max-width: 640px; }
.att-settings .btn { justify-self: start; }
#att-dialog { width: min(900px, 96vw); }
#att-form textarea { width: 100%; }

/* Oylik tabel: kichik kataklar */
table.att-month th, table.att-month td { padding: 6px 4px; text-align: center; }
table.att-month th:first-child, table.att-month td:first-child { text-align: left; position: sticky; left: 0; background: var(--white); z-index: 1; }
.att-name { white-space: nowrap; text-align: left; }
.att-day { display: grid; line-height: 1.1; }
.att-day small { font-size: 10px; font-weight: 500; opacity: .7; }
.att-cell { display: inline-block; min-width: 24px; height: 24px; line-height: 24px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.att-cell.ok { background: var(--peach); }
.att-cell.late { background: var(--red-soft); color: var(--red); }
.att-cell.bad { background: var(--red); color: var(--white); }
.att-cell.extra { border: 1.5px solid var(--caramel); }
.att-cell.none { opacity: .4; }

/* Bosh sahifa (dashboard) */
.att-dash { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
.att-col-left, .att-col-right { display: grid; gap: 20px; min-width: 0; }
@media (max-width: 1100px) { .att-dash { grid-template-columns: 1fr; } }
.att-card { border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); overflow: hidden; }
.att-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1.5px solid var(--line); }
.att-card-head h2 { margin: 0; font-size: 16px; flex: 1; }
.att-card-head input, .att-card-head select { width: auto; max-width: 220px; }
.att-card .table-wrap { border: none; border-radius: 0; margin: 0; }
.att-card .empty.small { padding: 18px; font-size: 14px; }
.att-today-card { padding-bottom: 0; }
.att-date { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1.5px solid var(--line); }
.att-date > b { font-size: 48px; line-height: 1; }
.att-date div { font-weight: 600; font-size: 17px; }
.att-date span { display: block; font-size: 14px; font-weight: 500; opacity: .7; }
.att-donut { display: block; width: 200px; margin: 18px auto 8px; }
.att-donut-num { font-size: 34px; font-weight: 700; fill: currentColor; }
.att-donut-label { font-size: 12px; font-weight: 600; fill: currentColor; opacity: .7; }
.att-bar { height: 8px; border-radius: 4px; background: var(--line); margin: 8px 20px 6px; overflow: hidden; }
.att-bar i { display: block; height: 100%; background: var(--brown); border-radius: 4px; }
.att-bar-label { text-align: center; font-size: 13px; font-weight: 600; margin: 0 16px 12px; }
.att-big3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1.5px solid var(--line); }
.att-big3 button { text-align: center; padding: 12px 4px; font: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; color: inherit; background: none; border: 0; border-top: 4px solid; cursor: pointer; }
.att-big3 button + button { border-left: 1.5px solid var(--line); }
.att-big3 button:hover { background: var(--peach-soft); }
.att-big3 button.active { background: var(--peach-soft); box-shadow: inset 0 -3px 0 var(--brown); }
.att-big3 button:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; }
.att-table-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.att-filter-chip { cursor: pointer; border: 0; font: inherit; font-size: 12px; font-weight: 700; }
.att-big3 b { display: block; font-size: 28px; text-transform: none; }
.att-big3 .came { border-top-color: #2F8F4E; }
.att-big3 .absent { border-top-color: #C0392B; }
.att-big3 .late { border-top-color: #D08A12; }
.att-list { display: grid; }
.att-list > div { padding: 12px 18px; border-top: 1px solid var(--line); }
.att-list > div:first-child { border-top: none; }
.att-device { display: flex; gap: 10px; align-items: flex-start; }
.att-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; }
.att-dot.on { background: #2F8F4E; }
.att-dot.off { background: #C0392B; }
.att-bday { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.att-bday-date { border: 1.5px solid var(--line); border-radius: 8px; padding: 4px 10px; text-align: center; font-size: 11px; font-weight: 600; }
.att-bday-date b { display: block; font-size: 20px; color: var(--brown); }
.att-bday-date.today { background: var(--peach); border-color: var(--peach); }
.att-person { display: flex; align-items: center; gap: 10px; text-align: left; }
.att-person b { display: block; }
.att-person-btn { border: none; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.att-person-btn:hover b { text-decoration: underline; }
.att-late { color: #A86A00; font-weight: 700; }
.att-pager { display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-top: 1.5px solid var(--line); flex-wrap: wrap; }
.att-pager .muted { margin: 0; }
.att-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.att-top-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); }
.att-ring { width: 52px; height: 52px; flex: none; }
.att-ring-text { font-size: 12px; font-weight: 700; fill: currentColor; }
.att-chart { position: relative; padding: 12px 18px 16px; }
.att-line { width: 100%; height: auto; display: block; }
.att-grid { stroke: var(--line); stroke-width: 1; }
.att-axis { font-size: 11px; fill: currentColor; opacity: .7; }
.att-cross { stroke: var(--caramel); stroke-width: 1; stroke-dasharray: 3 3; }
.att-tip { position: absolute; top: 16px; background: var(--white); border: 1.5px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,.08); min-width: 130px; }
.att-tip-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.att-tip-row b { margin-left: auto; }
.att-tip i, .att-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.att-legend { display: flex; gap: 18px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.att-legend span { display: flex; align-items: center; gap: 6px; }
.att-card td .chip { white-space: normal; }

/* Ish grafiklari */
.att-sched-name { display: flex; align-items: center; gap: 10px; }
.att-sched-icon { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.att-weekdays { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 14px; }
.att-card + .section-head { margin-top: 28px; }
@media print {
  .sidebar, nav, .no-print, .toolbar .filters, .att-actions { display: none !important; }
  .att-card { border: none; }
}

/* Hisobotlar */
.att-rep-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; align-items: start; }
.att-rep-list { display: grid; }
.att-rep-item { display: flex; align-items: center; gap: 12px; text-align: left; border: none; border-top: 1px solid var(--line); background: none; padding: 13px 18px; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.att-rep-item:first-child { border-top: none; }
.att-rep-item:hover { background: var(--peach-soft); }
.att-rep-item i { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--brown); flex: none; }
.att-rep-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.att-rep-title h2 { margin: 0; font-size: 20px; }
.att-rep-title .muted { margin: 0; }
.att-rep-table td.num, .att-rep-table th.num { text-align: right; white-space: nowrap; }
.att-rep-table td.neg { color: var(--red); }
.att-rep-table tfoot td { font-weight: 700; border-top: 2px solid var(--brown); }
/* Guruhli hisobotlar (tabel, ish haqi): bo'lim/xodim sarlavhasi va guruh jami */
.att-rep-table tr.rk-group td { background: var(--peach-soft); font-weight: 700; border-top: 2px solid var(--line); }
.att-rep-table tr.rk-subtotal td { font-weight: 700; border-bottom: 2px solid var(--line); }
.att-rep-table.wide th, .att-rep-table.wide td { padding: 6px 5px; font-size: 12px; }
@media print {
  .att-rep-table { font-size: 11px; }
  .att-rep-table th, .att-rep-table td { padding: 4px 6px; }
}

/* Savdo (iiko) */
.iiko-table td.num, .iiko-table th.num { text-align: right; white-space: nowrap; }
.iiko-table tfoot td { font-weight: 700; border-top: 2px solid var(--brown); }
#tab-iiko-sales .stats + .stats { margin-top: -8px; }
.iiko-sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(640px, 1fr)); gap: 20px; align-items: start; margin-bottom: 8px; }
.iiko-sector h3 { margin: 0 0 8px; font-size: 16px; }
.iiko-share { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.iiko-share b { font-size: 12px; min-width: 42px; text-align: right; }
.iiko-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.iiko-bar i { display: block; height: 100%; background: var(--brown); border-radius: 4px; }
.iiko-sector td { white-space: nowrap; }

/* Shtat jadvali */
.staff-table td.num, .staff-table th.num { text-align: center; }
.staff-input { width: 64px; text-align: center; padding: 6px; }
.staff-dep + .staff-dep { margin-top: 8px; }

/* ---------- Savdo (iiko): zamonaviy dashboard ----------
   Ranglar: neytral kulrang fon, ko'k asosiy qator, bo'limlar — ko'k / to'q sariq / yashil-moviy (daltoniklar uchun tekshirilgan).
   Yashil/qizil faqat "o'tgan davrga nisbatan" uchun va doim ▲/▼ belgisi bilan. */
.sd {
  --sd-page: #f4f5f7;
  --sd-surface: #ffffff;
  --sd-ink: #14171c;
  --sd-ink2: #52514e;
  --sd-muted: #7d7b75;
  --sd-grid: #e7e7e3;
  --sd-base: #c3c2b7;
  --sd-border: rgba(20, 23, 28, 0.08);
  --sd-s1: #2a78d6;
  --sd-s2: #eb6834;
  --sd-s3: #1baf7a;
  --sd-s4: #8e5bd0;
  --sd-other: #b9b7ae;
  --sd-prevline: #9a988f;
  --sd-up: #0a7d32;
  --sd-up-bg: #e6f4ea;
  --sd-down: #c62828;
  --sd-down-bg: #fdecea;
  color: var(--sd-ink);
  background: var(--sd-page);
  border-radius: 18px;
  padding: 20px;
}
.sd .muted, .sd p.muted { color: var(--sd-ink2); }
.sd-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-bottom: 14px; }
.sd-meta p { margin: 0; }
.sd-prev { font-size: 12.5px; font-weight: 500; color: var(--sd-muted); }
.sd-chg { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-weight: 700; font-size: 12px; }
.sd-chg.sd-up { color: var(--sd-up); background: var(--sd-up-bg); }
.sd-chg.sd-down { color: var(--sd-down); background: var(--sd-down-bg); }
.sd-chg.sd-flat { color: var(--sd-ink2); background: var(--sd-grid); }
.sd-value.sd-up, .sd-leg-val.sd-up, .sd-bar-val b.sd-up { color: var(--sd-up); }
.sd-value.sd-down, .sd-leg-val.sd-down, .sd-bar-val b.sd-down { color: var(--sd-down); }

.sd-top { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: 14px; margin-bottom: 14px; }
.sd-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sd-tile, .sd-card {
  background: var(--sd-surface);
  border: 1px solid var(--sd-border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 23, 28, 0.04);
}
.sd-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.sd-label { font-size: 13px; font-weight: 600; color: var(--sd-ink2); }
.sd-value { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--sd-ink); }
.sd-hero { justify-content: center; padding: 22px 24px; }
.sd-hero .sd-value { font-size: 40px; line-height: 1.1; }
.sd-hero .sd-prev { font-size: 14px; }

.sd-card { padding: 16px 18px; margin-bottom: 14px; }
.sd-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.sd-card h3 { margin: 0; font-size: 16px; color: var(--sd-ink); }
.sd-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; }
.sd-grid2 .sd-card { margin-bottom: 14px; }

.sd-legend-inline { display: flex; gap: 18px; font-size: 13px; font-weight: 600; color: var(--sd-ink2); margin-bottom: 6px; }
.sd-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.sd-key-cur { background: var(--sd-s1); }
.sd-key-prev { height: 2px; vertical-align: 4px; background: var(--sd-prevline); }
.sd-chart-wrap { position: relative; }
.sd-chart { width: 100%; height: auto; display: block; }
.sd-chart .sd-grid { stroke: var(--sd-grid); stroke-width: 1; }
.sd-chart .sd-base { stroke: var(--sd-base); stroke-width: 1; }
.sd-chart .sd-tick { fill: var(--sd-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sd-chart .sd-col { fill: var(--sd-s1); }
.sd-chart .sd-col-today { fill: #86b6ef; }
.sd-chart .sd-prevline { fill: none; stroke: var(--sd-prevline); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sd-chart .sd-cross { stroke: var(--sd-base); stroke-width: 1; }
.sd-chart .sd-hit { fill: transparent; cursor: crosshair; }
.sd-tip {
  position: absolute; top: 8px; min-width: 210px; pointer-events: none;
  background: var(--sd-surface); border: 1px solid var(--sd-border); border-radius: 10px;
  box-shadow: 0 6px 20px rgba(20, 23, 28, 0.12); padding: 10px 12px; font-size: 13px; color: var(--sd-ink);
}
.sd-tip b { display: block; margin-bottom: 4px; }
.sd-tip div { margin-top: 2px; white-space: nowrap; }

.sd-stack { display: flex; gap: 2px; height: 18px; border-radius: 6px; overflow: hidden; margin: 4px 0 14px; }
.sd-stack i { display: block; min-width: 2px; }
.sd-c-s1 { background: var(--sd-s1); }
.sd-c-s2 { background: var(--sd-s2); }
.sd-c-s3 { background: var(--sd-s3); }
.sd-c-s4 { background: var(--sd-s4); }
.sd-c-other { background: var(--sd-other); }
.sd-legend { display: grid; gap: 10px; }
.sd-leg-row { display: grid; grid-template-columns: 14px 1fr auto 56px; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.sd-swatch { width: 12px; height: 12px; border-radius: 3px; }
.sd-leg-name { font-weight: 600; }
.sd-leg-val { text-align: right; font-variant-numeric: tabular-nums; }
.sd-leg-share { text-align: right; font-weight: 600; color: var(--sd-ink2); font-variant-numeric: tabular-nums; }
.sd-leg-row .sd-prev { grid-column: 2 / 5; }

.sd-bars { display: grid; gap: 12px; }
.sd-bar-row { display: grid; grid-template-columns: minmax(120px, 1.1fr) 2fr auto; gap: 12px; align-items: center; }
.sd-bar-name { display: flex; flex-direction: column; }
.sd-bar-track { height: 12px; background: var(--sd-page); border-radius: 0 6px 6px 0; }
.sd-bar-track i { display: block; height: 100%; background: var(--sd-s1); border-radius: 0 4px 4px 0; }
.sd-bar-val { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }

.sd-more summary { cursor: pointer; font-weight: 700; font-size: 16px; color: var(--sd-ink); }
.sd-more[open] summary { margin-bottom: 12px; }
.sd .iiko-table { background: var(--sd-surface); }
.sd .iiko-bar i { background: var(--sd-s1); }

.sd-presets { display: inline-flex; gap: 4px; background: #eef0f3; border-radius: 10px; padding: 3px; }
.sd-preset { border: 0; background: transparent; padding: 6px 10px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: #52514e; cursor: pointer; }
.sd-preset:hover { background: rgba(255, 255, 255, 0.6); }
.sd-preset.on { background: #ffffff; color: #14171c; box-shadow: 0 1px 2px rgba(20, 23, 28, 0.1); }

@media (max-width: 900px) {
  .sd { padding: 12px; }
  .sd-top { grid-template-columns: 1fr; }
  .sd-grid2 { grid-template-columns: 1fr; }
  .sd-bar-row { grid-template-columns: 1fr auto; }
  .sd-bar-track { grid-column: 1 / 3; grid-row: 2; }
}
.sd-value { white-space: nowrap; }
.sd-value small { font-size: 0.55em; font-weight: 600; color: var(--sd-muted); }
.sd-hero .sd-value { font-size: 38px; }
.sd .iiko-table th { background: var(--sd-page); color: var(--sd-ink2); border-color: var(--sd-grid); }
.sd .iiko-table td { border-color: var(--sd-grid); color: var(--sd-ink); }
.sd .iiko-table tfoot td { border-top-color: var(--sd-base); }
.sd-hero .sd-value { font-size: 34px; white-space: normal; }
.sd-hero .sd-value small { display: block; font-size: 15px; margin-top: 2px; }
.sd-hero .sd-value { font-size: 30px; white-space: nowrap; }
.att-cell.leave { background: #e3ecf8; color: #1c5cab; font-weight: 700; }

/* Qurilmalar filial bo'yicha */
.att-dev-group { margin-bottom: 22px; }
.att-dev-group h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; font-size: 16px; }
.att-dev-group h3 .cell-sub { display: inline; margin: 0; color: var(--brown); }
.att-dev-off { margin-top: 8px; }
.att-dev-off summary { cursor: pointer; color: var(--brown); padding: 6px 0; }
.att-dev-mini-head { padding: 10px 18px 4px; font-size: 12px; font-weight: 600; color: var(--brown); text-transform: uppercase; letter-spacing: .03em; }