/* ==========================================================
   SweSund Light Design System v1.0
   SaKaLaNs global workspace theme
   ========================================================== */

:root {
  --sak-page: #f3f8fb;
  --sak-page-soft: #f8fbfd;
  --sak-surface: #ffffff;
  --sak-surface-blue: #edf8fd;

  --sak-border: #d7e4ec;
  --sak-border-strong: #bfd3df;

  --sak-text: #172b3a;
  --sak-heading: #102638;
  --sak-text-soft: #4d6473;
  --sak-text-muted: #687d8a;

  --sak-blue: #129fe3;
  --sak-blue-dark: #087fc7;
  --sak-blue-deep: #0b5f91;
  --sak-cyan: #42bfe9;

  --sak-green: #16a34a;
  --sak-green-dark: #087239;
  --sak-green-bg: #eaf8ef;

  --sak-warning: #d97706;
  --sak-warning-dark: #8b5900;
  --sak-warning-bg: #fff6e5;

  --sak-danger: #dc2626;
  --sak-danger-dark: #a91e1e;
  --sak-danger-bg: #fff0f0;

  --sak-info-bg: #eaf6fc;

  --sak-neutral: #64748b;
  --sak-neutral-bg: #f1f5f9;

  --sak-shadow:
    0 8px 28px rgba(40, 84, 110, .08);
}


/* ==========================================================
   PAGE / APP
   ========================================================== */

html,
body {
  background: var(--sak-page) !important;
  color: var(--sak-text) !important;
}

body {
  color-scheme: light !important;
}

main,
.main,
.workspace,
.workspace-main,
.workspace-content,
.app-main,
.app-content,
.content,
.page,
.page-content,
.view,
.view-content,
.dashboard,
.dashboard-content,
.agent-workspace,
.agent-detail,
.agent-content {
  background: var(--sak-page) !important;
  color: var(--sak-text) !important;
}


/* ==========================================================
   TOPBAR / SIDEBAR
   Entire product should stay light
   ========================================================== */

.sidebar,
.side-nav,
.sidenav,
.navigation,
.nav-panel,
.topbar,
.header,
.app-header {
  background: #ffffff !important;
  color: var(--sak-text) !important;
  border-color: var(--sak-border) !important;
}

.sidebar button,
.sidebar a,
.side-nav button,
.side-nav a,
.navigation button,
.navigation a {
  color: #29475a !important;
}

.sidebar button:hover,
.sidebar a:hover,
.side-nav button:hover,
.side-nav a:hover,
.navigation button:hover,
.navigation a:hover {
  background: #edf7fc !important;
  color: var(--sak-blue-dark) !important;
}

.sidebar .active,
.sidebar [aria-current="page"],
.side-nav .active,
.navigation .active {
  background: linear-gradient(
    135deg,
    #e6f6fd,
    #f4fbfe
  ) !important;

  color: var(--sak-blue-deep) !important;
  border-color: #9dd8f3 !important;
}


/* ==========================================================
   CARDS / PANELS / WORK AREAS
   ========================================================== */

.card,
.panel,
.box,
.widget,
.tile,
.section,
.module,
.workbench,
.agent-panel,
.agent-card,
.agent-section,
.detail-card,
.metric-card,
.kpi,
.crm-card,
.portal-panel,
.portal-card,
.review-card,
.document-analysis,
.document-card,
.settings-card,
.integration-card,
.account-row,
.task-card,
.approval-card {
  background: var(--sak-surface) !important;
  color: var(--sak-text) !important;
  border-color: var(--sak-border) !important;
  box-shadow: var(--sak-shadow) !important;
}


/* ==========================================================
   SPECIALIST AGENTS
   ========================================================== */

.ac-shell,
.ac-workspace,
.ac-content,
.ac-panel,
.ac-card,
.ac-detail,
.ac-section,

.cg-shell,
.cg-content,
.cg-panel,
.cg-card,
.cg-stat,
.cg-metric,
.cg-table-wrap,
.cg-hero,

.legal-shell,
.legal-content,
.legal-panel,
.legal-card,
.legal-section,
.legal-case,
.legal-workbench,

.rn-shell,
.rn-content,
.rn-panel,
.rn-card,
.rn-section,
.regulatory-shell,
.regulatory-panel,
.regulatory-card {
  background: var(--sak-surface) !important;
  color: var(--sak-text) !important;
  border-color: var(--sak-border) !important;
}


/* Agent hero areas should be light blue, not dark */

.ac-hero,
.cg-hero,
.legal-hero,
.rn-hero,
.agent-hero {
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #edf8fd 55%,
      #e4f5fc 100%
    ) !important;

  color: var(--sak-heading) !important;
  border: 1px solid #cbe6f3 !important;
  box-shadow: var(--sak-shadow) !important;
}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--sak-heading) !important;
}

p,
label,
legend,
li,
td,
th,
small,
.description,
.subtitle,
.help,
.hint,
.meta,
.muted {
  color: var(--sak-text-soft) !important;
}

strong,
b {
  color: var(--sak-heading);
}

small,
.muted,
.meta,
.help,
.hint {
  color: var(--sak-text-muted) !important;
}


/* Fix legacy white/light text inside workspaces */

main [style*="color:white"],
main [style*="color: white"],
main [style*="color:#fff"],
main [style*="color: #fff"],
.workspace [style*="color:white"],
.workspace [style*="color: white"] {
  color: var(--sak-text) !important;
}


/* ==========================================================
   INPUTS
   ========================================================== */

input,
select,
textarea {
  background: #ffffff !important;
  color: var(--sak-text) !important;
  border: 1px solid var(--sak-border-strong) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: #8295a2 !important;
  opacity: 1 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--sak-blue) !important;
  outline: 3px solid rgba(18,159,227,.14) !important;
}


/* ==========================================================
   TABLES
   ========================================================== */

table {
  background: #ffffff !important;
  color: var(--sak-text) !important;
}

thead,
thead tr,
thead th {
  background: #edf5f9 !important;
  color: #29475a !important;
}

tbody,
tbody tr,
tbody td {
  background: #ffffff !important;
  color: var(--sak-text) !important;
  border-color: #e2ebf0 !important;
}

tbody tr:hover td {
  background: #f3f9fc !important;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

button,
.btn,
.button {
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease;
}

.primary,
.btn-primary,
button.primary {
  background:
    linear-gradient(
      135deg,
      var(--sak-blue),
      #087fc7
    ) !important;

  color: #ffffff !important;
  border-color: #087fc7 !important;

  box-shadow:
    0 5px 14px rgba(18,159,227,.20) !important;
}

.primary:hover,
.btn-primary:hover,
button.primary:hover {
  background:
    linear-gradient(
      135deg,
      #078fd1,
      #066da9
    ) !important;

  transform: translateY(-1px);
}

.secondary,
.btn-secondary,
button.secondary {
  background: #ffffff !important;
  color: var(--sak-blue-deep) !important;
  border: 1px solid #b9d8e8 !important;
}

.secondary:hover,
.btn-secondary:hover,
button.secondary:hover {
  background: #edf8fd !important;
}


/* ==========================================================
   TABS
   ========================================================== */

.tabs,
.tab-bar,
.time-tabs,
.agent-tabs,
.cg-tabs {
  background: #f0f6f9 !important;
  border-color: var(--sak-border) !important;
}

.tabs button,
.tab-bar button,
.agent-tabs button,
.cg-tabs button {
  color: #536b7a !important;
}

.tabs button.active,
.tab-bar button.active,
.agent-tabs button.active,
.cg-tabs button.active,
[data-tab].active {
  background: #ffffff !important;
  color: var(--sak-blue-dark) !important;
  border-color: #9ad7f1 !important;

  box-shadow:
    0 3px 10px rgba(18,159,227,.12) !important;
}


/* ==========================================================
   STATUS SYSTEM
   ========================================================== */

.status,
.badge,
.pill,
.status-badge,
.agent-status,
.log-status,
.state-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;

  min-height: 28px;
  padding: 5px 10px !important;

  border-radius: 999px !important;
  border: 1px solid transparent !important;

  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;

  line-height: 1 !important;
}


/* ONLINE / ACTIVE / GREEN */

.online,
.status-online,
.badge-online,
.status-green,
.status.active,
.badge.active,
.status.success,
.badge.success,
.state-green,
.guardian-green {
  background: var(--sak-green-bg) !important;
  color: var(--sak-green-dark) !important;
  border-color: #8bd1a2 !important;

  box-shadow:
    0 3px 11px rgba(22,163,74,.12) !important;
}


/* Real luminous green online dot */

.online::before,
.status-online::before,
.badge-online::before,
.status-green::before,
.status.active::before,
.status.success::before,
.guardian-green::before {
  content: "" !important;

  width: 9px !important;
  height: 9px !important;

  flex: 0 0 9px;

  border-radius: 50% !important;

  background: var(--sak-green) !important;

  box-shadow:
    0 0 0 3px rgba(22,163,74,.13),
    0 0 9px rgba(22,163,74,.42) !important;
}


/* WARNING */

.warning,
.status-warning,
.badge-warning,
.status-yellow,
.status-amber,
.log-status.review {
  background: var(--sak-warning-bg) !important;
  color: var(--sak-warning-dark) !important;
  border-color: #e8c77b !important;
}


/* ERROR */

.error,
.status-error,
.badge-error,
.status-red,
.status.fail,
.status.failed,
.danger {
  background: var(--sak-danger-bg) !important;
  color: var(--sak-danger-dark) !important;
  border-color: #efaaaa !important;
}


/* INFO */

.status-info,
.badge-info,
.status-blue {
  background: var(--sak-info-bg) !important;
  color: var(--sak-blue-deep) !important;
  border-color: #a6d9ef !important;
}


/* INACTIVE */

.offline,
.status-offline,
.status-inactive,
.badge-inactive,
.status-neutral {
  background: var(--sak-neutral-bg) !important;
  color: #526275 !important;
  border-color: #ccd6df !important;
}


/* ==========================================================
   KPI ICONS
   ========================================================== */

.kpi-icon {
  width: 42px !important;
  height: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 13px !important;

  font-size: 18px !important;
  font-weight: 800 !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.65),
    0 5px 14px rgba(50,90,115,.10) !important;
}

.kpi-icon.blue {
  background: #e5f5fd !important;
  color: #087fc7 !important;
}

.kpi-icon.purple {
  background: #eef0ff !important;
  color: #5965c7 !important;
}

.kpi-icon.amber {
  background: #fff4df !important;
  color: #a86900 !important;
}

.kpi-icon.green {
  background: #e8f8ee !important;
  color: #087239 !important;
}

.kpi-icon.red {
  background: #fff0f0 !important;
  color: #b52b2b !important;
}


/* ==========================================================
   NOTICES / ALERTS
   ========================================================== */

.notice,
.alert,
.info-box,
.guardian-note {
  background: #edf8fd !important;
  color: #29475a !important;
  border-color: #b8dfef !important;
}

.alert-warning,
.notice-warning {
  background: var(--sak-warning-bg) !important;
  color: var(--sak-warning-dark) !important;
  border-color: #e7c777 !important;
}

.alert-error,
.notice-error {
  background: var(--sak-danger-bg) !important;
  color: var(--sak-danger-dark) !important;
  border-color: #efb1b1 !important;
}


/* ==========================================================
   MODALS
   ========================================================== */

.modal,
.modal-card,
.modal-content,
.dialog,
.dialog-card {
  background: #ffffff !important;
  color: var(--sak-text) !important;
  border-color: var(--sak-border) !important;
}


/* ==========================================================
   SCROLLBARS
   ========================================================== */

* {
  scrollbar-color: #b9d5e4 #edf4f8;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: #edf4f8;
}

*::-webkit-scrollbar-thumb {
  background: #b9d5e4;
  border-radius: 999px;
  border: 2px solid #edf4f8;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 900px) {

  .workspace,
  .workspace-main,
  .workspace-content,
  main {
    background: var(--sak-page) !important;
  }

  .card,
  .panel,
  .agent-card,
  .agent-panel {
    box-shadow:
      0 4px 16px rgba(40,84,110,.07) !important;
  }
}

/* ==========================================================
   END SweSund Light Design System
   ========================================================== */
/* ==========================================================
   LOGGED-IN SAKALANS SPECIFIC OVERRIDES
   ========================================================== */

#appShell,
.app,
.workspace,
.content,
.view,
.view.active {
  background: #f3f8fb !important;
  color: #172b3a !important;
}

.sakalans-sidebar,
.sidebar.sakalans-sidebar {
  background: #ffffff !important;
  color: #172b3a !important;
  border-right: 1px solid #d7e4ec !important;
  box-shadow: 6px 0 24px rgba(40,84,110,.05) !important;
}

.sakalans-sidebar .nav-section-label {
  color: #6b7f8c !important;
}

.sakalans-sidebar button {
  background: transparent !important;
  color: #29475a !important;
  border-color: transparent !important;
}

.sakalans-sidebar button.active {
  background: linear-gradient(135deg,#e7f6fd,#f5fbfe) !important;
  color: #0b5f91 !important;
  border: 1px solid #a8daf0 !important;
}

.sakalans-sidebar button span {
  color: #129fe3 !important;
}

.sidebar-agent-card {
  background: linear-gradient(135deg,#eef9fe,#ffffff) !important;
  color: #172b3a !important;
  border: 1px solid #cfe7f2 !important;
  box-shadow: 0 6px 18px rgba(40,84,110,.08) !important;
}

.sidebar-agent-card strong,
.sidebar-agent-card small {
  color: #172b3a !important;
}

.sidebar-agent-orb {
  background: linear-gradient(135deg,#129fe3,#42bfe9) !important;
  color: #ffffff !important;
  box-shadow: 0 0 16px rgba(18,159,227,.30) !important;
}

.sakalans-topbar,
.topbar.sakalans-topbar {
  background: rgba(255,255,255,.97) !important;
  color: #172b3a !important;
  border-bottom: 1px solid #d7e4ec !important;
  box-shadow: 0 4px 16px rgba(40,84,110,.05) !important;
}

.topbar-command,
.dashboard-command-input {
  background: #ffffff !important;
  border: 1px solid #cfe0e9 !important;
  color: #172b3a !important;
}

.topbar-command input,
.dashboard-command-input textarea {
  background: #ffffff !important;
  color: #172b3a !important;
}

.welcome-card {
  background: linear-gradient(135deg,#ffffff,#edf8fd) !important;
  color: #172b3a !important;
  border: 1px solid #cbe4ef !important;
  box-shadow: 0 8px 28px rgba(40,84,110,.08) !important;
}

.welcome-card h2,
.welcome-card p {
  color: #172b3a !important;
}

.dash-card,
.page-card,
.workspace-section,
.integration-card,
.portal-panel,
.portal-kpis article,
.data-grid > section,
.review-queue-wrap,
.routing-log-wrap,
.routing-panel,
.mobile-modal-card,
.invoice-preview-card {
  background: #ffffff !important;
  color: #172b3a !important;
  border: 1px solid #d7e4ec !important;
  box-shadow: 0 8px 24px rgba(40,84,110,.07) !important;
}

.dash-card h3,
.page-card h2,
.page-card h3,
.workspace-section h3,
.integration-card h4,
.portal-panel h3,
.data-grid h3 {
  color: #102638 !important;
}

.dash-card p,
.page-card p,
.workspace-section p,
.integration-card p,
.portal-panel p,
.data-grid p,
.empty,
.empty-inline,
.preview-compact {
  color: #526879 !important;
}

.metric-pair strong,
.portal-kpis strong {
  color: #102638 !important;
}

.card-link,
.blue-text {
  color: #087fc7 !important;
}

.green-text {
  color: #087239 !important;
}

.amber-text {
  color: #9a6500 !important;
}

.purple-text {
  color: #635bc8 !important;
}

.integration-grid {
  background: transparent !important;
}

.badge.unknown {
  background: #f1f5f9 !important;
  color: #526275 !important;
  border: 1px solid #cbd6df !important;
}

.badge.connected,
.badge.online,
.badge.active {
  background: #eaf8ef !important;
  color: #087239 !important;
  border: 1px solid #8bd1a2 !important;
  box-shadow: 0 0 10px rgba(22,163,74,.18) !important;
}

.badge.connected::before,
.badge.online::before,
.badge.active::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #16a34a !important;
  box-shadow:
    0 0 0 3px rgba(22,163,74,.13),
    0 0 10px rgba(22,163,74,.42) !important;
}

.routing-form,
.billing-form {
  background: #f8fbfd !important;
  border: 1px solid #dbe7ee !important;
}

.routing-form label,
.billing-form label {
  color: #29475a !important;
}

.mobile-bottom-nav {
  background: #ffffff !important;
  border-top: 1px solid #d7e4ec !important;
}

.mobile-bottom-nav button {
  color: #526879 !important;
  background: #ffffff !important;
}

.mobile-bottom-nav button:hover,
.mobile-bottom-nav button.active {
  color: #087fc7 !important;
  background: #edf8fd !important;
}

footer {
  background: #f8fbfd !important;
  color: #687d8a !important;
}

/* Specialist areas rendered dynamically */

[class*="ac-"],
[class*="cg-"],
[class*="legal-"],
[class*="rn-"] {
  color: #172b3a;
}

.ac-panel,
.ac-card,
.ac-section,
.cg-panel,
.cg-card,
.cg-stat,
.cg-metric,
.legal-panel,
.legal-card,
.legal-section,
.rn-panel,
.rn-card,
.rn-section {
  background: #ffffff !important;
  color: #172b3a !important;
  border-color: #d7e4ec !important;
}

.ac-shell,
.cg-shell,
.legal-shell,
.rn-shell {
  background: #f3f8fb !important;
  color: #172b3a !important;
}