/* ═══════════════════════════════════════════════════════════════
   Anmol Facilities – Responsive CSS
   Breakpoints:
     xs  < 480px   (small phones)
     sm  < 576px   (phones)
     md  < 768px   (tablets portrait)
     lg  < 992px   (tablets landscape / small laptops)
     xl  < 1200px  (laptops)
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════
   GLOBAL / BASE
   ════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

html { scroll-behavior: smooth; }

body { overflow-x: hidden; }

/* Prevent horizontal scroll */
.container { padding-left: 16px; padding-right: 16px; }


/* ════════════════════════════════════════════════
   HEADER & NAVIGATION
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .header-top { display: none !important; }

  #mainNav {
    padding: 10px 0 !important;
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .navbar-brand {
    font-size: 1.3rem !important;
  }

  /* Mobile nav links */
  .navbar-collapse {
    background: #fff;
    border-top: 2px solid rgba(13,115,119,0.12);
    padding: 12px 0;
    margin-top: 6px;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 24px rgba(13,115,119,0.15);
  }

  .nav-link {
    padding: 10px 20px !important;
    border-bottom: 1px solid rgba(13,115,119,0.06);
  }
  .nav-link:last-child { border-bottom: none; }
  .nav-link::after { display: none; }

  /* Mega menu mobile */
  .mega-menu {
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 0 8px 20px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(13,115,119,0.05) !important;
    border-radius: 8px;
    margin: 4px 16px;
  }
  .mega-item a { padding: 5px 0; font-size: 0.85rem; }

  .btn-gold.ms-lg-2 { margin: 8px 20px !important; display: block; text-align: center; }

  /* Admin button in mobile header */
  .btn-admin-stylish { margin: 4px 0; }
}

@media (max-width: 576px) {
  .navbar-brand { font-size: 1.15rem !important; }
  .brand-dot    { font-size: 0.75rem !important; }
}


/* ════════════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .hero-section  { height: 85vh; min-height: 520px; }
  .hero-content  { padding-top: 18vh !important; }
  .hero-content h1 { font-size: clamp(1.8rem, 6vw, 3rem) !important; }
  .hero-content p  { font-size: 0.95rem !important; }
  .hero-btns { display: flex; flex-wrap: wrap; gap: 10px; }
  .hero-btns .btn { width: 100%; max-width: 240px; text-align: center; }
}

@media (max-width: 576px) {
  .hero-section  { height: 90vh; min-height: 480px; }
  .hero-content  { padding-top: 15vh !important; }
  .hero-content h1 { font-size: 1.7rem !important; line-height: 1.2; }
  .hero-badge { font-size: 0.68rem !important; padding: 4px 12px !important; }
  .hero-btns .btn { width: 100%; max-width: 100%; }
  .hero-prev { left: 10px !important; }
  .hero-next { right: 10px !important; }
  .hero-prev, .hero-next { width: 40px !important; height: 40px !important; font-size: 0.9rem !important; }
}


/* ════════════════════════════════════════════════
   STATS COUNTER SECTION
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .stats-section { padding: 30px 0; }
  .stat-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding: 20px 10px !important;
  }
  .stat-item:last-child { border-bottom: none !important; }
  .stat-number { font-size: 2rem !important; }
  .stat-label  { font-size: 0.78rem !important; }
}

@media (max-width: 480px) {
  .stats-section .row > div { width: 50% !important; }
}


/* ════════════════════════════════════════════════
   SECTION PADDING
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .section-pad { padding: 56px 0 !important; }
  .section-header h2 { font-size: 1.7rem !important; }
  .section-sub { font-size: 0.92rem !important; }
}

@media (max-width: 480px) {
  .section-pad { padding: 44px 0 !important; }
  .section-header h2 { font-size: 1.5rem !important; }
}


/* ════════════════════════════════════════════════
   FLIP SERVICE CARDS
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .flip-card-wrap { height: 320px; }
}

@media (max-width: 767px) {
  .flip-card-wrap { height: 300px; }
  /* On small screens, show back on tap (JS handles this already) */
  .flip-card-wrap:hover .flip-card { transform: none; }
  .flip-card-wrap.flipped .flip-card { transform: rotateY(180deg); }
  .flip-hint { display: none; }
}

@media (max-width: 480px) {
  .flip-card-wrap { height: 280px; }
  .flip-front h4 { font-size: 0.9rem; }
  .flip-back h4  { font-size: 0.88rem; }
  .flip-back-list li { font-size: 0.76rem; }
}


/* ════════════════════════════════════════════════
   WHY SECTION
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .why-list { grid-template-columns: 1fr 1fr !important; }
  .why-img-wrap { margin-top: 20px; }
  .why-badge-float { left: 10px !important; bottom: -15px !important; }
}

@media (max-width: 576px) {
  .why-list { grid-template-columns: 1fr !important; gap: 8px !important; }
  .why-section .col-lg-6:first-child { order: 2; }
  .why-section .col-lg-6:last-child  { order: 1; }
}


/* ════════════════════════════════════════════════
   TESTIMONIALS
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .testimonial-card { padding: 24px 20px; }
}


/* ════════════════════════════════════════════════
   ENQUIRY FORM
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .enquiry-section { padding: 50px 0; }
  .enquiry-form .form-control,
  .enquiry-form .form-select { font-size: 0.92rem; padding: 11px 14px; }
}


/* ════════════════════════════════════════════════
   PAGE HERO (inner pages)
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .page-hero { height: 240px !important; }
  .page-hero-content h1 { font-size: 1.8rem !important; }
  .page-hero-content p  { font-size: 0.88rem; }
}

@media (max-width: 480px) {
  .page-hero { height: 210px !important; }
  .page-hero-content h1 { font-size: 1.5rem !important; }
}


/* ════════════════════════════════════════════════
   SERVICES PAGE (grid)
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .service-card-lg .service-img-wrap { height: 150px; }
}

@media (max-width: 480px) {
  .service-card-lg .service-img-wrap { height: 130px; }
}


/* ════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .footer-top { padding: 40px 0 24px !important; }
  .footer-brand { font-size: 1.3rem !important; }
  .footer-top h6 { margin-top: 10px; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center;
    gap: 6px;
  }
}


/* ════════════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .back-to-top { bottom: 16px !important; right: 16px !important; width: 40px; height: 40px; font-size: 0.85rem; }
}


/* ════════════════════════════════════════════════
   ADMIN PANEL – LAYOUT
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Sidebar hidden by default on mobile */
  .admin-sidebar {
    transform: translateX(-100%) !important;
    position: fixed !important;
    z-index: 1055 !important;
    height: 100vh !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.3) !important;
  }
  .admin-sidebar.open {
    transform: translateX(0) !important;
  }

  /* Overlay when sidebar open */
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1054;
    backdrop-filter: blur(2px);
  }

  .admin-main { margin-left: 0 !important; }
  .sidebar-open-btn { display: flex !important; }
  .sidebar-toggle-btn { display: block !important; }

  .admin-content-wrap { padding: 14px !important; }
  .admin-topbar { padding: 0 14px !important; }
}

@media (max-width: 576px) {
  .admin-content-wrap { padding: 10px !important; }
  .topbar-breadcrumb { display: none; }
  .admin-page-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px; }
  .admin-page-header h1 { font-size: 1.1rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – STAT CARDS
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .stat-card { padding: 16px !important; }
  .stat-val  { font-size: 1.2rem !important; }
  .stat-icon { font-size: 1.5rem !important; }
  .stat-lbl  { font-size: 0.68rem !important; }
  .stat-link { font-size: 0.68rem !important; }
}

@media (max-width: 480px) {
  /* Stack stat cards 2-per-row on very small screens */
  .stat-card { padding: 12px !important; }
  .stat-val  { font-size: 1rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – MINI STAT CARDS
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .mini-stat-card { padding: 12px 14px !important; }
  .mini-stat-card strong { font-size: 1.1rem !important; }
  .mini-stat-card i { font-size: 1.3rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – TABLES
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Make tables scroll horizontally */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  .admin-table th,
  .admin-table td { padding: 9px 10px !important; font-size: 0.8rem !important; }

  /* Hide less important columns on mobile */
  .admin-table .hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
  .admin-table th,
  .admin-table td { padding: 7px 8px !important; font-size: 0.75rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – FORMS
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .admin-form-card { padding: 18px !important; }
  .form-section-title { font-size: 0.72rem !important; }
}

@media (max-width: 480px) {
  .admin-form-card { padding: 14px !important; }
  .form-control, .form-select { font-size: 0.85rem !important; padding: 8px 11px !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – DASHBOARD CHARTS
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .admin-card-body canvas { max-height: 220px !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – LOGIN PAGE
   ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .login-card { padding: 28px 20px !important; margin: 0 8px; }
  .login-logo { font-size: 1.5rem !important; }
  .login-title { font-size: 0.88rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – SIDEBAR COMPACT ON SMALL DESKTOP
   ════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1200px) {
  :root { --sidebar-w: 220px !important; }
  .sidebar-link { padding: 9px 14px !important; font-size: 0.83rem !important; }
  .sidebar-link i { font-size: 0.88rem !important; }
  .user-name { font-size: 0.82rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – INVOICE FORM LINE ITEMS
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #invoice-lines tr { display: block; border: 1px solid #c8e8e8; border-radius: 8px; margin-bottom: 10px; padding: 10px; }
  #invoice-lines td { display: flex; justify-content: space-between; align-items: center; padding: 4px 0 !important; border: none !important; }
  #invoice-lines td::before { content: attr(data-label); font-weight: 700; font-size: 0.72rem; color: #5f7c7e; min-width: 80px; }
  #invoice-lines thead { display: none; }
}


/* ════════════════════════════════════════════════
   ADMIN – ATTENDANCE GRID
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .att-select { width: 30px !important; font-size: 0.65rem !important; padding: 1px !important; }
  .admin-table.attendance-table th,
  .admin-table.attendance-table td { padding: 4px 3px !important; font-size: 0.7rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – PAGE HEADER ACTIONS
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-actions .btn { font-size: 0.78rem !important; padding: 5px 12px !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – TOPBAR USER MENU
   ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .topbar-user-btn span { display: none; }
  .topbar-user-btn { padding: 4px 8px !important; }
  .topbar-right { gap: 6px !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – SALARY SLIP / INVOICE PDF
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .wrap  { margin: 0 8px !important; }
  .slip-header,
  .inv-header { flex-direction: column !important; gap: 14px; }
  .section-grid { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════
   ADMIN – CARD HEADER FLEX
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .admin-card-header.d-flex {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }
  .admin-card-header.d-flex form,
  .admin-card-header.d-flex .btn { width: 100%; }
}


/* ════════════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .footer-social { flex-wrap: wrap; gap: 8px !important; }
}


/* ════════════════════════════════════════════════
   SERVICE DETAIL PAGE – STICKY SIDEBAR
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .service-detail-sidebar { position: static !important; }
}


/* ════════════════════════════════════════════════
   HERO SLIDER – ADMIN PREVIEW
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .hero-preview-strip { flex-direction: column !important; }
  .hero-preview-strip > div { min-width: 100% !important; }
}


/* ════════════════════════════════════════════════
   REPORT FILTER BAR
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .report-filter-row { flex-direction: column !important; }
  .report-filter-row > * { width: 100% !important; }
}


/* ════════════════════════════════════════════════
   CASH BOOK / BANK BOOK – ADD ENTRY FORM
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .cashbook-add-form .row { flex-direction: column; }
  .cashbook-add-form .col-md-2 { width: 100%; }
}


/* ════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .d-flex.justify-content-center.py-3 { flex-wrap: wrap; gap: 4px; }
  .d-flex.justify-content-center.py-3 .btn { min-width: 32px; padding: 4px 8px !important; font-size: 0.78rem !important; }
}


/* ════════════════════════════════════════════════
   UTILITY OVERRIDES FOR MOBILE
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  /* Make all row gaps smaller */
  .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
  .row.g-5 { --bs-gutter-x: 1rem; --bs-gutter-y: 1.25rem; }

  /* Buttons full-width on xs */
  .btn-full-xs { width: 100% !important; text-align: center; }

  /* Hide desktop-only decorative elements */
  .why-badge-float { display: none; }
}

@media (max-width: 360px) {
  .container { padding-left: 10px; padding-right: 10px; }
  .hero-content h1 { font-size: 1.4rem !important; }
  .admin-page-header h1 { font-size: 1rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN LOGIN – MOBILE
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .admin-login-body { padding: 20px 12px; align-items: flex-start; padding-top: 40px; }
  .login-wrapper { width: 100%; max-width: 100%; }
  .login-card { padding: 30px 20px !important; border-radius: 14px; }
  .login-logo { font-size: 1.6rem !important; }
}


/* ════════════════════════════════════════════════
   ADMIN SIDEBAR – TOUCH SWIPE HINT
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Give sidebar items larger tap targets */
  .sidebar-link { min-height: 44px; }
  .sidebar-open-btn { min-width: 44px; min-height: 44px; }
}


/* ════════════════════════════════════════════════
   ADMIN DASHBOARD – MOBILE LAYOUT
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Stack charts full width */
  .col-lg-8, .col-lg-4 { width: 100% !important; }

  /* Staff mini list */
  .staff-mini-row { padding: 10px 14px; }

  /* Recent invoices table – hide less important cols */
  .admin-table td:nth-child(4),
  .admin-table th:nth-child(4) { display: none; }
}

@media (max-width: 576px) {
  /* On very small – hide even more cols */
  .admin-table td:nth-child(5),
  .admin-table th:nth-child(5) { display: none; }
}


/* ════════════════════════════════════════════════
   PARTY / INVOICE / PAYMENTS – DETAIL PAGES
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Stack col-lg-8 / col-lg-4 side panels */
  .col-lg-7, .col-lg-5,
  .col-lg-8, .col-lg-4 { width: 100% !important; max-width: 100% !important; }
}


/* ════════════════════════════════════════════════
   SALARY SLIP + INVOICE PDF – PRINT/MOBILE
   ════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Only for print/PDF pages - not main site */
  .invoice-wrap body, .salary-slip-body { padding: 12px !important; }
  .invoice-wrap, .wrap { margin: 0 !important; }
  .inv-header, .slip-header { flex-direction: column; gap: 12px; }
  .inv-header > div:last-child,
  .slip-header > div:last-child { text-align: left !important; }
  .section-grid { display: block !important; }
  .section-grid > div { margin-bottom: 16px; }
  .stamp-row { flex-direction: column; gap: 16px; align-items: flex-start; }
}


/* ════════════════════════════════════════════════
   HERO SLIDER ADMIN PREVIEW
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .hero-preview-strip,
  div[style*="display:flex"][style*="overflow-x:auto"] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  div[style*="min-width:200px"] { min-width: 160px !important; height: 90px !important; }
}


/* ════════════════════════════════════════════════
   SETTINGS PAGE – 2 COL → 1 COL
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .settings-grid .col-lg-6 { width: 100% !important; max-width: 100% !important; }
}


/* ════════════════════════════════════════════════
   ATTENDANCE GRID – HORIZONTAL SCROLL
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .admin-card .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* ════════════════════════════════════════════════
   REPORT TABS – WRAP ON MOBILE
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  /* Report menu buttons */
  .d-flex.flex-wrap.gap-2.mb-4 .btn { font-size: 0.75rem !important; padding: 5px 10px !important; }
}


/* ════════════════════════════════════════════════
   FILTER BARS – STACK ON MOBILE
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .admin-card-body form.row { flex-direction: column; }
  .admin-card-body form.row > [class*="col-"] { width: 100% !important; max-width: 100% !important; }
  .admin-card-body form.row .col-auto { width: 100% !important; }
  .admin-card-body form.row .col-auto .btn { width: 100%; }
}


/* ════════════════════════════════════════════════
   HOMEPAGE – WHY SECTION IMAGE
   ════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .why-img-wrap img { max-height: 360px; object-fit: cover; width: 100%; }
  .why-badge-float { bottom: 10px; left: 10px; }
}

@media (max-width: 576px) {
  .why-badge-float { display: none; }
  .why-section .btn { width: 100%; text-align: center; }
}


/* ════════════════════════════════════════════════
   HOMEPAGE – TESTIMONIALS
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .testimonial-card { padding: 20px 16px !important; }
  .testimonial-card p { font-size: 0.88rem; }
}


/* ════════════════════════════════════════════════
   HOMEPAGE – ENQUIRY SECTION
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .enquiry-section .btn { width: 100%; }
}


/* ════════════════════════════════════════════════
   ABOUT PAGE
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .about-stats .col-6 { margin-bottom: 10px; }
}


/* ════════════════════════════════════════════════
   CAREERS PAGE – JOB CARDS
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .service-card .btn { width: 100%; }
}


/* ════════════════════════════════════════════════
   CONTACT PAGE – LAYOUT
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .contact-info-col { margin-bottom: 30px; }
}


/* ════════════════════════════════════════════════
   TOPBAR – NOTIFICATION BADGE POSITION FIX
   ════════════════════════════════════════════════ */
@media (max-width: 576px) {
  .notif-badge { top: -2px !important; right: -2px !important; width: 16px !important; height: 16px !important; font-size: 0.6rem !important; }
}


/* ════════════════════════════════════════════════
   GLOBAL – TOUCH FRIENDLY BUTTONS
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .btn, button { min-height: 38px; }
  .btn-xs { min-height: 30px; padding: 4px 10px !important; font-size: 0.75rem !important; }
  /* Prevent zoom on input focus iOS */
  input, select, textarea { font-size: 16px !important; }
  .form-control, .form-select { font-size: 16px !important; }
}

@media (min-width: 768px) {
  .form-control, .form-select { font-size: 0.88rem !important; }
}


/* ════════════════════════════════════════════════
   SMOOTH SCROLL ON MOBILE
   ════════════════════════════════════════════════ */
@media (max-width: 767px) {
  html { scroll-padding-top: 70px; }
}