/**
 * Digitify × DinamicApp — Admin Panel Design System
 * CDN: <link rel="stylesheet" href="https://cdn.digitify.tr/admin-theme.css">
 *
 * Değişkenler override edilebilir. Örn:
 *   :root { --dp-primary: #e11d48; }  ← kırmızı temalı proje
 */

/* ════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════ */
:root {
  /* Brand */
  --dp-primary:       #2B1297;
  --dp-primary-light: #4F2FD4;
  --dp-primary-dark:  #1B1162;
  --dp-accent:        #22c55e;
  --dp-accent-teal:   #14b8a6;

  /* Nötr */
  --dp-bg:            #F5F4FF;
  --dp-surface:       #FFFFFF;
  --dp-border:        #E5E4F0;
  --dp-border-focus:  #4F2FD4;

  /* Metin */
  --dp-text:          #111827;
  --dp-text-secondary:#6B7280;
  --dp-text-muted:    #9CA3AF;

  /* Durum */
  --dp-success:       #22c55e;
  --dp-warning:       #f59e0b;
  --dp-danger:        #ef4444;
  --dp-info:          #3b82f6;

  /* Sidebar */
  --dp-sidebar-bg:    #1B1162;
  --dp-sidebar-w:     240px;

  /* Spacing & radius */
  --dp-radius:        10px;
  --dp-radius-lg:     14px;
  --dp-radius-sm:     7px;
  --dp-shadow:        0 1px 3px rgba(27,17,98,.08), 0 4px 16px rgba(27,17,98,.06);
  --dp-shadow-md:     0 4px 20px rgba(27,17,98,.12);
}

/* ════════════════════════════════════════
   RESET & BASE
════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--dp-text);
  background: var(--dp-bg);
  margin: 0;
}

/* ════════════════════════════════════════
   LAYOUT
════════════════════════════════════════ */
.dp-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.dp-sidebar {
  width: var(--dp-sidebar-w);
  background: var(--dp-sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 100;
  transition: transform .25s;
}

.dp-sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: flex; align-items: center; gap: 10px;
}
.dp-sidebar-logo img {
  height: 22px; width: auto;
  filter: brightness(0) invert(1);
}
.dp-sidebar-logo span {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.60);
}

.dp-nav { padding: 12px 10px; flex: 1; }
.dp-nav-group { margin-bottom: 24px; }
.dp-nav-label {
  font-size: 10px; font-weight: 700; letter-spacing: .8px;
  color: rgba(255,255,255,.35); text-transform: uppercase;
  padding: 0 10px; margin-bottom: 6px;
}
.dp-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--dp-radius-sm);
  color: rgba(255,255,255,.70);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  transition: background .15s, color .15s;
  cursor: pointer;
}
.dp-nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.dp-nav-item.active {
  background: linear-gradient(135deg, var(--dp-primary-light), #6D3AE8);
  color: #fff;
  box-shadow: 0 2px 10px rgba(79,47,212,.40);
}
.dp-nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }
.dp-nav-item.active svg { opacity: 1; }

.dp-nav-badge {
  margin-left: auto;
  background: var(--dp-accent);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
}

.dp-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.dp-sidebar-user {
  display: flex; align-items: center; gap: 10px;
}
.dp-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dp-primary-light), var(--dp-accent));
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.dp-user-name  { font-size: 12.5px; font-weight: 600; color: #fff; }
.dp-user-role  { font-size: 10.5px; color: rgba(255,255,255,.50); }

/* ── Main content ── */
.dp-main {
  margin-left: var(--dp-sidebar-w);
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 100vh;
}

/* ── Topbar ── */
.dp-topbar {
  height: 56px;
  background: var(--dp-surface);
  border-bottom: 1px solid var(--dp-border);
  display: flex; align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky; top: 0; z-index: 50;
}
.dp-topbar-title {
  font-size: 15px; font-weight: 700; color: var(--dp-primary-dark);
  flex: 1;
}
.dp-topbar-actions { display: flex; align-items: center; gap: 8px; }

/* ── Page content ── */
.dp-content { padding: 24px; flex: 1; }

/* ════════════════════════════════════════
   COMPONENTS
════════════════════════════════════════ */

/* ── Kart ── */
.dp-card {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  box-shadow: var(--dp-shadow);
  padding: 20px 22px;
}
.dp-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.dp-card-title {
  font-size: 14px; font-weight: 700; color: var(--dp-primary-dark);
}
.dp-card-subtitle {
  font-size: 12px; color: var(--dp-text-muted); margin-top: 2px;
}

/* ── İstatistik kartı ── */
.dp-stat {
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-lg);
  box-shadow: var(--dp-shadow);
  padding: 18px 20px;
  display: flex; align-items: flex-start; gap: 14px;
}
.dp-stat-icon {
  width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; flex-shrink: 0;
}
.dp-stat-icon svg { width: 20px; height: 20px; color: #fff; }
.dp-stat-icon.purple { background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light)); }
.dp-stat-icon.green  { background: linear-gradient(135deg, var(--dp-accent), var(--dp-accent-teal)); }
.dp-stat-icon.amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.dp-stat-icon.blue   { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.dp-stat-value { font-size: 22px; font-weight: 800; color: var(--dp-text); letter-spacing: -0.5px; }
.dp-stat-label { font-size: 12px; color: var(--dp-text-muted); margin-top: 2px; }
.dp-stat-change {
  font-size: 11px; font-weight: 600; margin-top: 4px;
}
.dp-stat-change.up   { color: var(--dp-success); }
.dp-stat-change.down { color: var(--dp-danger); }

/* ── Grid ── */
.dp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dp-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.dp-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

/* ── Butonlar ── */
.dp-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: var(--dp-radius-sm);
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
  transition: opacity .15s, transform .15s, box-shadow .15s;
  white-space: nowrap;
}
.dp-btn:hover  { opacity: .88; transform: translateY(-1px); }
.dp-btn:active { transform: translateY(0); }
.dp-btn svg { width: 15px; height: 15px; }

.dp-btn-primary {
  background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light));
  color: #fff;
  box-shadow: 0 3px 12px rgba(43,18,151,.28);
}
.dp-btn-success {
  background: linear-gradient(135deg, var(--dp-accent), var(--dp-accent-teal));
  color: #fff;
  box-shadow: 0 3px 12px rgba(34,197,94,.28);
}
.dp-btn-outline {
  background: transparent;
  border: 1.5px solid var(--dp-border);
  color: var(--dp-text-secondary);
}
.dp-btn-outline:hover { border-color: var(--dp-primary-light); color: var(--dp-primary); background: #F0EEFF; }
.dp-btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
}
.dp-btn-sm { padding: 6px 12px; font-size: 12px; }
.dp-btn-lg { padding: 12px 22px; font-size: 14.5px; }

/* ── Form elemanları ── */
.dp-field { margin-bottom: 16px; }
.dp-label {
  display: block; font-size: 12px; font-weight: 600;
  color: #374151; margin-bottom: 5px;
}
.dp-input, .dp-select, .dp-textarea {
  width: 100%; padding: 9px 12px;
  font-family: inherit; font-size: 13.5px;
  border: 1.5px solid var(--dp-border); border-radius: var(--dp-radius-sm);
  background: #FAFAFA; color: var(--dp-text); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.dp-input:focus, .dp-select:focus, .dp-textarea:focus {
  border-color: var(--dp-primary-light);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(79,47,212,.09);
}
.dp-input::placeholder { color: #D1D5DB; }
.dp-textarea { resize: vertical; min-height: 90px; }

/* ── Tablo ── */
.dp-table-wrap {
  overflow-x: auto;
  border-radius: var(--dp-radius-lg);
  border: 1px solid var(--dp-border);
}
.dp-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.dp-table th {
  background: #F9F8FF;
  padding: 11px 14px;
  text-align: left; font-size: 11.5px; font-weight: 700;
  color: var(--dp-text-muted); text-transform: uppercase; letter-spacing: .5px;
  border-bottom: 1px solid var(--dp-border);
}
.dp-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--dp-border);
  color: var(--dp-text);
}
.dp-table tr:last-child td { border-bottom: none; }
.dp-table tr:hover td { background: #FAF9FF; }

/* ── Badge / etiket ── */
.dp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700;
}
.dp-badge-success { background: #DCFCE7; color: #15803d; }
.dp-badge-warning { background: #FEF9C3; color: #92400e; }
.dp-badge-danger  { background: #FEE2E2; color: #b91c1c; }
.dp-badge-info    { background: #DBEAFE; color: #1d4ed8; }
.dp-badge-purple  { background: #EDE9FE; color: var(--dp-primary); }

/* ── Powered-by footer ── */
.dp-powered {
  text-align: center; padding: 16px;
  border-top: 1px solid var(--dp-border);
  font-size: 11px; color: var(--dp-text-muted);
}
.dp-powered a { font-weight: 700; text-decoration: none; }
.dp-powered .dp-pf-d  { color: var(--dp-primary); }
.dp-powered .dp-pf-da {
  background: linear-gradient(90deg, #10b981, #14b8a6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.dp-powered a:hover { text-decoration: underline; }

/* ════════════════════════════════════════
   FILAMENT v3 OVERRIDES
   Filament panellerinde (digitify.tr, crm.dinamicapp.com)
   .fi-* class'larını Digitify design system'e uyarlar.
════════════════════════════════════════ */

/* ── Filament Sidebar ── */
aside.fi-sidebar {
  background-color: var(--dp-sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 2px 0 20px rgba(27,17,98,.18) !important;
}
.fi-sidebar-header {
  background-color: var(--dp-sidebar-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.fi-sidebar-footer {
  background-color: rgba(0,0,0,.12) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.fi-brand-name { color: #ffffff !important; }
.fi-sidebar-group > .fi-sidebar-group-label { color: rgba(255,255,255,.28) !important; }

/* Filament sidebar nav — default state */
aside.fi-sidebar .fi-sidebar-item-icon { color: rgba(255,255,255,.5) !important; }
aside.fi-sidebar .fi-sidebar-item-label { color: rgba(255,255,255,.75) !important; }
aside.fi-sidebar .fi-sidebar-item-button { background: transparent !important; }

/* Filament sidebar nav — active (Filament adds .fi-active.fi-sidebar-item-active + bg-gray-100) */
aside.fi-sidebar .fi-active > .fi-sidebar-item-button,
aside.fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button {
  background: linear-gradient(135deg, var(--dp-primary-light), #6D3AE8) !important;
  box-shadow: 0 2px 12px rgba(79,47,212,.4) !important;
  border-radius: 8px !important;
}
aside.fi-sidebar .fi-active .fi-sidebar-item-label,
aside.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-label { color: #fff !important; font-weight: 600 !important; }
aside.fi-sidebar .fi-active .fi-sidebar-item-icon,
aside.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-icon { color: #fff !important; }
aside.fi-sidebar .fi-active .fi-sidebar-item-grouped-border div[class*="bg-primary"],
aside.fi-sidebar .fi-sidebar-item-active .fi-sidebar-item-grouped-border div[class*="bg-primary"] { background-color: #fff !important; }

/* Filament sidebar nav — hover */
aside.fi-sidebar .fi-sidebar-item-button:hover { background: rgba(255,255,255,.08) !important; }
aside.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-label { color: #fff !important; }
aside.fi-sidebar .fi-sidebar-item-button:hover .fi-sidebar-item-icon { color: #fff !important; }
aside.fi-sidebar .fi-active > .fi-sidebar-item-button:hover,
aside.fi-sidebar .fi-sidebar-item-active > .fi-sidebar-item-button:hover {
  background: linear-gradient(135deg, var(--dp-primary-light), #6D3AE8) !important;
}

/* Filament sidebar compact spacing */
aside.fi-sidebar .fi-sidebar-nav { padding: 8px 6px !important; }
aside.fi-sidebar .fi-sidebar-group { margin-bottom: 2px !important; padding: 0 !important; }
aside.fi-sidebar .fi-sidebar-group + .fi-sidebar-group { margin-top: 2px !important; }
aside.fi-sidebar .fi-sidebar-group-label { padding-top: 6px !important; padding-bottom: 4px !important; }
aside.fi-sidebar .fi-sidebar-item { margin-bottom: 1px !important; }
aside.fi-sidebar .fi-sidebar-item-button { padding-top: 7px !important; padding-bottom: 7px !important; }
aside.fi-sidebar .fi-sidebar-group-items { gap: 1px !important; }

/* Filament sidebar footer */
.fi-sidebar-footer, .fi-sidebar-footer * { color: rgba(255,255,255,.6) !important; }

/* Filament sidebar scrollbar */
aside.fi-sidebar::-webkit-scrollbar { width: 4px; }
aside.fi-sidebar::-webkit-scrollbar-track { background: transparent; }
aside.fi-sidebar::-webkit-scrollbar-thumb { background: rgba(79,47,212,.3); border-radius: 10px; }

/* ── Filament Main ── */
.fi-main { background: var(--dp-bg) !important; }
.fi-topbar { border-bottom-color: var(--dp-border) !important; }

/* ── Filament Cards ── */
.fi-section, .fi-wi-stats-overview-stat {
  border-color: var(--dp-border) !important;
  border-radius: var(--dp-radius-lg) !important;
  box-shadow: var(--dp-shadow) !important;
}
.fi-section-header-heading, .fi-header-heading { color: var(--dp-primary-dark) !important; }

/* ── Filament Stat Widgets ── */
.fi-wi-stats-overview-stat-value { color: var(--dp-primary-dark) !important; font-weight: 800 !important; }
.fi-wi-stats-overview-stat-description { color: var(--dp-text-secondary) !important; }

/* ── Filament Buttons ── */
.fi-btn-primary {
  background: linear-gradient(135deg, var(--dp-primary), var(--dp-primary-light)) !important;
  border: none !important;
  border-radius: 9px !important;
  box-shadow: 0 3px 14px rgba(43,18,151,.3) !important;
}
.fi-btn-primary:hover { box-shadow: 0 6px 24px rgba(43,18,151,.4) !important; transform: translateY(-1px); }
.fi-btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; border-radius: 9px !important; }

/* ── Filament Tables ── */
.fi-ta-header-cell { background: #F9F8FF !important; }
.fi-ta-row:hover { background: #FAF9FF !important; }

/* ── Filament Form Focus ── */
.fi-input:focus-within { border-color: var(--dp-primary-light) !important; box-shadow: 0 0 0 3px rgba(79,47,212,.09) !important; }

/* ── Filament Tabs ── */
.fi-tabs-tab[aria-selected="true"] { border-color: var(--dp-primary-light) !important; color: var(--dp-primary) !important; }

/* ── Filament Badges ── */
.fi-badge-primary { background: #EDE9FE !important; color: var(--dp-primary) !important; }

/* ── Filament Global Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(79,47,212,.15); border-radius: 10px; }

/* ── Filament Dark Mode ── */
.dark aside.fi-sidebar { background-color: #0F0A3E !important; }
.dark .fi-sidebar-header { background-color: #0F0A3E !important; }
.dark .fi-sidebar-footer { background-color: rgba(0,0,0,.20) !important; }
.dark .fi-main { background: #0c0a1a !important; }
.dark .fi-section, .dark .fi-wi-stats-overview-stat { border-color: rgba(79,47,212,.15) !important; box-shadow: 0 1px 3px rgba(0,0,0,.2) !important; }
.dark .fi-section-header-heading, .dark .fi-header-heading { color: #c4b5fd !important; }
.dark .fi-wi-stats-overview-stat-value { color: #c4b5fd !important; }
.dark .fi-ta-header-cell { background: rgba(27,17,98,.15) !important; }
.dark .fi-ta-row:hover { background: rgba(27,17,98,.08) !important; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 768px) {
  .dp-sidebar { transform: translateX(-100%); }
  .dp-sidebar.open { transform: translateX(0); }
  .dp-main { margin-left: 0; }
  .dp-grid-4, .dp-grid-3 { grid-template-columns: 1fr 1fr; }
  .dp-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dp-grid-4, .dp-grid-3, .dp-grid-2 { grid-template-columns: 1fr; }
  .dp-content { padding: 16px; }
}