/* MokiHair shared interface system — storefront and every portal. */
:root {
  --mh-ink: #201b1e;
  --mh-muted: #72686d;
  --mh-rose: #9e4d65;
  --mh-rose-dark: #813b51;
  --mh-blush: #fcf5f5;
  --mh-cream: #fffdf9;
  --mh-gold: #be8b45;
  --mh-success: #31795a;
  --mh-warning: #be8b45;
  --mh-danger: #b34854;
  --mh-info: #3e6d8b;
  --mh-line: #eee5e4;
  --mh-surface: #ffffff;
  --mh-surface-soft: #faf7f7;
  --mh-radius: .85rem;
  --mh-shadow: 0 5px 18px rgba(61, 39, 46, .07);
  --bs-primary: var(--mh-rose);
  --bs-primary-rgb: 158, 77, 101;
  --bs-warning: var(--mh-gold);
  --bs-warning-rgb: 190, 139, 69;
  --bs-success: var(--mh-success);
  --bs-success-rgb: 49, 121, 90;
  --bs-danger: var(--mh-danger);
  --bs-danger-rgb: 179, 72, 84;
  --bs-info: var(--mh-info);
  --bs-info-rgb: 62, 109, 139;
}

body { background: var(--mh-cream); color: var(--mh-ink); font-family: 'DM Sans', sans-serif; line-height: 1.5; }
body.portal-area { background: #f7f5f6; }
a { color: var(--mh-rose); }
a:hover { color: var(--mh-rose-dark); }
h1, h2, h3, h4, h5, h6 { color: var(--mh-ink); font-weight: 700; letter-spacing: -.015em; }
.text-warning { color: var(--mh-gold) !important; }
.text-secondary, .text-muted { color: var(--mh-muted) !important; }
.text-dark { color: var(--mh-ink) !important; }

/* Shared controls */
.btn { min-height: 40px; border-radius: .6rem; font-weight: 700; border-width: 1px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.btn-sm { min-height: 32px; border-radius: .48rem; }
.btn-lg { min-height: 48px; }
.btn-primary, .btn-warning { background-color: var(--mh-rose); border-color: var(--mh-rose); color: #fff; }
.btn-primary:hover, .btn-primary:focus, .btn-warning:hover, .btn-warning:focus { background-color: var(--mh-rose-dark); border-color: var(--mh-rose-dark); color: #fff; }
.btn-outline-primary, .btn-outline-warning { border-color: var(--mh-rose); color: var(--mh-rose); }
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-warning:hover, .btn-outline-warning:focus { background: var(--mh-rose); border-color: var(--mh-rose); color: #fff; }
.btn-outline-dark { border-color: #4c3f45; color: #4c3f45; }
.btn-outline-dark:hover { background: #4c3f45; border-color: #4c3f45; }
.form-label { color: var(--mh-ink); font-size: .88rem; font-weight: 700; margin-bottom: .45rem; }
.form-control, .form-select { min-height: 42px; border-color: #ded5d4; color: var(--mh-ink); background: var(--mh-surface); }
textarea.form-control { min-height: 108px; }
.form-control::placeholder { color: #9b8f94; }
.form-control:focus, .form-select:focus { border-color: var(--mh-rose); box-shadow: 0 0 0 .2rem rgba(158, 77, 101, .14); }
.form-check-input:checked { background-color: var(--mh-rose); border-color: var(--mh-rose); }
.alert { border: 0; border-radius: .7rem; font-weight: 600; }
.alert-success { background: #e5f3eb; color: #235e43; }
.alert-warning { background: #fff5df; color: #765a16; }
.alert-danger { background: #f9e7e9; color: #88313d; }
.alert-info { background: #e8f1f6; color: #28546f; }
.badge { font-weight: 700; border-radius: 50rem; padding: .42rem .62rem; }
.bg-warning { background-color: var(--mh-gold) !important; }
.bg-success { background-color: var(--mh-success) !important; }
.bg-danger { background-color: var(--mh-danger) !important; }
.bg-info { background-color: var(--mh-info) !important; }

/* Cards and data tables */
.card, .portal-card, .portal-kpi, .feature-card, .auth-card, .checkout-card { border: 1px solid var(--mh-line); border-radius: var(--mh-radius); box-shadow: var(--mh-shadow); background: var(--mh-surface); }
.card-header, .portal-card-header { background: var(--mh-surface); border-bottom: 1px solid var(--mh-line); padding: 1rem 1.25rem; }
.card-footer { background: var(--mh-surface-soft); border-top: 1px solid var(--mh-line); }
.card-body { padding: 1.25rem; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #faf4f5; --bs-table-color: var(--mh-ink); --bs-table-border-color: var(--mh-line); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .9rem .85rem; vertical-align: middle; }
.table > thead > tr > * { background: #faf7f7; color: var(--mh-muted); font-size: .72rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; border-bottom-width: 1px; }
.table-responsive { border-radius: inherit; }
.empty-state, .table td[colspan] { color: var(--mh-muted); }

/* Portal alignment */
.portal-area { --portal-ink: var(--mh-ink); --portal-muted: var(--mh-muted); --portal-line: var(--mh-line); --portal-accent: var(--mh-rose); --portal-accent-dark: var(--mh-rose-dark); --portal-surface: var(--mh-surface); --portal-bg: #f7f5f6; }
.portal-sidebar { background: #211b20; }
.portal-topbar, .employee-workbar { background: var(--mh-surface); border-color: var(--mh-line); }
.portal-content, .portal-area .content { width: 100%; max-width: 1680px; margin: 0 auto; }
.portal-area .container-fluid { max-width: 1680px; }
.portal-hero { background: linear-gradient(110deg, #2b2026, #684154); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 10px 25px rgba(41, 26, 33, .13); }
.portal-hero h1, .portal-hero h2, .portal-hero h3 { color: #fff !important; }
.portal-kpi { padding: 1.25rem; }
.portal-kpi .label { color: var(--mh-muted); font-size: .72rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; }
.portal-kpi .value { color: var(--mh-ink); font-size: 1.7rem; font-weight: 700; line-height: 1.2; margin-top: .4rem; }
.portal-area .card-header.bg-dark, .portal-area .bg-dark.card-header { background: #2b2026 !important; }
.portal-area .topbar-icon, .employee-workbar__icon { border: 1px solid #eee3e6; }
.portal-area .portal-footer { background: var(--mh-surface); border-color: var(--mh-line); }
.portal-admin .d-flex.align-items-start { min-height: 100vh; background: var(--portal-bg); }
.portal-admin .d-flex.align-items-start > .flex-grow-1 { min-width: 0; display: flex; flex-direction: column; }
.portal-admin .d-flex.align-items-start > .flex-grow-1 > .container-fluid { flex: 1; }
.portal-admin .admin-topbar .topbar-icon, .portal-admin .admin-topbar > .ms-auto > a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #f7f2f4; color: var(--mh-ink) !important; }
.portal-admin .admin-topbar .topbar-icon:hover, .portal-admin .admin-topbar > .ms-auto > a:hover { color: var(--mh-rose) !important; background: #eadbe0; }
.portal-partner .portal-hero { padding: 2.1rem 2rem; }
.portal-partner .portal-hero h2 { font-size: clamp(1.55rem, 2.5vw, 2.2rem); font-family: 'Playfair Display', serif; }
.status-pill { display: inline-flex; align-items: center; min-height: 27px; }

/* Intentional dark surfaces for all portal and storefront components. */
body.dark-mode, body[data-theme='dark'] { --mh-ink: #f7eef0; --mh-muted: #c0b3b8; --mh-line: #493b42; --mh-surface: #2a2328; --mh-surface-soft: #332a30; --mh-cream: #1a1518; background: #1a1518; color: #f7eef0; color-scheme: dark; }
body.dark-mode.portal-area, body[data-theme='dark'].portal-area { --portal-bg: #1a1518; background: #1a1518; }
body.dark-mode .portal-main, body.dark-mode .portal-content, body.dark-mode .portal-area .main, body[data-theme='dark'] .portal-main, body[data-theme='dark'] .portal-content, body[data-theme='dark'] .portal-area .main { background: #1a1518; }
body.dark-mode .storefront-nav, body.dark-mode .portal-topbar, body.dark-mode .employee-workbar, body.dark-mode .portal-footer, body[data-theme='dark'] .storefront-nav, body[data-theme='dark'] .portal-topbar, body[data-theme='dark'] .employee-workbar, body[data-theme='dark'] .portal-footer { background: #2a2328; border-color: #493b42; }
body.dark-mode .card, body.dark-mode .portal-card, body.dark-mode .portal-kpi, body.dark-mode .feature-card, body.dark-mode .auth-card, body.dark-mode .checkout-card, body.dark-mode .card-header, body.dark-mode .card-body, body.dark-mode .card-footer, body[data-theme='dark'] .card, body[data-theme='dark'] .portal-card, body[data-theme='dark'] .portal-kpi, body[data-theme='dark'] .feature-card, body[data-theme='dark'] .auth-card, body[data-theme='dark'] .checkout-card, body[data-theme='dark'] .card-header, body[data-theme='dark'] .card-body, body[data-theme='dark'] .card-footer { background-color: var(--mh-surface) !important; color: var(--mh-ink) !important; border-color: var(--mh-line); }
body.dark-mode .table, body.dark-mode .table > :not(caption) > * > *, body[data-theme='dark'] .table, body[data-theme='dark'] .table > :not(caption) > * > * { --bs-table-color: var(--mh-ink); --bs-table-bg: transparent; --bs-table-hover-bg: #3a3036; --bs-table-border-color: var(--mh-line); color: var(--mh-ink); }
body.dark-mode .table > thead > tr > *, body[data-theme='dark'] .table > thead > tr > * { background: #332a30; color: #d9cbd0; }
body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode .form-check-input, body[data-theme='dark'] .form-control, body[data-theme='dark'] .form-select, body[data-theme='dark'] .form-check-input { background: #1e181c; border-color: #594950; color: #f7eef0; }
body.dark-mode .form-control:focus, body.dark-mode .form-select:focus, body[data-theme='dark'] .form-control:focus, body[data-theme='dark'] .form-select:focus { background: #1e181c; color: #fff; }
body.dark-mode .dropdown-menu, body.dark-mode .modal-content, body[data-theme='dark'] .dropdown-menu, body[data-theme='dark'] .modal-content { background: #2a2328; color: #f7eef0; border-color: #493b42; }
body.dark-mode .dropdown-item, body[data-theme='dark'] .dropdown-item { color: #f7eef0; }
body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus, body[data-theme='dark'] .dropdown-item:hover, body[data-theme='dark'] .dropdown-item:focus { background: #3a3036; color: #fff; }
body.dark-mode .bg-white, body.dark-mode .bg-light, body[data-theme='dark'] .bg-white, body[data-theme='dark'] .bg-light { background-color: var(--mh-surface) !important; }
body.dark-mode .text-dark, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6, body.dark-mode .form-label, body[data-theme='dark'] .text-dark, body[data-theme='dark'] h1, body[data-theme='dark'] h2, body[data-theme='dark'] h3, body[data-theme='dark'] h4, body[data-theme='dark'] h5, body[data-theme='dark'] h6, body[data-theme='dark'] .form-label { color: #f7eef0 !important; }
body.dark-mode .text-secondary, body.dark-mode .text-muted, body[data-theme='dark'] .text-secondary, body[data-theme='dark'] .text-muted { color: #c0b3b8 !important; }
body.dark-mode .hero, body.dark-mode .page-hero, body[data-theme='dark'] .hero, body[data-theme='dark'] .page-hero { background: linear-gradient(115deg, #2a2025 0%, #2a2025 52%, #46313b 52%); }
body.dark-mode .display-title, body.dark-mode .section-title, body.dark-mode .navbar-brand, body.dark-mode .storefront-nav .nav-link, body.dark-mode .nav-account, body[data-theme='dark'] .display-title, body[data-theme='dark'] .section-title, body[data-theme='dark'] .navbar-brand, body[data-theme='dark'] .storefront-nav .nav-link, body[data-theme='dark'] .nav-account { color: #f7eef0 !important; }
body.dark-mode .navbar-brand span, body[data-theme='dark'] .navbar-brand span { color: #df8da5 !important; }
body.dark-mode .hero-image, body[data-theme='dark'] .hero-image { box-shadow: 18px 18px 0 #704657; }
body.dark-mode .btn-outline-dark, body[data-theme='dark'] .btn-outline-dark { border-color: #d7c6cc; color: #f7eef0; }
body.dark-mode .btn-outline-dark:hover, body[data-theme='dark'] .btn-outline-dark:hover { background: #f7eef0; border-color: #f7eef0; color: #2a2025; }
body.dark-mode .auth-page, body[data-theme='dark'] .auth-page { background: radial-gradient(circle at top right, #4c3340 0, transparent 34%), #1a1518; }
body.dark-mode .auth-tabs, body[data-theme='dark'] .auth-tabs { background: #332a30; }
body.dark-mode .auth-tabs .nav-link, body[data-theme='dark'] .auth-tabs .nav-link { color: #d8cbd0; }
body.dark-mode .auth-tabs .nav-link.active, body[data-theme='dark'] .auth-tabs .nav-link.active { background: #463740; color: #f2a8bd; }
/* Employee accessibility and density preferences are applied by the shared portal bootstrap. */
body.portal-employee[data-font-size='small'] { font-size: .9rem; }
body.portal-employee[data-font-size='large'] { font-size: 1.08rem; }
body.portal-employee.employee-compact .portal-nav a { padding-top: .46rem; padding-bottom: .46rem; }
body.portal-employee.employee-compact .portal-content, body.portal-employee.employee-compact .content { padding-top: 1.25rem; padding-bottom: 1.25rem; }
body.portal-employee.employee-compact .card-body { padding: 1rem; }
@media (min-width: 992px) { body.portal-employee.employee-sidebar-collapsed .portal-sidebar { width: 76px; padding-left: .6rem; padding-right: .6rem; } body.portal-employee.employee-sidebar-collapsed .portal-logo { font-size: 0; text-align:center; } body.portal-employee.employee-sidebar-collapsed .portal-logo span { font-size: 1.45rem; } body.portal-employee.employee-sidebar-collapsed .portal-logo small, body.portal-employee.employee-sidebar-collapsed .portal-user div, body.portal-employee.employee-sidebar-collapsed .portal-nav p, body.portal-employee.employee-sidebar-collapsed .portal-nav a { font-size: 0; } body.portal-employee.employee-sidebar-collapsed .portal-nav a, body.portal-employee.employee-sidebar-collapsed .portal-logout { justify-content:center; } body.portal-employee.employee-sidebar-collapsed .portal-nav a i, body.portal-employee.employee-sidebar-collapsed .portal-logout i { font-size: 1.1rem; margin:0; } body.portal-employee.employee-sidebar-collapsed .portal-main { margin-left: 76px; } }
body.portal-employee.employee-high-contrast { --mh-ink:#101010; --mh-muted:#343034; --mh-line:#5b5156; --mh-surface:#fff; --mh-surface-soft:#fff; }
body.portal-employee.employee-high-contrast .btn-primary, body.portal-employee.employee-high-contrast .btn-warning { background:#6f1836; border-color:#6f1836; }
body.portal-employee.employee-high-contrast[data-theme='dark'] { --mh-ink:#fff; --mh-muted:#fff; --mh-line:#fff; --mh-surface:#151215; --mh-surface-soft:#151215; }
body.portal-employee.employee-reduce-motion *, body.portal-employee.employee-reduce-motion *::before, body.portal-employee.employee-reduce-motion *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
.profile-photo { width: 132px; height: 132px; object-fit: cover; border: 4px solid var(--mh-blush); }
.profile-avatar-lg { width: 132px; height: 132px; font-size: 2.8rem; margin-left: auto; margin-right: auto; }
@media (max-width: 575.98px) { .card-body { padding: 1rem; } .portal-area .container-fluid, .portal-content, .portal-area .content { padding-left: 1rem !important; padding-right: 1rem !important; } .table > :not(caption) > * > * { padding: .75rem .65rem; } .portal-partner .portal-hero { padding: 1.5rem 1.25rem; } }