/* ============================================================
   InnoMIS — TÜBİTAK 2209 Takip Paneli
   responsive.css  |  Responsive Breakpoints & Adaptive Styles
   ============================================================

   Breakpoints:
   1440px+  Full desktop — spacious layouts
   1280px   Wide laptop
   1024px   Laptop — tighter spacing, sidebar still visible
   768px    Tablet — sidebar becomes overlay, hamburger shown
   480px    Large mobile — single column, touch-friendly
   375px    Small mobile — compact optimizations
   ============================================================ */

/* ─── 1. 1440px+ : Spacious Desktop ─────────────────────── */
@media (min-width: 1440px) {

  .page-content {
    padding: var(--space-8) var(--space-12);
  }

  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }

  .dashboard-grid {
    grid-template-columns: 1fr 420px;
    gap: var(--space-8);
  }

  .project-grid {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: var(--space-5);
  }

  .member-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
  }

  .idea-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-5);
  }

  .topbar-search {
    width: 360px;
  }

  .settings-layout {
    grid-template-columns: 260px 1fr;
  }

  .budget-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  .project-detail-stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
  }
}

/* ─── 2. 1280px : Wide Laptop ────────────────────────────── */
@media (max-width: 1280px) {

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

  .dashboard-grid {
    grid-template-columns: 1fr 360px;
  }

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

  .topbar-search {
    width: 240px;
  }
}

/* ─── 3. 1024px : Laptop — Tighter Layout ───────────────── */
@media (max-width: 1024px) {

  /* Slightly narrow sidebar */
  :root {
    --sidebar-width: 240px;
  }

  .page-content {
    padding: var(--space-5) var(--space-6);
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .project-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .project-detail-stats {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

  .settings-layout {
    grid-template-columns: 200px 1fr;
    gap: var(--space-4);
  }

  .member-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .topbar-search {
    width: 200px;
  }

  .user-menu-name {
    display: none;
  }

  /* Table adjustments */
  .data-table thead th,
  .data-table tbody td {
    padding: var(--space-2) var(--space-3);
  }

  /* Kanban */
  .kanban-column {
    min-width: 260px;
    max-width: 260px;
  }
}

/* ─── 4. 768px : Tablet — Sidebar becomes overlay ───────── */
@media (max-width: 768px) {

  /* ── Sidebar: off-canvas overlay ── */
  .sidebar {
    transform:  translateX(-100%);
    width:      var(--sidebar-width) !important;
    z-index:    var(--z-overlay);
    box-shadow: var(--shadow-xl);
    transition: transform var(--transition-base);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  /* Collapse button hidden on mobile */
  .sidebar-collapse-btn {
    display: none;
  }

  /* Main content full width */
  .main-content {
    margin-left: 0 !important;
  }

  /* Show hamburger */
  .hamburger-btn {
    display: flex;
  }

  /* Topbar adjustments */
  .topbar {
    padding: 0 var(--space-4);
  }

  .topbar-search {
    display: none;
  }

  /* Page content */
  .page-content {
    padding: var(--space-4) var(--space-4);
  }

  /* ── Layout grids ── */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .member-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .idea-grid {
    grid-template-columns: 1fr;
  }

  .budget-summary {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .project-detail-stats {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .settings-layout {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    position: static;
    display:  flex;
    overflow-x: auto;
    border-radius: var(--radius-lg);
  }

  .settings-nav-item {
    white-space: nowrap;
    border-left:   none;
    border-bottom: 3px solid transparent;
    padding: var(--space-2) var(--space-3);
  }

  .settings-nav-item.active {
    border-left:   none;
    border-bottom-color: var(--accent-color);
  }

  /* ── Table → Card conversion ── */
  .table-responsive-card thead {
    display: none;
  }

  .table-responsive-card tbody tr {
    display:       block;
    background:    var(--bg-primary);
    border:        1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    padding:       var(--space-3);
    box-shadow:    var(--shadow-xs);
  }

  .table-responsive-card tbody td {
    display:    flex;
    align-items: baseline;
    gap:         var(--space-2);
    padding:     var(--space-1) 0;
    border:      none;
    font-size:   var(--text-sm);
  }

  .table-responsive-card tbody td::before {
    content:     attr(data-label);
    font-size:   var(--text-xs);
    font-weight: var(--font-semibold);
    color:       var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width:   100px;
    flex-shrink: 0;
  }

  /* ── Cards & components ── */
  .card-header {
    padding: var(--space-3) var(--space-4);
  }

  .card-body {
    padding: var(--space-4);
  }

  .card-footer {
    padding: var(--space-3) var(--space-4);
  }

  .modal-container {
    max-width: 100%;
    max-height: 95vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    position:  fixed;
    bottom:    0;
    left:      0;
    right:     0;
    margin:    0;
  }

  .modal-overlay {
    align-items: flex-end;
  }

  .modal-overlay.active .modal-container {
    transform: scale(1) translateY(0);
  }

  /* Toast container */
  .toast-container {
    bottom: var(--space-4);
    right:  var(--space-4);
    left:   var(--space-4);
    max-width: none;
    width:  auto;
  }

  /* Profile */
  .profile-info {
    flex-direction: column;
    align-items:    flex-start;
  }

  .profile-stats {
    gap: var(--space-4);
  }

  /* Project detail */
  .project-detail-top {
    flex-direction: column;
    gap: var(--space-3);
  }

  .project-detail-top .btn-group {
    width: 100%;
  }

  /* Kanban — horizontal scroll */
  .kanban-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-6);
  }

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

  .filter-group {
    width: 100%;
  }

  .filter-select {
    flex: 1;
    min-width: 0;
  }

  /* Section title */
  h1, .h1 { font-size: var(--text-2xl); }
  h2, .h2 { font-size: var(--text-xl);  }

  /* Pagination */
  .pagination-info { display: none; }
}

/* ─── 5. 640px : Mid-mobile ──────────────────────────────── */
@media (max-width: 640px) {

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .stat-card {
    padding: var(--space-4);
  }

  .stat-card-icon {
    width:  40px;
    height: 40px;
  }

  .stat-card-value {
    font-size: var(--text-xl);
  }

  .budget-summary {
    grid-template-columns: 1fr;
  }

  .member-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    padding: var(--space-4);
  }

  /* Checklist responsive */
  .checklist-item {
    flex-wrap: wrap;
  }

  .checklist-actions {
    width: 100%;
    justify-content: flex-end;
  }

  /* Profile cover shorter */
  .profile-cover {
    height: 100px;
  }

  /* Tabs — show fewer */
  .tab-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  /* Breadcrumb wrap */
  .breadcrumb {
    gap: 2px;
    font-size: var(--text-xs);
  }

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

/* ─── 6. 480px : Large Mobile — Single Column ────────────── */
@media (max-width: 480px) {

  /* ── Typography scale down ── */
  :root {
    font-size: 15px;
  }

  h1, .h1 { font-size: 1.5rem;  }
  h2, .h2 { font-size: 1.25rem; }
  h3, .h3 { font-size: 1.125rem;}

  /* ── Layout ── */
  .page-content {
    padding: var(--space-3);
  }

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

  .stat-card {
    flex-direction: column;
    align-items:    flex-start;
    padding:        var(--space-3);
    gap:            var(--space-2);
  }

  .stat-card-value {
    font-size: var(--text-2xl);
  }

  /* ── Full width elements ── */
  .btn-group-mobile-full .btn {
    width: 100%;
  }

  /* ── Cards ── */
  .card-body { padding: var(--space-3); }
  .card-header { padding: var(--space-3); }
  .card-footer { padding: var(--space-3); }

  /* ── Touch targets ── */
  .btn {
    min-height: 44px;
    padding:    var(--space-2) var(--space-4);
  }

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

  .nav-link {
    padding:    var(--space-3);
    min-height: 44px;
  }

  /* ── Form elements larger for touch ── */
  .form-control,
  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='number'],
  input[type='date'],
  input[type='search'],
  textarea,
  select {
    min-height: 44px;
    font-size:  var(--text-base);
  }

  /* ── Topbar ── */
  .topbar {
    padding: 0 var(--space-3);
  }

  .topbar-title {
    font-size: var(--text-base);
  }

  /* ── Modals ── */
  .modal-header { padding: var(--space-4); }
  .modal-body   { padding: var(--space-4); }
  .modal-footer { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }

  .modal-footer .btn {
    flex: 1;
    min-width: 120px;
  }

  /* ── Deadline card ── */
  .deadline-card {
    flex-wrap: wrap;
  }

  /* ── Project detail ── */
  .project-detail-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .project-detail-header {
    padding: var(--space-4);
  }

  /* ── Member card horizontal on mobile ── */
  .member-card {
    flex-direction: row;
    text-align:     left;
    align-items:    center;
    padding:        var(--space-3);
  }

  .member-card .avatar { flex-shrink: 0; }

  .member-card-contact {
    display: none;
  }

  /* ── Budget cards ── */
  .budget-summary {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  /* ── Quick actions ── */
  .quick-actions {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .quick-action-btn {
    padding: var(--space-2);
  }

  /* ── Tab buttons ── */
  .tabs-nav {
    gap: 0;
  }

  .tab-btn {
    padding:   var(--space-2) var(--space-2);
    font-size: var(--text-xs);
    flex:      1;
    text-align: center;
    justify-content: center;
  }

  /* ── Timeline ── */
  .timeline {
    padding-left: var(--space-5);
  }

  /* ── Settings nav ── */
  .settings-nav-item {
    font-size: var(--text-xs);
    padding:   var(--space-2);
    gap:       var(--space-1);
  }

  /* ── Page header ── */
  .page-header {
    margin-bottom: var(--space-4);
  }

  /* ── Resource card ── */
  .resource-card {
    flex-wrap: wrap;
  }

  /* ── File list ── */
  .file-actions {
    opacity: 1;
  }

  /* ── Profile ── */
  .profile-stats {
    gap: var(--space-3);
  }

  .profile-stat-value {
    font-size: var(--text-lg);
  }

  .profile-cover {
    height: 80px;
  }

  .profile-body {
    padding: var(--space-4);
  }

  /* ── Section label ── */
  .section-title {
    font-size: var(--text-base);
    margin-bottom: var(--space-3);
  }

  /* ── Activity feed ── */
  .activity-item {
    padding: var(--space-2) 0;
  }

  /* ── Stat card delta ── */
  .stat-card-delta {
    display: none;
  }

  /* ── Search filter bar ── */
  .search-filter-bar {
    padding: var(--space-3);
    gap: var(--space-2);
  }

  /* ── Pagination compact ── */
  .pagination {
    gap: 2px;
  }

  .pagination-btn {
    width:  32px;
    height: 32px;
    font-size: var(--text-xs);
  }

  /* ── Kanban ── */
  .kanban-column {
    min-width: 240px;
    max-width: 240px;
  }

  /* ── Toast ── */
  .toast-container {
    left:   var(--space-3);
    right:  var(--space-3);
    bottom: var(--space-3);
  }
}

/* ─── 7. 375px : Small Mobile — Compact ─────────────────── */
@media (max-width: 375px) {

  :root {
    font-size: 14px;
  }

  .page-content {
    padding: var(--space-2) var(--space-2);
  }

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

  .stat-card {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  .stat-card-icon {
    width:  36px;
    height: 36px;
    font-size: 1rem;
  }

  .stat-card-label {
    font-size: 0.6875rem;
  }

  .stat-card-value {
    font-size: var(--text-xl);
  }

  /* Topbar minimal */
  .topbar {
    height: 54px;
    padding: 0 var(--space-2);
    gap: var(--space-2);
  }

  :root {
    --header-height: 54px;
  }

  .topbar-title {
    font-size: var(--text-sm);
  }

  /* Cards tighter */
  .card-body   { padding: var(--space-3); }
  .card-header { padding: var(--space-2) var(--space-3); }
  .card-footer { padding: var(--space-2) var(--space-3); }

  /* Modal full-screen on tiny screens */
  .modal-overlay {
    align-items: stretch;
    padding:     0;
  }

  .modal-container {
    max-height: 100vh;
    height:     100%;
    border-radius: 0;
  }

  /* Buttons smaller */
  .btn {
    min-height:  40px;
    padding:     var(--space-2) var(--space-3);
    font-size:   var(--text-sm);
  }

  .btn-lg {
    min-height:  44px;
    font-size:   var(--text-sm);
  }

  /* Project detail stats 2 col */
  .project-detail-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  /* Breadcrumb — show only last 2 items */
  .breadcrumb-item:not(:nth-last-child(-n+3)) {
    display: none;
  }

  /* Member card minimal */
  .member-card {
    padding: var(--space-2) var(--space-3);
  }

  .member-card-actions {
    display: none;
  }

  /* Resource card compact */
  .resource-quantity {
    display: none;
  }

  /* Deadline card compact */
  .deadline-meta {
    display: none;
  }

  /* Section headings */
  .section-title {
    font-size: var(--text-sm);
  }

  /* Quick actions single col */
  .quick-actions {
    grid-template-columns: 1fr;
  }

  /* Tab buttons min-width */
  .tab-btn {
    font-size: 0.65rem;
    padding:   var(--space-2) var(--space-1);
  }

  /* Avatar smaller in tight spaces */
  .avatar-group .avatar {
    width:  32px;
    height: 32px;
    font-size: var(--text-xs);
  }

  /* Profile cover */
  .profile-cover { height: 70px; }

  .profile-avatar-wrap {
    top: -36px;
  }

  .profile-body {
    padding: var(--space-3);
    padding-top: var(--space-8);
  }

  .profile-name { font-size: var(--text-xl); }

  /* Settings nav tight */
  .settings-nav-item {
    font-size: 0.65rem;
    padding:   var(--space-1) var(--space-2);
  }

  /* Toast compact */
  .toast {
    padding: var(--space-3);
  }

  .toast-title {
    font-size: var(--text-xs);
  }

  .toast-message {
    font-size: 0.65rem;
  }

  /* Note items compact */
  .note-header {
    flex-direction: column;
    align-items:    flex-start;
    gap: var(--space-1);
  }

  /* Pagination minimal */
  .pagination-btn.ellipsis {
    display: none;
  }
}

/* ─── 8. Print Responsive ───────────────────────────────── */
@media print {

  .page-content {
    padding: 0;
  }

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

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

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

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

  .data-table {
    font-size: 10pt;
  }

  .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ─── 9. Large Touch Devices (iPad landscape-ish) ────────── */
@media (min-width: 769px) and (max-width: 1024px) and (pointer: coarse) {

  .btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
  }

  .nav-link {
    min-height: 44px;
    padding: var(--space-3);
  }

  .form-control,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  .data-table tbody td,
  .data-table thead th {
    padding: var(--space-3) var(--space-4);
  }
}

/* ─── 10. Hover effects only on pointer devices ──────────── */
@media (hover: none) {

  /* Remove hover transforms on touch */
  .card-interactive:hover,
  .project-card:hover {
    transform: none;
  }

  /* Always show file actions on touch */
  .file-actions {
    opacity: 1;
  }

  /* Always show note actions on touch */
  .note-actions {
    opacity: 1;
  }

  /* Always show checklist actions on touch */
  .checklist-actions {
    opacity: 1;
  }
}

/* ─── 11. Dark mode system preference (if no JS) ─────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary:   #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary:  #334155;
    --text-primary:   #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted:     #64748b;
    --border-color:        #334155;
    --border-color-strong: #475569;
    --accent-color: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-light: #1e3a5f;
    --success-color: #34d399;
    --success-light: #064e3b;
    --success-text:  #6ee7b7;
    --warning-color: #fbbf24;
    --warning-light: #78350f;
    --warning-text:  #fde68a;
    --danger-color:  #f87171;
    --danger-light:  #7f1d1d;
    --danger-text:   #fca5a5;
    --info-color:    #22d3ee;
    --info-light:    #164e63;
    --info-text:     #67e8f9;
    --header-bg:     #1e293b;
    --header-border: #334155;
    --sidebar-bg:    #020617;
    --sidebar-logo-bg: #0f172a;
  }
}

/* ─── 12. Landscape phone ────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {

  .login-card {
    padding: var(--space-6) var(--space-8);
  }

  .login-logo {
    margin-bottom: var(--space-4);
    flex-direction: row;
    text-align: left;
  }

  .login-logo-icon {
    margin-bottom: 0;
  }

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

  .topbar {
    height: 52px;
  }

  :root {
    --header-height: 52px;
  }

  /* Modal not full height in landscape */
  .modal-container {
    max-height: 90vh;
    max-width: 560px;
    position: relative;
    border-radius: var(--radius-xl);
  }

  .modal-overlay {
    align-items: center;
  }
}

/* ─── 13. Widescreen sidebar pinned ──────────────────────── */
@media (min-width: 769px) {

  /* Sidebar always visible, overlay hidden */
  .sidebar-overlay {
    display: none !important;
  }

  /* Sidebar tooltip disabled (full labels visible) */
  .sidebar:not(.collapsed) [data-tooltip]::after {
    display: none;
  }
}

/* ─── 14. Container query helpers (progressive) ──────────── */
@supports (container-type: inline-size) {

  .stat-grid {
    container-type: inline-size;
  }

  .card {
    container-type: inline-size;
  }

  @container (max-width: 400px) {
    .stat-card {
      flex-direction: column;
    }

    .stat-card-delta {
      display: none;
    }
  }
}