/* =========================================================
   GLOBAL MOBILE OVERFLOW-X & RESPONSIVE FIT (< 900px)
   ========================================================= */
@media (max-width: 900px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .app-layout,
  .main-area,
  .dashboard-content,
  .page,
  main {
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    margin-left: 0 !important;
  }
}

/* AYKAR appearance: Day stays the current light screens. Night darkens them. */

.theme-switch,
.theme-fab {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid #d7e4ff;
  border-radius: 999px;
  background: #ffffff;
}

.theme-switch button,
.theme-fab button {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #3158ed;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.theme-switch button {
  padding: 8px 14px;
}

.theme-fab {
  display: none !important;
}

.theme-switch button[aria-pressed="true"],
.theme-fab button[aria-pressed="true"] {
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
  color: #ffffff !important;
}

@media screen {
  html[data-theme="dark"] {
    --background: #0b1220;
    --white: #162033;
    --text: #e8eef8;
    --muted: #9aabc6;
    --border: #2c3b56;
    color-scheme: dark;
  }

  html[data-theme="dark"] body {
    background:
      radial-gradient(720px 420px at 0% 0%, rgba(18, 217, 160, 0.16), transparent 62%),
      radial-gradient(680px 460px at 100% 0%, rgba(124, 92, 255, 0.14), transparent 64%),
      radial-gradient(820px 520px at 78% 100%, rgba(8, 159, 186, 0.14), transparent 62%),
      #0b1220;
    color: #e8eef8;
  }

  html[data-theme="dark"] .sidebar {
    color: #eef3fb;
  }

  html[data-theme="dark"] .topbar,
  html[data-theme="dark"] .search-container,
  html[data-theme="dark"] .kpi-card,
  html[data-theme="dark"] .dashboard-panel,
  html[data-theme="dark"] .profile-menu-trigger,
  html[data-theme="dark"] .profile-dropdown,
  html[data-theme="dark"] .notification-panel,
  html[data-theme="dark"] .card,
  html[data-theme="dark"] .stat,
  html[data-theme="dark"] .sheet form,
  html[data-theme="dark"] .product-list,
  html[data-theme="dark"] .lookup-list,
  html[data-theme="dark"] .warning-modal div,
  html[data-theme="dark"] .profile-card,
  html[data-theme="dark"] .language-card,
  html[data-theme="dark"] .language-option,
  html[data-theme="dark"] .management-card,
  html[data-theme="dark"] .login-panel,
  html[data-theme="dark"] .theme-switch,
  html[data-theme="dark"] .theme-fab {
    background: #162033;
    color: #e8eef8;
    border-color: #2c3b56;
  }

  html[data-theme="dark"] .card {
    background:
      linear-gradient(#162033, #162033) padding-box,
      linear-gradient(135deg, #2563eb, #38bdf8, #059669) border-box;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  }

  html[data-theme="dark"] h2,
  html[data-theme="dark"] h3,
  html[data-theme="dark"] .panel-header h2,
  html[data-theme="dark"] .profile-dropdown-header strong,
  html[data-theme="dark"] .notification-panel strong,
  html[data-theme="dark"] .language-card-heading h2,
  html[data-theme="dark"] .profile-card-heading h2,
  html[data-theme="dark"] .login-container h2 {
    color: #d7fff6;
  }

  html[data-theme="dark"] p,
  html[data-theme="dark"] label,
  html[data-theme="dark"] th,
  html[data-theme="dark"] .subtitle,
  html[data-theme="dark"] .hint,
  html[data-theme="dark"] .profile-dropdown-header span,
  html[data-theme="dark"] .language-card-heading p,
  html[data-theme="dark"] .login-description {
    color: #9aabc6;
  }

  html[data-theme="dark"] td,
  html[data-theme="dark"] .profile-dropdown > button {
    color: #e8eef8;
  }

  html[data-theme="dark"] input,
  html[data-theme="dark"] select,
  html[data-theme="dark"] textarea,
  html[data-theme="dark"] .profile-card input,
  html[data-theme="dark"] .form-field input,
  html[data-theme="dark"] .field input,
  html[data-theme="dark"] .field select,
  html[data-theme="dark"] .field textarea {
    background: transparent;
    color: #e8eef8;
    border-color: #3a4d6e;
  }

  html[data-theme="dark"] .floating-field input {
    background: #162033;
    color: #e8eef8;
    border-color: #3a4d6e;
  }

  html[data-theme="dark"] .floating-field input:focus {
    background: #1a2740;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
  }

  html[data-theme="dark"] .floating-field label {
    color: #9aabc6;
  }

  html[data-theme="dark"] .floating-field input:focus + label,
  html[data-theme="dark"] .floating-field input:not(:placeholder-shown) + label,
  html[data-theme="dark"] .floating-field input:-webkit-autofill + label {
    color: #60a5fa;
  }

  html[data-theme="dark"] .floating-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #162033 inset;
  }

  html[data-theme="dark"] .product-list button,
  html[data-theme="dark"] .lookup-list button {
    color: #e8eef8;
  }

  html[data-theme="dark"] .product-list button:hover,
  html[data-theme="dark"] .lookup-list button:hover,
  html[data-theme="dark"] .profile-dropdown > button:hover,
  html[data-theme="dark"] .notification-item {
    background: #1d2b46;
    color: #e8eef8;
  }

  html[data-theme="dark"] .notification-button,
  html[data-theme="dark"] .kpi-icon,
  html[data-theme="dark"] .topbar-date,
  html[data-theme="dark"] .btn.quiet,
  html[data-theme="dark"] .btn.danger,
  html[data-theme="dark"] .back-button,
  html[data-theme="dark"] .mobile-menu-button {
    background: #1d2b46;
    color: #9ad7ff;
    border-color: #2c3b56;
  }

  html[data-theme="dark"] .guide-bubble,
  html[data-theme="dark"] .guide-results {
    background: #162033;
    color: #e8eef8;
    border-color: #2c3b56;
  }

  html[data-theme="dark"] .guide-kind {
    background: #1d2b46;
    color: #9ad7ff;
  }

  html[data-theme="dark"] .notice {
    background: linear-gradient(115deg, rgba(18, 217, 160, 0.16), rgba(49, 88, 237, 0.18));
    color: #e8eef8;
  }

  html[data-theme="dark"] .stock-sheet,
  html[data-theme="dark"] .page .sheet,
  html[data-theme="dark"] .sale-sheet,
  html[data-theme="dark"] .product-sheet,
  html[data-theme="dark"] .facts article,
  html[data-theme="dark"] .image-preview,
  html[data-theme="dark"] .code-preview-box,
  html[data-theme="dark"] .file-picker {
    background: #162033;
    color: #e8eef8;
    border-color: #2c3b56;
  }

  html[data-theme="dark"] .theme-switch button,
  html[data-theme="dark"] .theme-fab button {
    color: #c9d7ee;
  }

  html[data-theme="dark"] .theme-switch button[aria-pressed="true"],
  html[data-theme="dark"] .theme-fab button[aria-pressed="true"],
  html[data-theme="dark"] .btn,
  html[data-theme="dark"] a.btn,
  html[data-theme="dark"] .login-button {
    color: #ffffff;
  }

  html[data-theme="dark"] .btn.danger {
    color: #fda4af;
  }
}

@keyframes aykar-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-3px) rotate(-0.4deg); }
  40% { transform: translateX(3px) rotate(0.4deg); }
  60% { transform: translateX(-2px) rotate(-0.2deg); }
  80% { transform: translateX(2px) rotate(0.2deg); }
}

@media screen {
  html:not([data-theme="dark"]) {
    --background: #f8fafc;
    --white: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --border: #e2e8f0;
    --navy: #101b38;
  }

  html:not([data-theme="dark"]) body {
    background: #f8fafc !important;
    color: #0f172a;
  }

  html:not([data-theme="dark"]) .topbar {
    background: #ffffff !important;
    color: #0f172a;
    border-color: #e2e8f0;
  }

  /* Sidebar Layout Stability: Zero Cumulative Layout Shift (CLS) */
  #companiesNav,
  #systemHealthNav,
  #branchesNav {
    display: none;
  }

  html.is-platform-admin #companiesNav,
  html.is-platform-admin #systemHealthNav {
    display: flex !important;
  }

  html.has-branches-nav #branchesNav {
    display: flex !important;
  }

  html:not([data-theme="dark"]) .sidebar {
    background: #101b38 !important;
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
  }

  html:not([data-theme="dark"]) .sidebar .nav-item,
  html:not([data-theme="dark"]) .sidebar .nav-submenu a,
  html:not([data-theme="dark"]) .sidebar .nav-submenu button,
  html:not([data-theme="dark"]) .sidebar-brand strong,
  html:not([data-theme="dark"]) .sidebar-company-info strong,
  html:not([data-theme="dark"]) .sidebar-user-info strong,
  html:not([data-theme="dark"]) .bottom-action {
    color: #cbd5e1 !important;
    background: transparent;
  }

  html:not([data-theme="dark"]) .sidebar-brand span,
  html:not([data-theme="dark"]) .sidebar-company-info span,
  html:not([data-theme="dark"]) .sidebar-user-info span {
    color: #94a3b8 !important;
  }

  html:not([data-theme="dark"]) .sidebar .nav-item:hover,
  html:not([data-theme="dark"]) .sidebar .nav-submenu a:hover,
  html:not([data-theme="dark"]) .sidebar .nav-submenu button:hover,
  html:not([data-theme="dark"]) .bottom-action:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    box-shadow: inset 3px 0 0 #3b82f6 !important;
  }

  html:not([data-theme="dark"]) .sidebar .nav-item.active,
  html:not([data-theme="dark"]) .sidebar a.active,
  html:not([data-theme="dark"]) .sidebar .nav-submenu a.active,
  html:not([data-theme="dark"]) .sidebar .nav-submenu button[aria-current="page"],
  html:not([data-theme="dark"]) .bottom-action.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
  }

  html:not([data-theme="dark"]) .card,
  html:not([data-theme="dark"]) .sale-sheet,
  html:not([data-theme="dark"]) .product-sheet,
  html:not([data-theme="dark"]) .stock-sheet,
  html:not([data-theme="dark"]) .page .sheet,
  html:not([data-theme="dark"]) .facts article,
  html:not([data-theme="dark"]) .file-picker,
  html:not([data-theme="dark"]) .sheet form,
  html:not([data-theme="dark"]) .stat,
  html:not([data-theme="dark"]) .kpi-card,
  html:not([data-theme="dark"]) .dashboard-panel,
  html:not([data-theme="dark"]) .warning-modal-box,
  html:not([data-theme="dark"]) .product-list,
  html:not([data-theme="dark"]) .lookup-list,
  html:not([data-theme="dark"]) .profile-dropdown,
  html:not([data-theme="dark"]) .notification-panel,
  html:not([data-theme="dark"]) .search-container,
  html:not([data-theme="dark"]) .profile-card,
  html:not([data-theme="dark"]) .management-card,
  html:not([data-theme="dark"]) .language-card,
  html:not([data-theme="dark"]) .notice {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #0f172a;
  }

  /* =========================================================
     CANONICAL UNIFIED BRAND GRADIENT SYSTEM (FROM NEW SALE)
     ========================================================= */
  #pageTitle,
  #pageHeadingTitle,
  .page-title h1,
  .dashboard-heading h1,
  h1.page-title {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #059669 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
    width: fit-content !important;
  }

  .subtitle,
  .page-subtitle,
  #pageSubtitle,
  .dashboard-heading p {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #059669 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: block !important;
    clear: both !important;
    margin-top: 5px !important;
    width: fit-content !important;
    font-weight: 600 !important;
  }

  .section-title,
  .card-title,
  .panel-header h2,
  .card h2,
  .sheet-card h2,
  .erp-section h2,
  .erp-section .section-title,
  .title-customer,
  .title-sales,
  .title-product,
  .title-notes,
  .title-payment,
  .title-summary,
  .title-supplier,
  .title-items {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #059669 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
    width: fit-content !important;
  }

  .breadcrumb-trail .breadcrumb-current,
  .breadcrumb .active,
  .breadcrumb-current {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #059669 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
  }

  .page-icon-badge {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.28) !important;
  }

  html:not([data-theme="dark"]) .brand-content h1,
  html:not([data-theme="dark"]) .brand-content p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  html[data-theme="dark"] #pageTitle,
  html[data-theme="dark"] #pageHeadingTitle,
  html[data-theme="dark"] .page-title h1,
  html[data-theme="dark"] .dashboard-heading h1,
  html[data-theme="dark"] h1.page-title,
  html[data-theme="dark"] .subtitle,
  html[data-theme="dark"] .page-subtitle,
  html[data-theme="dark"] #pageSubtitle,
  html[data-theme="dark"] .dashboard-heading p,
  html[data-theme="dark"] .section-title,
  html[data-theme="dark"] .card-title,
  html[data-theme="dark"] .panel-header h2,
  html[data-theme="dark"] .card h2,
  html[data-theme="dark"] .sheet-card h2,
  html[data-theme="dark"] .erp-section h2,
  html[data-theme="dark"] .erp-section .section-title,
  html[data-theme="dark"] .title-customer,
  html[data-theme="dark"] .title-sales,
  html[data-theme="dark"] .title-product,
  html[data-theme="dark"] .title-notes,
  html[data-theme="dark"] .title-payment,
  html[data-theme="dark"] .title-summary,
  html[data-theme="dark"] .title-supplier,
  html[data-theme="dark"] .title-items,
  html[data-theme="dark"] .breadcrumb-trail .breadcrumb-current,
  html[data-theme="dark"] .breadcrumb .active,
  html[data-theme="dark"] .breadcrumb-current {
    background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #34d399 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
  }

  html[data-theme="dark"] .page-icon-badge {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.4) !important;
  }

  html:not([data-theme="dark"]) .panel-header p,
  html:not([data-theme="dark"]) .kpi-card-top,
  html:not([data-theme="dark"]) .kpi-card-bottom,
  html:not([data-theme="dark"]) .hint,
  html:not([data-theme="dark"]) label,
  html:not([data-theme="dark"]) th {
    color: #64748b !important;
  }

  html:not([data-theme="dark"]) .kpi-card::before,
  html:not([data-theme="dark"]) .dashboard-content .card::before {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
  }

  html:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not(.login-panel input):not(.login-container input):not(.floating-field input):not(.form-input):not(.form-control):not(.search-box input):not(.search-bar input),
  html:not([data-theme="dark"]) select:not(.filter-select):not(.form-input):not(.form-select),
  html:not([data-theme="dark"]) textarea:not(.form-textarea):not(.form-control),
  html:not([data-theme="dark"]) .image-preview,
  html:not([data-theme="dark"]) .code-preview-box,
  html:not([data-theme="dark"]) .profile-menu-trigger,
  html:not([data-theme="dark"]) .theme-switch,
  html:not([data-theme="dark"]) .theme-fab {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
  }

  /* Clean inputs for CRM, Showroom, Modals & Search Boxes */
  html:not([data-theme="dark"]) .form-input,
  html:not([data-theme="dark"]) .form-control,
  html:not([data-theme="dark"]) .form-select,
  html:not([data-theme="dark"]) .form-textarea,
  html:not([data-theme="dark"]) .modal-body input,
  html:not([data-theme="dark"]) .modal-body textarea,
  html:not([data-theme="dark"]) .modal-body select {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
  }

  html:not([data-theme="dark"]) .form-input:focus,
  html:not([data-theme="dark"]) .form-control:focus,
  html:not([data-theme="dark"]) .form-select:focus,
  html:not([data-theme="dark"]) .form-textarea:focus,
  html:not([data-theme="dark"]) .modal-body input:focus,
  html:not([data-theme="dark"]) .modal-body textarea:focus {
    background: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
  }

  /* Absolute Priority for Validation Error State */
  html .form-input.input-error,
  html .form-control.input-error,
  html .form-textarea.input-error,
  html:not([data-theme="dark"]) .form-input.input-error,
  html:not([data-theme="dark"]) .form-control.input-error,
  html:not([data-theme="dark"]) .form-textarea.input-error,
  .input-error {
    border: 2px solid #ef4444 !important;
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
  }

  html:not([data-theme="dark"]) .search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
  html:not([data-theme="dark"]) .search-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
  html:not([data-theme="dark"]) .search-bar input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]) {
    background: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: #0f172a !important;
  }

  html:not([data-theme="dark"]) .filter-select {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
  }

  html:not([data-theme="dark"]) .btn:not(.danger):not(.btn-danger):not(.btn-clear):not(.btn-cancel):not(.quiet):not(.ghost):not(.icon-btn):not(.btn-primary):not(.btn-outline):not(.btn-success):not(.btn-action):not(.tab-btn):not(.btn-table):not(.btn-secondary),
  html:not([data-theme="dark"]) a.btn:not(.btn-cancel):not(.btn-clear):not(.btn-outline):not(.btn-primary):not(.quiet),
  html:not([data-theme="dark"]) .btn-save,
  html:not([data-theme="dark"]) .btn-add,
  html:not([data-theme="dark"]) #addProduct,
  html:not([data-theme="dark"]) #addCustomer,
  html:not([data-theme="dark"]) button[type="submit"]:not(.danger):not(.btn-danger):not(.btn-primary):not(.btn-success):not(#saveLanguageButton):not(#saveProfileButton):not(#changePasswordButton):not(.login-button):not(#loginButton):not(.drawer-submit-btn):not(#drawerSubmitBtn) {
    background: #128a62 !important;
    color: #ffffff !important;
    border-color: #128a62 !important;
  }

  /* Modern ERP Standard Action Buttons (Blue / White / Green) */
  html:not([data-theme="dark"]) .btn-primary,
  html:not([data-theme="dark"]) button.btn-primary,
  html:not([data-theme="dark"]) a.btn-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
  }
  html:not([data-theme="dark"]) .btn-primary:hover:not(:disabled),
  html:not([data-theme="dark"]) button.btn-primary:hover:not(:disabled),
  html:not([data-theme="dark"]) a.btn-primary:hover:not(:disabled) {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
  }

  html:not([data-theme="dark"]) .btn-outline,
  html:not([data-theme="dark"]) button.btn-outline,
  html:not([data-theme="dark"]) a.btn-outline {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #cbd5e1 !important;
  }
  html:not([data-theme="dark"]) .btn-outline:hover:not(:disabled),
  html:not([data-theme="dark"]) button.btn-outline:hover:not(:disabled),
  html:not([data-theme="dark"]) a.btn-outline:hover:not(:disabled) {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
  }

  html:not([data-theme="dark"]) .btn-success,
  html:not([data-theme="dark"]) button.btn-success,
  html:not([data-theme="dark"]) a.btn-success {
    background: #10b981 !important;
    color: #ffffff !important;
    border-color: #10b981 !important;
  }
  html:not([data-theme="dark"]) .btn-success:hover:not(:disabled),
  html:not([data-theme="dark"]) button.btn-success:hover:not(:disabled),
  html:not([data-theme="dark"]) a.btn-success:hover:not(:disabled) {
    background: #059669 !important;
    border-color: #059669 !important;
  }

  html:not([data-theme="dark"]) .btn:not(.danger):not(.quiet):not(.ghost):hover:not(:disabled),
  html:not([data-theme="dark"]) a.btn:hover,
  html:not([data-theme="dark"]) .btn-save:hover,
  html:not([data-theme="dark"]) .btn-add:hover,
  html:not([data-theme="dark"]) .aykar-button:hover:not(:disabled),
  html:not([data-theme="dark"]) #addProduct:hover,
  html:not([data-theme="dark"]) #addCustomer:hover,
  html:not([data-theme="dark"]) button[type="submit"]:hover:not(:disabled):not(.login-button):not(#loginButton) {
    background: #0f7654 !important;
    border-color: #0f7654 !important;
    color: #ffffff !important;
    filter: brightness(1.05) !important;
    animation: aykar-shake 0.45s ease;
  }

  html:not([data-theme="dark"]) .btn.danger:hover,
  html:not([data-theme="dark"]) .btn-danger:hover,
  html:not([data-theme="dark"]) .icon-btn.danger:hover,
  html:not([data-theme="dark"]) #clearForm:hover {
    filter: brightness(1.16) !important;
    animation: aykar-shake 0.45s ease;
  }

  html:not([data-theme="dark"]) #backLink:hover,
  html:not([data-theme="dark"]) .icon-btn.edit:hover {
    filter: brightness(1.14) !important;
    animation: aykar-shake 0.45s ease;
  }

  html:not([data-theme="dark"]) main.page,
  html:not([data-theme="dark"]) main.user-management-page {
    width: min(1180px, calc(100% - 48px)) !important;
    max-width: 1180px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html:not([data-theme="dark"]) main.page .stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 260px)) !important;
    justify-content: start;
  }

  html:not([data-theme="dark"]) .main-area > main.page,
  html:not([data-theme="dark"]) .main-area > main.user-management-page {
    width: auto !important;
    max-width: none;
    margin: 0 !important;
    padding: 28px 32px 40px;
  }
}

/* ==============================================================================
   AYKAR BUSINESS MANAGEMENT - UNIVERSAL PROFESSIONAL PRINT SYSTEM
   Hides all navigation, headers, topbar, assistant robot, notification bells,
   user profile, dark mode switches, floating buttons, search bars, and filters.
   Prints ONLY the relevant business document / table / report with full-width layout.
   ============================================================================== */
@media print {
  /* Page Setup: Standard Margin and auto orientation */
  @page {
    margin: 10mm 12mm;
    size: auto;
  }

  /* Force pure white background and crisp readable high-contrast dark text */
  html, body {
    background: #ffffff !important;
    color: #0f172a !important;
    font-size: 10pt !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 1. HIDE ALL APPLICATION SHELL: SIDEBAR, TOPBAR, ROBOT, NOTIFICATIONS, PROFILE, CHAT */
  .sidebar,
  #dashboardSidebar,
  aside.sidebar,
  .sidebar-overlay,
  #sidebarOverlay,
  .sidebar-bottom,
  .app-credit,
  #appCredit,
  .mobile-menu-button,
  #mobileMenuButton,
  .topbar,
  header.topbar,
  #topbar,
  .topbar-right,
  .topbar-date,
  #topbarDate,
  .notification-menu,
  #notificationMenu,
  .notification-button,
  #notificationButton,
  .notification-panel,
  #notificationPanel,
  .notification-badge,
  #notificationBadge,
  .guide-lane,
  #guideLane,
  .guide-runner,
  #guideRunner,
  .guide-robot,
  #guideRobot,
  .guide-bubble,
  #guideBubble,
  .guide-ask,
  #guideAsk,
  img[src*="aykar-robot"],
  .profile-menu-container,
  #profileMenuTrigger,
  .profile-dropdown,
  #profileDropdown,
  .theme-fab,
  .theme-switch,
  .chat-dock,
  .chat-panel,
  #chatDock,
  #chatPanel,
  .chat-toggle,
  .onboarding-overlay,
  .onboarding-popover,
  .tour-popover,
  .onboarding-spotlight,
  [data-tour],
  .modal-backdrop:not(:has(.printable-sheet)),
  .toast,
  #toast,
  .banner,
  #errorBanner,
  .notice:not(.print-keep),
  #pageNotice {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* 2. HIDE ALL INTERACTIVE BUTTONS, CONTROLS, FILTERS, SEARCH, TABS, PAGINATION */
  .no-print,
  [data-no-print],
  .noprint,
  .header-actions,
  .page-actions,
  .desk-tools,
  .desk-menu,
  .header-tools,
  .period-bar,
  .period-buttons,
  .filters,
  .filter-bar,
  .filter-grid,
  .filter-card,
  .filter-inline,
  .filter-row,
  .filter-inputs,
  .search-box,
  .search-bar,
  .search-input,
  .quick-search,
  .pagination,
  .pager,
  .page-nav,
  button:not(.print-keep),
  .btn:not(.print-keep),
  a.btn:not(.print-keep),
  .status-toggle,
  .table-actions,
  th.actions-col,
  td.actions-col,
  th.action-cell,
  td.action-cell,
  a.open-row,
  a.edit-row,
  a.delete-row,
  .row-actions {
    display: none !important;
  }

  /* 3. FULL WIDTH PRINT LAYOUT (ELIMINATES 250px SIDEBAR OFFSET) */
  .app-layout {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .main-area {
    display: block !important;
    margin: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .page,
  main.page,
  .dashboard-content,
  .user-management-page,
  .main-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  /* 4. PROFESSIONAL CLEAN CARDS & SUMMARY STATS */
  .card,
  .table-card,
  .customer-card,
  .kpi-card,
  .stat,
  .stock-sheet,
  .ledger-card,
  .summary-card {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
    padding: 10px 14px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* 5. TYPOGRAPHY & REPORT HEADERS */
  h1, .page-title, #pageTitle {
    font-size: 16pt !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    background: none !important;
    -webkit-text-fill-color: #0f172a !important;
  }

  p.subtitle, .page-subtitle, #pageSubtitle {
    font-size: 9pt !important;
    color: #64748b !important;
    margin-bottom: 12px !important;
  }

  /* 6. TABLE OPTIMIZATION FOR CLEAN PRINTING */
  .table-wrap,
  .table-container,
  .responsive-table {
    overflow: visible !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }

  table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
    border: 1px solid #cbd5e1 !important;
    page-break-inside: auto !important;
  }

  thead {
    display: table-header-group !important; /* Repeats table header across multiple printed pages */
  }

  tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  th {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    font-size: 8.5pt !important;
    font-weight: 700 !important;
    padding: 6px 8px !important;
    border: 1px solid #cbd5e1 !important;
    text-align: left !important;
  }

  td {
    font-size: 8.5pt !important;
    color: #0f172a !important;
    padding: 6px 8px !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
  }

  /* Status Badges & Pills */
  .badge, .pill, .status-pill, .status-badge {
    border: 1px solid #94a3b8 !important;
    background: #f8fafc !important;
    color: #0f172a !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 8pt !important;
  }

  /* 7. MODAL STATEMENTS (Banks Statement, Payslip Sheet, etc.) */
  body:has(#activityModal:not([hidden])) .app-layout,
  body:has(.pay-modal:not([hidden])) .app-layout {
    display: none !important;
  }

  #activityModal:not([hidden]),
  .pay-modal:not([hidden]) {
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    width: 100% !important;
  }

  .sheet.statement,
  .pay-sheet {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
}



  /* =========================================================
     CANONICAL UNIFIED TYPOGRAPHY & SCALE SYSTEM (NEW SALE STANDARD)
     ========================================================= */
  html body #pageTitle,
  html body #pageHeadingTitle,
  html body .page-title h1,
  html body .dashboard-heading h1,
  html body h1.page-title,
  html body .page-heading,
  html body .page-title-wrap h1,
  html body .page-head h1,
  html body header h1,
  html body h1 {
    font-size: 23px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    line-height: 1.2 !important;
  }

  html body .subtitle,
  html body .page-subtitle,
  html body #pageSubtitle,
  html body .dashboard-heading p {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.1px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
    display: block !important;
    clear: both !important;
  }

  html body .breadcrumb-trail,
  html body .breadcrumb,
  html body .breadcrumb-trail a,
  html body .breadcrumb a,
  html body .breadcrumb-current {
    font-size: 12.5px !important;
    line-height: 1.2 !important;
  }

  html body .section-title,
  html body .card-title,
  html body .panel-header h2,
  html body .card h2,
  html body .sheet-card h2,
  html body .erp-section h2,
  html body .erp-section .section-title,
  html body .table-title,
  html body .section-head h2 {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    text-transform: capitalize !important;
  }

  html body .page-icon-badge,
  html body .title-icon-badge {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    flex-shrink: 0 !important;
  }
  html body .page-icon-badge svg,
  html body .title-icon-badge svg {
    width: 20px !important;
    height: 20px !important;
  }

  html body .icon-badge {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  html body .icon-badge svg {
    width: 18px !important;
    height: 18px !important;
  }

  html body .stat-value,
  html body .kpi-value,
  html body .kpi-card strong,
  html body .stat strong {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
  }
  html body .stat-label,
  html body .kpi-label,
  html body .kpi-card span {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
  }
  html body .stat-icon-wrap,
  html body .kpi-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  html body .stat-icon-wrap svg,
  html body .kpi-icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  html body .header-actions .btn,
  html body .top-actions .btn-action,
  html body .sale-toolbar .btn {
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }

  html body .filters input,
  html body .filters select {
    height: 36px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }


  /* =========================================================
     CANONICAL CONTAINER & VIEWPORT STABILITY (NEW SALE STANDARD)
     Fixes "Zoom In / Zoom Out" layout shift between pages
     ========================================================= */
  html {
    overflow-y: scroll !important; /* Locks vertical scrollbar so pages never jump horizontally */
  }

  html body .page,
  html body main.page,
  html body .dashboard-content,
  html body .sale-workspace,
  html body .main-content,
  html body .content-area {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 24px 28px !important;
    box-sizing: border-box !important;
  }

  html body .main-area {
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  html body .page-head,
  html body .header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  /* =========================================================
     CHAT DOCK VISIBILITY: ONLY ON DASHBOARD (MAIN SCREEN)
     Sohbet butonu sadece ana ekranda (Dashboard) görünür
     ========================================================= */
  body:not(.dashboard-page):not(:has(#kpiGrid)) .chat-dock,
  body:not(.dashboard-page):not(:has(#kpiGrid)) #chatDock,
  body:not(.dashboard-page):not(:has(#kpiGrid)) .chat-toggle,
  body:not(.dashboard-page):not(:has(#kpiGrid)) #chatToggleBtn,
  body:not(.dashboard-page):not(:has(#kpiGrid)) .chat-panel,
  body:not(.dashboard-page):not(:has(#kpiGrid)) #chatPanel {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* =========================================================
     AYKAR STANDALONE MOBILE APP (PWA) STYLES
     ========================================================= */
  :root {
    -webkit-tap-highlight-color: transparent;
  }

  html.is-standalone-pwa body,
  @media all and (display-mode: standalone) {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    user-select: none;
    -webkit-user-select: none;
  }

  html.is-standalone-pwa input,
  html.is-standalone-pwa textarea,
  html.is-standalone-pwa [contenteditable="true"] {
    user-select: text !important;
    -webkit-user-select: text !important;
  }

  /* Install Banner */
  .aykar-pwa-banner {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    max-width: 480px;
    margin: 0 auto;
    background: #101b38;
    color: #ffffff;
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    box-shadow: 0 16px 36px rgba(16, 27, 56, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 10000;
    animation: pwaSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes pwaSlideUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .aykar-pwa-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  .aykar-pwa-banner-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  }

  .aykar-pwa-banner-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .aykar-pwa-banner-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .aykar-pwa-banner-text span {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.3;
    margin-top: 2px;
  }

  .aykar-pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .aykar-pwa-banner-btn-install {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .aykar-pwa-banner-btn-install:hover {
    transform: translateY(-1px);
  }

  .aykar-pwa-banner-btn-close {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border: 0;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
  }

  /* Install Guide Modal */
  .aykar-pwa-guide-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: pwaFadeIn 0.2s ease;
  }

  @keyframes pwaFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .aykar-pwa-guide-box {
    background: #ffffff;
    border-radius: 20px;
    max-width: 440px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

  .aykar-pwa-guide-head {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
  }

  .aykar-pwa-guide-close {
    margin-left: auto;
    background: #f1f5f9;
    border: 0;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 15px;
    color: #64748b;
  }

  .aykar-pwa-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0 20px;
  }

  .aykar-pwa-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .aykar-pwa-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .aykar-pwa-step strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    margin-bottom: 2px;
  }

  .aykar-pwa-step p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
  }

  .aykar-pwa-guide-ok {
    width: 100%;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
  }

  /* =========================================================
     AYKAR MOBILE-FIRST NATIVE BOTTOM NAV & RESPONSIVE SUITE
     ========================================================= */

  /* On Desktop / Large Screens: Hide Mobile Bottom Nav, Drawer & Mobile PWA Banners */
  @media screen and (min-width: 901px) {
    .aykar-mobile-bottom-nav,
    .aykar-mobile-drawer-backdrop,
    .aykar-pwa-banner,
    .aykar-pwa-guide-backdrop {
      display: none !important;
    }
  }

  /* On Mobile & Tablet Screens (<= 900px) */
  @media screen and (max-width: 900px) {
    /* 1. Strict Viewport & Container Zero-Overflow */
    html, body {
      overflow-x: hidden !important;
      width: 100vw !important;
      max-width: 100vw !important;
      position: relative !important;
      margin: 0 !important;
      padding: 0 !important;
      box-sizing: border-box !important;
    }

    *, *::before, *::after {
      box-sizing: border-box !important;
    }

    .app-layout {
      display: block !important;
      width: 100% !important;
      max-width: 100vw !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow-x: hidden !important;
    }

    .main-area {
      display: block !important;
      width: 100% !important;
      max-width: 100vw !important;
      min-width: 0 !important;
      margin: 0 !important;
      margin-left: 0 !important;
      padding: 0 !important;
      overflow-x: hidden !important;
    }

    .page,
    .dashboard-content,
    .sale-workspace,
    .content-area,
    .main-content,
    main {
      display: block !important;
      width: 100% !important;
      max-width: 100vw !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      padding: 12px 14px calc(76px + env(safe-area-inset-bottom, 16px)) !important;
      margin: 0 auto !important;
      overflow-x: hidden !important;
      grid-template-columns: 1fr !important;
    }

    /* Form cards and panels fluid width */
    .dashboard-panel,
    .panel,
    .card,
    .form-card,
    .sheet-card,
    .erp-section,
    .product-box,
    .card-wrap {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding: 16px 14px !important;
      overflow: hidden !important;
    }

    /* Single-column Form Rows on Mobile */
    .row-2,
    .row-3,
    .row-4,
    .sale-row,
    .meta-row,
    .triplet,
    .sale-grid,
    .bottom-grid,
    .sale-fields,
    .form-row,
    .kpi-grid,
    .dashboard-grid {
      display: flex !important;
      flex-direction: column !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: 12px !important;
    }

    .field,
    .form-item,
    .form-group {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }

    /* Inputs, selects, textareas must strictly fit container width */
    input, select, textarea {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Combo Select: Input/Select fills remaining width, buttons stay fixed */
    .combo-select {
      display: flex !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: 6px !important;
      align-items: center !important;
    }

    .combo-select select,
    .combo-select input {
      flex: 1 1 auto !important;
      width: 0 !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }

    .combo-select .btn-icon {
      flex-shrink: 0 !important;
      width: 36px !important;
      min-width: 36px !important;
    }

    /* Table Wrappers Isolated with Independent Horizontal Scroll */
    .table-wrap,
    .table-container {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      display: block !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Action button bars wrap on mobile */
    .actions,
    .product-toolbar,
    .sale-toolbar,
    .header-actions,
    .page-actions,
    .btn-group {
      display: flex !important;
      flex-wrap: wrap !important;
      width: 100% !important;
      max-width: 100% !important;
      gap: 8px !important;
    }

    /* 2. Topbar Responsive Clean-up */
    .topbar {
      padding: 8px 12px !important;
      gap: 8px !important;
      width: 100% !important;
      max-width: 100vw !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
      min-height: 56px !important;
      height: auto !important;
    }

    /* 3. Hide Robot and Speech Bubble on Mobile */
    #guideLane,
    .guide-lane,
    #guideRunner,
    .guide-runner,
    .bot-pose-walk,
    .guide-bubble {
      display: none !important;
    }

    /* 4. Support Desk: Icon Only on Mobile */
    #topbarSupportText,
    .topbar-support-button span:not(.support-icon):not(.support-badge) {
      display: none !important;
    }

    .topbar-support-button {
      padding: 0 !important;
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      border-radius: 12px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .topbar-support-button .support-icon {
      font-size: 17px !important;
      margin: 0 !important;
    }

    /* Hide old desktop hamburger button on mobile (now replaced by Bottom Nav Tüm Menü) */
    .mobile-menu-button {
      display: none !important;
    }

    /* Hide desktop sidebar on mobile */
    .sidebar,
    #dashboardSidebar {
      display: none !important;
    }
    .sidebar-overlay,
    #sidebarOverlay {
      display: none !important;
    }

    /* Topbar date & profile menu compact */
    #topbarDate,
    .topbar-date,
    .topbar-user-info,
    .profile-chevron {
      display: none !important;
    }
  }

  /* =========================================================
     BOTTOM NAVIGATION BAR (NATIVE MOBILE FEEL)
     ========================================================= */
  .aykar-mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(58px + env(safe-area-inset-bottom, 16px));
    padding-bottom: max(env(safe-area-inset-bottom, 16px), 8px);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(226, 232, 240, 0.9);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 850;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
    user-select: none;
  }

  html[data-theme="dark"] .aykar-mobile-bottom-nav {
    background: rgba(16, 27, 56, 0.94);
    border-top-color: rgba(51, 65, 85, 0.7);
    box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.4);
  }

  .aykar-mobile-bottom-nav .nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    color: #64748b;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s ease, transform 0.12s ease;
    position: relative;
  }

  html[data-theme="dark"] .aykar-mobile-bottom-nav .nav-item {
    color: #94a3b8;
  }

  .aykar-mobile-bottom-nav .nav-item:active {
    transform: scale(0.94);
  }

  .aykar-mobile-bottom-nav .nav-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .aykar-mobile-bottom-nav .nav-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
  }

  .aykar-mobile-bottom-nav .nav-label {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
  }

  /* Active tab style */
  .aykar-mobile-bottom-nav .nav-item.active {
    color: #2563eb;
    font-weight: 700;
  }

  html[data-theme="dark"] .aykar-mobile-bottom-nav .nav-item.active {
    color: #60a5fa;
  }

  .aykar-mobile-bottom-nav .nav-item.active::after {
    content: "";
    position: absolute;
    top: 2px;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: #2563eb;
  }

  html[data-theme="dark"] .aykar-mobile-bottom-nav .nav-item.active::after {
    background: #60a5fa;
  }

  /* =========================================================
     MOBILE ALL MODULES BOTTOM SHEET DRAWER
     ========================================================= */
  .aykar-mobile-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 950;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: drawerFadeIn 0.22s ease-out;
  }

  @keyframes drawerFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .aykar-mobile-drawer {
    background: #ffffff;
    border-radius: 28px 28px 0 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
    animation: drawerSlideUp 0.26s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
  }

  html[data-theme="dark"] .aykar-mobile-drawer {
    background: #111a2e;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  @keyframes drawerSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .aykar-mobile-drawer .drawer-handle {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #cbd5e1;
    margin: 12px auto 8px;
    cursor: pointer;
  }

  html[data-theme="dark"] .aykar-mobile-drawer .drawer-handle {
    background: #475569;
  }

  .aykar-mobile-drawer .drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
  }

  html[data-theme="dark"] .aykar-mobile-drawer .drawer-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .aykar-mobile-drawer .drawer-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .aykar-mobile-drawer .drawer-logo-badge {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
  }

  .aykar-mobile-drawer .drawer-header strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
  }

  html[data-theme="dark"] .aykar-mobile-drawer .drawer-header strong {
    color: #f8fafc;
  }

  .aykar-mobile-drawer .drawer-header span {
    font-size: 11.5px;
    color: #64748b;
  }

  html[data-theme="dark"] .aykar-mobile-drawer .drawer-header span {
    color: #94a3b8;
  }

  .aykar-mobile-drawer .drawer-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 0;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  html[data-theme="dark"] .aykar-mobile-drawer .drawer-close-btn {
    background: #1e293b;
    color: #cbd5e1;
  }

  .aykar-mobile-drawer .drawer-scroll-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .aykar-mobile-drawer .drawer-cat-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .aykar-mobile-drawer .drawer-cat-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .aykar-mobile-drawer .drawer-cat-title.text-blue { color: #2563eb; }
  .aykar-mobile-drawer .drawer-cat-title.text-emerald { color: #059669; }
  .aykar-mobile-drawer .drawer-cat-title.text-amber { color: #d97706; }
  .aykar-mobile-drawer .drawer-cat-title.text-purple { color: #7c3aed; }

  .aykar-mobile-drawer .drawer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .aykar-mobile-drawer .drawer-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    text-decoration: none;
    transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
  }

  html[data-theme="dark"] .aykar-mobile-drawer .drawer-card {
    background: #17223b;
    border-color: #243354;
  }

  .aykar-mobile-drawer .drawer-card:active {
    transform: scale(0.95);
    background: #eff6ff;
    border-color: #93c5fd;
  }

  html[data-theme="dark"] .aykar-mobile-drawer .drawer-card:active {
    background: #1e3a8a;
    border-color: #3b82f6;
  }

  .aykar-mobile-drawer .card-emoji {
    font-size: 20px;
    line-height: 1.2;
  }

  .aykar-mobile-drawer .card-name {
    font-size: 11px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  html[data-theme="dark"] .aykar-mobile-drawer .card-name {
    color: #f1f5f9;
  }


  /* 3-Button Layout Hero Button Styles */
  .aykar-mobile-bottom-nav .nav-hero-wrap {
    position: relative;
    top: -18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    user-select: none;
    z-index: 860;
  }
  .aykar-mobile-bottom-nav .nav-hero-btn {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1d4ed8, #2563eb 50%, #10b981);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.42);
    border: 3.5px solid #ffffff;
    text-decoration: none;
    transition: transform 0.15s ease;
  }
  html[data-theme="dark"] .aykar-mobile-bottom-nav .nav-hero-btn {
    border-color: #101b38;
  }
  .aykar-mobile-bottom-nav .nav-hero-btn:active {
    transform: scale(0.92);
  }
  .aykar-mobile-bottom-nav .nav-hero-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #0f172a;
    margin-top: 3px;
    letter-spacing: -0.01em;
  }
  html[data-theme="dark"] .aykar-mobile-bottom-nav .nav-hero-label {
    color: #f1f5f9;
  }

  .aykar-mobile-hub {
    display: none !important;
  }

  /* Mobile Executive Control Hub (< 900px) */
  @media (max-width: 900px) {
    .aykar-mobile-hub {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-bottom: 20px;
      width: 100%;
    }
    .mobile-hub-welcome {
      background: linear-gradient(135deg, #101b38, #16254f 60%, #1e3a8a);
      color: #ffffff;
      padding: 16px;
      border-radius: 20px;
      box-shadow: 0 4px 16px rgba(16, 27, 56, 0.15);
    }
    .hub-welcome-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      margin-bottom: 4px;
    }
    .hub-welcome-tag {
      color: #93c5fd;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .hub-welcome-status {
      background: rgba(16, 185, 129, 0.2);
      color: #6ee7b7;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
    }
    .hub-welcome-name {
      font-size: 17px;
      font-weight: 800;
      margin: 0 0 12px 0;
      color: #ffffff;
    }
    .hub-quick-kpi {
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.07);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
      padding: 10px 14px;
    }
    .hub-kpi-box {
      flex: 1;
    }
    .hub-kpi-sub {
      display: block;
      font-size: 11px;
      color: #cbd5e1;
      margin-bottom: 2px;
    }
    .hub-kpi-val {
      font-size: 15px;
      font-weight: 800;
      color: #34d399;
    }
    .hub-kpi-alert {
      color: #fcd34d;
    }
    .hub-kpi-divider {
      width: 1px;
      height: 24px;
      background: rgba(255, 255, 255, 0.15);
      margin: 0 12px;
    }
    .mobile-hub-alert {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #fff1f2;
      border: 1px solid #fecdd3;
      padding: 12px 14px;
      border-radius: 16px;
      cursor: pointer;
    }
    html[data-theme="dark"] .mobile-hub-alert {
      background: #2b1216;
      border-color: #881337;
    }
    .alert-content {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .alert-content strong {
      font-size: 12.5px;
      color: #9f1239;
      display: block;
    }
    html[data-theme="dark"] .alert-content strong {
      color: #fecdd3;
    }
    .alert-content p {
      font-size: 11px;
      color: #be123c;
      margin: 1px 0 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    html[data-theme="dark"] .alert-content p {
      color: #fda4af;
    }
    .alert-arrow {
      color: #f43f5e;
      font-size: 18px;
      font-weight: bold;
    }
    .mobile-hub-modules {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .modules-title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2px;
    }
    .modules-title-row h3 {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      color: #64748b;
      margin: 0;
      letter-spacing: 0.04em;
    }
    .modules-subtitle {
      font-size: 11px;
      color: #2563eb;
      font-weight: 700;
    }
    .modules-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .module-card {
      background: #ffffff;
      border: 1px solid rgba(226, 232, 240, 0.9);
      border-radius: 18px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
      transition: transform 0.12s ease;
    }
    html[data-theme="dark"] .module-card {
      background: #111a2e;
      border-color: rgba(51, 65, 85, 0.7);
    }
    .module-card:active {
      transform: scale(0.97);
    }
    .module-card .module-icon {
      width: 38px;
      height: 38px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 19px;
      margin-bottom: 8px;
      position: relative;
    }
    .module-dot-alert {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ef4444;
    }
    .card-blue .module-icon { background: #eff6ff; }
    .card-emerald .module-icon { background: #ecfdf5; }
    .card-indigo .module-icon { background: #eef2ff; }
    .card-amber .module-icon { background: #fffbeb; }
    .card-purple .module-icon { background: #faf5ff; }
    .module-card strong {
      font-size: 13.5px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
      display: block;
    }
    html[data-theme="dark"] .module-card strong {
      color: #f1f5f9;
    }
    .module-card span {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
      line-height: 1.2;
    }
    html[data-theme="dark"] .module-card span {
      color: #94a3b8;
    }
    .card-full {
      grid-column: span 2;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      background: linear-gradient(to right, #faf5ff, #f5f3ff);
      border-color: #e9d5ff;
    }
    html[data-theme="dark"] .card-full {
      background: linear-gradient(to right, #1e1b4b30, #2e106540);
      border-color: #581c87;
    }
    .card-inner-flex {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .card-inner-flex .module-icon {
      margin-bottom: 0;
    }
    .card-arrow {
      color: #a855f7;
      font-size: 20px;
      font-weight: bold;
    }
  }
  @media (min-width: 901px) {
    .aykar-mobile-hub {
      display: none !important;
    }
  }


  /* =========================================================
     MOBILE TOPBAR, PROFILE DROPDOWN & ICON VISIBILITY FIXES
     ========================================================= */
  @media (max-width: 900px) {
    /* Topbar Layout & Mobile Brand */
    .topbar {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 8px 14px !important;
      min-height: 54px !important;
      box-sizing: border-box !important;
      width: 100% !important;
      background: #ffffff !important;
      border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
    }
    html[data-theme="dark"] .topbar {
      background: #0f172a !important;
      border-bottom-color: rgba(51, 65, 85, 0.7) !important;
    }

    .topbar-mobile-brand {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      flex-shrink: 0 !important;
    }
    .topbar-mobile-brand img {
      width: 30px !important;
      height: 30px !important;
      border-radius: 9px !important;
      object-fit: contain !important;
      background: #101b38 !important;
      padding: 3px !important;
    }
    .topbar-mobile-brand span {
      font-weight: 800 !important;
      font-size: 15px !important;
      color: #0f172a !important;
      letter-spacing: -0.02em !important;
    }
    html[data-theme="dark"] .topbar-mobile-brand span {
      color: #f8fafc !important;
    }

    .topbar-right {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: 8px !important;
      margin-left: auto !important;
      flex-shrink: 0 !important;
    }

    /* Support Desk Icon Button */
    .topbar-support-button {
      order: 1 !important;
      width: 38px !important;
      height: 38px !important;
      padding: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 12px !important;
      border: 1px solid #e2e8f0 !important;
      background: #f8fafc !important;
    }
    html[data-theme="dark"] .topbar-support-button {
      background: #1e293b !important;
      border-color: #334155 !important;
    }
    #topbarSupportText,
    #topbarSupportBadge {
      display: none !important;
    }

    /* Notification Bell Button */
    .notification-menu {
      order: 2 !important;
    }
    .notification-button {
      width: 38px !important;
      height: 38px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 12px !important;
      border: 1px solid #e2e8f0 !important;
      background: #f8fafc !important;
    }
    html[data-theme="dark"] .notification-button {
      background: #1e293b !important;
      border-color: #334155 !important;
    }

    /* Profile Avatar Button on the FAR RIGHT */
    .profile-menu-container {
      order: 3 !important;
      position: relative !important;
    }
    .profile-menu-trigger {
      padding: 0 !important;
      border: none !important;
      background: transparent !important;
      cursor: pointer !important;
    }
    .topbar-avatar {
      width: 38px !important;
      height: 38px !important;
      border-radius: 12px !important;
      border: 1.5px solid #2563eb !important;
    }
    .topbar-user-info,
    .profile-chevron {
      display: none !important;
    }

    /* Profile Dropdown: Anchored to Right Edge, No Screen Clipping */
    .profile-dropdown {
      position: absolute !important;
      top: calc(100% + 8px) !important;
      right: 0 !important;
      left: auto !important;
      width: 255px !important;
      max-width: calc(100vw - 24px) !important;
      box-sizing: border-box !important;
      background: #ffffff !important;
      border: 1px solid #e2e8f0 !important;
      border-radius: 18px !important;
      box-shadow: 0 16px 45px rgba(15, 23, 42, 0.22) !important;
      z-index: 9999 !important;
      overflow: hidden !important;
    }
    html[data-theme="dark"] .profile-dropdown {
      background: #111a2e !important;
      border-color: #334155 !important;
    }

    /* Fix Critical Stock Alert Text Overflow */
    .mobile-hub-alert {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      background: #fff1f2 !important;
      border: 1px solid #fecdd3 !important;
      padding: 10px 14px !important;
      border-radius: 16px !important;
      cursor: pointer !important;
      width: 100% !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
    .alert-content {
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      flex: 1 1 auto !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }
    .alert-content > div {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      overflow: hidden !important;
    }
    .alert-content strong {
      font-size: 12px !important;
      font-weight: 800 !important;
      color: #9f1239 !important;
      display: block !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .alert-content p {
      font-size: 11px !important;
      color: #be123c !important;
      margin: 1px 0 0 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
    .alert-arrow {
      color: #f43f5e !important;
      font-size: 18px !important;
      font-weight: bold !important;
      flex-shrink: 0 !important;
      margin-left: 2px !important;
    }
  }

  /* Fix for Mobile Bottom Navigation Icons (Eliminates White Squares) */
  .aykar-mobile-bottom-nav .nav-icon {
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: inherit !important;
  }
  .aykar-mobile-bottom-nav .nav-icon svg {
    width: 22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    color: currentColor !important;
    fill: none !important;
    display: block !important;
  }
  .aykar-mobile-bottom-nav .nav-item {
    color: #64748b !important;
  }
  .aykar-mobile-bottom-nav .nav-item.active {
    color: #2563eb !important;
  }
  html[data-theme="dark"] .aykar-mobile-bottom-nav .nav-item.active {
    color: #60a5fa !important;
  }
  .aykar-mobile-bottom-nav .nav-item.active .nav-icon svg {
    stroke: #2563eb !important;
  }
  html[data-theme="dark"] .aykar-mobile-bottom-nav .nav-item.active .nav-icon svg {
    stroke: #60a5fa !important;
  }
  .aykar-mobile-bottom-nav .nav-item:not(.active) .nav-icon svg {
    stroke: #64748b !important;
  }
  html[data-theme="dark"] .aykar-mobile-bottom-nav .nav-item:not(.active) .nav-icon svg {
    stroke: #94a3b8 !important;
  }