/* =========================================================================
   IdRamp Skin for Bootstrap 5.3.3 — drop-in override
   ------------------------------------------------------------------------
   Usage in _Layout.cshtml:

       <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
       <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
       <link rel="stylesheet" href="~/css/idramp-skin.css" asp-append-version="true" />

   Must load AFTER bootstrap.min.css (and after site.css if you keep it).
   Targets Bootstrap 5.3.x — uses Bootstrap's --bs-* CSS variables.

   Brand anchor: #F37243 IdRamp Orange.
   Voice: enterprise security, flat, deliberate. No gradients, no neon.
   ========================================================================= */


/* --- Fonts ----------------------------------------------------------------
   IBM Plex Sans (UI + body) · Space Grotesk (display) · IBM Plex Mono.
   All free, all from Google Fonts. Swap in licensed brand fonts here later.
*/
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap");


/* --- Design tokens --------------------------------------------------------
   Mirrors the IdRamp design system. Keep edits here if you need to retheme.
*/
:root {
  /* Brand */
  --idr-orange:      #F37243;
  --idr-orange-600:  #E25A28;
  --idr-orange-700:  #B9441B;
  --idr-orange-100:  #FDE8DB;
  --idr-orange-50:   #FEF5EF;
  --idr-ink:         #0E1320;
  --idr-ink-2:       #1A1F2E;
  --idr-grey:        #2F2F2F;
  --idr-navy:        #1B2A4A;
  --idr-cream:       #FBF7F2;

  /* Neutrals */
  --idr-100: #E9ECF1;
  --idr-200: #D5D9E1;
  --idr-300: #B3B9C6;
  --idr-400: #7F8799;
  --idr-500: #5A6276;
  --idr-600: #3E4557;
  --idr-700: #2A3041;
  --idr-50:  #F4F5F8;

  /* Type families */
  --idr-font-sans:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --idr-font-display: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --idr-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Shadows */
  --idr-shadow-1:     0 1px 2px rgba(14,19,32,0.04), 0 1px 1px rgba(14,19,32,0.03);
  --idr-shadow-2:     0 4px 12px rgba(14,19,32,0.06), 0 1px 2px rgba(14,19,32,0.04);
  --idr-shadow-3:     0 12px 32px rgba(14,19,32,0.10), 0 2px 6px rgba(14,19,32,0.05);
  --idr-shadow-brand: 0 10px 28px rgba(243,114,67,0.28);
  --idr-ring-brand:   0 0 0 3px rgba(243,114,67,0.30);
}


/* --- Bootstrap variable overrides ----------------------------------------
   Bootstrap 5.3 reads --bs-* tokens at runtime. Setting them on :root flows
   into nearly every component without rewriting selectors.
*/
:root,
[data-bs-theme="light"] {
  --bs-primary:                 var(--idr-orange);
  --bs-primary-rgb:             243,114,67;
  --bs-primary-text-emphasis:   var(--idr-orange-700);
  --bs-primary-bg-subtle:       var(--idr-orange-50);
  --bs-primary-border-subtle:   var(--idr-orange-100);

  --bs-link-color:              var(--idr-orange);
  --bs-link-color-rgb:          243,114,67;
  --bs-link-hover-color:        var(--idr-orange-600);
  --bs-link-hover-color-rgb:    226,90,40;

  --bs-body-font-family:        var(--idr-font-sans);
  --bs-body-font-size:          1rem;
  --bs-body-font-weight:        400;
  --bs-body-line-height:        1.55;
  --bs-body-color:              var(--idr-ink);
  --bs-body-color-rgb:          14,19,32;
  --bs-body-bg:                 #FFFFFF;
  --bs-body-bg-rgb:             255,255,255;

  --bs-emphasis-color:          var(--idr-ink);
  --bs-secondary-color:         var(--idr-500);
  --bs-tertiary-color:          var(--idr-400);
  --bs-secondary-bg:            var(--idr-50);
  --bs-tertiary-bg:             var(--idr-50);

  --bs-border-color:            var(--idr-200);
  --bs-border-color-translucent: rgba(14,19,32,0.10);
  --bs-border-radius:           8px;
  --bs-border-radius-sm:        4px;
  --bs-border-radius-lg:        12px;
  --bs-border-radius-xl:        16px;
  --bs-border-radius-pill:      999px;

  --bs-focus-ring-color:        rgba(243,114,67,0.30);
  --bs-focus-ring-width:        3px;
  --bs-focus-ring-opacity:      1;

  --bs-success:                 #2E8B5A;
  --bs-warning:                 #C97A0B;
  --bs-danger:                  #C0392B;
  --bs-info:                    #1F6FEB;

  --bs-heading-color:           var(--idr-ink);

  --bs-code-color:              var(--idr-orange-700);
}

/* Dark theme bootstrap tokens — for the navbar, footer, etc. when scoped via
   data-bs-theme="dark". */
[data-bs-theme="dark"] {
  --bs-body-bg:            var(--idr-ink);
  --bs-body-bg-rgb:        14,19,32;
  --bs-body-color:         #E9ECF1;
  --bs-body-color-rgb:     233,236,241;
  --bs-emphasis-color:     #FFFFFF;
  --bs-secondary-color:    rgba(233,236,241,0.75);
  --bs-tertiary-color:     rgba(233,236,241,0.55);
  --bs-border-color:       rgba(255,255,255,0.10);
  --bs-link-color:         var(--idr-orange);
  --bs-link-hover-color:   var(--idr-orange-400, #F89470);
  --bs-heading-color:      #FFFFFF;
}


/* --- Base typography ------------------------------------------------------ */
body {
  font-family: var(--idr-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--idr-font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.display-1, .display-2, .display-3, .display-4 { letter-spacing: -0.035em; font-weight: 500; }

h5, h6, .h5, .h6 { font-family: var(--idr-font-sans); font-weight: 600; letter-spacing: -0.01em; }

.lead { font-weight: 400; color: var(--idr-500); }

p, .body { text-wrap: pretty; }

code, kbd, samp, pre { font-family: var(--idr-font-mono); }

::selection { background: var(--idr-orange); color: #fff; }

/* Eyebrow label — mono, uppercase, orange. Used above section heads. */
.eyebrow {
  display: inline-block;
  font-family: var(--idr-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--idr-orange);
  margin-bottom: .75rem;
}


/* --- Buttons -------------------------------------------------------------- */
.btn {
  --bs-btn-font-family: var(--idr-font-sans);
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: .5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-radius: 6px;
  letter-spacing: -0.005em;
  transition: background-color var(--bs-transition, 150ms ease-out),
              border-color 150ms ease-out,
              color 150ms ease-out,
              box-shadow 150ms ease-out;
}
.btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; }
.btn-sm { --bs-btn-padding-y: .375rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .8125rem; }

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--idr-orange);
  --bs-btn-border-color: var(--idr-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--idr-orange-600);
  --bs-btn-hover-border-color: var(--idr-orange-600);
  --bs-btn-focus-shadow-rgb: 243,114,67;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--idr-orange-700);
  --bs-btn-active-border-color: var(--idr-orange-700);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--idr-orange);
  --bs-btn-disabled-border-color: var(--idr-orange);
}

.btn-outline-primary {
  --bs-btn-color: var(--idr-orange);
  --bs-btn-border-color: var(--idr-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--idr-orange);
  --bs-btn-hover-border-color: var(--idr-orange);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--idr-orange-600);
  --bs-btn-active-border-color: var(--idr-orange-600);
  --bs-btn-focus-shadow-rgb: 243,114,67;
}

.btn-secondary {
  --bs-btn-color: var(--idr-ink);
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: var(--idr-200);
  --bs-btn-hover-color: var(--idr-ink);
  --bs-btn-hover-bg: var(--idr-50);
  --bs-btn-hover-border-color: var(--idr-300);
  --bs-btn-active-color: var(--idr-ink);
  --bs-btn-active-bg: var(--idr-100);
  --bs-btn-active-border-color: var(--idr-300);
  --bs-btn-focus-shadow-rgb: 14,19,32;
}

.btn-link {
  --bs-btn-color: var(--idr-orange);
  --bs-btn-hover-color: var(--idr-orange-600);
  text-decoration: none;
  font-weight: 500;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.btn:focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: var(--idr-ring-brand);
}


/* --- Forms ---------------------------------------------------------------- */
.form-control,
.form-select {
  border-color: var(--idr-200);
  border-radius: 6px;
  font-family: var(--idr-font-sans);
  color: var(--idr-ink);
  background-color: #fff;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.form-control::placeholder { color: var(--idr-400); }
.form-control:hover,
.form-select:hover { border-color: var(--idr-300); }
.form-control:focus,
.form-select:focus {
  border-color: var(--idr-orange);
  box-shadow: var(--idr-ring-brand);
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--idr-50);
  color: var(--idr-400);
}

.form-label {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--idr-600);
  margin-bottom: .35rem;
  letter-spacing: 0.005em;
}

.form-text { font-size: .8125rem; color: var(--idr-500); }

/* Floating labels (default ASP.NET Identity uses these). */
.form-floating > label {
  color: var(--idr-400);
  font-family: var(--idr-font-sans);
  padding-left: .9rem;
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: var(--idr-orange);
  font-weight: 500;
  font-size: .7rem;
  letter-spacing: 0.02em;
}

/* Check + radio */
.form-check-input {
  border-color: var(--idr-300);
  width: 1.05em;
  height: 1.05em;
  margin-top: .2em;
}
.form-check-input:checked {
  background-color: var(--idr-orange);
  border-color: var(--idr-orange);
}
.form-check-input:focus {
  border-color: var(--idr-orange);
  box-shadow: var(--idr-ring-brand);
}

/* Validation — ASP.NET Identity uses .text-danger + asp-validation-summary */
.text-danger,
.validation-summary-errors,
.field-validation-error {
  color: #C0392B !important;
  font-size: .8125rem;
}
.input-validation-error { border-color: #C0392B !important; }
.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(192,57,43,0.22) !important; }

.form-control.is-invalid,
.form-select.is-invalid { border-color: #C0392B; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192,57,43,0.22); }


/* --- Navbar — dark by default --------------------------------------------
   In _Layout.cshtml change:
     <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
   to:
     <nav class="navbar navbar-expand-sm navbar-toggleable-sm idr-navbar mb-3" data-bs-theme="dark">
*/
.idr-navbar,
.navbar.bg-dark,
.navbar[data-bs-theme="dark"] {
  background-color: var(--idr-ink) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-top: .75rem;
  padding-bottom: .75rem;
  box-shadow: none;
}

.idr-navbar .navbar-brand,
.navbar[data-bs-theme="dark"] .navbar-brand {
  font-family: var(--idr-font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-top: 0;
  padding-bottom: 0;
}
.idr-navbar .navbar-brand img,
.navbar[data-bs-theme="dark"] .navbar-brand img {
  height: 26px;
  width: auto;
  display: block;
}
.idr-navbar .navbar-brand:hover { color: #fff; }

.idr-navbar .nav-link,
.navbar[data-bs-theme="dark"] .nav-link {
  color: rgba(255,255,255,0.78);
  font-size: .9375rem;
  font-weight: 500;
  padding: .5rem .9rem;
  border-radius: 6px;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.idr-navbar .nav-link:hover,
.idr-navbar .nav-link:focus,
.navbar[data-bs-theme="dark"] .nav-link:hover,
.navbar[data-bs-theme="dark"] .nav-link:focus {
  color: #fff;
  background-color: rgba(255,255,255,0.06);
}
.idr-navbar .nav-link.active,
.idr-navbar .nav-item.active > .nav-link,
.navbar[data-bs-theme="dark"] .nav-link.active {
  color: #fff;
  background-color: rgba(243,114,67,0.16);
  box-shadow: inset 0 -2px 0 var(--idr-orange);
  border-radius: 6px 6px 0 0;
}

.idr-navbar .navbar-toggler,
.navbar[data-bs-theme="dark"] .navbar-toggler {
  border-color: rgba(255,255,255,0.18);
  padding: .35rem .55rem;
}
.idr-navbar .navbar-toggler:focus { box-shadow: var(--idr-ring-brand); }
.idr-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* "Register / Login" pair on the right (typical _LoginPartial.cshtml). */
.idr-navbar .navbar-nav .nav-item:last-child .nav-link { color: rgba(255,255,255,0.95); }


/* --- Footer --------------------------------------------------------------- */

/* Sticky-footer pattern: pin the footer to the viewport bottom when content
   is short, push it below when content is long. Works on the default
   ASP.NET Core _Layout.cshtml without any markup change — the layout's
   structure (<header>, <div class="container">, <footer>) becomes a flex
   column on <body>, and margin-top:auto on .footer absorbs remaining space. */
html { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > .footer { margin-top: auto; }

.footer {
  background: var(--idr-ink);
  color: rgba(255,255,255,0.75);
  border-top: 0;
  padding: 1.5rem 0;
  font-size: .875rem;
}
.footer a { color: var(--idr-orange); }
.footer a:hover { color: var(--idr-orange-400, #F89470); text-decoration: underline; }
.footer .container { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer .footer-mark {
  height: 18px;
  width: auto;
  opacity: .9;
}

/* The default template wraps body in <main role="main" class="pb-3">.
   Make sure content has breathing room above a sticky-ish dark footer. */
.bg-body-tertiary { background-color: var(--idr-50) !important; }


/* --- Cards ---------------------------------------------------------------- */
.card {
  --bs-card-border-color: var(--idr-200);
  --bs-card-border-radius: 12px;
  --bs-card-inner-border-radius: 11px;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-title-color: var(--idr-ink);
  box-shadow: var(--idr-shadow-1);
  transition: box-shadow 200ms ease-out, border-color 200ms ease-out;
}
.card:hover { box-shadow: var(--idr-shadow-2); border-color: var(--idr-300); }
.card-header {
  background: #fff;
  border-bottom-color: var(--idr-100);
  font-weight: 600;
  font-family: var(--idr-font-display);
  letter-spacing: -0.01em;
}
.card-title { font-family: var(--idr-font-display); font-weight: 600; letter-spacing: -0.015em; }


/* --- Alerts --------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  padding: .85rem 1rem;
  font-size: .9375rem;
}
.alert-primary {
  --bs-alert-color: var(--idr-orange-700);
  --bs-alert-bg: var(--idr-orange-50);
  --bs-alert-border-color: var(--idr-orange-100);
}
.alert-success {
  --bs-alert-color: #1F6A43;
  --bs-alert-bg: #E6F4EC;
  --bs-alert-border-color: #C8E5D4;
}
.alert-warning {
  --bs-alert-color: #8A5408;
  --bs-alert-bg: #FBEFD5;
  --bs-alert-border-color: #F2DBA6;
}
.alert-danger {
  --bs-alert-color: #8A271D;
  --bs-alert-bg: #F8E2DE;
  --bs-alert-border-color: #ECC3BC;
}
.alert-info {
  --bs-alert-color: #154EA8;
  --bs-alert-bg: #E3EDFD;
  --bs-alert-border-color: #C3D6F5;
}


/* --- Badges --------------------------------------------------------------- */
.badge {
  font-family: var(--idr-font-mono);
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: .35em .6em;
  border-radius: 999px;
}
.badge.bg-primary { background-color: var(--idr-orange) !important; }


/* --- Tables --------------------------------------------------------------- */
.table {
  --bs-table-color: var(--idr-ink);
  --bs-table-border-color: var(--idr-100);
  font-size: .9375rem;
}
.table > thead {
  font-family: var(--idr-font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--idr-500);
}
.table > thead th {
  border-bottom: 1px solid var(--idr-200);
  padding-top: .65rem;
  padding-bottom: .65rem;
  font-weight: 500;
}


/* --- Pagination ----------------------------------------------------------- */
.page-link {
  color: var(--idr-ink);
  border-color: var(--idr-200);
}
.page-link:hover { background-color: var(--idr-50); color: var(--idr-orange-600); }
.page-item.active .page-link {
  background-color: var(--idr-orange);
  border-color: var(--idr-orange);
}


/* --- List groups ---------------------------------------------------------- */
.list-group-item { border-color: var(--idr-100); }
.list-group-item.active {
  background-color: var(--idr-orange);
  border-color: var(--idr-orange);
}


/* --- Hero / Jumbotron (replaces the default template's "Welcome" block) ----
   Wrap the jumbotron in <section class="idr-hero">...</section>.
*/
.idr-hero {
  position: relative;
  overflow: hidden;
  background: var(--idr-ink);
  color: #fff;
  border-radius: 16px;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3.5rem);
  margin: 0 0 3rem;
  isolation: isolate;
}
.idr-hero::before {
  /* faint vertical ink gradient — the only gradient the brand allows */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0E1320 0%, #1A1F2E 100%);
  z-index: -2;
}
.idr-hero::after {
  /* hex-grid watermark, corner */
  content: "";
  position: absolute;
  top: -120px; right: -120px;
  width: 640px; height: 640px;
  background: url("../images/hex-watermark.svg") no-repeat center / contain;
  opacity: .35;
  z-index: -1;
  pointer-events: none;
}
.idr-hero .eyebrow { color: var(--idr-orange); margin-bottom: 1rem; }
.idr-hero h1,
.idr-hero .display-4 {
  font-family: var(--idr-font-display);
  color: #fff;
  font-weight: 500;
  letter-spacing: -0.035em;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.04;
  max-width: 22ch;
  margin-bottom: 1.25rem;
}
.idr-hero p, .idr-hero .lead {
  color: rgba(255,255,255,0.78);
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 56ch;
}
.idr-hero .btn-primary {
  box-shadow: var(--idr-shadow-brand);
}

/* For dense product/admin pages: full-bleed dark heading bar instead of hero */
.idr-pagehead {
  background: #FFFFFF;
  border-bottom: 1px solid var(--idr-100);
  padding: 1.75rem 0 1.25rem;
  margin-bottom: 1.75rem;
}
.idr-pagehead h1 { font-size: 1.875rem; margin: 0; }
.idr-pagehead .eyebrow { margin-bottom: .35rem; }


/* --- Auth pages (Login / Register) — tighten the default ---------------- */
.idr-auth {
  max-width: 420px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--idr-100);
  border-radius: 12px;
  box-shadow: var(--idr-shadow-1);
}
.idr-auth h1, .idr-auth h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}
.idr-auth .form-floating { margin-bottom: .75rem; }
.idr-auth hr { border-color: var(--idr-100); margin: 1.5rem 0; }


/* --- Misc ----------------------------------------------------------------- */
.text-muted { color: var(--idr-500) !important; }
.border { border-color: var(--idr-200) !important; }
.border-top { border-top-color: var(--idr-200) !important; }
.border-bottom { border-bottom-color: var(--idr-200) !important; }

a { text-underline-offset: 3px; }
a:hover { text-decoration: underline; }

/* The default site.css adds a focus outline on .btn:focus that is bluish.
   Re-set it to brand orange. */
.btn-check:focus + .btn,
.btn:focus { box-shadow: var(--idr-ring-brand); }