/* ============================================================================
   TMS HRMS — Fluent Workspaces for the EMPLOYEE PORTAL (approved 24 Jul 2026)
   Loaded LAST in web_include_css, so it re-tokens and reshapes the pastel
   portal (tms_brand.css + tms-app.css + page inline styles) to the same
   identity as the Desk: TMS Blue shell, flat Fluent-2 surfaces, Segoe UI,
   4/8px corners, Fluent elevation. Presentation only.
   ============================================================================ */

/* ---- 1. Token takeover ---- */
:root {
  /* tms-app.css vocabulary */
  --navy:  #0F6CBD;
  --navy2: #115EA3;
  --accent:#217346;
  --bg:    #F5F5F4;
  --card:  #FFFFFF;
  --text:  #242424;
  --muted: #616161;
  --line:  #E0DEDB;
  --radius:8px;
  --shadow:0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12);
  /* tms_brand.css vocabulary */
  --tms-purple:  #0F6CBD;
  --tms-purple-d:#115EA3;
  --tms-mint:    #217346;
  --tms-peach:   #C43E1C;
  --tms-pink:    #5B5FC7;
  --tms-sky:     #0F6CBD;
  --tms-cream:   #F5F5F4;
  --tms-ink:     #242424;
  --primary: #0F6CBD !important;
  --primary-color: #0F6CBD !important;
  --btn-primary: #0F6CBD !important;
  --blue-500: #0F6CBD !important;
  --blue-600: #115EA3 !important;
  --bg-color: #F5F5F4 !important;
  --text-color: #242424 !important;
  --heading-color: #242424 !important;
  --border-radius: 4px !important;
  --border-radius-md: 6px !important;
  --border-radius-lg: 8px !important;
  --font-stack: "Segoe UI Variable Text","Segoe UI",-apple-system,system-ui,Arial,sans-serif !important;
}

/* ---- 2. Base surfaces & type ---- */
body, .web-page-content, .page-content {
  background: #F5F5F4 !important;
  color: #242424;
  font-family: "Segoe UI Variable Text","Segoe UI",-apple-system,system-ui,Arial,sans-serif !important;
}
h1, h2, h3, h4 { color: #242424 !important; font-weight: 650; letter-spacing: -.2px; }
a { color: #0F6CBD; }

/* website navbar = the blue app bar */
.navbar, header.navbar, .navbar.navbar-expand {
  background: #0F6CBD !important;
  border-bottom: none !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.14) !important;
}
.navbar .navbar-brand, .navbar .nav-link { color: #fff !important; }
.navbar .navbar-brand img { background: #fff; border-radius: 4px; padding: 2px 6px; }
.web-footer { background: #fff; border-top: 1px solid #E0DEDB; }

/* ---- 3. tms-app components (the /m tiles, tables, heroes) ---- */
.tms-hero {
  background: #0F6CBD !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12) !important;
}
.tms-card {
  border-radius: 8px !important;
  border: 1px solid #E0DEDB !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12) !important;
  transition: box-shadow 150ms cubic-bezier(0.1,0.9,0.2,1), transform 150ms cubic-bezier(0.1,0.9,0.2,1) !important;
}
.tms-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12) !important;
  border-color: #0F6CBD !important;
}
.tms-ic {
  border-radius: 6px !important;
  background: #EBF3FC !important;
  color: #0C548F !important;
}
.tms-section { color: #616161; }
.tms-alert {
  background: #FFF4CE !important;
  border: 1px solid #EED27A !important;
  border-left: 4px solid #8A5A00 !important;
  border-radius: 4px !important;
  color: #6B4A08 !important;
}
.tms-table { border-radius: 8px !important; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12) !important; }
.tms-table th {
  background: #F0F0EE !important;
  color: #242424 !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #D1D1D1 !important;
}
.tms-table tr:nth-child(even) td { background: #FAFAF9; }
.tms-table tr:hover td { background: #EBF3FC; }
.tms-back { color: #0F6CBD !important; }

/* buttons: flat Fluent */
.btn, button.btn {
  background: #0F6CBD;
  border-radius: 4px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.btn:hover { background: #115EA3; }
.btn-accent { background: #217346 !important; }
.btn-accent:hover { background: #175B32 !important; }
.btn-primary { background: #0F6CBD !important; border-color: #0F6CBD !important; }
.btn-primary:hover, .btn-primary:focus {
  background: #115EA3 !important; border-color: #115EA3 !important;
  transform: none; box-shadow: none !important;
}
.btn-default { background: #fff !important; border: 1px solid #D1D1D1 !important; color: #242424 !important; }

/* inputs: Fluent */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  border: 1px solid #D1D1D1 !important;
  border-radius: 4px !important;
  background: #fff !important;
  color: #242424;
}
input:focus, select:focus, textarea:focus {
  border-color: #0F6CBD !important;
  box-shadow: 0 1px 0 0 #0F6CBD !important;
}
input[type=checkbox], input[type=radio] { accent-color: #0F6CBD; }

/* generic cards on website pages */
.widget, .frappe-card, .form-section, .card, .page-card, .dashboard-section {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12) !important;
  border-color: #E0DEDB !important;
}

/* ---- 4. Sign-in page (overrides its inline pastel styles) ---- */
.lg-bg {
  background: linear-gradient(180deg, #0F6CBD 0%, #0F6CBD 220px, #F5F5F4 220px, #F5F5F4 100%) !important;
}
.lg-card {
  border-radius: 8px !important;
  border: 1px solid #E0DEDB !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.14), 0 0 2px rgba(0,0,0,.12) !important;
  font-family: "Segoe UI Variable Text","Segoe UI",system-ui,sans-serif !important;
}
.lg-card h2 { color: #242424 !important; }
.lg-card .sub { color: #616161 !important; }
.lg-card .mas { filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)) !important; }
.seg { background: #F0F0EE !important; border-radius: 4px !important; }
.seg button { border-radius: 4px !important; color: #616161 !important; }
.seg button.on { background: #fff !important; color: #0F6CBD !important; box-shadow: 0 1px 2px rgba(0,0,0,.14) !important; }
.lg-card input {
  border: 1px solid #D1D1D1 !important;
  border-radius: 4px !important;
  background: #fff !important;
}
.lg-card input:focus { border-color: #0F6CBD !important; box-shadow: 0 1px 0 0 #0F6CBD !important; }
.btn-lav {
  background: #0F6CBD !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.btn-lav:hover { background: #115EA3 !important; }
.btn-lav:active { transform: translateY(1px) !important; box-shadow: none !important; }
.btn-lav.ghost { background: #fff !important; color: #0F6CBD !important; border: 1px solid #D1D1D1 !important; }
.lg-link { color: #0F6CBD !important; }
.sso-b { border: 1px solid #D1D1D1 !important; border-radius: 4px !important; color: #616161 !important; }
.sso-b span.soon { background: #EBF3FC !important; color: #0C548F !important; border-radius: 3px !important; }
.lg-div::before, .lg-div::after { background: #E0DEDB !important; }
.lg-div { color: #616161 !important; }
.lg-msg { color: #0C548F !important; }

/* ---- 5. Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .tms-card, .tms-card:hover { transition: none !important; transform: none !important; }
  .btn-lav:active { transform: none !important; }
}