:root {
  --cj-brand: #1399d6;
  --cj-brand-strong: #087db7;
  --cj-brand-soft: #eaf7fd;
  --cj-navy: #0d1f33;
  --cj-navy-2: #132a43;
  --cj-ink: #172033;
  --cj-muted: #667085;
  --cj-line: #dfe5ec;
  --cj-surface: #ffffff;
  --cj-surface-soft: #f5f7fb;
  --cj-success: #137a51;
  --cj-warning: #b66a0a;
  --cj-danger: #b42318;
  --cj-radius: 12px;
  --cj-radius-lg: 18px;
  --cj-shadow-sm: 0 1px 2px rgba(13,31,51,.06);
  --cj-shadow: 0 10px 28px rgba(13,31,51,.08);
  --cj-shadow-lg: 0 22px 60px rgba(13,31,51,.16);
}

html, body, #root { min-height: 100%; }
body {
  color: var(--cj-ink);
  background:
    radial-gradient(circle at top right, rgba(19,153,214,.08), transparent 34rem),
    var(--cj-surface-soft);
}
::selection { color:#fff; background:var(--cj-brand); }

.auth-page {
  background:
    linear-gradient(135deg, rgba(13,31,51,.98), rgba(19,42,67,.95)),
    radial-gradient(circle at 84% 12%, rgba(19,153,214,.46), transparent 28rem) !important;
}
.auth-card { border-radius:22px !important; box-shadow:var(--cj-shadow-lg) !important; }
.auth-brand { border-bottom:1px solid var(--cj-line) !important; }
.auth-heading > span, .eyebrow {
  color:var(--cj-brand-strong) !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase;
}
.auth-primary, button.primary, .button.primary, .sales-post {
  border:1px solid var(--cj-brand-strong) !important;
  background:linear-gradient(180deg,var(--cj-brand),var(--cj-brand-strong)) !important;
  color:#fff !important;
  box-shadow:0 7px 17px rgba(19,153,214,.22) !important;
}
.auth-primary:hover, button.primary:hover, .button.primary:hover, .sales-post:hover {
  transform:translateY(-1px);
  filter:brightness(.98);
}
.auth-footer { background:#f8fafc !important; }

.workspace-shell, .app-shell { background:var(--cj-surface-soft) !important; }
.workspace-sidebar, .sidebar {
  background:linear-gradient(180deg,var(--cj-navy),var(--cj-navy-2)) !important;
  color:#fff !important;
  box-shadow:10px 0 30px rgba(13,31,51,.12);
}
.workspace-brand, .brand {
  border-bottom:1px solid rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.03) !important;
}
.workspace-brand strong, .workspace-brand span, .brand strong, .brand span { color:#fff !important; }
.nav-group h2, .nav-group p {
  color:rgba(255,255,255,.52) !important;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.nav-link, .sidebar nav button {
  color:rgba(255,255,255,.78) !important;
  border:1px solid transparent !important;
  border-radius:10px !important;
}
.nav-link:hover, .sidebar nav button:hover {
  color:#fff !important;
  background:rgba(255,255,255,.08) !important;
}
.nav-link.active, .sidebar nav button.active {
  color:#fff !important;
  background:linear-gradient(90deg,rgba(19,153,214,.95),rgba(8,125,183,.92)) !important;
  border-color:rgba(255,255,255,.14) !important;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.sidebar-foot { border-top:1px solid rgba(255,255,255,.10) !important; }

.workspace-header, .topbar {
  background:rgba(255,255,255,.94) !important;
  border-bottom:1px solid var(--cj-line) !important;
  box-shadow:var(--cj-shadow-sm);
  backdrop-filter:blur(12px);
}
.workspace-content, .workspace-main, .page { background:transparent !important; }

.workspace-card, .sales-card, .purchase-card, .service-card, .inventory-card,
.module-page, .record-dialog, .drawer, .settings-grid button, .core-grid article,
.metric, .kpi-grid article, .config-form, .module-access, .table-wrap {
  border:1px solid var(--cj-line) !important;
  border-radius:var(--cj-radius) !important;
  background:var(--cj-surface) !important;
  box-shadow:var(--cj-shadow-sm) !important;
}
.workspace-card:hover, .sales-card:hover, .purchase-card:hover, .service-card:hover,
.core-grid article:hover, .settings-grid button:hover {
  border-color:#cbd8e6 !important;
  box-shadow:var(--cj-shadow) !important;
}

.page-heading h1, .sales-title h1, .purchase-title h1, .service-title h1,
.config-header h1, .auth-heading h1 { color:var(--cj-navy) !important; }
.page-heading p, .sales-title p, .purchase-title p, .service-title p,
.config-header p { color:var(--cj-muted) !important; }

input, select, textarea {
  border-color:#cfd8e5 !important;
  border-radius:9px !important;
  background:#fff !important;
  color:var(--cj-ink) !important;
}
input:focus, select:focus, textarea:focus {
  border-color:var(--cj-brand) !important;
  box-shadow:0 0 0 4px rgba(19,153,214,.12) !important;
  outline:none !important;
}
button { transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; }
button:not(:disabled):active { transform:translateY(1px); }

.table-wrap, .purchase-table, .sales-table-wrap, .service-table { overflow:auto; }
table { border-collapse:separate !important; border-spacing:0 !important; }
th {
  background:#f7f9fc !important;
  color:#344054 !important;
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.03em;
  text-transform:uppercase;
  border-bottom:1px solid var(--cj-line) !important;
}
td { border-bottom:1px solid #edf1f5 !important; }
tbody tr:hover td { background:#f8fbfd !important; }

.auth-session-control {
  border-color:var(--cj-line) !important;
  border-radius:12px !important;
  box-shadow:var(--cj-shadow) !important;
}
.auth-session-control strong { color:var(--cj-navy) !important; }

.connection-alert, .error-panel, .auth-error, .sales-error, .purchase-error, .service-error {
  border-radius:10px !important;
}
.service-success, .purchase-success, .sales-success { border-left:4px solid var(--cj-success) !important; }

.operational-launchers {
  gap:10px !important;
  padding:12px !important;
  background:rgba(255,255,255,.90) !important;
  border:1px solid var(--cj-line) !important;
  border-radius:14px !important;
  box-shadow:var(--cj-shadow-sm) !important;
}
.operational-launchers button {
  border:1px solid #cfd8e5 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:var(--cj-navy) !important;
  font-weight:800 !important;
}
.operational-launchers button:hover {
  border-color:var(--cj-brand) !important;
  color:var(--cj-brand-strong) !important;
  box-shadow:0 6px 16px rgba(19,153,214,.12) !important;
}

@media (max-width: 960px) {
  .workspace-sidebar, .sidebar { box-shadow:18px 0 45px rgba(13,31,51,.28); }
  .workspace-main, .page { padding:18px !important; }
}
@media (max-width: 640px) {
  .workspace-main, .page { padding:12px !important; }
  .workspace-header, .topbar { min-height:58px !important; }
  .operational-launchers { overflow-x:auto; flex-wrap:nowrap !important; }
  .operational-launchers button { white-space:nowrap; }
  .auth-card { border-radius:16px !important; }
}

@media print {
  body { background:#fff !important; }
  .workspace-sidebar, .sidebar, .workspace-header, .topbar, .mobile-menu,
  .auth-session-control, .operational-launchers, .bottom-nav, button { display:none !important; }
  .workspace-content, .workspace-main, .page { margin:0 !important; padding:0 !important; }
  .workspace-card, .sales-card, .purchase-card, .service-card, .inventory-card,
  .module-page, .table-wrap { box-shadow:none !important; border-color:#c8c8c8 !important; }
  @page { size:A4; margin:12mm; }
}