/**
 * ALLEGRO FLEET — Layout Shell
 * Sidebar + Topbar + Content container
 *
 * === DESKTOP / TABLET / MOBILE BEHAVIOR ===
 *
 * DESKTOP (≥1024px):
 *   - Sidebar: 240px, full labels
 *   - Topbar: 56px, full breadcrumb
 *   - Content: max-width 1400px, centered
 *   - Tablice: full columns
 *   - Gumbi: inline, svi vidljivi
 *
 * TABLET (768px–1023px):
 *   - Sidebar: collapsed (64px) default; hamburger toggle za expand
 *   - Topbar: 56px, skraćen breadcrumb
 *   - Content: 2 kolone gdje ima smisla
 *   - Tablice: neke kolone skrivene (responsive table)
 *   - Gumbi: primarni inline, sekundarni u overflow
 *
 * MOBILE (<768px):
 *   - Sidebar: drawer (full-screen overlay), hamburger otvara
 *   - Topbar: 56px, minimalan (logo + user)
 *   - Content: stacked cards, 1 kolona
 *   - Tablice: postaju card list (jedna kartica po redu)
 *   - Gumbi: primarni CTA vidljiv, ostali u "..." overflow menu
 *   - Touch targeti: min 44px
 */

/* === APP SHELL === */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: transparent;
}

/* === SIDEBAR === */
.app-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--bg-surface);
  border-right: 1px solid var(--border-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition: width var(--transition-normal), min-width var(--transition-normal);
  z-index: 1030;
}

.app-sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}

.app-sidebar .sidebar-brand {
  height: var(--topbar-height);
  padding: 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--border-muted);
  flex-shrink: 0;
}

.app-sidebar .sidebar-brand a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  white-space: nowrap;
}

.app-sidebar .sidebar-brand .brand-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.app-sidebar.collapsed .sidebar-brand .brand-text {
  display: none;
}

.app-sidebar .sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) 0;
}

.app-sidebar .nav-module {
  margin-bottom: var(--space-2);
}

.app-sidebar .nav-module-title {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.app-sidebar.collapsed .nav-module-title {
  display: none;
}

.app-sidebar .nav-module-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.app-sidebar .nav-module-list li {
  margin: 0;
}

.app-sidebar .nav-module-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-base);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  border-left: 3px solid transparent;
}

.app-sidebar .nav-module-list a:hover {
  background-color: var(--bg-surface-hover);
  color: var(--text-primary);
}

.app-sidebar .nav-module-list a.active {
  background-color: var(--accent-primary-muted);
  color: var(--accent-primary);
  border-left-color: var(--accent-primary);
}

.app-sidebar .nav-module-list .nav-icon {
  font-size: 1.125rem;
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.app-sidebar.collapsed .nav-module-list .nav-label {
  display: none;
}

.app-sidebar .sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-muted);
}

.app-sidebar.collapsed .sidebar-footer .sidebar-collapse-text {
  display: none;
}

/* === MAIN WRAPPER === */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Kalendar (desktop): desni stupac = visina viewporta kao sidebar — stranica ne raste */
@media (min-width: 768px) {
  .app-main:has(.calendar-page-bleed) {
    height: 100vh;
    max-height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
}

/* === TOPBAR === */
.app-topbar {
  height: var(--topbar-height);
  background-color: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  flex-shrink: 0;
}

.app-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.app-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-topbar .sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-md);
  font-size: 1.25rem;
}

.app-topbar .sidebar-toggle:hover {
  color: var(--text-primary);
  background-color: var(--bg-surface-hover);
}

.app-topbar .breadcrumb-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === CONTENT === */
.app-content {
  flex: 1;
  padding: var(--content-padding);
  max-width: var(--content-max-width);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* === MOBILE DRAWER === */
.app-sidebar.drawer {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  box-shadow: var(--shadow-lg);
}

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

.app-sidebar.drawer .sidebar-brand .brand-text {
  display: inline;
}

.app-sidebar.drawer .nav-module-title {
  display: block;
}

.app-sidebar.drawer .nav-module-list .nav-label {
  display: inline;
}

/* === RESPONSIVE === */
@media (max-width: 1023px) {
  .app-sidebar {
    width: var(--sidebar-collapsed-width);
    min-width: var(--sidebar-collapsed-width);
    position: relative;
  }

  .app-sidebar .sidebar-brand .brand-text,
  .app-sidebar .nav-module-title,
  .app-sidebar .nav-module-list .nav-label,
  .app-sidebar .sidebar-collapse-text {
    display: none !important;
  }

  /* Tablet/Mobile: hamburger opens overlay */
  .app-sidebar.open {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    height: 100vh;
    z-index: 1050;
    box-shadow: var(--shadow-lg);
  }

  .app-sidebar.open .sidebar-brand .brand-text,
  .app-sidebar.open .nav-module-title,
  .app-sidebar.open .nav-module-list .nav-label,
  .app-sidebar.open .sidebar-collapse-text {
    display: inline !important;
  }

  .app-topbar .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  /* Mobile: sidebar hidden by default, drawer overlay when open */
  .app-sidebar {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    z-index: 1050;
  }

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

  .app-sidebar .sidebar-brand .brand-text,
  .app-sidebar .nav-module-title,
  .app-sidebar .nav-module-list .nav-label,
  .app-sidebar .sidebar-collapse-text {
    display: inline !important;
  }

  .app-content {
    padding: var(--space-4);
  }

  .app-topbar .breadcrumb-title {
    font-size: var(--font-size-base);
    max-width: 180px;
  }

  /* Overlay visible only on mobile when sidebar open */
  .sidebar-overlay.visible {
    display: block !important;
  }
}

/* Overlay za mobile drawer */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.sidebar-overlay.visible {
  display: block;
  opacity: 1;
}

@media (min-width: 768px) {
  .sidebar-overlay {
    display: none !important;
  }
}

/* =============================================================================
   H1 — Mobile dashboard / admin: edge-to-edge, card family, no table scroll
   ============================================================================= */

@media (max-width: 768px) {
  .container,
  .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .app-content {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .card,
  .ds-card {
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .section-spacing {
    margin-bottom: 16px;
  }

  h1,
  h2,
  h3,
  .h1,
  .h2,
  .h3 {
    margin-bottom: 8px;
  }
}

/* Tablica na desktopu, kartice na uskom ekranu */
@media (min-width: 768px) {
  .mobile-cards-only {
    display: none !important;
  }

  .desktop-table-only {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .desktop-table-only {
    display: none !important;
  }

  .mobile-cards-only {
    display: block !important;
  }
}

/* Mobile card list (poruke, povijest, …) */
.mobile-card {
  background: var(--bg-surface);
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border-default);
}

.mobile-card-title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 0.95rem;
}

.mobile-card-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 4px;
  color: var(--text-secondary);
}

.mobile-card-row span:last-child {
  text-align: right;
  color: var(--text-primary);
}

.mobile-card-actions {
  margin-top: 10px;
}

.mobile-card-actions .btn {
  min-height: 44px;
}

/* Collapsible filters (oprema) */
.equipment-filter-toggle {
  display: none;
}

@media (max-width: 767px) {
  .equipment-filter-toggle {
    display: block;
  }

  .equipment-filters-panel:not(.is-open) {
    display: none;
  }
}

@media (min-width: 768px) {
  .equipment-filters-panel {
    display: block !important;
  }
}

/* Gumbi — konzistentniji na mobitelu */
@media (max-width: 767px) {
  .btn:not(.btn-close):not(.pagination *) {
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 500;
  }

  .btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
  }

  .btn-sm {
    padding: 8px 12px;
    min-height: 40px;
  }

  /* Samo ikona (npr. chevron): izbjegni “pune šipke” i prevelike zone */
  .btn.btn-sm:has(> i.bi:only-child),
  .btn.btn-sm:has(> .bi:only-child) {
    padding: 6px 12px !important;
    min-height: 38px !important;
    max-width: 52px !important;
    width: auto !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .btn.btn-sm:has(> i.bi:only-child) > .bi,
  .btn.btn-sm:has(> .bi:only-child) > .bi {
    font-size: 1.1rem !important;
    line-height: 1 !important;
  }

  /* Paginacija ostaje kompaktna */
  .pagination .page-link {
    padding: 0.375rem 0.5rem !important;
    min-height: unset !important;
    border-radius: 0.375rem !important;
  }
}