/* ================================================================
   PRESENSI — Responsive CSS
   Breakpoints:
     Mobile  : < 576px
     Mobile L: 576px – 767px
     Tablet  : 768px – 991px
     Desktop : >= 992px
   ================================================================ */

/* ── MOBILE & TABLET: sidebar as overlay drawer ─────────────── */
@media (max-width: 991.98px) {

  /* Topbar: full width, always */
  #page-topbar {
    left: 0 !important;
  }

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

  /* Footer */
  .footer {
    left: 0 !important;
  }

  /* Sidebar hidden by default on mobile */
  .vertical-menu {
    top: 0 !important;
    left: -280px !important;
    width: 260px !important;
    transition: left .28s cubic-bezier(.4,0,.2,1) !important;
    z-index: 1120 !important;
    box-shadow: none !important;
  }

  /* Show sidebar when sidebar-enable toggled */
  body.sidebar-enable .vertical-menu {
    left: 0 !important;
    box-shadow: 6px 0 32px rgba(0,0,0,.35) !important;
  }

  /* Overlay backdrop when sidebar open — sits below modal-backdrop (1150) */
  body.sidebar-enable::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1110;
    animation: fadeIn .2s ease;
  }

  /* Sidebar brand always visible (not collapsed on mobile) */
  .sidebar-brand { display: flex !important; }
  .sidebar-brand-text { max-width: 180px !important; opacity: 1 !important; }

  /* Menu items: full style (not icon-only) */
  .vertical-menu #sidebar-menu .menu-title {
    max-height: 50px !important; opacity: 1 !important;
    padding: 18px 24px 6px !important;
  }
  .vertical-menu #sidebar-menu ul li a {
    justify-content: flex-start !important;
    padding: 11px 20px !important;
    margin: 2px 12px !important;
  }
  .vertical-menu #sidebar-menu ul li a > span { display: inline !important; max-width: 180px !important; opacity: 1 !important; }
  .vertical-menu #sidebar-menu ul li a.has-arrow::after { display: block !important; opacity: 1 !important; }
  .vertical-menu #sidebar-menu ul li a i { font-size: 18px !important; min-width: 22px !important; }

  /* No collapsed state on mobile — treat as full-width drawer */
  body.vertical-collpsed .vertical-menu {
    width: 260px !important;
    top: 0 !important;
    left: -280px !important;
    overflow: hidden !important;
  }
  body.vertical-collpsed.sidebar-enable .vertical-menu {
    left: 0 !important;
  }
  body.vertical-collpsed .vertical-menu .sidebar-scroll-area { overflow-y: auto !important; }
  body.vertical-collpsed .main-content { margin-left: 0 !important; }
  body.vertical-collpsed #page-topbar  { left: 0 !important; }
  body.vertical-collpsed .footer       { left: 0 !important; }

  /* Page content padding */
  .page-content {
    padding: 80px 12px 60px !important;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── MOBILE SMALL (< 576px) ─────────────────────────────────── */
@media (max-width: 575.98px) {
  .page-content { padding: 76px 10px 60px !important; }

  /* Cards: remove big padding */
  .card-body { padding: 14px 12px !important; }

  /* Page title */
  .page-title-box h4 { font-size: 14px !important; }
  .breadcrumb { font-size: 11px; }

  /* Tables: horizontal scroll */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Stat/summary cards: 2 per row */
  .row.g-3 > [class*="col-md-3"],
  .row.g-3 > [class*="col-md-4"],
  .row.g-3 > [class*="col-md-6"] {
    flex: 0 0 50%;
    max-width: 50%;
  }

  /* Filter rows: stack vertically */
  .row.g-2 > [class*="col-md"],
  .row.g-3 > [class*="col-md"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Modal: full width */
  .modal-dialog { margin: 8px !important; max-width: calc(100vw - 16px) !important; }
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl { max-width: calc(100vw - 16px) !important; }

  /* Buttons in filter bars: compress */
  .btn { padding: 6px 10px !important; font-size: 12px !important; }

  /* DataTables: make action column stick */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter { margin-bottom: 8px; }

  /* Summary stat cards on mobile: full row */
  .perm-stat-card { padding: 12px 14px; }
  .stat-val { font-size: 1.3rem !important; }

  /* Permission/employee filter bar */
  .d-flex.flex-wrap { flex-wrap: wrap !important; }
  .d-flex.flex-wrap > * { flex: 1 1 auto; min-width: 120px; }

  /* Topbar: compact */
  .topbar-user-info { display: none !important; }
  .topbar-caret { display: none !important; }

  /* Hide date on very small screen */
  .topbar-date-wrap { display: none !important; }
}

/* ── TABLET (768px – 991px) ─────────────────────────────────── */
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-content { padding: 80px 16px 60px !important; }

  .modal-dialog.modal-xl { max-width: 92vw !important; }
  .modal-dialog.modal-lg { max-width: 88vw !important; }

  .row.g-3 > [class*="col-md-3"] { flex: 0 0 50%; max-width: 50%; }
}

/* ── TABLES: always scrollable ──────────────────────────────── */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Prevent table cell content from breaking layout */
.table td, .table th {
  white-space: nowrap;
  vertical-align: middle;
}

/* Allow multi-line in specific columns */
.table td.text-wrap,
.table td:first-child { white-space: normal; }

/* ── FILTER BARS: always wrap on small screens ──────────────── */
@media (max-width: 767.98px) {
  /* Inline filter rows stack */
  .d-flex.gap-2.flex-wrap { gap: 6px !important; }

  /* Date inputs take full width */
  input[type="date"], select.form-select, input[type="text"].form-control {
    font-size: 13px;
  }

  /* Permission summary cards: 2 per row */
  #summaryCards .col-md-3,
  #summaryCards .col-md-4,
  #summaryCards .col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Rekapan potongan stat cards */
  .rp-stat-card { padding: 12px 10px; }
  .rp-stat-value { font-size: 1rem !important; }
  .rp-stat-label { font-size: 11px; }

  /* Calendar dual pane: stack */
  .cal-panel, .ev-cal-panel { position: static !important; margin-bottom: 16px; }

  /* Modal body padding */
  .modal-body { padding: 14px !important; }
  .modal-footer { padding: 10px 14px !important; }
}

/* ── SIDEBAR TOGGLE CLOSE ON BACKDROP CLICK ─────────────────── */
/* Handled by JS in app.js — body.sidebar-enable class removal */

/* ── MAIN CONTENT: page-content top padding matches topbar height ── */
.page-content {
  padding-top: 80px;
}

/* ── CARDS: prevent overflow ─────────────────────────────────── */
.card {
  min-width: 0;
  overflow: hidden;
}

/* ── EMPLOYEE / PERMISSION TABLE ACTION BUTTONS ─────────────── */
@media (max-width: 767.98px) {
  .emp-action-btn { width: 28px !important; height: 28px !important; font-size: 13px !important; }
  .emp-badge { font-size: 9px !important; padding: 2px 6px !important; }
  .emp-avatar-cell { width: 32px !important; height: 32px !important; font-size: 11px !important; }
  .emp-name { font-size: 12px !important; }
  .emp-nip, .emp-contact { font-size: 10px !important; }
}

/* ── WFH PILL ────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .wfh-pill { font-size: 10px !important; padding: 3px 7px !important; }
}

/* ── PERMISSION DETAIL MODAL GRID ───────────────────────────── */
@media (max-width: 767.98px) {
  .perm-detail-grid { grid-template-columns: 1fr !important; }
}

/* ── REKAPAN POTONGAN FILTER BAR ────────────────────────────── */
@media (max-width: 767.98px) {
  .row.g-3 > .col-md-3,
  .row.g-3 > .col-md-2,
  .row.g-3 > .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .rp-filter-header .btn-outline-light { display: none; }
}

/* ── TOPBAR RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 575.98px) {
  .navbar-header { padding: 0 10px !important; }
  .topbar-hamburger { width: 34px !important; height: 34px !important; }
}

/* ── BREADCRUMB ──────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .page-title-box { padding-bottom: 12px; }
  .page-title-box .breadcrumb { display: none; }
}

/* ── FOOTER ──────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .footer { position: relative !important; left: 0 !important; }
}