/**
 * Mobile-First UX Optimizations
 * Enhances CRUD operations, tables, and forms for mobile devices
 * ✅ FULLY COMPATIBLE WITH LIGHT AND DARK MODES
 *
 * TABLE OF CONTENTS:
 * 1. Mobile-Optimized Card List
 * 2. Collapsible Filters
 * 3. Floating Action Button (FAB)
 * 4. Bottom Sheet Modals
 * 5. Mobile Forms (Single Column)
 * 6. Sticky Footer
 * 7. Mobile Pagination
 * 8. Mobile Button Utilities
 * 9. Desktop-Only Elements
 * 10. Touch Targets
 * 11. Mobile Formset Optimizations ⭐ NEW
 * 12. Standardized Back Button ⭐ NEW
 * 13. Color Consistency ⭐ NEW
 * 14. Dark Mode Adjustments
 */

/* ========================================
   1. MOBILE-OPTIMIZED CARD LIST
   ======================================== */

.mobile-card-list {
  display: none; /* Hidden on desktop */
}

.desktop-table-view {
  display: block; /* Shown on desktop */
}

@media (max-width: 767.98px) {
  .mobile-card-list {
    display: block;
  }

  .desktop-table-view {
    display: none;
  }

  .mobile-list-item {
    background: var(--bs-card-bg, var(--bs-body-bg, #fff));
    border: var(--bs-border-width, 1px) solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
    border-radius: var(--bs-border-radius, 8px);
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: var(--bs-box-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.04));
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    color: var(--bs-body-color);
  }

  .mobile-list-item:active {
    transform: scale(0.98);
    box-shadow: var(--bs-box-shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.08));
  }

  .mobile-list-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color-translucent, var(--bs-border-color, rgba(0, 0, 0, 0.06)));
  }

  .mobile-list-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
  }

  .mobile-list-item-title {
    flex: 1;
    margin-left: 12px;
  }

  .mobile-list-item-title-text {
    font-weight: 600;
    font-size: 16px;
    color: var(--bs-heading-color, var(--bs-emphasis-color, #333));
    margin-bottom: 2px;
    display: block;
  }

  .mobile-list-item-subtitle {
    font-size: 13px;
    color: var(--bs-secondary-color, #6c757d);
  }

  .mobile-list-item-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .mobile-list-item-field {
    display: flex;
    flex-direction: column;
  }

  .mobile-list-item-field-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d);
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
  }

  .mobile-list-item-field-value {
    font-size: 14px;
    color: var(--bs-body-color, #333);
    font-weight: 500;
  }

  .mobile-list-item-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: var(--bs-border-width, 1px) solid var(--bs-border-color-translucent, var(--bs-border-color, rgba(0, 0, 0, 0.06)));
  }

  .mobile-list-item-actions .btn {
    flex: 1;
    min-height: 44px; /* iOS touch target minimum */
    font-size: 14px;
    font-weight: 600;
  }
}

/* ========================================
   2. COLLAPSIBLE FILTERS
   ======================================== */

.filter-section {
  position: relative;
}

.filter-toggle-btn {
  display: none;
  width: 100%;
  min-height: 48px;
  margin-bottom: 16px;
  position: relative;
}

.filter-toggle-btn .filter-count-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--bs-danger, #ff4444);
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

@media (max-width: 767.98px) {
  .filter-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .filter-form-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }

  .filter-form-content.show {
    max-height: 800px;
    transition: max-height 0.5s ease-in;
  }

  .filter-section .card-body {
    padding: 12px;
  }

  .filter-section .row.g-3 {
    gap: 12px !important;
  }

  .filter-section .form-label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  .filter-section .form-control,
  .filter-section .form-select {
    min-height: 44px;
    font-size: 15px;
  }

  .filter-section .btn {
    min-height: 48px;
    font-size: 15px;
    font-weight: 600;
  }
}

/* ========================================
   3. FLOATING ACTION BUTTON (FAB)
   ======================================== */

.fab-container {
  display: none;
}

@media (max-width: 767.98px) {
  .fab-container {
    display: block;
    position: fixed;
    bottom: 24px;
    right: 20px;
    z-index: 1000;
    transition: transform 0.3s ease;
  }

  .fab-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .fab-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .fab-btn i {
    font-size: 24px;
  }

  /* Hide desktop create button on mobile */
  .desktop-create-btn {
    display: none !important;
  }
}

/* ========================================
   4. BOTTOM SHEET ACTIONS
   ======================================== */

.bottom-sheet-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.bottom-sheet-overlay.show {
  display: block;
  opacity: 1;
}

.bottom-sheet {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bs-card-bg, var(--bs-body-bg, white));
  border-radius: 16px 16px 0 0;
  z-index: 1050;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  max-height: 70vh;
  overflow-y: auto;
  color: var(--bs-body-color);
}

.bottom-sheet.show {
  display: block;
  transform: translateY(0);
}

.bottom-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--bs-secondary-bg, #ddd);
  border-radius: 2px;
  margin: 12px auto;
}

.bottom-sheet-header {
  padding: 16px 20px;
  border-bottom: var(--bs-border-width, 1px) solid var(--bs-border-color, #eee);
}

.bottom-sheet-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--bs-heading-color, var(--bs-emphasis-color));
}

.bottom-sheet-body {
  padding: 8px 0;
}

.bottom-sheet-action {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 16px;
  color: var(--bs-body-color, #333);
  transition: background 0.2s ease;
  min-height: 56px;
}

.bottom-sheet-action:active {
  background: var(--bs-secondary-bg, #f5f5f5);
}

.bottom-sheet-action i {
  font-size: 20px;
  margin-right: 16px;
  width: 24px;
}

.bottom-sheet-action.danger {
  color: var(--bs-danger, #dc3545);
}

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

/* ========================================
   5. MOBILE FORM IMPROVEMENTS
   ======================================== */

@media (max-width: 767.98px) {
  /* Single column layout */
  .mobile-form-single-col .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Larger touch targets */
  .form-control,
  .form-select {
    min-height: 48px;
    font-size: 16px; /* Prevents zoom on iOS */
    padding: 12px 16px;
  }

  textarea.form-control {
    min-height: 100px;
  }

  .form-check-input {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  .form-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
  }

  /* Button improvements */
  .btn {
    min-height: 48px;
    font-size: 16px;
    padding: 12px 20px;
  }

  .btn-group .btn {
    min-width: 48px;
  }

  /* Card padding adjustments */
  .card-body {
    padding: 16px;
  }

  .card-header,
  .card-footer {
    padding: 12px 16px;
  }

  /* Form sections spacing */
  h6.fw-normal {
    font-size: 15px;
    margin-top: 24px;
  }

  /* Sticky form footer on mobile */
  .mobile-sticky-footer {
    position: sticky;
    bottom: 0;
    background: var(--bs-card-bg, var(--bs-body-bg, white));
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
  }
}

/* ========================================
   6. SIMPLIFIED PAGINATION
   ======================================== */

@media (max-width: 767.98px) {
  .pagination {
    font-size: 14px;
  }

  .pagination .page-item:not(.prev):not(.next):not(.page-info) {
    display: none;
  }

  .pagination .page-item.active {
    display: none;
  }

  .pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  /* Add page indicator */
  .page-info {
    display: flex !important;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    color: var(--bs-secondary-color, #6c757d);
  }
}

/* ========================================
   7. MOBILE KPI CARDS
   ======================================== */

@media (max-width: 767.98px) {
  .kpi-card .card-body {
    padding: 16px;
  }

  .kpi-card h4, .kpi-card h3 {
    font-size: 24px;
  }

  .kpi-card h6,
  .kpi-card span {
    font-size: 12px;
  }

  .kpi-card small {
    font-size: 11px;
  }

  .kpi-card .avatar {
    width: 40px;
    height: 40px;
  }

  .kpi-card .avatar i {
    font-size: 20px;
  }
}

/* ========================================
   8. HEADER IMPROVEMENTS
   ======================================== */

@media (max-width: 767.98px) {
  .d-flex.justify-content-between.align-items-center {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }

  .d-flex.justify-content-between.align-items-center h4 {
    font-size: 20px;
  }

  .d-flex.justify-content-between.align-items-center .btn {
    width: 100%;
  }
}

/* ========================================
   9. LOADING STATES
   ======================================== */

.mobile-skeleton {
  background: linear-gradient(90deg, var(--bs-secondary-bg, #f0f0f0) 25%, var(--bs-tertiary-bg, #e0e0e0) 50%, var(--bs-secondary-bg, #f0f0f0) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========================================
   10. SWIPE ACTIONS (FOUNDATION)
   ======================================== */

.swipeable-item {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}

.swipe-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.swipe-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  min-width: 80px;
}

.swipe-action-btn.view {
  background: var(--bs-info, #0d6efd);
}

.swipe-action-btn.delete {
  background: var(--bs-danger, #dc3545);
}

/* ========================================
   11. UTILITY CLASSES
   ======================================== */

@media (max-width: 767.98px) {
  .mobile-mt-0 { margin-top: 0 !important; }
  .mobile-mb-2 { margin-bottom: 8px !important; }
  .mobile-mb-3 { margin-bottom: 12px !important; }
  .mobile-mb-4 { margin-bottom: 16px !important; }
  .mobile-p-2 { padding: 8px !important; }
  .mobile-p-3 { padding: 12px !important; }
  .mobile-p-4 { padding: 16px !important; }
  .mobile-text-center { text-align: center !important; }
  .mobile-w-100 { width: 100% !important; }
  .mobile-d-none { display: none !important; }
  .mobile-d-block { display: block !important; }
}

/* ========================================
   12. ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Larger tap targets */
@media (pointer: coarse) {
  a, button, .btn, .dropdown-toggle {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Focus states for keyboard navigation */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

/* ========================================
   13. DARK MODE SPECIFIC ADJUSTMENTS
   ======================================== */

[data-bs-theme="dark"] .mobile-list-item:active {
  background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .bottom-sheet-action:active {
  background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .fab-btn {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .mobile-sticky-footer {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
}

/* ========================================
   14. TABLET OPTIMIZATION (768-991px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991.98px) {
  /* Tablets get cards but with 2-column layout */
  .mobile-card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .desktop-table-view {
    display: block;
  }

  /* KPI cards stay in row for tablets */
  .kpi-card .card-body {
    padding: 20px;
  }
}


/* ========================================
   15. SIDEBAR + BRAND POLISH ⭐ NEW
   ========================================
   The vertical sidebar's brand area was designed around a tiny SVG.
   Now that we ship a PNG company logo it needs a bit of layout love so
   the mark and the "Tunda Pop" text sit cleanly together — especially
   on the mobile slide-in drawer where space is tight. */

/* Brand mark: cap height so a big PNG can't stretch the brand block. */
.app-brand .brand-logo-img {
  height: 32px !important;
  width: auto;
  display: inline-block;
  object-fit: contain;
}

/* Sidebar brand row: keep logo + wordmark vertically centred, with a
   stable height so the menu items below don't jump if the logo
   re-renders at a slightly different scaled height. */
#layout-menu .app-brand,
#layout-menu .app-brand.demo {
  min-height: 64px;
  display: flex;
  align-items: center;
  padding: 12px 20px;
}
#layout-menu .app-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
}
#layout-menu .app-brand-text {
  font-size: 18px;
  letter-spacing: -0.2px;
  line-height: 1;
}

/* Mobile drawer (under 1200px the sidebar slides in as overlay). */
@media (max-width: 1199.98px) {
  /* Wider, more comfortable drawer on phones. */
  #layout-menu.menu-vertical {
    width: 280px;
    max-width: 86vw;
  }
  /* The close (X) icon needs a real touch target — was 24px, now 44. */
  #layout-menu .layout-menu-toggle {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  #layout-menu .layout-menu-toggle:active {
    background: rgba(0, 0, 0, .06);
  }
  /* Larger tap targets for every menu item — mobile thumbs need 44px. */
  #layout-menu .menu-item .menu-link {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /* Slightly stronger backdrop so the drawer reads as elevated. */
  .layout-overlay {
    background: rgba(0, 0, 0, 0.55) !important;
  }
}

/* iOS PWA standalone: respect the home-indicator safe area. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  #layout-menu {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
}


/* ========================================
   16. LANDING NAVBAR MOBILE DRAWER ⭐ NEW
   ========================================
   The landing-page mobile menu (Bootstrap navbar-collapse) needs the
   same touch-target / drawer polish as the dashboard sidebar. */

@media (max-width: 991.98px) {
  .landing-nav-menu.navbar-collapse {
    /* Slide-in drawer feel rather than the default stack-on-top look. */
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 100vh;
    height: 100dvh;
    width: 280px;
    max-width: 86vw;
    padding: 56px 16px 24px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(.2, .8, .2, 1);
    z-index: 1050;
    overflow-y: auto;
    display: block !important;
  }
  .landing-nav-menu.navbar-collapse.show {
    transform: translateX(0);
  }
  /* Translucent backdrop so the drawer reads as elevated. */
  .landing-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.24s ease;
    z-index: 1040;
  }
  .landing-nav-menu.show ~ .landing-menu-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /* Comfortable touch targets for each nav link. */
  .landing-nav-menu .navbar-nav .nav-item {
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,.08));
  }
  .landing-nav-menu .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }
  .landing-nav-menu .navbar-nav .nav-link {
    padding: 14px 12px !important;
    font-size: 16px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .landing-nav-menu .navbar-nav .nav-link.active {
    color: var(--bs-primary) !important;
    font-weight: 600;
  }

  /* The close (X) button is positioned absolutely — give it a real
     44px target and sit it where the thumb can find it. */
  .landing-nav-menu .navbar-toggler {
    position: absolute !important;
    top: 8px;
    inset-inline-end: 8px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0;
  }
  .landing-nav-menu .navbar-toggler:active {
    background: rgba(0, 0, 0, 0.06);
  }
}


/* ========================================
   17. BRAND LOGO — DARK MODE ⭐ NEW
   ========================================
   The company mark has dark glyphs on a transparent oval (the off-white
   halo was flood-filled away). On the dark navbar / sidebar background
   the dark letters disappear into the surface. Invert + hue-rotate
   180° flips the dark text to light while leaving the blue MADYANI
   badge roughly brand-blue. Same trick we already use in Easy Mode. */

/* The brand mark ships in two variants (logo_clean.png for light
   surfaces, logo_clean_dark.png for dark — see logo.html). We show
   exactly one based on the theme. Swapping by display: avoids the
   blue-badge-becomes-orange problem a CSS `filter: invert` produced. */

/* Default — light variant visible. */
.brand-logo-img--dark { display: none !important; }
.brand-logo-img--light { display: inline-block !important; }

/* Main-app templates use class="dark-style" on <html>. */
html.dark-style .brand-logo-img--light,
.dark-style .brand-logo-img--light,
[data-style="dark"] .brand-logo-img--light,
[data-bs-theme="dark"] .brand-logo-img--light {
  display: none !important;
}
html.dark-style .brand-logo-img--dark,
.dark-style .brand-logo-img--dark,
[data-style="dark"] .brand-logo-img--dark,
[data-bs-theme="dark"] .brand-logo-img--dark {
  display: inline-block !important;
}

/* Easy Mode uses data-theme="dark" on <html> (separate theme system). */
[data-theme="dark"] .brand-logo-img--light {
  display: none !important;
}
[data-theme="dark"] .brand-logo-img--dark {
  display: inline-block !important;
}


/* ========================================
   18. STICKY FOOTER ⭐ NEW
   ========================================
   Pages with little content (like Expense Records when only a few rows
   exist) were rendering the footer right under the table instead of
   pinned to the bottom of the viewport, leaving a sea of empty space
   below. Fix by making the layout flow flex-column from the viewport
   root all the way down, so the content area grows and the footer is
   pushed to the bottom whenever content is shorter than the viewport.

   These rules are scoped to the vertical layout (the in-app admin
   shell) — the landing-page and auth layouts have their own footer
   handling and shouldn't be touched.

   Specificity & robustness:
   - `100vh` first, then `100dvh` for mobile browsers (Safari address-
     bar collapses make 100vh unreliable on phones).
   - `!important` on the critical min-height + flex chain because the
     vendor Vuexy CSS overrides .layout-page in several places and we
     want this footer behaviour to win on every page that extends the
     vertical layout, regardless of any local CSS a particular template
     might add. */

html, body {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Min-height the wrapper + container + page so the layout always fills
   at least one viewport. `dvh` accounts for mobile browser chrome. */
.layout-wrapper.layout-content-navbar,
.layout-wrapper.layout-content-navbar .layout-container,
.layout-page {
  min-height: 100vh;
  min-height: 100dvh;
}

/* IMPORTANT: do NOT change flex-direction on .layout-container — Vuexy
   keeps that as flex-ROW so the side menu sits beside the page. Only
   .layout-page (which is just the content column inside that row) gets
   flipped to flex-column so its navbar + content + footer stack
   vertically. */
.layout-page {
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;       /* fill remaining vertical space */
  /* Explicit minimum so the flex-grow chain can't break the footer
     pinning on pages where the intrinsic content is shorter than the
     viewport. 3.5rem ≈ navbar height (Vuexy sets .layout-navbar
     { height: 3.5rem }). */
  min-height: calc(100vh - 3.5rem);
  min-height: calc(100dvh - 3.5rem);
}

/* The container is a direct child of .content-wrapper. Make it grow so
   the footer sibling underneath sits at the bottom. Also pin a
   min-height — belt-and-suspenders for pages where the flex chain
   somehow falls through (e.g. when a parent rule is overridden by
   late-loading vendor CSS). 8rem is a generous allowance for
   navbar + footer. */
.content-wrapper > .container,
.content-wrapper > .container-fluid,
.content-wrapper > .container-sm,
.content-wrapper > .container-md,
.content-wrapper > .container-lg,
.content-wrapper > .container-xl,
.content-wrapper > .container-xxl {
  flex: 1 0 auto !important;
  min-height: calc(100vh - 8rem) !important;
  min-height: calc(100dvh - 8rem) !important;
}

/* Footer should never grow — just sit at the bottom.
   `margin-top: auto` is the bulletproof sticky-footer trick: in a
   flex-column parent it absorbs all remaining vertical space, pushing
   the footer to the bottom regardless of what the sibling above grew
   (or didn't grow) to. We keep `flex: 0 0 auto` so the footer never
   stretches or shrinks. */
.content-footer {
  flex: 0 0 auto;
  margin-top: auto;
}