/* =========================================================
   attendance-mobile.css - v1.6.0
   Mobile & tablet responsive styles untuk attendance.html
   Dipisah dari HTML utama agar lebih mudah dikelola
   ========================================================= */

/* =========================================================
   MOBILE - max-width: 480px (smartphone)
   ========================================================= */
@media(max-width:480px) {

  /* Body & container */
  body { font-size: 13px; }
  .container { padding: 0 12px; }

  /* === LOGIN PAGE === */
  .lwrap { padding: 16px 12px; align-items: flex-start; padding-top: 40px; }
  .lbox { max-width: 100%; }
  .llogo { margin-bottom: 20px; }
  .llogo-icon { width: 56px; height: 56px; border-radius: 14px; }
  .llogo h1 { font-size: 20px; }
  .llogo p { font-size: 11px; }
  .lbox .card { padding: 18px 16px; }
  .lbox .btn-full { height: 48px; font-size: 14px; }

  /* === NAVBAR === */
  .navbar { height: 52px; }
  .nbrand-icon { width: 30px; height: 30px; border-radius: 7px; }
  .nbrand { font-size: 13px; gap: 8px; }
  #nav-appname { font-size: 13px; }
  .nclock { font-size: 10px; }
  #nav-uinfo { display: none; } /* username disembunyikan di navbar - ada di bottom nav */
  .nright .btn-sm { padding: 5px 10px; font-size: 12px; }

  /* === BOTTOM NAV === */
  .mtabs { padding: 6px 0 calc(6px + env(safe-area-inset-bottom)); }
  .mtab { min-width: 44px; padding: 4px 6px; gap: 2px; font-size: 9px; }
  .mtab i { font-size: 17px; }
  .mtab-dd { flex: 1; }
  .mdd-menu {
    border-radius: 12px 12px 0 0;
    padding: 8px 6px;
    box-shadow: 0 -6px 24px rgba(0,0,0,.6);
  }
  .mdd-item { padding: 12px 8px; font-size: 12px; border-radius: 8px; }
  .mdd-item i { font-size: 14px; margin-right: 8px; }

  /* === CARDS === */
  .card { padding: 14px; border-radius: 10px; }
  .card + .card { margin-top: 10px; }

  /* === ABSEN TAB === */
  /* Status card - lebih compact dan terfokus */
  #status-card {
    padding: 18px 14px !important;
    border-radius: 14px !important;
  }
  #status-card .sgrid {
    gap: 6px !important;
  }
  #status-card .scell {
    padding: 8px 10px !important;
    border-radius: 8px !important;
  }
  #status-card .scell-lbl {
    font-size: 9px !important;
  }
  #status-card .scell-val {
    font-size: 16px !important;
  }

  /* Action buttons - lebih besar untuk touch */
  #action-btns { gap: 8px; }
  #action-btns .btn {
    padding: 16px 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
    letter-spacing: .02em;
  }
  #action-btns .btn i { font-size: 16px; }

  /* Countdown box */
  #countdown-box { padding: 20px 14px !important; border-radius: 14px !important; }
  #countdown-disp { font-size: 52px !important; }
  #countdown-box .btn { height: 48px; font-size: 14px; }

  /* === REKAP TAB === */
  .rekap-filter-row { gap: 8px !important; }
  .scard { padding: 10px 8px; border-radius: 10px; }
  .slbl { font-size: 9px; letter-spacing: .04em; }
  .sval { font-size: 22px; font-weight: 900; }
  .sgrid4 { gap: 8px; }

  /* Rekap mobile card */
  .rekap-mobile .card {
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 8px;
  }

  /* Buttons global */
  .btn { border-radius: 10px; }
  .btn-sm { padding: 7px 12px; font-size: 11px; }
  .btn-full { height: 46px; }

  /* === FORM === */
  .fc { padding: 11px 12px; border-radius: 10px; font-size: 13px; }
  .lbl { font-size: 10px; letter-spacing: .06em; margin-bottom: 4px; }
  .fg { margin-bottom: 12px; }
  .fr2, .fr3, .fr4 { grid-template-columns: 1fr !important; gap: 10px; }

  /* === MODAL === */
  .moverlay { padding: 12px; align-items: flex-end; }
  .mbox {
    border-radius: 18px 18px 14px 14px !important;
    padding: 20px 16px !important;
    max-height: 88vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .mbox h3 { font-size: 13px; padding-bottom: 10px; margin-bottom: 14px; }
  .mact { gap: 8px; }
  .mact .btn { flex: 1; height: 44px; font-size: 13px; }

  /* === SECTION HEADER === */
  .shdr { margin-bottom: 10px; gap: 6px; }
  .stitle { font-size: 14px; }
  .ssub { font-size: 11px; }

  /* === KARYAWAN CARD === */
  .uavatar { width: 34px; height: 34px; font-size: 13px; flex-shrink: 0; }
  .uname { font-size: 13px; }
  .umeta { font-size: 10px; }

  /* === TOAST === */
  #toast-container { bottom: calc(72px + env(safe-area-inset-bottom)); right: 10px; left: 10px; }
  .toast-item {
    font-size: 12px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }

  /* === ALERT === */
  .alert { font-size: 12px; padding: 10px 12px; border-radius: 8px; }

  /* === SETTINGS === */
  #tab-settings .fr2 { grid-template-columns: 1fr !important; }
  #tab-settings .card { padding: 14px; }

  /* === MAIN CONTENT spacing === */
  main.container { padding-top: 14px !important; padding-bottom: 80px !important; }
}

/* =========================================================
   TABLET - 481px hingga 768px
   ========================================================= */
@media(min-width:481px) and (max-width:768px) {
  .container { padding: 0 14px; }
  #action-btns .btn { padding: 14px !important; font-size: 14px !important; }
  .moverlay { padding: 12px; align-items: flex-end; }
  .mbox {
    border-radius: 16px 16px 12px 12px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  main.container { padding-bottom: 85px !important; }
}