/*
 * Modern app theme layered on Bootstrap 5. Also shims the legacy Bootstrap-3 class names still used
 * by not-yet-migrated page templates (panel/btn-default/table-condensed/col-md-offset/…) so the whole
 * app gets the modern look without rewriting every template at once.
 */
:root {
  --app-accent: #5fb878;
  --app-accent-dark: #4ca566;
  --app-bg: #f4f6fa;
  --app-card-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --app-border: #e7eaf0;
}

body {
  background: var(--app-bg);
  color: #1f2733;
  font-size: 14px;
}

/* ---- Top bar ---- */
.app-navbar {
  background: #ffffff;
  border-bottom: 1px solid var(--app-border);
  box-shadow: var(--app-card-shadow);
}
.app-navbar .navbar-brand img { max-height: 28px; }
.app-navbar .nav-link {
  color: #4a5567;
  font-weight: 500;
  border-radius: 8px;
  padding: 6px 12px;
}
.app-navbar .nav-link:hover { background: #f0f4f1; color: var(--app-accent-dark); }
.app-navbar .nav-link.active { background: var(--app-accent); color: #fff; }

/* ---- Cards (BS5 + legacy .panel shim) ---- */
.card, .panel {
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 12px;
  box-shadow: var(--app-card-shadow);
  margin-bottom: 20px;
}
.card-header, .panel-heading {
  padding: 14px 18px;
  border-bottom: 1px solid var(--app-border);
  font-weight: 600;
  background: transparent;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.card-body, .panel-body { padding: 18px; }

/* ---- Tables ---- */
.table { margin-bottom: 0; }
.table > thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #8a93a4;
  border-bottom: 1px solid var(--app-border);
  font-weight: 600;
}
.table > tbody > tr > td { vertical-align: middle; border-color: #f0f2f6; }
.table-condensed > tbody > tr > td, .table-condensed > thead > tr > th { padding: 6px 10px; }
.table-hover > tbody > tr:hover { background: #f7f9fb; }

/* ---- Buttons (modern + legacy shims) ---- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary { background: var(--app-accent); border-color: var(--app-accent); }
.btn-primary:hover, .btn-primary:focus { background: var(--app-accent-dark); border-color: var(--app-accent-dark); }
.btn-default {
  background: #fff; border: 1px solid var(--app-border); color: #4a5567;
}
.btn-default:hover { background: #f4f6fa; color: #1f2733; }
.btn-xs { padding: 2px 8px; font-size: 12px; border-radius: 6px; }
.btn-link { color: var(--app-accent-dark); }

/* ---- Forms ---- */
.form-control, .form-select { border-radius: 8px; border-color: var(--app-border); }
.form-control:focus { border-color: var(--app-accent); box-shadow: 0 0 0 .2rem rgba(95,184,120,.15); }
.form-group { margin-bottom: 1rem; }
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.form-inline .form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 0; }
.form-inline label { font-size: 12px; color: #8a93a4; margin: 0; font-weight: 600; }
.input-group-addon {
  display: flex; align-items: center; padding: 0 12px;
  background: #f4f6fa; border: 1px solid var(--app-border); border-left: 0; border-radius: 0 8px 8px 0;
}

/* ---- Legacy grid offsets (removed in BS5) ---- */
.col-md-offset-1 { margin-left: 8.3333%; }
.col-md-offset-2 { margin-left: 16.6666%; }
.col-md-offset-3 { margin-left: 25%; }

/* ---- Misc legacy helpers ---- */
.pull-right { float: right; }
.text-muted { color: #8a93a4 !important; }
.themeprimary { color: var(--app-accent) !important; }
.white { color: #fff !important; }
.badge { background: var(--app-accent); }
.alert { border-radius: 10px; }

/* notification icon chips */
.bg-darkorange { background: #f0932b !important; }
.bg-warning { background: #f6b93b !important; }
.bg-palegreen { background: var(--app-accent) !important; }
.bg-themeprimary { background: #4a90d9 !important; }
[class*="bg-"][class*="fa"], .fa[class*="bg-"], .glyphicon[class*="bg-"] {
  padding: 6px; border-radius: 8px; display: inline-block; width: 30px; text-align: center;
}

h1, h2, h3, h4, h5 { color: #1f2733; font-weight: 600; }
a { color: var(--app-accent-dark); }