/*
 * Bab Rizq 1.7.1
 * One semantic color system for both themes.
 * This file is intentionally loaded after app.css and replaces the former
 * unscoped dark.css layer.
 */

@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/noto-sans-arabic-arabic-wght-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

@font-face {
  font-family: "Noto Sans Arabic";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../fonts/noto-sans-arabic-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

html[data-theme="light"] {
  color-scheme: light;
  --ui-bg: #f5f7f6;
  --ui-bg-alt: #edf2ef;
  --ui-surface: #ffffff;
  --ui-surface-2: #f4f8f6;
  --ui-surface-3: #e9f0ed;
  --ui-heading: #0d251f;
  --ui-text: #1f3731;
  --ui-muted: #4b6059;
  --ui-subtle: #62736c;
  --ui-border: #c9d6d0;
  --ui-border-strong: #aebfb7;
  --ui-accent: #a94f00;
  --ui-accent-hover: #7f3500;
  --ui-accent-soft: #fff0df;
  --ui-on-accent: #ffffff;
  --ui-deep: #123d35;
  --ui-deep-2: #082a25;
  --ui-on-deep: #ffffff;
  --ui-success: #176c49;
  --ui-success-soft: #e7f5ed;
  --ui-danger: #99383d;
  --ui-danger-soft: #fff0f0;
  --ui-info: #285e86;
  --ui-info-soft: #edf5fb;
  --ui-warning: #805210;
  --ui-warning-soft: #fff5e3;
  --ui-shadow: 0 20px 55px rgba(19, 55, 47, 0.1);
  --ui-shadow-sm: 0 8px 24px rgba(19, 55, 47, 0.08);
  --ui-header: rgba(248, 250, 249, 0.94);
  --ui-nav: rgba(255, 255, 255, 0.98);
  --ui-chat: #eef3f0;
  --ui-bubble: #ffffff;
  --ui-bubble-mine: #174d43;
  --ui-autofill: #ffffff;
  --ui-selection: rgba(184, 91, 8, 0.2);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #090f0d;
  --ui-bg-alt: #0d1512;
  --ui-surface: #121d19;
  --ui-surface-2: #192721;
  --ui-surface-3: #22342c;
  --ui-heading: #ffffff;
  --ui-text: #eef4f1;
  --ui-muted: #b7c5bf;
  --ui-subtle: #9aaca4;
  --ui-border: #334b40;
  --ui-border-strong: #4d6a5d;
  --ui-accent: #ffb45e;
  --ui-accent-hover: #ffd08f;
  --ui-accent-soft: #392816;
  --ui-on-accent: #211306;
  --ui-deep: #16443a;
  --ui-deep-2: #092c26;
  --ui-on-deep: #ffffff;
  --ui-success: #72d7aa;
  --ui-success-soft: #153126;
  --ui-danger: #ff9da1;
  --ui-danger-soft: #351b1d;
  --ui-info: #91c6ee;
  --ui-info-soft: #162d3b;
  --ui-warning: #f2bd70;
  --ui-warning-soft: #352a18;
  --ui-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
  --ui-shadow-sm: 0 9px 28px rgba(0, 0, 0, 0.26);
  --ui-header: rgba(10, 18, 15, 0.95);
  --ui-nav: rgba(13, 23, 19, 0.98);
  --ui-chat: #0d1815;
  --ui-bubble: #1a2a25;
  --ui-bubble-mine: #8f571b;
  --ui-autofill: #17251f;
  --ui-selection: rgba(242, 170, 82, 0.32);
}

html[data-theme] {
  background: var(--ui-bg);
  color-scheme: inherit;
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-border);
  --surface: var(--ui-surface);
  --canvas: var(--ui-bg);
  --canvas-2: var(--ui-bg-alt);
  --text-strong: var(--ui-heading);
  --text-body: var(--ui-text);
  --text-muted: var(--ui-muted);
  --surface-raised: var(--ui-surface);
  --surface-soft: var(--ui-surface-2);
  --surface-warm: var(--ui-accent-soft);
  --field-surface: var(--ui-surface-2);
  --field-text: var(--ui-heading);
  --focus-ring: color-mix(in srgb, var(--ui-accent) 18%, transparent);
  --action-primary: var(--ui-accent);
  --action-primary-hover: var(--ui-accent-hover);
  --on-action: var(--ui-on-accent);
  --danger: var(--ui-danger);
  --success: var(--ui-success);
  --info: var(--ui-info);
  --shadow: var(--ui-shadow);
  --shadow-sm: var(--ui-shadow-sm);
}

html[data-theme] body {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ui-accent) 7%, transparent), transparent 27rem),
    radial-gradient(circle at 0 38%, color-mix(in srgb, var(--ui-deep) 12%, transparent), transparent 32rem),
    var(--ui-bg);
  color: var(--ui-text);
  font-family: "Noto Sans Arabic", Tajawal, Tahoma, Arial, sans-serif;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.78;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.18s ease, color 0.18s ease;
}

html[data-theme] ::selection {
  background: var(--ui-selection);
  color: var(--ui-heading);
}

html[data-theme] :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ui-accent) 42%, transparent);
  outline-offset: 3px;
}

html[data-theme] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ui-heading);
  font-family: "Noto Sans Arabic", Tajawal, Tahoma, Arial, sans-serif;
  font-weight: 800;
}

html[data-theme] :where(p, li, dt, dd, label, summary, td) {
  color: var(--ui-text);
}

html[data-theme] :where(small, .help-text, .meta-text) {
  color: var(--ui-muted);
}

html[data-theme] :where(strong, b, th) {
  color: var(--ui-heading);
}

html[data-theme] :where(a, button, input, select, textarea) {
  font-family: inherit;
}

html[data-theme] :is(
  .page-intro p,
  .page-heading-row p,
  .dashboard-welcome p,
  .profile-excerpt,
  .job-card > p,
  .job-body p,
  .table-main p,
  .notification-list p,
  .auth-panel > p,
  .field-hint,
  .form-tips span,
  .identity-registration > p,
  .guest-profile-card > p
) {
  color: var(--ui-muted);
}

/* Header and account navigation */
html[data-theme] .site-header {
  background: var(--ui-header);
  border-bottom-color: var(--ui-border);
  box-shadow: 0 7px 30px color-mix(in srgb, var(--ui-bg) 58%, transparent);
}

html[data-theme] .brand-mark {
  background: linear-gradient(145deg, var(--ui-deep), color-mix(in srgb, var(--ui-deep) 72%, #3f8878));
  box-shadow: inset -7px -7px 0 rgba(0, 0, 0, 0.1), 0 8px 22px rgba(0, 0, 0, 0.16);
}

html[data-theme] .brand-mark::before {
  background: linear-gradient(160deg, #ffc56e, var(--ui-accent));
}

html[data-theme] .brand-copy strong {
  color: var(--ui-heading);
  font-weight: 800;
}

html[data-theme] .brand-copy small,
html[data-theme] .account-meta small {
  color: var(--ui-muted);
}

html[data-theme] .desktop-nav > a {
  color: var(--ui-muted);
}

html[data-theme] .desktop-nav > a:hover,
html[data-theme] .desktop-nav > a.active {
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
  color: var(--ui-heading);
  box-shadow: none;
}

html[data-theme] .desktop-nav > a.active::after {
  background: var(--ui-accent);
}

html[data-theme] .nav-badge,
html[data-theme] .mobile-nav > a b {
  background: var(--ui-danger);
  color: #ffffff;
}

html[data-theme] .icon-button,
html[data-theme] .account-menu summary,
html[data-theme] .account-dropdown,
html[data-theme] .toast {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-heading);
}

html[data-theme] .icon-button:hover,
html[data-theme] .icon-button.active {
  background: var(--ui-accent-soft);
  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-border));
  color: var(--ui-accent);
}

html[data-theme] .icon-button.whatsapp {
  color: var(--ui-success);
}

html[data-theme] .account-dropdown > a,
html[data-theme] .account-dropdown button {
  color: var(--ui-text);
}

html[data-theme] .account-dropdown > a:hover,
html[data-theme] .account-dropdown button:hover {
  background: var(--ui-surface-3);
  color: var(--ui-heading);
}

html[data-theme] .account-meta,
html[data-theme] .account-dropdown {
  border-color: var(--ui-border);
}

/* Buttons and links */
html[data-theme] .button.primary {
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-hover));
  border-color: transparent;
  color: var(--ui-on-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ui-accent) 24%, transparent);
}

html[data-theme] .button.primary:hover {
  background: linear-gradient(135deg, var(--ui-accent-hover), var(--ui-accent));
  color: var(--ui-on-accent);
}

html[data-theme] .button.dark {
  background: var(--ui-deep);
  border-color: color-mix(in srgb, var(--ui-deep) 70%, var(--ui-border));
  color: var(--ui-on-deep);
}

html[data-theme] .button.dark:hover {
  background: var(--ui-deep-2);
  color: var(--ui-on-deep);
}

html[data-theme] :is(.button.soft, .button.ghost, .button.outline) {
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
  color: var(--ui-heading);
}

html[data-theme] :is(.button.soft, .button.ghost, .button.outline):hover {
  background: var(--ui-surface-3);
  border-color: var(--ui-border-strong);
  color: var(--ui-heading);
}

html[data-theme] .button.light {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.82);
  color: #123d36;
}

html[data-theme] .button.danger {
  background: var(--ui-danger-soft);
  border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border));
  color: var(--ui-danger);
}

html[data-theme] :is(.text-link, .reset-link) {
  color: var(--ui-accent);
}

html[data-theme] .eyebrow,
html[data-theme] .profession,
html[data-theme] .job-type,
html[data-theme] .admin-card-head a,
html[data-theme] .mini-empty a {
  color: var(--ui-accent);
}

/* Reusable surfaces */
html[data-theme] :is(
  .hero-search,
  .hero-stats,
  .category-card,
  .profile-card,
  .job-card,
  .content-card,
  .contact-card,
  .side-card,
  .dashboard-card,
  .admin-card,
  .filters-card,
  .horizontal-filters,
  .profile-heading-card,
  .form-card,
  .form-tips,
  .job-detail-card,
  .conversation-list,
  .thread-shell,
  .notification-list,
  .empty-state,
  .admin-stats article,
  .dashboard-stats article,
  .action-pop > form,
  .auth-grid,
  .auth-panel,
  .google-button,
  .sticky-submit,
  .review,
  .report-box form,
  .pagination a,
  .identity-registration,
  .guest-profile-card,
  .notification-setup-card
) {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-sm);
}

html[data-theme] :is(.category-card, .profile-card, .job-card):hover {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border));
  box-shadow: var(--ui-shadow);
}

html[data-theme] :is(
  .profile-card-footer,
  .job-card-footer,
  .table-list article,
  .compact-list > a,
  .form-card-head,
  .card-heading,
  .admin-list > div,
  .notification-mini-list > div,
  .page-editor-list form,
  .profile-badges,
  .contact-details
) {
  border-color: var(--ui-border);
}

html[data-theme] :is(
  .page-intro h1,
  .section-heading h2,
  .page-heading-row h1,
  .dashboard-welcome h1,
  .name-line h1,
  .name-line h3,
  .profile-card h3,
  .job-card h3,
  .dashboard-card-head h2,
  .admin-card h2,
  .admin-header h1,
  .empty-state h2,
  .job-detail-top h1,
  .job-keyfacts strong,
  .content-card h2,
  .contact-card h2,
  .side-card h2,
  .review-form h3,
  .filters-card strong,
  .auth-panel h1,
  .form-sidebar h1,
  .form-card-head h2,
  .profile-title h1,
  .card-heading h2,
  .admin-card-head h2,
  .admin-card > h2,
  .error-page h1,
  .subform-title,
  .listing-toolbar strong,
  .job-card-footer strong,
  .rating b,
  .category-card strong,
  .dashboard-stats strong,
  .job-body h2,
  .prose.rich h2,
  .prose.rich h3,
  .apply-box summary,
  .admin-create > summary,
  .guest-profile-card h2
) {
  color: var(--ui-heading);
}

/* Homepage */
html[data-theme] .hero {
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--ui-accent) 13%, transparent), transparent 23rem),
    linear-gradient(135deg, var(--ui-bg) 0%, var(--ui-bg-alt) 100%);
  border-color: var(--ui-border);
}

html[data-theme] .hero-copy h1 {
  color: var(--ui-heading);
  text-shadow: none;
}

html[data-theme] .hero-copy > p,
html[data-theme] .hero-quick-links {
  color: var(--ui-muted);
}

html[data-theme] .hero-search {
  box-shadow: var(--ui-shadow);
}

html[data-theme] .search-field {
  color: var(--ui-subtle);
}

html[data-theme] .hero-quick-links a,
html[data-theme] .job-tags span,
html[data-theme] .tag-list span {
  background: var(--ui-surface-3);
  color: var(--ui-text);
}

html[data-theme] .floating-card {
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  border-color: var(--ui-border);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow);
}

html[data-theme] .floating-card small,
html[data-theme] .hero-stats span {
  color: var(--ui-muted);
}

html[data-theme] .mini-avatar,
html[data-theme] :is(.category-icon, .job-icon, .list-icon, .notification-icon, .activity-list > div > span) {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

html[data-theme] .card-job {
  color: var(--ui-heading);
}

html[data-theme] .hero-stats .trust-stat {
  background: var(--ui-surface-2);
}

html[data-theme] .hero-stats strong,
html[data-theme] .trust-stat b {
  color: var(--ui-heading);
}

html[data-theme] :is(.category-section, .categories-section, .jobs-section) {
  background: var(--ui-bg-alt);
}

html[data-theme] .workers-section {
  background: var(--ui-bg);
}

html[data-theme] .profile-card-top {
  background: linear-gradient(135deg, var(--ui-surface-3), var(--ui-accent-soft));
}

html[data-theme] .avatar-wrap img,
html[data-theme] .profile-large-avatar img {
  border-color: var(--ui-surface);
}

html[data-theme] .availability {
  border-color: var(--ui-surface);
}

html[data-theme] .favorite-button {
  background: color-mix(in srgb, var(--ui-surface) 94%, transparent);
  border-color: var(--ui-border);
  color: var(--ui-muted);
}

html[data-theme] .favorite-button:hover,
html[data-theme] .favorite-button.active {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

html[data-theme] .profile-excerpt,
html[data-theme] .job-card > p {
  color: var(--ui-muted);
}

html[data-theme] .rating {
  color: var(--ui-warning);
}

html[data-theme] .verified {
  color: var(--ui-info);
}

html[data-theme] .featured-ribbon,
html[data-theme] .status-banner {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

/* Sections that stay intentionally deep in both themes */
html[data-theme] :is(.how-section, .page-hero, .admin-sidebar, .site-footer) {
  background: linear-gradient(135deg, var(--ui-deep-2), var(--ui-deep));
  color: var(--ui-on-deep);
}

html[data-theme] :is(
  .how-section h1,
  .how-section h2,
  .how-section h3,
  .page-hero h1,
  .page-hero h2,
  .admin-sidebar strong,
  .site-footer h3,
  .site-footer .brand-copy strong
) {
  color: #ffffff;
}

html[data-theme] :is(
  .how-copy p,
  .steps-list p,
  .page-hero p,
  .footer-grid > div:first-child > p,
  .footer-grid > div:not(:first-child) a,
  .footer-bottom,
  .site-footer .brand-copy small,
  .admin-title small,
  .admin-sidebar nav a,
  .admin-sidebar .view-site
) {
  color: #b9ccc5;
}

html[data-theme] .steps-list article {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.14);
}

html[data-theme] .final-cta-card {
  background: linear-gradient(130deg, var(--ui-deep-2), color-mix(in srgb, var(--ui-deep) 72%, #388a79));
  color: #ffffff;
}

html[data-theme] .final-cta-card h2 {
  color: #ffffff;
}

html[data-theme] .final-cta-card p {
  color: #c8d9d3;
}

/* Listings, profile and content */
html[data-theme] .horizontal-filters label,
html[data-theme] .search-input > div {
  border-color: var(--ui-border);
  color: var(--ui-muted);
}

html[data-theme] .empty-state {
  border-color: var(--ui-border-strong);
  color: var(--ui-muted);
}

html[data-theme] .pagination a.active,
html[data-theme] .pagination a:hover {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-on-accent);
}

html[data-theme] .profile-score {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 40%, var(--ui-border));
}

html[data-theme] .profile-score strong {
  color: var(--ui-heading);
}

html[data-theme] :is(.pill, .skills-list span, .social-links a) {
  background: var(--ui-surface-3);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

html[data-theme] .pill.available {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border));
  color: var(--ui-success);
}

html[data-theme] :is(.prose, .review p, .contact-details a, .contact-details span) {
  color: var(--ui-text);
}

html[data-theme] .review {
  box-shadow: none;
}

html[data-theme] .review-form {
  background: linear-gradient(145deg, var(--ui-surface-2), var(--ui-accent-soft));
  border-color: var(--ui-border);
}

html[data-theme] .review-edit-note {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

html[data-theme] .stars legend {
  color: var(--ui-text);
}

html[data-theme] .stars label {
  color: var(--ui-border-strong);
}

html[data-theme] .safety-card {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 32%, var(--ui-border));
  color: var(--ui-text);
}

html[data-theme] .report-box {
  color: var(--ui-danger);
}

html[data-theme] .back-link {
  background: color-mix(in srgb, var(--ui-surface) 93%, transparent);
  border-color: var(--ui-border);
  color: var(--ui-heading);
}

html[data-theme] .guest-profile {
  background: var(--ui-bg);
}

html[data-theme] .guest-list-notice {
  background: var(--ui-warning-soft);
  border-color: color-mix(in srgb, var(--ui-warning) 30%, var(--ui-border));
  color: var(--ui-heading);
}

html[data-theme] .guest-list-notice span,
html[data-theme] .guest-lock span {
  color: var(--ui-muted);
}

html[data-theme] .guest-lock {
  background: var(--ui-surface-3);
  color: var(--ui-text);
}

html[data-theme] .existing-gallery label {
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
}

html[data-theme] .existing-gallery label span {
  color: var(--ui-danger);
}

/* Forms */
html[data-theme] .identity-registration label {
  display: grid;
  min-width: 0;
  gap: 7px;
}

html[data-theme] .identity-registration :is(
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea
) {
  width: 100%;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  outline: 0;
}

html[data-theme] :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  select,
  textarea
) {
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
  color: var(--ui-heading);
  caret-color: var(--ui-accent);
}

html[data-theme] :is(input, textarea)::placeholder {
  color: var(--ui-subtle);
  opacity: 1;
}

html[data-theme] :is(input, select, textarea):focus {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 18%, transparent);
}

html[data-theme] :is(input, select, textarea):disabled {
  background: var(--ui-bg-alt);
  color: var(--ui-subtle);
  opacity: 0.72;
}

html[data-theme] input[type="file"]::file-selector-button {
  background: var(--ui-surface-3);
  border: 1px solid var(--ui-border);
  color: var(--ui-heading);
  border-radius: 9px;
  padding: 7px 10px;
  margin-inline-end: 10px;
  font: inherit;
  font-weight: 700;
}

html[data-theme] :is(input, textarea):-webkit-autofill,
html[data-theme] :is(input, textarea):-webkit-autofill:hover,
html[data-theme] :is(input, textarea):-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ui-heading);
  box-shadow: 0 0 0 1000px var(--ui-autofill) inset;
  transition: background-color 9999s ease-out;
}

html[data-theme] :is(
  .filters-card label > span,
  .professional-form label > span,
  .stack-form label > span,
  .admin-login label > span,
  .apply-box label > span,
  .review-form label > span,
  .identity-registration label > span
) {
  color: var(--ui-text);
  font-size: 13.5px;
  font-weight: 700;
}

html[data-theme] :is(.field-hint, .identity-file small, .form-tips span) {
  font-size: 12.5px;
  line-height: 1.7;
}

html[data-theme] .status-box,
html[data-theme] .empty-inline,
html[data-theme] .mini-empty,
html[data-theme] .callback-box,
html[data-theme] .location-columns > div,
html[data-theme] .switch-grid > label {
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

html[data-theme] .status-box.approved {
  background: var(--ui-success-soft);
  color: var(--ui-success);
  border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border));
}

html[data-theme] .status-box.pending {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
  border-color: color-mix(in srgb, var(--ui-warning) 35%, var(--ui-border));
}

html[data-theme] .status-box.rejected {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
  border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border));
}

html[data-theme] .form-card-head > span {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

html[data-theme] .cover-preview {
  border-color: var(--ui-border-strong);
  background: linear-gradient(135deg, var(--ui-surface-3), var(--ui-accent-soft));
}

html[data-theme] .avatar-upload > span,
html[data-theme] .cover-upload > span:last-child {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-heading);
}

/* Sign-in and registration */
html[data-theme] .auth-section {
  background: transparent;
}

html[data-theme] .auth-grid {
  box-shadow: var(--ui-shadow);
}

html[data-theme] .auth-panel h1 {
  color: var(--ui-heading);
}

html[data-theme] .auth-panel > p {
  color: var(--ui-muted);
}

html[data-theme] .google-button {
  background: var(--ui-surface-2);
  border-color: var(--ui-border-strong);
  color: var(--ui-heading);
  box-shadow: var(--ui-shadow-sm);
}

html[data-theme] .google-button:hover {
  background: var(--ui-surface-3);
  border-color: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-border-strong));
}

html[data-theme] .auth-note {
  color: var(--ui-success);
}

html[data-theme] .admin-login {
  border-color: var(--ui-border);
}

html[data-theme] .admin-login summary {
  color: var(--ui-muted);
}

html[data-theme] .auth-visual {
  background:
    radial-gradient(circle at 20% 15%, rgba(242, 170, 82, 0.16), transparent 14rem),
    linear-gradient(145deg, #0b2d28, #176052);
}

html[data-theme] .auth-quote {
  color: #ffffff;
}

html[data-theme] .auth-quote blockquote {
  color: #ffffff;
}

html[data-theme] .auth-quote span {
  color: #c1d5cd;
}

html[data-theme] .role-card {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

html[data-theme] .role-card:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 48%, var(--ui-border));
}

html[data-theme] .role-card:has(input:checked) {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 15%, transparent);
}

html[data-theme] .role-icon {
  background: var(--ui-surface-3);
  color: var(--ui-accent);
}

html[data-theme] .radio-mark {
  border-color: var(--ui-border-strong);
}

html[data-theme] .worker-conversion-notice {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 14px 0 18px;
  padding: 14px 15px;
  border: 1px solid color-mix(in srgb, var(--ui-warning) 42%, var(--ui-border));
  border-radius: 14px;
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

html[data-theme] .worker-conversion-notice[hidden] {
  display: none;
}

html[data-theme] .employer-no-identity-notice {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 42%, var(--ui-border));
  color: var(--ui-success);
}

html[data-theme] .worker-conversion-notice > svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

html[data-theme] .worker-conversion-notice strong,
html[data-theme] .worker-conversion-notice span {
  display: block;
  color: inherit;
}

html[data-theme] .worker-conversion-notice span {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.7;
}

html[data-theme] .worker-data-missing {
  display: block;
  max-width: 240px;
  margin-top: 5px;
  color: var(--ui-warning);
  font-size: 12.5px;
  line-height: 1.65;
}

/* Dashboard and admin */
html[data-theme] .admin-card-head p,
html[data-theme] .admin-user small,
html[data-theme] .admin-stats small {
  font-size: 12px;
  line-height: 1.6;
}

html[data-theme] .admin-list strong,
html[data-theme] .activity-list p {
  font-size: 13px;
}

html[data-theme] :is(
  .admin-list small,
  .table-user small,
  .notification-mini-list small,
  .page-editor-list summary small
) {
  font-size: 11px;
  line-height: 1.55;
}

html[data-theme] .stat-icon.amber,
html[data-theme] .admin-stats article > b {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

html[data-theme] .stat-icon.green {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

html[data-theme] .stat-icon.blue {
  background: var(--ui-info-soft);
  color: var(--ui-info);
}

html[data-theme] .stat-icon.rose {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

html[data-theme] .stat-icon.purple {
  background: color-mix(in srgb, #8268c9 20%, var(--ui-surface));
  color: color-mix(in srgb, #a991ec 75%, var(--ui-heading));
}

html[data-theme] .status-pill {
  background: var(--ui-surface-3);
  color: var(--ui-muted);
}

html[data-theme] :is(.status-pill.approved, .status-pill.open, .status-pill.active, .status-pill.accepted, .status-pill.published) {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

html[data-theme] :is(.status-pill.pending, .status-pill.new, .status-pill.shortlisted) {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

html[data-theme] :is(.status-pill.rejected, .status-pill.suspended, .status-pill.hidden) {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

html[data-theme] :is(.status-pill.closed, .status-pill.viewed) {
  background: var(--ui-info-soft);
  color: var(--ui-info);
}

html[data-theme] .tabs button {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-muted);
}

html[data-theme] .tabs button.active {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-on-accent);
}

html[data-theme] .progress-circle {
  background: conic-gradient(var(--ui-accent) calc(var(--progress) * 1%), var(--ui-border) 0);
}

html[data-theme] .progress-circle::after {
  background: var(--ui-surface);
}

html[data-theme] .progress-circle strong {
  color: var(--ui-heading);
}

html[data-theme] .responsive-table th {
  background: var(--ui-surface-2);
  color: var(--ui-muted);
}

html[data-theme] .responsive-table :is(th, td) {
  font-size: 12.5px;
  line-height: 1.65;
}

html[data-theme] .responsive-table td {
  border-color: var(--ui-border);
}

html[data-theme] .responsive-table code {
  background: var(--ui-surface-3);
  color: var(--ui-text);
}

html[data-theme] .admin-search {
  background: var(--ui-surface);
  border-color: var(--ui-border);
}

html[data-theme] .admin-stats article > span {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}

html[data-theme] .admin-save-bar {
  background: color-mix(in srgb, var(--ui-surface) 96%, transparent);
  border-color: var(--ui-border);
}

html[data-theme] .page-editor-list > details {
  border-color: var(--ui-border);
}

html[data-theme] .page-editor-list form {
  border-color: var(--ui-border);
}

/* Theme controls */
html[data-theme] .theme-current-label {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

html[data-theme] .theme-choice-grid button {
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

html[data-theme] .theme-choice-grid button:hover {
  background: var(--ui-surface-3);
  border-color: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-border));
}

html[data-theme] .theme-choice-grid button.active {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 14%, transparent);
}

html[data-theme] .theme-choice-grid button > span {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-accent);
}

html[data-theme] .theme-choice-grid button small {
  color: var(--ui-muted);
}

html[data-theme] .admin-theme-switch {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  box-shadow: var(--ui-shadow-sm);
}

html[data-theme] .admin-theme-switch button {
  color: var(--ui-muted);
}

html[data-theme] .admin-theme-switch button:hover {
  background: var(--ui-surface-3);
  color: var(--ui-heading);
}

html[data-theme] .admin-theme-switch button.active {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

/* Jobs, chat and notifications */
html[data-theme] .job-keyfacts {
  background: var(--ui-surface-2);
}

html[data-theme] .job-keyfacts > div {
  border-color: var(--ui-border);
}

html[data-theme] .application-sent {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

html[data-theme] .button.whatsapp {
  background: var(--ui-success);
  border-color: var(--ui-success);
  color: #ffffff;
}

html[data-theme] .conversation-list > a:hover,
html[data-theme] .conversation-list > a.unread {
  background: var(--ui-surface-3);
}

html[data-theme] .conversation-avatar i {
  border-color: var(--ui-surface);
}

html[data-theme] .message-list {
  background:
    linear-gradient(color-mix(in srgb, var(--ui-chat) 96%, transparent), color-mix(in srgb, var(--ui-chat) 96%, transparent)),
    radial-gradient(circle at 20% 20%, var(--ui-border) 1px, transparent 1px);
  background-size: auto, 24px 24px;
}

html[data-theme] .message-bubble {
  background: var(--ui-bubble);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

html[data-theme] .message.mine .message-bubble {
  background: var(--ui-bubble-mine);
  border-color: color-mix(in srgb, var(--ui-bubble-mine) 72%, var(--ui-border));
  color: #ffffff;
}

html[data-theme] .chat-empty strong {
  color: var(--ui-heading);
}

html[data-theme] .message-compose-dock {
  position: sticky;
  bottom: 0;
  background: color-mix(in srgb, var(--ui-surface) 98%, transparent);
  border-color: var(--ui-border);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.12);
}

html[data-theme] .message-compose textarea {
  background: var(--ui-surface-2);
  color: var(--ui-heading);
}

html[data-theme] .message-compose .send-button {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

html[data-theme] .notification-list > a {
  border-color: var(--ui-border);
}

html[data-theme] .notification-list > a.unread {
  background: var(--ui-accent-soft);
}

html[data-theme] .notification-list p {
  color: var(--ui-muted);
}

html[data-theme] .notification-state {
  background: var(--ui-surface-3);
  color: var(--ui-muted);
}

html[data-theme] .notification-state.ready {
  background: var(--ui-warning-soft);
  color: var(--ui-warning);
}

html[data-theme] .notification-state.enabling,
html[data-theme] .notification-state.checking {
  background: var(--ui-info-soft);
  color: var(--ui-info);
}

html[data-theme] .notification-state.enabled {
  background: var(--ui-success-soft);
  color: var(--ui-success);
}

html[data-theme] .notification-state.denied {
  background: var(--ui-danger-soft);
  color: var(--ui-danger);
}

html[data-theme] .notification-state.unsupported,
html[data-theme] .notification-state.unavailable {
  background: var(--ui-surface-3);
  color: var(--ui-muted);
}

html[data-theme] .notification-setup-card {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--ui-accent) 12%, transparent), transparent 17rem),
    var(--ui-surface);
}

html[data-theme] .notification-setup-icon {
  background: var(--ui-accent-soft);
  border-color: color-mix(in srgb, var(--ui-accent) 35%, var(--ui-border));
  color: var(--ui-accent);
}

html[data-theme] .notification-setup-heading h2 {
  color: var(--ui-heading);
}

html[data-theme] .notification-setup-heading p,
html[data-theme] .notification-setup-help {
  color: var(--ui-muted);
}

/* Alerts */
html[data-theme] .alert.info {
  background: var(--ui-info-soft);
  border-color: color-mix(in srgb, var(--ui-info) 35%, var(--ui-border));
  color: var(--ui-info);
}

html[data-theme] .alert.error {
  background: var(--ui-danger-soft);
  border-color: color-mix(in srgb, var(--ui-danger) 35%, var(--ui-border));
  color: var(--ui-danger);
}

html[data-theme] .alert.success {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 35%, var(--ui-border));
  color: var(--ui-success);
}

html[data-theme] .admin-migration-notice {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

html[data-theme] .admin-migration-notice > span {
  flex: 1;
  color: inherit;
}

html[data-theme] .admin-migration-notice strong {
  color: inherit;
}

html[data-theme] .error-code {
  background: var(--ui-surface-3);
  color: var(--ui-muted);
}

html[data-theme] .skip-link {
  background: var(--ui-surface);
  color: var(--ui-heading);
}

/* Mobile navigation */
html[data-theme] .mobile-nav {
  background: var(--ui-nav);
  border-color: var(--ui-border);
}

html[data-theme] .mobile-nav > a {
  color: var(--ui-muted);
}

html[data-theme] .mobile-nav > a.active {
  color: var(--ui-accent);
}

html[data-theme] .mobile-nav .mobile-main-action {
  background: var(--ui-accent);
  color: var(--ui-on-accent);
}

/* Focused account setup and welcome */
html[data-theme] .onboarding-shell,
html[data-theme] .welcome-card {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-text);
}

html[data-theme] .account-wizard-form {
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
}

html[data-theme] .onboarding-progress::before {
  border-color: var(--ui-border);
}

html[data-theme] .onboarding-progress li > span {
  background: var(--ui-surface);
  border-color: var(--ui-border-strong);
  color: var(--ui-muted);
}

html[data-theme] .onboarding-progress li.active {
  color: var(--ui-accent);
}

html[data-theme] .onboarding-progress li.active > span {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-on-accent);
}

html[data-theme] .onboarding-progress li.completed {
  color: var(--ui-success);
}

html[data-theme] .onboarding-progress li.completed > span {
  background: var(--ui-success);
  border-color: var(--ui-success);
  color: #ffffff;
}

html[data-theme="dark"] .onboarding-progress li.completed > span {
  color: #07120e;
}

html[data-theme] .onboarding-step-heading p,
html[data-theme] .onboarding-header p,
html[data-theme] .welcome-lead,
html[data-theme] .welcome-summary small,
html[data-theme] .welcome-settings-link {
  color: var(--ui-muted);
}

html[data-theme] .notification-choice-note,
html[data-theme] .welcome-summary article {
  background: var(--ui-surface-2);
  border-color: var(--ui-border);
}

html[data-theme] .notification-choice-note {
  color: var(--ui-muted);
}

html[data-theme] .welcome-summary article > span {
  background: var(--ui-surface-3);
  color: var(--ui-accent);
}

html[data-theme] .welcome-next-tip {
  background: var(--ui-accent-soft);
  border-color: color-mix(in srgb, var(--ui-accent) 38%, var(--ui-border));
  color: var(--ui-heading);
}

html[data-theme] .welcome-success-mark {
  background: var(--ui-success-soft);
  border-color: color-mix(in srgb, var(--ui-success) 44%, var(--ui-border));
  color: var(--ui-success);
}

@media (max-width: 640px) {
  html[data-theme] body {
    font-size: 15.5px;
  }

  html[data-theme] .auth-panel {
    padding: 28px 21px 30px;
  }

  html[data-theme] .auth-panel h1 {
    font-size: 31px;
    line-height: 1.42;
  }

  html[data-theme] .google-button {
    min-height: 56px;
  }

  html[data-theme] .message-compose-dock {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}