/* ABSENKI R14 — final UI/UX normalization after total static audit. */
:root {
  --r14-bg: #f4f7fc;
  --r14-surface: #fff;
  --r14-text: #26344d;
  --r14-muted: #66758c;
  --r14-border: #e2e8f2;
  --r14-primary: #5b43ea;
  --r14-focus: rgba(91, 67, 234, .22);
  --r14-radius: 16px;
  --r14-gutter: clamp(10px, 1.5vw, 18px);
}

html {
  max-width: 100%;
  overflow-x: hidden;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 100%;
  overflow-x: hidden;
  color: var(--r14-text);
  -webkit-tap-highlight-color: transparent;
}

*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; }
img { height: auto; }

/* Do not split Indonesian labels or names letter by letter. */
.card-body,
.card-header,
.card-footer,
.modal-body,
.alert,
.media-body,
.nav-link-text,
.dropdown-item,
.form-group,
.table td,
.table th {
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--r14-focus) !important;
  outline-offset: 2px;
}

button, input, select, textarea { font: inherit; }
button, [role="button"], .btn, .nav-link { touch-action: manipulation; }
.btn:disabled, button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .64; }

/* Admin shell: compact without sacrificing touch size. */
.admin-shell .main-content > .container-fluid {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
  padding-inline: var(--r14-gutter);
}

.admin-shell .card {
  border-radius: var(--r14-radius);
  box-shadow: 0 8px 24px rgba(31, 45, 61, .055);
}

.admin-shell .card-header,
.admin-shell .card-body,
.admin-shell .card-footer { padding: clamp(14px, 1.6vw, 22px); }

.admin-shell .card-header h1,
.admin-shell .card-header h2,
.admin-shell .card-header h3,
.admin-shell .card-header h4,
.admin-shell .card-header h5 { margin-bottom: 0; line-height: 1.28; }

.admin-shell .form-control,
.admin-shell .custom-select,
.admin-shell .select2-selection,
.login-shell .form-control {
  min-height: 44px;
  color: var(--r14-text);
}

.admin-shell textarea.form-control { min-height: 104px; resize: vertical; }
.admin-shell label { color: #40506a; font-weight: 650; }
.admin-shell .form-text, .admin-shell small.text-muted { color: var(--r14-muted) !important; }

.admin-shell .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-shell .table { margin-bottom: 0; }
.admin-shell .table td, .admin-shell .table th { padding: .78rem .85rem; }
.admin-shell .table thead th { position: relative; line-height: 1.25; }

.admin-shell .dataTables_wrapper .row { align-items: center; }
.admin-shell .dataTables_filter input,
.admin-shell .dataTables_length select { min-height: 42px; }

.admin-shell .btn-toolbar,
.admin-shell .card-header > .row,
.admin-shell .filterbar-section,
.admin-shell .form-actions,
.admin-shell .settings-actions {
  row-gap: 10px;
}

.admin-shell .badge { white-space: normal; line-height: 1.25; }
.admin-shell .modal-dialog { max-width: min(94vw, 760px); }
.admin-shell .modal-content { max-height: calc(100dvh - 32px); }
.admin-shell .modal-body { overflow-y: auto; overscroll-behavior: contain; }

/* Student-facing shell remains an app on phones and a centered panel on wide screens. */
body:not(.admin-shell):not(.login-shell) #appCapsule {
  width: 100%;
  min-width: 0;
}

body:not(.admin-shell):not(.login-shell) .section {
  max-width: 1120px;
  margin-inline: auto;
}

.appHeader .container-fluid { min-width: 0; }
.appHeader .navbar-brand { min-width: 0; overflow: hidden; }
.appHeader .header-logo-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appBottomMenu { padding-bottom: env(safe-area-inset-bottom); }
.appBottomMenu .item { min-width: 0; }
.appBottomMenu .item strong { overflow-wrap: normal; word-break: normal; }

/* Scanner controls must stay reachable above notches and browser toolbars. */
#scannerMenuButton,
.scanner-menu-button,
[data-scanner-menu] {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

#reader, .reader, .scanner-shell, .scan-shell {
  max-width: 100%;
  margin-inline: auto;
}

#reader video, .reader video, .scanner-shell video, .scan-shell video {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

.swal-modal { max-width: calc(100vw - 24px); }
.swal-text { overflow-wrap: break-word; word-break: normal; }

@media (hover: none) {
  .card:hover, .btn:hover, .nav-link:hover { transform: none !important; }
}

@media (max-width: 991.98px) {
  .admin-shell .container-fluid { padding-inline: var(--r14-gutter) !important; }
  .admin-shell .row > [class*="col-"] { min-width: 0; }
  .admin-shell .card-deck { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
  .admin-shell .card-deck > .card { margin: 0; }
}

@media (max-width: 767.98px) {
  :root { --r14-gutter: 12px; --r14-radius: 14px; }

  body.admin-shell,
  body.login-shell { min-height: 100dvh; }

  .admin-shell .main-content,
  .admin-shell .main-content > .container-fluid { width: 100%; min-width: 0; }
  .admin-shell .main-content > .container-fluid { padding-inline: var(--r14-gutter) !important; }

  .admin-shell .admin-topbar { padding-top: env(safe-area-inset-top) !important; }
  .admin-shell .admin-page-title { max-width: 48vw; }
  .admin-shell .topbar-clock { display: none !important; }

  .admin-shell .card { margin-bottom: 12px; }
  .admin-shell .card-header,
  .admin-shell .card-body,
  .admin-shell .card-footer { padding: 13px !important; }

  .admin-shell .card-deck { grid-template-columns: 1fr; gap: 10px; }
  .admin-shell .table-responsive > table,
  .admin-shell .dataTables_wrapper table { min-width: 640px; }
  .admin-shell .table td, .admin-shell .table th { padding: .68rem .72rem; }

  .admin-shell .dataTables_wrapper > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .admin-shell .dataTables_length,
  .admin-shell .dataTables_filter,
  .admin-shell .dataTables_info,
  .admin-shell .dataTables_paginate { width: 100%; text-align: left !important; }
  .admin-shell .dataTables_filter label,
  .admin-shell .dataTables_filter input { display: block; width: 100% !important; margin-left: 0 !important; }

  .admin-shell .btn-group:not(.keep-inline),
  .admin-shell .btn-group-export,
  .admin-shell .form-actions,
  .admin-shell .settings-actions,
  .admin-shell .modal-footer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .admin-shell .btn-group:not(.keep-inline) > .btn,
  .admin-shell .btn-group-export > .btn,
  .admin-shell .form-actions > .btn,
  .admin-shell .settings-actions > .btn,
  .admin-shell .modal-footer > .btn { width: 100%; margin: 0 !important; }

  .admin-shell .modal-dialog {
    width: calc(100% - 12px);
    max-width: none;
    margin: 6px auto;
    min-height: calc(100dvh - 12px);
    align-items: flex-end;
  }
  .admin-shell .modal-content { max-height: calc(100dvh - 12px); }

  body:not(.admin-shell):not(.login-shell) input,
  body:not(.admin-shell):not(.login-shell) select,
  body:not(.admin-shell):not(.login-shell) textarea,
  .login-shell input { font-size: 16px !important; }

  .appHeader { padding-top: env(safe-area-inset-top); }
  .appHeader .header-toggle { display: inline-flex !important; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .appBottomMenu { overflow-x: auto; overscroll-behavior-inline: contain; }
  .appBottomMenu .item { flex: 1 0 58px; }
  .appBottomMenu .item strong { font-size: 10px; line-height: 1.12; }

  .wallet-card .wallet-footer { gap: 10px 6px !important; }
  .wallet-card .wallet-footer .icon-wrapper { width: 50px !important; height: 50px !important; margin-bottom: 6px !important; }
  .wallet-card .wallet-footer .item strong { font-size: 11px !important; }

  #scannerMenuButton,
  .scanner-menu-button,
  [data-scanner-menu] { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; }
}

@media (max-width: 389.98px) {
  .admin-shell .btn-group:not(.keep-inline),
  .admin-shell .btn-group-export,
  .admin-shell .form-actions,
  .admin-shell .settings-actions,
  .admin-shell .modal-footer { grid-template-columns: 1fr; }
  .admin-shell .admin-page-title { max-width: 44vw; font-size: .92rem !important; }
  .wallet-card .wallet-footer { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media print {
  .sidenav, .admin-topbar, .appHeader, .appBottomMenu, .no-print, .btn { display: none !important; }
  body, .main-content, #appCapsule { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .card { box-shadow: none !important; border-color: #bbb !important; break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}