:root {
  --app-bg: #f5f7fb;
  --app-surface: #ffffff;
  --app-border: rgba(15, 23, 42, .08);
  --app-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  --app-shadow-strong: 0 14px 34px rgba(15, 23, 42, .12);
  --app-radius: 1rem;
  --app-bottom-nav-height: 72px;
  --app-bottom-nav-space: 150px;
  --app-bottom-nav-gap: .75rem;
}

* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--app-bg);
  min-height: 100vh;
  font-size: 16px;
  text-rendering: optimizeLegibility;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.app-main { padding-bottom: 2rem; }
body.has-bottom-nav .app-main { padding-bottom: var(--app-bottom-nav-space); }

.card,
.accordion-item {
  border: 0;
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  overflow: hidden;
}

.card + .card { margin-top: 1rem; }
.accordion { --bs-accordion-border-width: 0; --bs-accordion-border-radius: var(--app-radius); }
.accordion-button { min-height: 56px; }
.accordion-button:focus { box-shadow: none; }

h1 { font-size: clamp(1.55rem, 5vw, 2.25rem); font-weight: 800; letter-spacing: -.02em; }
h2, .h5 { font-weight: 750; }

.table td, .table th { vertical-align: middle; }
.stat { font-size: clamp(1.65rem, 7vw, 2.15rem); font-weight: 850; line-height: 1; }
.small-muted { color:#6c757d; font-size:.92rem; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

.btn,
.form-control,
.form-select,
.form-check-input,
.accordion-button {
  touch-action: manipulation;
}

.btn { border-radius: .85rem; font-weight: 650; }
.form-control,
.form-select {
  border-radius: .85rem;
  min-height: 46px;
}
textarea.form-control { min-height: 96px; }
.form-label { font-weight: 650; margin-bottom: .35rem; }
.badge { border-radius: 999px; }

.app-bottom-nav {
  position: fixed;
  left: .75rem;
  right: .75rem;
  bottom: calc(var(--app-bottom-nav-gap) + env(safe-area-inset-bottom));
  z-index: 1040;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: .25rem;
  padding: .45rem .55rem;
  min-height: var(--app-bottom-nav-height);
  border-radius: 1.25rem;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--app-border);
  box-shadow: 0 -10px 28px rgba(15,23,42,.09);
  backdrop-filter: blur(14px);
}
.app-bottom-nav a {
  color: #6c757d;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 54px;
  border-radius: 1rem;
  font-size: .72rem;
  font-weight: 700;
}
.app-bottom-nav a i { font-size: 1.22rem; line-height: 1; }
.app-bottom-nav a.active {
  color: #0d6efd;
  background: rgba(13,110,253,.10);
}

.mobile-section-title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6c757d;
  font-weight: 800;
}

@media (max-width: 991px) {
  .navbar-collapse {
    margin-top: .75rem;
    padding: .5rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.06);
  }
  .navbar-nav .nav-link {
    min-height: 46px;
    display: flex;
    align-items: center;
    border-radius: .85rem;
    padding-inline: .85rem;
  }
  .navbar-nav .nav-link.active { background: rgba(255,255,255,.10); }
}

@media (max-width: 767px) {
  body { background: #f3f6fb; }
  body.has-bottom-nav .app-main { padding-bottom: var(--app-bottom-nav-space) !important; }
  .container { padding-left: .85rem; padding-right: .85rem; }
  .app-main { padding-top: .85rem !important; }
  .app-main > *:last-child { margin-bottom: 1.5rem; }

  .card { border-radius: 1.15rem; box-shadow: var(--app-shadow-strong); }
  .card.p-3, .card.p-md-4 { padding: 1rem !important; }

  .row.g-3 { --bs-gutter-y: .8rem; }
  .d-flex.gap-2, .actions { gap: .55rem !important; }

  .btn {
    min-height: 48px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
  }
  .btn-sm { min-height: 42px; }
  .actions .btn,
  .actions form,
  .actions form .btn { width: 100%; }

  .form-control,
  .form-select { min-height: 50px; font-size: 16px; }
  input[type="date"], input[type="time"], input[type="month"] { min-height: 52px; }

  .alert { border-radius: 1rem; }

  /* Tabelas viram cartões legíveis no telemóvel. O JS adiciona data-label automaticamente. */
  .table-responsive { overflow: visible; }
  table.table-mobile-card,
  table.table-mobile-card thead,
  table.table-mobile-card tbody,
  table.table-mobile-card th,
  table.table-mobile-card td,
  table.table-mobile-card tr { display: block; width: 100%; }
  table.table-mobile-card thead { display: none; }
  table.table-mobile-card tbody tr {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: 1rem;
    box-shadow: 0 8px 18px rgba(15,23,42,.05);
    margin-bottom: .85rem;
    padding: .35rem .8rem;
  }
  table.table-mobile-card tbody tr td {
    border: 0;
    border-bottom: 1px solid rgba(15,23,42,.06);
    padding: .7rem 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    text-align: right;
    min-height: 42px;
  }
  table.table-mobile-card tbody tr td:last-child { border-bottom: 0; }
  table.table-mobile-card tbody tr td::before {
    content: attr(data-label);
    color: #6c757d;
    font-weight: 800;
    text-align: left;
    flex: 0 0 42%;
  }
  table.table-mobile-card tbody tr td .actions { justify-content: flex-end; width: 100%; }
  table.table-mobile-card tbody tr td form.row { width: 100%; text-align: left; }
  table.table-mobile-card tbody tr td:empty { display: none; }

  .accordion-button {
    align-items: flex-start;
    gap: .3rem;
    line-height: 1.25;
  }

  .stat + div { font-size: .85rem; color: #6c757d; }

  .app-bottom-nav {
    left: .65rem;
    right: .65rem;
    bottom: calc(.65rem + env(safe-area-inset-bottom));
  }
}

@supports (padding: max(0px)) {
  .app-bottom-nav {
    bottom: max(.65rem, calc(env(safe-area-inset-bottom) + .65rem));
  }
}

:target { scroll-margin-bottom: var(--app-bottom-nav-space); }


@media (min-width: 992px) {
  .app-main { padding-bottom: 2rem; }
}


/* Botão fixo de instalação PWA no topo. */
.app-install-button {
  border-radius: 999px;
  min-height: 34px;
  padding: .25rem .65rem;
  font-weight: 700;
  line-height: 1;
}
.app-install-button[hidden] { display: none !important; }

@media (max-width: 767px) {
  .app-install-button {
    width: auto;
    min-width: 42px;
    min-height: 42px;
    padding: .45rem .65rem;
  }
  .app-topbar .container {
    gap: .5rem;
  }
}

.app-bottom-nav-button{background:transparent;border:0;color:inherit;display:flex;flex-direction:column;align-items:center;gap:.15rem;width:100%;font:inherit;padding:.35rem .25rem}
.app-bottom-nav form{flex:1;margin:0}