@import "tailwindcss";

/* Stripe-tarzı tuval + şablon token’ları */
@theme {
  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-600: #7c3aed;
  --color-violet-700: #6d28d9;

  --font-sans: var(--font-urbanist), ui-sans-serif, system-ui, sans-serif;

  --color-app-canvas: #f6f9fc;
  --color-app-canvas-dark: #090a0c;

  /* Sellzy-tarzı shell — petrol teal + sarı bölüm başlıkları */
  --color-shell-sidebar: #0e4e55;
  --color-shell-sidebar-dark: #0a3839;
  --color-shell-nav-active: #1c5f66;
  --color-shell-section: #facc15;
  --color-shell-canvas: #eef2f7;

  /* Şablon uyumu: bg-primary-darker / bg-primary-dark / text-warning-light / hover:text-primary-light */
  --color-primary-darker: #0a3f44;
  --color-primary-dark: #1c5f66;
  --color-warning-light: #fde047;
  --color-primary-light: #7dd3ce;

  /* Marka: ana #088178 — hover #066b64, active #055650 */
  --color-brand-25: #eff8f7;
  --color-brand-50: #dff5f2;
  --color-brand-100: #bfe8e2;
  --color-brand-200: #80d1c6;
  --color-brand-300: #4db8ab;
  --color-brand-400: #1a9e8f;
  --color-brand-500: #0d9387;
  --color-brand-600: #088178;
  --color-brand-700: #066b64;
  --color-brand-800: #055650;
  --color-brand-900: #04403a;
  --color-brand-950: #022925;

  --color-gray-dark: #1a2231;

  /* Dashboard / şablon metinleri (Sellzy benzeri) */
  --color-light-primary-text: #1a2231;
  --color-light-secondary-text: #637381;
  --color-light-disabled-text: #919eab;
  --color-primary: #088178;
  --color-error: #f04438;

  /* Ayarlar / bildirim kartları — pastel arka planlar */
  --color-accent-1: #b8e8e0;
  --color-accent-2: #fde68a;
  --color-accent-3: #fed7aa;
  --color-accent-4: #fbcfe8;
  --color-accent-5: #bfdbfe;
  --color-accent-7: #bbf7d0;

  --color-success-50: #ecfdf3;
  --color-success-500: #12b76a;
  --color-success-600: #039855;

  --color-error-50: #fef3f2;
  --color-error-500: #f04438;
  --color-error-600: #d92d20;

  --color-warning-50: #fffaeb;
  --color-warning-500: #f79009;

  --shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-theme-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  --shadow-theme-md: 0px 2px 4px -1px rgba(0, 0, 0, 0.06), 0px 4px 6px -1px rgba(0, 0, 0, 0.08);
  --shadow-theme-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.08), 0px 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-theme-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.08), 0px 10px 10px -5px rgba(0, 0, 0, 0.03);

  --spacing-4\.5: 1.125rem;
  --spacing-13: 3.25rem;

  --z-9: 9;
  --z-99: 99;
  --z-999: 999;
  --z-9999: 9999;
  --z-99999: 99999;
}

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --primary: 174 88% 27%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 174 88% 27%;
  --radius: 0.5rem;
}

@layer base {
  body {
    @apply relative bg-shell-canvas font-sans text-[15px] font-normal leading-relaxed text-zinc-900 antialiased dark:bg-app-canvas-dark dark:text-zinc-100;
    font-optical-sizing: auto;
  }
}

@layer components {
  /* Ana içerik kartı — ince gölge, net kenar (Stripe benzeri) */
  .admin-panel {
    @apply rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40 dark:shadow-none;
  }

  .admin-panel-clipped {
    @apply overflow-hidden rounded-xl border border-zinc-200/90 bg-white shadow-theme-sm dark:border-zinc-800/90 dark:bg-zinc-900/40 dark:shadow-none;
  }

  .admin-callout {
    @apply rounded-lg border border-amber-200/90 bg-amber-50/95 px-4 py-3 text-sm text-amber-950 dark:border-amber-900/60 dark:bg-amber-950/35 dark:text-amber-100;
  }

  .admin-callout-error {
    @apply rounded-lg border border-red-200/90 bg-red-50/95 px-4 py-3 text-sm text-red-950 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-100;
  }

  .menu-item {
    @apply relative flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-[13px] font-medium tracking-tight;
  }
  .menu-item-active {
    @apply bg-zinc-100 text-zinc-900 dark:bg-white/[0.08] dark:text-white;
    box-shadow: inset 3px 0 0 0 var(--color-brand-500);
  }
  .menu-item-inactive {
    @apply text-zinc-600 hover:bg-zinc-100/70 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-white/[0.05] dark:hover:text-zinc-100;
  }
  .menu-item-icon-active {
    @apply text-brand-600 dark:text-brand-400;
  }
  .menu-item-icon-inactive {
    @apply text-zinc-400 group-hover:text-zinc-600 dark:text-zinc-500 dark:group-hover:text-zinc-300;
  }
  .menu-item-icon-size svg {
    @apply size-[18px] shrink-0 stroke-[1.75] lg:size-5;
  }
  .menu-item-text {
    @apply truncate;
  }

  .menu-dropdown-item {
    @apply relative flex items-center gap-3 rounded-md px-3 py-2 text-[13px] font-medium;
  }
  .menu-dropdown-item-active {
    @apply bg-zinc-100 text-zinc-900 dark:bg-white/[0.08] dark:text-white;
    box-shadow: inset 3px 0 0 0 var(--color-brand-500);
  }
  .menu-dropdown-item-inactive {
    @apply text-zinc-600 hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-white/[0.04];
  }

  /* Platform shell — kaynak şablondaki rounded-lg / rounded-md hiyerarşisi */
  .shell-nav-dashboard {
    @apply relative flex w-full items-center gap-3 rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors duration-200;
  }
  .shell-nav-dashboard-active {
    @apply bg-primary-dark text-white;
  }
  .shell-nav-dashboard-inactive {
    @apply hover:bg-white/5;
  }
  .shell-nav-row-link {
    @apply relative flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-sm font-medium text-white transition-colors duration-150 hover:bg-white/5;
  }
  .shell-nav-row-link-active {
    @apply bg-white/[0.08];
  }
  .shell-nav-collapsible {
    @apply relative flex w-full items-center justify-between gap-3 rounded-lg px-4 py-2 pl-3 pr-3 text-sm font-semibold text-white transition-colors duration-150 hover:bg-white/5;
  }
  .shell-nav-collapsible-open {
    @apply bg-white/[0.04];
  }
  .shell-nav-icon svg {
    @apply size-[22px] shrink-0;
  }
  .shell-nav-text {
    @apply min-w-0 truncate whitespace-nowrap;
  }

  /* FullCalendar — referans: temiz ay görünümü, sol navigasyon, ortada başlık, sağda görünüm seçici */
  .fc .fc-view-harness {
    @apply max-w-full overflow-x-auto;
  }
  .fc-dayGridMonth-view.fc-view.fc-daygrid {
    @apply min-w-[718px];
  }
  .fc .fc-scrollgrid-section > * {
    border-right-width: 0;
    border-bottom-width: 0;
  }
  .fc .fc-scrollgrid {
    border-left-width: 0;
  }
  .fc .fc-toolbar.fc-header-toolbar {
    @apply mb-5 flex-col items-stretch gap-4 px-4 pt-5 sm:flex-row sm:items-center sm:justify-between sm:gap-3 sm:px-6;
  }
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk {
    @apply flex items-center;
  }
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:first-child {
    @apply shrink-0 justify-start;
  }
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
    @apply min-w-0 flex-1 justify-center px-2;
  }
  .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:last-child {
    @apply shrink-0 justify-end;
  }
  .fc-button-group {
    @apply gap-1.5;
  }
  /* Sol: ay/hafta/gün ile aynı “track” — bitişik iki segment, tek ok kaynağı (::before) */
  .custom-calendar .fc .fc-toolbar-chunk:first-child .fc-button-group {
    @apply inline-flex gap-0 rounded-xl border border-slate-200/90 bg-slate-100 p-1.5 dark:border-white/10 dark:bg-white/[0.08];
  }
  .custom-calendar .fc .fc-toolbar-chunk:first-child .fc-button-group .fc-button {
    @apply relative flex h-10 w-10 shrink-0 items-center justify-center border-0 bg-slate-800 text-white shadow-none ring-0 transition-colors hover:bg-slate-700 focus:shadow-none active:bg-slate-900 dark:bg-slate-800 dark:hover:bg-slate-700 dark:active:bg-slate-900;
    background-image: none !important;
    color: #fff !important;
  }
  .custom-calendar .fc .fc-toolbar-chunk:first-child .fc-button-group .fc-button.fc-prev-button {
    @apply rounded-l-lg rounded-r-none border-r border-slate-600/70;
  }
  .custom-calendar .fc .fc-toolbar-chunk:first-child .fc-button-group .fc-button.fc-next-button {
    @apply rounded-r-lg rounded-l-none;
  }
  .custom-calendar .fc .fc-toolbar-chunk:first-child .fc-button-group .fc-button:disabled {
    @apply cursor-not-allowed opacity-40;
  }
  /* FC’nin chevron span’i — bizim ::before ile çift ok; tamamen kaldır */
  .custom-calendar .fc .fc-toolbar-chunk:first-child .fc-button-group .fc-button .fc-icon {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    pointer-events: none !important;
  }
  .custom-calendar .fc .fc-toolbar-chunk:first-child .fc-button-group .fc-button.fc-prev-button:before {
    @apply inline-block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 6L9 12L15 18' stroke='%23ffffff' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .custom-calendar .fc .fc-toolbar-chunk:first-child .fc-button-group .fc-button.fc-next-button:before {
    @apply inline-block;
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 6L15 12L9 18' stroke='%23ffffff' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .fc-button-group .fc-button .fc-icon {
    @apply hidden;
  }
  .fc-toolbar-title {
    @apply text-center text-xl font-semibold tracking-tight text-slate-900 dark:text-white;
  }
  /* ay / hafta / gün — açık gri track, seçili beyaz hap, gölgeli (referans segmented) */
  .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child {
    @apply inline-flex rounded-xl border border-slate-200/90 bg-slate-100 p-1.5 dark:border-white/10 dark:bg-white/[0.08];
  }
  .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button-group {
    @apply gap-0;
  }
  .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button {
    @apply h-auto w-auto min-w-[4.5rem] rounded-lg border-0 bg-transparent px-4 py-2 text-[13px] font-medium lowercase text-slate-500 shadow-none transition-colors hover:bg-transparent hover:text-slate-700 focus:shadow-none dark:text-slate-400 dark:hover:text-slate-200;
  }
  .fc-header-toolbar.fc-toolbar .fc-toolbar-chunk:last-child .fc-button.fc-button-active {
    @apply bg-white font-bold text-slate-900 shadow-sm dark:bg-slate-700/90 dark:text-white dark:shadow-md dark:shadow-black/20;
  }
  .fc-theme-standard th {
    @apply rounded-none border-x-0 border-t border-slate-200 bg-white text-left dark:border-white/10 dark:bg-transparent;
  }
  .fc-theme-standard td,
  .fc-theme-standard .fc-scrollgrid {
    @apply rounded-none border-slate-200 dark:border-white/10;
  }
  .fc .fc-scrollgrid-sync-inner,
  .fc .fc-daygrid-day-frame {
    @apply rounded-none;
  }
  .fc .fc-col-header-cell-cushion {
    @apply px-3 py-3 text-[11px] font-semibold uppercase tracking-wider text-slate-400 dark:text-slate-500;
  }
  .fc .fc-daygrid-day.fc-day-today {
    @apply bg-transparent;
  }
  /* FullCalendar kökü: etkinlik mavi çerçevesini kaldır + CQW referansı (tüm görünüm ağacı bu altında) */
  .custom-calendar .fc {
    --fc-event-bg-color: transparent;
    --fc-event-border-color: transparent;
    --fc-event-text-color: inherit;
    container-type: inline-size;
    container-name: fc-cal-root;
  }
  .custom-calendar .fc-daygrid-event.fc-h-event {
    border-width: 0 !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
  .custom-calendar .fc-daygrid-event .fc-event-main {
    color: inherit !important;
  }
  /* Ay görünümü: kare hücre — sütun genişliği = satır yüksekliği (CQW / 7) */
  .custom-calendar .fc-dayGridMonth-view .fc-daygrid-body .fc-scrollgrid-sync-table {
    table-layout: fixed;
    width: 100%;
  }
  .custom-calendar .fc-dayGridMonth-view .fc-daygrid-body td.fc-daygrid-day {
    @apply p-0 align-top;
    box-sizing: border-box;
    vertical-align: top;
    width: 14.285714%;
    height: calc(100cqw / 7);
    min-height: calc(100cqw / 7);
    max-height: calc(100cqw / 7);
  }
  .fc .fc-daygrid-day {
    @apply p-0 align-top;
  }
  .custom-calendar .fc-dayGridMonth-view .fc-daygrid-day-frame {
    @apply h-full min-h-0 rounded-none;
  }
  @supports not (container-type: inline-size) {
    .custom-calendar .fc-dayGridMonth-view .fc-daygrid-body td.fc-daygrid-day {
      height: auto;
      min-height: 5.5rem;
      max-height: none;
      aspect-ratio: 1 / 1;
    }
  }
  .fc .fc-daygrid-day.fc-day-today .fc-scrollgrid-sync-inner {
    @apply rounded-none bg-slate-100 dark:bg-white/[0.06];
  }
  .fc .fc-daygrid-day-top {
    @apply flex flex-row justify-start px-2 pt-2;
  }
  .fc .fc-daygrid-day-number {
    @apply p-0 text-sm font-medium text-slate-800 dark:text-slate-100;
  }
  .fc .fc-day-other .fc-daygrid-day-top {
    opacity: 1;
  }
  .fc .fc-day-other .fc-daygrid-day-top .fc-daygrid-day-number {
    @apply text-slate-300 dark:text-white/25;
  }
  /* Takvim etkinliği: pastel zemin + ince çerçeve (ton rengi) + sol doygun çubuk — FC mavi border yok */
  .calendar-event-pill {
    @apply mx-1 my-1 flex min-h-[2.125rem] w-[calc(100%-0.5rem)] max-w-full min-w-0 items-stretch overflow-hidden rounded-[10px] border border-transparent shadow-none;
  }
  .calendar-event-accent {
    @apply w-1.5 shrink-0 rounded-l-[9px];
  }
  .calendar-event-body {
    @apply flex min-w-0 flex-1 flex-col justify-center gap-0.5 py-2 pl-2.5 pr-2;
  }
  .calendar-event-title {
    @apply truncate text-left text-[13px] font-semibold leading-snug tracking-tight text-slate-900 dark:text-slate-50;
  }
  .calendar-event-time {
    @apply text-left text-[11px] font-medium text-slate-600 dark:text-slate-400;
  }
  .calendar-event-pill.calendar-event-tone-0 {
    @apply border border-emerald-200/70 bg-emerald-50 dark:border-emerald-700/40 dark:bg-emerald-950/50;
  }
  .calendar-event-pill.calendar-event-tone-0 .calendar-event-accent {
    @apply bg-emerald-600 dark:bg-emerald-400;
  }
  .calendar-event-pill.calendar-event-tone-1 {
    @apply border border-blue-200/70 bg-blue-50 dark:border-blue-700/40 dark:bg-blue-950/50;
  }
  .calendar-event-pill.calendar-event-tone-1 .calendar-event-accent {
    @apply bg-blue-600 dark:bg-blue-400;
  }
  .calendar-event-pill.calendar-event-tone-2 {
    @apply border border-orange-200/70 bg-orange-50 dark:border-orange-700/40 dark:bg-orange-950/45;
  }
  .calendar-event-pill.calendar-event-tone-2 .calendar-event-accent {
    @apply bg-orange-600 dark:bg-orange-400;
  }
  .calendar-event-pill.calendar-event-tone-3 {
    @apply border border-violet-200/70 bg-violet-50 dark:border-violet-700/40 dark:bg-violet-950/50;
  }
  .calendar-event-pill.calendar-event-tone-3 .calendar-event-accent {
    @apply bg-violet-600 dark:bg-violet-400;
  }
  .calendar-event-pill.calendar-event-tone-4 {
    @apply border border-rose-200/70 bg-rose-50 dark:border-rose-700/40 dark:bg-rose-950/50;
  }
  .calendar-event-pill.calendar-event-tone-4 .calendar-event-accent {
    @apply bg-rose-600 dark:bg-rose-400;
  }
  .calendar-event-pill.calendar-event-tone-5 {
    @apply border border-amber-200/70 bg-amber-50 dark:border-amber-700/40 dark:bg-amber-950/45;
  }
  .calendar-event-pill.calendar-event-tone-5 .calendar-event-accent {
    @apply bg-amber-600 dark:bg-amber-400;
  }
  .calendar-event-pill.calendar-event-tone-6 {
    @apply border border-teal-200/70 bg-teal-50 dark:border-teal-700/40 dark:bg-teal-950/50;
  }
  .calendar-event-pill.calendar-event-tone-6 .calendar-event-accent {
    @apply bg-teal-600 dark:bg-teal-400;
  }
  .calendar-event-pill.calendar-event-tone-7 {
    @apply border border-slate-200/80 bg-slate-100 dark:border-slate-600/50 dark:bg-slate-800/60;
  }
  .calendar-event-pill.calendar-event-tone-7 .calendar-event-accent {
    @apply bg-slate-600 dark:bg-slate-400;
  }
  .fc-event {
    @apply focus:shadow-none;
  }
  .fc-daygrid-event.fc-event-start {
    @apply ml-0 mr-0;
  }
  .fc-direction-ltr .fc-timegrid-slot-label-frame {
    @apply px-3 py-1.5 text-left text-sm font-medium text-slate-500 dark:text-slate-400;
  }
  .fc .fc-timegrid-axis-cushion {
    @apply text-sm font-medium text-slate-500 dark:text-slate-400;
  }
  .custom-calendar .fc-h-event {
    background-color: transparent !important;
    border: none !important;
    color: inherit;
  }
  .custom-calendar .fc.fc-media-screen {
    @apply min-h-[42rem] pb-6;
  }
}

@layer utilities {
  /* Geriye dönük sınıf adı; tipografi Urbanist */
  .font-dm-sans {
    font-family: var(--font-urbanist), ui-sans-serif, system-ui, sans-serif;
    font-optical-sizing: auto;
  }

  .font-urbanist {
    font-family: var(--font-urbanist), ui-sans-serif, system-ui, sans-serif;
    font-optical-sizing: auto;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .custom-scrollbar::-webkit-scrollbar {
    @apply size-1.5;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    @apply rounded-full;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply rounded-full bg-zinc-300 dark:bg-zinc-600;
  }

  /* Koyu yan panel için açık scrollbar */
  .custom-scrollbar-white::-webkit-scrollbar {
    @apply w-1.5;
  }
  .custom-scrollbar-white::-webkit-scrollbar-track {
    @apply rounded-full bg-transparent;
  }
  .custom-scrollbar-white::-webkit-scrollbar-thumb {
    @apply rounded-full bg-white/20 hover:bg-white/30;
  }
  .custom-scrollbar-white {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  }
}