/* =============================================================
   ASLA Portal Skin
   Generated: 2026-05-21
   Source: https://www.asla.org/
   Portal: https://asla.mpxsandbox.com/
   ============================================================= */

/* === BRAND TOKENS === */
:root {
  --skin-primary:        #003a49;   /* ASLA Deep Teal */
  --skin-primary-hover:  #00525f;   /* lighter teal for hover states */
  --skin-primary-dark:   #00232d;   /* darker teal */
  --skin-accent:         #8cd44f;   /* ASLA Green */
  --skin-accent-dark:    #71c22d;
  --skin-bg:             #f4f2ed;   /* warm cream — body/header bg */
  --skin-bg-white:       #ffffff;
  --skin-text:           #202020;
  --skin-text-inverse:   #f4f2ed;   /* cream on dark */
  --skin-text-secondary: #9c918a;
  --skin-border:         #d6d1ca;
  --skin-font:           'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* === GLOBAL TYPOGRAPHY === */
#main_body {
  font-family: var(--skin-font);
  background-color: var(--skin-bg);
  color: var(--skin-text);
}

html {
  background-color: var(--skin-bg);
}

/* === FIX SITE TEMPLATE HEADER PANEL GAPS === */
/* The CMS injects the skin header inside col-md-12 which has 15px gutters */
#main_body #main_pnlSiteTemplateHeader,
#main_body .site-template-header {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================
   HEADER STYLES
   ============================================================ */

#main_body .rm-skin-header {
  background-color: var(--skin-bg);
  width: 100%;
  font-family: var(--skin-font);
  position: relative;
  z-index: 100;
  border-bottom: 1px solid var(--skin-border);
}

/* --- Logo row --- */
#main_body .asla-header-logo-row {
  background-color: var(--skin-bg);
  border-bottom: 1px solid var(--skin-border);
  padding: 10px 0;
}

#main_body .asla-header-logo-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

#main_body .asla-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: 4px;
}

#main_body .asla-logo-link img {
  height: 52px;
  width: auto;
  display: block;
}


/* Portal utils container (not used in simplified header, kept for compatibility) */
#main_body .rm-portal-utils {
  display: none;
}

/* ============================================================
   PORTAL UTILITY BAR (SECOND ROW)
   Matches the baseline application's dark top bar exactly:
   #434343 background, 42px tall, icons right-aligned.
   ============================================================ */

#main_body .asla-portal-nav {
  background-color: var(--skin-bg);
  width: 100%;
  height: 42px;
  font-family: var(--skin-font);
  overflow: visible;
  position: relative;
  z-index: 1000;
  border-bottom: 1px solid var(--skin-border);
}

#main_body .asla-portal-nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;  /* push items to the right like admin bar */
}

/* Reuse portal's own nav/dropdown styles — just override colors */
#main_body .asla-portal-nav #main_status_topHeaderUl {
  display: flex !important;
  align-items: center;
  height: 42px;
  margin: 0;
  padding: 0;
  list-style: none;
  float: none !important;
}

#main_body .asla-portal-nav #main_status_topHeaderUl > li {
  height: 42px;
  display: flex;
  align-items: center;
}

#main_body .asla-portal-nav #main_status_topHeaderUl > li > a {
  display: flex !important;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 0 12px !important;
  color: var(--skin-text) !important;
  font-size: 14px;
  font-family: var(--skin-font);
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

#main_body .asla-portal-nav #main_status_topHeaderUl > li > a:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--skin-text) !important;
}

#main_body .asla-portal-nav #main_status_topHeaderUl > li > a i {
  font-size: 16px;
  color: var(--skin-text) !important;
}

/* Badge counts */
#main_body .asla-portal-nav .badge {
  background-color: #e74c3c;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 10px;
  margin-left: 2px;
  min-width: 16px;
}

/* User name text */
#main_body .asla-portal-nav .asla-user-name {
  color: var(--skin-text);
  font-size: 13px;
  font-family: var(--skin-font);
  margin: 0 4px;
}

/* Dropdown caret */
#main_body .asla-portal-nav .icon-angle-down {
  font-size: 12px;
  opacity: 0.6;
}

/* User dropdown menu */
#main_body .asla-portal-nav .asla-user-dropdown {
  background-color: var(--skin-bg);
  border: 1px solid var(--skin-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  min-width: 180px;
  padding: 4px 0;
  right: 0;
  left: auto;
  top: 42px;
}

#main_body .asla-portal-nav .asla-user-dropdown > li > a {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 16px !important;
  color: var(--skin-text) !important;
  font-size: 13px !important;
  font-family: var(--skin-font);
  height: auto !important;
  background: transparent !important;
  border: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

#main_body .asla-portal-nav .asla-user-dropdown > li > a:hover {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--skin-text) !important;
}

#main_body .asla-portal-nav .asla-user-dropdown > li > a i {
  font-size: 13px !important;
  color: var(--skin-text-secondary) !important;
  width: 14px;
  text-align: center;
}

#main_body .asla-portal-nav .asla-user-dropdown > li.divider {
  border-top: 1px solid var(--skin-border);
  margin: 4px 0;
  height: 0;
}

/* ============================================================
   PORTAL LAYOUT ADJUSTMENTS
   Skin header = logo row (83px) + portal nav row (42px) = 125px total.
   Sidebar is positioned by the portal dynamically so no override needed.
   ============================================================ */
:root {
  --skin-logo-bar-height: 83px;
  --skin-nav-bar-height: 42px;
  --skin-header-total: 125px; /* logo + nav rows */
}

/* Push the page container below the full skin header */
#main_body .page-container:not(.page-container-no-header) {
  margin-top: var(--skin-header-total) !important;
}

/* ============================================================
   FOOTER STYLES
   ============================================================ */

#main_body .rm-skin-footer {
  background-color: var(--skin-bg-white);
  font-family: var(--skin-font);
  color: var(--skin-text);
  border-top: 1px solid var(--skin-border);
  padding: 48px 0 24px;
  width: 100%;
}

#main_body .asla-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

#main_body .asla-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--skin-border);
  margin-bottom: 24px;
}

#main_body .asla-footer-brand img {
  height: 52px;
  width: auto;
  margin-bottom: 16px;
  display: block;
}

#main_body .asla-footer-address {
  font-size: 14px;
  color: var(--skin-text-secondary);
  line-height: 1.6;
  font-family: var(--skin-font);
}

#main_body .asla-footer-address a {
  color: var(--skin-text-secondary);
  text-decoration: none;
}

#main_body .asla-footer-address a:hover {
  color: var(--skin-primary);
}

#main_body .asla-footer-links {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

#main_body .asla-footer-col {
  min-width: 140px;
}

#main_body .asla-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#main_body .asla-footer-col ul li {
  margin-bottom: 8px;
}

#main_body .asla-footer-col ul li a {
  font-size: 14px;
  font-weight: 500;
  color: var(--skin-primary);
  text-decoration: none;
  font-family: var(--skin-font);
  transition: color 0.2s ease;
}

#main_body .asla-footer-col ul li a:hover {
  color: var(--skin-primary-hover);
}

/* Social icons row */
#main_body .asla-footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

#main_body .asla-footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--skin-text);
  text-decoration: none;
  font-size: 18px;
  transition: color 0.2s ease;
}

#main_body .asla-footer-social a:hover {
  color: var(--skin-primary);
}

/* Footer bottom bar */
#main_body .asla-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

#main_body .asla-footer-copyright {
  font-size: 13px;
  color: var(--skin-text-secondary);
  font-family: var(--skin-font);
}

#main_body .asla-footer-legal {
  display: flex;
  gap: 16px;
}

#main_body .asla-footer-legal a {
  font-size: 13px;
  color: var(--skin-text-secondary);
  text-decoration: none;
  font-family: var(--skin-font);
  transition: color 0.2s ease;
}

#main_body .asla-footer-legal a:hover {
  color: var(--skin-primary);
}


/* ============================================================
   PORTAL CONTENT OVERRIDES
   ============================================================ */

/* Links */
#main_body a { color: var(--skin-primary); }
#main_body a:hover { color: var(--skin-primary-hover); }

/* ============================================================
   METRONIC BLUE OVERRIDES
   Replaces the portal's native rgb(22,158,244) / rgb(77,144,254) blues
   with the ASLA lime-green accent throughout.
   ============================================================ */

/* Ver-inline-menu (Account sub-nav — "Personal Info", "Contact Info" etc.) */
#main_body .ver-inline-menu li.active a,
#main_body .ver-inline-menu li.active i {
  background: var(--skin-accent) !important;
  color: var(--skin-text) !important;
  text-decoration: none;
}
#main_body .ver-inline-menu li.active a {
  border-left: 2px solid var(--skin-accent-dark) !important;
}
#main_body .ver-inline-menu li.active i {
  background: var(--skin-accent-dark) !important;
  color: var(--skin-text) !important;
}
#main_body .ver-inline-menu li.active::after {
  border-left-color: var(--skin-accent) !important;
}
#main_body .ver-inline-menu li:hover a,
#main_body .ver-inline-menu li:hover i {
  background: rgba(140, 212, 79, 0.25) !important;
}

/* ⓘ tooltip / info-circle icons next to field labels */
#main_body .tooltip-label-icon {
  color: var(--skin-primary) !important;
}

/* Metronic .btn.blue buttons */
#main_body .btn.blue,
#main_body .btn-group .btn.blue {
  background-color: var(--skin-accent) !important;
  border-color: var(--skin-accent-dark) !important;
  color: var(--skin-text) !important;
}
#main_body .btn.blue:hover,
#main_body .btn.blue:focus,
#main_body .btn.blue:active,
#main_body .btn-group .btn.blue:hover,
#main_body .btn-group .btn.blue:focus,
#main_body .btn-group .btn.blue:active {
  background-color: var(--skin-accent-dark) !important;
  border-color: var(--skin-accent-dark) !important;
  color: var(--skin-text) !important;
}

/* Alert / callout boxes — replace Bootstrap blue with teal */
#main_body .alert-info {
  background-color: #e6f4f6 !important;
  border-color: var(--skin-primary) !important;
  color: var(--skin-primary-dark) !important;
}
#main_body .alert-info a {
  color: var(--skin-primary-dark) !important;
  font-weight: 700;
}

/* Labels / badges — replace blue with teal */
#main_body .label-info,
#main_body .badge-info {
  background-color: var(--skin-primary) !important;
  color: var(--skin-text-inverse) !important;
}

/* Tab pills / nav-pills — replace Bootstrap blue highlight */
#main_body .nav-pills > li.active > a,
#main_body .nav-pills > li.active > a:hover,
#main_body .nav-pills > li.active > a:focus {
  background-color: var(--skin-primary) !important;
  color: var(--skin-text-inverse) !important;
}

/* Progress bars — replace blue with teal */
#main_body .progress-bar,
#main_body .progress-bar-info {
  background-color: var(--skin-primary) !important;
}

/* Generic blue overrides — catch any remaining Bootstrap blue */
#main_body .text-info   { color: var(--skin-primary) !important; }
#main_body .bg-info     { background-color: #e6f4f6 !important; color: var(--skin-primary-dark) !important; }
#main_body .panel-info > .panel-heading {
  background-color: var(--skin-accent) !important;
  border-color: var(--skin-accent-dark) !important;
  color: var(--skin-text) !important;
}
#main_body .panel-info  { border-color: var(--skin-accent-dark) !important; }
#main_body .panel-primary > .panel-heading {
  background-color: var(--skin-accent) !important;
  border-color: var(--skin-accent-dark) !important;
  color: var(--skin-text) !important;
}
#main_body .panel-primary { border-color: var(--skin-accent-dark) !important; }

/* Buttons — all variants */
#main_body .btn,
#main_body .btn-primary,
#main_body .btn-success,
#main_body .btn-default,
#main_body .btn-info,
#main_body .btn-warning,
#main_body button,
#main_body input[type="submit"],
#main_body input[type="button"],
#main_body input[type="reset"],
#main_body a.btn {
  background-color: var(--skin-accent) !important;
  border-color: var(--skin-accent-dark) !important;
  font-family: var(--skin-font) !important;
  border-radius: 26px !important;
  font-weight: 700 !important;
  color: var(--skin-text) !important;
}

#main_body .btn:hover,
#main_body .btn-primary:hover,
#main_body .btn-success:hover,
#main_body .btn-default:hover,
#main_body .btn-info:hover,
#main_body .btn-warning:hover,
#main_body button:hover,
#main_body input[type="submit"]:hover,
#main_body input[type="button"]:hover,
#main_body a.btn:hover {
  background-color: var(--skin-accent-dark) !important;
  border-color: var(--skin-accent-dark) !important;
  color: var(--skin-text) !important;
}

/* Danger / cancel buttons stay red so destructive actions remain obvious */
#main_body .btn-danger {
  background-color: #c0392b !important;
  border-color: #a93226 !important;
  color: #fff !important;
}
#main_body .btn-danger:hover {
  background-color: #a93226 !important;
  border-color: #a93226 !important;
  color: #fff !important;
}

/* Page header row */
#main_body .page-header {
  background-color: var(--skin-bg-white) !important;
  border-bottom-color: var(--skin-border) !important;
}

/* Headings */
#main_body h1, #main_body h2, #main_body h3,
#main_body h4, #main_body h5, #main_body h6 {
  font-family: var(--skin-font) !important;
  color: var(--skin-primary);
}

/* Form controls */
#main_body .form-control {
  font-family: var(--skin-font);
  border-color: var(--skin-border);
}

#main_body .form-control:focus {
  border-color: var(--skin-primary);
  box-shadow: 0 0 0 2px rgba(0, 58, 73, 0.15);
}

/* Panel headers */
#main_body .panel-heading,
#main_body .portlet > .portlet-title {
  background-color: var(--skin-accent) !important;
  color: var(--skin-text) !important;
  font-family: var(--skin-font) !important;
  border-radius: 0 !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

/* Sidebar container */
#main_body .page-sidebar {
  background-color: var(--skin-bg) !important;
  border-right: 1px solid var(--skin-border) !important;
}

/* Sidebar menu — all links */
#main_body .page-sidebar-menu > li > a {
  color: var(--skin-text) !important;
  font-family: var(--skin-font);
}

#main_body .page-sidebar-menu > li > a i {
  color: var(--skin-text) !important;
}

#main_body .page-sidebar-menu > li > a:hover,
#main_body .page-sidebar-menu > li:hover > a {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: var(--skin-text) !important;
}

/* Active / selected item */
#main_body .page-sidebar-menu > li.active > a,
#main_body .page-sidebar-menu > li.active:hover > a,
#main_body .page-sidebar-menu > li.open > a {
  background-color: var(--skin-accent) !important;
  color: var(--skin-text) !important;
  border-left-color: var(--skin-accent-dark) !important;
}

#main_body .page-sidebar-menu > li.active > a i,
#main_body .page-sidebar-menu > li.active:hover > a i,
#main_body .page-sidebar-menu > li.open > a i {
  color: var(--skin-text) !important;
}

/* Active indicator arrow */
#main_body .page-sidebar-menu > li.active > a .selected,
#main_body .page-sidebar-menu > li.active > a::after {
  border-left-color: var(--skin-accent) !important;
}

/* Sub-menu items */
#main_body .page-sidebar-menu .sub-menu > li > a {
  color: var(--skin-text) !important;
  font-family: var(--skin-font) !important;
  background-color: rgba(0, 0, 0, 0.03) !important;
}

#main_body .page-sidebar-menu .sub-menu > li > a:hover {
  background-color: rgba(0, 0, 0, 0.08) !important;
  color: var(--skin-text) !important;
}

#main_body .page-sidebar-menu .sub-menu > li.active > a {
  background-color: var(--skin-accent) !important;
  color: var(--skin-text) !important;
}

/* Sidebar toggler button */
#main_body .sidebar-toggler {
  background-color: var(--skin-bg) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  #main_body .asla-app-nav-items {
    flex-wrap: wrap;
  }

  #main_body .asla-app-nav-item a {
    padding: 9px 12px;
    font-size: 12px;
  }

  #main_body .asla-app-nav-item a span {
    display: none;
  }

  #main_body .asla-app-nav-item a i {
    font-size: 16px;
    opacity: 1;
  }

  #main_body .asla-footer-top {
    flex-direction: column;
  }

  #main_body .asla-footer-links {
    gap: 24px;
  }

  #main_body .asla-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}