/* ==========================================================================
   FDI Analytics — Design tokens & modern theme
   Signature: a live "signal trace" mark (oscilloscope motif) in the sidebar
   logo, a cyan = data/normal vs. violet = AI/intelligence accent system.
   ========================================================================== */

   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');

   :root{
     /* ink — dark sidebar surfaces */
     --ink:           #0B1322;
     --ink-soft:      #15203A;
     --ink-line:      #28365A;
     --ink-text:      #C9D2E8;
     --ink-text-dim:  #7E8AAE;
   
     /* canvas */
     --paper:       #F5F7FB;
     --paper-soft:  #ECEFF6;
     --card:        #FFFFFF;
     --line:        #E4E8F1;
   
     --text:        #0F172A;
     --muted:       #64748B;
     --muted-soft:  #94A3B8;
   
     /* accents — cyan = signal/data, violet = AI/intelligence */
     --signal:       #06B6D4;
     --signal-deep:  #0891B2;
     --signal-soft:  #E0F7FA;
     --pulse:        #7C5CFC;
     --pulse-deep:   #5B3DF0;
     --pulse-soft:   #EFEAFD;
     --success:      #10B981;
     --success-deep: #047857;
     --success-soft: #E3FBF1;
     --warn:         #F59E0B;
     --warn-soft:    #FEF3DD;
     --danger:       #EF4444;
     --danger-soft:  #FDE8E8;
   
     --radius-sm: 9px;
     --radius:    15px;
     --radius-lg: 22px;
     --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
     --shadow:    0 6px 20px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.05);
     --shadow-lg: 0 20px 45px rgba(15,23,42,.14), 0 6px 14px rgba(15,23,42,.06);
   
     --font-display: 'Space Grotesk', Inter, sans-serif;
     --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     --font-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;
   
     --sidebar-w:           256px;
     --sidebar-w-collapsed: 80px;
   }
   
   *{box-sizing:border-box;}
   html,body{margin:0;padding:0;}
   body{
     font-family:var(--font-body);
     background:var(--paper);
     color:var(--text);
     -webkit-font-smoothing:antialiased;
     -moz-osx-font-smoothing:grayscale;
   }
   h1,h2,h3{font-family:var(--font-display);}
   a{text-decoration:none;color:inherit;}
   button{font-family:var(--font-body);}
   
   ::-webkit-scrollbar{width:9px;height:9px;}
   ::-webkit-scrollbar-track{background:transparent;}
   ::-webkit-scrollbar-thumb{background:#C9D2E0;border-radius:20px;}
   ::-webkit-scrollbar-thumb:hover{background:#AAB4C8;}
   
   :focus-visible{outline:2px solid var(--pulse);outline-offset:2px;border-radius:6px;}
   
   @media (prefers-reduced-motion: reduce){
     *,*::before,*::after{
       animation-duration:.001ms !important;
       animation-iteration-count:1 !important;
       transition-duration:.001ms !important;
       scroll-behavior:auto !important;
     }
   }
   
   /* ==========================================================================
      App shell
      ========================================================================== */
   .app-shell{
     display:flex;
     min-height:100vh;
     background:var(--paper);
   }
   
   /* ---------------------------- Sidebar ---------------------------------- */
   .app-sidebar{
     width:var(--sidebar-w);
     flex-shrink:0;
     background:linear-gradient(190deg, var(--ink) 0%, var(--ink-soft) 100%);
     display:flex;
     flex-direction:column;
     padding:22px 16px 18px;
     position:sticky;
     top:0;
     height:100vh;
     transition:width .22s ease;
     z-index:40;
   }
   .app-shell.sidebar-collapsed .app-sidebar{width:var(--sidebar-w-collapsed);}
   .app-shell.sidebar-collapsed .sb-label,
   .app-shell.sidebar-collapsed .sb-brand-text,
   .app-shell.sidebar-collapsed .sb-footer-label,
   .app-shell.sidebar-collapsed .sb-footer-version{display:none;}
   .app-shell.sidebar-collapsed .sb-brand{justify-content:center;}
   .app-shell.sidebar-collapsed .sidebar-link{justify-content:center;padding:12px;}
   .app-shell.sidebar-collapsed .sb-collapse-btn{transform:rotate(180deg);align-self:center;}
   
   .sb-brand{
     display:flex;align-items:center;gap:12px;
     padding:6px 8px 20px;margin-bottom:16px;
     border-bottom:1px solid var(--ink-line);
   }
   .sb-logo-mark{
     width:42px;height:42px;border-radius:13px;flex-shrink:0;position:relative;overflow:hidden;
     background:linear-gradient(135deg, var(--signal) 0%, var(--pulse) 100%);
     box-shadow:0 8px 18px rgba(124,92,252,.32);
   }
   .sb-logo-mark::after{
     content:"";position:absolute;inset:0;
     background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='42' viewBox='0 0 84 42'><polyline points='0,21 10,21 14,8 19,34 24,14 28,28 32,21 84,21' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
     background-repeat:repeat-x;
     background-size:84px 42px;
     opacity:.95;
     animation:waveScroll 2.4s linear infinite;
   }
   @keyframes waveScroll{from{background-position:0 0;}to{background-position:-42px 0;}}
   .sb-brand-name{font-family:var(--font-display);font-weight:700;font-size:15.5px;color:#fff;letter-spacing:-.01em;}
   .sb-brand-tag{font-size:11px;color:var(--ink-text-dim);margin-top:2px;letter-spacing:.02em;}
   
   .sb-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
   .sidebar-link{
     display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:11px;
     color:var(--ink-text);font-size:13.5px;font-weight:500;
     transition:background .15s ease, color .15s ease;
   }
   .sidebar-link:hover{background:rgba(255,255,255,.07);color:#fff;}
   .sidebar-link .sb-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
   .sidebar-link.active{
     background:linear-gradient(135deg, rgba(6,182,212,.24), rgba(124,92,252,.24));
     color:#fff;
     box-shadow:inset 0 0 0 1px rgba(124,92,252,.38);
   }
   .sidebar-link.active .sb-icon{filter:drop-shadow(0 0 6px rgba(6,182,212,.55));}
   
   .sb-collapse-btn{
     align-self:flex-end;margin:12px 2px 4px;width:30px;height:30px;border-radius:9px;
     background:rgba(255,255,255,.06);border:1px solid var(--ink-line);color:var(--ink-text);
     cursor:pointer;font-size:13px;transition:transform .2s ease, background .2s ease;
   }
   .sb-collapse-btn:hover{background:rgba(255,255,255,.14);}
   
   .sb-footer{padding:14px 10px 2px;border-top:1px solid var(--ink-line);margin-top:6px;}
   .sb-footer-label{font-size:9.5px;letter-spacing:.12em;color:var(--ink-text-dim);font-weight:600;}
   .sb-footer-version{font-size:11.5px;color:var(--ink-text);margin-top:3px;font-family:var(--font-mono);}
   
   /* ---------------------------- Main area / Topbar ------------------------ */
   .app-main-area{flex:1;display:flex;flex-direction:column;min-width:0;}
   
   .app-topbar{
     display:flex;align-items:center;justify-content:space-between;
     padding:16px 30px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);
     -webkit-backdrop-filter:blur(10px);
     border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;
   }
   .topbar-crumbs{display:flex;align-items:center;gap:8px;}
   .crumb-section{color:var(--muted-soft);font-weight:500;font-size:13px;}
   .crumb-sep{color:var(--muted-soft);font-size:13px;}
   .crumb-page{color:var(--text);font-weight:600;font-family:var(--font-display);font-size:14.5px;}
   .topbar-actions{display:flex;align-items:center;gap:14px;}
   
   .data-chip{
     display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;
     font-size:12px;font-weight:600;background:var(--paper-soft);color:var(--muted);
     border:1px solid var(--line);white-space:nowrap;
   }
   .chip-dot{width:7px;height:7px;border-radius:50%;background:var(--muted-soft);flex-shrink:0;}
   .data-chip-active{color:var(--signal-deep);border-color:#BEF1F8;background:var(--signal-soft);}
   .data-chip-active .chip-dot{background:var(--signal);box-shadow:0 0 0 3px rgba(6,182,212,.22);}
   .data-chip-done{color:var(--success-deep);border-color:#BCF0DC;background:var(--success-soft);}
   .data-chip-done .chip-dot{background:var(--success);box-shadow:0 0 0 3px rgba(16,185,129,.22);}
   
   .ai-pill{
     display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:100px;
     background:linear-gradient(135deg, var(--pulse), var(--pulse-deep));color:#fff;
     font-weight:600;font-size:13px;box-shadow:0 6px 18px rgba(124,92,252,.32);
     transition:transform .18s ease, box-shadow .18s ease;
   }
   .ai-pill:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(124,92,252,.42);}
   .ai-pill.active{background:linear-gradient(135deg, var(--pulse-deep), #4731c8);}
   .ai-pill-icon{display:inline-block;animation:sparklePulse 2.4s ease-in-out infinite;}
   @keyframes sparklePulse{0%,100%{transform:scale(1) rotate(0);}50%{transform:scale(1.18) rotate(8deg);}}
   
   .app-main{padding:28px 34px 64px;flex:1;}
   
   /* gentle fade/rise for each routed page */
   #page-content > div{animation:pageFadeIn .35s ease both;}
   @keyframes pageFadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
   
   /* ==========================================================================
      Page header
      ========================================================================== */
   .page-header{margin-bottom:24px;}
   .page-header h1{font-size:25px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0 0 6px;}
   .page-desc{font-size:14px;color:var(--muted);max-width:760px;line-height:1.6;margin:0;}
   
   /* ==========================================================================
      Cards
      ========================================================================== */
   .card{
     background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
     margin-bottom:22px;box-shadow:var(--shadow-sm);overflow:hidden;
     transition:box-shadow .2s ease;
   }
   .card:hover{box-shadow:var(--shadow);}
   .card-header{display:flex;align-items:flex-start;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line);}
   .card-icon{
     width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
     font-size:17px;flex-shrink:0;background:linear-gradient(135deg, var(--signal-soft), var(--pulse-soft));
   }
   .card-title{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--text);margin:0 0 2px;}
   .card-subtitle{font-size:12.5px;color:var(--muted);margin:0;}
   .card-body{padding:22px 24px;}
   
   /* ==========================================================================
      Buttons
      ========================================================================== */
   .btn{
     display:inline-flex;align-items:center;justify-content:center;gap:7px;
     padding:11px 20px;border-radius:11px;font-size:13.5px;font-weight:600;
     border:1px solid transparent;cursor:pointer;
     transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
   }
   .btn:hover{transform:translateY(-1px);}
   .btn:active{transform:translateY(0);}
   .btn:disabled, .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none !important;}
   .btn-primary{background:linear-gradient(135deg, var(--signal), var(--signal-deep));color:#fff;box-shadow:0 6px 16px rgba(6,182,212,.28);}
   .btn-primary:hover{box-shadow:0 10px 22px rgba(6,182,212,.36);}
   .btn-success{background:linear-gradient(135deg, var(--success), #0c9e6c);color:#fff;box-shadow:0 6px 16px rgba(16,185,129,.28);}
   .btn-success:hover{box-shadow:0 10px 22px rgba(16,185,129,.36);}
   .btn-purple{background:linear-gradient(135deg, var(--pulse), var(--pulse-deep));color:#fff;box-shadow:0 6px 16px rgba(124,92,252,.3);}
   .btn-purple:hover{box-shadow:0 10px 22px rgba(124,92,252,.4);}
   .btn-ghost{background:var(--card);color:var(--text);border:1px solid var(--line);}
   .btn-ghost:hover{background:var(--paper-soft);}
   .btn-lg{padding:13px 26px;font-size:14px;border-radius:12px;}
   .btn-sm{padding:7px 14px;font-size:12.5px;border-radius:9px;}
   
   /* ==========================================================================
      Alerts
      ========================================================================== */
   .alert{
     margin-top:14px;padding:12px 16px;border-radius:11px;font-size:13px;font-weight:500;
     border-left:3px solid;animation:pageFadeIn .25s ease both;
   }
   .alert-success{background:var(--success-soft);border-color:var(--success);color:var(--success-deep);}
   .alert-warning{background:var(--warn-soft);border-color:var(--warn);color:#92400E;}
   .alert-danger{background:var(--danger-soft);border-color:var(--danger);color:#991B1B;}
   
   .placeholder-msg{padding:30px 10px;text-align:center;color:var(--muted-soft);font-size:13.5px;}
   
   /* ==========================================================================
      Step accordion (preprocessing)
      ========================================================================== */
   .step-accordion{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;}
   .step-accordion summary{
     list-style:none;display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;
     background:var(--paper-soft);transition:background .15s ease;
   }
   .step-accordion summary::-webkit-details-marker{display:none;}
   .step-accordion summary:hover{background:var(--paper);}
   .step-badge{
     width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
     background:linear-gradient(135deg, var(--signal-soft), var(--pulse-soft));font-size:14px;flex-shrink:0;
   }
   .step-accordion-title{flex:1;font-weight:600;font-size:13.5px;color:var(--text);}
   .step-chevron{color:var(--muted-soft);transition:transform .2s ease;display:inline-block;}
   .step-accordion[open] .step-chevron{transform:rotate(180deg);}
   .step-accordion-body{padding:18px;background:var(--card);}
   
   /* ==========================================================================
      Method-family switch (Traditional vs. Deep Learning) — used on
      Feature Extraction, Detection, and Identification pages.
      ========================================================================== */
   .family-toggle{display:flex;flex-wrap:wrap;gap:10px;}
   .family-toggle label{
     display:inline-flex !important;align-items:center;
     padding:10px 18px;border-radius:100px;cursor:pointer;
     background:var(--paper-soft);border:1px solid var(--line);
     font-size:13px;font-weight:600;color:var(--text);
     transition:all .15s ease;
   }
   .family-toggle label:hover{border-color:var(--pulse);background:var(--pulse-soft);}
   .family-toggle input[type="radio"]{accent-color:var(--pulse);}
   .family-toggle label:has(input[type="radio"]:checked){
     background:linear-gradient(135deg, var(--signal-soft), var(--pulse-soft));
     border-color:var(--pulse);color:var(--pulse-deep);
     box-shadow:0 0 0 1px var(--pulse) inset;
   }
   
   /* Shown under a method-family switch whenever PyTorch isn't installed */
   .torch-warning{
     margin-top:10px;padding:11px 16px;border-radius:11px;font-size:12.5px;font-weight:500;
     background:var(--warn-soft);border-left:3px solid var(--warn);color:#92400E;line-height:1.6;
   }
   
   /* Small explanatory note under deep-learning config panels */
   .dl-note{
     font-size:12px;color:var(--pulse-deep);background:var(--pulse-soft);
     padding:10px 14px;border-radius:10px;margin-top:10px;line-height:1.6;
   }
   
   /* ==========================================================================
      Forms — checkboxes / radios / inputs / dropdown
      ========================================================================== */
   input[type="checkbox"], input[type="radio"]{accent-color:var(--pulse);width:15px;height:15px;}
   
   input[type="number"], input[type="text"], input[type="password"], textarea{
     font-family:var(--font-body);
   }
   input[type="number"]:focus, input[type="text"]:focus, input[type="password"]:focus, textarea:focus{
     outline:none;border-color:var(--pulse) !important;box-shadow:0 0 0 3px var(--pulse-soft);
   }
   
   /* dash-core-components Dropdown (react-select-derived) */
   .Select-control{
     border-radius:10px !important;border:1px solid var(--line) !important;
     min-height:42px !important;font-family:var(--font-body);
   }
   .Select.is-focused > .Select-control{
     border-color:var(--pulse) !important;box-shadow:0 0 0 3px var(--pulse-soft);
   }
   .Select-menu-outer{
     border-radius:10px !important;overflow:hidden;
     box-shadow:var(--shadow-lg) !important;border:1px solid var(--line) !important;
   }
   .Select-option.is-focused{background-color:var(--pulse-soft) !important;}
   .Select-placeholder, .Select-value-label{font-size:13.5px;}
   
   /* ==========================================================================
      Upload zone
      ========================================================================== */
   .upload-zone{
     border:2px dashed var(--line);border-radius:var(--radius);padding:38px 20px;text-align:center;
     cursor:pointer;background:var(--paper-soft);
     transition:border-color .2s ease, background .2s ease, transform .15s ease;
   }
   .upload-zone:hover{border-color:var(--signal);background:var(--signal-soft);transform:translateY(-1px);}
   .upload-icon-big{font-size:34px;display:block;margin-bottom:10px;}
   .upload-text-main{font-weight:600;font-size:14.5px;color:var(--text);}
   .upload-text-sub{font-size:12.5px;color:var(--muted);margin-top:4px;}
   .upload-text-sub a{color:var(--pulse);font-weight:600;}
   .upload-formats{margin-top:14px;display:flex;gap:8px;justify-content:center;}
   .format-pill{
     background:var(--card);border:1px solid var(--line);border-radius:100px;padding:4px 12px;
     font-size:11px;font-weight:600;color:var(--muted);font-family:var(--font-mono);
   }
   
   /* ==========================================================================
      Nav footer (Back / Next links between workflow steps)
      ========================================================================== */
   .nav-footer{display:flex;justify-content:space-between;margin-top:8px;flex-wrap:wrap;gap:10px;}
   .nav-footer-end{justify-content:flex-end;}
   .nav-footer-start{justify-content:flex-start;}
   
   /* ==========================================================================
      AI Assistant page
      ========================================================================== */
   .config-section{display:flex;flex-direction:column;gap:16px;}
   
   .quick-prompts{display:flex;flex-wrap:wrap;gap:9px;}
   .quick-btn{
     background:var(--paper-soft);border:1px solid var(--line);border-radius:100px;
     padding:9px 16px;font-size:12.5px;font-weight:600;color:var(--text);cursor:pointer;
     transition:all .15s ease;
   }
   .quick-btn:hover{background:var(--pulse-soft);border-color:var(--pulse);color:var(--pulse-deep);transform:translateY(-1px);}
   
   .chat-wrapper{
     display:flex;flex-direction:column;height:520px;
     border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
   }
   .chat-history{flex:1;overflow-y:auto;padding:20px;background:var(--paper-soft);}
   .chat-input-row{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:var(--card);}
   .chat-textarea{
     flex:1;border:1px solid var(--line);border-radius:11px;padding:13px 16px;font-size:13.5px;
     font-family:var(--font-body);resize:none;min-height:52px;max-height:120px;
   }
   .chat-textarea:focus{outline:none;border-color:var(--pulse);box-shadow:0 0 0 3px var(--pulse-soft);}
   
   /* ==========================================================================
      Stats (report page)
      ========================================================================== */
   .stats-row{display:flex;gap:14px;flex-wrap:wrap;}
   .stat-box{
     background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--radius);
     padding:16px 20px;min-width:128px;text-align:center;
     transition:transform .18s ease, box-shadow .18s ease;
   }
   .stat-box:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
   .stat-value{font-family:var(--font-mono);font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--signal-deep);}
   .stat-value-signal{color:var(--signal-deep);}
   .stat-value-danger{color:var(--danger);}
   .stat-value-warn{color:#B45309;}
   .stat-lbl{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:5px;font-weight:600;}
   
   .report-meta-box{padding:12px 16px;background:var(--paper-soft);border-radius:11px;border:1px solid var(--line);margin-top:14px;}
   .report-meta-line{font-size:13px;color:var(--text);font-weight:600;}
   .report-meta-sub{font-size:11.5px;color:var(--muted-soft);margin-top:3px;}
   
   /* ==========================================================================
      DataTable polish
      ========================================================================== */
   .dash-table-container{border-radius:12px;overflow:hidden;border:1px solid var(--line);}
   
   /* ==========================================================================
      Responsive
      ========================================================================== */
   @media (max-width: 1080px){
     .app-sidebar{width:var(--sidebar-w-collapsed);}
     .sb-label, .sb-brand-text, .sb-footer-label, .sb-footer-version{display:none;}
     .sb-brand{justify-content:center;}
     .sidebar-link{justify-content:center;padding:12px;}
     .sb-collapse-btn{display:none;}
   }
   
   @media (max-width: 680px){
     .app-shell{flex-direction:column;}
     .app-sidebar{
       position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:62px;
       flex-direction:row;align-items:center;padding:0 10px;z-index:50;
     }
     .sb-brand, .sb-footer, .sb-collapse-btn{display:none;}
     .sb-nav{flex-direction:row;justify-content:space-around;width:100%;}
     .sidebar-link{flex-direction:column;gap:3px;padding:8px 6px;font-size:9.5px;}
     .sidebar-link .sb-icon{font-size:17px;}
     .app-main{padding:22px 16px 90px;}
     .app-topbar{padding:14px 16px;flex-wrap:wrap;gap:10px;}
     .ai-pill span:last-child{display:none;}
     .ai-pill{padding:10px 13px;}
     .data-chip{display:none;}
   }
   
   /* ==========================================================================
      Progress bar + Cancel button — shown under any long-running action
      (Apply / Extract / Run) while it executes in the background.
      ========================================================================== */
   .progress-wrap{
     margin-top:14px;padding:14px 16px;border-radius:12px;
     background:var(--paper-soft);border:1px solid var(--line);
     animation:pageFadeIn .25s ease both;
   }
   .progress-track{
     width:100%;height:9px;border-radius:100px;background:var(--line);overflow:hidden;
   }
   .progress-bar{
     height:100%;border-radius:100px;width:0%;
     background:linear-gradient(90deg, var(--signal), var(--pulse));
     transition:width .35s ease;
     box-shadow:0 0 10px rgba(124,92,252,.35);
   }
   .progress-footer{
     display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;
   }
   .progress-text{
     font-size:12px;color:var(--muted);font-family:var(--font-mono);flex:1;
   }
   .progress-cancel-btn{
     padding:6px 14px !important;font-size:12px !important;
     border-color:var(--danger) !important;color:var(--danger) !important;
   }
   .progress-cancel-btn:hover{background:var(--danger-soft) !important;}