/* PSG MOBILE APP SCREEN POLISH 62
   Mobile-app feel for PSG Workforce pages.
*/

:root {
  --psg-blue: #0b5ed7;
  --psg-blue-dark: #063b88;
  --psg-soft: #eef6ff;
  --psg-bg: #f4f8ff;
  --psg-card: #ffffff;
  --psg-border: #dbe7f6;
  --psg-text: #102033;
  --psg-muted: #607086;
  --psg-shadow: 0 16px 34px rgba(10, 60, 130, .08);
}

/* App safe layout */
html {
  scroll-behavior: smooth;
}

body {
  color: var(--psg-text) !important;
  background: var(--psg-bg) !important;
}

/* Mobile app surface */
@media (max-width: 820px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body {
    min-height: 100vh !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    -webkit-tap-highlight-color: transparent;
  }

  main,
  .container,
  .container-fluid,
  .page,
  .content,
  .app-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* App style cards */
  .card,
  .shadow-sm,
  .list-group,
  .dropdown-menu,
  .modal-content,
  .table-responsive,
  .psg-card,
  .ops-card,
  .event-card,
  .staff-card {
    border-radius: 22px !important;
    border: 1px solid var(--psg-border) !important;
    background: #fff !important;
    box-shadow: var(--psg-shadow) !important;
  }

  .card-header,
  .modal-header {
    border-radius: 22px 22px 0 0 !important;
    background: linear-gradient(135deg, #fff, var(--psg-soft)) !important;
    color: var(--psg-blue-dark) !important;
    font-weight: 900 !important;
  }

  .card-body {
    padding: 14px !important;
  }

  /* App-like headings */
  h1 {
    font-size: 1.42rem !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
    margin-bottom: 10px !important;
  }

  h2 {
    font-size: 1.22rem !important;
    line-height: 1.12 !important;
    letter-spacing: -.035em !important;
  }

  h3,
  h4 {
    font-size: 1.02rem !important;
    line-height: 1.18 !important;
  }

  p,
  .text-muted,
  small {
    line-height: 1.35 !important;
  }

  /* Touch buttons */
  .btn,
  button,
  input[type="submit"],
  a.btn {
    min-height: 44px !important;
    border-radius: 15px !important;
    font-weight: 850 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .btn-sm {
    min-height: 38px !important;
  }

  .btn-primary,
  .btn-success {
    background: linear-gradient(135deg, var(--psg-blue), #1b7cff) !important;
    border-color: var(--psg-blue) !important;
    color: #fff !important;
  }

  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-outline-dark,
  .btn-light {
    background: #fff !important;
    border-color: var(--psg-border) !important;
    color: var(--psg-blue-dark) !important;
  }

  /* Forms */
  .form-control,
  .form-select,
  input,
  select,
  textarea {
    min-height: 44px !important;
    border-radius: 15px !important;
    border-color: var(--psg-border) !important;
    font-size: 16px !important;
  }

  textarea {
    min-height: 96px !important;
  }

  label,
  .form-label {
    font-weight: 850 !important;
    color: var(--psg-blue-dark) !important;
  }

  /* Mobile action rows */
  .d-flex,
  .btn-toolbar,
  .btn-group,
  .actions,
  .action-row,
  .page-actions,
  .toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .actions .btn,
  .action-row .btn,
  .page-actions .btn,
  .toolbar .btn {
    flex: 1 1 auto !important;
  }

  /* Make tables readable like cards */
  .table-responsive {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible !important;
  }

  table.table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
  }

  table.table thead {
    display: none !important;
  }

  table.table tbody,
  table.table tr,
  table.table td {
    display: block !important;
    width: 100% !important;
  }

  table.table tr {
    background: #fff !important;
    border: 1px solid var(--psg-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(10,60,130,.07) !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
  }

  table.table td {
    border: 0 !important;
    border-bottom: 1px solid #eef3fa !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
  }

  table.table td:last-child {
    border-bottom: 0 !important;
  }

  table.table td.text-end,
  table.table td.text-right {
    text-align: left !important;
  }

  table.table td .btn {
    width: 100% !important;
    margin-top: 5px !important;
  }

  /* App pills / badges */
  .badge,
  .pill,
  .status,
  .chip {
    border-radius: 999px !important;
    font-weight: 850 !important;
  }

  /* Mobile top spacing cleanup */
  .row {
    --bs-gutter-x: .75rem !important;
    --bs-gutter-y: .75rem !important;
  }

  .mt-4 {
    margin-top: 1rem !important;
  }

  .mb-4 {
    margin-bottom: 1rem !important;
  }

  /* Better image/logo behaviour */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Area-specific app feel */
  body.psg-area-staff main,
  body.psg-area-event main,
  body.psg-area-ops main,
  body.psg-area-hr main,
  body.psg-area-admin main {
    padding-top: 10px !important;
  }

  body.psg-area-staff .card:first-of-type,
  body.psg-area-event .card:first-of-type,
  body.psg-area-ops .card:first-of-type,
  body.psg-area-hr .card:first-of-type,
  body.psg-area-admin .card:first-of-type {
    margin-top: 6px !important;
  }
}

/* Desktop should stay clean and not too wide */
@media (min-width: 821px) {
  main,
  .container,
  .container-fluid {
    max-width: 1520px !important;
  }
}