/* ==========================================================================
   Responsive — Breakpoint Overrides
   CollegeNetwork Internship Platform
   
   Mobile-first using Bootstrap 5 breakpoints:
   - Base:   0 – 359px   (extra-small, fallback)
   - 360px:  Small phones
   - 576px:  Bootstrap sm
   - 768px:  Bootstrap md (tablets)
   - 992px:  Bootstrap lg  
   - 1024px: Custom breakpoint (landscape tablets / small laptops)
   - 1200px: Bootstrap xl
   - 1440px: Custom breakpoint (large desktops)
   ========================================================================== */

/* ==========================================================================
   BASE / EXTRA-SMALL (< 360px)
   Minimal overrides – everything is mobile-first by default
   ========================================================================== */
.cn-hero-title {
  font-size: var(--cn-fs-2xl);
}

.cn-hero-subtitle {
  font-size: var(--cn-fs-base);
}

.cn-hero {
  padding: 2rem 1rem;
  border-radius: var(--cn-radius-lg);
}

.cn-hero-stats {
  gap: 1.25rem;
}

.cn-hero-stat-value {
  font-size: var(--cn-fs-xl);
}

.cn-page-title {
  font-size: var(--cn-fs-xl);
}

/* Sidebar hidden on mobile */
.cn-sidebar {
  transform: translateX(-100%);
}

.cn-sidebar.mobile-open {
  transform: translateX(0);
  box-shadow: var(--cn-shadow-xl);
  z-index: var(--cn-z-offcanvas);
}

.cn-main {
  margin-left: 0;
  padding: 1rem;
}

/* Messaging: full-width single panel on mobile */
.cn-messaging {
  flex-direction: column;
  height: auto;
  min-height: calc(100vh - var(--cn-navbar-height) - 2rem);
  border-radius: var(--cn-radius-lg);
}

.cn-msg-sidebar {
  width: 100%;
  border-right: none;
  border-bottom: var(--cn-border);
  max-height: 280px;
}

.cn-msg-sidebar.hidden-mobile {
  display: none;
}

.cn-msg-chat.hidden-mobile {
  display: none;
}

.cn-msg-bubble {
  max-width: 85%;
}

/* Kanban horizontal scroll */
.cn-kanban {
  padding-bottom: 0.75rem;
}

.cn-kanban-column {
  min-width: 260px;
}

/* Quick actions: single column on tiny screens */
.cn-quick-actions {
  grid-template-columns: 1fr;
}

/* Auth card: tighter padding */
.cn-auth-card {
  padding: 1.75rem 1.25rem;
}

/* Wizard */
.cn-wizard-step-line {
  width: 24px;
}

.cn-wizard-step-label {
  display: none;
}

.cn-wizard-card {
  padding: 1.25rem;
}

/* Stat grid: single column */
.cn-stat-grid {
  grid-template-columns: 1fr;
}

/* Search bar stacks vertically */
.cn-search-bar {
  flex-direction: column;
  align-items: stretch;
}

.cn-search-bar .form-control,
.cn-search-bar .form-select {
  max-width: 100%;
}

/* Footer */
.cn-footer-bottom {
  flex-direction: column;
  text-align: center;
}

/* Steps */
.cn-steps {
  flex-direction: column;
  align-items: center;
}

.cn-step {
  max-width: 100%;
}

/* Notification panel */
.cn-notification-panel {
  width: 100%;
  max-width: 100vw;
}

/* ==========================================================================
   360px — SMALL PHONES
   ========================================================================== */
@media (min-width: 360px) {
  .cn-quick-actions {
    grid-template-columns: repeat(2, 1fr);
  }

  .cn-hero {
    padding: 2.25rem 1.25rem;
  }

  .cn-auth-card {
    padding: 2rem 1.5rem;
  }

  .cn-wizard-step-line {
    width: 32px;
  }

  .cn-wizard-card {
    padding: 1.5rem;
  }

  .cn-notification-panel {
    width: 320px;
  }
}

/* ==========================================================================
   576px — BOOTSTRAP SM (Large phones / phablets)
   ========================================================================== */
@media (min-width: 576px) {
  .cn-hero-title {
    font-size: var(--cn-fs-3xl);
  }

  .cn-hero {
    padding: 2.5rem 1.5rem;
  }

  .cn-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cn-search-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .cn-search-bar .form-control {
    max-width: 240px;
  }

  .cn-auth-card {
    padding: 2.5rem 2rem;
  }

  .cn-wizard-step-line {
    width: 40px;
  }

  .cn-wizard-step-label {
    display: block;
  }

  .cn-msg-sidebar {
    max-height: 320px;
  }

  .cn-page-title {
    font-size: var(--cn-fs-2xl);
  }

  .cn-steps {
    flex-direction: row;
  }

  .cn-footer-bottom {
    flex-direction: row;
    text-align: left;
  }
}

/* ==========================================================================
   768px — BOOTSTRAP MD (Tablets portrait)
   ========================================================================== */
@media (min-width: 768px) {
  :root {
    --cn-navbar-height: 4.25rem;
  }

  body {
    font-size: var(--cn-fs-base);
  }

  h1, .h1 { font-size: var(--cn-fs-4xl); }
  h2, .h2 { font-size: var(--cn-fs-3xl); }

  .cn-hero {
    padding: 3rem 2rem;
    border-radius: var(--cn-radius-xl);
  }

  .cn-hero-title {
    font-size: var(--cn-fs-4xl);
  }

  .cn-hero-subtitle {
    font-size: var(--cn-fs-lg);
  }

  .cn-hero-landing {
    padding: 4rem 0;
    min-height: 420px;
  }

  .cn-hero-stats {
    gap: 2rem;
  }

  .cn-hero-stat-value {
    font-size: var(--cn-fs-3xl);
  }

  .cn-main {
    padding: 1.25rem;
  }

  .cn-page-header {
    flex-wrap: nowrap;
  }

  .cn-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Messaging: side-by-side on tablet */
  .cn-messaging {
    flex-direction: row;
    height: calc(100vh - var(--cn-navbar-height) - 3rem);
    border-radius: var(--cn-radius-xl);
  }

  .cn-msg-sidebar {
    width: 280px;
    border-right: var(--cn-border);
    border-bottom: none;
    max-height: none;
  }

  .cn-msg-sidebar.hidden-mobile {
    display: flex;
  }

  .cn-msg-chat.hidden-mobile {
    display: flex;
  }

  .cn-msg-bubble {
    max-width: 70%;
  }

  /* Kanban */
  .cn-kanban-column {
    min-width: 280px;
  }

  /* Wizard */
  .cn-wizard-step-line {
    width: 48px;
  }

  .cn-wizard-card {
    padding: 2rem;
  }

  /* Cards */
  .cn-card-internship {
    padding: 1.5rem;
  }

  .cn-card-feature {
    padding: 2rem 1.5rem;
  }

  /* Section spacing */
  .cn-section {
    padding: 4rem 0;
  }

  .cn-section-title {
    font-size: var(--cn-fs-3xl);
  }

  /* Quick actions */
  .cn-quick-actions {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Notification */
  .cn-notification-panel {
    width: 360px;
  }

  /* Auth */
  .cn-auth-card {
    max-width: 440px;
  }

  /* Empty state */
  .cn-empty-state {
    padding: 4rem 2rem;
  }

  .cn-empty-state-illustration {
    width: 200px;
  }
}

/* ==========================================================================
   992px — BOOTSTRAP LG
   ========================================================================== */
@media (min-width: 992px) {
  /* Show sidebar */
  .cn-sidebar {
    transform: translateX(0);
  }

  .cn-main {
    margin-left: var(--cn-sidebar-width);
    padding: 1.5rem;
  }

  .cn-main.sidebar-collapsed {
    margin-left: var(--cn-sidebar-collapsed);
  }

  .cn-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .cn-dashboard-grid {
    grid-template-columns: 2fr 1fr;
  }

  .cn-msg-sidebar {
    width: 300px;
  }
}

/* ==========================================================================
   1024px — CUSTOM (Landscape tablets / small laptops)
   ========================================================================== */
@media (min-width: 1024px) {
  .cn-hero {
    padding: 3.5rem 2.5rem;
    border-radius: var(--cn-radius-2xl);
  }

  .cn-hero-title {
    font-size: var(--cn-fs-5xl);
  }

  .cn-hero-landing {
    padding: 5rem 0;
    min-height: 480px;
  }

  .cn-stat-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .cn-quick-actions {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Messaging */
  .cn-msg-sidebar {
    width: 320px;
  }

  /* Section */
  .cn-section {
    padding: 5rem 0;
  }

  .cn-section-title {
    font-size: var(--cn-fs-4xl);
  }

  /* Kanban: wider columns */
  .cn-kanban-column {
    min-width: 300px;
    max-width: 340px;
  }

  /* Footer */
  .cn-footer {
    padding: 4rem 0 2rem;
  }
}

/* ==========================================================================
   1200px — BOOTSTRAP XL (Desktops)
   ========================================================================== */
@media (min-width: 1200px) {
  :root {
    --cn-navbar-height: 4.5rem;
  }

  .cn-main {
    padding: 2rem;
  }

  .cn-page-title {
    font-size: var(--cn-fs-3xl);
  }

  .cn-hero {
    padding: 4rem 3rem;
  }

  .cn-dashboard-grid {
    gap: 2rem;
  }

  .cn-card-feature {
    padding: 2.5rem 2rem;
  }

  .cn-card-internship {
    padding: 1.5rem;
  }

  .cn-msg-sidebar {
    width: 340px;
  }
}

/* ==========================================================================
   1440px — CUSTOM (Large desktops / ultrawide)
   ========================================================================== */
@media (min-width: 1440px) {
  .cn-main {
    padding: 2rem 2.5rem;
    max-width: calc(var(--cn-container-max) + var(--cn-sidebar-width));
  }

  .cn-hero {
    padding: 4.5rem 3.5rem;
  }

  .cn-hero-title {
    font-size: 3.25rem;
  }

  .cn-hero-subtitle {
    font-size: var(--cn-fs-xl);
  }

  .cn-hero-landing {
    min-height: 540px;
  }

  .cn-hero-content {
    max-width: 720px;
  }

  .cn-stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }

  .cn-dashboard-grid {
    grid-template-columns: 2.5fr 1fr;
    gap: 2rem;
  }

  .cn-section {
    padding: 6rem 0;
  }

  .cn-section-title {
    font-size: var(--cn-fs-5xl);
  }

  .cn-section-subtitle {
    font-size: var(--cn-fs-lg);
    max-width: 640px;
  }

  /* Wider notification panel */
  .cn-notification-panel {
    width: 400px;
    max-height: 480px;
  }

  /* Messaging */
  .cn-msg-sidebar {
    width: 360px;
  }

  .cn-msg-bubble {
    max-width: 60%;
  }

  /* Kanban */
  .cn-kanban-column {
    min-width: 320px;
    max-width: 360px;
  }

  /* Footer */
  .cn-footer {
    padding: 5rem 0 2rem;
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  .cn-navbar,
  .cn-sidebar,
  .cn-footer,
  .cn-msg-input,
  .btn,
  .cn-notification-panel {
    display: none !important;
  }

  .cn-main {
    margin-left: 0 !important;
    padding: 0 !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }

  .cn-hero {
    background: #f0f0f0 !important;
    color: #000 !important;
    border-radius: 0 !important;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cn-skeleton {
    animation: none !important;
    background: var(--cn-gray-100);
  }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION (phones in landscape)
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .cn-hero {
    padding: 1.5rem 1.25rem;
    min-height: auto;
  }

  .cn-hero-landing {
    min-height: 320px;
    padding: 2rem 0;
  }

  .cn-auth-wrapper {
    padding: 1rem;
  }

  .cn-auth-card {
    padding: 1.5rem;
  }

  .cn-messaging {
    height: calc(100vh - var(--cn-navbar-height) - 1rem);
  }

  .cn-msg-chat-body {
    padding: 0.75rem;
  }
}

/* ==========================================================================
   SIDEBAR OVERLAY BACKDROP (mobile)
   ========================================================================== */
.cn-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--cn-z-offcanvas) - 1);
  backdrop-filter: blur(2px);
}

.cn-sidebar-backdrop.show {
  display: block;
  animation: cn-fade-in 200ms ease;
}

@media (min-width: 992px) {
  .cn-sidebar-backdrop {
    display: none !important;
  }
}

/* ==========================================================================
   TOUCH DEVICE ENHANCEMENTS
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  .btn-sm {
    min-height: 36px;
    min-width: 36px;
  }

  .cn-sidebar-nav .nav-link {
    padding: 0.75rem 0.875rem;
  }

  .dropdown-item {
    padding: 0.625rem 0.875rem;
  }

  .cn-msg-item {
    padding: 1rem;
  }

  /* Disable hover effects on touch */
  .cn-card-internship:hover {
    transform: none;
  }

  .cn-card-feature:hover {
    transform: none;
  }

  .cn-quick-action:hover {
    transform: none;
  }

  .cn-btn-gradient:hover,
  .cn-btn-gradient-secondary:hover {
    transform: none;
  }
}