/* 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 {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  box-shadow: 0 12px 28px rgba(16, 27, 56, 0.16);
}

.theme-fab button {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 16px;
}

.theme-switch button[aria-pressed="true"],
.theme-fab button[aria-pressed="true"] {
  background: linear-gradient(115deg, #12d9a0 0%, #089fba 48%, #3158ed 100%);
  color: #ffffff;
}

@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(115deg, #12d9a0, #089fba, #7c5cff, #3158ed) 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"] .floating-field input,
  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"] .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: #f5f7fb;
    --white: #ffffff;
    --text: #17233d;
    --muted: #64748b;
    --border: #e6ebf2;
    --navy: #101b38;
  }

  html:not([data-theme="dark"]) body {
    background: #f5f7fb !important;
    color: #17233d;
  }

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

  html:not([data-theme="dark"]) .sidebar {
    background: #101b38 !important;
    color: #e8eef8 !important;
    border-color: #1c2b4a !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: #e8eef8 !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: #9aabc6 !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: #1a2d52 !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"] {
    background: #1769ff !important;
    color: #ffffff !important;
    box-shadow: none !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"]) .login-panel,
  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: #e6ebf2 !important;
    color: #17233d;
  }

  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"]),
  html:not([data-theme="dark"]) select,
  html:not([data-theme="dark"]) textarea,
  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: #17233d !important;
    border-color: #d7dee8 !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) {
    filter: brightness(0.86) !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;
  }
}

@media print {
  .theme-switch,
  .theme-fab {
    display: none !important;
  }
}