/* ==========================================================================
   PlusKampus Master Platform Stylesheet (Apex Dark Theme Edition)
   Inspired by Apex Dashboard UI (Obsidian Black #090A0F + Flame Orange #FF5B00)
   ========================================================================== */

:root {
  /* Apex Master Design System Tokens - Dynamically bound to database settings */
  --pk-primary: var(--brand-primary, #FF5B00);
  --pk-primary-dark: var(--brand-primary, #E04F00);
  --pk-primary-hover: var(--brand-accent, #FF7518);
  --pk-primary-light: rgba(var(--brand-primary-rgb, 255, 91, 0), 0.12);
  --pk-primary-border: rgba(var(--brand-primary-rgb, 255, 91, 0), 0.35);
  --pk-primary-ring: rgba(var(--brand-primary-rgb, 255, 91, 0), 0.25);

  /* Secondary & Status Accents */
  --pk-brand-orange: var(--brand-primary, #FF5B00);
  --pk-brand-orange-hover: var(--brand-accent, #FF7518);
  --pk-brand-green: #00D294;
  --pk-brand-blue: #3B82F6;

  /* Neutral Canvas & Surfaces */
  --pk-canvas-bg: #090A0F;
  --pk-surface-card: #12131B;
  --pk-surface-bento: #12131B;
  --pk-surface-muted: #0E0F17;
  --pk-surface-subtle: #171822;

  /* Crisp Borders */
  --pk-border: rgba(255, 255, 255, 0.08);
  --pk-border-subtle: rgba(255, 255, 255, 0.04);
  --pk-border-hover: var(--brand-accent, #FF7518);

  /* Typography */
  --pk-ink: #FFFFFF;
  --pk-subtext: #8C93A8;
  --pk-font: var(--theme-font, 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);

  /* Geometry & Shell Layout */
  --pk-sidebar-w: 260px;
  --pk-sidebar-collapsed-w: 72px;
  --pk-header-h: 60px;
  --pk-bottom-nav-h: 64px;
  --pk-radius: var(--theme-radius, 14px);
  --pk-radius-sm: 10px;
  --pk-radius-xs: 6px;

  /* Shadows */
  --pk-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --pk-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --pk-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --pk-shadow-primary: 0 4px 16px rgba(var(--brand-primary-rgb, 255, 91, 0), 0.35);
}

/* Base Body & Reset */
html {
  font-size: 16px;
  box-sizing: border-box;
  background-color: var(--pk-canvas-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--pk-canvas-bg) !important;
  color: var(--pk-ink) !important;
  font-family: var(--pk-font) !important;
  line-height: 1.5;
}

::selection {
  background-color: #FF5B00;
  color: #FFFFFF;
}


/* ==========================================================================
   GLOBAL MAPPING: UNIFIED TRANSITION FOR ALL 43 VIEW TEMPLATES
   Transforms all legacy tinted utility classes to minimal Apple surfaces
   ========================================================================== */
.bg-\[\#EEEFFD\],
.bg-\[\#eeeffd\],
[class*="bg-[#EEEFFD]"],
[class*="bg-[#eeeffd]"] {
  background-color: var(--apex-card, #13141C) !important;
  color: #FFFFFF !important;
}

.bg-\[\#E8EBF2\],
.bg-\[\#e8ebf2\],
[class*="bg-[#E8EBF2]"],
[class*="bg-[#e8ebf2]"] {
  background-color: var(--apex-sidebar, #0D0E14) !important;
  color: #FFFFFF !important;
}

.border-\[\#D2D6F5\],
.border-\[\#d2d6f5\],
[class*="border-[#D2D6F5]"],
[class*="border-[#d2d6f5]"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.text-\[\#1A1A1A\],
.text-\[\#1a1a1a\],
[class*="text-[#1A1A1A]"],
[class*="text-[#1a1a1a]"] {
  color: #FFFFFF !important;
}

.text-\[\#5C6274\],
.text-\[\#5c6274\],
[class*="text-[#5C6274]"],
[class*="text-[#5c6274]"] {
  color: #94A3B8 !important;
}

/* Global Card Shadows Refinement */
.shadow-\[0_8px_30px_rgba\(25\,30\,70\,0\.08\)\],
.shadow-\[0_4px_24px_rgba\(25\,30\,70\,0\.06\)\],
.shadow-\[0_4px_20px_-4px_rgba\(25\,30\,70\,0\.06\)\] {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   SELECT & DROPDOWN ENHANCEMENT
   ========================================================================== */
select,
.form-select,
.p-form-select select,
.custom-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-color: #13141C !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FF5B00'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px 14px !important;
  padding-right: 40px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--pk-radius-sm, 12px) !important;
  font-family: var(--pk-font, inherit) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
}

select:hover,
.form-select:hover {
  border-color: rgba(255, 91, 0, 0.4) !important;
}

select:focus,
.form-select:focus {
  outline: none !important;
  border-color: #FF5B00 !important;
  box-shadow: 0 0 0 3px rgba(255, 91, 0, 0.2) !important;
}

select option {
  font-family: var(--pk-font, inherit) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  background-color: #13141C !important;
  color: #FFFFFF !important;
  padding: 10px 14px !important;
}

select option:checked {
  background: #FF5B00 !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   INPUTS & TEXTAREAS
   ========================================================================== */
input[type="text"]:not(.raw),
input[type="email"]:not(.raw),
input[type="password"]:not(.raw),
input[type="number"]:not(.raw),
input[type="search"]:not(.raw),
textarea:not(.raw) {
  background-color: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--pk-radius-sm);
  color: #1D1D1F;
  font-family: var(--pk-font);
  font-size: 0.875rem;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:not(.raw):focus,
input[type="email"]:not(.raw):focus,
input[type="password"]:not(.raw):focus,
input[type="number"]:not(.raw):focus,
input[type="search"]:not(.raw):focus,
textarea:not(.raw):focus {
  outline: none;
  border-color: #FF5B00 !important;
  box-shadow: 0 0 0 3px rgba(255, 91, 0, 0.25) !important;
}

/* ==========================================================================
   HERO BANNER SLIDER
   ========================================================================== */
.hero-slider-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--pk-radius);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #090A0F !important;
}

.hero-slide {
  display: none !important;
  opacity: 0;
  width: 100%;
  min-height: 260px;
  transition: opacity 0.35s ease-in-out;
  position: relative;
  z-index: 1;
}

.hero-slide.active {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  opacity: 1;
}

.slider-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.slider-arrow-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.05);
}

.slider-prev-btn { left: 14px; }
.slider-next-btn { right: 14px; }

.slider-controls-group {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-controls-group .slider-arrow-btn {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
  width: 34px;
  height: 34px;
}

.slider-controls-group .slider-arrow-btn:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.45);
}

.slider-dots-container {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.25s ease;
}

.slider-dot.active {
  width: 22px;
  border-radius: 10px;
  background: #FFFFFF;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   BUTTONS: BRANDED PRESETS
   ========================================================================== */
.p-btn-orange,
.btn-kampus-orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #FF6B1A 0%, #FF5B00 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 91, 0, 0.3) !important;
  border-radius: var(--pk-radius-sm) !important;
  box-shadow: 0 4px 14px rgba(255, 91, 0, 0.3) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
}

.p-btn-orange:hover,
.btn-kampus-orange:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 91, 0, 0.45) !important;
}

.p-btn-orange:active,
.btn-kampus-orange:active {
  transform: translateY(0);
  background: #E05000 !important;
}

.p-btn-green {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, #10D860 0%, #00C853 100%) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: var(--pk-radius-sm) !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 4px 14px rgba(0, 200, 83, 0.28) !important;
  transition: transform 0.15s ease, filter 0.15s ease !important;
  cursor: pointer;
}

.p-btn-green:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.p-btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF !important;
  font-weight: 600;
  border-radius: var(--pk-radius-sm);
  transition: background 0.2s ease, transform 0.15s ease;
  cursor: pointer;
  text-decoration: none;
}

.p-btn-glass:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* ==========================================================================
   BENTO CARDS & DOCUMENT CARDS
   ========================================================================== */
.pk-bento-card {
  background: var(--apex-card, #13141C) !important;
  border: 1px solid var(--apex-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--pk-radius, 18px) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
  color: #FFFFFF !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pk-bento-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.pk-doc-card {
  background: var(--apex-canvas, #090A0F) !important;
  border: 1px solid var(--apex-border, rgba(255, 255, 255, 0.08)) !important;
  border-radius: var(--pk-radius-sm, 14px) !important;
  color: #FFFFFF !important;
  transition: all 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.pk-doc-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 91, 0, 0.5) !important;
  box-shadow: 0 10px 28px rgba(255, 91, 0, 0.15) !important;
}

/* ==========================================================================
   SIDEBAR NAVIGATION ITEMS
   ========================================================================== */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #424245;
  transition: all 0.15s ease;
  text-decoration: none;
}

.sidebar-nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #1D1D1F;
}

.sidebar-nav-item.active {
  background: #FFFFFF;
  color: var(--pk-primary);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(129, 99, 159, 0.1);
  border: 1px solid rgba(129, 99, 159, 0.15);
}

.sidebar-nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-nav-item.active .sidebar-nav-icon {
  background: var(--pk-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(129, 99, 159, 0.35);
}

.sidebar-nav-item:not(.active) .sidebar-nav-icon {
  background: #F0F0F3;
  color: #6E6E73;
}

.sidebar-nav-item:hover:not(.active) .sidebar-nav-icon {
  background: rgba(129, 99, 159, 0.15);
  color: var(--pk-primary);
}

/* ==========================================================================
   TABLES ARCHITECTURE (Minimal & Clean)
   ========================================================================== */
.admin-table-container,
.p-table-container {
  background: #FFFFFF;
  border: 1px solid var(--pk-border);
  border-radius: var(--pk-radius);
  overflow: hidden;
  box-shadow: var(--pk-shadow-sm);
}

.admin-table,
.p-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: left;
}

.admin-table th,
.p-table th {
  padding: 14px 18px;
  background: #FAFAFC;
  color: #6E6E73;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--pk-border);
  white-space: nowrap;
}

.admin-table td,
.p-table td {
  padding: 14px 18px;
  color: #1D1D1F;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
  transition: background-color 0.15s ease;
}

.admin-table tr:hover td,
.p-table tr:hover td {
  background-color: #FAFAFC;
}

.admin-table tr:last-child td,
.p-table tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   SCROLLBAR UTILITIES
   ========================================================================== */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   PLUSKAMPUS PRIMARY COMPONENT SYSTEM (tasarım.md)
   ========================================================================== */
.btn-pk-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--pk-primary);
  color: #FFFFFF !important;
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--pk-radius-sm);
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(255, 91, 0, 0.24);
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}

.btn-pk-primary:hover {
  background-color: var(--pk-primary-hover);
  box-shadow: 0 4px 14px rgba(255, 91, 0, 0.35);
  transform: translateY(-1px);
  color: #FFFFFF !important;
}

.btn-pk-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(255, 91, 0, 0.2);
}

.btn-pk-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: transparent;
  color: var(--pk-primary) !important;
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.625rem 1.25rem;
  border-radius: var(--pk-radius-sm);
  border: 1.5px solid var(--pk-primary-border);
  transition: all 0.18s ease;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}

.btn-pk-outline:hover {
  background-color: var(--pk-primary-light);
  border-color: var(--pk-primary);
}

.badge-pk-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  background-color: var(--pk-primary-light);
  color: var(--pk-primary);
  border: 1px solid var(--pk-primary-border);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Touch targets min 44x44px (tasarım.md kuralı) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile Bottom Navigation Bar (tasarım.md Bölüm 18) */
.pk-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--pk-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--pk-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
}

.pk-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  color: #6E6E73;
  text-decoration: none;
  font-size: 0.625rem;
  font-weight: 700;
  transition: all 0.15s ease;
  position: relative;
}

.pk-bottom-nav-item.active {
  color: var(--pk-primary);
}

.pk-bottom-nav-item.active svg {
  stroke: var(--pk-primary);
  transform: translateY(-1px);
}

.pk-bottom-nav-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pk-primary);
  color: #FFFFFF !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(255, 91, 0, 0.4);
  transform: translateY(-8px);
  transition: transform 0.18s ease;
}

.pk-bottom-nav-fab:hover {
  transform: translateY(-10px) scale(1.05);
}

/* Safe viewport padding when bottom nav is active */
@media (max-width: 1023px) {
  body {
    padding-bottom: calc(var(--pk-bottom-nav-h) + env(safe-area-inset-bottom, 16px) + 8px) !important;
  }
}

/* Dark mode basic support */
[data-theme="dark"] {
  --pk-canvas-bg: #090A0F;
  --pk-surface-card: #13141C;
  --pk-surface-bento: #13141C;
  --pk-surface-muted: #0E0F17;
  --pk-surface-subtle: #171822;
  --pk-border: rgba(255, 255, 255, 0.08);
  --pk-border-subtle: rgba(255, 255, 255, 0.04);
  --pk-ink: #FFFFFF;
  --pk-subtext: #8E93A6;
  --pk-primary-light: rgba(255, 91, 0, 0.15);
  --pk-primary-border: rgba(255, 91, 0, 0.35);
}