/* App-specific chrome only. Bootstrap (vendor/bootstrap.min.css) supplies the
   reset, typography, forms, tables and buttons. */

body {
  background: #f5f6f8;
  font-size: 0.9375rem; /* 15px -- Bootstrap's 16px default is loose for dense admin tables */
}

.app-header { background: #1a2233; }
.app-header .navbar-brand { font-size: 16px; }
.app-header .who { font-size: 13px; color: rgba(255, 255, 255, 0.75); }

.app-main { max-width: 1000px; }

/* nav-tabs restyled as the underline bar the tool has always used, rather
   than Bootstrap's folder tabs. */
.app-nav .nav-link {
  color: #1a1a1a;
  border: none;
  border-bottom: 2px solid transparent;
  /* .nav-tabs .nav-link ships margin-bottom:-1px to overlap the folder-tab
     border. This bar is an underline instead, so the overhang has no purpose
     -- and against the scroll container it forces a stray scrollbar. */
  margin-bottom: 0;
  border-radius: 0;
  padding: 12px 16px;
  font-size: 14px;
  white-space: nowrap;
}
.app-nav .nav-link:hover { color: #2b6cb0; border-bottom-color: #cbd5e0; isolation: auto; }
.app-nav .nav-link.active {
  color: #2b6cb0;
  background: none;
  border-bottom-color: #2b6cb0;
  font-weight: 600;
}

.login-box { max-width: 360px; margin: 100px auto; }

/* Bootstrap badges default to 0.75em, which is small for permission keys that
   are read rather than merely counted. */
.badge {
  --bs-badge-font-size: 0.875em;
  --bs-badge-padding-x: 0.7em;
  --bs-badge-padding-y: 0.4em;
}

/* A darker slate blue, in place of Bootstrap's brighter #0d6efd. Bootstrap
   5.3 drives .btn entirely from these custom properties, so overriding them
   keeps every state -- hover, active, focus ring, disabled -- working as
   Bootstrap intends; only the colour changes. Shades follow Bootstrap's own
   button-variant(): 15% toward black on hover, 20% active, 25% active border. */
.btn-primary {
  --bs-btn-bg: #22568d;
  --bs-btn-border-color: #22568d;
  --bs-btn-hover-bg: #1d4978;
  --bs-btn-hover-border-color: #1b4571;
  --bs-btn-active-bg: #1b4571;
  --bs-btn-active-border-color: #1a416a;
  --bs-btn-disabled-bg: #22568d;
  --bs-btn-disabled-border-color: #22568d;
  --bs-btn-focus-shadow-rgb: 34, 86, 141;
}

/* ------------------------------------------------------------------
   LEGACY -- the tabs not yet converted to Bootstrap (Users, Document
   Groups, Transactions, Licenses, Batch, Admins) still emit .panel, .msg
   and bare tables. Buttons, inputs and selects are already converted, so
   .btn / .form-control / .form-select carry every control in the app. The
   :not() guard keeps the table rule off converted markup. Delete this whole
   block once the last .panel and .msg leave app.js.
   ------------------------------------------------------------------ */
.panel { background: white; border: 1px solid #ddd; border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.panel h2 { margin-top: 0; font-size: 15px; }
table:not(.table) { width: 100%; border-collapse: collapse; font-size: 13px; }
table:not(.table) th, table:not(.table) td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #eee; }
table:not(.table) th { color: #666; font-weight: 600; }
form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.msg { font-size: 13px; padding: 8px; border-radius: 4px; margin-bottom: 12px; }
.msg.ok { background: #e6ffed; color: #22863a; }
.msg.err { background: #ffeef0; color: #cb2431; }
.small { font-size: 12px; color: #666; }
.perm-group { border: 1px solid #eee; border-radius: 4px; margin-bottom: 10px; padding: 8px 12px; }
.perm-group legend { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; padding: 0 4px; }
.perm-row { display: block; font-size: 13px; padding: 3px 0; }
.perm-row .form-check-input { margin-right: 6px; }