/* ====== DESIGN SYSTEM & THEME ====== */
:root {
  --bg-primary: #07070d;
  --bg-secondary: #0e0e18;
  --bg-tertiary: #161625;
  --bg-card: #0e0e18;
  --glass-bg: #161625;
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --danger-bg-solid: #1c0a0d;
  --danger-border-solid: rgba(239, 68, 68, 0.3);

  --accent-1: #ff7a00; /* Fire Orange */
  --accent-2: #ff5100; /* Red-Orange */
  --accent-3: #ff2a00; /* Fire Red */
  --accent-4: #e01a00; /* Crimson Red */
  --accent-5: #ffb700; /* Flame Gold */
  --accent-gradient: linear-gradient(135deg, var(--accent-1), var(--accent-3));
  --accent-gradient-hover: linear-gradient(135deg, var(--accent-2), var(--accent-3), var(--accent-5));

  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Background floating orbs */
.bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.20;
  animation: orbFloat 25s ease-in-out infinite;
}

.bg-orb:nth-child(1) {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--accent-1), transparent 70%);
  top: -200px;
  left: -100px;
  animation-duration: 30s;
}

.bg-orb:nth-child(2) {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--accent-3), transparent 70%);
  bottom: -150px;
  right: -100px;
  animation-duration: 25s;
}

.bg-orb:nth-child(3) {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent-4), transparent 70%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 35s;
}

@keyframes orbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(50px, -60px) scale(1.05);
  }
  66% {
    transform: translate(-40px, 40px) scale(0.95);
  }
}

.bg-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 1;
  pointer-events: none;
}

/* Glassmorphism card utility */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
}

/* Modern base form controls (no native browser chrome on dark theme) */
input:not([type=checkbox]):not([type=radio]),
select,
textarea {
  font-family: inherit;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input:not([type=checkbox]):not([type=radio]):hover,
select:hover,
textarea:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
}

input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
  border-color: var(--accent-2);
  background: rgba(255, 81, 0, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 81, 0, 0.1);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.8;
}

/* Custom inputs styling */
.form-input {
  width: 100%;
  padding: 14px 14px 14px 44px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-input:focus {
  border-color: var(--accent-2);
  background: rgba(255, 81, 0, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 81, 0, 0.1);
}

/* Form controls without icons */
.form-input-no-icon {
  width: 100%;
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: all var(--transition-fast);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-input-no-icon:focus {
  border-color: var(--accent-2);
  background: rgba(255, 81, 0, 0.05);
  box-shadow: 0 0 0 3px rgba(255, 81, 0, 0.1);
}

/* ─── Numerik Input (type="number") Modern Stil ────────────────────────────
   Çirkin ve uyumsuz tarayıcı varsayılan aşağı/yukarı okları (spin buttons) kaldırılır,
   temaya tam uyumlu, temiz ve modern bir numerik girdi görünümü sağlanır.
   ─────────────────────────────────────────────────────────────────────────── */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Compact form controls for toolbar/filter rows */
.form-input-sm {
  padding: 8px 12px !important;
  font-size: 0.82rem !important;
  min-height: 36px;
}

input.form-input.form-input-sm {
  padding-left: 32px !important;
}

select.form-input-sm,
select.form-input-no-icon.form-input-sm {
  padding-right: 36px !important;
}

/* Select / Dropdown overrides for dark theme */
select.form-input-no-icon,
select.form-input,
select:not([class]),
select.pp-input,
select.ce-input,
select.neon-input,
select.sm-select,
select.sm-input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23ff7a00' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 36px;
  cursor: pointer;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  line-height: 1.2 !important;
}

select {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.2;
}

select.form-input-no-icon option,
select.form-input option,
select:not([class]) option,
select.neon-input option,
select.pp-input option,
select.sm-select option,
select.sm-input option,
select.sm-select-sm option {
  background-color: #0e0e18;
  color: #f1f5f9;
}
select.form-input-no-icon option:checked,
select.form-input option:checked,
select:not([class]) option:checked,
select.neon-input option:checked,
select.pp-input option:checked,
select.sm-select option:checked,
select.sm-input option:checked,
select.sm-select-sm option:checked,
select.form-input-no-icon option:hover,
select.form-input option:hover,
select:not([class]) option:hover,
select.neon-input option:hover,
select.pp-input option:hover,
select.sm-select option:hover,
select.sm-input option:hover,
select.sm-select-sm option:hover,
select.form-input-no-icon option:focus,
select.form-input option:focus,
select:not([class]) option:focus,
select.neon-input option:focus,
select.pp-input option:focus,
select.sm-select option:focus,
select.sm-input option:focus,
select.sm-select-sm option:focus {
  background: linear-gradient(135deg, #ff7a00, #ff2a00) !important;
  color: #fff !important;
}

/* Checkbox & Radio modern dark theme */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  vertical-align: middle;
  flex-shrink: 0;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
  border-color: rgba(255, 255, 255, 0.35);
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent-gradient);
  border-color: var(--accent-1);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

/* Number input spinners removal for modern look */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
}

/* Button stylings */
.btn-primary {
  width: 100%;
  padding: 15px;
  background: var(--accent-gradient);
  border: none;
  border-radius: var(--radius-md);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 122, 0, 0.4);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  width: 100%;
  padding: 13px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

/* Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Blazor Validation Override */
.validation-message {
  color: #ef4444;
  font-size: 0.8rem;
  margin-top: 4px;
  display: block;
}

/* Table styling for dark theme */
table {
  color: var(--text-primary) !important;
}

th {
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  vertical-align: middle !important;
}

tr:hover td {
  background-color: rgba(255, 255, 255, 0.01) !important;
}

/* ─── Datetime-local 24 saat formatı — AM/PM kaldırıldı ─────────────────────
   Türkçe'de 12 saatlik AM/PM kavramı yoktur. Tüm datetime inputları 24 saat
   formatında gösterilir ve AM/PM alanı tamamen gizlenir.
   ─────────────────────────────────────────────────────────────────────────── */
input[type="datetime-local"],
input[type="time"] {
  /* Tarayıcıya 24 saat döngüsü kullanmasını söyle */
  hour-cycle: h23;
}

/* Webkit/Chromium: AM/PM segmentini gizle */
input[type="datetime-local"]::-webkit-datetime-edit-ampm-field,
input[type="time"]::-webkit-datetime-edit-ampm-field {
  display: none !important;
  width: 0 !important;
  opacity: 0 !important;
}

/* Webkit/Chromium: tarih-saat bölümlerini tema rengine boyama */
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--text-primary);
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
  opacity: 0.6;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ─── Topbar & Dropdown glass panels ─────────────────────────────────────────
   Bu sınıflar hiçbir zaman saydam (transparent) olmamalıdır.
   Hem dark hem light modda arka plan rengi açıkça belirtilir.
   ─────────────────────────────────────────────────────────────────────────── */
.topbar-glass {
  background: var(--bg-primary);
}

.dropdown-glass {
  background: var(--bg-secondary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

/* Global Light Theme Variable Definitions & Overrides */
[data-theme="light"],
.light-theme {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --bg-card: #ffffff;
  --glass-bg: #ffffff;
  --glass-border: #cbd5e1;
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --danger-bg-solid: #fef2f2;
  --danger-border-solid: #fecaca;
}

[data-theme="light"] body,
body.light-theme {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Light mode overrides — topbar ve dropdown */
[data-theme="light"] .topbar-glass,
.light-theme .topbar-glass {
  background: var(--bg-primary) !important;
  border-bottom-color: var(--glass-border) !important;
}

[data-theme="light"] .dropdown-glass,
.light-theme .dropdown-glass {
  background: var(--bg-secondary) !important;
  border-color: var(--glass-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Light mode select option overrides */
[data-theme="light"] select option,
.light-theme select option {
  background-color: #ffffff;
  color: #0f172a;
}
[data-theme="light"] select option:checked,
.light-theme select option:checked,
[data-theme="light"] select option:hover,
.light-theme select option:hover {
  background: linear-gradient(135deg, #ff7a00, #ff5100) !important;
  color: #fff !important;
}

/* Select sizing & text clipping fixes for 1280x800 and other screen resolutions */
select.form-input,
select.form-input-no-icon,
select.form-input-sm,
select.pp-input,
select.neon-input,
select.sm-select,
select.sm-input,
select.sm-select-sm,
select:not([class]) {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 12px !important;
  min-height: 38px !important;
  height: 38px !important;
  line-height: normal !important;
  box-sizing: border-box !important;
}

/* ─── Package Dimensions Responsive Grid ─────────────────────────────────
   Gönderi oluşturma & fiyat hesaplama ebat inputları için ekran tipi uyumluluğu.
   Küçük ekranlarda (mobil/tablet) inputların sıkışmasını önler.
   ─────────────────────────────────────────────────────────────────────────── */
.pkg-dimensions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.pkg-dimensions-grid > div {
  min-width: 0;
}

.pkg-dimensions-grid label {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pkg-dimensions-grid input[type="number"],
.pkg-dimensions-grid input[type="text"],
.pkg-dimensions-grid input.form-input,
.pkg-dimensions-grid input.pp-input {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .pkg-dimensions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

@media (max-width: 400px) {
  .pkg-dimensions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

/* ─── Admin Layout Responsive Wrapper ────────────────────────────────────── */
.admin-main-layout {
  max-width: 1440px;
  margin: 20px auto 0;
  padding: 0 24px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 992px) {
  .admin-main-layout {
    flex-direction: column !important;
    padding: 0 16px !important;
  }
  
  .admin-main-layout > .sidebar-container {
    width: 100% !important;
    position: static !important;
  }
}


/* Disable global focus outlines */
*:focus, *:focus-visible {
  outline: none !important;
}

/* Hide default number input spin buttons */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}