/* ============================================
   ADMIN PANEL - RESPONSIVE
   Mobile breakpoints and responsive patterns
   ============================================ */

/* === MOBILE FIRST BASE (320px+) === */
/* Already handled in base styles */

/* === SMALL MOBILE (360px+) === */
@media (min-width: 360px) {
  :root {
    --font-size-base: 0.9375rem;
  }
}

/* === LARGE MOBILE (480px+) === */
@media (min-width: 480px) {
  .login-box {
    padding: 2rem;
  }
  
  .modal {
    width: 95%;
    max-width: 480px;
  }
}

/* === TABLET (640px+) === */
@media (min-width: 640px) {
  :root {
    --font-size-base: 1rem;
  }
  
  /* Navigation improvements */
  .admin-nav {
    padding: 0 var(--space-xl);
  }
  
  /* Form layouts */
  .form-group.inline {
    display: grid;
    grid-template-columns: 200px 1fr;
    align-items: start;
    gap: var(--space-md);
  }
  
  .form-group.inline label {
    padding-top: 0.75rem;
  }
  
  /* Post items */
  .post-item {
    grid-template-columns: 1fr auto auto;
  }
  
  .post-actions {
    flex-direction: row;
  }
  
  /* Image items */
  .image-item {
    grid-template-columns: 1fr 1fr auto;
  }
  
  /* Stats grid */
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Grid utilities */
  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  
  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

/* === TABLET LANDSCAPE (768px+) === */
@media (min-width: 768px) {
  /* Sidebar visible */
  .sidebar {
    display: block;
  }
  
  .mobile-menu-toggle {
    display: none;
  }
  
  /* Dashboard layout */
  .dashboard-container {
    grid-template-columns: var(--sidebar-width) 1fr;
  }
  
  /* Navigation spacing */
  .nav-menu {
    gap: var(--space-md);
  }
  
  /* Login box */
  .login-box {
    padding: 2.5rem;
  }
  
  /* Main content */
  .main-content {
    padding: var(--space-xl);
  }
  
  /* Modals */
  .modal {
    max-width: 600px;
  }
  
  /* Toolbar spacing */
  .toolbar {
    justify-content: flex-start;
    gap: var(--space-md);
  }
  
  /* Form actions */
  .form-actions {
    flex-direction: row;
    justify-content: flex-end;
  }
  
  .form-actions button {
    width: auto;
  }
}

/* === DESKTOP (1024px+) === */
@media (min-width: 1024px) {
  :root {
    --font-size-base: 1.0625rem;
  }
  
  /* Main content spacing */
  .main-content {
    padding: clamp(2rem, 4vw, 3rem);
  }
  
  /* Editor layout */
  .editor-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  
  .editor-textarea,
  .preview-content {
    min-height: 600px;
  }
  
  /* Stats grid */
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Grid utilities */
  .grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  
  /* Cards hover effects enhanced */
  .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
  }
  
  /* Post item hover */
  .post-item:hover {
    transform: translateY(-4px);
  }
}

/* === LARGE DESKTOP (1280px+) === */
@media (min-width: 1280px) {
  /* Wider sidebar */
  .dashboard-container {
    grid-template-columns: 280px 1fr;
  }
  
  .sidebar {
    padding: var(--space-xl);
  }
  
  /* Content max-width */
  .main-content {
    max-width: 1600px;
    margin: 0 auto;
  }
  
  /* Login container */
  .login-container {
    padding: 4rem;
  }
  
  /* Modals */
  .modal {
    max-width: 800px;
  }
}

/* === EXTRA LARGE (1536px+) === */
@media (min-width: 1536px) {
  :root {
    --font-size-base: 1.125rem;
  }
  
  /* Main content */
  .main-content {
    padding: 3rem;
  }
  
  /* Card spacing */
  .card {
    padding: var(--space-xl);
  }
  
  /* Settings sections */
  .settings-section {
    padding: var(--space-xl);
  }
}

/* === TOUCH DEVICE OPTIMIZATIONS === */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  button,
  .btn,
  a,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: var(--touch-target-min);
    min-width: var(--touch-target-min);
  }
  
  /* Remove hover effects on touch */
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
  
  .post-item:hover {
    transform: none;
  }
  
  .stat-card:hover {
    transform: none;
  }
  
  /* Larger tap areas for nav */
  .nav-menu a {
    padding: var(--space-md) var(--space-lg);
  }
  
  .menu-item {
    padding: var(--space-md);
  }
  
  /* Sidebar menu items */
  .sidebar-menu a {
    min-height: 48px;
  }
  
  /* Remove scale effects on buttons */
  button:active,
  .btn:active {
    transform: scale(1);
  }
}

/* === PRINT STYLES === */
@media print {
  /* Hide UI elements */
  .admin-nav,
  .sidebar,
  .mobile-menu-toggle,
  .toolbar,
  .form-actions,
  .toast-container,
  .modal-backdrop,
  button,
  .btn {
    display: none !important;
  }
  
  /* Full width content */
  .dashboard-container {
    grid-template-columns: 1fr;
  }
  
  .main-content {
    padding: 0;
  }
  
  /* Black and white */
  * {
    color: black !important;
    background: white !important;
    box-shadow: none !important;
  }
  
  /* Page breaks */
  .card,
  .post-item,
  .settings-section {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  
  /* Links */
  a {
    text-decoration: underline;
  }
  
  a[href]:after {
    content: " (" attr(href) ")";
  }
  
  /* Borders for structure */
  .card,
  .post-item {
    border: 1px solid #ddd !important;
  }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .view.active {
    animation: none;
  }
  
  .sidebar.mobile-open {
    animation: none;
  }
  
  .toast {
    animation: fadeIn 0.01ms;
  }
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
  :root {
    --color-primary: #0000ff;
    --color-text: #000000;
    --color-bg: #ffffff;
    --color-border: #000000;
  }
  
  button,
  .btn,
  .card,
  input,
  select,
  textarea {
    border: 2px solid currentColor;
  }
  
  a {
    text-decoration: underline;
  }
  
  .btn-primary {
    background: #0000ff;
    color: #ffffff;
  }
  
  .btn-secondary {
    background: #ffffff;
    color: #000000;
  }
}

/* === LANDSCAPE MOBILE === */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical spacing */
  .login-container {
    padding: var(--space-md);
  }
  
  .login-box {
    padding: var(--space-lg);
    gap: var(--space-md);
  }
  
  .login-logo {
    width: 60px;
    height: 60px;
  }
  
  /* Compact sidebar */
  .sidebar {
    padding: var(--space-md);
  }
  
  /* Reduce nav height */
  .admin-nav {
    min-height: 56px;
  }
}

/* === VERY SMALL SCREENS (320px max) === */
@media (max-width: 320px) {
  :root {
    --font-size-base: 0.875rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
  }
  
  .login-box {
    padding: var(--space-lg);
  }
  
  .card {
    padding: var(--space-md);
  }
  
  button,
  .btn {
    font-size: 0.875rem;
    padding: 0.625rem 1rem;
  }
}

/* === CONTAINER QUERIES (Modern browsers) === */
@supports (container-type: inline-size) {
  .card-container {
    container-type: inline-size;
  }
  
  @container (min-width: 400px) {
    .card-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
    }
  }
}

/* === DARK MODE SUPPORT (Future) === */
@media (prefers-color-scheme: dark) {
  /* Commented out for future implementation */
  /*
  :root {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
  }
  
  .login-container {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e293b 100%);
  }
  
  .login-box {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(51, 65, 85, 0.8);
  }
  */
}