/* ServisApp brand: the colours and type of teknozilla.com.tr/servisapp, over the theme's tokens
   (servisapp-theme.css). Deep navy, a vivid orange for the main actions, green for good news. */
:root {
  --sa-navy-900: #0b1220;
  --sa-navy-800: #111a2e;
  --sa-navy-700: #18233a;
  --sa-navy-600: #22304b;
  --sa-navy-text: #c4cbe0;

  --sa-accent: #ff6a13;
  --sa-accent-600: #c2500a;
  --sa-accent-50: #fff3eb;
  --sa-accent-ring: rgba(255, 106, 19, 0.22);

  --sa-bg: #f0f2f8;
  --sa-surface: #ffffff;
  --sa-border: #e3e7f0;
  --sa-border-soft: #eef1f7;
  --sa-text: #0b1220;
  --sa-text-2: #2b3448;
  --sa-muted: #5b6478;
  --sa-link: #c2500a;

  --sa-green: #16a34a;
  --sa-green-bg: #e7f7ee;

  /* radius scale (docs/UI-STANDARD.md): controls 8 · cards and tables 12 · chips and badges a full pill */
  --sa-radius-control: 8px;   /* buttons, inputs, selects, dropdown menus, icon buttons, pagination */
  --sa-radius-card: 12px;     /* cards, list cards, filter bar, modals, the save bar */
  --sa-radius-pill: 999px;    /* chips, badges, status pills, counters */
  --sa-radius: var(--sa-radius-card);       /* the theme's names, kept */
  --sa-radius-sm: var(--sa-radius-control);
  /* control heights: every button, input and select in a bar is one of these */
  --sa-control-h: 38px;
  --sa-control-h-sm: 32px;
  --sa-control-h-touch: 42px; /* phones */
  --sa-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 4px 14px rgba(11, 18, 32, 0.05);
  --sa-shadow-lg: 0 18px 40px rgba(11, 18, 32, 0.16);

  --sa-font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sa-font-display: "Bricolage Grotesque", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body, body .form-control, body .form-select, body .btn, body table, body input, body select, body textarea { font-family: var(--sa-font); }
body h1, body h2, body h3, body .h1, body .h2, body .h3, body .h4, body .h5,
body .titleup, body .sa-form-section__title, body .sa-plan__name, body .sa-plan__price,
body .sa-stat__value, body .x_panel > .fw-bold.h5 { font-family: var(--sa-font-display); letter-spacing: -0.01em; }

/* the main action: the vivid orange, a little lift */
body .btn-primary, body .btn-success:not(.sa-keep-green) {
  background: var(--sa-accent); border-color: var(--sa-accent); color: #fff;
  box-shadow: 0 6px 16px -6px rgba(255, 106, 19, 0.55);
}
body .btn-primary:hover, body .btn-primary:focus, body .btn-success:not(.sa-keep-green):hover, body .btn-success:not(.sa-keep-green):focus {
  background: var(--sa-accent-600); border-color: var(--sa-accent-600); color: #fff;
}
body .btn-outline-primary { color: var(--sa-accent-600); border-color: var(--sa-accent); }
body .btn-outline-primary:hover { background: var(--sa-accent); border-color: var(--sa-accent); color: #fff; }
body .form-control:focus, body .form-select:focus { border-color: var(--sa-accent); box-shadow: 0 0 0 4px var(--sa-accent-ring); }
body .form-check-input:checked { background-color: var(--sa-accent); border-color: var(--sa-accent); }

/* the small orange-dot label above a section title, as on the website */
.sa-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--sa-accent-600); text-transform: none; }
.sa-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sa-accent); }

/* support sign-in ("Müşteri gözüyle gör"): a green band over everything, the page pushed below it */
.sa-impersonation-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: 48px;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: linear-gradient(90deg, #15803d, #16a34a); color: #fff;
  box-shadow: 0 6px 18px -8px rgba(21, 128, 61, 0.7); font-family: var(--sa-font);
}
.sa-impersonation-bar__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); flex: 0 0 auto; }
.sa-impersonation-bar__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; margin-right: auto; }
.sa-impersonation-bar__text b { font-size: 14px; font-weight: 600; }
.sa-impersonation-bar__text span { font-size: 12px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-impersonation-bar__end { margin: 0; flex: 0 0 auto; }
.sa-impersonation-bar__end button {
  display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 999px; padding: 7px 14px;
  background: #fff; color: #15803d; font-weight: 600; font-size: 13px; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.sa-impersonation-bar__end button:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); }
body.sa-impersonating { padding-top: 48px; }
@media (max-width: 575.98px) {
  .sa-impersonation-bar__text b { font-size: 13px; }
  .sa-impersonation-bar__text span { display: none; }
}

/* a pill that needs attention: unpaid, no end */
.sa-pill.sa-pill--alert { background: var(--sa-red-bg); color: var(--sa-red); border-color: transparent; font-weight: 600; }

/* SweetAlert dialogs (Silindi!, Emin misiniz?): the brand's buttons instead of the library's blue */
.swal-modal { border-radius: var(--sa-radius); font-family: var(--sa-font); }
.swal-title { font-family: var(--sa-font-display); color: var(--sa-text); }
.swal-text { color: var(--sa-text-2); }
.swal-button { background-color: var(--sa-accent); border-radius: var(--sa-radius-control); font-weight: 600; box-shadow: none; }
.swal-button:not([disabled]):hover { background-color: var(--sa-accent-600); }
.swal-button:focus { box-shadow: 0 0 0 4px var(--sa-accent-ring); }
.swal-button--cancel { background-color: #eef1f7; color: var(--sa-text-2); }
.swal-button--cancel:not([disabled]):hover { background-color: #e3e7f0; }
.swal-button--danger { background-color: var(--sa-red); }
.swal-button--danger:not([disabled]):hover { background-color: #912018; }
.swal-icon--success__ring { border-color: rgba(22, 163, 74, .25); }
.swal-icon--success__line { background-color: var(--sa-green); }

/* "Verileri koru": a thin amber band over the app (App\Http\Middleware\ReadOnlyFirm) */
.sa-readonly-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 16px; background: #fffaeb; color: #93370d; border-bottom: 1px solid #fedf89; font-size: 13px; font-weight: 600; position: relative; z-index: 1500; }
.sa-readonly-bar.is-alert { background: #fef0c7; }

/* sidebar: a white logo area (any uploaded logo shows on it), sharp active items, the menu toggle
   kept until the sidebar is back (the old template hid it from 915px, the sidebar comes at 992px) */
body .nav_title, body.nav-md .left_col .nav_title { background: #fff !important; border-bottom: 1px solid var(--sa-border) !important; }
body .nav_title .site_title { display: flex; align-items: center; height: 100%; }
body .nav_title .site_title img.profilepic { max-height: 44px; width: auto; object-fit: contain; background: transparent; }
.sa-firm-logo { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--sa-font-display); }
.sa-firm-logo__mark { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--sa-accent); color: var(--sa-text); font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.sa-firm-logo__name { color: var(--sa-text); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-firm-logo--dark .sa-firm-logo__name { color: #fff; }
body .main_menu .side-menu > li > a, body .main_menu .side-menu > li.active > a, body .main_menu .side-menu li a { border-radius: 2px !important; }
body .main_menu .side-menu > li.active > a, body .main_menu .side-menu > li.current-page > a { box-shadow: inset 3px 0 0 var(--sa-accent) !important; }
@media (max-width: 991.98px) {
  .sidemenu_toggle { display: inline-block !important; }
  body #menu_toggle { width: auto !important; min-width: 33px; }
}
body #sidebar-menu .side-menu > li > a, body #sidebar-menu .side-menu > li > .dropdown > a, body #sidebar-menu .dropdown-content a { border-radius: 2px !important; }
body #sidebar-menu .dropdown-content { border-radius: 4px !important; }
@media (max-width: 991.98px) {
  /* the opened menu on a phone or tablet keeps the arrows of the sections with a submenu */
  body #sidebar-menu .side-menu > li > .dropdown > a .dropdown-right-icon,
  body #sidebar-menu .side-menu > li > a .dropdown-right-icon { display: inline-block !important; margin-left: auto !important; opacity: .7; }
}
/* the old template hides the logo's spans in the narrow menu: the generated logo stays */
body .navbar.nav_title a span.sa-firm-logo { display: inline-flex !important; }
body .navbar.nav_title a span.sa-firm-logo__mark, body .navbar.nav_title a span.sa-firm-logo__name { display: inline-grid !important; }
body .navbar.nav_title a span.sa-firm-logo__name { display: inline-block !important; }
body.nav-sm .navbar.nav_title { padding: 0 16px; }
body .navbar.nav_title a span.sa-firm-logo__mark { display: inline-flex !important; align-items: center; justify-content: center; line-height: 1; padding: 0 !important; margin: 0 !important; }
body .navbar.nav_title { width: 100% !important; }

/* plates look the same everywhere: black bold text on white, the blue TR band, never the link orange */
.sa-plate, a.sa-plate, a.sa-plate:hover, a.sa-plate:focus, .sa-plate a { color: var(--sa-navy-900) !important; text-decoration: none !important; font-weight: 800; }
a.sa-plate:hover { border-color: var(--sa-accent); }
.sa-open-list__plate { color: var(--sa-navy-900) !important; font-weight: 800; }

/* active filters and period buttons: a filled orange, clearly apart from the page (was a pale tint) */
.sa-chip.is-active, a.sa-chip.is-active { background: var(--sa-accent-600) !important; border-color: var(--sa-accent-600) !important; color: #fff !important; }
.sa-chip.is-active .sa-chip__count, .sa-chip.is-active i { color: #fff !important; opacity: .9; }
.sa-segmented .btn.active, .sa-segmented--wide input:checked + span { background: var(--sa-accent-600) !important; border-color: var(--sa-accent-600) !important; color: #fff !important; }
.btn-group > .btn.active, .btn-check:checked + .btn { background: var(--sa-navy-900) !important; border-color: var(--sa-navy-900) !important; color: #fff !important; }

/* the theme's list rules are more specific than the ones above: plates in tables, chips and checkable buttons in .right_col */
html body table tbody td a.sa-plate:not(.btn):not(.dropdown-item) { color: var(--sa-navy-900) !important; font-weight: 800; }
body .right_col .sa-chip.is-active { background: var(--sa-accent-600) !important; border-color: var(--sa-accent-600) !important; color: #fff !important; }
body .right_col .btn-check:checked + .btn { background: var(--sa-navy-900) !important; border-color: var(--sa-navy-900) !important; color: #fff !important; box-shadow: none; }
/* access rights: "Varsayılan yetkilere dön" is a text button, not a 34px icon button */
#rights-defaults .btn { width: auto !important; height: auto; white-space: nowrap; padding: 6px 12px; gap: 6px; }

/* ---- panel header: the title bar and the logo block are one height; the menu button shows on a computer too ---- */
:root { --sa-head-h: 88px; }
@media (min-width: 992px) {
  body .nav_title, body.nav-md .left_col .nav_title { box-sizing: border-box; height: var(--sa-head-h) !important; min-height: var(--sa-head-h) !important; }
  /* the page-title's own 1px line is part of the 88px, as the logo block's is */
  body .page-title { box-sizing: border-box; height: var(--sa-head-h) !important; min-height: var(--sa-head-h); }
  body .page-title .nav_menu { box-sizing: border-box; height: calc(var(--sa-head-h) - 1px); min-height: calc(var(--sa-head-h) - 1px); }
}
/* the vendor sheet hides the icon above 915px: it is the open / close button of the left menu */
body #menu_toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 40px !important; height: 40px; min-width: 40px; border-radius: var(--sa-radius-control); color: var(--sa-text); cursor: pointer; transition: background-color .15s; }
body #menu_toggle:hover { background: var(--sa-bg); }
body #menu_toggle .sidemenu_toggle { display: inline-block !important; padding: 0 !important; font-size: 18px; line-height: 1; }
/* main menu text 1.5px larger */
body #sidebar-menu .side-menu > li > a, body #sidebar-menu .side-menu > li > .dropdown > a { font-size: 15px; }
body #sidebar-menu .side-menu > li > a i, body #sidebar-menu .side-menu > li > .dropdown > a i { font-size: 15px; }
@media (max-width: 991px) {
  body.nav-sm #sidebar-menu .side-menu > li > a, body.nav-sm #sidebar-menu .side-menu > li > .dropdown > a { font-size: 15px !important; }
}
/* announcements (dashboard only) sit under the title bar, on the content's left edge */
body .right_col .sa-trial-bar { margin: 0 0 16px; }

/* ---- the left menu closed on a computer: a narrow icon column (the phone's drawer is styled in servisapp-theme.css) ---- */
@media (min-width: 992px) {
  body.nav-sm .container.body .col-md-3.left_col,
  body.nav-sm .container.body .left_col .scroll-view,
  body.nav-sm .container.body .left_col { width: 72px !important; }
  body.nav-sm .container.body .top_nav { margin-left: 72px !important; }
  body.nav-sm .container.body .right_col { margin-left: 0 !important; }
  body.nav-sm #sidebar-menu, body.nav-sm #sidebar-menu .menu_section, body.nav-sm #sidebar-menu .side-menu { width: 100% !important; }
  body.nav-sm .navbar.nav_title { width: 72px !important; padding: 0 !important; justify-content: center; }
  body.nav-sm .nav_title .site_title { justify-content: center; width: 100%; }
  body.nav-sm .nav_title .sa-firm-logo { gap: 0; }
  body.nav-sm .nav_title .sa-firm-logo__name, body.nav-sm .navbar.nav_title a span.sa-firm-logo__name { display: none !important; }
  body.nav-sm .nav_title img.profilepic { max-width: 44px; max-height: 44px; object-fit: contain; }
  body.nav-sm #sidebar-menu .side-menu > li { margin: 2px 8px; width: calc(100% - 16px) !important; flex-basis: calc(100% - 16px); }
  body.nav-sm #sidebar-menu .side-menu > li > a,
  body.nav-sm #sidebar-menu .side-menu > li > .dropdown > a { justify-content: center; gap: 0; padding: 11px 0 !important; font-size: 0 !important; text-align: center; }
  body.nav-sm #sidebar-menu .side-menu > li > a i,
  body.nav-sm #sidebar-menu .side-menu > li > .dropdown > a i { width: auto; margin: 0 !important; font-size: 18px !important; }
  body.nav-sm #sidebar-menu .side-menu > li > .dropdown > a .dropdown-right-icon { display: none !important; }
  /* the submenu (an accordion when the menu is open) opens beside the narrow column, as a card, on hover or focus */
  body.nav-sm .container.body .left_col, body.nav-sm .container.body .left_col .scroll-view, body.nav-sm #sidebar-menu { overflow: visible !important; }
  body.nav-sm #sidebar-menu .side-menu > li { position: relative; }
  body.nav-sm #sidebar-menu .side-menu > li > .dropdown > .dropdown-content {
    position: absolute !important; left: calc(100% + 10px) !important; top: 0 !important; display: none !important;
    width: 220px !important; margin: 0 !important; padding: 8px !important; z-index: 2000;
    background: var(--sa-navy-800) !important; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 12px !important; box-shadow: 0 16px 40px rgba(11, 18, 32, .35) !important;
  }
  body.nav-sm #sidebar-menu .side-menu > li > .dropdown > .dropdown-content a { text-align: left !important; justify-content: flex-start; font-size: 14px !important; padding: 9px 12px 9px 26px !important; position: relative; }
  body.nav-sm #sidebar-menu .side-menu > li > .dropdown > .dropdown-content a::before { left: 10px !important; }
  /* a bridge over the gap, so the card does not close while the pointer crosses it */
  body.nav-sm #sidebar-menu .side-menu > li > .dropdown > .dropdown-content::before { content: ""; position: absolute; left: -14px; top: 0; width: 14px; height: 100%; }
  body.nav-sm #sidebar-menu .side-menu > li:hover > .dropdown > .dropdown-content,
  body.nav-sm #sidebar-menu .side-menu > li:focus-within > .dropdown > .dropdown-content { display: block !important; }
}

/* ---- the PDF / print icon buttons of the modals: the PNG is itself a filled square, so it IS the button
   (it used to sit inside a framed button and stick out of it) ---- */
body button.btn.pdfButton, body button.btn.printbtn, body button.btn.pdfbutton,
body button.btn.btn-outline-secondary.pdfButton, body button.btn.btn-outline-secondary.printbtn {
  display: inline-flex; align-items: center; justify-content: center; width: auto !important; height: auto !important;
  padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
  margin-right: 0 !important; line-height: 0; vertical-align: middle;
}
body img.pdfButton { display: block; width: 34px; height: 34px; border-radius: 8px; object-fit: contain; transition: opacity .15s, transform .15s; }
body button.btn:hover > img.pdfButton { opacity: .88; transform: translateY(-1px); }
body .prints.tagAforPdfBtn { display: inline-flex; vertical-align: middle; margin-left: 8px; text-decoration: none; }
body .prints.tagAforPdfBtn + button.btn { margin-left: 8px !important; }

/* the phone's drawer (280px): the menu and the logo block fill it, no dark strip on the right */
@media (max-width: 991px) {
  body.nav-sm .container.body .col-md-3.left_col > .left_col.scroll-view,
  body.nav-sm .navbar.nav_title,
  body.nav-sm #sidebar-menu,
  body.nav-sm #sidebar-menu .menu_section,
  body.nav-sm #sidebar-menu .side-menu { width: 100% !important; max-width: none !important; }
}

/* ---- lists on a phone (every DataTables screen): one tool row, folded filters, tidy cards ---- */
@media (max-width: 768px) {
  /* the list rows (search, tools, footer) are styled in the UI standard section at the end of this file */

  /* the filter card folds behind one button (layout script) */
  .sa-filters__toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 10px; padding: 0 14px; height: 44px; border: 1px solid var(--sa-border); border-radius: var(--sa-radius); background: var(--sa-surface); box-shadow: var(--sa-shadow); color: var(--sa-text); font-weight: 600; font-size: 15px; }
  .sa-filters__toggle > i:first-child { color: var(--sa-accent); }
  .sa-filters__arrow { margin-left: auto; font-size: 12px; transition: transform .2s; }
  .sa-filters__toggle[aria-expanded="true"] .sa-filters__arrow { transform: rotate(180deg); }
  .sa-filters__count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--sa-accent); color: #fff; font-size: 12px; line-height: 22px; text-align: center; }
  .sa-filters__count[hidden] { display: none; }
  form.sa-filters.is-collapsed { display: none !important; }
  form.sa-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  form.sa-filters .form-control, form.sa-filters .form-select { height: 42px; min-height: 42px; font-size: 15px; }
  form.sa-filters .btn { grid-column: 1 / -1; height: 42px; }

  /* cards: the summary is two tight lines, the arrow sits at the top right */
  table.sa-mcards tbody tr { padding: 12px 48px 12px 14px; }
  table.sa-mcards tbody td.sa-m-main:first-of-type, table.sa-mcards tbody td.sa-m-main { line-height: 1.35; }
  table.sa-mcards tbody td.sa-m-main ~ td.sa-m-main { margin-top: 3px; }
}

@media (max-width: 768px) {
  /* the summary cells carry the row's padding already */
  table.sa-mcards tbody td.sa-m-main { padding: 0 !important; }
}
@media (max-width: 575.98px) {
  /* the title gets the room: the settings gear (it is in the menu) and the divider step aside */
  body .page-title .ulprofile > a:has(> img[src*="Settings"]), body .page-title .ulprofile .vr { display: none !important; }
  body .page-title .titleup { font-size: 18px !important; }
}
@media (max-width: 575.98px) {
  body .page-title .nav_menu { padding: 0 12px !important; }
  body .page-title .nav.toggle { gap: 2px !important; }
  .sa-filters__toggle { padding: 0 14px !important; }
}

/* ---- stock list: the accordion shows it opens (an arrow), and on a phone keeps the name and the variant count ---- */
.sa-stock__group > summary { grid-template-columns: 170px 1fr auto 90px 22px; }
.sa-stock__group > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; font-size: 11px; color: var(--sa-muted); justify-self: end; transition: transform .2s; }
.sa-stock__group[open] > summary::after { transform: rotate(180deg); color: var(--sa-accent); }
.sa-stock__bar .form-control { flex: 1 1 auto; }
.sa-stock__count { white-space: nowrap; }
@media (max-width: 700px) {
  .sa-stock__bar { gap: 10px; }
  .sa-stock__bar .form-control { max-width: none; min-width: 0; }
  .sa-stock__count { font-size: 12px; }
  .sa-stock__group > summary { grid-template-columns: minmax(0, 1fr) auto 22px; grid-template-areas: "no total arrow" "name variants arrow"; gap: 2px 10px; padding: 12px 14px; }
  .sa-stock__no { grid-area: no; }
  .sa-stock__total { grid-area: total; }
  .sa-stock__group > summary .sa-stock__name { grid-area: name; display: block; font-size: 13px; color: var(--sa-muted); }
  .sa-stock__group > summary .sa-stock__variants { grid-area: variants; display: block; text-align: right; }
  .sa-stock__group > summary::after { grid-area: arrow; align-self: center; }
  /* the opened group's table scrolls sideways inside its card */
  .sa-stock__group { overflow-x: auto; }
  .sa-stock__table { min-width: 560px; }
}

/* ---- chips: the active chip's count stays readable; on a phone a row of chips scrolls sideways instead of wrapping into rows ---- */
.sa-chip.is-active .sa-chip__count { background: rgba(255, 255, 255, .22) !important; color: #fff !important; }
@media (max-width: 575.98px) {
  .sa-chips, .sa-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -2px; margin-right: -2px; padding: 2px; -webkit-overflow-scrolling: touch; }
  .sa-chips::-webkit-scrollbar, .sa-presets::-webkit-scrollbar { display: none; }
  .sa-chips > .sa-chip, .sa-presets > .sa-chip { flex: 0 0 auto; white-space: nowrap; }
}

/* product cards on a phone: View and Edit share the row, Delete is a small icon button beside them */
@media (max-width: 767.98px) {
  .sa-table-cards td.sa-product-actions-cell { display: grid !important; grid-template-columns: 1fr 1fr 46px; gap: 8px; padding-top: 10px !important; }
  .sa-table-cards td.sa-product-actions-cell .btn { margin: 0 !important; min-height: 42px; width: 100%; padding-left: 8px; padding-right: 8px; }
  .sa-table-cards td.sa-product-actions-cell .btn.btn-outline-danger span { display: none; }
}

/* ---- tables stay inside their card: a wide table scrolls sideways there, it never pushes the page (the old sheet
   left the scroller visible, so a wide list spilled out of its card and made the whole page scroll) ---- */
body .dt-scroll-body { overflow-x: auto !important; max-width: 100%; }
body #product-results, body .sa-stock__group { position: relative; overflow-x: auto; max-width: 100%; }
body .right_col .x_panel { max-width: 100%; }
/* the footer sits inside the content column (which already starts after the menu): no extra left margin from the vendor sheet */
body .top_nav footer.footerforallpage { margin-left: 0 !important; max-width: 100%; box-sizing: border-box; }

/* accordions (details.sa-acc): one arrow everywhere, a chevron in a small square at the right end of the summary,
   turned up and orange when open (the browser's triangle and text arrows looked broken) */
details.sa-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
details.sa-acc > summary::-webkit-details-marker { display: none; }
details.sa-acc > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900; font-size: 12px; flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 2px; background: var(--sa-border-soft); color: var(--sa-muted); transition: transform .2s, color .2s; }
details.sa-acc[open] > summary::after { transform: rotate(180deg); color: var(--sa-accent); }
details.sa-acc > summary:focus-visible { outline: 2px solid var(--sa-accent); outline-offset: 2px; }

/* the header's "+" menu: a few everyday records, each with its icon */
.sa-quick-add { min-width: 220px; max-height: none !important; overflow: visible !important; }
.sa-quick-add .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-weight: 550; }
.sa-quick-add .dropdown-item i { width: 18px; text-align: center; color: var(--sa-muted); }
.sa-quick-add .dropdown-item:hover i, .sa-quick-add .dropdown-item:focus i { color: var(--sa-accent); }

/* =====================================================================================================
   UI STANDARD (docs/UI-STANDARD.md): one title bar, one list card, one filter bar, one save bar.
   Radius: controls var(--sa-radius-control) 8 · cards var(--sa-radius-card) 12 · chips var(--sa-radius-pill).
   ===================================================================================================== */

/* ---- controls follow the scale (the old sheets had 4, 6, 10, 14 and square) ---- */
body .btn, body .form-control, body .form-select, body .input-group-text,
body .select2-container--default .select2-selection, body .dropdown-menu,
body .dt-search input, body .dt-length select, body .dataTables_filter input, body .dataTables_length select { border-radius: var(--sa-radius-control) !important; }
body .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body .input-group > :not(:last-child):not(.dropdown-menu) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body .modal-content { border-radius: var(--sa-radius-card) !important; }
body .badge, body .sa-pill, body .sa-chip { border-radius: var(--sa-radius-pill) !important; }
body .btn-group > .btn:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body .btn-group > .btn:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
/* an icon button in a row or a bar: one square size */
body .right_col .sa-icon-btn { display: inline-flex !important; flex: none; align-items: center; justify-content: center; width: var(--sa-control-h-sm) !important; height: var(--sa-control-h-sm) !important; padding: 0 !important; }

/* ---- 1. the title bar: title left, the page's action right, before the shared icons ---- */
body .page-title .sa-page-header__title { margin: 0 !important; padding: 0; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .page-title .nav_menu > nav > .sa-page-header__actions { order: 0; display: flex; align-items: center; gap: 8px; margin-right: 6px; padding-right: 14px; border-right: 1px solid var(--sa-border); }
body .page-title .nav_menu > nav > .nav.toggle { min-width: 0; }
body .page-title .sa-page-action, body .right_col .sa-page-action {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: var(--sa-control-h); min-height: 0; padding: 0 16px !important;
  font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none !important; border-radius: var(--sa-radius-control) !important;
  box-shadow: 0 6px 16px -8px rgba(255, 106, 19, .6) !important;
}
body .page-title .sa-page-action i { font-size: 13px; }
@media (max-width: 767.98px) {
  /* a phone: the icon alone, a square as tall as the header icons */
  body .page-title .nav_menu > nav > .sa-page-header__actions { margin-right: 0; padding-right: 0; border-right: 0; gap: 6px; }
  body .page-title .sa-page-action { width: 36px; height: 36px; padding: 0 !important; }
  body .page-title .sa-page-action span { display: none; }
  body .page-title .sa-page-action i { font-size: 15px; }
}

/* ---- 2. the list card: tools row → table → footer row, the card's corners clip the table ---- */
body .right_col .x_panel.sa-list { padding: 0 !important; overflow: hidden; }
.sa-list > .dt-container, .sa-list .dt-container { margin: 0; }
/* the rows DataTables builds (layout set once in layouts/app.blade.php) */
body .right_col .sa-list .dt-container > .dt-layout-row, body .dt-container > .dt-layout-row { margin: 0 !important; }
body .right_col .sa-list .dt-container > .dt-layout-row:not(.dt-layout-table) { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 14px 16px; }
body .right_col .sa-list .dt-container > .dt-layout-row:first-child { border-bottom: 1px solid var(--sa-border); }
body .right_col .sa-list .dt-container > .dt-layout-row.dt-layout-table + .dt-layout-row { border-top: 1px solid var(--sa-border); padding-top: 12px; padding-bottom: 12px; }
body .right_col .sa-list .dt-container > .dt-layout-row:not(.dt-layout-table) > .dt-layout-cell { display: flex !important; align-items: center; gap: 12px; padding: 0 !important; margin: 0 !important; width: auto; }
body .right_col .sa-list .dt-container > .dt-layout-row:not(.dt-layout-table) > .dt-layout-start { flex: 1 1 280px; min-width: 0; }
body .right_col .sa-list .dt-container > .dt-layout-row:not(.dt-layout-table) > .dt-layout-end { flex: 0 1 auto; margin-left: auto !important; justify-content: flex-end; }
body .dt-container > .dt-layout-row.dt-layout-table { padding: 0 !important; }
body .dt-container > .dt-layout-row.dt-layout-table > .dt-layout-cell { display: block; width: 100%; padding: 0 !important; }
/* outside a .sa-list card (a report, a tab): the same rows, without the card's lines */
body .dt-container > .dt-layout-row:not(.dt-layout-table) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 0 0 12px; }
body .dt-container > .dt-layout-row.dt-layout-table + .dt-layout-row { padding: 12px 0 0; }
body .dt-container > .dt-layout-row:not(.dt-layout-table) > .dt-layout-cell { display: flex; align-items: center; gap: 12px; }
body .dt-container > .dt-layout-row:not(.dt-layout-table) > .dt-layout-end { margin-left: auto; }
/* search: a box with a magnifier, at most 360px */
body .dt-container .dt-search { position: relative; display: flex; align-items: center; flex: 0 1 360px; width: 100%; max-width: 360px; margin: 0 !important; }
body .dt-container .dt-search > label:not(:has(input)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body .dt-container .dt-search .sa-dt-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sa-muted); font-size: 13px; pointer-events: none; z-index: 1; }
body .dt-container .dt-search input.dt-input, body .sa-list .sa-toolbar__search .form-control, body .sa-list-toolbar .form-control[type=search] {
  width: 100% !important; height: var(--sa-control-h) !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px 0 34px !important;
  background: var(--sa-surface) !important; border: 1px solid var(--sa-border) !important; font-size: 14px; float: none !important;
}
body .dt-container .dt-search input.dt-input:focus { border-color: var(--sa-accent) !important; box-shadow: 0 0 0 3px var(--sa-accent-ring) !important; }
/* the tools on the right: bulk actions, export, other secondary buttons — one height */
.sa-dt-tools, .sa-list-toolbar__end { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; }
.sa-dt-tools { margin: 0 !important; }
.sa-dt-tools:empty { display: none; }
body .right_col .sa-list > .sa-export-bar:not(:has(> :not(style, script))) { display: none; }
body .sa-dt-tools .btn, body .sa-list-toolbar .btn, body .sa-list-footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--sa-control-h); min-height: 0; margin: 0 !important; padding: 0 12px !important; font-size: 14px !important; font-weight: 500; line-height: 1; white-space: nowrap; }
body .sa-dt-tools .sa-export { display: inline-flex; margin: 0 !important; }
/* the old "Tümünü Seç" + red trash: a quiet pair of tool buttons */
body .sa-dt-tools #select-all-btn, body .sa-list #select-all-btn { background: var(--sa-surface) !important; border: 1px solid var(--sa-border) !important; color: var(--sa-text-2) !important; box-shadow: none !important; }
body .sa-dt-tools #select-all-btn input { width: 15px; height: 15px; margin: 0; accent-color: var(--sa-accent); }
body .sa-dt-tools #delete-selected-btn, body .sa-list #delete-selected-btn { width: var(--sa-control-h); padding: 0 !important; background: var(--sa-surface) !important; border: 1px solid #f3c1bc !important; color: #d92d20 !important; box-shadow: none !important; }
body .sa-dt-tools #delete-selected-btn:hover, body .sa-list #delete-selected-btn:hover { background: var(--sa-red-bg) !important; }
body .sa-list #delete-selected-btn:has(span) { width: auto; padding: 0 12px !important; }
/* footer: rows per page and "1–10 / 250" left, the pages right */
body .dt-container .dt-length { display: flex; align-items: center; margin: 0 !important; }
body .dt-container .dt-length select.dt-input { width: auto !important; min-width: 72px; height: var(--sa-control-h-sm) !important; margin: 0 !important; padding: 0 28px 0 10px !important; font-size: 13px; background-color: var(--sa-surface) !important; }
body .dt-container .dt-length label { display: none; }
body .dt-container .dt-info { padding: 0 !important; margin: 0; color: var(--sa-muted) !important; font-size: 13px; font-variant-numeric: tabular-nums; }
body .dt-container .dt-paging { margin: 0; }
body .dt-container .dt-paging nav { display: flex; align-items: center; gap: 4px; }
body .dt-paging .dt-paging-button, body .dataTables_paginate .paginate_button {
  display: inline-flex !important; align-items: center; justify-content: center; min-width: var(--sa-control-h-sm); height: var(--sa-control-h-sm);
  padding: 0 8px !important; margin: 0 !important; border: 1px solid transparent !important; border-radius: var(--sa-radius-control) !important;
  font-size: 13px; line-height: 1; color: var(--sa-text-2) !important; background: transparent !important;
}
body .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) { background: var(--sa-bg) !important; border-color: var(--sa-border) !important; color: var(--sa-text) !important; }
body .dt-paging .dt-paging-button.current, body .dt-paging .dt-paging-button.current:hover { background: var(--sa-navy-800) !important; border-color: var(--sa-navy-800) !important; color: #fff !important; font-weight: 600; }
body .dt-paging .dt-paging-button.disabled { opacity: .35; }
body .dt-paging .dt-paging-button.previous, body .dt-paging .dt-paging-button.next { font-size: 18px; }
body .dt-paging .ellipsis { padding: 0 4px; color: var(--sa-muted); }
/* the table: edge to edge in the card, the first and last columns 16px in */
body .sa-list table.dataTable, body .sa-list .sa-list-table > table, body .sa-list > .table, body .sa-list .table { margin: 0 !important; border: 0 !important; width: 100% !important; }
body .sa-list table thead th:first-child, body .sa-list table tbody td:first-child { padding-left: 16px !important; }
body .sa-list table thead th:last-child, body .sa-list table tbody td:last-child { padding-right: 16px !important; }
body .sa-list table tbody tr:last-child td { border-bottom: 0 !important; }
body .sa-list .dt-scroll-head, body .sa-list .dt-scroll-body { border: 0 !important; }
body .sa-list .dt-scroll-body table thead { visibility: collapse; }
/* one header and row look for every list */
body .right_col table.dataTable thead th, body .right_col .sa-list table thead th {
  height: 40px; padding-top: 0 !important; padding-bottom: 0 !important; vertical-align: middle;
  background: #f8fafc !important; color: var(--sa-muted) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--sa-border) !important; border-top: 0 !important;
}
@media (min-width: 768px) {
  body .right_col table.dataTable tbody td, body .right_col .sa-list table tbody td { padding-top: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--sa-border-soft) !important; font-size: 13.5px; vertical-align: middle; }
body .right_col table.dataTable tbody tr:hover > td, body .right_col .sa-list table tbody tr:hover > td { background: #fafbfd !important; }
  body .right_col table .sa-num, body .right_col table td.dt-type-numeric, body .right_col table th.dt-type-numeric { text-align: right !important; font-variant-numeric: tabular-nums; }
}
/* the ⋮ row menu: a 32px square, quiet until hovered */
body .right_col table tbody td .dropdown_toggle > img, body .right_col table tbody td .dropdown_toggle > button { border-radius: var(--sa-radius-control) !important; }

/* ---- custom (non-DataTables) list: the same three rows by hand ---- */
.sa-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-bottom: 1px solid var(--sa-border); }
.sa-list-toolbar__search { position: relative; flex: 0 1 360px; width: 100%; max-width: 360px; }
.sa-list-toolbar__search > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--sa-muted); font-size: 13px; pointer-events: none; z-index: 1; }
body .right_col .sa-list-toolbar__search .form-control { width: 100%; height: var(--sa-control-h) !important; min-height: 0 !important; padding: 0 12px 0 34px !important; font-size: 14px; }
.sa-list-toolbar__end { margin-left: auto; }
.sa-list-toolbar__count { color: var(--sa-muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sa-list-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--sa-border); }
.sa-list-table { overflow-x: auto; max-width: 100%; }
.sa-list-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-top: 1px solid var(--sa-border); color: var(--sa-muted); font-size: 13px; }
.sa-list-footer__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sa-list-footer:empty { display: none; }
.sa-list .sa-empty { border: 0 !important; border-radius: 0 !important; margin: 0; }
/* action column of a custom list: ≤3 icon buttons, 32px squares */
@media (min-width: 768px) {
  body .right_col .sa-list .sa-row-actions { white-space: nowrap; text-align: right; }
  body .right_col .sa-list .sa-row-actions .btn { display: inline-flex !important; align-items: center; justify-content: center; width: var(--sa-control-h-sm); height: var(--sa-control-h-sm); margin: 0 0 0 4px !important; padding: 0 !important; font-size: 13px !important; }
}

/* ---- 3. the filter bar above the list card ---- */
body .right_col form.sa-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--sa-radius-card); }
body .right_col form.sa-filters > .form-select, body .right_col form.sa-filters > .form-control, body .right_col form.sa-filters > .sa-filters__date { flex: 1 1 140px; min-width: 140px; max-width: 240px; }
body .right_col form.sa-filters .form-select, body .right_col form.sa-filters .form-control { height: var(--sa-control-h) !important; min-height: 0 !important; font-size: 14px; }
body .right_col form.sa-filters .form-select { padding: 0 28px 0 12px !important; background-position: right 10px center; text-overflow: ellipsis; }
body .right_col form.sa-filters .form-control { padding: 0 12px !important; }
body .right_col form.sa-filters .sa-filters__date { display: flex; flex-direction: column; gap: 4px; margin: 0; }
body .right_col form.sa-filters .sa-filters__date > span { position: static !important; font-size: 11.5px; font-weight: 600; color: var(--sa-muted); letter-spacing: .02em; line-height: 1.2; background: none !important; padding: 0 !important; transform: none !important; }
body .right_col form.sa-filters > .btn[type=reset], body .right_col form.sa-filters .sa-filterbar__reset { flex: none; white-space: nowrap; height: var(--sa-control-h); margin-left: auto !important; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px !important; border: 0 !important; background: transparent !important; color: var(--sa-muted) !important; font-weight: 500 !important; font-size: 13.5px !important; text-decoration: none !important; }
body .right_col form.sa-filters > .btn[type=reset]:hover, body .right_col form.sa-filters .sa-filterbar__reset:hover { color: var(--sa-accent-600) !important; background: var(--sa-accent-50) !important; }

/* ---- 4. the save bar at the end of a form (<x-action-bar>): stuck to the bottom of the content area ---- */
.sa-formbar {
  position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px 16px; margin: 20px 0 0; padding: 12px 16px;
  background: var(--sa-surface); border: 1px solid var(--sa-border); border-bottom: 0; border-radius: var(--sa-radius-card) var(--sa-radius-card) 0 0;
  box-shadow: 0 -8px 24px -6px rgba(11, 18, 32, .12);
}
.sa-formbar__start, .sa-formbar__end { display: flex; align-items: center; gap: 8px; }
.sa-formbar__end { margin-left: auto; }
.sa-formbar__note { font-size: 13px; color: var(--sa-muted); }
body .sa-formbar .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-height: 0; margin: 0 !important; padding: 0 18px !important; font-size: 14px !important; font-weight: 600; white-space: nowrap; }
body .sa-formbar .btn-outline-primary { background: var(--sa-surface) !important; color: var(--sa-accent-600) !important; border: 1px solid var(--sa-accent) !important; }
body .sa-formbar .btn-outline-primary:hover { background: var(--sa-accent-50) !important; }
@media (max-width: 767.98px) {
  /* a phone: the bar spans the screen, the buttons share its width, the primary one last */
  .sa-formbar { margin: 16px -12px 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-radius: 0; border-width: 1px 0 0; }
  .sa-formbar__note { display: none; }
  .sa-formbar__end { flex: 1 1 auto; margin-left: 0; }
  .sa-formbar__end > .btn { flex: 1 1 0; min-width: 0; }
  body .sa-formbar .btn { height: 46px; padding: 0 12px !important; }
  .sa-formbar__end > .btn:not(:last-child) i { display: none; }
  body:has(.sa-formbar) .sa-help-fab { bottom: 88px; }
}

/* ---- phones: the list card keeps its rows; search and tools share the top row ---- */
@media (max-width: 767.98px) {
  body .right_col .x_panel.sa-list { border-radius: var(--sa-radius-card) !important; }
  body .right_col .sa-list .dt-container > .dt-layout-row:not(.dt-layout-table) { flex-wrap: nowrap; padding: 10px 12px; gap: 8px; }
  body .right_col .sa-list .dt-container > .dt-layout-row:not(.dt-layout-table) > .dt-layout-start { flex: 1 1 auto; min-width: 0; }
  body .right_col .sa-list .dt-container > .dt-layout-row:not(.dt-layout-table) > .dt-layout-end { flex: 0 0 auto; }
  body .dt-container .dt-search { max-width: none; flex: 1 1 auto; }
  body .dt-container .dt-search input.dt-input, body .right_col .sa-list-toolbar__search .form-control { height: var(--sa-control-h-touch) !important; font-size: 16px; }
  body .sa-dt-tools .btn, body .sa-list-toolbar .btn { height: var(--sa-control-h-touch); }
  body .sa-dt-tools .btn > span, body .sa-dt-tools .sa-export__toggle > span, body .sa-dt-tools #select-all-btn { font-size: 0 !important; gap: 0; }
  body .sa-dt-tools .sa-export__toggle::after { display: none; }
  body .sa-dt-tools #select-all-btn { width: var(--sa-control-h-touch); padding: 0 !important; }
  body .sa-dt-tools .sa-export__toggle { width: var(--sa-control-h-touch); padding: 0 !important; }
  body .sa-dt-tools #delete-selected-btn { width: var(--sa-control-h-touch); }
  /* the footer: count left, pages right, one row */
  body .right_col .sa-list .dt-container > .dt-layout-row.dt-layout-table + .dt-layout-row { flex-wrap: wrap; justify-content: center; }
  body .right_col .sa-list .dt-container > .dt-layout-row.dt-layout-table + .dt-layout-row > .dt-layout-cell { flex: 1 1 100%; justify-content: center; margin: 0 !important; }
  body .dt-container .dt-length { display: none; }
  .sa-list-toolbar { padding: 10px 12px; gap: 8px; flex-wrap: nowrap; }
  .sa-list-toolbar__search { flex: 1 1 auto; max-width: none; }
  .sa-list-chips { padding: 8px 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sa-list-chips > .sa-chip { flex: 0 0 auto; white-space: nowrap; }
  body .sa-list-toolbar #select-all-btn > span { display: none; }
  body .sa-list-toolbar #select-all-btn { width: var(--sa-control-h-touch); padding: 0 !important; }
  body .sa-list-toolbar .sa-export__toggle > span { display: none; }
  .sa-list-footer { padding: 10px 12px; }
  /* stacked cards inside the card: separated by lines, not boxes */
  body .sa-list table.sa-mcards tbody tr, body .sa-list .sa-table-cards tbody tr { border: 0 !important; border-bottom: 1px solid var(--sa-border-soft) !important; border-radius: 0 !important; margin: 0 !important; }
  body .sa-list table thead th:first-child, body .sa-list table tbody td:first-child { padding-left: 0 !important; }
  body .sa-list .sa-table-cards tbody tr { padding: 12px !important; }
  body .right_col form.sa-filters { display: grid; padding: 10px; }
  body .right_col form.sa-filters > .btn[type=reset], body .right_col form.sa-filters .sa-filterbar__reset { margin-left: 0 !important; justify-content: center; }
  body .right_col form.sa-filters > .sa-filters__date > span { font-size: 11px; }
}

/* ---- stock (a custom list in the standard card): the part groups are the card's rows ---- */
body .right_col .sa-list.sa-stock { display: block; }
.sa-list.sa-stock .sa-stock__head { display: grid; grid-template-columns: 170px 1fr auto 90px 22px; gap: 12px; align-items: center; height: 40px; padding: 0 16px; background: #f8fafc; border-bottom: 1px solid var(--sa-border); color: var(--sa-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.sa-list.sa-stock .sa-stock__group { border: 0; border-bottom: 1px solid var(--sa-border-soft); border-radius: 0; }
.sa-list.sa-stock .sa-stock__group > summary { padding: 12px 16px; min-height: 48px; }
.sa-list.sa-stock .sa-stock__group > summary:hover { background: #fafbfd; }
.sa-list.sa-stock .sa-stock__group[open] > summary { background: var(--sa-accent-50); border-bottom: 1px solid var(--sa-border); }
.sa-list.sa-stock .sa-stock__group[open] { box-shadow: inset 3px 0 0 var(--sa-accent); }
.sa-list.sa-stock .sa-stock__table thead th { height: 34px; background: #fff !important; }
.sa-list.sa-stock .sa-stock__table td:first-child, .sa-list.sa-stock .sa-stock__table th:first-child { padding-left: 32px !important; }
.sa-list.sa-stock .sa-stock__group:last-of-type { border-bottom: 0; }
@media (max-width: 700px) {
  .sa-list.sa-stock .sa-stock__head { display: none; }
  .sa-list.sa-stock .sa-stock__group > summary { padding: 12px; }
  .sa-list.sa-stock .sa-stock__table td:first-child, .sa-list.sa-stock .sa-stock__table th:first-child { padding-left: 12px !important; }
}

/* UI STANDARD addition (phase 2, group C): the pages of a server-paged list (partials/list_pager → Laravel's plain
   ul.pagination) in the list footer look like the DataTables pager: 32px squares, the current page navy, ‹ ›. */
.sa-list-footer .pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sa-list-footer .pagination li > a, .sa-list-footer .pagination li > span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--sa-control-h-sm); height: var(--sa-control-h-sm); padding: 0 8px; border: 1px solid transparent; border-radius: var(--sa-radius-control); font-size: 13px; line-height: 1; color: var(--sa-text-2); text-decoration: none; }
.sa-list-footer .pagination li > a:hover { background: var(--sa-bg); border-color: var(--sa-border); color: var(--sa-text); }
.sa-list-footer .pagination li.active > span { background: var(--sa-navy-800); border-color: var(--sa-navy-800); color: #fff; font-weight: 600; }
.sa-list-footer .pagination li.disabled > span { opacity: .35; }
.sa-list-footer .pagination li:first-child > *, .sa-list-footer .pagination li:last-child > * { font-size: 18px; }
.sa-list-footer__info { font-variant-numeric: tabular-nums; }

/* UI STANDARD addition (phase 2, group B): the "Sil" item of a row's ⋮ menu is red on every list (the lists used to
   paint it with their own <style> block, now removed). */
body .action_dropdown .dropdown-item:is(.deletedatas, .deletecus) { color: #d92d20; }

/* list tool row: every outline button (Çöp Kutusu, Dışa aktar, Tümünü Seç…) hovers the same way: stays white, orange
   border, its icon turns orange (the theme's grey fill with no border made them melt into each other) */
body .sa-dt-tools .btn-outline-secondary:hover, body .sa-dt-tools .btn-outline-secondary:focus-visible, body .sa-dt-tools .btn-outline-secondary.show,
body .sa-list-toolbar .btn-outline-secondary:hover, body .sa-list-toolbar .btn-outline-secondary:focus-visible, body .sa-list-toolbar .btn-outline-secondary.show,
body .sa-export .btn-outline-secondary:hover, body .sa-export .btn-outline-secondary:focus-visible, body .sa-export .btn-outline-secondary.show,
body .sa-dt-tools #select-all-btn:hover, body .sa-list #select-all-btn:hover { background: var(--sa-surface) !important; border: 1px solid var(--sa-accent) !important; color: var(--sa-text) !important; box-shadow: none !important; }
body .sa-dt-tools .btn-outline-secondary:hover i, body .sa-list-toolbar .btn-outline-secondary:hover i, body .sa-export .btn-outline-secondary:hover i, body .sa-export .btn-outline-secondary.show i { color: var(--sa-accent) !important; }

/* tab / filter chips (.sa-chip: parts, damage files, product brands, report date presets…): one look everywhere.
   Idle: white, grey border, dark text. Hover: dark border. Chosen: navy fill with white text — orange stays for the
   page's one primary action, so a chosen filter never reads like a button to press (the old dark orange looked dull). */
body .sa-chip, body .right_col .sa-chip, body .sa-presets .sa-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid var(--sa-border) !important; background: var(--sa-surface) !important; color: var(--sa-text-2) !important; font-size: 13.5px; font-weight: 550; text-decoration: none !important; box-shadow: none !important; transition: border-color .15s, background .15s, color .15s; }
body .sa-chip:hover, body .right_col .sa-chip:hover, body .sa-presets .sa-chip:hover { border-color: var(--sa-navy-800) !important; color: var(--sa-text) !important; }
body .sa-chip.is-active, body a.sa-chip.is-active, body .right_col .sa-chip.is-active, body .sa-presets .sa-chip.is-active,
body .sa-chip--check:has(input:checked) { background: var(--sa-navy-800) !important; border-color: var(--sa-navy-800) !important; color: #fff !important; font-weight: 600; }
body .sa-chip .sa-chip__count, body .right_col .sa-chip .sa-chip__count { min-width: 20px; padding: 0 6px; border-radius: var(--sa-radius-pill); background: var(--sa-border-soft) !important; color: var(--sa-text-2) !important; font-size: 11.5px; font-weight: 600; line-height: 18px; text-align: center; }
body .sa-chip.is-active .sa-chip__count, body .right_col .sa-chip.is-active .sa-chip__count { background: rgba(255, 255, 255, .18) !important; color: #fff !important; opacity: 1; }
body .sa-chip.is-active i { color: #fff !important; }
body .sa-chip:focus-visible { outline: 2px solid var(--sa-accent); outline-offset: 2px; }
/* group B: old sheets (build/css/custom.min.css) give some submit buttons a fixed width ("button.btn.employeeSubmitButton
   { width: 495px }"); inside the save bar a button is as wide as its text (phones share the width by flex). */
body .sa-formbar .btn { width: auto !important; margin-top: 0 !important; }
/* group C: on a computer too the "?" help button sat on the save bar's main button once the bar stuck to the bottom
   of the screen; a page with a save bar lifts it above the bar (as on a phone). */
body:has(.sa-formbar) .sa-help-fab { bottom: 88px; }