/* Global styles guided by docs/style.json tokens */
:root{
  --color-primary-50:#e8f0f7; --color-primary-100:#d1e1ef; --color-primary-200:#a3c3df; --color-primary-300:#75a5cf; --color-primary-400:#4787bf; --color-primary-500:#113f63; --color-primary-600:#0e3552; --color-primary-700:#0c2b42; --color-primary-800:#092131; --color-primary-900:#051721;
  --color-accent-50:#ecfeff; --color-accent-100:#cffafe; --color-accent-200:#a5f3fc; --color-accent-300:#67e8f9; --color-accent-400:#22d3ee; --color-accent-500:#06b6d4; --color-accent-600:#0891b2; --color-accent-700:#0e7490; --color-accent-800:#155e75; --color-accent-900:#164e63;
  --neutral-50:#f8fafc; --neutral-100:#f1f5f9; --neutral-200:#e2e8f0; --neutral-300:#cbd5e1; --neutral-400:#94a3b8; --neutral-500:#64748b; --neutral-600:#475569; --neutral-700:#334155; --neutral-800:#1e293b; --neutral-900:#0f172a;
  --color-success-50:#f0fdf4; --color-success-500:#22c55e; --color-success-600:#16a34a;
  --color-warning-50:#fffbeb; --color-warning-500:#f59e0b; --color-warning-600:#d97706;
  --color-danger-50:#fef2f2; --color-danger-500:#ef4444; --color-danger-600:#dc2626;
  --radius-sm:0.25rem; --radius-md:0.5rem; --radius-lg:0.75rem; --radius-xl:1rem;
  --space-xs:0.25rem; --space-sm:0.5rem; --space-md:1rem; --space-lg:1.5rem; --space-xl:2rem;
  --shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);
}

html, body{ margin:0; padding:0; width:100%; height:100%; overflow: hidden;
  background:
    radial-gradient(circle at -35% 80%, rgba(32, 30, 91, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 192, 181, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(32, 30, 91, 0.08) 0%, transparent 50%),
    linear-gradient(135deg, #fafafa 0%, #f5f7fa 100%);
  color:var(--neutral-800); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

*{ box-sizing: border-box; }

#app{ display:flex; flex-direction:column; min-height:100vh; }

/* Top bar */
#topbar{
  height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 1.5rem;
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-500) 100%);
  backdrop-filter: blur(25px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  position: sticky; top:0; z-index:100;
  box-shadow:
    0 8px 32px rgba(32, 30, 91, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
}

#topbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

#topbar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%,
    rgba(0, 192, 181, 0.1) 100%
  );
  pointer-events: none;
}
#topbar .left{ display:flex; align-items:center; gap:0.75rem; position: relative; z-index: 1; }
#topbar .brand{ display:flex; align-items:center; gap:0.75rem; }
#topbar .brand .logo { display:flex; align-items:center; }
#topbar .brand .logo img {
  height: 32px;
  width: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
#topbar .brand .logo i{ color: white; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); }
#topbar .brand .title{
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.025em;
}
#topbar .right { position: relative; z-index: 1; }
#topbar .topbar-actions .btn.ghost {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}
#topbar .topbar-actions .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Buttons */
.btn{ font-family: inherit; font-weight:500; font-size:0.875rem; border-radius:0.5rem; padding:0.5rem 0.75rem; border:none; background:var(--color-primary-500); color:#fff; cursor:pointer; transition:all 0.2s ease-in-out; }
.btn:hover{ background:var(--color-primary-600); }
.btn.ghost{ background:transparent; color:var(--neutral-600);border:1px solid var(--neutral-200); }
.btn.ghost:hover{ background:var(--neutral-100); color:var(--neutral-800); }
.btn.icon-only{ padding:0.5rem; width:33px; height:33px; display:inline-flex; align-items:center; justify-content:center; }

/* Layout */
#layout{ display:flex; height: 100%; overflow: hidden; }
#app{ display:flex; flex-direction:column; height: 100vh; overflow: hidden; }
#side-menu-wrapper{ flex: 0 0 auto; overflow:hidden; }
.main-content{ flex:1; padding: 0;height: 100%; overflow: hidden;display: flex;flex-direction: column;}
.main-content.hidden{ display: none}

/* Chat specific layout */
.chat-content{ padding: 0 !important; }
#layout{ height: calc(100vh - 56px); }

/* Card base */
.card{ background:#ffffff; border:1px solid var(--neutral-200); border-radius: var(--radius-lg); padding:10px; box-shadow: var(--shadow-sm); }
.card:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); transition: all 0.2s ease-in-out; }

/* Welcome */
.welcome h1{ font-size:1.5rem; margin:0 0 0.25rem 0; }
.welcome p{ color: var(--neutral-600); margin:0; }

/* Page styles */

/* Enhanced Section Headers */
.section-header {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding: 1rem 1.5rem;
  border-radius: 8px 8px 0 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 60px;
}

.section-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-title h1 {
  background: linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-600) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
  margin: 0;
  font-size: 1.5rem;
  max-width: 75%;
}

.section-title i {
  color: var(--color-primary-600);
  filter: drop-shadow(0 1px 2px rgba(32, 30, 91, 0.2));
  font-size: 1.5rem;
}

.section-tools{
  display:flex;
  align-items:center;
  gap:8px
}

.section-actions{
  display:flex;
  align-items:center;
  gap:8px
}

/* Buttons */
.btn{border:none;border-radius:8px;padding:8px 12px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:4px;transition:all 0.2s ease}
.btn.primary{background:linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-500) 100%);color:#fff;box-shadow:0 4px 12px rgba(32,30,91,0.3)}
.btn.primary:hover{background:linear-gradient(135deg, var(--color-primary-600) 0%, var(--color-accent-600) 100%);transform:translateY(-1px);box-shadow:0 8px 20px rgba(32,30,91,0.4)}
.btn.secondary{background:rgba(255,255,255,0.5);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);color:#475569;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.btn.secondary:hover{background:rgba(255,255,255,0.7);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}

.action-btn{border:1px solid rgba(255,255,255,0.2);cursor:pointer;padding:4px;border-radius:4px;color:#64748b;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px}
.action-btn:hover{background:rgba(255,255,255,0.5);color:#374151;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.action-btn i{font-size:14px}

/* Generic form styles */
input,select,textarea{font-family:Inter, sans-serif;font-size:13px;border-radius:8px;padding:8px 12px;border:1px solid #d1d5db;background:#ffffff;color:#1e293b;transition:all .2s ease-in-out;outline:none}
input::placeholder,textarea::placeholder{color:#9ca3af}
input:focus,select:focus,textarea:focus{border-color:var(--color-primary-500);box-shadow:0 0 0 3px rgba(32,30,91,.1);outline:none}
select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .75rem center;background-size:1rem;padding-right:2.5rem}
textarea{min-height:120px;resize:vertical;line-height:1.5}

/* Resource Type Color Coding */
.type-icon.icon-file-text { color: #dc2626; } /* Paper - Red (PDF files) */
.type-icon.icon-globe { color: #2563eb; } /* Web Site - Blue (web/internet) */
.type-icon.icon-image { color: #16a34a; } /* Image - Green (visual content) */
.type-icon.icon-video { color: #7c3aed; } /* Video - Purple (multimedia) */
.type-icon.icon-database { color: #ea580c; } /* Dataset - Orange (data/analytics) */
.type-icon.icon-headphones { color: #c2410c; } /* Audio/Podcast - Dark Orange (audio) */
.type-icon.icon-code { color: #059669; } /* Software/Tool - Teal (development) */
.type-icon.icon-book { color: #b91c1c; } /* Book/Report - Dark Red (literature) */
.type-icon.icon-presentation { color: #9333ea; } /* Presentation - Light Purple (slides) */
.type-icon.icon-clipboard { color: #4338ca; } /* Survey/Form - Indigo (forms) */
.type-icon.icon-file { color: #6b7280; } /* Default - Gray (fallback) */


/* =====================================
   Glassmorphism utility classes
   ===================================== */
.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-card {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.glass-elevated {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.glass-header {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-surface {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Glassmorphism hover effects */
.glass:hover,
.glass-card:hover,
.glass-elevated:hover {
  transform: translateY(-1px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Company brand gradients */
.gradient-primary {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-600) 100%);
}

.gradient-accent {
  background: linear-gradient(135deg, var(--color-accent-500) 0%, var(--color-accent-600) 100%);
}

.gradient-brand {
  background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-accent-500) 100%);
}

/* =====================================
   Tags (shared)
   ===================================== */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;font-size:.75rem;font-weight:600;color:#1f2937;background:#e0e7ff;line-height:1}
.tag .label{line-height:1;display:inline-flex;align-items:center}
/* Display-only tags */
.tags .tag .remove{display:none}
/* Editable tags (with remove button) */
.tags.tags-edit .tag, .tags-edit.tag{padding-right:4px}
.tags.tags-edit .tag .remove, .tags-edit.tag .remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:transparent;border-radius:3px;color:#334155;cursor:pointer;font-size:12px;line-height:1}
.tags.tags-edit .tag .remove:hover, .tags-edit.tag .remove:hover{background:rgba(0,0,0,.06)}