/* GoldenSign ERP - Executive theme (Light / Dark). Load last: it re-maps every legacy token. */

html[data-theme="light"] body {
  --bg: #f1f5f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #0f172a;
  --text-secondary: #64748b;
  --border: #e2e8f0;
  --primary: #059669;
  --primary-hover: #047857;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #f43f5e;
  --info: #0ea5e9;
  --hover: rgba(5, 150, 105, 0.07);
  --input-bg: #ffffff;
  --table-header: #f1f5f9;
  --table-row-hover: #f0fdf4;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --on-primary: #ffffff;
  --badge-success: #047857;
  --badge-warning: #b45309;
  --badge-danger: #be123c;
  --badge-info: #0369a1;
  --code-text: #047857;
}

html[data-theme="dark"] body {
  --bg: #020617;
  --surface: #0f172a;
  --surface-2: #121a2d;
  --text: #f8fafc;
  --text-secondary: #94a3b8;
  --border: rgba(148, 163, 184, 0.16);
  --primary: #10b981;
  --primary-hover: #34d399;
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --info: #38bdf8;
  --hover: rgba(16, 185, 129, 0.12);
  --input-bg: #0b1324;
  --table-header: #0d1628;
  --table-row-hover: rgba(148, 163, 184, 0.07);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  --on-primary: #03140d;
  --badge-success: #34d399;
  --badge-warning: #fbbf24;
  --badge-danger: #fb7185;
  --badge-info: #38bdf8;
  --code-text: #34d399;}

/* Legacy tokens used by the existing CSS are mapped onto the new ones. */
html[data-theme] body {
  --bg-main: var(--bg);
  --bg-gradient: var(--bg);
  --bg-sidebar: var(--surface);
  --sidebar-border: var(--border);
  --bg-card: var(--surface);
  --bg-card-solid: var(--surface);
  --border-color: var(--border);
  --border-strong: color-mix(in srgb, var(--primary) 35%, var(--border));
  --text-main: var(--text);
  --text-muted: var(--text-secondary);
  --text-subtle: var(--text-secondary);
  --input-border: color-mix(in srgb, var(--text-secondary) 38%, transparent);
  --input-focus: var(--primary);
  --table-th-bg: var(--table-header);
  --table-hover: var(--table-row-hover);
  --hover-bg: var(--hover);
  --primary-2: var(--primary);
  --primary-gradient: var(--primary);
  --accent-gradient: var(--primary);
  --success-gradient: var(--success);
  --danger-gradient: var(--danger);
  --primary-glow: transparent;
  --shadow-sm: var(--shadow);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.22);
  --glass-specular: 0 0 0 transparent;
  --brand-teal-700: var(--primary-hover);
  --brand-teal-600: var(--primary);
  --brand-teal-500: var(--primary);
  --brand-teal-300: var(--primary-hover);
  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --ui-radius-sm: 4px;
  --ui-radius-md: 6px;
  --ui-radius-lg: 8px;
  --ui-shadow-card: var(--shadow);
  --ui-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
  background: var(--bg);
  color: var(--text);
  letter-spacing: 0;
}

html[data-theme] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.theme-transition body,
html.theme-transition body *:not(canvas):not(svg) {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

/* LAYOUT ------------------------------------------------------------ */
html[data-theme] body .sidebar:not(.collapsed) { width: 232px; }
html[data-theme] body .sidebar { background: var(--surface); border-right: 1px solid var(--border); }
html[data-theme] body .sidebar-header { min-height: 56px; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); }
html[data-theme] body .sidebar-header > span { color: var(--text); }
html[data-theme] body .sidebar-header i { color: var(--primary); }
html[data-theme] body .sidebar-item { margin: 1px 8px; padding: 0.5rem 0.7rem; border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.82rem; }
html[data-theme] body .sidebar-item i { color: inherit; }
html[data-theme] body .sidebar-item:hover { background: var(--hover); color: var(--text); }
html[data-theme] body .sidebar-item.active { background: var(--primary); color: var(--on-primary); box-shadow: none; }
html[data-theme] body .sidebar-item.active i { color: var(--on-primary); }
html[data-theme] body .sidebar-item.active::after { display: none; }

html[data-theme] body .main-content { padding: 0.75rem clamp(0.6rem, 1.2vw, 1.25rem); background: transparent; }
html[data-theme] body .top-sidebar-nav { min-height: 54px; padding: 0.3rem 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
html[data-theme] body .top-sidebar-button,
html[data-theme] body .top-sidebar-theme-button,
html[data-theme] body .top-notification-button,
html[data-theme] body .top-user-button { min-height: 34px; border-radius: var(--radius-md); color: var(--text); background: transparent; border: 1px solid transparent; }
html[data-theme] body .top-sidebar-button:hover,
html[data-theme] body .top-sidebar-theme-button:hover,
html[data-theme] body .top-notification-button:hover,
html[data-theme] body .top-user-button:hover { background: var(--hover); color: var(--primary); }
html[data-theme] body .top-sidebar-button.active { background: var(--hover); color: var(--primary); }
html[data-theme] body .top-sidebar-button.active i,
html[data-theme] body .top-sidebar-button i { color: var(--primary); }
html[data-theme] body .top-sidebar-theme-button { border-color: var(--border); width: 34px; justify-content: center; padding: 0; }
html[data-theme] body .top-banner { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-md); }
html[data-theme] body #pageTitle { margin-bottom: 0.6rem !important; font-size: 1.25rem; color: var(--text); }
html[data-theme] body .page-heading-row { margin-top: 0.6rem; }
html[data-theme] body .page-heading-copy h2 { color: var(--text); }
html[data-theme] body .page-heading-copy .app-breadcrumb,
html[data-theme] body .app-breadcrumb { color: var(--text-secondary); margin-top: 0.5rem; }
html[data-theme] body .app-breadcrumb i { color: var(--primary); }

html[data-theme] body .top-nav-mst-lookup { background: var(--surface-2); border: 1px solid var(--border); box-shadow: none; }
html[data-theme] body .top-nav-mst-lookup .form-input { background: var(--input-bg); border-color: var(--input-border); color: var(--text); box-shadow: none; }
html[data-theme] body .top-nav-mst-lookup .form-input::placeholder { color: var(--text-secondary); }

/* KPI / CARDS -------------------------------------------------------- */
html[data-theme] body .stat-card,
html[data-theme] body .page-header-stats .stat-card,
html[data-theme] body .page-header-stats .stat-card:nth-child(n),
html[data-theme] body .task-kpi,
html[data-theme] body .task-kpi:nth-child(n),
html[data-theme] body .assignment-task,
html[data-theme] body .assignment-task:nth-child(n) {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 0.65rem 0.9rem;
}
html[data-theme] body .stat-card::before,
html[data-theme] body .stat-card::after,
html[data-theme] body .task-kpi::before,
html[data-theme] body .task-kpi::after { display: none; }
html[data-theme] body .stat-card:hover { transform: none; box-shadow: var(--shadow); }
html[data-theme] body .page-header-stats .stat-card { min-height: 0; }
html[data-theme] body .page-header-stats .stat-value,
html[data-theme] body .task-kpi-value { color: var(--text); text-shadow: none; font-size: 1.45rem; }
html[data-theme] body .page-header-stats .stat-title,
html[data-theme] body .page-header-stats .stat-card:nth-child(2) .stat-title,
html[data-theme] body .task-kpi-label { color: var(--text-secondary); }

/* DATA TABLE --------------------------------------------------------- */
html[data-theme] body .table-container,
html[data-theme] body .task-table-wrap,
html[data-theme] body .order-related-wrap,
html[data-theme] body .customer-history-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
html[data-theme] body table { font-size: 0.78rem; }
html[data-theme] body th { padding: 0.5rem 0.7rem; background: var(--table-header); color: var(--text-secondary); border-bottom: 1px solid var(--border); font-size: 0.68rem; border-radius: 0; position: sticky; top: 0; z-index: 2; }
html[data-theme] body td { padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--border); color: var(--text); line-height: 1.3; }
html[data-theme] body tbody tr:hover td { background: var(--table-row-hover); }
html[data-theme] body td:first-child .cell-main { color: var(--code-text); font-family: var(--font-mono); font-size: 0.78rem; }
html[data-theme] body .cell-main { color: var(--text); }
html[data-theme] body .cell-sub { color: var(--text-secondary); margin-top: 1px; }
html[data-theme] body td.orders-col-amount,
html[data-theme] body th.orders-col-amount,
html[data-theme] body td.orders-col-final-cost,
html[data-theme] body th.orders-col-final-cost { text-align: right; font-variant-numeric: tabular-nums; }
html[data-theme] body .product-name-cell { color: var(--text); }
html[data-theme] body .product-ncc-name { color: var(--primary); }
html[data-theme] body .product-ncc-name i { color: var(--primary); }
html[data-theme] body .pagination-section { margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* BADGES ------------------------------------------------------------- */
html[data-theme] body .status-badge { padding: 0.12rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 700; }
html[data-theme] body .status-badge::before { width: 5px; height: 5px; box-shadow: none !important; }
html[data-theme] body .status-active,
html[data-theme] body .status-yes,
html[data-theme] body .status-completed,
html[data-theme] body .priority-low { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--badge-success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
html[data-theme] body .status-active::before,
html[data-theme] body .status-yes::before { background: var(--success); }
html[data-theme] body .status-pending,
html[data-theme] body .priority-medium { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--badge-warning); border-color: color-mix(in srgb, var(--warning) 38%, transparent); }
html[data-theme] body .status-pending::before { background: var(--warning); }
html[data-theme] body .status-no,
html[data-theme] body .priority-high { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--badge-danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
html[data-theme] body .status-no::before { background: var(--danger); }
html[data-theme] body .status-processing { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--badge-info); }

/* BUTTONS / FORMS ---------------------------------------------------- */
html[data-theme] body .btn { padding: 0.42rem 0.85rem; border-radius: var(--radius-md); font-size: 0.8rem; box-shadow: none; transform: none; }
html[data-theme] body .btn:hover,
html[data-theme] body .btn:active { transform: none; }
html[data-theme] body .btn-primary { background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); }
html[data-theme] body .btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: none; }
html[data-theme] body .btn-success { background: var(--success); color: var(--on-primary); border: 1px solid var(--success); }
html[data-theme] body .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--input-border); }
html[data-theme] body .btn-secondary:hover { background: var(--hover); border-color: var(--primary); color: var(--primary); }
html[data-theme] body .btn-danger { background: var(--danger); color: #fff; border: 1px solid var(--danger); }
html[data-theme] body .btn-danger:hover { filter: brightness(0.92); box-shadow: none; }

html[data-theme] body .form-input,
html[data-theme] body .form-select,
html[data-theme] body input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
html[data-theme] body select,
html[data-theme] body textarea { background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-md); }
html[data-theme] body .form-input:focus,
html[data-theme] body .form-select:focus,
html[data-theme] body input:focus,
html[data-theme] body select:focus,
html[data-theme] body textarea:focus { border-color: var(--primary); box-shadow: var(--ui-shadow-focus); outline: none; }
html[data-theme] body .form-input::placeholder,
html[data-theme] body input::placeholder,
html[data-theme] body textarea::placeholder { color: var(--text-secondary); opacity: 0.8; }
html[data-theme] body select option { background: var(--surface); color: var(--text); }
html[data-theme] body .form-label { color: var(--text-secondary); }
html[data-theme] body input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--input-bg) inset; -webkit-text-fill-color: var(--text); }

/* MODAL / DROPDOWN / POPUP ------------------------------------------ */
html[data-theme] body .modal-content,
html[data-theme] body .task-list-popup-content,
html[data-theme] body .chat-popup { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
html[data-theme] body .modal-header,
html[data-theme] body .modal-footer { border-color: var(--border); }
html[data-theme] body .action-dropdown,
html[data-theme] body .action-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); color: var(--text); }

/* CHAT --------------------------------------------------------------- */
html[data-theme] body .chat-header { background: var(--surface-2); border-bottom: 1px solid var(--border); }
html[data-theme] body .chat-header h4 { color: var(--text); }
html[data-theme] body .chat-header h4 i { color: var(--primary); }
html[data-theme] body .chat-presence { color: var(--text-secondary); }
html[data-theme] body .chat-body { background: var(--bg); }
html[data-theme] body .chat-footer { background: var(--surface); border-top-color: var(--border); }
html[data-theme] body .chat-message.incoming { background: var(--surface); border-color: var(--border); color: var(--text); }

/* Hard-coded accent colors inside inline styles / templates. */
html[data-theme] body [style*="color: #38bdf8"],
html[data-theme] body [style*="color:#38bdf8"],
html[data-theme] body [style*="color: #0284c7"],
html[data-theme] body [style*="color:#0284c7"] { color: var(--primary) !important; }
html[data-theme] body .chat-history-btn:hover { color: var(--primary); border-color: var(--primary); }

/* RESPONSIVE --------------------------------------------------------- */
@media (max-width: 900px) {
  html[data-theme] body .main-content { padding: 0.5rem; }
  html[data-theme] body .page-header-stats { width: 100%; }
}

/* Remaining legacy blue accents ------------------------------------- */
html[data-theme] body .sidebar-header > span { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
html[data-theme] body .page-heading-copy h2::after { height: 3px; background: var(--primary); }
html[data-theme] body .top-banner span { color: var(--primary); }
html[data-theme] body .overview-period-bar,
html[data-theme] body .overview-period-bar * { box-shadow: none; }
html[data-theme] body .overview-period-bar { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-lg); }
html[data-theme] body .app-alert-backdrop { background: rgba(2, 8, 5, 0.55); }
html[data-theme] body .app-alert-dialog { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
html[data-theme] body .app-alert-head { color: var(--text); border-bottom-color: var(--border); }
html[data-theme] body .app-alert-body { color: var(--text-secondary); }
html[data-theme] body .app-alert-icon { color: var(--primary); background: var(--hover); }
html[data-theme] body .app-alert-ok { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
html[data-theme] body .app-alert-ok:hover { background: var(--primary-hover); }