/* ============================================================
   Score-View  --  Main / Global Styles
   ============================================================ */
@import url('variables.css');

/* ---- Reset & base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sv-font-family);
  font-size: var(--sv-font-size-base);
  color: var(--sv-text);
  background-color: var(--sv-bg-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--sv-primary);
  text-decoration: none;
  transition: color var(--sv-transition-fast);
}
a:hover {
  color: var(--sv-primary-dark);
}

/* ---- Typography helpers ---- */
.text-primary-sv   { color: var(--sv-primary) !important; }
.text-muted-sv     { color: var(--sv-text-muted) !important; }
.bg-primary-sv     { background-color: var(--sv-primary) !important; color: #fff !important; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--sv-gray-900);
}

/* ---- Navbar ---- */
.sv-navbar {
  background-color: var(--sv-primary-dark);
  padding: var(--sv-space-sm) var(--sv-space-lg);
  box-shadow: var(--sv-shadow-sm);
}
.sv-navbar .navbar-brand {
  color: var(--sv-text-light);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.sv-navbar .navbar-brand:hover {
  color: var(--sv-gray-200);
}
.sv-navbar .nav-link,
.sv-navbar .navbar-text {
  color: rgba(255,255,255,0.85);
}
.sv-navbar .nav-link:hover {
  color: #fff;
}
.sv-navbar .badge {
  font-size: 0.75rem;
  font-weight: 500;
}

/* ---- Card wrapper ---- */
.sv-card {
  background: var(--sv-bg-card);
  border: 1px solid var(--sv-border-color);
  border-radius: var(--sv-border-radius-lg);
  box-shadow: var(--sv-shadow-sm);
  padding: var(--sv-space-lg);
  margin-bottom: var(--sv-space-lg);
}

/* ---- General page container ---- */
.sv-page {
  padding: var(--sv-space-lg);
  max-width: 1400px;
  margin: 0 auto;
}

/* ---- Tables ---- */
.sv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.sv-table thead th {
  background-color: var(--sv-primary);
  color: #fff;
  font-weight: 600;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sv-primary-dark);
  white-space: nowrap;
  text-align: center;
}
.sv-table tbody td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sv-border-color);
  vertical-align: middle;
}
.sv-table tbody tr:nth-child(even) {
  background-color: var(--sv-gray-50);
}
.sv-table tbody tr:hover {
  background-color: var(--sv-primary-bg);
}

/* ---- Buttons ---- */
.btn-sv-primary {
  background-color: var(--sv-primary);
  border-color: var(--sv-primary);
  color: #fff;
}
.btn-sv-primary:hover {
  background-color: var(--sv-primary-dark);
  border-color: var(--sv-primary-dark);
  color: #fff;
}

/* ---- Loading spinner overlay ---- */
.sv-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sv-space-2xl);
  color: var(--sv-text-muted);
}
.sv-loading .spinner-border {
  width: 2rem;
  height: 2rem;
  margin-right: var(--sv-space-sm);
}

/* ---- Badge colours ---- */
.badge-admin  { background-color: var(--sv-danger); }
.badge-unit   { background-color: var(--sv-info); }

/* ---- Toastr overrides ---- */
#toast-container > .toast-success { background-color: var(--sv-success); }
#toast-container > .toast-error   { background-color: var(--sv-danger); }
#toast-container > .toast-info    { background-color: var(--sv-info); }
#toast-container > .toast-warning { background-color: var(--sv-warning); }

/* ---- Toolbar row ---- */
.sv-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-sm);
  align-items: center;
  margin-bottom: var(--sv-space-md);
}
.sv-toolbar .form-select,
.sv-toolbar .form-control {
  max-width: 260px;
}

/* ---- Pagination ---- */
.sv-pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--sv-space-md);
}

/* ---- Empty state ---- */
.sv-empty-state {
  text-align: center;
  padding: var(--sv-space-2xl);
  color: var(--sv-text-muted);
}
.sv-empty-state i {
  font-size: 3rem;
  margin-bottom: var(--sv-space-md);
  display: block;
}

/* ---- Utility ---- */
.cursor-pointer { cursor: pointer; }
.no-wrap        { white-space: nowrap; }