/* FlixDesk ERP – Design System */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  --fd-bg:       #f0f2f7;
  --fd-surface:  #ffffff;
  --fd-nav:      #0f172a;
  --fd-nav-text: #94a3b8;
  --fd-nav-act:  #ffffff;
  --fd-primary:  #2563eb;
  --fd-primary-d:#1d4ed8;
  --fd-accent:   #0ea5e9;
  --fd-success:  #16a34a;
  --fd-warning:  #d97706;
  --fd-danger:   #dc2626;
  --fd-info:     #0891b2;
  --fd-muted:    #64748b;
  --fd-border:   #e2e8f0;
  --fd-text:     #0f172a;
  --fd-text-sm:  #475569;
  --fd-radius:   10px;
  --fd-radius-lg:16px;
  --fd-shadow:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --fd-shadow-md:0 4px 16px rgba(0,0,0,.10);
  --fd-shadow-lg:0 10px 40px rgba(0,0,0,.12);
  --nav-w:       240px;
  --topbar-h:    60px;
  --transition:  0.18s ease;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; scroll-behavior:smooth; }
body { font-family:'Plus Jakarta Sans',sans-serif; background:var(--fd-bg); color:var(--fd-text); line-height:1.6; min-height:100vh; }

/* ── LAYOUT ── */
.fd-shell { display:flex; min-height:100vh; }

/* SIDEBAR */
.fd-sidebar {
  width:var(--nav-w); height:100vh; background:var(--fd-nav);
  display:flex; flex-direction:column; position:fixed; top:0; left:0; z-index:200;
  transition:width var(--transition); overflow:hidden;
}
.fd-sidebar-brand {
  padding:18px 20px; display:flex; align-items:center; gap:10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.fd-brand-logo {
  width:34px; height:34px; background:var(--fd-primary); border-radius:8px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-weight:800; color:#fff; font-size:15px; letter-spacing:-.5px;
}
.fd-brand-name { color:#fff; font-weight:700; font-size:1rem; }
.fd-brand-sub  { color:#64748b; font-size:.65rem; font-weight:500; letter-spacing:.5px; text-transform:uppercase; }

.fd-nav { flex:1; overflow-y:auto; padding:12px 0; min-height:0; }
.fd-nav::-webkit-scrollbar { width:4px; }
.fd-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }

.fd-nav-section { padding:0 14px 4px; margin-top:8px; }
.fd-nav-section-label { font-size:.62rem; letter-spacing:1px; text-transform:uppercase; color:#475569; font-weight:600; padding:4px 8px; }

.fd-nav-item { display:block; padding:0 8px; margin:1px 0; }
.fd-nav-link {
  display:flex; align-items:center; gap:11px; padding:9px 12px;
  border-radius:8px; color:var(--fd-nav-text); text-decoration:none;
  font-size:.875rem; font-weight:500; transition:all var(--transition);
  position:relative;
}
.fd-nav-link:hover { background:rgba(255,255,255,.07); color:#fff; }
.fd-nav-link.active { background:rgba(37,99,235,.25); color:#fff; }
.fd-nav-link.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:20px; background:var(--fd-primary); border-radius:0 3px 3px 0; }
.fd-nav-icon { width:18px; text-align:center; opacity:.75; }
.fd-nav-link.active .fd-nav-icon, .fd-nav-link:hover .fd-nav-icon { opacity:1; }
.fd-nav-badge { margin-left:auto; background:var(--fd-danger); color:#fff; font-size:.65rem; font-weight:700; padding:2px 6px; border-radius:99px; }

.fd-sidebar-footer { padding:12px 14px; border-top:1px solid rgba(255,255,255,.07); }
.fd-user-info { display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:8px; }
.fd-user-avatar { width:32px; height:32px; border-radius:8px; object-fit:cover; }
.fd-user-name  { color:#e2e8f0; font-size:.82rem; font-weight:600; }
.fd-user-role  { color:#64748b; font-size:.7rem; }

/* TOPBAR */
.fd-topbar {
  height:var(--topbar-h); background:var(--fd-surface);
  border-bottom:1px solid var(--fd-border);
  display:flex; align-items:center; gap:12px;
  padding:0 24px; position:sticky; top:0; z-index:100;
  margin-left:var(--nav-w);
}
.fd-search-box {
  display:flex; align-items:center; gap:8px;
  background:var(--fd-bg); border:1px solid var(--fd-border);
  border-radius:8px; padding:7px 14px; flex:1; max-width:420px;
}
.fd-search-box input { border:none; background:transparent; outline:none; font-size:.875rem; color:var(--fd-text); width:100%; font-family:inherit; }
.fd-search-box input::placeholder { color:var(--fd-muted); }
.fd-search-results {
  position:absolute; top:calc(var(--topbar-h) + 4px); left:var(--nav-w); width:480px;
  background:var(--fd-surface); border:1px solid var(--fd-border); border-radius:var(--fd-radius-lg);
  box-shadow:var(--fd-shadow-lg); z-index:999; display:none; overflow:hidden;
}
.fd-search-results.show { display:block; }
.fd-search-section-title { font-size:.7rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--fd-muted); padding:10px 14px 4px; }
.fd-search-item { display:flex; align-items:center; gap:10px; padding:8px 14px; cursor:pointer; transition:background var(--transition); text-decoration:none; color:inherit; }
.fd-search-item:hover { background:var(--fd-bg); }
.fd-search-item-icon { width:30px; height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; }

.fd-topbar-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.fd-icon-btn { width:36px; height:36px; border-radius:8px; border:none; background:var(--fd-bg); color:var(--fd-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--transition); text-decoration:none; }
.fd-icon-btn:hover { background:var(--fd-border); color:var(--fd-text); }

/* MAIN CONTENT */
.fd-main { margin-left:var(--nav-w); min-height:100vh; display:flex; flex-direction:column; }
.fd-content { flex:1; padding:24px; }

/* PAGE HEADER */
.fd-page-header { margin-bottom:24px; display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.fd-page-title { font-size:1.35rem; font-weight:800; color:var(--fd-text); }
.fd-breadcrumb { display:flex; align-items:center; gap:6px; font-size:.78rem; color:var(--fd-muted); margin-top:2px; }
.fd-breadcrumb a { color:var(--fd-primary); text-decoration:none; }
.fd-page-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* CARDS */
.fd-card { background:var(--fd-surface); border-radius:var(--fd-radius-lg); border:1px solid var(--fd-border); box-shadow:var(--fd-shadow); }
.fd-card-header { padding:16px 20px; border-bottom:1px solid var(--fd-border); display:flex; align-items:center; justify-content:space-between; }
.fd-card-title  { font-size:.95rem; font-weight:700; color:var(--fd-text); }
.fd-card-body   { padding:20px; }
.fd-card-footer { padding:14px 20px; border-top:1px solid var(--fd-border); background:var(--fd-bg); border-radius:0 0 var(--fd-radius-lg) var(--fd-radius-lg); }

/* KPI CARDS */
.fd-kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.fd-kpi {
  background:var(--fd-surface); border:1px solid var(--fd-border);
  border-radius:var(--fd-radius-lg); padding:18px 20px;
  display:flex; flex-direction:column; gap:10px;
  transition:transform var(--transition), box-shadow var(--transition);
  text-decoration:none; color:inherit;
}
.fd-kpi:hover { transform:translateY(-2px); box-shadow:var(--fd-shadow-md); }
.fd-kpi-top { display:flex; align-items:center; justify-content:space-between; }
.fd-kpi-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.fd-kpi-trend { font-size:.72rem; font-weight:600; padding:3px 7px; border-radius:99px; }
.fd-kpi-value { font-size:1.75rem; font-weight:800; color:var(--fd-text); line-height:1; }
.fd-kpi-label { font-size:.78rem; color:var(--fd-muted); font-weight:500; }

/* BUTTONS */
.btn-fd       { display:inline-flex; align-items:center; gap:7px; padding:8px 16px; border-radius:8px; font-size:.85rem; font-weight:600; font-family:inherit; border:none; cursor:pointer; text-decoration:none; transition:all var(--transition); white-space:nowrap; }
.btn-fd-sm    { padding:5px 12px; font-size:.78rem; gap:5px; }
.btn-fd-lg    { padding:11px 22px; font-size:.95rem; }
.btn-primary  { background:var(--fd-primary); color:#fff; }
.btn-primary:hover  { background:var(--fd-primary-d); box-shadow:0 4px 12px rgba(37,99,235,.35); }
.btn-success  { background:var(--fd-success); color:#fff; }
.btn-success:hover  { background:#15803d; }
.btn-danger   { background:var(--fd-danger); color:#fff; }
.btn-danger:hover   { background:#b91c1c; }
.btn-warning  { background:var(--fd-warning); color:#fff; }
.btn-outline  { background:transparent; border:1.5px solid var(--fd-border); color:var(--fd-text); }
.btn-outline:hover  { border-color:var(--fd-primary); color:var(--fd-primary); }
.btn-ghost    { background:transparent; color:var(--fd-muted); }
.btn-ghost:hover    { background:var(--fd-bg); color:var(--fd-text); }

/* BADGES */
.fd-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:99px; font-size:.72rem; font-weight:700; letter-spacing:.2px; }
.badge-success { background:#dcfce7; color:#15803d; }
.badge-danger  { background:#fee2e2; color:#b91c1c; }
.badge-warning { background:#fef3c7; color:#b45309; }
.badge-info    { background:#e0f2fe; color:#0369a1; }
.badge-primary { background:#dbeafe; color:#1d4ed8; }
.badge-secondary { background:#f1f5f9; color:#475569; }
.badge-dark    { background:#1e293b; color:#f8fafc; }
.fd-priority-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* TABLES */
.fd-table-wrap { overflow-x:auto; }
.fd-table { width:100%; border-collapse:collapse; font-size:.845rem; }
.fd-table thead th { padding:10px 14px; text-align:left; font-size:.72rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--fd-muted); background:var(--fd-bg); border-bottom:1px solid var(--fd-border); white-space:nowrap; }
.fd-table tbody td { padding:12px 14px; border-bottom:1px solid var(--fd-border); vertical-align:middle; }
.fd-table tbody tr:last-child td { border-bottom:none; }
.fd-table tbody tr:hover td { background:#f8faff; }
.fd-table .td-mono { font-family:'DM Mono',monospace; font-size:.8rem; }

/* FORMS */
.fd-form-group  { margin-bottom:16px; }
.fd-label       { display:block; font-size:.8rem; font-weight:600; color:var(--fd-text); margin-bottom:5px; }
.fd-label .req  { color:var(--fd-danger); margin-left:2px; }
.fd-input, .fd-select, .fd-textarea {
  width:100%; padding:9px 12px; border:1.5px solid var(--fd-border);
  border-radius:8px; font-size:.875rem; font-family:inherit; color:var(--fd-text);
  background:var(--fd-surface); outline:none; transition:border-color var(--transition), box-shadow var(--transition);
}
.fd-input:focus, .fd-select:focus, .fd-textarea:focus {
  border-color:var(--fd-primary); box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.fd-input.is-invalid, .fd-select.is-invalid { border-color:var(--fd-danger); }
.fd-input-icon { position:relative; }
.fd-input-icon i { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--fd-muted); font-size:.85rem; }
.fd-input-icon input { padding-left:32px; }
.fd-hint { font-size:.72rem; color:var(--fd-muted); margin-top:4px; }
.fd-error-msg { font-size:.72rem; color:var(--fd-danger); margin-top:4px; }
.fd-form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fd-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.fd-section-title { font-size:.8rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--fd-muted); margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--fd-border); }

/* TIMELINE */
.fd-timeline { position:relative; }
.fd-timeline::before { content:''; position:absolute; left:16px; top:0; bottom:0; width:2px; background:var(--fd-border); }
.fd-tl-item { display:flex; gap:14px; margin-bottom:16px; position:relative; }
.fd-tl-dot  { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; z-index:1; }
.fd-tl-content { flex:1; background:var(--fd-surface); border:1px solid var(--fd-border); border-radius:10px; padding:10px 14px; }
.fd-tl-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.fd-tl-action { font-size:.82rem; font-weight:600; }
.fd-tl-time   { font-size:.72rem; color:var(--fd-muted); }
.fd-tl-desc   { font-size:.8rem; color:var(--fd-text-sm); }

/* ALERTS / TOASTS */
.fd-alert { display:flex; align-items:flex-start; gap:12px; padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:.85rem; }
.fd-alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#15803d; }
.fd-alert-danger  { background:#fff1f2; border:1px solid #fecdd3; color:#be123c; }
.fd-alert-warning { background:#fffbeb; border:1px solid #fde68a; color:#b45309; }
.fd-alert-info    { background:#f0f9ff; border:1px solid #bae6fd; color:#0369a1; }

/* STATUS PIPELINE */
.fd-pipeline { display:flex; align-items:center; gap:4px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; }
.fd-pipeline-step { flex:1; min-width:80px; }
.fd-pipeline-bar { height:4px; border-radius:99px; background:var(--fd-border); margin-bottom:6px; }
.fd-pipeline-bar.done { background:var(--fd-success); }
.fd-pipeline-bar.active { background:var(--fd-primary); }
.fd-pipeline-label { font-size:.65rem; font-weight:600; text-align:center; color:var(--fd-muted); white-space:nowrap; }

/* STAT ROW */
.fd-stat-row { display:flex; gap:0; border:1px solid var(--fd-border); border-radius:10px; overflow:hidden; }
.fd-stat-cell { flex:1; padding:14px 16px; text-align:center; border-right:1px solid var(--fd-border); }
.fd-stat-cell:last-child { border-right:none; }
.fd-stat-val  { font-size:1.3rem; font-weight:800; }
.fd-stat-lbl  { font-size:.7rem; color:var(--fd-muted); font-weight:500; margin-top:2px; }

/* FILTER BAR */
.fd-filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 20px; background:var(--fd-bg); border-bottom:1px solid var(--fd-border); }
.fd-filter-bar .fd-input, .fd-filter-bar .fd-select { width:auto; min-width:140px; padding:7px 10px; font-size:.8rem; }

/* PAGINATION */
.fd-pagination { display:flex; align-items:center; gap:4px; }
.fd-page-btn { width:32px; height:32px; border-radius:7px; border:1px solid var(--fd-border); background:var(--fd-surface); color:var(--fd-text); font-size:.8rem; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:all var(--transition); }
.fd-page-btn:hover, .fd-page-btn.active { background:var(--fd-primary); color:#fff; border-color:var(--fd-primary); }
.fd-page-btn.disabled { opacity:.4; pointer-events:none; }

/* MODAL */
.fd-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:500; display:none; align-items:center; justify-content:center; padding:16px; }
.fd-modal-overlay.show { display:flex; animation:fadeIn .15s ease; }
.fd-modal { background:var(--fd-surface); border-radius:var(--fd-radius-lg); box-shadow:var(--fd-shadow-lg); width:100%; max-width:540px; max-height:90vh; display:flex; flex-direction:column; animation:slideUp .2s ease; }
.fd-modal-lg { max-width:720px; }
.fd-modal-header { padding:16px 20px; border-bottom:1px solid var(--fd-border); display:flex; align-items:center; justify-content:space-between; }
.fd-modal-title  { font-size:1rem; font-weight:700; }
.fd-modal-body   { padding:20px; overflow-y:auto; }
.fd-modal-footer { padding:14px 20px; border-top:1px solid var(--fd-border); display:flex; gap:8px; justify-content:flex-end; }
.fd-modal-close  { background:none; border:none; font-size:1.2rem; color:var(--fd-muted); cursor:pointer; padding:4px; }

/* KANBAN */
.fd-kanban { display:flex; gap:16px; overflow-x:auto; padding-bottom:16px; }
.fd-kanban-col { min-width:260px; max-width:280px; flex-shrink:0; }
.fd-kanban-header { padding:10px 14px; border-radius:10px 10px 0 0; font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:space-between; }
.fd-kanban-body { background:var(--fd-bg); border-radius:0 0 10px 10px; min-height:200px; padding:8px; display:flex; flex-direction:column; gap:8px; }
.fd-kanban-card { background:var(--fd-surface); border:1px solid var(--fd-border); border-radius:8px; padding:12px; cursor:grab; transition:box-shadow var(--transition); }
.fd-kanban-card:hover { box-shadow:var(--fd-shadow-md); }

/* UPLOAD ZONE */
.fd-upload-zone { border:2px dashed var(--fd-border); border-radius:10px; padding:32px; text-align:center; cursor:pointer; transition:all var(--transition); }
.fd-upload-zone:hover, .fd-upload-zone.drag-over { border-color:var(--fd-primary); background:#eff6ff; }
.fd-upload-icon { font-size:2rem; color:var(--fd-muted); margin-bottom:10px; }
.fd-upload-text { font-size:.85rem; color:var(--fd-text); font-weight:600; margin-bottom:4px; }
.fd-upload-hint { font-size:.75rem; color:var(--fd-muted); }

/* CHECKLIST */
.fd-checklist { display:flex; flex-direction:column; gap:8px; }
.fd-check-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--fd-border); border-radius:8px; background:var(--fd-surface); }
.fd-check-item.done { background:#f0fdf4; border-color:#bbf7d0; }
.fd-check-item.missing { background:#fff1f2; border-color:#fecdd3; }
.fd-check-icon { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0; }
.fd-check-name { font-size:.83rem; font-weight:600; flex:1; }
.fd-check-status { font-size:.7rem; font-weight:600; }

/* MISC */
.fd-divider { border:none; border-top:1px solid var(--fd-border); margin:16px 0; }
.fd-empty   { text-align:center; padding:40px 20px; color:var(--fd-muted); }
.fd-empty-icon { font-size:2.5rem; margin-bottom:10px; opacity:.4; }
.fd-empty-text { font-size:.9rem; font-weight:500; }
.fd-spinner { width:20px; height:20px; border:3px solid var(--fd-border); border-top-color:var(--fd-primary); border-radius:50%; animation:spin .7s linear infinite; }

/* ANIMATIONS */
@keyframes fadeIn  { from{opacity:0}   to{opacity:1} }
@keyframes slideUp { from{transform:translateY(12px);opacity:0} to{transform:none;opacity:1} }
@keyframes spin    { to{transform:rotate(360deg)} }

.fd-fade-in { animation:fadeIn .25s ease; }

/* RESPONSIVE */
@media(max-width:768px){
  .fd-sidebar { transform:translateX(-100%); }
  .fd-sidebar.open { transform:none; }
  .fd-topbar, .fd-main { margin-left:0; }
  .fd-form-row, .fd-form-row-3 { grid-template-columns:1fr; }
  .fd-kpi-grid { grid-template-columns:1fr 1fr; }
  .fd-content { padding:16px; }
}

/* AUTH PAGE */
.fd-auth-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 60%,#1e293b 100%); padding:20px; }
.fd-auth-card { background:#fff; border-radius:20px; padding:40px; width:100%; max-width:420px; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.fd-auth-logo { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.fd-auth-logo-mark { width:44px; height:44px; background:var(--fd-primary); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:18px; }
.fd-auth-title { font-size:1.5rem; font-weight:800; margin-bottom:4px; }
.fd-auth-sub   { font-size:.85rem; color:var(--fd-muted); margin-bottom:24px; }

/* SCROLLBAR */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--fd-border); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:#cbd5e1; }