/*
 * UKNURSES — HOMEPAGE VISUAL STANDARD
 * Global override layer for public pages, authentication, client portal
 * and administration. This replaces legacy teal/navy/gold visual styling.
 *
 * Design authority: approved homepage Blade (2026).
 * Layout inspiration: Stripe section-container mechanics.
 * Visual inspiration: Eduxo homepage styling already incorporated in
 * the approved UKNurses homepage.
 *
 * This stylesheet changes presentation only. It does not alter routes,
 * form actions, permissions, JavaScript behaviour or business logic.
 */

/* ---------------------------------------------------------------
   1. AUTHORITATIVE BRAND TOKENS
   --------------------------------------------------------------- */
:root {
  --uk-primary: #6045FF;
  --uk-primary-hover: #533AFD;
  --uk-secondary: #FFA03A;
  --uk-tertiary: #FE5900;
  --uk-blue: #1D1354;
  --uk-deep: #040210;
  --uk-heading: #040210;
  --uk-heading-alt: #4B4669;
  --uk-body: #6A6876;
  --uk-muted: #6A6876;
  --uk-shade: #F4F5F8;
  --uk-off: #F4F5F8;
  --uk-warm: #F4F5F8;
  --uk-warm-2: #EAE8F3;
  --uk-surface: #FFFFFF;
  --uk-white: #FFFFFF;
  --uk-black: #000000;
  --uk-border: #E5E7ED;
  --uk-border-2: #D5D2E5;
  --uk-success: #35CC6C;
  --uk-danger: #FE5900;
  --uk-warning: #FFA03A;
  --uk-info: #6045FF;
  --uk-navy: #1D1354;
  --uk-navy-2: #2B216B;
  --uk-navy-3: #40358A;
  --uk-teal: #6045FF;
  --uk-teal-2: #533AFD;
  --uk-teal-3: #BDB4FF;
  --uk-teal-light: rgba(96,69,255,.09);
  --uk-teal-mid: rgba(96,69,255,.18);
  --uk-gold: #FFA03A;
  --uk-gold-light: rgba(255,160,58,.14);
  --uk-coral: #FE5900;
  --uk-admin-accent: #6045FF;
  --uk-purple-light: rgba(96,69,255,.09);

  --uk-text: #040210;
  --uk-font-display: "Lexend", sans-serif;
  --uk-font-body: "Hind", sans-serif;

  --uk-fs-h1: clamp(2rem, 3.2vw + 1.25rem, 3.625rem);
  --uk-fs-h2: clamp(1.875rem, 1.8vw + 1.375rem, 2.625rem);
  --uk-fs-h3: clamp(1.5rem, 1.5vw + 1rem, 1.875rem);
  --uk-fs-h4: clamp(1.125rem, .5vw + 1rem, 1.25rem);
  --uk-fs-body-lg: 18px;
  --uk-fs-body: 16px;
  --uk-fs-nav: 14px;
  --uk-fs-btn: 14px;
  --uk-fs-caption: 12px;

  --uk-space-1: 4px;
  --uk-space-2: 8px;
  --uk-space-3: 12px;
  --uk-space-4: 16px;
  --uk-space-5: 20px;
  --uk-space-6: 24px;
  --uk-space-8: 32px;
  --uk-space-10: 40px;
  --uk-space-12: 48px;
  --uk-space-16: 64px;
  --uk-space-20: 80px;

  --uk-container: 1320px;
  --uk-page-boundary-width: 1320px;
  --uk-gutter: clamp(20px, 3.2vw, 40px);
  --uk-page-boundary-gutter: clamp(20px, 3.2vw, 40px);
  --uk-page-boundary-line: #E5E7ED;

  --uk-radius-sm: 8px;
  --uk-radius: 14px;
  --uk-radius-lg: 16px;
  --uk-r-sm: 8px;
  --uk-r: 14px;
  --uk-r-lg: 16px;

  --uk-shadow-sm: 0 2px 8px rgba(4,2,16,.045);
  --uk-shadow-md: 0 12px 30px rgba(4,2,16,.085);
  --uk-shadow-lg: 1.25rem 1.25rem 4.375rem -.5rem rgba(4,2,16,.10);
  --uk-sh: var(--uk-shadow-sm);
  --uk-sh-2: var(--uk-shadow-md);
  --uk-sh-3: var(--uk-shadow-lg);

  /* Bootstrap-compatible tokens for legacy public/auth templates. */
  --bs-primary: #6045FF;
  --bs-primary-rgb: 96,69,255;
  --bs-secondary: #FFA03A;
  --bs-secondary-rgb: 255,160,58;
  --bs-success: #35CC6C;
  --bs-success-rgb: 53,204,108;
  --bs-danger: #FE5900;
  --bs-warning: #FFA03A;
  --bs-info: #6045FF;
  --bs-dark: #040210;
  --bs-dark-rgb: 4,2,16;
  --bs-body-color: #6A6876;
  --bs-body-bg: #FFFFFF;
  --bs-border-color: #E5E7ED;
  --bs-link-color: #6045FF;
  --bs-link-hover-color: #533AFD;
  --bs-body-font-family: "Hind", sans-serif;
  --bs-heading-font-family: "Lexend", sans-serif;
}

/* ---------------------------------------------------------------
   2. GLOBAL TYPE AND BASE SURFACES
   --------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body,
body.uk-ui,
body .portal,
body .admin-layout {
  font-family: var(--uk-font-body) !important;
  color: var(--uk-deep);
  background: var(--uk-white);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.uk-ui h1, .uk-ui h2, .uk-ui h3, .uk-ui h4 {
  font-family: var(--uk-font-display) !important;
  color: var(--uk-heading);
  letter-spacing: -.035em;
}
p, li, label, small, input, select, textarea, button {
  font-family: var(--uk-font-body);
}
a { color: var(--uk-primary); }
a:hover { color: var(--uk-primary-hover); }
::selection { background: rgba(96,69,255,.18); color: var(--uk-deep); }

/* ---------------------------------------------------------------
   3. STRIPE-INSPIRED SHARED CONTENT BOUNDARY
   Full-width backgrounds remain full bleed; inner content is framed.
   --------------------------------------------------------------- */
.uk-container,
.uk-page-container,
.uk-section-container,
.uk-nav-wrap,
.uk-footer > .uk-container,
body.uk-ui main > .container,
body.uk-ui main > section > .container,
body.uk-ui .main > section > .container,
body.uk-ui .page-content > .container {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--uk-page-boundary-width) !important;
  margin-inline: auto !important;
  padding-inline: var(--uk-page-boundary-gutter) !important;
}

.uk-page-section,
.uk-section,
.uk-section-shell {
  position: relative;
  width: 100%;
  isolation: isolate;
}
.uk-section-container {
  position: relative;
  z-index: 1;
  padding-block: clamp(56px, 6vw, 88px);
  border-inline: 0 solid transparent;
}
.uk-section-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 640px) {
  .uk-section-container,
  .uk-page-container--framed,
  body.uk-ui main > section > .container,
  body.uk-ui .main > section > .container {
    border-inline: 1px solid var(--uk-page-boundary-line);
  }
}
@media (max-width: 639px) {
  .uk-section-container { padding-inline: 20px !important; }
}

/* Existing public layout wrappers inherit the homepage width. */
.uk-ui .uk-container { max-width: var(--uk-page-boundary-width) !important; }
.uk-ui .uk-section,
.uk-ui section[id] { scroll-margin-top: 88px; }
.uk-ui .uk-sec-h2,
.uk-ui .section-title,
.uk-ui .sec-title,
.uk-ui .page-title { color: var(--uk-heading); }

/* ---------------------------------------------------------------
   4. BUTTONS, LINKS AND INTERACTIVE CONTROLS
   --------------------------------------------------------------- */
.uk-btn,
.uk-btn-teal,
.uk-btn-navy,
.uk-btn-gold,
.uk-btn-purple,
.uk-nav-cta,
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background: var(--uk-primary) !important;
  border-color: var(--uk-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 22px rgba(96,69,255,.16);
}
.uk-btn:hover,
.uk-btn-teal:hover,
.uk-btn-navy:hover,
.uk-btn-gold:hover,
.uk-btn-purple:hover,
.uk-nav-cta:hover,
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--uk-primary-hover) !important;
  border-color: var(--uk-primary-hover) !important;
  color: #FFFFFF !important;
}
.uk-btn-outline,
.btn-outline-primary {
  color: var(--uk-primary) !important;
  border-color: var(--uk-primary) !important;
  background: transparent !important;
}
.uk-btn-outline:hover,
.btn-outline-primary:hover {
  color: #FFFFFF !important;
  background: var(--uk-primary) !important;
}
.uk-btn-coral,
.uk-btn-danger,
.btn-danger { background: var(--uk-tertiary) !important; border-color: var(--uk-tertiary) !important; }
.uk-btn-gold { background: var(--uk-secondary) !important; border-color: var(--uk-secondary) !important; color: var(--uk-deep) !important; }
.btn-link, .text-primary, .link-primary { color: var(--uk-primary) !important; }
.bg-primary { background-color: var(--uk-primary) !important; }
.border-primary { border-color: var(--uk-primary) !important; }

/* Focus states are visible and consistent. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid rgba(96,69,255,.28);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------
   5. CARDS, PANELS, TABLES AND FORMS
   --------------------------------------------------------------- */
.uk-card,
.uk-panel,
.card,
.auth-card,
.prc-box,
.iq-single-card,
.portal .card,
.admin-layout .card {
  border-color: var(--uk-border) !important;
  border-radius: var(--uk-radius) !important;
  box-shadow: var(--uk-shadow-sm);
}
.uk-card:hover,
.card:hover { border-color: rgba(96,69,255,.28); }
.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  border-color: var(--uk-border);
  border-radius: 8px;
  color: var(--uk-deep);
}
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--uk-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(96,69,255,.12) !important;
}
.table thead th,
.table thead td {
  background: var(--uk-shade);
  color: var(--uk-deep);
  border-color: var(--uk-border);
}
.table td, .table th { border-color: var(--uk-border); }

/* ---------------------------------------------------------------
   6. PUBLIC NAVIGATION AND FOOTER
   --------------------------------------------------------------- */
.uk-nav {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--uk-border) !important;
  box-shadow: 0 8px 24px rgba(4,2,16,.035) !important;
}
.uk-nav-wrap { max-width: var(--uk-page-boundary-width) !important; }
.uk-nav-link { color: var(--uk-deep) !important; }
.uk-nav-link:hover,
.uk-nav-link.active { color: var(--uk-primary) !important; }
.uk-nav-dropdown-menu {
  border: 1px solid var(--uk-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--uk-shadow-md) !important;
}
.uk-nav-dd-icon { color: var(--uk-primary) !important; background: rgba(96,69,255,.08) !important; }
.uk-nav-portal {
  color: var(--uk-deep) !important;
  border-color: var(--uk-border) !important;
}
.uk-footer {
  background: var(--uk-deep) !important;
  color: rgba(255,255,255,.76) !important;
}
.uk-footer .uk-container { max-width: var(--uk-page-boundary-width) !important; }
.uk-footer-link:hover,
.uk-footer a:hover { color: var(--uk-secondary) !important; }

/* ---------------------------------------------------------------
   7. AUTHENTICATION PAGES
   --------------------------------------------------------------- */
.auth-card,
.uk-auth-card,
.login-card,
.register-card {
  background: #FFFFFF !important;
  border: 1px solid var(--uk-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--uk-shadow-md) !important;
}
.sign-bg,
.gradient-main,
.uk-auth-brand,
.uk-auth-side {
  background-color: var(--uk-deep) !important;
}
.auth-card h1,
.auth-card h2,
.uk-auth-card h1,
.uk-auth-card h2 { color: var(--uk-heading) !important; }

/* ---------------------------------------------------------------
   8. CLIENT PORTAL AND ADMIN — SAME HOMEPAGE BRAND LANGUAGE
   Keep portal geometry, sidebar structure and workflow intact.
   --------------------------------------------------------------- */
.portal,
.admin-layout,
body:has(.portal),
body:has(.admin-layout) {
  --uk-primary: #6045FF;
  --uk-primary-hover: #533AFD;
  --uk-secondary: #FFA03A;
  --uk-teal: #6045FF;
  --uk-teal-2: #533AFD;
  --uk-teal-3: #BDB4FF;
  --uk-navy: #1D1354;
  --uk-navy-2: #2B216B;
  --uk-warm: #F4F5F8;
  --uk-border: #E5E7ED;
  --uk-text: #040210;
}
.portal,
.admin-layout {
  font-family: var(--uk-font-body) !important;
  color: var(--uk-deep);
  background: var(--uk-shade);
}
.portal .sidebar,
.admin-layout .sidebar {
  background: #FFFFFF !important;
  border-right: 1px solid var(--uk-border) !important;
  box-shadow: none !important;
}
.portal .sb-logo,
.admin-layout .sb-logo {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--uk-border) !important;
}
.portal .sb-logo-mark,
.admin-layout .sb-logo-mark {
  background: var(--uk-primary) !important;
  color: #FFFFFF !important;
}
.portal .sb-item.active,
.admin-layout .sb-item.active {
  color: var(--uk-primary) !important;
  background: rgba(96,69,255,.09) !important;
}
.portal .sb-item.active i,
.admin-layout .sb-item.active i { color: var(--uk-primary) !important; }
.portal .topbar,
.admin-layout .topbar {
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid var(--uk-border) !important;
  box-shadow: none !important;
}
.portal .page-content,
.admin-layout .page-content {
  background: var(--uk-shade) !important;
}
.portal .card,
.admin-layout .card,
.portal .panel,
.admin-layout .panel {
  background: #FFFFFF !important;
  border: 1px solid var(--uk-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--uk-shadow-sm) !important;
}
.portal .btn-primary,
.admin-layout .btn-primary,
.portal .btn-teal,
.admin-layout .btn-teal {
  background: var(--uk-primary) !important;
  border-color: var(--uk-primary) !important;
}
.portal .badge.bg-teal,
.admin-layout .badge.bg-teal,
.portal .bg-teal,
.admin-layout .bg-teal {
  background: var(--uk-primary) !important;
}

/* ---------------------------------------------------------------
   9. RESPONSIVE SAFETY — DO NOT ALTER FUNCTIONAL LAYOUT BEHAVIOUR
   --------------------------------------------------------------- */
img, video, iframe { max-width: 100%; }
.uk-ui .container,
.uk-ui .uk-container,
.portal .page-content,
.admin-layout .page-content { min-width: 0; }
@media (max-width: 767px) {
  .uk-ui .container,
  .uk-ui .uk-container,
  .uk-page-container,
  .uk-section-container {
    padding-inline: 20px !important;
  }
  .uk-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .uk-footer-grid { grid-template-columns: minmax(0,1fr); }
}

/* END UKNURSES HOMEPAGE VISUAL STANDARD */