/*
 * Improvemint design-system overlay for Customer Track2.
 *
 * Single token spine mirrored from the merchant portal
 * (client/merchant-portal-web/src/config/portal.config.ts `theme`) so Track2
 * shares one visual language with the rest of Improvemint. Loaded LAST in
 * _Layout.cshtml and _LayoutNoAuth.cshtml so these rules win over the legacy
 * Tempoe skin (Content/home/* and Content/t2t/default/*) without editing those
 * near-duplicate files.
 *
 * Also carries the mobile / scroll fixes: the legacy landing used a hardcoded
 * 700px SignUp container + fixed 100px header behind `body{overflow-x:hidden}`,
 * which clipped content off-screen and trapped scrolling on phones.
 */

:root {
  --own-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --own-primary: #024656;
  --own-primary-dark: #013540;
  --own-primary-light: #0a5566;

  --own-secondary: #1ddbc0;
  --own-secondary-dark: #16c4ac;
  --own-secondary-hover: #18f0d1;
  --own-secondary-soft: #c8f4ed;

  --own-surface: #ffffff;
  --own-bg: #f8fafc;
  --own-bg-warm: #f1f5f9;

  --own-text: #111827;
  --own-text-label: #374151;
  --own-text-muted: #6b7280;
  --own-text-subtle: #9ca3af;
  --own-text-on-navy: #e6f7f3;

  --own-success: #047857;
  --own-success-soft: #ecfdf5;
  --own-success-solid: #10b981;
  --own-warning: #b45309;
  --own-warning-soft: #fffbeb;
  --own-warning-solid: #f59e0b;
  --own-danger: #ef4444;
  --own-danger-soft: #fef2f2;
  --own-danger-border: #f87171;

  --own-focus-ring: 0 0 0 3px rgba(29, 219, 192, 0.30);
  --own-focus-ring-danger: 0 0 0 3px rgba(239, 68, 68, 0.25);

  --own-border: #d1d5db;
  --own-border-soft: #e5e7eb;
  --own-border-strong: #9ca3af;

  --own-radius-sm: 8px;
  --own-radius-md: 12px;
  --own-radius-lg: 16px;
  --own-radius-xl: 24px;
  --own-radius-pill: 999px;

  --own-shadow-card: 0px 2px 4px -1px rgba(2, 70, 86, 0.06), 0px 10px 24px -8px rgba(2, 70, 86, 0.10);
  --own-shadow-lg: 0px 12px 16px -4px rgba(2, 70, 86, 0.10), 0px 4px 6px -2px rgba(2, 70, 86, 0.05);
  --own-gradient-primary: linear-gradient(135deg, #024656 0%, #03596d 100%);
  --own-gradient-accent: linear-gradient(135deg, #1ddbc0 0%, #16b09b 100%);
}

/* ---------- Base type & surfaces ---------- */
body,
body.login-page {
  font-family: var(--own-font);
  color: var(--own-text);
  background: var(--own-bg) !important;
}

h1, h2, h3, h4, h5, .page-header, .navbar-brand {
  font-family: var(--own-font);
  color: var(--own-primary);
}

a {
  color: var(--own-primary);
}
a:hover,
a:focus {
  color: var(--own-primary-light);
}

/* ==========================================================================
 * MOBILE / SCROLL FIXES
 * ========================================================================== */

/* The legacy body pins overflow-x:hidden AND has a scroll-lock class; make sure
   vertical scrolling always works and momentum-scrolls on iOS. */
html,
body {
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* Only ever hide horizontal overflow — never vertical. */
body,
body.ovh {
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Landing container: was inline width:700px / margin-top:60px which overflowed
   phones. Make it a centered, fluid card column. */
.container.firstRow {
  width: 100% !important;
  max-width: 480px;
  margin: 0 auto !important;
  padding: 24px 16px;
  float: none;
}
/* SignUp reuses .login-container; give it room to breathe on small screens. */
.login-container.panel {
  margin-top: 0 !important;
}

/* NoAuth header was a fixed 100px block; let it size to its content. */
#header.page-navbar {
  height: auto !important;
  min-height: 64px;
  padding: 8px 16px;
  position: static;
}
#header.page-navbar .navbar-brand {
  height: auto;
  padding: 8px 0;
}
#header.page-navbar .navbar-brand img.logo,
#header.page-navbar .navbar-brand img.logoNoAuth {
  max-height: 44px;
  width: auto;
}

/* Authed shell: the 210px sidebar is hidden on <=sm; make sure the content and
   footer are not pushed off-canvas by the leftover margin on small screens. */
@media (max-width: 991px) {
  .page-content.sidebar-page,
  #footer.sidebar-page {
    margin-left: 0 !important;
  }
  #wrapper,
  .page-content-wrapper,
  .page-content-inner {
    width: 100% !important;
  }
}

/* Never let images or wide blocks force horizontal scroll on a phone. */
img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
 * IMPROVEMINT THEME (Bootstrap 3 component overrides)
 * ========================================================================== */

/* Cards / panels -> soft floating card */
.panel,
.panel.tile,
.dashboard-panel,
.lightPanel,
.login-container.panel {
  background: var(--own-surface);
  border: 1px solid var(--own-border-soft);
  border-radius: var(--own-radius-lg);
  box-shadow: var(--own-shadow-card);
}
.panel-heading,
.panel-footer {
  background: var(--own-surface);
  border-color: var(--own-border-soft);
}

/* Header / footer chrome — replace legacy near-black (#0d0d0d) */
#header.page-navbar,
.page-navbar {
  background: var(--own-surface) !important;
  border-bottom: 1px solid var(--own-border-soft);
  box-shadow: none;
}
.navbar-brand,
.navbar-brand.tempoe-gray-back {
  background: transparent !important;
}
.page-navbar .nav > li > a {
  color: var(--own-text-label);
}
.page-navbar .nav > li > a:hover,
.page-navbar .nav > li > a:focus {
  color: var(--own-primary);
  background: var(--own-bg-warm);
}

#footer,
#footer.tempoe-gray-back,
#footer .tempoe-gray-back {
  background: var(--own-primary) !important;
  color: var(--own-text-on-navy);
}
#footer a,
#footer #copyrights,
#footer .col1,
#footer .col2,
#footer .col3 {
  color: var(--own-text-on-navy);
}

/* Sidebar */
.page-sidebar,
.page-sidebar .sidebar-inner {
  background: var(--own-primary);
}
.page-sidebar .side-nav > .nav > li > a {
  color: var(--own-text-on-navy);
}
.page-sidebar .side-nav > .nav > li > a.active,
.page-sidebar .side-nav > .nav > li > a:hover {
  background: var(--own-primary-dark);
  color: #ffffff;
}

/* Legacy brand-color utility classes remapped to the new spine */
.tempoe-green-back { background-color: var(--own-secondary) !important; }
.tempoe-green-fore { color: var(--own-secondary) !important; }
.tempoe-gray-back  { background-color: var(--own-primary) !important; }
.tempoe-gray-fore  { color: var(--own-primary) !important; }

/* Buttons: primary = mint fill w/ navy text (matches merchant-portal CTA) */
.btn {
  border-radius: var(--own-radius-md);
  font-family: var(--own-font);
  font-weight: 600;
}
.btn-primary {
  background: var(--own-secondary);
  border-color: var(--own-secondary);
  color: var(--own-primary);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background: var(--own-secondary-hover);
  border-color: var(--own-secondary-hover);
  color: var(--own-primary);
}
.btn-primary:focus {
  box-shadow: var(--own-focus-ring);
  outline: none;
}
.btn-default {
  background: var(--own-surface);
  border-color: var(--own-border);
  color: var(--own-text-label);
}
.btn-link {
  color: var(--own-primary);
}

/* Inputs */
.form-control {
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius-sm);
  color: var(--own-text);
  box-shadow: none;
}
.form-control:focus {
  border-color: var(--own-secondary);
  box-shadow: var(--own-focus-ring);
}
.input-group-addon {
  background: var(--own-bg-warm);
  border: 1px solid var(--own-border);
  border-radius: var(--own-radius-sm);
  color: var(--own-text-muted);
}
label,
.control-label {
  color: var(--own-text-label);
  font-weight: 600;
}

/* Alerts / validation */
.alert-danger,
.text-danger {
  color: var(--own-danger);
}
.alert-danger {
  background: var(--own-danger-soft);
  border-color: var(--own-danger-border);
  border-radius: var(--own-radius-sm);
}
.alert-success {
  background: var(--own-success-soft);
  border-color: var(--own-success-solid);
  color: var(--own-success);
  border-radius: var(--own-radius-sm);
}

/* Improvemint welcome banner shown on the Start / Create-account screen */
.im-welcome {
  background: var(--own-secondary-soft);
  border: 1px solid var(--own-secondary);
  border-radius: var(--own-radius-md);
  color: var(--own-primary);
  padding: 14px 16px;
  margin-bottom: 18px;
  text-align: center;
}
.im-welcome strong {
  color: var(--own-primary-dark);
}
.im-signin-hint {
  text-align: center;
  margin-top: 14px;
  color: var(--own-text-muted);
}
.im-signin-hint a {
  font-weight: 600;
}

/* DataTables (loaded on authed pages) — keep grids on-brand */
table.dataTable thead th {
  color: var(--own-text-label);
  border-bottom-color: var(--own-border);
}