@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800&display=swap');

:root {
  --tp-navy: #0F3B5F;
  --tp-navy-deep: #0A2942;
  --tp-blue: #1E7FD1;
  --tp-blue-light: #E8F2FC;
  --tp-amber: #F5A623;
  --tp-danger: #D93B3B;
  --tp-success: #1EA35C;
  --tp-ink: #1B2430;
  --tp-muted: #6B7787;
  --tp-border: #E4E9F0;
  --tp-bg: #F4F7FB;
  --tp-surface: #FFFFFF;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(15,59,95,0.06), 0 1px 6px rgba(15,59,95,0.04);
  --shadow-md: 0 4px 16px rgba(15,59,95,0.10);
  --shadow-lg: 0 12px 32px rgba(15,59,95,0.16);

  /* Spacing scale - use for new components instead of arbitrary px values */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Per-module accent colors (Sales/Manufacturing/Dispatch reuse the phase
     tokens above via .badge-phase-*) - used on module tiles, nav icons, and
     entity-card thumbnails throughout the enterprise UI pass. */
  --tp-warranty: #7C4DFF;
  --tp-accounting: #4A5A6A;
}

/* Dark mode - opts into Bootstrap 5.3's native data-bs-theme mechanism
   (recolors all Bootstrap components automatically); these overrides handle
   this app's own custom elements (navbar, sidebar, cards-on-dark, RAG/status
   colors) so they stay legible instead of just inheriting Bootstrap's plain
   dark defaults. Toggled by public/js/theme.js, persisted in localStorage. */
[data-bs-theme="dark"] {
  --tp-bg: #0B1420;
  --tp-surface: #101B2C;
  --tp-ink: #E7ECF3;
  --tp-muted: #93A2B5;
  --tp-border: #223349;
  --tp-blue-light: #16283D;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 6px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

body {
  background: var(--tp-bg);
  font-family: 'Inter', "Segoe UI", Arial, sans-serif;
  color: var(--tp-ink);
}

h1, h2, h3, h4, h5, .brand-mark, .login-title { font-family: 'Poppins', 'Inter', sans-serif; }

/* ---------- Top Navbar ---------- */
.app-navbar {
  background: linear-gradient(100deg, var(--tp-navy-deep) 0%, var(--tp-navy) 55%, var(--tp-blue) 130%);
  box-shadow: var(--shadow-md);
  padding-top: 12px;
  padding-bottom: 12px;
  position: sticky;
  top: 0;
  z-index: 1030;
}
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--tp-amber), #FFCE6B);
  color: var(--tp-navy-deep);
  font-weight: 800;
  font-size: 12px;
  border-radius: 9px;
  margin-right: 8px;
  box-shadow: 0 2px 6px rgba(245,166,35,0.45);
}
.navbar-brand { font-size: 1.05rem; letter-spacing: 0.3px; display: flex; align-items: center; }
.navbar-brand small { font-weight: 400; opacity: 0.75; margin-left: 8px; }

/* ---------- Layout ---------- */
.app-shell { display: flex; min-height: calc(100vh - 118px); }
.app-sidebar {
  width: 250px;
  background: var(--tp-surface);
  border-right: 1px solid var(--tp-border);
  padding-top: 16px;
  flex-shrink: 0;
}
.app-sidebar .nav-link {
  color: var(--tp-muted);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  border-radius: 0 20px 20px 0;
  margin-right: 10px;
  transition: all .15s ease;
}
.app-sidebar .nav-link:hover {
  background: var(--tp-blue-light);
  color: var(--tp-navy);
}
.app-sidebar .nav-link.active {
  background: linear-gradient(90deg, var(--tp-blue-light), transparent);
  color: var(--tp-navy);
  border-left-color: var(--tp-amber);
  font-weight: 700;
}
.app-sidebar .nav-header {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #9AA5B1;
  font-weight: 700;
  padding: 18px 20px 6px;
}
.app-main { flex-grow: 1; }

.workspace-hero { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:34px; color:#fff; background:linear-gradient(120deg, #102c45, #196b72); border-radius:16px; box-shadow:var(--shadow-md); }
.workspace-hero h1 { font-size:clamp(1.7rem, 3vw, 2.6rem); letter-spacing:0; }
.workspace-hero p { color:#c8e4e2; }
.eyebrow { color:var(--tp-amber); font-size:10px; font-weight:800; letter-spacing:.14em; }
.workspace-stat { position:relative; overflow:hidden; padding:20px; background:var(--tp-surface); border:1px solid var(--tp-border); border-top:3px solid var(--tp-blue); border-radius:12px; box-shadow:var(--shadow-sm); }
.workspace-stat strong { display:block; font-size:2rem; line-height:1.1; margin-top:8px; }
.workspace-stat i { position:absolute; right:18px; bottom:16px; color:var(--tp-blue); font-size:1.6rem; opacity:.25; }
.stat-label { color:var(--tp-muted); font-size:12px; font-weight:600; }
.stat-warn { border-top-color:var(--tp-amber); } .stat-warn i { color:var(--tp-amber); } .stat-danger { border-top-color:var(--tp-danger); } .stat-danger i { color:var(--tp-danger); }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:12px; } .section-heading h2 { font-size:1.2rem; margin:4px 0 0; }
.section-heading a { color:var(--tp-blue); font-size:13px; text-decoration:none; }
.stage-tag, .project-stage { color:var(--tp-muted); font-size:12px; } .stage-tag { padding:5px 8px; border-radius:6px; background:var(--tp-blue-light); color:var(--tp-navy); font-weight:600; }
.queue-item, .workspace-project { display:flex; text-decoration:none; color:inherit; }
.queue-item { align-items:center; gap:10px; padding:15px 18px; border-bottom:1px solid var(--tp-border); } .queue-item:last-child { border-bottom:0; } .queue-item small { display:block; color:var(--tp-muted); margin-top:3px; }
.queue-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:#fff3d6; color:#996b00; }
.workspace-project { display:block; height:100%; padding:20px; background:var(--tp-surface); border:1px solid var(--tp-border); border-radius:12px; transition:transform .15s ease, box-shadow .15s ease; } .workspace-project:hover { color:inherit; transform:translateY(-2px); box-shadow:var(--shadow-md); }
.project-code { color:var(--tp-blue); font-size:12px; font-weight:800; letter-spacing:.08em; } .workspace-project h3 { font-size:1.1rem; margin:18px 0; } .project-stage { display:flex; gap:8px; align-items:center; border-top:1px solid var(--tp-border); padding-top:14px; }
@media (max-width: 600px) { .workspace-hero { display:block; padding:24px; } .workspace-hero .btn { margin-top:20px; } }

/* ---------- Footer ---------- */
.app-footer {
  background: var(--tp-navy-deep);
  color: #C9D6E4;
  border-top: 3px solid var(--tp-amber);
}
.app-footer a { color: #FFCE6B; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
  background: linear-gradient(100deg, var(--tp-navy-deep), var(--tp-navy));
  color: #fff;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  font-weight: 600;
  border: none;
  letter-spacing: 0.2px;
}

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary {
  background: linear-gradient(100deg, var(--tp-navy), var(--tp-blue));
  border: none;
}
.btn-primary:hover { background: linear-gradient(100deg, var(--tp-navy-deep), var(--tp-navy)); }

/* ---------- Badges ---------- */
.badge-phase-Sales { background: var(--tp-blue); }
.badge-phase-Manufacturing { background: var(--tp-danger); }
.badge-phase-Dispatch { background: var(--tp-success); }
.badge-phase-Warranty { background: var(--tp-warranty); }
.badge-phase-Accounting { background: var(--tp-accounting); }

/* ---------- Stage progress track ---------- */
.stage-track { display: flex; flex-wrap: wrap; gap: 6px; }
.stage-pill {
  padding: 6px 12px; border-radius: 20px; font-size: 11.5px; font-weight: 700;
  background: var(--tp-border); color: var(--tp-muted); letter-spacing: 0.3px;
}
.stage-pill.done { background: var(--tp-success); color: #fff; }
.stage-pill.current { background: var(--tp-amber); color: #3B2E00; box-shadow: 0 0 0 3px rgba(245,166,35,0.25); }

/* ---------- Project Status progress bars ---------- */
.progress-track {
  height: 10px; border-radius: 6px; background: var(--tp-border); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--tp-blue), var(--tp-navy));
}
.rag-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.rag-green { background: var(--tp-success); }
.rag-amber { background: var(--tp-amber); }
.rag-red { background: var(--tp-danger); }
.rag-gray { background: #B7C1CC; }
.badge-rag-green { background: var(--tp-success); color: #fff; }
.badge-rag-amber { background: var(--tp-amber); color: #3B2E00; }
.badge-rag-red { background: var(--tp-danger); color: #fff; }
.badge-rag-gray { background: #B7C1CC; color: #333; }

/* ---------- Login ---------- */
.login-wrapper {
  min-height: 100vh; display: flex;
  background: var(--tp-navy-deep);
}
.login-visual {
  flex: 1.1;
  background:
    radial-gradient(circle at 15% 20%, rgba(245,166,35,0.25), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(30,127,209,0.35), transparent 45%),
    linear-gradient(160deg, var(--tp-navy-deep) 0%, var(--tp-navy) 60%, #124873 100%);
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px; color: #fff;
  position: relative; overflow: hidden;
}
.login-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 40px);
}
.login-visual .badge-est { display: inline-block; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); padding: 4px 12px; border-radius: 20px; font-size: 12px; letter-spacing: 0.4px; margin-bottom: 18px; }
.login-visual h1 { font-size: 2.1rem; font-weight: 800; line-height: 1.25; margin-bottom: 14px; position: relative; }
.login-visual p { color: #C9D6E4; max-width: 420px; position: relative; }
.login-visual .stat-row { display: flex; gap: 28px; margin-top: 36px; position: relative; }
.login-visual .stat-row .num { font-size: 1.6rem; font-weight: 800; color: #FFCE6B; }
.login-visual .stat-row .lbl { font-size: 11.5px; color: #AEBFD1; text-transform: uppercase; letter-spacing: 0.5px; }
.login-form-side { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--tp-bg); }
.login-card { width: 380px; background: var(--tp-surface); border-radius: 18px; padding: 36px 34px; box-shadow: var(--shadow-lg); }
.login-title { color: var(--tp-navy); font-weight: 800; font-size: 1.7rem; }
[data-bs-theme="dark"] .login-title { color: #6DB4F0; }
.login-card .form-control { border-radius: 9px; padding: 10px 12px; border-color: var(--tp-border); }
.login-card .form-control:focus { border-color: var(--tp-blue); box-shadow: 0 0 0 3px rgba(30,127,209,0.15); }
.login-card .btn-primary { padding: 10px; font-weight: 600; }

@media (max-width: 900px) {
  .login-visual { display: none; }
}

.status-badge-Overdue, .status-badge-Escalated { background: var(--tp-danger); color: #fff; }
.status-badge-Issued { background: var(--tp-blue); color: #fff; }
.status-badge-Returned { background: var(--tp-success); color: #fff; }
.status-badge-PendingApproval { background: var(--tp-amber); color: #3B2E00; }

/* ---------- Transformer build-progress visualization ---------- */
.tf-status {
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--radius); background: var(--tp-surface);
  box-shadow: var(--shadow-sm); position: relative;
}
.tf-status::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--radius);
  box-shadow: 0 0 0 2px var(--tf-rag-color, transparent), 0 0 18px 0 var(--tf-rag-glow, transparent);
  pointer-events: none; transition: box-shadow .3s ease;
}
.tf-rag-green  { --tf-rag-color: rgba(30,163,92,0.55);  --tf-rag-glow: rgba(30,163,92,0.25); }
.tf-rag-amber  { --tf-rag-color: rgba(245,166,35,0.6);  --tf-rag-glow: rgba(245,166,35,0.3); }
.tf-rag-red    { --tf-rag-color: rgba(217,59,59,0.6);   --tf-rag-glow: rgba(217,59,59,0.3); }
.tf-rag-gray   { --tf-rag-color: rgba(183,193,204,0.5); --tf-rag-glow: transparent; }

.tf-status-sm svg { width: 90px; height: 70px; }
.tf-status-md svg { width: 160px; height: 126px; }
.tf-status-lg svg { width: 240px; height: 189px; }

.tf-part { transition: opacity .6s ease; }
.tf-caption { font-size: 11px; color: var(--tp-muted); font-weight: 600; text-align: center; }

@keyframes tf-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245,166,35,0)); }
  50% { filter: drop-shadow(0 0 5px rgba(245,166,35,0.85)); }
}
.tf-pulse { animation: tf-pulse 1.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .tf-pulse { animation: none; }
  .tf-part { transition: none; }
}

/* =====================================================================
   ENTERPRISE UI PASS: module tiles, entity cards, modern tabs, motion
   ===================================================================== */

/* ---------- Module tiles (dashboard home row) ---------- */
.module-tile {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--radius);
  background: var(--tp-surface); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; height: 100%;
  border-left: 4px solid var(--tile-accent, var(--tp-blue));
  transition: transform .18s ease, box-shadow .18s ease;
}
.module-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.module-tile .module-tile-icon {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: var(--tile-accent, var(--tp-blue)); color: #fff; font-size: 1.3rem;
}
.module-tile .module-tile-stat { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-family: 'Poppins', 'Inter', sans-serif; }
.module-tile .module-tile-label { font-size: 12.5px; color: var(--tp-muted); font-weight: 600; }
.module-tile-sales { --tile-accent: var(--tp-blue); }
.module-tile-manufacturing { --tile-accent: var(--tp-danger); }
.module-tile-dispatch { --tile-accent: var(--tp-success); }
.module-tile-documents { --tile-accent: var(--tp-navy); }
.module-tile-warranty { --tile-accent: var(--tp-warranty); }
.module-tile-accounting { --tile-accent: var(--tp-accounting); }

/* ---------- Entity cards (job/order/document thumbnail grid) ---------- */
.entity-card {
  background: var(--tp-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: var(--sp-4); height: 100%; display: flex; flex-direction: column; gap: var(--sp-2);
  text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease;
  border: 1px solid var(--tp-border);
}
.entity-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; }
.entity-card .entity-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-2); }
.entity-card .entity-card-title { font-weight: 700; font-size: 0.95rem; }
.entity-card .entity-card-meta { font-size: 12px; color: var(--tp-muted); }
.entity-card .entity-card-visual { display: flex; justify-content: center; margin: var(--sp-2) 0; }
.entity-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }

/* ---------- View toggle (table / grid) ---------- */
.view-toggle .btn.active { background: var(--tp-blue); color: #fff; border-color: var(--tp-blue); }

/* ---------- Modern tabs ---------- */
.tabs-modern { border-bottom: 2px solid var(--tp-border); gap: var(--sp-2); }
.tabs-modern .nav-link {
  border: none; border-radius: 10px 10px 0 0; color: var(--tp-muted); font-weight: 600;
  padding: 10px 18px; transition: all .15s ease;
}
.tabs-modern .nav-link:hover { background: var(--tp-blue-light); color: var(--tp-navy); }
.tabs-modern .nav-link.active {
  background: linear-gradient(100deg, var(--tp-navy-deep), var(--tp-blue)); color: #fff;
}

/* ---------- Scroll/entrance motion (public/js/animate.js) ----------
   Elements start hidden+offset and settle in as they enter the viewport;
   prefers-reduced-motion below shows everything immediately, matching the
   existing .tf-pulse/.tf-part reduced-motion behavior above. */
[data-animate] { opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
[data-animate].in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-animate] { opacity: 1; transform: none; transition: none; }
}