@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .panel-shell {
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -2px rgba(0, 0, 0, 0.1);
  }
  .dark .panel-shell {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(55, 65, 81, 0.4);
  }
  .sidebar-fixed {
    width: 220px;
    min-width: 220px;
    flex: 0 0 220px;
    box-sizing: border-box;
  }
}

:root {
  --el-color-primary: #2563eb;
  --el-border-radius-base: 10px;
  --el-border-radius-small: 8px;
  --el-border-radius-round: 9999px;
}

html, body, #app {
  min-height: 100%;
  background: radial-gradient(1200px at 10% 10%, #e0f2fe 0%, transparent 40%),
              radial-gradient(1200px at 90% 10%, #dbeafe 0%, transparent 40%),
              linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
}

.dark html, .dark body, .dark #app {
  background: radial-gradient(1000px at 10% 10%, rgba(30,58,138,0.35) 0%, transparent 40%),
              radial-gradient(1000px at 90% 10%, rgba(2,132,199,0.3) 0%, transparent 40%),
              linear-gradient(180deg, #0f172a 0%, #111827 100%);
}

.safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.media-fluid img,
.media-fluid video {
  max-width: 100%;
  height: auto;
  display: block;
}

.touch-target {
  min-height: 44px;
  min-width: 44px;
}

@media (max-width: 768px) {
  .sidebar-fixed {
    display: none;
    width: 0;
    min-width: 0;
    flex: 0 0 auto;
  }
  .panel-shell {
    border-radius: 0.5rem;
  }
}
