/* ==========================================================================
   ORBIT — DEGA TENANT ADAPTER  (assets/user-defined/css/orbit-dega.css)
   --------------------------------------------------------------------------
   PURPOSE
   Every Dega-only rule of the Orbit design-system port lives HERE. The shared
   Orbit files copied from B2BFrigoDuman_v3 are BYTE-IDENTICAL and are never
   edited in this repo:
       design-system/ds.css          (tokens + component library, @layer'd)
       css/orbit-skin.css            (skin-in-place primitives under .ds-skin)
       css/dashboard-orbit.css       (dashboard skin under .ds-skin.ds-dash)
       css/orbit-navbar.css          (navbar adapter, tenant-drifted but taken
                                      from Frigo as-is)
       js/orbit-accent.js, js/orbit-select.js, js/orbit-report-view.js
   Verify with:
       git -c core.autocrlf=false diff --no-index --ignore-cr-at-eol <frigo> <dega>
   If Dega needs a change to one of them, the change goes into Core first and is
   re-synced, or it is written here as an override. Same role as Gunes's
   orbit-gunes.css.

   LOAD ORDER
   _Layout.cshtml links this file LAST, right after orbit-navbar.css, with the
   AssetVer mtime cache-bust. It is UNLAYERED on purpose: ds.css components sit
   in @layer and lose to legacy customize.css; adapters must be unlayered (and
   use !important where the legacy rule does) to win.

   RULES
   - Only var(--ds-*) values from ds.css; no new design values.
   - Scope page rules under .ds-skin; navbar rules under .orbit-nav; body-appended
     chrome (toasts, swal2, datepicker) may be global like orbit-skin §23/§26.

   SECTIONS
   D0  tenant token overrides (accent text colour — page standard S2; page canvas one step below the cards
       + sunken one step below the canvas)
   D1  DataTables 2.x class translation (decision D1: Dega keeps DT 2.3.4;
       orbit-skin §4/§12/§13/§15 select the DT1 names dataTables_wrapper /
       dataTables_filter / dataTables_paginate / dataTables_info /
       dataTables_length — mirror those rules here for dt-container / dt-search /
       dt-paging / dt-info / dt-length; plus the dashboard-orbit.css dt-* mirrors
       M1–M15 for the .ds-dash widget panels; plus the Dega-only dashboard widget
       filter rows — .dash-widget-filters, standard S5; + dark DataTables button surfaces vs customize.css)
   D2  legacy hazard patches (residue of the deleted insight stylesheet: date-range caption, risk chip rows,
       radar list empty state, pulse and cell text; dark .text-muted colour vs pratham's #444;
       body background from the canvas token, legacy body colours and dark image dropped)
   D3  navbar deltas (Dega markup: #nav-icon.d-xl-none, no currency widget; dark drawer
       heading colour vs pratham's #444)
   D4  toastr → .ds-alert skin (toastr is live in Dega)
   D5  stock list (noUiSlider 15 handle anchor, ds-switch label colour; product
       rows: photo height bound, cari in-stock badge box, LOGO unit select in the
       buy line; PagedList.Mvc pager mirrors of §20's custom pager; detail
       modal tab-1 depo ledger mirror of §29 for the tenant's table.table;
       account ribbon one-line closed cards, 13px headline)
   D6  basket page (Frigo's two-column order-form adapter moved out of its inline
       <style>; medallions kept on DS-enhanced selects; disabled DS trigger; plain
       #tableBasket card; text-only empty-basket card; SepetKenarda flyout:
       legacy customize.css rules neutralized under .orbit-flyout)
   D7  cari ledger + order balance pages (CariHareketler Index + Aging, OrderBalance:
       DT2's own search boxes hidden per table — the page's .cari-ara box drives the search);
       stock movements modal width (#ajax-modal:has(#stock-movements))
   D8  Phase 6 admin CRUD lists (.crud-list opt-in class: DT2 search box hidden
       under a .cari-ara search + the pager grid, moved from OdemeTipleri/Index;
       .crud-form opt-in class: field medallions on full-page forms;
       .ds-checkbox `~` adapter for CheckBoxFor's hidden twin — KodEslestir;
       .crud-field-group show/hide wrappers, #stockDiscountTable th, clickable
       submit disc in .cari-ara — StockPermission/StockDiscounts;
       .crud-form dl/dt/dd key-value grid on Details/Delete pages — Files/DashboardCrud;
       .virtual-pay accordion header centring — PaymentDefinitions/VirtualPay;
       .external-group pick-list height + preview image size — ExternalGroup/EgCreate;
       .announcement preview box — DuyuruReklam/Create; #UserSettingsForm float reset — Account/UserProfileSettings;
       .payment-history notes column ellipsis + hover bubble — PaymentHistory/Index;
       .collection-management cards, stat row, empty state, notes panel, action grid — collectionmanagement/CMIndex)
   D9  Phase 9 payment page (.payment-page opt-in on Payment/PIndex's .egk-content: error line colour,
       card-brand logo row, the phone bottom margin moved from the page's inline style); Settings/Index
       (#SetSettingsForm float reset, full-width setting rows and the dark-mode tab colours under
       .ds-skin.settings-page.settings-single-card)
   D10 Phase 10 standalone pages: login (body.ds-skin.login-page opt-in on Account/Login — the floating brand-logo
       field moved from login.css, no longer linked by the skinned page; + login logo blend); contract approval
       (body.ds-skin.contract-approval on Account/ContractApproval — its old inline style block on DS tokens)
   D11+ per-page adapters, added as pages are skinned
   ========================================================================== */

/* ---------- D0. Tenant token overrides ----------------------------------- */
/* Page standard S2 (user, 2026-09-22): text on accent-filled controls is WHITE
   for this tenant's orange. orbit-accent.js picks the fill text by luminance and
   writes `--theme-color-fg: #111111` as a plain inline style on <html>
   (orbit-accent.js:91); orbit-skin.css:1318 maps it to --ds-accent-fg, which
   every accent button, the pager .current and the header CTA read. A stylesheet
   !important beats a non-important inline declaration, so this single rule
   flips all of them in light and dark without touching the script. */
:root { --theme-color-fg: #ffffff !important; }

/* Page canvas one step below the cards (user's decision 2026-09-27: "darker
   canvas, cards unchanged"). ds.css gives the canvas the SAME colour as the cards
   (#f5f5f5 light), so a card read only through its shadow. The token sits in
   @layer ds.tokens, so these unlayered rules win without an important flag; the dark
   rule is needed because the light :root rule would otherwise beat the layered
   dark value. Light #e9e9e9 is a tenant value (no ds token has it); dark #121214
   is the value of the dark sunken token. Cards, pills and inputs keep their own
   tokens. Every canvas reader follows: the .ds-skin page wrappers, the body
   (§D2), the navbar glass and the login background. */
:root { --ds-surface-page: #e9e9e9; }
:root[data-theme="dark"] { --ds-surface-page: #121214; }

/* Sunken fills one step below that canvas (user's decision 2026-09-27, variant B
   of the 10R6 A/B). ds.css orders sunken < canvas < card (light #ececec < #f5f5f5,
   dark #121214 < #17181a); the darker canvas broke it (light sunken now lighter,
   dark sunken equal), so the dashboard tab tracks lost their fill step. Readers:
   inset fields, toggle and tab tracks. Same layer reasoning as the canvas rules. */
:root { --ds-surface-sunken: #dfdfdf; }
:root[data-theme="dark"] { --ds-surface-sunken: #0c0c0e; }

/* ---------- D1. DataTables 2.x translation ------------------------------- */
/* Dega loads DataTables 2.3.4 (decision D1). orbit-skin.css was written against
   the DataTables 1 stylesheet and selects the old generated names; DT2 renames
   them:
       .dataTables_wrapper   → .dt-container      (id stays <table>_wrapper)
       .dataTables_filter    → .dt-search         (label + input.dt-input)
       .dataTables_length    → .dt-length         (select.dt-input + label)
       .dataTables_info      → .dt-info
       .dataTables_paginate  → .dt-paging         (buttons sit in a child <nav>)
       .paginate_button      → .dt-paging-button  (see note 1)
       td.dataTables_empty   → td.dt-empty
       th.sorting*           → th.dt-orderable-* / th.dt-ordering-*
   Every rule below is a copy of an orbit-skin rule with only the class name
   changed (source line in the comment). Values are the same var(--ds-*) tokens;
   !important only where the source has it.

   NOTE 1 — pager buttons need NO mirror. js/datatables.js:80-88 replaces
   DataTable.ext.classes.paging, so under DT2 every pager button is rendered with
   class "paginate-button" (hyphen) + egk-btn variants, exactly as Frigo's DT1
   remap does. orbit-skin §13 (.ds-skin .paginate-button) therefore applies as-is;
   the §4 .paginate_button (underscore) rules were dormant in Frigo too.

   NOTE 2 — specificity. The DT2 stylesheet qualifies its rules with
   `div.dt-container` (e.g. `div.dt-container .dt-search input { margin-left:3px }`),
   one step above the DT1 stylesheet orbit-skin competed with. The mirrors carry
   the same `div.` qualifier so their plain (non-!important) declarations still
   win; otherwise they are the orbit-skin selectors verbatim.

   NOT mirrored on purpose:
   - dashboard-orbit.css `.ds-dash …dataTables_wrapper/_empty/_info` rules
     (lines 114-222, 643-644, 678, 701-702): dashboard-only, inert until the
     dashboard gets .ds-dash in Phase 2.1 — mirrored there, where they can be
     verified widget by widget.
   - .dt-processing: orbit-skin has no processing rule and datatables.js sets
     processing:false by default.
   - .dt-orderable-* / .dt-ordering-*: orbit-skin has no `sorting` rule; the DT2
     stylesheet's own ▲▼ indicators inherit the §4 header ink.
   - .dt-layout-row / .dt-layout-cell: only rendered by the DT2 `layout` option;
     every Dega init goes through the legacy `sDom` string in datatables.js:18,
     which wraps the controls in .view-filter / .view-pager instead. */

/* orbit-skin §4 line 228 */
.ds-skin .dt-container { padding: 0; font-size: var(--ds-text-body-sm); color: var(--ds-text-2); }
/* orbit-skin §4 lines 229-235 */
.ds-skin div.dt-container .dt-length,
.ds-skin div.dt-container .dt-search,
.ds-skin div.dt-container .dt-info,
.ds-skin div.dt-container .dt-paging {
  margin-bottom: var(--ds-space-3);
  color: var(--ds-text-2);
}
/* orbit-skin §4 lines 236-246 */
.ds-skin div.dt-container .dt-search input,
.ds-skin div.dt-container .dt-length select {
  background: var(--ds-surface) !important;
  border: none !important;
  border-radius: var(--ds-radius-pill) !important;
  box-shadow: var(--ds-shadow-neu-sm) !important;
  padding: var(--ds-space-1-5) var(--ds-space-4) !important;
  margin-left: var(--ds-space-2);
  color: var(--ds-text-1) !important;
  outline: none;
}
/* orbit-skin §4 lines 247-250 */
.ds-skin div.dt-container .dt-length select {
  border-radius: var(--ds-radius-md) !important;
  padding-right: var(--ds-space-5) !important;
}

/* orbit-skin §12 lines 812-818 — the raised data-grid card */
.ds-skin .dt-container {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-neu-sm);
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-2);
  margin-top: 0;
}

/* orbit-skin §13 lines 824-830 — pager row. DT2 puts the buttons inside a
   child <nav>, so the flex row has to be the <nav>; .dt-paging itself only
   centres that <nav>. */
.ds-skin .dt-paging,
.ds-skin .dt-paging > nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-1);
}
/* orbit-skin §13 line 871 */
.ds-skin .view-pager .dt-info { color: var(--ds-text-3); font-size: var(--ds-text-caption); }

/* scrollX split tables (datatables.js:5 defaults scrollX:true, so DT2 renders
   .dt-scroll-head with a cloned header table and .dt-scroll-body with the data
   table whose own thead is meant to be invisible). Live-verified 2026-09-22 on
   OdemeTipleri/Index; supervisor decision: fix here, not per page. */
/* orbit-skin §4 line 181 gives every table.dataTable `margin: 8px 0`; on the two
   stacked tables that became a 16px gap between the header and the first row. */
.ds-skin .dt-scroll-head table.dataTable { margin-bottom: 0; }
.ds-skin .dt-scroll-body table.dataTable { margin-top: 0; }
/* The body table's hidden header row: DT2's `div.dt-scroll-body thead tr th
   { height:0; padding:0; border-bottom-width:0 !important }` (0,2,3) ties
   orbit-skin §4 lines 184-196 `.ds-skin table.dataTable thead th` (0,2,3), and
   orbit-skin loads later, so its padding/border !important won → a 17px ghost
   row with a second hairline. Re-assert the collapse with a longer selector. */
.ds-skin .dt-scroll-body table.dataTable thead th {
  padding: 0 !important;
  border-bottom: 0 !important;
}
/* DT2 `div.dt-container.dt-empty-footer .dt-scroll-body { border-bottom: 1px
   solid rgba(0,0,0,.3) }` drew a dark line under the last row; the §4 hairline
   on the last td is the only rule that should close the grid. DT2's selector is
   (0,3,1); the `div.` qualifier ties it so this later rule wins. */
.ds-skin div.dt-container .dt-scroll-body { border-bottom: 0; }
/* §4 uppercase + letter-spacing makes cloned scrollX headers wider than the DT2-computed
   body columns; wrapping restores header width = body width (6B2-Q1, #OnayTablosu). */
.ds-skin .dt-scroll-head table.dataTable thead th,
.ds-skin .dt-scroll-head table.dataTable thead th * { white-space: normal; }

/* orbit-skin lines 3002-3007 — detail-document modals flatten the card */
.orbit-modal .dt-container {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Dark mode: the DataTables toolbar buttons ("Aktar" / "Görünüm") and their open menu (TASK 10R5, dark sweep #8).
   customize.css 6012–6018 `[data-theme="dark"] a/button/div.dt-button { background: #586279 !important }` (0,2,1)
   beats orbit-skin §15's raised surface (0,2,0); 6055–6061 paint the body-level menu panel near-black and its items
   the same slate (0,3,1). The legacy declarations are !important, so only !important can win here: the buttons at
   (0,3,1), the panel at (0,2,2), the items at (0,3,2). */
[data-theme="dark"] .ds-skin a.dt-button,
[data-theme="dark"] .ds-skin button.dt-button,
[data-theme="dark"] .ds-skin div.dt-button { background: var(--ds-surface) !important; }
[data-theme="dark"] body div.dt-button-collection { background-color: var(--ds-surface) !important; }
[data-theme="dark"] body div.dt-button-collection .dt-button { background-color: transparent !important; }

/* dashboard-orbit.css dt-* mirrors (lines 114–222, 643–644, 678, 701–702)
   Substitutions: .dataTables_wrapper → .dt-container, td.dataTables_empty →
   td.dt-empty, .dataTables_info → .dt-info. Chains, !important sets and values
   are verbatim from Frigo's file (task 4A map §b4, rules M1–M15). Every mirror
   keeps the .ds-dash chain, so it lands at ≥ (0,3,0) — above DT2's own
   `div.dt-container` layout rules (0,1,1). The dashboard also aliases the
   container class page-wide (Index.cshtml, decision D4A-1), so the Frigo
   originals match there too; the mirrors keep td.dt-empty / .dt-info covered
   and keep the rules readable in DT2 terms. */

/* M1 — lines 114–121: flat table panels; the raised div.dt-container card
   (§D1 mirror of orbit-skin §12) becomes the widget surface */
.ds-dash .egk-panel:has(.dt-container),
.ds-dash .egk-panel:has(.dt-container):hover {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* M2 — line 126: equal-height grid sections */
.ds-dash .egk-panel:has(.dt-container) { display: flex; flex-direction: column; }
/* M3 — lines 127–135: flex propagated down the tab nesting chain */
.ds-dash .egk-panel:has(.dt-container) > .collapse,
.ds-dash .egk-panel:has(.dt-container) .line-slide-tab,
.ds-dash .egk-panel:has(.dt-container) .tab-content,
.ds-dash .egk-panel:has(.dt-container) .tab-pane.active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
/* M4 — lines 136–140: the container fills the pane */
.ds-dash .egk-panel:has(.dt-container) .dt-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* M5 — line 141: pager sticks to the bottom edge */
.ds-dash .egk-panel:has(.dt-container) .view-pager { margin-top: auto; }

/* M6 — lines 149–151: re-hide inactive panes that M3 forced to flex */
.ds-dash .egk-panel:has(.dt-container) .tab-content > .tab-pane:not(.active) {
  display: none;
}

/* M7 — line 177: consistent gap above every data-grid card */
.ds-dash .dt-container { margin-top: var(--ds-space-4); }

/* M8 — lines 185–190: half-width tab grids reserve one control row
   (--orbit-ctl-row is set by dashboard-orbit.css line 183) */
.ds-dash [class*="col-md-6"] .egk-panel:has(.dt-container) .tab-pane.active:has(> .dt-container),
.ds-dash [class*="col-lg-6"] .egk-panel:has(.dt-container) .tab-pane.active:has(> .dt-container) {
  display: grid;
  grid-template-rows: minmax(var(--orbit-ctl-row), max-content) minmax(0, 1fr);
  row-gap: var(--ds-space-4);
}
/* M9 — lines 192–195: filter rows drop their bottom margin, row-gap owns it */
.ds-dash [class*="col-md-6"] .egk-panel:has(.dt-container) .tab-pane.active:has(> .dt-container) > .nav-tabs,
.ds-dash [class*="col-lg-6"] .egk-panel:has(.dt-container) .tab-pane.active:has(> .dt-container) > .nav-tabs {
  margin-bottom: 0 !important;
}
/* M10 — lines 198–201: pin the data card to the 2nd track */
.ds-dash [class*="col-md-6"] .egk-panel:has(.dt-container) .tab-pane.active:has(> .dt-container) > .dt-container,
.ds-dash [class*="col-lg-6"] .egk-panel:has(.dt-container) .tab-pane.active:has(> .dt-container) > .dt-container {
  grid-row: 2;
}

/* M11 — lines 222–225: EnIyiMusteriler wrapping flex pane, the card takes its
   own full-width line under the two filters */
.ds-dash .tab-pane.active:has(> #numberOfCustomers) > .dt-container {
  flex: 1 0 100%;
  min-width: 0;
}

/* M12 — lines 643–646: chart tile shares grid row 2 with the (hidden) table */
.ds-dash [class*="col-md-6"] .egk-panel:has(.dt-container) .tab-pane.active:has(> .dt-container) > .orbit-report-chart,
.ds-dash [class*="col-lg-6"] .egk-panel:has(.dt-container) .tab-pane.active:has(> .dt-container) > .orbit-report-chart {
  grid-row: 2;
}

/* M13 — lines 678–680: empty-row padding; the full table chain out-specifies
   orbit-skin's `.ds-skin table.dataTable tbody td` (0,2,3) → this is (0,2,4) */
.ds-dash table.dataTable tbody td.dt-empty {
  padding: var(--ds-space-8) var(--ds-space-4) !important;
}
/* M14 / M15 — lines 701–702: while the table is empty, hide the info line and
   the zeroed totals footer */
.ds-dash .dt-container:has(td.dt-empty) .dt-info { display: none; }
.ds-dash .dt-container:has(td.dt-empty) tfoot { display: none; }

/* ---- dashboard widget filter rows (Dega-only controls; D4A-5, page standard S5)
   Dega keeps filter controls Frigo's widgets never had: SonTahsilatlar
   #search-input + #tip-filter, Borclular #search-input-borclular / -alacaklilar,
   EnCokSatinAlinan #numberOfProductsSelect / #numberOfGroupsSelect. Each partial
   wraps them in `<div class="dash-widget-filters">` made of .cari-ara shells
   (orbit-skin §11; the selects become DS listboxes through orbit-select.js
   enhanceFilterSelects) placed right after the period tabs. The report scripts
   are untouched — same ids, same events.

   Half-width panes (SonTahsilatlar, Borclular) reuse Frigo's own recipe for a
   second control next to the tabs — EnIyiMusteriler #numberOfCustomers,
   dashboard-orbit.css 203–225 / M11: the pane leaves the M8 two-row grid (which
   would auto-place the filters on a THIRD row, below the card — user finding U1)
   for a WRAPPING FLEX ROW, so tabs + filters share the control line and the data
   card / chart tile drop to their own full-width line. Keyed on the wrapper ids
   so an id inside :has() (1,0,0) out-specifies M8's class chain (0,7,0). */
.ds-dash .tab-pane.active:has(> #latest-collections-filters),
.ds-dash .tab-pane.active:has(> #filters-borclular),
.ds-dash .tab-pane.active:has(> #filters-alacaklilar) {
  display: flex;
  flex-direction: row;            /* override M3's flex-direction: column */
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: var(--ds-space-4) var(--ds-space-5);
}
/* the period tabs drop their bottom margin — the row gap owns the spacing (M9) */
.ds-dash .tab-pane.active:has(> #latest-collections-filters) > .nav-tabs,
.ds-dash .tab-pane.active:has(> #filters-borclular) > .nav-tabs,
.ds-dash .tab-pane.active:has(> #filters-alacaklilar) > .nav-tabs {
  margin-bottom: 0 !important;
}
/* the data card takes its own full-width line under the controls (M11) */
.ds-dash .tab-pane.active:has(> #latest-collections-filters) > .dt-container,
.ds-dash .tab-pane.active:has(> #filters-borclular) > .dt-container,
.ds-dash .tab-pane.active:has(> #filters-alacaklilar) > .dt-container {
  flex: 1 0 100%;
  min-width: 0;
}

/* EnCokSatinAlinan (full width, no M8 grid): the partial's own
   `.d-flex.justify-content-between` row holds tabs + filters + the hidden range
   table. Group them on the LEFT with the shared gap instead of space-between,
   which pushed the count select under the pane-mounted toggle (user finding U2). */
.ds-dash .d-flex:has(> .dash-widget-filters) {
  justify-content: flex-start !important;   /* customize.css 178 is !important */
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ds-space-4) var(--ds-space-5);
}
.ds-dash .d-flex:has(> .dash-widget-filters) > .nav-tabs { margin-bottom: 0 !important; }   /* as M9 */

/* the filter group: label + one or two .cari-ara shells on one line.
   Flex line breaks are decided from the items' flex-BASIS, so the shells start
   at their minimum width and grow into the space left next to the tabs; a pane
   whose tabs already fill the line (Borclular's five price pills + the toggle
   clearance) wraps the group to a second control line instead. */
.ds-dash .dash-widget-filters {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  /* basis 0 + a fixed minimum (search 180 + gap 12 + select 160): the group's
     natural content width (input intrinsic width + padding) is wider than the
     space left beside the tabs and would force the wrap; the minimum keeps it
     from shrinking under its shells (they would overflow into the toggle) */
  flex: 1 1 0;
  min-width: 352px;
}
.ds-dash .dash-widget-filters > label {
  margin: 0;
  white-space: nowrap;
  font-size: var(--ds-text-body-sm);
  font-weight: var(--ds-fw-medium);
  color: var(--ds-text-2);
}
/* the legacy .cari-ara is a 100%-wide block with a 24px bottom margin
   (customize.css 3983) — size it as a row item instead */
.ds-dash .dash-widget-filters > .cari-ara {
  width: auto;
  flex: 1 1 180px;
  min-width: 180px;
  max-width: 420px;
  margin-bottom: 0;
}
.ds-dash .dash-widget-filters > .cari-ara:has(select) {
  flex: 0 1 160px;
  min-width: 160px;
}
/* keep clear of a pane-mounted table/chart toggle pinned to the same top-right
   corner (dashboard-orbit.css 259–262 does this for a direct-child .nav-tabs) */
.ds-dash .tab-pane:has(> .orbit-report-toggle) > .dash-widget-filters,
.ds-dash .tab-pane:has(> .orbit-report-toggle) > .d-flex:has(> .dash-widget-filters) {
  margin-right: 104px;
}
/* chart mode: orbit-report-view.js apply() puts .orbit-view-hidden on the table
   element itself (survives destroy()+re-init) — the filters follow the table */
.ds-dash .tab-pane:has(table.dataTable.orbit-view-hidden) .dash-widget-filters { display: none; }

/* moved from the partials' inline <style>: these tables are initialised with
   searching:true because the Dega search box drives api.search(), so DT2's own
   search box in .view-filter is hidden */
.ds-dash #latest-collections_wrapper .dt-search,
.ds-dash #borclular_wrapper .dt-search,
.ds-dash #alacaklilar_wrapper .dt-search { display: none; }

/* ---------- D2. Legacy hazard patches ------------------------------------ */

/* Residue of the former per-page insight stylesheet, deleted in task 4B4
   (decisions D4A-3 / D4A-4). The insight
   pair (CariKacanSatis / CariRiskRadari) and the Cari Radar Listesi page are
   styled by dashboard-orbit.css since 4B4; the rules below are the only ones
   Frigo's files do NOT provide. Scopes: .ds-dash = dashboard widgets + the
   radar detail modal body; .radar-liste = Reports/CariRadarListesi page root
   (a .ds-skin page WITHOUT .ds-dash, so the .ds-dash rules never reach it). */

/* Frigo gap: dashboard-orbit.css has no rule for .kacan-veri-penceresi — the
   "which date range fed the numbers" caption under each insight tab stays a
   plain Bootstrap text-muted line there. Dega keeps the small caption (D4A-4);
   .ds-skin out-specifies Bootstrap's .text-muted colour (0,1,0). */
.ds-skin .kacan-veri-penceresi {
  margin-top: var(--ds-space-2-5);
  padding: 0 var(--ds-space-1);
  font-size: var(--ds-text-caption);
  color: var(--ds-text-3);
}

/* Frigo gap: no rule for the risk widget's chip rows (.risk-odeme-mix payment
   mix, .risk-limit-ozet limit summary); both are filled by CariRiskRadari.js
   with ds-badge chips and would otherwise render as an inline run with no gap.
   Empty rows collapse so the tab pane keeps no blank strip. */
.ds-skin .risk-odeme-mix,
.ds-skin .risk-limit-ozet {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-1-5);
  margin: 2px var(--ds-space-1) var(--ds-space-2-5);
}
.ds-skin .risk-odeme-mix:empty,
.ds-skin .risk-limit-ozet:empty { display: none; }

/* Frigo gap: dashboard-orbit.css §8 styles .orbit-empty only under .ds-dash;
   the radar list page passes the same block via language.emptyTable /
   zeroRecords and in #radar-yukleniyor, so the family is mirrored under
   .radar-liste (values as dashboard-orbit.css 681–697, DT2 td.dt-empty as
   in §D1 M13). */
.radar-liste table.dataTable tbody td.dt-empty {
  padding: var(--ds-space-8) var(--ds-space-4) !important;
}
.radar-liste .orbit-empty {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-body);
  color: var(--ds-text-3);
}
.radar-liste .orbit-empty i { font-size: 30px; opacity: 0.55; }
.radar-liste .orbit-empty b {
  font-weight: var(--ds-fw-medium);
  font-size: var(--ds-text-body-sm);
  color: var(--ds-text-2);
}
.radar-liste .orbit-empty small { font-size: var(--ds-text-caption); max-width: 420px; line-height: 1.5; }
.radar-liste .orbit-empty--good i { color: var(--ds-state-success-text); opacity: 1; }

/* Frigo gap: the sweep-in-progress radar icon does not breathe in Frigo
   (dashboard-orbit.css 906 only pads #radar-yukleniyor). Dega keeps the pulse,
   reusing ds.css's ds-pulse keyframe instead of a second definition. */
.radar-liste #radar-yukleniyor .orbit-empty i { animation: ds-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .radar-liste #radar-yukleniyor .orbit-empty i { animation: none; }
}

/* Frigo gap: the secondary line inside radar list cells (<small> under the
   cari name / amounts) has no colour rule in Frigo; keep it muted. */
.radar-liste #radarListeTable td small { color: var(--ds-text-3); }

/* Dark sweep finding #13 (TASK 10R4; also T7R4-3): pratham.css:423 `.text-muted { color: #444444 }` (0,1,0) has no
   dark rule, so muted help text stayed #444 on the dark card (KodEslestir 1.82:1). The DS muted token instead;
   (0,3,0) wins without !important. */
[data-theme="dark"] .ds-skin .text-muted { color: var(--ds-text-3); }

/* TASK 10R6: the body follows the canvas token (§D0). customize.css:43 paints the
   light body #f9fafc at (0,0,1) and customize.css:5960 the dark body a legacy blue
   plus the legacy dark pattern image at (0,1,1); neither carries an important flag.
   Each rule below has the same specificity and wins by load order (this file loads
   last). The shorthand also clears the image. dashboard-orbit.css paints html +
   body with the same token (important flag, dashboard only), so the two agree. */
body { background: var(--ds-surface-page); }
[data-theme="dark"] body { background: var(--ds-surface-page); }

/* ---------- D3. Navbar deltas -------------------------------------------- */

/* Theme toggle (decision D3): #themeToggle sits between the basket and #userIcon
   in the right-hand action cluster and takes the same 42px raised medallion as
   orbit-navbar.css §5 gives #userIcon / #basketButton. Glyph = neutral ink (a
   functional control, not an identity mark). The moon/sun glyph is swapped by
   the _Layout glue script when <html data-theme> flips. */
.orbit-nav #themeToggle {
  width: 42px;
  height: 42px;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0 !important;
  border-radius: var(--ds-radius-full) !important;
  background: var(--ds-surface) !important;
  box-shadow: var(--ds-shadow-neu-circle) !important;
  transition: var(--ds-transition-base);
}
.orbit-nav #themeToggle:hover {
  animation: none !important;
  background: var(--ds-surface) !important;
  box-shadow: var(--ds-shadow-neu-hover) !important;
  transform: var(--ds-lift-hover);
}
.orbit-nav #themeToggle i,
.orbit-nav #themeToggle svg {
  color: var(--ds-text-1) !important;
  font-size: 17px;
  margin: 0 !important;
}

/* Compact-monitor regime: orbit-navbar.css §2c lines 307-312 step #userIcon /
   #basketButton from 42 to 36px between 1366 and 1650px; the toggle follows
   with the same bounds and values (glyph 17 → 15px like #basketButton). */
@media (min-width: 1366px) and (max-width: 1649.98px) {
  .orbit-nav #themeToggle { width: 36px; height: 36px; }
  .orbit-nav #themeToggle i,
  .orbit-nav #themeToggle svg { font-size: 15px; }
}

/* Right-hand action cluster spacing. The <ul class="navbar-right d-flex"> lays
   its <li>s out as a flex row with no gap and the li have no margin, so the
   #themeToggle and #userIcon medallions touched. orbit-navbar.css §2c line 317
   separates its right-cluster items with --ds-space-2 (the currency widget's
   margin-right); the same value as a flex gap spaces every item here. */
.orbit-nav .navbar-right { gap: var(--ds-space-2); }

/* Licence badge (_Layout, TASK 8 c): unlayered customize.css:1152 `.nav.navbar-nav i` paints the clock theme-orange; inherit the badge's warning text colour instead. */
.orbit-nav .ds-badge > i { color: inherit; }

/* Dark sweep finding #2 (TASK 10R4): pratham.css:3531-3536 `.sidenav-heading { color: #444444 }` (0,1,0) has no dark
   rule, so the drawer heading "EGK B2B" (_PartialRenderSideMenu2:59) stayed #444 on the dark drawer (1.67:1). The DS
   muted token instead; (1,3,0) wins without !important. */
[data-theme="dark"] #mobile-sidebar.orbit-nav .sidenav-heading { color: var(--ds-text-3); }

/* ---------- D4. toastr skin ---------------------------------------------- */

/* toastr is LIVE in Dega (_Layout:81 css + :300 js; 47 view/js files call it) but Frigo and Core
   never load it, so orbit-skin has no toastr rules. This maps every toast onto the DS alert card the
   way orbit-skin §23b does for the swal2 toast: opaque surface + state tint, 3px state edge, 34px neu
   icon disc, title over body, one fixed width, e4 drop (it floats over content). Toasts live on
   <body>, so nothing here is under .ds-skin. Dark mode comes from the tokens alone, like §23b: the
   translucent dark --ds-state-*-bg tint sits on the opaque --ds-surface-default.
   No call site sets toastr.options → toastr defaults: #toast-container.toast-top-right, no close
   button, no progress bar (both still skinned below in case a call ever turns them on).
   Specificity vs toastr.min.css: `#toast-container > .toast` (1,1,0) beats `#toast-container>div`
   (1,0,1) and the (0,1,0) `.toast-*` colours, so no !important there. The BACKGROUND needs it:
   toastr paints its white type glyph with `#toast-container>.toast-*{background-image:…!important}`
   (1,1,0) — same weight, and this file loads later (_Layout:99). The hover rule needs (1,2,0) to beat
   `#toast-container>div:hover` (1,1,1). opacity stays WITHOUT !important: toastr fades toasts in and
   out by writing an inline opacity. */
#toast-container > .toast {
  --orbit-toast-tint: transparent;
  --orbit-toast-edge: var(--ds-ink);
  background:
    linear-gradient(var(--orbit-toast-tint), var(--orbit-toast-tint)),
    var(--ds-surface-default) !important;
  border-left: 3px solid var(--orbit-toast-edge);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-e4), inset 0 2px 1px var(--ds-neu-highlight);
  /* left = disc inset + 34px disc + the .ds-alert gap (was toastr's 50px for its glyph) */
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-3) calc(var(--ds-space-4) + 34px + var(--ds-space-3));
  width: 380px;                          /* §23b: one width = one component (toastr: 300px / 18em / 25em) */
  max-width: calc(100vw - 32px);
  color: var(--ds-text-1);
  font-family: var(--ds-font-body);
  font-size: var(--ds-text-body-sm);
  opacity: 1;                            /* toastr rests at .8 and only reaches 1 on hover */
}
#toast-container > .toast:hover {
  box-shadow: var(--ds-shadow-e4), inset 0 2px 1px var(--ds-neu-highlight);   /* toastr: 0 0 12px #000 */
  opacity: 1;
}

/* state → tint + edge (+ disc glyph colour + progress bar) via the two custom props */
#toast-container > .toast-success { --orbit-toast-tint: var(--ds-state-success-bg); --orbit-toast-edge: var(--ds-state-success-icon); }
#toast-container > .toast-error   { --orbit-toast-tint: var(--ds-state-error-bg);   --orbit-toast-edge: var(--ds-state-error-icon); }
#toast-container > .toast-warning { --orbit-toast-tint: var(--ds-state-warning-bg); --orbit-toast-edge: var(--ds-state-warning-icon); }
#toast-container > .toast-info    { --orbit-toast-tint: var(--ds-state-info-bg);    --orbit-toast-edge: var(--ds-state-info-icon); }

/* icon → the .ds-alert__icon disc (ds.css:1024) as a ::before, since toastr's own glyph is a white
   background-image (invisible on the pale tint, replaced by the background above). Font Awesome 6 Pro
   light (300) = the fa-light face every page already loads; glyphs check / xmark /
   triangle-exclamation / info (codes from the bundled all.min.css). */
#toast-container > .toast::before {
  position: absolute;
  top: 50%;
  left: var(--ds-space-4);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-neu-circle);
  color: var(--orbit-toast-edge);
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  font-style: normal;
  font-size: 14px;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
#toast-container > .toast-success::before { content: "\f00c"; }
#toast-container > .toast-error::before   { content: "\f00d"; }
#toast-container > .toast-warning::before { content: "\f071"; }
#toast-container > .toast-info::before    { content: "\f129"; }

/* text stack → .ds-alert__title / __body */
#toast-container > .toast .toast-title {
  font-weight: var(--ds-fw-semibold);    /* toastr: 700 */
  color: var(--ds-text-1);
}
#toast-container > .toast .toast-message {
  font-size: 13px;
  line-height: var(--ds-lh-normal);
  color: var(--ds-text-2);
}
#toast-container > .toast .toast-title + .toast-message { margin-top: 2px; }   /* .ds-alert__content gap */

/* close (only if a call sets closeButton) → plain quiet glyph, as §23b's close look */
#toast-container > .toast .toast-close-button {
  color: var(--ds-text-2);
  text-shadow: none;
  opacity: 1;
}
#toast-container > .toast .toast-close-button:hover,
#toast-container > .toast .toast-close-button:focus {
  color: var(--ds-text-1);
  opacity: 1;
}

/* progress (only if a call sets progressBar) → thin, state-coloured; toastr's .4 opacity kept */
#toast-container > .toast .toast-progress {
  height: 3px;
  background-color: var(--orbit-toast-edge);
}

/* ---------- D5. Stock list (Cari/StockList + AppUser/StockList) ---------- */

/* Price-range handles. orbit-skin §20 (line ~1861) resizes the handle to a 22px
   circle and re-centres it with `left:-11px` — the geometry of noUiSlider < 14,
   where each origin sits at `left:x%`. noUiSlider 15.7.1 (loaded by _Layout,
   same as Frigo) moves each origin with translate() and anchors the handle on
   the origin's RIGHT edge (`right:-17px`); with both set, `left` wins, so the
   min handle was drawn ~300px left of the track and the max handle at the
   track's START (live-measured 2026-09-23). Anchor right, centred for 22px. */
.ds-skin #stockslider .noUi-handle {
  left: auto;
  right: -11px;
}

/* "Stoktakileri Göster" is a real .ds-switch here (decision D5A-4), so §20's
   `.filtre-kontrol-karti .chkSwitch + span` text rule no longer matches. ds.css
   gives .ds-switch__label no colour, and the label inherits pratham.css
   `.form-group label { color:#414658 }` — dark grey on the dark card in dark
   mode. Same token §20 used for the old text span. */
.ds-skin .filtre-kontrol-karti .ds-switch__label { color: var(--ds-text-2); }

/* ---- product rows (ERP/ListePaged.cshtml, task 5B2) ---- */

/* Photo height bound (supervisor finding F2). orbit-skin §20-R (lines 2041–2047)
   gives the list-view photo `width:100%; height:100%; max-height:none;
   object-fit:cover`. While the row height is being computed that 100% cannot
   resolve, so the photo keeps its natural ratio: a 77×270 dowel photo drew
   150×538 and stretched its row to 538px. Frigo has the same rule (its catalogue
   has no tall photos). Cap at 140px — the legacy cap §20-R lifted
   (urun-listesi.css .urun-gorsel img) and the column's own min-height
   (customize.css .urun-row .urun-gorsel) — so the photo can never make a row
   taller than its text, price and buy columns; `contain` shows the whole product
   instead of a centre crop. The box is a white tile in BOTH themes (supervisor
   2026-09-23): the LOGO product photos have white backgrounds, so on the dark
   card the contain bands showed as a white strip around each photo. Literal #fff
   on purpose — every white ds.css token (--ds-surface-white, --ds-surface-raised,
   --ds-ink-inverse…) turns dark in dark mode; the white belongs to the photos,
   not to the theme. */
@media (min-width: 1201px) {
  .ds-skin .stockListPartialField:not(.stockListGrid) .urun-gorsel img {
    max-height: 140px;
    object-fit: contain;
    background: #fff;
  }
}

/* orbit-skin §20-R (line 1974) gives the stock code / barcode `cursor: copy` for
   Frigo's click-to-copy, whose handler lives in Frigo's Base.js (line 829, tippy +
   navigator.clipboard) — not portable as markup only, so Dega has no copy
   behaviour and the cursor must not promise one. Same selector as §20-R. */
.ds-skin .urun-row .stok-kodu { cursor: default; }

/* Cari "Stokta Var" (ListePaged `.in-stock`, not clickable — Dega hides the
   quantity and the stock-movement popup from cari accounts) takes the same box
   as the quantity badge and "Stokta Yok": urun-listesi.css `.stok-adet
   .out-of-stock` mirrors orbit-skin §20's `.stock-amount` padding + caption face
   onto the error badge; this is the same mirror for the positive state. */
.ds-skin .stok-adet .in-stock {
  justify-content: center;
  white-space: nowrap;
  padding: var(--ds-space-2) var(--ds-space-3);
  font-family: var(--ds-font-caption);
}

/* LOGO unit select in the buy line (Dega-only `select#Unit_{i}.egk-single-input`,
   upgraded to the DS listbox by orbit-select.js; finding F4). */
/* row scale, like orbit-skin's row-level table selects (lines 979–992): the qty
   well is 34px, §14's var(--orbit-control-h) field height is a form-field size */
.ds-skin .quantityContainer .ds-select-menu__trigger {
  height: 34px;
  padding: 0 var(--ds-space-3);
  font-size: 13px;
}
/* orbit-select.js:68 writes an inline min-width of ≥200px and orbit-skin line 968
   sets a 200px floor — too wide for the 240px buy column; the flex line sizes it */
.ds-skin .quantityContainer .ds-select-menu.orbit-select { min-width: 0 !important; }
/* the open listbox takes its content width (ds.css pins it to the ~107px trigger,
   so "KOLİ (27000 ADET)" wrapped onto three lines), right-aligned to the trigger
   so it grows left over the stepper instead of past the card edge */
.ds-skin .quantityContainer .ds-select-menu .ds-dropdown__menu {
  left: auto;
  right: 0;
  width: max-content;
  min-width: 100%;
}
.ds-skin .quantityContainer .ds-select-menu .ds-dropdown__item { white-space: nowrap; }
/* grid tiles and the <1201px tile layout stack the buy line (customize.css
   .quantityContainer); keep the unit select off the qty well, as orbit-skin §20
   (line 1755) does for the CTA, so the two read as separate controls */
.ds-skin .stockListGrid .quantityContainer .ds-select-menu.orbit-select { margin-top: var(--ds-space-2); }
@media (max-width: 1200px) {
  .ds-skin .quantityContainer .ds-select-menu.orbit-select { margin-top: var(--ds-space-2); }
}

/* Price column width (supervisor decision L2, 2026-09-23). urun-listesi.css
   (Frigo) sets min-width 280px, sized for Frigo's "₺" figures; Dega prints " TL",
   and its one-line price table measured 284px for "47,62 TL" and 310px for
   "57.000,00 TL" (needs a 326px column) — the flex row shrank the column to its
   min-width and clipped the right edge. ≥1600px: 300px floor, and the column
   never shrinks below its content (5-digit rows grow to 326px; only their
   divider shifts). Below 1600px the laptop block sizes it to content. */
@media (min-width: 1600px) {
  .ds-skin .stockListPartialField:not(.stockListGrid) .urun-row > .urun-fiyat {
    min-width: 300px;
    flex-shrink: 0;
  }
}

/* Laptop widths (supervisor decision L1, 2026-09-23). Frigo/Core list-view
   geometry: image 150px (orbit-skin §20-R line 2037) + stock 140px (§20 line
   1592) + price 280px (urun-listesi.css) + buy 264px (§20-R line 2056) = 834px of
   fixed columns. At a 1366px viewport the row is 867px wide, so the product-name
   column got 33px and names wrapped letter by letter (Frigo has the same
   squeeze). From 1201px (below it urun-listesi.css switches to tiles) to
   1599px: image 100px; stock column 120px that grows with a wider badge (no
   side padding; "Stokta Yok" measured 109px); price column sized to its content
   (259px typical, 307px for "57.000,00 TL"); spacing inside the price column trimmed (cell padding 1px 6px →
   1px 4px, column sides 8px → 4px; labels stay on one line); buy column 184px
   with its line wrapped — stepper, then unit select, then "Sepete Ekle", each on
   its own line. Worst row (a 310px "57.000,00 TL" table) keeps ≥150px for the
   name at 1366px. */
@media (min-width: 1201px) and (max-width: 1599px) {
  .ds-skin .stockListPartialField:not(.stockListGrid) .urun-gorsel {
    width: 100px;
    min-width: 100px;
  }
  /* one word longer than the narrowed column ("MONO.KOMPRESÖR" at 156px) breaks
     instead of being clipped; ordinary names still wrap between words */
  .ds-skin .stockListPartialField:not(.stockListGrid) .urun-row > .urun-detay { overflow-wrap: break-word; }
  .ds-skin .stockListPartialField:not(.stockListGrid) .urun-row > .stok-adet {
    flex: 0 0 auto;
    min-width: 120px;
    padding-left: 0;
    padding-right: 0;
  }
  .ds-skin .stockListPartialField:not(.stockListGrid) .urun-row > .urun-fiyat {
    flex: 0 0 auto;
    min-width: 0;
    padding-left: var(--ds-space-1);
    padding-right: var(--ds-space-1);
  }
  .ds-skin .stockListPartialField:not(.stockListGrid) .urun-fiyat .fiyat-tablosu td {
    padding: 1px var(--ds-space-1) !important;
  }
  .ds-skin .stockListPartialField:not(.stockListGrid) .urun-row > .sepete-ekle {
    width: 184px;
    min-width: 184px;
    padding: var(--ds-space-2);
  }
  .ds-skin .stockListPartialField:not(.stockListGrid) .quantityContainer {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--ds-space-2);
  }
  .ds-skin .stockListPartialField:not(.stockListGrid) .quantityContainer .ds-select-menu.orbit-select,
  .ds-skin .stockListPartialField:not(.stockListGrid) .quantityContainer #sepet-butonu {
    flex: 1 1 100%;
  }
}
/* the product card and its columns clip overflow (urun-listesi.css .urun-row,
   .urun-row > div[class^="urun-col"]) — lift the clip while a unit menu is open
   so the listbox is not cut off at the card edge */
.ds-skin .urun-row:has(.orbit-select.is-open),
.ds-skin .urun-row:has(.orbit-select.is-open) > .sepete-ekle { overflow: visible; }
/* list view: orbit-skin §20-R (lines 2060–2108) lays the buy line out as ONE
   nowrap flex line; with a unit select it wraps into (−)[qty](+)[unit] and a
   full-width "Sepete Ekle" line below */
@media (min-width: 1201px) {
  .ds-skin .stockListPartialField:not(.stockListGrid) .quantityContainer:has(.urun-birim-select) {
    flex-wrap: wrap;
    row-gap: var(--ds-space-2);
  }
  .ds-skin .stockListPartialField:not(.stockListGrid) .quantityContainer .ds-select-menu.orbit-select { flex: 1 1 0; }
  .ds-skin .stockListPartialField:not(.stockListGrid) .quantityContainer:has(.urun-birim-select) #sepet-butonu { flex-basis: 100%; }
}

/* PagedList.Mvc pager (decision D5A-6: Dega keeps the server pager — Frigo's JS
   pager needs model fields Dega does not have). PagedList 4.5 renders
   div.pagination-container > ul.pagination > li(.active|.disabled|
   .PagedList-ellipses|.PagedList-skipTo*) > a inside ListePaged's div.pagedList.
   orbit-skin has no rule for it; these mirror §20's custom pager (lines
   1718–1740: .pagination-button / .pagination-number) with the same values.
   Specificity: customize.css (lines 3519–3651) styles `.pagination > li > a`
   (0,1,2) and paints hover/focus AND the active page with the full accent
   (`!important`); the .ds-skin .pagedList chain is (0,4,2)+ and !important where
   customize.css uses it, so every state here out-ranks it. */
.ds-skin .pagedList .pagination > li > a,
.ds-skin .pagedList .pagination > li > span {
  background: var(--ds-surface) !important;
  border: none !important;
  box-shadow: var(--ds-shadow-neu-sm) !important;
  color: var(--ds-text-2) !important;
  border-radius: var(--ds-radius-full) !important;
  transition: var(--ds-transition-base);
}
.ds-skin .pagedList .pagination > li > a:hover,
.ds-skin .pagedList .pagination > li > a:focus,
.ds-skin .pagedList .pagination > li > span:hover,
.ds-skin .pagedList .pagination > li > span:focus {
  background: var(--ds-surface) !important;
  color: var(--ds-text-1) !important;
  box-shadow: var(--ds-shadow-neu-hover) !important;
  transform: var(--ds-lift-hover);
}
/* current page — §20 `.pagination-number.active`: accent fill, --ds-accent-fg
   text (= white for this tenant, §D0 / page standard S2) */
.ds-skin .pagedList .pagination > .active > a,
.ds-skin .pagedList .pagination > .active > a:hover,
.ds-skin .pagedList .pagination > .active > a:focus,
.ds-skin .pagedList .pagination > .active > span,
.ds-skin .pagedList .pagination > .active > span:hover,
.ds-skin .pagedList .pagination > .active > span:focus {
  background: var(--ds-accent) !important;
  color: var(--ds-accent-fg) !important;
  box-shadow: var(--ds-shadow-dark-button) !important;
  transform: none;
}
/* ellipsis and disabled skip links are not buttons: flat, muted, no lift */
.ds-skin .pagedList .pagination > .disabled > a,
.ds-skin .pagedList .pagination > .disabled > a:hover,
.ds-skin .pagedList .pagination > .disabled > a:focus,
.ds-skin .pagedList .pagination > .PagedList-ellipses > a {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ds-text-3) !important;
  cursor: default;
  transform: none;
}

/* Detail modal, tab 1 "Stok Durumu" depo ledger (ERP/StockDetailPartial, decision
   5B3-Q1). orbit-skin §29 (lines 3887–3925) styles `.orbit-modal #tab-1 .dataTable`,
   but on this LOGO tenant the ledger HTML comes from the database
   (SP_EGK_STOK_DETAY_GETIR_LOGO → STOK_BAKIYE_DETAY) as `<table class="table"
   style="width:auto">` with no <thead>, so none of §29's ledger rules match.
   These mirror §29 with the same values (font sizes, letter-spacing and the
   Font Awesome glyph are §29's own literals). As in Frigo, orbit-skin §4's
   `.ds-skin table.table tbody td` !important padding/border still win over the
   td padding and last-row border here. */
.orbit-modal #tab-1 > table.table {
  width: 100%;
  max-width: 680px;
  border-collapse: collapse;
}
.orbit-modal #tab-1 > table.table th {
  padding: var(--ds-space-2) var(--ds-space-3);
  font-size: 11px;
  font-weight: var(--ds-fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--ds-text-3);
  border-bottom: var(--ds-bw-hairline) solid var(--ds-border-hairline);
}
.orbit-modal #tab-1 > table.table td {
  padding: var(--ds-space-3);
  font-size: 14px;
  color: var(--ds-text-2);
  border-bottom: var(--ds-bw-hairline) solid var(--ds-border-hairline);
}
.orbit-modal #tab-1 > table.table tbody tr:last-child td { border-bottom: none; }
.orbit-modal #tab-1 > table.table td:first-child::before {
  content: "\f494";                          /* fa-warehouse */
  font-family: "Font Awesome 6 Pro";
  font-weight: 300;
  margin-right: var(--ds-space-2);
  font-size: 13px;
  color: var(--theme-color-ink, var(--theme-color));
}
.orbit-modal #tab-1 > table.table th:last-child,
.orbit-modal #tab-1 > table.table td:last-child { text-align: right; }
.orbit-modal #tab-1 > table.table td:last-child {
  font-family: var(--ds-font-caption);
  font-size: 15px;
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-1);
  font-variant-numeric: tabular-nums;
}

/* Stock-list account ribbon (ERP/CariInfoYatay), closed cards: smaller headline
   figure on ONE line (user decision 5B3-f, 2026-09-23). Measured on the cari login
   at 2560 (3 cards, 277px card, 245px header): pill 144 + gap 8 + "298.929,57"
   91.4 @16px + gap 8 + chevron 12.3 = 263.7px → the header wrapped (card 83px).
   Headline 13px (~74px), pill side padding 16 → 12px and gap 8 → 6px bring it to
   ~235px → one line, card 61px. flex-wrap stays as the fallback: on 4-card rows
   (admin) a 6-digit figure may still wrap (accepted by the user). Scoped to the
   stock-list host `.CariBilgileriYatay > .cari-info-yatay` so the dashboard ribbon
   (root `.cari-info-yatay.CariBilgileriYatay`, dashboard-orbit.css) is untouched. */
.ds-skin .CariBilgileriYatay > .cari-info-yatay .egk-content-header {
  gap: var(--ds-space-1-5);
  white-space: nowrap;
}
.ds-skin .CariBilgileriYatay > .cari-info-yatay .egk-content-title {
  padding-left: var(--ds-space-3);
  padding-right: var(--ds-space-3);
}
.ds-skin .CariBilgileriYatay > .cari-info-yatay .cari-stat-headline {
  font-size: 13px;
  font-weight: var(--ds-fw-semibold);
  min-width: 0;
}

/* ---------- D6. Basket page (Cari/ShoppingBasket + AppUser/ShoppingBasket) ---- */
/* Both views host ERP/ShoppingBasketPartial in #ShoppingBasketArea.ds-skin
   (decision D6A-1); orbit-skin §21 carries the basket widgets. These rules are the
   Dega side: Frigo's inline "Orbit adapters" (decision D6A-4) plus what Dega's own
   choices need (DS-enhanced selects D6A-3, plain table D6A-6, empty card D6A-5). */

/* Order form → two columns (Frigo ShoppingBasketPartial.cshtml 117–133). §21 sets
   the form to display:block to escape §8's single-row flex, which stacks the
   half-width .egk-form-input fields in one narrow column. A wrapping flex row
   restores the pairs; below 746px customize.css takes .egk-form-input to 100%, so
   it falls back to one column on phones. row-gap 0: flex re-activates
   .form-egk-form-label's 32px row-gap on top of §21's 16px field margin. */
.ds-skin form.OrderForm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 0;
}

/* Açıklama holds ONE short value (maxlength 51) → match the 46px controls instead
   of §25's taller textarea with a resize grip (Frigo 135–145; !important to beat
   §25's `height: auto !important`). Frigo's #aciklama2/#aciklama3 corner rules are
   not ported — Dega has no Teslim Adresi field. */
.ds-skin form.OrderForm textarea.form-control {
  height: var(--orbit-control-h) !important;
  min-height: var(--orbit-control-h) !important;
  padding-top: var(--ds-space-3) !important;
  padding-bottom: var(--ds-space-3) !important;
  resize: none;
}

/* Medallions on the DS-enhanced selects (D6A-3). §25 hides EVERY direct <i> of a
   field that holds a .ds-select-menu (orbit-skin 3179, (0,4,1) !important) to drop
   the legacy arrow — the §21 medallion rule has the same weight but comes earlier
   (2325), so the medallion vanished too. Frigo never met this: its basket selects
   stay native. Restore only the .egk-field-icon; the trailing arrow stays hidden. */
.ds-skin .OrderForm .egk-form-input:has(.ds-select-menu.orbit-select) > i.egk-field-icon {
  display: inline-flex !important;
}

/* The order-form card (.egk-panel) clips its overflow, so an open DS listbox (absolute,
   up to 320px) was cut off at the card's bottom edge — Ödeme Yöntemi showed 5 of 9
   choices (live, 2026-09-23). Let the card overflow only while a listbox is open
   (same pattern as §D5's .urun-row rule). */
#ShoppingBasketArea.ds-skin .egk-panel:has(.orbit-select.is-open) { overflow: visible; }

/* orbit-select.js ignores `disabled`; the partial's script disables the DS trigger
   of a disabled native select (#depo). Look = ds.css `.ds-select:disabled`
   (ds.css 1134). */
#ShoppingBasketArea.ds-skin .ds-select-menu__trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* #tableBasket stays a plain table (D6A-6): no DataTables wrapper, so the §12 grid
   card never appears and the rows would sit on the bare canvas (§8 makes
   .egk-content transparent). The partial wraps the table in .basket-table-card,
   which takes §12's surface values. overflow-x replaces the dropped
   .egk-content.table-responsive: at 1366 the cari table needs 1357px in a 1164px
   card (stepper cell 194px, nowrap İskonto headers), which gave the whole page a
   horizontal scrollbar (live, 2026-09-23). */
.ds-skin .basket-table-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-neu-sm);
  padding: var(--ds-space-3) var(--ds-space-4) var(--ds-space-2);
  overflow-x: auto;
}

/* Empty basket → text-only card (D6A-5). §21 gives .no-product its neu surface;
   this is the layout Frigo wrote inline (flex column, 24px padding/margin), full
   width inside the .row host. */
#ShoppingBasketArea.ds-skin > .no-product {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: var(--ds-space-6) var(--ds-space-4);
  padding: var(--ds-space-8) var(--ds-space-4);
}
#ShoppingBasketArea.ds-skin > .no-product h4 {
  margin: 0;
  font-family: var(--ds-font-body);
  font-weight: var(--ds-fw-medium);
  color: var(--ds-text-2);
}

/* ---- SepetKenarda flyout (6B3) — Core deleted these legacy customize.css rules when
        it adopted §30; Dega still has them, so each one is neutralized here. ---- */

/* customize:2124 `#tabSepetim .kenarSepetElemani` (id selector) beats §30's row
   padding/radius and adds margins; restore the §30 row values. */
.orbit-flyout #tabSepetim .kenarSepetElemani {
  margin: 0;
  padding: var(--ds-space-2-5);
  border-radius: var(--ds-radius-md);
  width: auto;
}
/* customize:2124 border (1px transparent, hides §30's row divider) and customize:2096
   hover border (!important grey box): drop both, then restore §30's hairline divider. */
.orbit-flyout #tabSepetim .kenarSepetElemani,
.orbit-flyout #tabSepetim .kenarSepetElemani:hover {
  border: 0 !important;
}
.orbit-flyout #tabSepetim .kenarSepetElemani + .kenarSepetElemani,
.orbit-flyout #tabSepetim .kenarSepetElemani + .kenarSepetElemani:hover {
  border-top: var(--ds-bw-hairline) solid var(--ds-border-hairline) !important;
}

/* customize:2137 pins the qty badge absolute bottom-right; put it back in the
   .ksi-foot flow (badge left, price right, as in Core). */
.orbit-flyout .kenar-sepet-miktar { position: static; }

/* customize:2213 (16px/500 on the Toplam row) and customize:2221 (0 6px padding on
   every span inside it: label, amount, #kenarToplamTutar, #kenarToplamParaBirimi). */
.orbit-flyout .basketSubTotal {
  font-size: inherit;
  font-weight: inherit;
}
.orbit-flyout .basketSubTotal span { padding: 0; }

/* customize:6175 dark-theme `#sepet-kenarda {border: 1px solid #3a4056 !important}`;
   §30's e4 shadow is the only edge. */
[data-theme="dark"] #sepet-kenarda.orbit-flyout { border: 0 !important; }

/* Shared §30 gap (orbit-skin:4265): --ds-space-7 does not exist, so the empty
   message's padding computed to 0. Deviation from Core (Core shows the same gap). */
.orbit-flyout .basket-empty { padding: var(--ds-space-6) var(--ds-space-4); }

/* Shared §3 gap: `.ds-skin .nav-tabs {width: fit-content}` makes §30's header hairline
   hug the tab (123px of 375). Deviation from Core (Core shows the same short line). */
.orbit-flyout .line-slide-tab .nav-tabs { width: 100%; }

/* This view's window-resize handler (and btnSepetimClick) set an inline height
   ($(window).height() - 270) on the list, so a short basket showed ~700px of blank
   space above the footer. Keep §30's content height + 62vh cap; the JS is untouched. */
.orbit-flyout #kenarSepetElemanlari { height: auto !important; }

/* customize:4251 (top 73px) and customize:4265 (sticky top 51px !important) were set for
   the old navbar; the Orbit fixed navbar is 80px tall, so the flyout header slid under it.
   Both states sit at navbar height + 4px. */
#sepet-kenarda.orbit-flyout { top: 84px; }
.sepet-sticked#sepet-kenarda.orbit-flyout { top: 84px !important; }

/* customize:5973 `[data-theme="dark"] a:not(.egk-btn):not(.paginate-button.current)` (0,4,1)
   paints the product name grey-blue in dark, also on hover. Same weight here (the `a` is
   needed for it) + later file = these win; colours are §30's name and name-hover values. */
[data-theme="dark"] .orbit-flyout a.sepet-kenar-stokadi:not(:hover) { color: var(--ds-text-1); }
[data-theme="dark"] .orbit-flyout a.sepet-kenar-stokadi:hover { color: var(--theme-color-ink, var(--theme-color)); }

/* ---------- D7. Cari ledger pages (CariHareketler/Index + Aging) ---------------- */

/* Moved from the views' inline <style>: these tables are initialised with searching:true
   because the page's own .cari-ara box drives api.search(), so DT2's own search box in
   .view-filter (tenant sDom `f`, datatables.js:18) is hidden. Index's old rule used the
   DataTables 1 id #chTable_filter and hid nothing; Aging's was a page-wide .dt-search. */
.ds-skin #chTable_wrapper .dt-search,
.ds-skin #AcikFaturalar_wrapper .dt-search,
.ds-skin #KapaliFaturalar_wrapper .dt-search { display: none; }

/* Order balance (Cari + AppUser OrderBalance, TASK 7B4): same reason — searching:true so the
   header-row .cari-ara box (#SiparisBakiyeFilter) can call dtSiparisBakiye.search(). Replaces the
   partial's page-wide inline `.dt-search { display:none }`, which hid every DT2 search box on the page. */
.ds-skin #SiparisBakiye_wrapper .dt-search { display: none; }

/* Stock movements modal (ERP/GetStockMovements in #ajax-modal, TASK 7B5): the partial's old inline
   rule set EVERY .modal-dialog to width:auto / max-width:80% and stayed in the DOM, so it leaked into
   later modals. Keep that width for THIS content only (9 columns, paging off) instead of the 900px
   .modal-lg (egk-modal.css:113-117). #ajax-modal also hosts CAUIndex, _CategoryTemplates and VirtualPay
   content, so the rule is scoped with :has() like §29's stock detail rule (orbit-skin.css:3669). */
#ajax-modal.orbit-modal:has(#stock-movements) .modal-dialog { width: auto; max-width: 80%; }

/* ---------- D8. Phase 6 admin CRUD lists ---------- */

/* Moved from OdemeTipleri/Index.cshtml's inline style block (P6-1, TASK 6A1) and rescoped from
   #paymentTypesTable_wrapper / .ds-skin to `.ds-skin .crud-list`: an admin list page opts in by
   adding `crud-list` to its .egk-content div. */
/* the .cari-ara box above the table drives the search; hide DataTables' built-in filter
   (DataTables 2 renders it as .dt-search inside <tableId>_wrapper) */
.ds-skin .crud-list .dt-search { display: none; }
/* pager row: info left, medallions centred, length select right */
.ds-skin .crud-list .view-pager .text-center { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--ds-space-3); }
/* was margin:0 at (0,3,0) losing margin-bottom to §D1 (lines 113-119); rewritten so the computed result stays identical */
.ds-skin .crud-list .view-pager .dt-info   { justify-self: start; margin: 0 0 var(--ds-space-3); padding: 0; }
.ds-skin .crud-list .view-pager .dt-paging { justify-self: center; }
.ds-skin .crud-list .view-pager .dt-length { justify-self: end; margin: 0 0 var(--ds-space-3); }
@media (max-width: 768px) {
  .ds-skin .crud-list .view-pager .text-center { grid-template-columns: 1fr; justify-items: center; row-gap: var(--ds-space-2); }
  .ds-skin .crud-list .view-pager .dt-info, .ds-skin .crud-list .view-pager .dt-length { justify-self: center; }
}

/* Full-page CRUD forms (StockTag TgCreate/TgEdit in TASK 6A1; the 6A3/6A4 full pages reuse it): the page
   opts in with `crud-form` on its .egk-content div. The field medallion block of orbit-skin.css:3236-3267
   is scoped to .orbit-modal.ds-skin (modals only); on a page, orbit-skin.css:3198 (0,3,2) hides every <i>
   beside a text input with display:none !important. Mirrored verbatim here; (0,4,1) beats 3198. */
.ds-skin .crud-form .egk-form-input > i.egk-field-icon {
  position: absolute;
  left: var(--ds-space-2);
  right: auto !important;
  top: auto !important;
  bottom: 8px !important;            /* (46 − 30)/2 → 30px medallion centred in the 46px field (--orbit-control-h) */
  width: 30px;
  height: 30px;
  display: inline-flex !important;   /* defeat FA's unlayered reset AND the §25 display:none hide */
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-neu-circle);   /* raised medallion — matches every other disc in the app */
  color: var(--theme-color-ink, var(--theme-color)) !important;   /* brand-ink glyph, like the caption mark */
  font-size: 13px !important;
  line-height: 1;
  transform: none !important;
  pointer-events: none;
  z-index: 1;
  transition: var(--ds-transition-base);
}
.ds-skin .crud-form .egk-form-input:has(> i.egk-field-icon) input,
.ds-skin .crud-form .egk-form-input:has(> i.egk-field-icon) select,
.ds-skin .crud-form .egk-form-input:has(> i.egk-field-icon) .ds-select-menu__trigger,
.ds-skin .crud-form .egk-form-input:has(> i.egk-field-icon) textarea { padding-left: 46px !important; }
/* a textarea is tall → seat the medallion near its TOP, not the field's vertical centre */
.ds-skin .crud-form .egk-form-input:has(> textarea) > i.egk-field-icon { top: 35px !important; bottom: auto !important; }

/* DS checkbox in MVC forms (KodEslestir/Index grid, TASK 6A1): CheckBoxFor emits a hidden twin
   after the input; ds.css:1170-1171 use `+`, so the checked state never reached the control.
   Same `~` re-expression as orbit-skin.css:3275-3278 does for .ds-switch. */
.ds-skin .ds-checkbox input[type="checkbox"]:checked ~ .ds-checkbox__control { background: var(--ds-ink); box-shadow: var(--ds-shadow-dark-button); }
.ds-skin .ds-checkbox input[type="checkbox"]:checked ~ .ds-checkbox__control::after { transform: rotate(45deg) scale(1); }
.ds-skin .ds-checkbox input[type="checkbox"]:focus-visible ~ .ds-checkbox__control { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

/* Show/hide wrappers that hold SEVERAL fields on a crud-form page (TASK 6A2: StockPermission/Create
   #cari; StockDiscounts/Create #stok-grup-kods, #iskonto, #zam). On a page .form-egk-form-label is a
   wrapping flex row with two fields per line; a wrapper div would be ONE shrink-to-fit flex item, so
   its fields lose the grid. `contents` lets its fields join the parent row. The page scripts toggle the
   wrappers by id with jQuery .show()/.hide(): 3.7.1's showHide clears the inline `none` and forces
   `block` only when the COMPUTED display is `none` (isHiddenWithinTree), so `contents` survives. */
.ds-skin .crud-form .crud-field-group { display: contents; }

/* StockDiscounts/Index (TASK 6A2): moved from the view's page-wide inline `th` rule. The headers stay
   on one line, and the pointer marks them as clickable — a header click hides that column (the page's
   column chooser); the table is plain, no DataTable (D6A2-1). */
.ds-skin #stockDiscountTable th { white-space: nowrap; cursor: pointer; }

/* A .cari-ara whose disc is a real submit button (StockDiscounts/Index StockSearch filters, TASK 6A2):
   orbit-skin.css:722 makes every .btn-ikon decorative (pointer-events:none). Only submit discs become
   clickable here; every other btn-ikon stays decorative. */
.ds-skin .cari-ara .btn-ikon[type="submit"] { pointer-events: auto; cursor: pointer; }

/* Details / Delete pages (TASK 6A3: Files + DashboardCrud): the record is a <dl> of label/value pairs
   (Bootstrap's dl-horizontal dropped). Grid + dt + dd declarations copied from the modal detail list
   orbit-skin.css:3038-3063 (.orbit-modal .ds-doc__meta — modal-only); its modal flex-item bits are left out. */
.ds-skin .crud-form dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ds-space-1-5) var(--ds-space-4);
  align-content: start;
  margin: 0;
}
.ds-skin .crud-form dt {
  margin: 0;
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-fw-semibold);
  letter-spacing: var(--ds-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ds-text-3);
  line-height: var(--ds-lh-normal);
}
.ds-skin .crud-form dd {
  margin: 0;
  font-size: var(--ds-text-body-sm);
  color: var(--ds-text-1);
  line-height: var(--ds-lh-normal);
  overflow-wrap: anywhere;
}

/* PaymentDefinitions/VirtualPay (TASK 6B1): moved from the page's inline style block (its other rules were
   replaced by the skin and deleted). The bank / POS accordion buttons sit centred in their card headers;
   12px = --ds-space-3. Page opt-in class `virtual-pay`. */
.ds-skin .virtual-pay .card-header h2 { text-align: center; margin: var(--ds-space-3); }

/* ExternalGroup/EgCreate (TASK 6B2), page opt-in class `external-group`.
   Forced: orbit-skin 284 gives every .form-control height:auto (0,2,0), which beats external-group.css's
   .select-list height (0,1,0) — the stock / cari pick lists (ul.form-control) would grow with every item
   instead of scrolling. */
.ds-skin .external-group .select-list { height: 200px; }
/* Moved from the page's inline style block: the group image preview keeps its size limit (the skin sizes
   no images). */
.ds-skin .external-group #preview-img { max-height: 250px; max-width: 620px; display: block; }

/* DuyuruReklam/Create (TASK 6B3), page opt-in class `announcement`: moved from the page's inline style block. Same
   geometry; the fixed light colours (border #ddd, background #f8f9fa, radius 6px) became DS tokens so the empty
   preview box follows dark mode. */
.ds-skin .announcement #preview-img {
  height: 300px;
  width: 100%;
  display: block;
  object-fit: contain;
  border: 1px solid var(--ds-border-hairline);
  border-radius: var(--ds-radius-xs);
  background-color: var(--ds-surface-sunken);
}

/* Account/UserProfileSettings (TASK 6B3): its BeginForm call stays byte-identical, so the form keeps the legacy class
   `col-xs-12`, which customize.css turns into float:left + 15px side padding — the form would leave the flow and its
   fields would sit 15px in from the page header. `form-horizontal` only styles children the page no longer has. */
.ds-skin .crud-form #UserSettingsForm { float: none; padding-left: 0; padding-right: 0; }

/* PaymentHistory/Index (TASK 7R3), page opt-in class `payment-history`: the notes column (Açıklama) — one line cut
   with an ellipsis, a "-" when empty, the full text in a dark bubble on hover. Moved from the page's inline style block
   with the same values; the scoped selectors out-rank the old unscoped ones, so the !important flags were dropped. The
   bubble stays dark in both themes on purpose. */
.ds-skin .payment-history .notes-cell {
  max-width: 100px;
  position: relative;
}
.ds-skin .payment-history .notes-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: help;
  font-size: 11px;
  line-height: 1.2;
}
.ds-skin .payment-history .notes-text:empty:before {
  content: "-";
  color: #999;
  font-style: italic;
}
.ds-skin .payment-history .notes-tooltip {
  visibility: hidden;
  background-color: #333;
  color: white;
  text-align: left;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1000;
  bottom: 125%;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  font-size: 11px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: normal;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ds-skin .payment-history .notes-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.ds-skin .payment-history .notes-cell:hover .notes-tooltip {
  visibility: visible;
}
/* Cari Adı column: long company names are cut to one line with an ellipsis so the amount, installment and notes
   columns stay on screen; the full name shows in the browser tooltip (title attribute). */
.ds-skin .payment-history .cari-name {
  display: block;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* collectionmanagement/CMIndex "Tahsilat Yönetimi" (TASK 8R1), page opt-in class `collection-management` on the
   .egk-content: the Dega-relevant part of Frigo's inline CMIndex style block (Frigo CMIndex 23–156 — card grid, card
   anatomy + stat row, empty state, notes panel, pager row, action grid), same values, re-rooted under the opt-in class.
   Frigo's reminder, total-balance and loading rules are not taken: Dega has none of those features. Frigo's action grid
   holds four buttons; Dega has three, so the last one spans the row. */
.ds-skin .collection-management #cards-container > .col-md-4 { display: flex; }

.ds-skin .collection-management .collection-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: var(--ds-gap);
  font-size: var(--ds-text-body-sm);
}
.ds-skin .collection-management .collection-card .ds-card__title {
  font-size: 15px;
  line-height: var(--ds-lh-snug);
  margin-bottom: 0;
}
.ds-skin .collection-management .collection-card__code {
  font-size: var(--ds-text-caption);
  color: var(--ds-text-3);
  margin-bottom: var(--ds-space-2);
}
.ds-skin .collection-management .collection-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--ds-space-2);
  margin-bottom: var(--ds-space-3);
  font-size: var(--ds-text-caption);
  color: var(--ds-text-2);
}
.ds-skin .collection-management .collection-card__meta strong {
  font-weight: var(--ds-fw-medium);
  color: var(--ds-text-3);
}
/* the stat row pins to the card bottom (margin-top:auto), so numbers and buttons line up across a row */
.ds-skin .collection-management .collection-card__stats {
  display: flex;
  gap: var(--ds-space-6);
  margin-top: auto;
  padding-top: var(--ds-space-3);
  border-top: 1px solid var(--ds-border-hairline);
}
.ds-skin .collection-management .collection-card__stat-value {
  font-size: var(--ds-text-h5);
  font-weight: var(--ds-fw-semibold);
  line-height: var(--ds-lh-tight);
  color: var(--ds-text-1);
  font-variant-numeric: tabular-nums;
}
.ds-skin .collection-management .collection-card__stat-value.is-danger { color: var(--ds-state-error-text); }
.ds-skin .collection-management .collection-card__stat-label {
  font-size: var(--ds-text-caption);
  color: var(--ds-text-3);
  margin-top: 2px;
}

/* empty result → a guiding message instead of a blank grid */
.ds-skin .collection-management .collection-empty {
  width: 100%;
  text-align: center;
  padding: var(--ds-space-16) var(--ds-space-5);
  color: var(--ds-text-2);
}
.ds-skin .collection-management .collection-empty i {
  font-size: 28px;
  color: var(--ds-text-3);
  margin-bottom: var(--ds-space-3);
  display: block;
}
.ds-skin .collection-management .collection-empty .collection-empty__hint {
  font-size: var(--ds-text-caption);
  color: var(--ds-text-3);
  margin-top: var(--ds-space-1);
}

/* notes panel: hidden until the page script shows it (jQuery show/hide write an inline display, which beats this) */
.ds-skin .collection-management .notes-panel {
  display: none;
  margin-top: var(--ds-space-3);
}
.ds-skin .collection-management .notes-panel .panel-heading {
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-1);
  margin-bottom: var(--ds-space-2);
}
.ds-skin .collection-management .notes-table {
  width: 100%;
  margin-top: var(--ds-space-2);
}
.ds-skin .collection-management .hidden-note.d-none { display: none; }

.ds-skin .collection-management .pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-5);
  color: var(--ds-text-2);
}

/* card actions: a 2-column grid of equal buttons; the third (last) button spans the row */
.ds-skin .collection-management .card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-space-2);
  margin-top: var(--ds-space-4);
}
.ds-skin .collection-management .card-actions .egk-btn {
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}
.ds-skin .collection-management .card-actions .egk-btn:last-child { grid-column: 1 / -1; }
/* the page's static modal sits outside the opt-in wrapper (the layout hook adds .ds-skin to it on open): its note
   textarea fills the field like the e-mail input does — customize.css widens only inputs and selects in a field */
#actionModal.ds-skin .egk-form-input textarea { width: 100%; }

/* ---------- D9. Payment page (TASK 9R1) --------------------------------------- */
/* Payment/PIndex is Frigo's page (bank rows with installment chips + flip-card form); payment-orbit.css (Frigo's
   file, byte-identical) carries the anatomy. The old grid-of-tiles adapters for the chip-less page are gone with it. */

/* bank rows, dark theme: the transparent bank PNGs keep their own colours on the light row, but dark-blue marks
   (Halkbank, İşbank, Yapı Kredi) vanish on the dark row, so paint them white, as the card face does */
[data-theme="dark"] .ds-skin .pay-bank__brand .bank-logo {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

/* Settings/Index (TASK 9R2) — keyed on the page's own `.settings-single-card` (`.settings-page` belongs to §28).
   The page's form helper keeps its legacy `col-xs-12` class, which customize.css turns into
   float:left + 15px side padding — the form left the page flow (the page box shrank to its header) and the settings
   card sat 15px in from the header. The page used to contain the float with an inline overflow:auto, which would also
   stop the save dock from sticking. Same reset as #UserSettingsForm in §D8. */
.ds-skin.settings-page.settings-single-card #SetSettingsForm { float: none; padding-left: 0; padding-right: 0; }
/* the setting rows fill their grid cell: customize.css sizes every .egk-form-input at half its container
   (calc(100% / 2 - 20px)), and orbit-skin §28 sets no width — the hairline rows, their hover band and the
   label-left / switch-right switch rows stopped half-way across each column. */
.ds-skin.settings-page.settings-single-card .settings-grid .egk-form-input { width: auto; }
/* customize:5973 `[data-theme="dark"] a:not(.egk-btn):not(.paginate-button.current)` (0,4,1) also paints the settings
   tabs (they are links) #a0a6b7 in dark: grey-blue text on the accent pill, and no lighter colour on hover. These (0,6,1)
   restore §28's colours (orbit-skin 3431 / 3438 / 3444); the active rule comes last, so it wins while hovered too. */
[data-theme="dark"] .ds-skin.settings-page.settings-single-card a.settings-tab:not(:hover) { color: var(--ds-text-2); }
[data-theme="dark"] .ds-skin.settings-page.settings-single-card a.settings-tab:hover { color: var(--ds-text-1); }
[data-theme="dark"] .ds-skin.settings-page.settings-single-card a.settings-tab.is-active { color: var(--ds-accent-fg); }

/* ---------- D10. Login page (TASK 10R1) ---------------------------------------- */

/* The floating brand-logo field behind the login card (`.area > ul.circles`, 25 logos rising and fading). Moved
   VERBATIM from login.css 210–213, 220–450 and 468–481 when the skinned Login stopped linking login.css; each selector
   is re-rooted under `body.ds-skin.login-page`, the declarations and the keyframes name are unchanged. Not moved:
   login.css 215–218 (`.logo-container img`, 300px — login-orbit.css sizes the logo now), 452–466 (`main` padding and
   the unused `.mud-*` rules). */
body.ds-skin.login-page .area {
	width: 100%;
	height: 100vh;
}

body.ds-skin.login-page .circles {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

	body.ds-skin.login-page .circles img {
		max-width: 120px;
	}

	body.ds-skin.login-page .circles li {
		position: absolute;
		list-style: none;
		width: 20px;
		height: 20px;
		animation: animate 25s linear infinite;
		animation-delay: 0s;
		bottom: -150px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

		body.ds-skin.login-page .circles li:nth-child(1) {
			left: 25%;
			width: 80px;
			height: 80px;
			animation-delay: 0s;
		}


		body.ds-skin.login-page .circles li:nth-child(2) {
			left: 10%;
			width: 20px;
			height: 20px;
			animation-delay: 0;
			animation-duration: 18s;
		}

		body.ds-skin.login-page .circles li:nth-child(3) {
			left: 70%;
			width: 20px;
			height: 20px;
			animation-delay: 4s;
		}

		body.ds-skin.login-page .circles li:nth-child(4) {
			left: 40%;
			width: 60px;
			height: 60px;
			animation-delay: 0s;
			animation-duration: 18s;
		}

		body.ds-skin.login-page .circles li:nth-child(5) {
			left: 65%;
			width: 20px;
			height: 20px;
			animation-delay: 0s;
			animation-duration: 18s;
		}

		body.ds-skin.login-page .circles li:nth-child(6) {
			left: 75%;
			width: 110px;
			height: 110px;
			animation-delay: 3s;
		}

		body.ds-skin.login-page .circles li:nth-child(7) {
			left: 35%;
			width: 150px;
			height: 150px;
			animation-delay: 7s;
		}

		body.ds-skin.login-page .circles li:nth-child(8) {
			left: 50%;
			width: 25px;
			height: 25px;
			animation-delay: 15s;
			animation-duration: 45s;
		}

		body.ds-skin.login-page .circles li:nth-child(9) {
			left: 20%;
			width: 15px;
			height: 15px;
			animation-delay: 2s;
			animation-duration: 35s;
		}

		body.ds-skin.login-page .circles li:nth-child(10) {
			left: 85%;
			width: 150px;
			height: 150px;
			animation-delay: 8s;
			animation-duration: 34s;
		}

		body.ds-skin.login-page .circles li:nth-child(11) {
			left: 5%;
			width: 30px;
			height: 30px;
			animation-delay: 1s;
			animation-duration: 26s;
		}

		body.ds-skin.login-page .circles li:nth-child(12) {
			left: 90%;
			width: 50px;
			height: 50px;
			animation-delay: 6s;
			animation-duration: 25s;
		}

		body.ds-skin.login-page .circles li:nth-child(13) {
			left: 15%;
			width: 100px;
			height: 100px;
			animation-delay: 3s;
			animation-duration: 22s;
		}

		body.ds-skin.login-page .circles li:nth-child(14) {
			left: 30%;
			width: 20px;
			height: 20px;
			animation-delay: 8s;
			animation-duration: 22s;
		}

		body.ds-skin.login-page .circles li:nth-child(15) {
			left: 54%;
			width: 70px;
			height: 70px;
			animation-delay: 5s;
			animation-duration: 36s;
		}

		body.ds-skin.login-page .circles li:nth-child(16) {
			left: 60%;
			width: 40px;
			height: 40px;
			animation-delay: 2s;
			animation-duration: 30s;
		}

		body.ds-skin.login-page .circles li:nth-child(17) {
			left: 75%;
			width: 90px;
			height: 90px;
			animation-delay: 10s;
			animation-duration: 26s;
		}

		body.ds-skin.login-page .circles li:nth-child(18) {
			left: 45%;
			width: 25px;
			height: 25px;
			animation-delay: 12s;
			animation-duration: 24s;
		}

		body.ds-skin.login-page .circles li:nth-child(19) {
			left: 80%;
			width: 35px;
			height: 35px;
			animation-delay: 4s;
			animation-duration: 40s;
		}

		body.ds-skin.login-page .circles li:nth-child(20) {
			left: 95%;
			width: 60px;
			height: 60px;
			animation-delay: 0.5s;
			animation-duration: 28s;
		}

		body.ds-skin.login-page .circles li:nth-child(21) {
			left: 12%;
			width: 45px;
			height: 45px;
			animation-delay: 9s;
			animation-duration: 33s;
		}

		body.ds-skin.login-page .circles li:nth-child(22) {
			left: 68%;
			width: 55px;
			height: 55px;
			animation-delay: 6.5s;
			animation-duration: 31s;
		}

		body.ds-skin.login-page .circles li:nth-child(23) {
			left: 68%;
			width: 55px;
			height: 55px;
			animation-delay: 6.5s;
			animation-duration: 31s;
		}

		body.ds-skin.login-page .circles li:nth-child(24) {
			left: 87%;
			width: 55px;
			height: 55px;
			animation-delay: 7.5s;
			animation-duration: 29s;
		}

		body.ds-skin.login-page .circles li:nth-child(25) {
			left: 68%;
			width: 55px;
			height: 55px;
			animation-delay: 11.5s;
			animation-duration: 37s;
		}

		body.ds-skin.login-page .circles li:nth-child(1) img,
		body.ds-skin.login-page .circles li:nth-child(2) img,
		body.ds-skin.login-page .circles li:nth-child(3) img,
		body.ds-skin.login-page .circles li:nth-child(4) img,
		body.ds-skin.login-page .circles li:nth-child(5) img,
		body.ds-skin.login-page .circles li:nth-child(21) img {
			max-width: 180px;
		}

@keyframes animate {

	0% {
		transform: translateY(0);
		opacity: 1;
		border-radius: 0;
	}

	100% {
		transform: translateY(-1000px);
		opacity: 0;
		border-radius: 50%;
	}
}

/* Login logo blend (TASK 10R5, T10R1-3): firmaLogo.gif has its own white background, a white square on the light
   login card (the page is light-only); multiply drops it. NOT LIVE-TESTED — covered by the user's T10R1-4 login test. */
body.ds-skin.login-page .logo-container img { mix-blend-mode: multiply; }

/* ---------- D10. Contract approval (TASK 10R2) --------------------------------- */

/* Account/ContractApproval is a standalone page (Layout = null). Its old inline <style> (31 rules + 1 @media) is
   rewritten here on DS tokens under body.ds-skin.contract-approval; the card, the error banner and the approve button
   are ds.css components (ds-card, ds-alert--error, ds-btn--accent). Those sit in @layer ds.components, so a rule
   below (unlayered) wins wherever both set a property. The class names the page script keys on stay (.checkbox /
   .checked on #customChk, .checkbox-row, #btnIsApproved). */
body.ds-skin.contract-approval { margin: 0; }
/* ds.css gives its components border-box only under a `.ds` root (ds.css:369); this standalone page has none, and its
   old sheets never set it. Measured on a mock: the full-width "Ana Sayfaya Git" ds-btn (width 100% + 24px side padding)
   ran 48px past its column into the accent panel, and .page-wrap (min-height 100vh + padding) forced a scrollbar. */
body.ds-skin.contract-approval,
body.ds-skin.contract-approval *,
body.ds-skin.contract-approval *::before,
body.ds-skin.contract-approval *::after { box-sizing: border-box; }

body.ds-skin.contract-approval .page-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-6);
}

/* two panes — the contract on the left, the accent info panel on the right; ds-card gives surface, radius, shadow */
body.ds-skin.contract-approval .contract-card {
  width: 100%;
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 360px;
  padding: 0;
  overflow: hidden;
}
@media (max-width: 900px) {
  body.ds-skin.contract-approval .contract-card { grid-template-columns: 1fr; }
}

body.ds-skin.contract-approval .card-left { padding: var(--ds-space-8); }

/* the accent panel: the theme colour fading to 78% of itself (the view's old DarkenHex() helper, done in CSS) */
body.ds-skin.contract-approval .card-right {
  background: linear-gradient(180deg, var(--theme-color), color-mix(in srgb, var(--theme-color) 78%, #000));
  color: var(--ds-accent-fg);
  padding: var(--ds-space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--ds-space-4);
}

/* brand row: the page mark as a raised DS disc (the S4 title mark), then the small caption and the title */
body.ds-skin.contract-approval .brand {
  display: flex;
  gap: var(--ds-space-3);
  align-items: center;
  margin-bottom: var(--ds-space-4);
}
body.ds-skin.contract-approval .brand .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-neu-circle);
  color: var(--theme-color-ink, var(--theme-color));
  font-size: 20px;
}
body.ds-skin.contract-approval .brand-eyebrow {
  font-size: var(--ds-text-caption);
  color: var(--ds-text-3);
}
body.ds-skin.contract-approval .brand-title {
  margin: 0;
  font-size: var(--ds-text-body);
  font-weight: var(--ds-fw-semibold);
  color: var(--ds-text-1);
}

/* error banner spacing (its look is ds-alert--error) */
body.ds-skin.contract-approval .ds-alert { margin-bottom: var(--ds-space-3); }

/* the cari read-out: label / value pairs — the 6A3 .crud-form dl recipe (§D8) */
body.ds-skin.contract-approval .contract-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--ds-space-1-5) var(--ds-space-4);
  margin: 0 0 var(--ds-space-4);
}
body.ds-skin.contract-approval .contract-meta dt {
  margin: 0;
  font-size: var(--ds-text-caption);
  font-weight: var(--ds-fw-semibold);
  letter-spacing: var(--ds-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ds-text-3);
  line-height: var(--ds-lh-normal);
}
body.ds-skin.contract-approval .contract-meta dd {
  margin: 0;
  font-size: var(--ds-text-body-sm);
  color: var(--ds-text-1);
  line-height: var(--ds-lh-normal);
  overflow-wrap: anywhere;
}

/* the contract text: a carved, scrolling well */
body.ds-skin.contract-approval .contract-text {
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-neu-inset);
  border-radius: var(--ds-radius-md);
  padding: var(--ds-space-5);
  max-height: 54vh;
  overflow-y: auto;
  color: var(--ds-text-1);
  line-height: 1.7;
  margin-bottom: var(--ds-space-4);
}
body.ds-skin.contract-approval .contract-text h4 { margin-top: 0; }

/* the accept column and the button column (were inline styles) */
body.ds-skin.contract-approval .contract-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}
body.ds-skin.contract-approval .contract-accept { flex: 1; min-width: 240px; }
body.ds-skin.contract-approval .contract-submit { width: 320px; min-width: 220px; }

body.ds-skin.contract-approval .checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  margin: var(--ds-space-2) 0 0;
}
/* the page's own custom box (the script toggles .checked + aria-checked on #customChk), drawn as the DS checkbox
   control (ds.css .ds-checkbox__control: a raised square that turns ink with a white tick when checked) */
body.ds-skin.contract-approval .checkbox {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border-radius: var(--ds-radius-xs);
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-neu-sm);
  cursor: pointer;
  transition: var(--ds-transition-base);
}
body.ds-skin.contract-approval .checkbox input { display: none; }
body.ds-skin.contract-approval .checkbox svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translate(-50%, -50%) scale(0);
  fill: none;
  stroke: var(--ds-on-ink);
  stroke-width: 2.2;
  transition: transform var(--ds-duration-fast) var(--ds-ease-spring);
}
body.ds-skin.contract-approval .checkbox.checked {
  background: var(--ds-ink);
  box-shadow: var(--ds-shadow-dark-button);
}
body.ds-skin.contract-approval .checkbox.checked svg { transform: translate(-50%, -50%) scale(1); }
body.ds-skin.contract-approval .checkbox:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
body.ds-skin.contract-approval .checkbox-label {
  font-size: var(--ds-text-body-sm);
  color: var(--ds-text-1);
  cursor: pointer;
  user-select: none;
}

body.ds-skin.contract-approval .actions { margin-top: var(--ds-space-4); }
/* the approve button and the home link are ds-btn--accent, full width. orbit-skin's `.ds-skin a { color: inherit }`
   is unlayered, so it would beat the layered button colour on the link — the text colour is set here as well. */
body.ds-skin.contract-approval .btn-approve {
  width: 100%;
  color: var(--ds-accent-fg);
  font-weight: var(--ds-fw-semibold);
  text-decoration: none;
}

/* the accent panel's contents (text in --ds-accent-fg, inherited from .card-right) */
body.ds-skin.contract-approval .aside-title {
  font-size: var(--ds-text-body);
  font-weight: var(--ds-fw-semibold);
}
body.ds-skin.contract-approval .cari-info {
  display: flex;
  gap: var(--ds-space-2-5);
  align-items: center;
  margin-top: var(--ds-space-3);
  padding: var(--ds-space-2-5) var(--ds-space-3);
  border-radius: var(--ds-radius-sm);
  background: rgba(255, 255, 255, 0.06);
  font-weight: var(--ds-fw-semibold);
}
body.ds-skin.contract-approval .right-note {
  margin-top: var(--ds-space-4);
  font-size: 13px;
  opacity: 0.95;
}
body.ds-skin.contract-approval .right-note-text {
  margin-top: var(--ds-space-2);
  line-height: var(--ds-lh-normal);
}
body.ds-skin.contract-approval .right-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ds-space-2-5);
  font-size: var(--ds-text-body-sm);
  opacity: 0.95;
}
body.ds-skin.contract-approval .right-footer > div { opacity: 0.9; }

body.ds-skin.contract-approval .muted-note {
  margin-top: var(--ds-space-3);
  color: var(--ds-text-3);
  font-size: var(--ds-text-caption);
}