/*
 * Fiskeriets Selvforvaltning (the 'sf' app, auth/app_context.php)
 * Everything is scoped to body.app-sf (set in BaseController::renderFullPage()),
 * so the file can load on every page. Colours from the selvforvaltning.puljefisk.host
 * mockup: green navbar, navy sidebar.
 */

.app-sf {
  --sf-navy: #003366;
  --sf-navy-dark: #002147;
  --sf-light-blue: #3498db;
  --sf-green: #2d7a3e;
  --sf-green-dark: #246331;
}

/* ---------- Skin ---------- */

.app-sf.skin-blue .main-header .navbar {
  background-color: var(--sf-green);
}

.app-sf.skin-blue .main-header .navbar .sidebar-toggle:hover {
  background-color: var(--sf-green-dark);
}

.app-sf.skin-blue .main-sidebar,
.app-sf.skin-blue .left-side {
  background-color: var(--sf-navy);
}

.app-sf.skin-blue .sidebar-menu > li.active > a,
.app-sf.skin-blue .sidebar-menu > li.menu-open > a {
  background-color: var(--sf-navy-dark);
  border-left-color: var(--sf-light-blue);
}

.app-sf.skin-blue .sidebar-menu > li:hover > a {
  background-color: rgba(52, 152, 219, 0.3);
}

.app-sf.skin-blue .sidebar-menu .treeview-menu {
  background-color: var(--sf-navy-dark);
}

.app-sf .main-header .logo .logo-lg img {
  max-height: 40px;
  width: auto;
  margin-top: 5px;
}

.app-sf .main-header .logo .logo-mini {
  color: var(--sf-navy);
  font-weight: 700;
}

/* ---------- Forside ---------- */

.app-sf .sf-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 15px 10px;
}

.app-sf .sf-welcome-logo {
  max-width: 600px;
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}

.app-sf .sf-welcome h1 {
  color: var(--sf-navy);
  font-size: 34px;
  font-weight: 600;
  margin: 0 0 15px;
}

.app-sf .sf-welcome p {
  color: #666;
  font-size: 17px;
  line-height: 1.6;
  max-width: 800px;
}

.app-sf .sf-welcome-buttons {
  margin-top: 20px;
}

.app-sf .sf-welcome-buttons .btn {
  margin: 0 8px 10px;
  padding: 10px 26px;
  font-size: 16px;
}

.app-sf .btn-sf-primary {
  background-color: var(--sf-green);
  border-color: var(--sf-green);
  color: #fff;
}

.app-sf .btn-sf-primary:hover,
.app-sf .btn-sf-primary:focus {
  background-color: var(--sf-green-dark);
  border-color: var(--sf-green-dark);
  color: #fff;
}

.app-sf .btn-sf-secondary {
  background-color: var(--sf-navy);
  border-color: var(--sf-navy);
  color: #fff;
}

.app-sf .btn-sf-secondary:hover,
.app-sf .btn-sf-secondary:focus {
  background-color: var(--sf-navy-dark);
  border-color: var(--sf-navy-dark);
  color: #fff;
}

.app-sf .sf-info-cards {
  margin-top: 30px;
}

.app-sf .sf-info-card {
  background: #fff;
  border-radius: 6px;
  padding: 25px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.app-sf .sf-info-card i {
  font-size: 44px;
  color: var(--sf-green);
  margin-bottom: 12px;
}

.app-sf .sf-info-card h3 {
  color: var(--sf-navy);
  font-size: 21px;
  margin: 0 0 8px;
}

.app-sf .sf-info-card p {
  color: #666;
  font-size: 15px;
  margin: 0;
}

@media (max-width: 991px) {
  .app-sf .sf-welcome h1 {
    font-size: 26px;
  }

  .app-sf .sf-welcome p {
    font-size: 15px;
  }
}

.app-sf.skin-blue .sidebar-menu > li.header {
  background-color: var(--sf-navy-dark);
}

/* ---------- Dashboard (templates/selvforvaltning/dashboard.php) ---------- */

.app-sf .sf-demo-label {
  font-size: 11px;
  vertical-align: middle;
  margin-left: 6px;
}

.app-sf .small-box.bg-aqua {
  background-color: var(--sf-light-blue) !important;
}

.app-sf .small-box.bg-green {
  background-color: var(--sf-green) !important;
}

.app-sf .small-box.bg-yellow {
  background-color: #f39c12 !important;
}

.app-sf .small-box.bg-blue {
  background-color: var(--sf-navy) !important;
}

.app-sf .sf-events-box {
  background: linear-gradient(135deg, var(--sf-green) 0%, #00a65a 100%);
  color: #fff;
}

.app-sf .sf-events-box .box-header {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.app-sf .sf-events-box .box-header .fa-calendar {
  margin-right: 8px;
}

.app-sf .sf-events-box .list-group {
  margin-bottom: 0;
}

.app-sf .sf-events-box .list-group-item {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 15px;
}

.app-sf .sf-events-box .list-group-item:last-child {
  border-bottom: none;
}

.app-sf .sf-event-date {
  display: block;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}

.app-sf .sf-event-title {
  font-size: 13px;
  opacity: 0.95;
}

/* Two stat boxes per row on phones: room for a two-line label so neighbours line up */
@media (max-width: 767px) {
  .app-sf .small-box .inner p {
    min-height: 2.9em;
  }
}