/* ============================================================
   Portal Picwa — Linear theme (light-mode adaptation)
   ------------------------------------------------------------
   Based on the Linear DESIGN.md spec:
     https://raw.githubusercontent.com/VoltAgent/awesome-design-md/main/design-md/linear.app/DESIGN.md
   Linear officially ships dark-only; this file preserves the
   spec's typography scale, spacing, radius scale, and lavender
   accent (#5e6ad2) while adapting the surface ladder to light.
   Every selector is scoped under body.theme-linear so it never
   leaks into the default portal design.
   ============================================================ */

body.theme-linear {
  /* ------- Design tokens ------- */
  --canvas: #ffffff;
  --surface-1: #f7f8f8;
  --surface-2: #eef0f2;
  --surface-3: #e6e8eb;
  --surface-4: #dfe1e5;
  --hairline: #e1e4e8;
  --hairline-strong: #cfd3d8;
  --hairline-tertiary: #bcc0c6;

  --ink: #0f1011;
  --ink-muted: #3d4046;
  --ink-subtle: #62666d;
  --ink-tertiary: #8a8f98;

  --primary: #5e6ad2;
  --primary-hover: #828fff;
  --primary-focus: #5e69d1;
  --on-primary: #ffffff;

  --success: #27a644;
  --warning: #f5a524;
  --danger: #e5484d;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  --font-display: 'Inter', 'SF Pro Display', -apple-system, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-text: 'Inter', 'SF Pro Text', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.05px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   Typography scale
   ============================================================ */
body.theme-linear h1,
body.theme-linear .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  color: var(--ink);
}
body.theme-linear h2,
body.theme-linear .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  color: var(--ink);
}
body.theme-linear h3,
body.theme-linear .h3,
body.theme-linear .card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--ink);
}
body.theme-linear h4,
body.theme-linear h5,
body.theme-linear h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.1px;
}
body.theme-linear .text-muted,
body.theme-linear small,
body.theme-linear .form-text {
  color: var(--ink-subtle) !important;
}

/* ============================================================
   Global surfaces + content wrapper
   ============================================================ */
body.theme-linear .content-wrapper,
body.theme-linear .app-content,
body.theme-linear .content,
body.theme-linear .content-body {
  background: var(--canvas);
}

body.theme-linear .content-header .content-header-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--ink);
}
body.theme-linear .breadcrumb {
  background: transparent;
  padding-left: 0;
  font-size: 13px;
}
body.theme-linear .breadcrumb-item,
body.theme-linear .breadcrumb-item a {
  color: var(--ink-subtle);
}
body.theme-linear .breadcrumb-item.active {
  color: var(--ink);
}

/* ============================================================
   Sidebar (main menu)
   ============================================================ */
body.theme-linear .main-menu {
  background: var(--canvas) !important;
  box-shadow: none !important;
  border-right: 1px solid var(--hairline);
}
body.theme-linear .main-menu.menu-light {
  background: var(--canvas);
}
body.theme-linear .main-menu .navbar-header {
  background: var(--canvas) !important;
  border-bottom: 1px solid var(--hairline);
  height: 62px;
}
body.theme-linear .main-menu .navbar-header .brand-logo img {
  filter: none;
}
body.theme-linear .main-menu-content {
  background: var(--canvas);
}
body.theme-linear .main-menu .navigation {
  background: var(--canvas);
  font-family: var(--font-text);
  font-size: 13.5px;
}
body.theme-linear .main-menu .navigation > li > a {
  padding: 8px 16px;
  margin: 1px 8px;
  border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: -0.05px;
  transition: background .12s ease, color .12s ease;
}
body.theme-linear .main-menu .navigation > li > a i,
body.theme-linear .main-menu .navigation > li > a svg {
  color: var(--ink-subtle);
  stroke: var(--ink-subtle);
  height: 16px;
  width: 16px;
}
body.theme-linear .main-menu .navigation > li > a:hover {
  background: var(--surface-1);
  color: var(--ink);
}
body.theme-linear .main-menu .navigation > li > a:hover i,
body.theme-linear .main-menu .navigation > li > a:hover svg {
  color: var(--ink);
  stroke: var(--ink);
}
body.theme-linear .main-menu .navigation > li.active > a,
body.theme-linear .main-menu .navigation > li.active > a:hover {
  background: rgba(94, 106, 210, 0.10) !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
body.theme-linear .main-menu .navigation > li.active > a i,
body.theme-linear .main-menu .navigation > li.active > a svg {
  color: var(--primary) !important;
  stroke: var(--primary) !important;
}
body.theme-linear .main-menu .navigation > li .menu-title {
  color: inherit;
}
body.theme-linear .main-menu .navigation > li ul.menu-content {
  background: var(--canvas);
}
body.theme-linear .main-menu .navigation > li ul.menu-content li > a {
  padding: 6px 20px 6px 46px;
  color: var(--ink-muted);
  font-size: 13px;
}
body.theme-linear .main-menu .navigation > li ul.menu-content li.active > a {
  background: transparent;
  color: var(--primary);
  box-shadow: none;
}
body.theme-linear .main-menu .navigation > li.navigation-header {
  color: var(--ink-tertiary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 16px 24px 8px;
}
body.theme-linear .main-menu .navigation > li.navigation-header span {
  color: var(--ink-tertiary);
}

/* ============================================================
   Top navbar
   ============================================================ */
body.theme-linear .header-navbar {
  background: var(--canvas) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--hairline);
  min-height: 56px;
}
body.theme-linear .header-navbar.navbar-shadow {
  box-shadow: none !important;
}
body.theme-linear .header-navbar.floating-nav {
  background: var(--canvas) !important;
  box-shadow: none !important;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
body.theme-linear .header-navbar .nav-link {
  color: var(--ink-muted);
}
body.theme-linear .header-navbar .nav-link i,
body.theme-linear .header-navbar .nav-link svg {
  color: var(--ink-muted);
  stroke: var(--ink-muted);
}
body.theme-linear .header-navbar .dropdown-user-link .user-name {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.05px;
}
body.theme-linear .header-navbar .dropdown-user-link .user-status {
  color: var(--ink-subtle);
}

/* ============================================================
   Cards
   ============================================================ */
body.theme-linear .card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  box-shadow: none;
  border-radius: var(--radius-lg);
}
body.theme-linear .card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--hairline);
  padding: 16px 20px;
}
body.theme-linear .card .card-header .card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin: 0;
}
body.theme-linear .card .card-body {
  padding: 20px;
  color: var(--ink);
}

/* ============================================================
   Buttons
   ============================================================ */
body.theme-linear .btn {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1.2;
  letter-spacing: -0.05px;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border-width: 1px;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
  box-shadow: none !important;
}
body.theme-linear .btn.btn-lg {
  padding: 10px 18px;
  font-size: 14.5px;
}
body.theme-linear .btn.btn-sm {
  padding: 4px 10px;
  font-size: 12.5px;
}
body.theme-linear .btn.btn-block {
  padding: 10px 14px;
}
body.theme-linear .btn-primary,
body.theme-linear .btn-primary:not(:disabled):not(.disabled):active,
body.theme-linear .btn-primary:not(:disabled):not(.disabled).active,
body.theme-linear .show > .btn-primary.dropdown-toggle {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}
body.theme-linear .btn-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
body.theme-linear .btn-primary:focus,
body.theme-linear .btn-primary.focus {
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.28) !important;
}
body.theme-linear .btn-outline-primary {
  color: var(--primary) !important;
  border-color: var(--hairline-strong) !important;
  background: var(--canvas) !important;
}
body.theme-linear .btn-outline-primary:hover {
  background: var(--surface-1) !important;
  color: var(--primary) !important;
  border-color: var(--hairline-strong) !important;
}
body.theme-linear .btn-secondary,
body.theme-linear .btn-light {
  background: var(--surface-1) !important;
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}
body.theme-linear .btn-secondary:hover,
body.theme-linear .btn-light:hover {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
}
body.theme-linear .btn-flat-primary {
  background: transparent !important;
  color: var(--primary) !important;
}
body.theme-linear .btn-flat-primary:hover {
  background: rgba(94, 106, 210, 0.08) !important;
}
body.theme-linear .btn-danger {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
}
body.theme-linear .btn-success {
  background: var(--success) !important;
  border-color: var(--success) !important;
}
body.theme-linear .btn-warning {
  background: var(--warning) !important;
  border-color: var(--warning) !important;
  color: var(--ink) !important;
}

/* ============================================================
   Forms / inputs
   ============================================================ */
body.theme-linear .form-control,
body.theme-linear .custom-select {
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 13.5px;
  padding: 8px 12px;
  height: auto;
  min-height: 36px;
  box-shadow: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
body.theme-linear .form-control::placeholder {
  color: var(--ink-tertiary);
}
body.theme-linear .form-control:focus,
body.theme-linear .custom-select:focus {
  border-color: var(--primary-focus);
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.20);
}
body.theme-linear .form-group label,
body.theme-linear .form-label,
body.theme-linear .col-form-label {
  color: var(--ink);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.05px;
}
body.theme-linear .input-group-text {
  background: var(--surface-1);
  border-color: var(--hairline-strong);
  color: var(--ink-muted);
}
body.theme-linear .custom-control-label {
  color: var(--ink);
}
body.theme-linear .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--primary);
  border-color: var(--primary);
}

/* ============================================================
   Alerts, badges, pills
   ============================================================ */
body.theme-linear .alert {
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  box-shadow: none;
  padding: 12px 14px;
  font-size: 13.5px;
}
body.theme-linear .alert-info {
  background: rgba(94, 106, 210, 0.06);
  border-color: rgba(94, 106, 210, 0.20);
  color: var(--primary);
}
body.theme-linear .alert-success {
  background: rgba(39, 166, 68, 0.06);
  border-color: rgba(39, 166, 68, 0.20);
  color: #1e7d34;
}
body.theme-linear .alert-warning {
  background: rgba(245, 165, 36, 0.08);
  border-color: rgba(245, 165, 36, 0.24);
  color: #a66a04;
}
body.theme-linear .alert-danger {
  background: rgba(229, 72, 77, 0.06);
  border-color: rgba(229, 72, 77, 0.24);
  color: #c62328;
}

body.theme-linear .badge {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 11.5px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  letter-spacing: 0;
}
body.theme-linear .badge-primary {
  background: var(--primary);
  color: var(--on-primary);
}
body.theme-linear .badge-light-primary {
  background: rgba(94, 106, 210, 0.10);
  color: var(--primary);
}
body.theme-linear .badge-light-success {
  background: rgba(39, 166, 68, 0.10);
  color: var(--success);
}
body.theme-linear .badge-light-warning {
  background: rgba(245, 165, 36, 0.12);
  color: #a66a04;
}
body.theme-linear .badge-light-danger {
  background: rgba(229, 72, 77, 0.10);
  color: var(--danger);
}

/* ============================================================
   Tables & DataTables (yajra)
   ============================================================ */
body.theme-linear .table,
body.theme-linear table.dataTable {
  color: var(--ink);
  font-size: 13.5px;
}
body.theme-linear .table thead th,
body.theme-linear table.dataTable thead th {
  background: transparent;
  border-bottom: 1px solid var(--hairline-strong);
  color: var(--ink-subtle);
  font-weight: 500;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 12px 14px;
}
body.theme-linear .table td,
body.theme-linear table.dataTable tbody td {
  border-top: 1px solid var(--hairline);
  padding: 12px 14px;
  color: var(--ink);
}
body.theme-linear .table-hover tbody tr:hover {
  background: var(--surface-1);
}
body.theme-linear .dataTables_wrapper .dataTables_length label,
body.theme-linear .dataTables_wrapper .dataTables_filter label,
body.theme-linear .dataTables_wrapper .dataTables_info {
  color: var(--ink-subtle);
  font-size: 12.5px;
}
body.theme-linear .page-item .page-link {
  color: var(--ink-muted);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  margin: 0 2px;
  font-size: 12.5px;
  padding: 4px 10px;
}
body.theme-linear .page-item.active .page-link {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow: none;
}

/* ============================================================
   Dropdowns
   ============================================================ */
body.theme-linear .dropdown-menu {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(15, 16, 17, 0.06), 0 1px 2px rgba(15, 16, 17, 0.04);
  padding: 4px;
}
body.theme-linear .dropdown-item {
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13.5px;
}
body.theme-linear .dropdown-item:hover,
body.theme-linear .dropdown-item:focus {
  background: var(--surface-1);
  color: var(--ink);
}
body.theme-linear .dropdown-divider {
  border-top-color: var(--hairline);
}

/* ============================================================
   Login page (auth-wrapper)
   ============================================================ */
body.theme-linear.auth-v1 .auth-wrapper,
body.theme-linear .auth-wrapper.auth-v1 {
  background: var(--canvas);
}
body.theme-linear .auth-wrapper {
  background: var(--canvas);
}
body.theme-linear .auth-wrapper .auth-inner {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.theme-linear .auth-wrapper .card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15, 16, 17, 0.04);
  padding: 8px;
  width: 100%;
  max-width: 400px;
}
body.theme-linear .auth-wrapper .card .card-body {
  padding: 32px;
}
body.theme-linear .auth-wrapper .brand-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
body.theme-linear .auth-wrapper .brand-logo img {
  max-width: 120px !important;
  height: auto;
}
body.theme-linear .auth-wrapper .form-group {
  margin-bottom: 18px;
}
body.theme-linear .auth-wrapper .form-label {
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 13px;
}
body.theme-linear .auth-wrapper .form-control {
  height: 40px;
  font-size: 14px;
}
body.theme-linear .auth-wrapper .btn-primary {
  padding: 10px 14px;
  font-size: 14px;
}
body.theme-linear .auth-wrapper .divider {
  color: var(--ink-tertiary);
  font-size: 12px;
}
body.theme-linear .auth-wrapper .divider .divider-text {
  background: var(--canvas);
}
body.theme-linear .auth-wrapper .divider .divider-text:before,
body.theme-linear .auth-wrapper .divider .divider-text:after {
  border-top-color: var(--hairline);
}

/* Login page: the "Try new version" info banner if present */
body.theme-linear .auth-wrapper .alert-info a {
  color: var(--primary);
  font-weight: 500;
}

/* ============================================================
   Modals
   ============================================================ */
body.theme-linear .modal-content {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px rgba(15, 16, 17, 0.10);
}
body.theme-linear .modal-header,
body.theme-linear .modal-footer {
  border-color: var(--hairline);
  padding: 16px 20px;
}
body.theme-linear .modal-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--ink);
}

/* ============================================================
   Nav tabs & pills
   ============================================================ */
body.theme-linear .nav-tabs {
  border-bottom: 1px solid var(--hairline);
}
body.theme-linear .nav-tabs .nav-link {
  color: var(--ink-subtle);
  border: none;
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 0;
}
body.theme-linear .nav-tabs .nav-link.active {
  color: var(--primary);
  background: transparent;
  border-bottom: 2px solid var(--primary);
}
body.theme-linear .nav-pills .nav-link {
  color: var(--ink-muted);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
}
body.theme-linear .nav-pills .nav-link.active {
  background: var(--surface-2);
  color: var(--ink);
}

/* ============================================================
   Links
   ============================================================ */
body.theme-linear a {
  color: var(--primary);
}
body.theme-linear a:hover {
  color: var(--primary-hover);
}
body.theme-linear .content-body a.card-text {
  color: var(--primary);
}

/* ============================================================
   Footer
   ============================================================ */
body.theme-linear .footer {
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  color: var(--ink-subtle);
  font-size: 12.5px;
  padding: 12px 20px;
}
body.theme-linear .footer.footer-light {
  background: var(--canvas);
}

/* ============================================================
   Selection color
   ============================================================ */
body.theme-linear ::selection {
  background: rgba(94, 106, 210, 0.20);
  color: var(--ink);
}

/* ============================================================
   Scrollbar (subtle)
   ============================================================ */
body.theme-linear ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.theme-linear ::-webkit-scrollbar-track {
  background: transparent;
}
body.theme-linear ::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--canvas);
}
body.theme-linear ::-webkit-scrollbar-thumb:hover {
  background: var(--ink-tertiary);
}

/* ============================================================
   POLISH PASS 2 — Vuexy-specific overrides
   Below rules crank specificity high enough to override the
   Vuexy template's inline gradients & !important-heavy defaults.
   ============================================================ */

/* -- Global body + content wrapper (higher specificity than Vuexy defaults) -- */
body.theme-linear.vertical-layout,
body.theme-linear.vertical-layout .app-content,
body.theme-linear.vertical-layout .content-wrapper,
body.theme-linear .main-content,
body.theme-linear .content.app-content {
  background: var(--canvas) !important;
}

/* Content body padding */
body.theme-linear .content-body {
  background: transparent;
}

/* -- Sidebar: force flat, kill Vuexy gradients on active + brand -- */
body.theme-linear .main-menu.menu-light .navigation > li.active > a,
body.theme-linear .main-menu.menu-light .navigation > li.active > a:hover,
body.theme-linear .main-menu.menu-light .navigation > li.active > a:focus {
  background: rgba(94, 106, 210, 0.10) !important;
  background-image: none !important;
  color: var(--primary) !important;
  box-shadow: none !important;
}
body.theme-linear .main-menu.menu-light .navigation > li.active > a i,
body.theme-linear .main-menu.menu-light .navigation > li.active > a svg,
body.theme-linear .main-menu.menu-light .navigation > li.active > a .menu-title {
  color: var(--primary) !important;
  stroke: var(--primary) !important;
}
body.theme-linear .main-menu .navbar-header {
  background: var(--canvas) !important;
}
body.theme-linear .main-menu .navbar-header .modern-nav-toggle .toggle-icon,
body.theme-linear .main-menu .navbar-header .brand-text {
  color: var(--ink) !important;
}

/* -- Top navbar (kill Vuexy shadow + tinted backgrounds) -- */
body.theme-linear .header-navbar,
body.theme-linear .header-navbar.floating-nav,
body.theme-linear .header-navbar.fixed-top {
  background: var(--canvas) !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--hairline);
}
body.theme-linear .header-navbar .navbar-nav .nav-link i,
body.theme-linear .header-navbar .navbar-nav .nav-link svg {
  color: var(--ink-muted) !important;
  stroke: var(--ink-muted) !important;
}
body.theme-linear .header-navbar .navbar-nav .nav-link:hover i,
body.theme-linear .header-navbar .navbar-nav .nav-link:hover svg {
  color: var(--ink) !important;
  stroke: var(--ink) !important;
}

/* -- Vuexy avatar bubbles -- */
body.theme-linear .avatar {
  background: var(--surface-2);
  color: var(--ink-muted);
}
body.theme-linear .avatar .avatar-content {
  color: inherit;
}
body.theme-linear .avatar.bg-primary,
body.theme-linear .avatar.bg-light-primary {
  background: rgba(94, 106, 210, 0.14) !important;
  color: var(--primary) !important;
}
body.theme-linear .avatar.bg-success,
body.theme-linear .avatar.bg-light-success {
  background: rgba(39, 166, 68, 0.14) !important;
  color: var(--success) !important;
}
body.theme-linear .avatar.bg-warning,
body.theme-linear .avatar.bg-light-warning {
  background: rgba(245, 165, 36, 0.14) !important;
  color: #a66a04 !important;
}
body.theme-linear .avatar.bg-danger,
body.theme-linear .avatar.bg-light-danger {
  background: rgba(229, 72, 77, 0.14) !important;
  color: var(--danger) !important;
}

/* -- Force override for Vuexy gradient buttons (higher specificity) -- */
body.theme-linear button.btn.btn-primary,
body.theme-linear a.btn.btn-primary,
body.theme-linear .btn.btn-primary,
body.theme-linear .btn-gradient-primary {
  background: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
  box-shadow: none !important;
}
body.theme-linear button.btn.btn-primary:hover,
body.theme-linear a.btn.btn-primary:hover,
body.theme-linear .btn.btn-primary:hover,
body.theme-linear .btn-gradient-primary:hover {
  background: var(--primary-hover) !important;
  background-image: none !important;
  border-color: var(--primary-hover) !important;
  box-shadow: 0 2px 6px rgba(94, 106, 210, 0.25) !important;
}
body.theme-linear .btn.btn-relief-primary {
  background: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  box-shadow: none !important;
}
body.theme-linear .btn.btn-outline-primary {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: transparent !important;
}
body.theme-linear .btn.btn-outline-primary:hover {
  background: rgba(94, 106, 210, 0.08) !important;
  color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* -- Cards: neutralize Vuexy shadow variants + gradient hero cards -- */
body.theme-linear .card,
body.theme-linear .card.card-statistics,
body.theme-linear .card.card-congratulation-medal,
body.theme-linear .card-hero-info,
body.theme-linear .card.card-hero {
  background: var(--canvas) !important;
  background-image: none !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  color: var(--ink);
}
body.theme-linear .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--hairline) !important;
}
body.theme-linear .card-header .card-title {
  color: var(--ink);
}
body.theme-linear .card-header h1,
body.theme-linear .card-header h2,
body.theme-linear .card-header h3,
body.theme-linear .card-header h4 {
  color: var(--ink);
}

/* -- Progress bars (visible in dashboard TIME column) -- */
body.theme-linear .progress {
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  height: 6px;
}
body.theme-linear .progress-bar {
  background: var(--primary);
  border-radius: var(--radius-pill);
}
body.theme-linear .progress-bar-primary,
body.theme-linear .progress-bar.bg-primary {
  background: var(--primary) !important;
}
body.theme-linear .progress-bar-success,
body.theme-linear .progress-bar.bg-success {
  background: var(--success) !important;
}

/* -- ApexCharts: labels, gridlines, tooltip -- */
body.theme-linear .apexcharts-canvas {
  background: transparent !important;
}
body.theme-linear .apexcharts-text tspan,
body.theme-linear .apexcharts-yaxis-label,
body.theme-linear .apexcharts-xaxis-label,
body.theme-linear .apexcharts-legend-text {
  fill: var(--ink-subtle) !important;
  color: var(--ink-subtle) !important;
  font-family: var(--font-text) !important;
  font-size: 11.5px !important;
}
body.theme-linear .apexcharts-gridline {
  stroke: var(--hairline) !important;
}
body.theme-linear .apexcharts-tooltip {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 6px 20px rgba(15, 16, 17, 0.08) !important;
  color: var(--ink) !important;
}
body.theme-linear .apexcharts-tooltip .apexcharts-tooltip-title {
  background: var(--surface-1) !important;
  border-bottom-color: var(--hairline) !important;
  color: var(--ink) !important;
}

/* -- Select2 dropdowns (used across the app) -- */
body.theme-linear .select2-container--default .select2-selection--single,
body.theme-linear .select2-container--default .select2-selection--multiple {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--radius-md) !important;
  min-height: 36px !important;
  padding: 4px 8px !important;
}
body.theme-linear .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--ink) !important;
  line-height: 26px !important;
  padding-left: 6px !important;
}
body.theme-linear .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--ink-tertiary) !important;
}
body.theme-linear .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
}
body.theme-linear .select2-container--default.select2-container--focus .select2-selection--multiple,
body.theme-linear .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--primary-focus) !important;
  box-shadow: 0 0 0 3px rgba(94, 106, 210, 0.20) !important;
}
body.theme-linear .select2-dropdown {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 6px 20px rgba(15, 16, 17, 0.06) !important;
}
body.theme-linear .select2-container--default .select2-results__option {
  color: var(--ink);
  padding: 8px 12px;
  font-size: 13.5px;
}
body.theme-linear .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: rgba(94, 106, 210, 0.10) !important;
  color: var(--ink) !important;
}

/* -- Flatpickr date picker input -- */
body.theme-linear .flatpickr-input {
  background: var(--canvas) !important;
  color: var(--ink) !important;
}
body.theme-linear .flatpickr-calendar {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 6px 20px rgba(15, 16, 17, 0.08) !important;
}
body.theme-linear .flatpickr-day.selected,
body.theme-linear .flatpickr-day.selected:hover,
body.theme-linear .flatpickr-day.startRange,
body.theme-linear .flatpickr-day.endRange,
body.theme-linear .flatpickr-day.startRange.selected,
body.theme-linear .flatpickr-day.endRange.selected {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}
body.theme-linear .flatpickr-day.inRange {
  background: rgba(94, 106, 210, 0.12) !important;
  border-color: transparent !important;
}
body.theme-linear .flatpickr-day.today {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}
body.theme-linear .flatpickr-months .flatpickr-month,
body.theme-linear .flatpickr-weekdays,
body.theme-linear .flatpickr-weekday {
  background: var(--canvas) !important;
  color: var(--ink) !important;
}
body.theme-linear .flatpickr-day {
  color: var(--ink);
}

/* -- Menu badge (the green "1" on Leaves in the sidebar) -- */
body.theme-linear .main-menu .navigation > li > a .badge,
body.theme-linear .main-menu .badge.badge-glow,
body.theme-linear .badge.badge-light-success,
body.theme-linear .badge.badge-glow {
  background: var(--success) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
}

/* -- Vuexy custom breadcrumb + content-header title -- */
body.theme-linear .content-header .content-header-left h2.content-header-title {
  color: var(--ink) !important;
}
body.theme-linear .content-header .breadcrumb-wrapper .breadcrumb {
  background: transparent !important;
}

/* -- Sync Data button (dashboard) — likely btn-outline-primary or custom -- */
body.theme-linear .btn-sync-data,
body.theme-linear .btn.btn-outline-secondary {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink) !important;
}
body.theme-linear .btn-sync-data:hover,
body.theme-linear .btn.btn-outline-secondary:hover {
  background: var(--surface-1) !important;
  color: var(--ink) !important;
}

/* -- Datatables extras: length picker, search box, buttons -- */
body.theme-linear .dataTables_wrapper .dataTables_length select,
body.theme-linear .dataTables_wrapper .dataTables_filter input {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline-strong) !important;
  border-radius: var(--radius-md) !important;
  color: var(--ink) !important;
  height: 32px;
  padding: 4px 8px;
}
body.theme-linear .dt-buttons .btn {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline-strong) !important;
  color: var(--ink) !important;
}
body.theme-linear .dt-buttons .btn:hover {
  background: var(--surface-1) !important;
}

/* -- Dashboard specific: activity chart card, project rows -- */
body.theme-linear .card-transaction .transaction-item .avatar,
body.theme-linear .card-transaction .transaction-title,
body.theme-linear .transaction-percentage {
  color: var(--ink);
}

/* -- Notification dropdown, user dropdown -- */
body.theme-linear .dropdown-notification .media-list .media {
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline);
}
body.theme-linear .dropdown-notification .media-list .media:hover {
  background: var(--surface-1);
}
body.theme-linear .dropdown-notification .media-heading {
  color: var(--ink);
}
body.theme-linear .dropdown-notification .notification-tag {
  color: var(--ink-subtle);
}

/* -- Sweetalert (used across the app for confirm dialogs) -- */
body.theme-linear .swal2-popup {
  background: var(--canvas) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--radius-lg) !important;
  font-family: var(--font-text) !important;
}
body.theme-linear .swal2-title {
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.2px;
}
body.theme-linear .swal2-content,
body.theme-linear .swal2-html-container {
  color: var(--ink-muted) !important;
}
body.theme-linear .swal2-actions .swal2-confirm,
body.theme-linear .swal2-actions .btn-primary {
  background: var(--primary) !important;
  background-image: none !important;
  border-color: var(--primary) !important;
  color: var(--on-primary) !important;
}

/* -- Text colors (Vuexy's text-primary etc.) -- */
body.theme-linear .text-primary { color: var(--primary) !important; }
body.theme-linear .text-success { color: var(--success) !important; }
body.theme-linear .text-warning { color: #a66a04 !important; }
body.theme-linear .text-danger  { color: var(--danger) !important; }
body.theme-linear .text-body    { color: var(--ink) !important; }
body.theme-linear .text-dark    { color: var(--ink) !important; }
body.theme-linear .text-secondary { color: var(--ink-subtle) !important; }

/* -- Kill Vuexy background utility gradients -- */
body.theme-linear .bg-primary        { background: var(--primary) !important; background-image: none !important; color: var(--on-primary) !important; }
body.theme-linear .bg-light-primary  { background: rgba(94, 106, 210, 0.10) !important; background-image: none !important; color: var(--primary) !important; }
body.theme-linear .bg-success        { background: var(--success) !important; background-image: none !important; color: #ffffff !important; }
body.theme-linear .bg-light-success  { background: rgba(39, 166, 68, 0.10) !important; background-image: none !important; color: var(--success) !important; }
body.theme-linear .bg-warning        { background: var(--warning) !important; background-image: none !important; color: var(--ink) !important; }
body.theme-linear .bg-light-warning  { background: rgba(245, 165, 36, 0.12) !important; background-image: none !important; color: #a66a04 !important; }
body.theme-linear .bg-danger         { background: var(--danger) !important; background-image: none !important; color: #ffffff !important; }
body.theme-linear .bg-light-danger   { background: rgba(229, 72, 77, 0.10) !important; background-image: none !important; color: var(--danger) !important; }
body.theme-linear .bg-secondary,
body.theme-linear .bg-light           { background: var(--surface-1) !important; background-image: none !important; color: var(--ink) !important; }

/* -- Form check + switch controls -- */
body.theme-linear .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
body.theme-linear .custom-switch .custom-control-label::before {
  background: var(--surface-3);
  border-color: var(--hairline-strong);
}
body.theme-linear .custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* -- Table row hover on Vuexy tables -- */
body.theme-linear .table.table-hover tbody tr:hover,
body.theme-linear table.dataTable.table-hover tbody tr:hover {
  background: var(--surface-1) !important;
  color: var(--ink);
}
body.theme-linear .table.table-striped tbody tr:nth-of-type(odd),
body.theme-linear table.dataTable.stripe tbody tr:nth-of-type(odd) {
  background: transparent;
}

/* -- Ensure ink color inherits everywhere -- */
body.theme-linear .card-body,
body.theme-linear .card-text,
body.theme-linear p,
body.theme-linear span,
body.theme-linear td,
body.theme-linear label {
  color: var(--ink);
}

/* -- Timer widget (top navbar timer element in the portal) -- */
body.theme-linear .timer-widget,
body.theme-linear .header-navbar .nav-item .timer {
  color: var(--ink);
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}