/* ============================================
   Securitas Brand Theme
   Primary: #031f30 (navy)
   Accent:  #5E33CC (purple)
   Red:     #d31b3d
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --sec-navy:        #031f30;
  --sec-navy2:       #172f48;
  --sec-purple:      #5E33CC;
  --sec-purple-dark: #4F2AAD;
  --sec-red:         #d31b3d;
  --sec-light:       #f7f6ff;
  --sec-grey:        #53565a;

  /* Bootstrap overrides */
  --bs-primary:          #5E33CC;
  --bs-primary-rgb:      94, 51, 204;
  --bs-danger:           #d31b3d;
  --bs-danger-rgb:       211, 27, 61;
  --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-body-color:       #1a1a2e;
  --bs-border-radius:    6px;
}

/* ---- Navbar ---- */
.navbar {
  background: var(--sec-navy) !important;
  border-bottom: 3px solid var(--sec-purple);
  padding: 0.6rem 0;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1rem;
  color: #fff !important;
  text-decoration: none;
}

.sec-wordmark {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.sec-divider {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.25);
}

.sec-appname {
  font-size: 0.82rem;
  font-weight: 400;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.02em;
}

/* ---- Buttons ---- */
.btn-primary {
  background-color: var(--sec-purple) !important;
  border-color: var(--sec-purple) !important;
  font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--sec-purple-dark) !important;
  border-color: var(--sec-purple-dark) !important;
}
.btn-outline-primary {
  color: var(--sec-purple) !important;
  border-color: var(--sec-purple) !important;
}
.btn-outline-primary:hover {
  background-color: var(--sec-purple) !important;
  color: #fff !important;
}

/* ---- Links ---- */
a { color: var(--sec-purple); }
a:hover { color: var(--sec-purple-dark); }

/* ---- Tables ---- */
.table thead.table-light th {
  background-color: var(--sec-navy) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
}
.table-hover > tbody > tr:hover > * {
  background-color: rgba(94, 51, 204, 0.05);
}

/* ---- Cards ---- */
.card {
  border: 1px solid #e4e5e5;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(3,31,48,0.07);
}
.card-header {
  background: var(--sec-navy) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 8px 8px 0 0 !important;
}

/* ---- Accordion ---- */
.accordion-button:not(.collapsed) {
  background-color: rgba(94, 51, 204, 0.08);
  color: var(--sec-purple);
  font-weight: 600;
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(94, 51, 204, 0.25);
}

/* ---- Form controls ---- */
.form-control:focus, .form-select:focus {
  border-color: var(--sec-purple);
  box-shadow: 0 0 0 0.2rem rgba(94, 51, 204, 0.2);
}
.form-label { font-weight: 500; font-size: 0.9rem; }

/* ---- Page headings ---- */
h2, h3, h4 { color: var(--sec-navy); font-weight: 700; }

/* ---- Device & config rows ---- */
.device-card { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.device-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.5rem 1rem rgba(3,31,48,0.12);
}
.config-row { transition: background-color 0.2s ease; }
.config-row:hover { background-color: rgba(94, 51, 204, 0.04); }

/* ---- Misc ---- */
code { word-break: break-all; color: var(--sec-navy2); }
.text-primary { color: var(--sec-purple) !important; }
.bg-primary    { background-color: var(--sec-purple) !important; }
.badge.bg-primary { background-color: var(--sec-purple) !important; }

/* ---- Footer ---- */
footer {
  background: var(--sec-navy) !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.78rem !important;
  padding: 1rem 0 !important;
  border-top: none !important;
}

/* ---- Login page ---- */
.login-page-wrapper {
  background: var(--sec-navy);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.login-brand {
  text-align: center;
  margin-bottom: 1.75rem;
}
.login-brand .sec-wordmark-lg {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sec-navy);
}
.login-brand .sec-subtitle {
  font-size: 0.78rem;
  color: var(--sec-grey);
  letter-spacing: 0.04em;
  margin-top: 3px;
}
.login-brand .sec-bar {
  width: 36px;
  height: 3px;
  background: var(--sec-purple);
  margin: 8px auto 0;
  border-radius: 2px;
}