@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css");

/* G-MAD LAB license UI inspired theme layer. It does not alter application layout logic. */
:root,
:root[data-theme="light"] {
  --bg: #f5f5f9;
  --card: #ffffff;
  --panel: #ffffff;
  --panel2: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f8f8fb;
  --text: #566a7f;
  --muted: #8592a3;
  --muted2: #a1acb8;
  --line: #e7e7ee;
  --border: #e7e7ee;
  --primary: #696cff;
  --accent: #696cff;
  --accent2: #03c3ec;
  --success: #71dd37;
  --ok: #71dd37;
  --warning: #ffab00;
  --danger: #ff3e1d;
  --shadow: 0 .125rem .375rem rgba(67, 89, 113, .12);
  --radius: .5rem;
  --radius2: .5rem;
  --theme-input: #ffffff;
  --theme-sidebar: #ffffff;
  --theme-overlay: rgba(67, 89, 113, .48);
}

:root[data-theme="dark"] {
  --bg: #232333;
  --card: #2b2c40;
  --panel: #2b2c40;
  --panel2: #2b2c40;
  --surface: #2b2c40;
  --surface-soft: #303147;
  --text: #cbcbe2;
  --muted: #a3a4cc;
  --muted2: #8f90b5;
  --line: #444564;
  --border: #444564;
  --primary: #696cff;
  --accent: #696cff;
  --accent2: #03c3ec;
  --success: #71dd37;
  --ok: #71dd37;
  --warning: #ffab00;
  --danger: #ff3e1d;
  --shadow: 0 .125rem .375rem rgba(0, 0, 0, .28);
  --theme-input: #303147;
  --theme-sidebar: #2b2c40;
  --theme-overlay: rgba(0, 0, 0, .58);
}

html { background: var(--bg); }
html body {
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text) !important;
  transition: background-color .18s ease, color .18s ease;
}

body, button, input, select, textarea {
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body { font-size: .9375rem; }
body h1, body h2, body h3, body h4, body h5, body h6 { font-weight: 500; }
body .bx { vertical-align: -.125em; }
.ui-icon-heading { margin-right: .4rem; color: var(--primary); font-size: 1.2em; }
.ui-feature-icon {
  width: 58px;
  height: 58px;
  display: inline-grid;
  place-items: center;
  border-radius: .5rem;
  background: rgba(105, 108, 255, .12);
  color: var(--primary);
  font-size: 2rem;
  line-height: 1;
}
.empty-icon .bx { font-size: 2.5rem; color: var(--muted); }

body a { color: var(--primary); }
body a:hover { color: #5f62e6; }
body h1, body h2, body h3, body h4, body h5, body h6,
body label, body .form-label, body .form-check-label,
body .title, body .questionText, body .section-title {
  color: var(--text) !important;
}
body .text-muted, body .text-secondary, body .mini, body .sub,
body .subtitle, body .meta, body .help, body .form-text, body .page-sub {
  color: var(--muted) !important;
}

/* Theme selector, positioned where the reference UI keeps its language selector. */
.theme-switcher {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: .375rem;
  background: var(--surface-soft);
  box-shadow: none;
  white-space: nowrap;
}
.theme-switcher button {
  min-width: 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: .35rem .58rem;
  border: 0 !important;
  border-radius: .25rem !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1;
}
.theme-switcher button:hover { color: var(--text) !important; }
.theme-switcher button.active {
  background: var(--surface) !important;
  color: var(--primary) !important;
  box-shadow: 0 1px 3px rgba(67, 89, 113, .16) !important;
}
.theme-topbar-tools, .theme-page-tools { display: flex; justify-content: flex-end; align-items: center; }
.theme-page-tools { margin: 0 0 .85rem; }
.theme-floating-tools { position: fixed; top: 16px; right: 16px; z-index: 1060; }

/* Bootstrap and shared controls. */
body .card, body .cardx {
  background: var(--surface) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: .5rem !important;
  box-shadow: var(--shadow) !important;
  color: var(--text) !important;
}
body .card-headerx, body .card-bodyx { border-color: var(--line) !important; }
body .form-control, body .form-select, body textarea, body select {
  background: var(--theme-input) !important;
  border: 1px solid var(--line) !important;
  border-radius: .375rem !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
body .form-control::placeholder, body textarea::placeholder { color: var(--muted) !important; opacity: .72; }
body .form-control:focus, body .form-select:focus, body textarea:focus, body select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 .18rem rgba(105, 108, 255, .14) !important;
}
body .form-control[readonly], body .form-control:disabled,
body .form-select:disabled { background: var(--surface-soft) !important; opacity: .85; }
body option { background: var(--theme-input) !important; color: var(--text) !important; }
body .form-check-input { background-color: var(--theme-input); border-color: var(--line); }
body .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

body .btn, body button { border-radius: .375rem; }
body .btn-primary, body button.primary {
  background: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 .125rem .25rem rgba(105, 108, 255, .22) !important;
  color: #fff !important;
}
body .btn-primary:hover, body button.primary:hover { background: #5f62e6 !important; border-color: #5f62e6 !important; }
body .btn-success, body button.success { background: #71dd37 !important; background-image: none !important; border-color: #71dd37 !important; color: #23351a !important; box-shadow: none !important; }
body .btn-danger, body button.danger { background: #ff3e1d !important; border-color: #ff3e1d !important; color: #fff !important; }
body .btn-outline-light, body .btn-outline-secondary {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
body .btn-outline-light:hover, body .btn-outline-secondary:hover { background: var(--surface-soft) !important; color: var(--text) !important; }
body .btn-outline-primary { border-color: rgba(105, 108, 255, .42) !important; color: var(--primary) !important; background: transparent !important; }
body .btn-outline-primary:hover { background: rgba(105, 108, 255, .1) !important; }
body .btn-outline-danger { border-color: rgba(255, 62, 29, .38) !important; color: var(--danger) !important; background: rgba(255, 62, 29, .05) !important; }

body .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-striped-bg: var(--surface-soft);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: rgba(105, 108, 255, .045);
  --bs-table-hover-color: var(--text);
  --bs-table-border-color: var(--line);
  color: var(--text) !important;
}
body .table > :not(caption) > * > * {
  background-color: transparent !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
:root[data-theme="light"][data-page="admin-users"] body .table-hover tbody tr:hover > * {
  background-color: rgba(105, 108, 255, .045) !important;
  color: var(--text) !important;
}
:root[data-theme="light"][data-page="admin-users"] body .table-hover tbody tr:hover .fw-bold {
  color: inherit !important;
}
:root[data-theme="light"][data-page="admin-manage"] body .table-hover tbody tr:hover > * {
  background-color: rgba(105, 108, 255, .045) !important;
  color: var(--text) !important;
}
:root[data-theme="light"][data-page="admin-manage"] body .table-hover tbody tr:hover .fw-bold {
  color: var(--text) !important;
}
:root[data-theme="light"][data-page="admin-reports"] body .table-hover tbody tr:hover > * {
  background-color: rgba(105, 108, 255, .045) !important;
  color: var(--text) !important;
}
:root[data-theme="light"][data-page="admin-reports"] body .table-hover tbody tr:hover .fw-bold,
:root[data-theme="light"][data-page="admin-reports"] body .table-hover tbody tr:hover a {
  color: var(--text) !important;
}

/* Searchable select used by occupation fields. */
.searchable-select { position: relative; }
.searchable-select-native { display: none !important; }
.searchable-select-input {
  padding-right: 2.25rem !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%) !important;
  background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}
.searchable-select-input::-webkit-search-cancel-button { margin-right: .6rem; }
.searchable-select-menu {
  display: none;
  position: absolute;
  inset: calc(100% + 4px) 0 auto;
  z-index: 1055;
  max-height: min(320px, 45vh);
  overflow-y: auto;
  padding: .35rem;
  border: 1px solid var(--line);
  border-radius: .5rem;
  background: var(--surface);
  box-shadow: 0 .5rem 1.5rem rgba(67, 89, 113, .18);
}
.searchable-select-menu.show { display: block; }
.searchable-select-option {
  display: block;
  width: 100%;
  padding: .55rem .7rem;
  border: 0;
  border-radius: .375rem !important;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left;
  box-shadow: none !important;
}
.searchable-select-option:hover,
.searchable-select-option.active {
  background: rgba(105, 108, 255, .1) !important;
  color: var(--primary) !important;
}
.searchable-select-empty { padding: .65rem .7rem; color: var(--muted); font-size: .875rem; }
body .table thead th { color: var(--muted) !important; font-weight: 600; }
body .pagination .page-link {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--primary) !important;
}
body .pagination .page-item.active .page-link { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
body .pagination .page-item.disabled .page-link { background: var(--surface-soft) !important; color: var(--muted) !important; }
body .modal-content, body .modal-content.modal-dark {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2) !important;
}
body .modal-header, body .modal-footer { border-color: var(--line) !important; }
:root[data-theme="light"] body .btn-close-white { filter: none; }
body footer { background: transparent !important; border-color: var(--line) !important; color: var(--muted) !important; backdrop-filter: none !important; }
body footer a { color: var(--muted) !important; }

/* Admin shell mirrors the license application. */
html[data-page^="admin-"] body .app { background: var(--bg); }
html[data-page^="admin-"] body .main { background: var(--bg); color: var(--text); }
html[data-page^="admin-"] body .topbar {
  padding: 14px 18px 0;
  background: var(--bg) !important;
  border: 0 !important;
  backdrop-filter: none !important;
}
html[data-page^="admin-"] body .topbar-inner {
  min-height: 62px;
  padding: .75rem 1rem !important;
  border: 0;
  border-radius: .5rem;
  background: var(--surface) !important;
  box-shadow: var(--shadow);
  color: var(--text);
}
html[data-page^="admin-"] body .content { padding-top: 1.25rem; }
html[data-page^="admin-"] body .cardx { border-radius: .5rem !important; }
html[data-page^="admin-"] body .badge-soft, html[data-page^="admin-"] body .pill {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
html[data-page^="admin-"] body .chart-box,
html[data-page^="admin-"] body .open-assignments-card {
  background: transparent !important;
  border-color: var(--line) !important;
}
html[data-page^="admin-"] body .kpi {
  background: var(--surface) !important;
  border: 0 !important;
  border-radius: .5rem !important;
  box-shadow: var(--shadow) !important;
}
html[data-page^="admin-"] body .kpi .label { font-size: .875rem; text-transform: none; letter-spacing: 0; }
html[data-page^="admin-"] body .kpi .value { color: var(--text); font-size: 1.625rem; font-weight: 500; }
html[data-page^="admin-"] body .compact-item,
html[data-page^="admin-"] body .user-item,
html[data-page^="admin-"] body .assignment-row {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-page^="admin-"] body .user-item:hover,
html[data-page^="admin-"] body .assignment-row:hover { border-color: rgba(105,108,255,.35) !important; }
html[data-page^="admin-"] body .user-item.active { background: rgba(105,108,255,.1) !important; border-color: rgba(105,108,255,.28) !important; }
html[data-page^="admin-"] body .user-item .u-name,
html[data-page^="admin-"] body .assignment-title,
html[data-page^="admin-"] body .user-name { color: var(--text) !important; }
html[data-page^="admin-"] body .user-item .u-mail,
html[data-page^="admin-"] body .assignment-sub,
html[data-page^="admin-"] body .user-email,
html[data-page^="admin-"] body .recipient,
html[data-page^="admin-"] body .labelx,
html[data-page^="admin-"] body .radio-row label { color: var(--muted) !important; }
html[data-page^="admin-"] body .status-badge.sent { color: #4f9f28 !important; background: rgba(113,221,55,.12) !important; border-color: rgba(113,221,55,.25) !important; }
html[data-page^="admin-"] body .status-badge.partial,
html[data-page^="admin-"] body .status-badge.pending,
html[data-page^="admin-"] body .reason-badge.warning { color: #a66e00 !important; background: rgba(255,171,0,.12) !important; border-color: rgba(255,171,0,.26) !important; }
html[data-page^="admin-"] body .status-badge.failed,
html[data-page^="admin-"] body .status-badge.no-recipients,
html[data-page^="admin-"] body .reason-badge { color: #cf3218 !important; background: rgba(255,62,29,.1) !important; border-color: rgba(255,62,29,.24) !important; }
:root[data-theme="dark"][data-page^="admin-"] body .status-badge.sent { color: #a8ec86 !important; }
:root[data-theme="dark"][data-page^="admin-"] body .status-badge.partial,
:root[data-theme="dark"][data-page^="admin-"] body .status-badge.pending,
:root[data-theme="dark"][data-page^="admin-"] body .reason-badge.warning { color: #ffd27a !important; }
:root[data-theme="dark"][data-page^="admin-"] body .status-badge.failed,
:root[data-theme="dark"][data-page^="admin-"] body .status-badge.no-recipients,
:root[data-theme="dark"][data-page^="admin-"] body .reason-badge { color: #ff9b89 !important; }
html[data-page^="admin-"] body .nav-tabs { border-color: var(--line) !important; }
html[data-page^="admin-"] body .nav-tabs .nav-link { color: var(--muted) !important; border-color: transparent !important; }
html[data-page^="admin-"] body .nav-tabs .nav-link.active { color: var(--primary) !important; background: rgba(105,108,255,.1) !important; }

/* User panel. */
html[data-page="user-dashboard"] body .container-fluid { max-width: 1600px; }
html[data-page="user-dashboard"] body .sidebar-card { border-radius: .5rem !important; }
html[data-page="user-dashboard"] body .sidebar-nav .list-group-item {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: .375rem !important;
  color: var(--muted) !important;
}
html[data-page="user-dashboard"] body .sidebar-nav .list-group-item:hover { background: var(--surface-soft) !important; color: var(--text) !important; }
html[data-page="user-dashboard"] body .sidebar-nav .list-group-item.active { background: rgba(105,108,255,.12) !important; border-color: transparent !important; color: var(--primary) !important; font-weight: 600; }
html[data-page="user-dashboard"] body .sidebar-nav .list-group-item .bx { width: 1.45rem; font-size: 1.2rem; }
html[data-page="user-dashboard"] body .survey-action-cell { width: 1%; white-space: nowrap; }
html[data-page="user-dashboard"] body .survey-action-btn {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-break: keep-all;
}

/* Login and profile screens. */
html[data-page="index"] body .login-card,
html[data-page="forgot-password"] body .forgot-card,
html[data-page="reset-password"] body .reset-card,
html[data-page="first-login-profile"] body .profile-card {
  border-radius: .5rem !important;
  box-shadow: 0 .25rem 1rem rgba(67,89,113,.14) !important;
}
html[data-page="index"] body .login-brand-link {
  width: clamp(170px, 48vw, 220px);
  display: block;
  margin: 0 auto 1rem;
  padding: .2rem;
  border-radius: .5rem;
  line-height: 0;
  transition: transform .18s ease, opacity .18s ease;
}
html[data-page="index"] body .login-brand-link:hover {
  opacity: .82;
  transform: translateY(-1px);
}
html[data-page="index"] body .login-brand-link:focus-visible {
  outline: 3px solid rgba(105, 108, 255, .3);
  outline-offset: 3px;
}
html[data-page="index"] body .login-brand-link img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}
:root[data-theme="dark"][data-page="index"] body .login-brand-link img {
  filter: invert(1) brightness(1.18);
}
html[data-page="index"] body .animal-wrapper,
html[data-page="forgot-password"] body .emoji-wrapper,
html[data-page="reset-password"] body .emoji-wrapper { filter: saturate(.92); }
html[data-page="index"] body .animal-wrapper {
  min-height: 72px;
  display: grid;
  place-items: center;
  font-size: 64px;
  line-height: 1;
  transform-origin: center bottom;
  filter: drop-shadow(0 6px 10px rgba(67, 89, 113, .15));
}
:root[data-theme="dark"][data-page="index"] body .animal-wrapper {
  filter: saturate(.95) brightness(1.06) drop-shadow(0 8px 14px rgba(0, 0, 0, .35));
}
html[data-page="index"] body .animal-wrapper:focus-within { transform: translateY(-1px); }

/* Survey solving: colors only; grid and question rendering dimensions remain intact. */
html[data-page="survey-fill"] body .container { max-width: 1100px; }
html[data-page="survey-fill"] body .topbar {
  padding: .75rem 1rem;
  border-radius: .5rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}
html[data-page="survey-fill"] body .card { border-radius: .5rem !important; }
html[data-page="survey-fill"] body .card .header {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
}
html[data-page="survey-fill"] body .fieldset,
html[data-page="survey-fill"] body .choice,
html[data-page="survey-fill"] body .mini,
html[data-page="survey-fill"] body .step,
html[data-page="survey-fill"] body .allocRow,
html[data-page="survey-fill"] body .chip,
html[data-page="survey-fill"] body .pill {
  background: var(--surface-soft) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
html[data-page="survey-fill"] body .choice:hover { border-color: rgba(105,108,255,.42) !important; }
html[data-page="survey-fill"] body .step.current { background: rgba(105,108,255,.1) !important; outline-color: rgba(105,108,255,.28) !important; }
html[data-page="survey-fill"] body .step .t { color: var(--text) !important; }
:root[data-theme="light"][data-page="survey-fill"] body .step .s { color: #697a8d !important; }
:root[data-theme="light"][data-page="survey-fill"] body .step.done .s {
  color: #4f9f28 !important;
  background: rgba(113,221,55,.12) !important;
  border-color: rgba(113,221,55,.25) !important;
}
:root[data-theme="light"][data-page="survey-fill"] body .step.locked { opacity: .72; }
html[data-page="survey-fill"] body .progressBar { background: var(--surface-soft) !important; border-color: var(--line) !important; }
html[data-page="survey-fill"] body .progressBar > div { background: var(--primary) !important; }
html[data-page="survey-fill"] body #btnLeaveSurvey {
  background: var(--surface-soft) !important;
  border-color: rgba(105,108,255,.32) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
  white-space: nowrap;
}
html[data-page="survey-fill"] body #btnLeaveSurvey:hover {
  background: rgba(105,108,255,.1) !important;
  border-color: rgba(105,108,255,.48) !important;
}
html[data-page="survey-fill"] body .badge.type { background: rgba(105,108,255,.1) !important; border-color: rgba(105,108,255,.24) !important; color: var(--primary) !important; }
html[data-page="survey-fill"] body .badge.req { background: rgba(255,171,0,.1) !important; border-color: rgba(255,171,0,.26) !important; color: #b57900 !important; }
:root[data-theme="dark"][data-page="survey-fill"] body .badge.req { color: #ffd27a !important; }
html[data-page="survey-fill"] body .toast { background: var(--surface) !important; border-color: var(--line) !important; color: var(--text) !important; }
html[data-page="survey-fill"] body .errorBox { color: var(--danger) !important; background: rgba(255,62,29,.08) !important; border-color: rgba(255,62,29,.3) !important; }

@media (max-width: 991px) {
  html[data-page^="admin-"] body .topbar { padding: 10px 12px 0; }
  html[data-page^="admin-"] body .topbar-inner { padding: .65rem .75rem !important; }
}

@media (max-width: 767px) {
  .theme-floating-tools { top: 10px; right: 10px; }
  .theme-label { display: none; }
  .theme-switcher button { width: 32px; padding: .3rem; }
  html[data-page="user-dashboard"] body .theme-page-tools { margin-bottom: .65rem; }
  html[data-page="survey-fill"] body .container { padding: 14px 12px 18px; }
  html[data-page="survey-fill"] body .topbar { flex-direction: column; align-items: stretch; padding: .75rem; }
  html[data-page="survey-fill"] body .topbar .brand { width: 100%; min-width: 0; }
  html[data-page="survey-fill"] body .topbar .actions { width: 100%; justify-content: flex-start; }
  html[data-page="survey-fill"] body .topbar .actions > button { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 420px) {
  html[data-page^="admin-"] body .topbar-inner { align-items: center !important; }
  html[data-page^="admin-"] body .theme-switcher { margin-left: auto; }
  html[data-page="survey-fill"] body .topbar .actions > button { width: 100%; }
}