/* IMPECCABLE DESIGN OVERRIDES - THE BOLDER, CLEANER, POLISHED DH SOFTWARE */

/* ==============================
   1. BOLDER LANDING PAGE (Web)
   ============================== */
:root {
  --wb-radius: 20px;
  --wb-radius-lg: 32px;
  --wb-shadow-hover: 0 24px 50px -20px rgba(0, 119, 214, 0.4);
  --dh-spacing-card: clamp(24px, 4vw, 40px);
}

.wb-home-hero {
  background: radial-gradient(circle at 100% 0%, rgba(2, 145, 249, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 0% 100%, rgba(10, 21, 41, 0.05) 0%, transparent 40%),
              #F8FBFF;
  border-bottom: none;
}

.wb-home-h1 {
  font-size: clamp(36px, 5vw, 64px) !important;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--dh-c-ink) 30%, var(--dh-c-blue-d) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.wb-lead {
  font-size: clamp(18px, 1.5vw, 22px) !important;
  color: #334155 !important;
  font-weight: 500;
}

/* ==============================
   2. TYPOGRAPHY STANDARDIZATION (INTER + PLUS JAKARTA SANS)
   ============================== */
body, p, a, button, input, select, textarea, .sidebar-link, .sidebar-label, th, td {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.025em;
}

/* ==============================
   3. ADMIN SIDEBAR & WORKSPACE (Light Theme + Ghost Accent)
   ============================== */

/* Fix Canvas Background */
.workspace-body {
  background: #F4F7FB !important; /* Soft gray canvas */
}

/* Nền trắng, viền phải mỏng */
.workspace-body .workspace-sidebar {
  background: #FFFFFF;
  color: #475569;
  border-right: 1px solid #E2E8F0;
  box-shadow: none;
}

/* Brand area */
.sidebar-head {
  border-bottom: 1px solid #F1F5F9;
  height: 80px;
}
.sidebar-logo {
  background: linear-gradient(135deg, #0291F9, #005FAD);
  color: #FFF;
  border: none;
  box-shadow: 0 4px 12px rgba(2, 145, 249, 0.2);
}
.sidebar-logo svg {
  fill: #FFF;
}
.sidebar-brand strong {
  font-size: 16px;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.sidebar-brand small {
  color: #64748B;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Nav Search */
.nav-search {
  padding: 16px 20px 8px;
}
.nav-search label {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 0 12px;
  transition: all 0.2s;
}
.nav-search:focus-within label {
  background: #FFF;
  border-color: #0291F9;
  box-shadow: 0 0 0 3px rgba(2, 145, 249, 0.1);
}
.nav-search .ico {
  color: #94A3B8;
  width: 14px;
}
.nav-search input {
  color: #0F172A;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 500;
}
.nav-search input::placeholder {
  color: #94A3B8;
}

/* Nav Tools (Mở hết, Thu gọn...) */
.nav-tools {
  display: flex;
  gap: 6px;
  padding: 0 20px;
  margin-bottom: 8px;
}
.nav-tool {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  color: #64748B;
  border-radius: 6px;
  padding: 6px 0;
  font-size: 10px;
  font-weight: 600;
  flex: 1;
  text-align: center;
  transition: all 0.2s;
}
.nav-tool:hover {
  background: #F1F5F9;
  color: #0F172A;
}
.nav-tool[aria-pressed="true"] {
  background: #EFF6FF;
  color: #0291F9;
  border-color: #BFDBFE;
}
.nav-tool.nav-rail-toggle {
  flex: 0 0 auto;
  font-size: 14px;
  padding: 4px 8px;
}

/* Labels (TỔNG QUAN, CRM...) */
.sidebar-label {
  color: #94A3B8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 24px 20px 8px;
}

/* Links */
.sidebar-link {
  color: #475569;
  padding: 10px 20px;
  margin: 0;
  border-radius: 0;
  font-weight: 600;
  font-size: 13px;
  border-left: 3px solid transparent;
  transition: all 0.15s;
}
.sidebar-link .ico {
  color: #94A3B8;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.sidebar-link:hover {
  background: #F8FAFC;
  color: #0F172A;
}
.sidebar-link:hover .ico {
  color: #64748B;
}

/* Active Link */
.workspace-body .sidebar-link.active {
  color: #0291F9;
  background: #EFF6FF;
  border-left: 3px solid #0291F9;
  box-shadow: none;
}
.workspace-body .sidebar-link.active .ico {
  color: #0291F9;
}

/* Fix Button text colors overridden by other selectors */
.btn.btn-primary {
  color: #FFFFFF !important;
}

/* Count Badge */
.nav-count {
  background: #EF4444;
  color: #FFF;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
}

/* User Footer */
.sidebar-bottom {
  border-top: 1px solid #F1F5F9;
  padding: 16px 20px;
}
.sidebar-user {
  border-top: none;
  padding: 0;
  margin: 0;
}
.sidebar-user strong { color: #0F172A; font-weight: 700; }
.sidebar-user small { color: #64748B; }
.user-avatar {
  background: linear-gradient(135deg, #0291F9, #005FAD);
  box-shadow: 0 4px 10px rgba(2, 145, 249, 0.2);
}

/* ==============================
   4. DISTILL ADMIN DASHBOARD
   ============================== */
.workspace-card {
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  background: #FFFFFF;
}

.data-table th {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: #F8FAFC;
  border-bottom: 2px solid #E2E8F0;
  color: #64748B;
  padding: 14px 16px;
  font-weight: 700;
}

.data-table td {
  padding: 16px;
  border-bottom: 1px solid #F1F5F9;
  color: #334155;
  font-size: 13px;
}

.data-table tr:hover {
  background: #F8FAFC !important;
}

.row-edit-form input, .row-edit-form textarea, .row-edit-form select {
  border: 1px solid #CBD5E1;
  border-radius: 8px;
  padding: 10px 14px;
}

.row-edit-form input:focus {
  border-color: #0291F9;
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 145, 249, 0.15);
}

/* ==============================
   5. CLARIFY & ONBOARD (Portal)
   ============================== */
.wb-empty-box {
  background: #F8FAFC;
  border: 2px dashed #CBD5E1;
  padding: 64px 24px;
  border-radius: 20px;
}
.wb-empty-box strong {
  font-size: 18px;
  color: #1E293B;
  margin-top: 16px;
}

/* Focus States */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #BFDBFE !important;
  outline-offset: 2px !important;
}