/* ==========================================================================
   EncuestaSec - Corporate White-Label Stylesheet
   Brand Colors: Midnight Navy (#0F172A), Electric Cyan (#0EA5E9 / #0284C7)
   ========================================================================== */

:root {
  --es-navy-950: #080D1A;
  --es-navy-900: #0B1120;
  --es-navy-800: #0F172A;
  --es-navy-700: #1E293B;
  --es-navy-600: #334155;
  --es-cyan-400: #38BDF8;
  --es-cyan-500: #0EA5E9;
  --es-cyan-600: #0284C7;
  --es-cyan-700: #0369A1;
  --es-teal-400: #2DD4BF;
  --es-teal-500: #14B8A6;
  --es-gray-50:  #F8FAFC;
  --es-gray-100: #F1F5F9;
  --es-gray-200: #E2E8F0;
  --es-gray-300: #CBD5E1;
  --es-gray-400: #94A3B8;
  --es-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Top Navigation & Header
   -------------------------------------------------------------------------- */
.mdl-layout__header,
header.mdl-layout__header {
  background-color: var(--es-navy-800) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(11, 17, 32, 0.25) !important;
}

.mdl-layout__header .mdl-layout__title {
  width: auto !important;
  min-width: 185px !important;
}

.mdl-layout__header .header__logo {
  width: 185px !important;
  height: 40px !important;
  background-image: url('/static/kobologo.svg') !important;
  background-size: contain !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  display: block !important;
}

@media screen and (max-width: 768px) {
  .mdl-layout__header .header__logo {
    width: 40px !important;
    background-image: url('/static/compiled/kobologo_symbol.svg') !important;
  }
}

/* --------------------------------------------------------------------------
   Navigation & Tab Controls
   -------------------------------------------------------------------------- */
.mdl-layout__tab-bar {
  background-color: var(--es-navy-800) !important;
}

.mdl-layout__tab.is-active,
.header__nav-item.is-active {
  color: var(--es-cyan-400) !important;
  border-bottom-color: var(--es-cyan-500) !important;
}

.mdl-layout__tab:hover,
.header__nav-item:hover {
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Buttons & Primary Actions
   -------------------------------------------------------------------------- */
.kobo-button--blue,
button.kobo-button--blue,
.ui-button--blue,
.btn-primary,
button[type="submit"].btn-primary,
.submit-btn {
  background: linear-gradient(135deg, var(--es-cyan-500) 0%, var(--es-cyan-600) 100%) !important;
  border: none !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  box-shadow: 0 2px 10px rgba(14, 165, 233, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  letter-spacing: 0.2px !important;
}

.kobo-button--blue:hover,
button.kobo-button--blue:hover,
.ui-button--blue:hover,
.btn-primary:hover,
button[type="submit"].btn-primary:hover,
.submit-btn:hover {
  background: linear-gradient(135deg, var(--es-cyan-400) 0%, var(--es-cyan-600) 100%) !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.5) !important;
  transform: translateY(-1px);
}

.kobo-button--blue:active,
button.kobo-button--blue:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(14, 165, 233, 0.3) !important;
}

/* --------------------------------------------------------------------------
   Login, Signup & Auth Screens
   -------------------------------------------------------------------------- */
.registration__bg {
  background: url('/static/compiled/signup_photo.jpg') center center / cover no-repeat fixed,
              radial-gradient(circle at top right, #1E293B 0%, #0F172A 60%, #0B1120 100%) !important;
  min-height: 100vh;
  position: relative;
}

.registration--login,
.registration--signup,
.registration {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  box-shadow: 0 25px 60px -15px rgba(11, 17, 32, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
  border: 1px solid var(--es-gray-200) !important;
  padding: 40px !important;
}

.registration--logo {
  background: var(--es-navy-800) !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
  display: inline-block !important;
  margin-bottom: 28px !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.3) !important;
  text-align: center !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.registration--logo img {
  max-height: 42px !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

.registration__create-or-forgot a,
.registration a {
  color: var(--es-cyan-600) !important;
  font-weight: 500 !important;
  transition: color 0.15s ease-in-out !important;
}

.registration__create-or-forgot a:hover,
.registration a:hover {
  color: var(--es-cyan-700) !important;
  text-decoration: underline !important;
}

.registration input[type="text"],
.registration input[type="password"],
.registration input[type="email"] {
  border-radius: 6px !important;
  border: 1px solid var(--es-gray-300) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  padding: 10px 14px !important;
}

.registration input[type="text"]:focus,
.registration input[type="password"]:focus,
.registration input[type="email"]:focus {
  border-color: var(--es-cyan-500) !important;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2) !important;
  outline: none !important;
}

/* Hide refugee camp photo copyright */
.registration__credit {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Accents, Badges & Sidebar
   -------------------------------------------------------------------------- */
a {
  color: var(--es-cyan-600);
}

a:hover {
  color: var(--es-cyan-700);
}

.sidebar__item.is-active,
.sidebar-nav__item--active {
  background-color: rgba(14, 165, 233, 0.1) !important;
  color: var(--es-cyan-600) !important;
  border-left: 3px solid var(--es-cyan-500) !important;
}

.ui-panel__header,
.form-view__header {
  border-bottom: 1px solid var(--es-gray-200) !important;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--es-gray-100);
}
::-webkit-scrollbar-thumb {
  background: var(--es-gray-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--es-gray-400);
}

/* --------------------------------------------------------------------------
   Enketo Web Form Branding
   -------------------------------------------------------------------------- */
.main > .paper {
  border-radius: 10px !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
}

.form-header,
.enketo-power {
  display: none !important;
}