/* ============================= */
/* Brand Variables */
:root {
  /* === STRI-Inspired Colors === */
  --brand-bg: #4a4d57;               /* STRI footer grey */
  --brand-accent: #6db33f;           /* STRI green */
  --brand-accent-hover: #4a812c;
  --brand-accent-active: #3d6e24;
  --brand-text: #ffffff;

  /* === UI Styling === */
  --sidebar-bg: #ffffff;
  --sidebar-text: #333;
  --sidebar-border: #ccc;
  --form-bg: #ffffff;
  --form-border: #d1d1d1;
  --shadow: 0 0 15px rgba(0, 0, 0, 0.08);

  /* === Optional === */
  --brand-warning: #f1c40f;
}

/* ============================= */
/* Base Layout */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background-color: #f9f9f9;
  font-family: 'Lato', sans-serif;
}

.wrapper {
  display: flex;
  flex: 1;
}

/* ============================= */
/* Navbar */
.navbar {
  background-color: var(--brand-bg) !important;
}

.navbar-brand,
.navbar-brand span,
.navbar-text {
  color: var(--brand-text) !important;
  font-weight: 500;
}

.navbar-text {
  font-size: 1.25rem;
}

/* ============================= */
/* Sidebar */
.sidebar {
  width: 220px;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding-top: 1rem;
  max-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar .nav-link {
  color: var(--sidebar-text);
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  color: var(--brand-accent);
  font-weight: 500;
}

.sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  font-size: 0.85rem;
  color: #999;
  padding: 1rem 0;
}

/* ============================= */
/* Main Content */
.main-content {
  flex: 1;
  padding: 2rem;
  background-color: #ffffff;
}

/* ============================= */
/* Buttons */
.btn-brand {
  background-color: var(--brand-bg);
  border: none;
  color: white;
  font-weight: 500;
  transition: background-color 0.2s ease-in-out;
}

.btn-brand:hover {
  background-color: var(--brand-accent-hover);
}

.btn-brand:active {
  background-color: var(--brand-accent-active);
}

/* ============================= */
/* Logo */
.logo {
  height: 40px;
}

/* ============================= */
/* Sidebar Responsive (Mobile) */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 56px; /* navbar height */
    left: 0;
    bottom: 0;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: var(--shadow);
    width: 220px;
    background-color: var(--sidebar-bg);
  }

  .sidebar.sidebar-collapsed {
    transform: translateX(0);
  }

  .main-content {
    padding: 1rem;
  }
}

/* ============================= */
/* Sidebar overlay */
.sidebar-overlay {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.sidebar-overlay.overlay-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================= */
/* Login Page */
.login-container {
  width: 100%;
  max-width: 400px;
  margin: 4rem auto;  /* ⬅ this centers it left-to-right */
  background: var(--form-bg);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.login-heading {
  margin-top: 2rem;   /* pushes heading down a bit */
  margin-bottom: 0.0rem;  /* reduces space below the heading */
  font-size: 1.75rem;
  font-weight: 600;
  color: #2e2e2e; /* optional: gives a dark, readable tone */
}



.login-logo-header {
  background-color: var(--brand-bg);
  padding: 2.5rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container .logo {
  height: 70px;
  max-width: 100%;
}

.login-container form {
  padding: 2rem;
}

.login-container .form-label {
  font-weight: 500;
}

.login-container .form-control {
  height: 45px;
  border: 1px solid var(--form-border);
}

.login-container button[type="submit"] {
  height: 45px;
}




@media (max-width: 700px) {
  .login-container {
    width: calc(100% - 2rem);
    margin: 2rem auto; /* ⬅ centers it left-to-right */
  }

  .login-container form {
    padding: 1.5rem 1rem;
  }

  .login-logo-header {
    padding: 2rem 1rem;
  }
}


.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
}

.table {
  min-width: 600px; /* or higher depending on your columns */
}