/* ============================================================
   WD Portal – Design System & Layout
   Version: 1.0.0
   ============================================================ */

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Colors */
  --wd-bg:              #F8FAFC;
  --wd-surface:         #FFFFFF;
  --wd-surface-2:       #F1F5F9;
  --wd-border:          #E2E8F0;
  --wd-border-strong:   #CBD5E1;

  --wd-text:            #0D1117;
  --wd-text-secondary:  #475569;
  --wd-text-muted:      #94A3B8;
  --wd-text-inverse:    #FFFFFF;

  --wd-blue:            #1A56FF;
  --wd-blue-dark:       #0E3ACC;
  --wd-blue-light:      #EAF0FF;
  --wd-blue-mid:        #B8C8FF;

  --wd-green:           #10B981;
  --wd-green-light:     #D1FAE5;
  --wd-amber:           #F59E0B;
  --wd-amber-light:     #FEF3C7;
  --wd-red:             #EF4444;
  --wd-red-light:       #FEE2E2;

  /* Sidebar */
  --wd-sidebar-bg:      #0D1117;
  --wd-sidebar-width:   256px;
  --wd-sidebar-collapsed: 68px;
  --wd-sidebar-text:    #94A3B8;
  --wd-sidebar-active:  #FFFFFF;
  --wd-sidebar-hover:   rgba(255,255,255,0.06);
  --wd-sidebar-active-bg: rgba(26,86,255,0.18);
  --wd-sidebar-border:  rgba(255,255,255,0.07);

  /* Header */
  --wd-header-h:        60px;

  /* Radius */
  --wd-radius-sm:       8px;
  --wd-radius:          12px;
  --wd-radius-lg:       16px;
  --wd-radius-xl:       20px;

  /* Shadows */
  --wd-shadow-sm:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --wd-shadow:          0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --wd-shadow-lg:       0 12px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);

  /* Typography */
  --wd-font:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wd-font-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Transitions */
  --wd-ease:            cubic-bezier(0.4, 0, 0.2, 1);
  --wd-duration-fast:   140ms;
  --wd-duration:        220ms;
  --wd-duration-slow:   360ms;
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.wd-portal-body {
  font-family: var(--wd-font);
  background: var(--wd-bg);
  color: var(--wd-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ── 3. LAYOUT SHELL ─────────────────────────────────────── */
.wd-portal-shell {
  display: flex;
  min-height: 100vh;
}

/* ── 4. SIDEBAR ──────────────────────────────────────────── */
.wd-sidebar {
  width: var(--wd-sidebar-width);
  background: var(--wd-sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  transition: width var(--wd-duration-slow) var(--wd-ease);
  overflow: hidden;
  flex-shrink: 0;
}

.wd-sidebar.collapsed {
  width: var(--wd-sidebar-collapsed);
}

/* Sidebar Brand */
.wd-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  height: var(--wd-header-h);
  border-bottom: 1px solid var(--wd-sidebar-border);
  flex-shrink: 0;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

.wd-sidebar-brand-icon {
  width: 32px;
  height: 32px;
  background: var(--wd-blue);
  border-radius: var(--wd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wd-sidebar-brand-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
}

.wd-sidebar-brand-name {
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.2px;
  opacity: 1;
  transition: opacity var(--wd-duration) var(--wd-ease);
}

.wd-sidebar.collapsed .wd-sidebar-brand-name {
  opacity: 0;
  pointer-events: none;
}

/* Sidebar Nav */
.wd-sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  overflow-y: auto;
  overflow-x: hidden;
}

.wd-sidebar-nav::-webkit-scrollbar { width: 4px; }
.wd-sidebar-nav::-webkit-scrollbar-thumb { background: var(--wd-sidebar-border); border-radius: 99px; }

.wd-nav-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wd-sidebar-text);
  padding: 0 10px;
  margin: 16px 0 6px;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--wd-duration) var(--wd-ease);
}

.wd-sidebar.collapsed .wd-nav-section-label {
  opacity: 0;
}

.wd-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--wd-radius-sm);
  text-decoration: none;
  color: var(--wd-sidebar-text);
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--wd-duration-fast) var(--wd-ease),
              color var(--wd-duration-fast) var(--wd-ease);
  position: relative;
  overflow: hidden;
  margin-bottom: 2px;
}

.wd-nav-item:hover {
  background: var(--wd-sidebar-hover);
  color: #FFFFFF;
  text-decoration: none;
}

.wd-nav-item.active {
  background: var(--wd-sidebar-active-bg);
  color: var(--wd-sidebar-active);
}

.wd-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--wd-blue);
  border-radius: 0 2px 2px 0;
}

.wd-nav-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--wd-radius-sm);
}

.wd-nav-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.wd-nav-label {
  opacity: 1;
  transition: opacity var(--wd-duration) var(--wd-ease);
  flex: 1;
}

.wd-sidebar.collapsed .wd-nav-label {
  opacity: 0;
  pointer-events: none;
}

.wd-nav-badge {
  background: var(--wd-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 99px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
  transition: opacity var(--wd-duration) var(--wd-ease);
}

.wd-sidebar.collapsed .wd-nav-badge {
  opacity: 0;
}

/* Tooltip for collapsed state */
.wd-nav-item .wd-nav-tooltip {
  position: absolute;
  left: calc(var(--wd-sidebar-collapsed) + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--wd-text);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--wd-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wd-duration-fast) var(--wd-ease);
  z-index: 200;
  box-shadow: var(--wd-shadow);
}

.wd-sidebar.collapsed .wd-nav-item:hover .wd-nav-tooltip {
  opacity: 1;
}

/* Sidebar Footer */
.wd-sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--wd-sidebar-border);
  flex-shrink: 0;
}

.wd-sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--wd-radius-sm);
  overflow: hidden;
  transition: background var(--wd-duration-fast) var(--wd-ease);
  cursor: default;
}

.wd-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wd-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.wd-user-info {
  overflow: hidden;
  opacity: 1;
  transition: opacity var(--wd-duration) var(--wd-ease);
}

.wd-sidebar.collapsed .wd-user-info {
  opacity: 0;
}

.wd-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wd-user-role {
  font-size: 11px;
  color: var(--wd-sidebar-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar Toggle Button */
.wd-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--wd-radius-sm);
  background: var(--wd-sidebar-hover);
  border: 1px solid var(--wd-sidebar-border);
  cursor: pointer;
  color: var(--wd-sidebar-text);
  transition: background var(--wd-duration-fast) var(--wd-ease),
              color var(--wd-duration-fast) var(--wd-ease);
  flex-shrink: 0;
  margin-left: auto;
}

.wd-sidebar-toggle:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.wd-sidebar-toggle svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--wd-duration) var(--wd-ease);
}

.wd-sidebar.collapsed .wd-sidebar-toggle svg {
  transform: rotate(180deg);
}

/* ── 5. MAIN CONTENT AREA ────────────────────────────────── */
.wd-main {
  margin-left: var(--wd-sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--wd-duration-slow) var(--wd-ease);
}

.wd-main.sidebar-collapsed {
  margin-left: var(--wd-sidebar-collapsed);
}

/* ── 6. TOP HEADER ───────────────────────────────────────── */
.wd-header {
  height: var(--wd-header-h);
  background: var(--wd-surface);
  border-bottom: 1px solid var(--wd-border);
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 16px;
}

.wd-header-breadcrumb {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wd-header-breadcrumb-root {
  font-size: 13px;
  color: var(--wd-text-muted);
  font-weight: 500;
}

.wd-header-breadcrumb-sep {
  color: var(--wd-border-strong);
  font-size: 16px;
  line-height: 1;
}

.wd-header-breadcrumb-current {
  font-size: 13px;
  font-weight: 600;
  color: var(--wd-text);
}

.wd-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wd-header-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--wd-radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--wd-font);
  cursor: pointer;
  border: 1px solid var(--wd-border);
  background: var(--wd-surface);
  color: var(--wd-text-secondary);
  text-decoration: none;
  transition: all var(--wd-duration-fast) var(--wd-ease);
}

.wd-header-btn:hover {
  background: var(--wd-surface-2);
  color: var(--wd-text);
  border-color: var(--wd-border-strong);
  text-decoration: none;
}

.wd-header-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wd-header-btn--primary {
  background: var(--wd-blue);
  border-color: var(--wd-blue);
  color: #fff;
}

.wd-header-btn--primary:hover {
  background: var(--wd-blue-dark);
  border-color: var(--wd-blue-dark);
  color: #fff;
}

.wd-mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--wd-radius-sm);
  background: transparent;
  border: 1px solid var(--wd-border);
  cursor: pointer;
  color: var(--wd-text-secondary);
  margin-right: 8px;
}

.wd-mobile-menu-toggle svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── 7. PAGE CONTENT ─────────────────────────────────────── */
.wd-content {
  flex: 1;
  padding: 32px 28px 48px;
  max-width: 1200px;
  width: 100%;
}

.wd-page-header {
  margin-bottom: 28px;
}

.wd-page-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--wd-text);
  letter-spacing: -0.4px;
  margin-bottom: 4px;
}

.wd-page-subtitle {
  font-size: 14px;
  color: var(--wd-text-secondary);
  line-height: 1.6;
}

/* ── 8. CARDS ────────────────────────────────────────────── */
.wd-card {
  background: var(--wd-surface);
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius);
  box-shadow: var(--wd-shadow-sm);
  overflow: hidden;
}

.wd-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--wd-border);
}

.wd-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--wd-text);
  letter-spacing: -0.1px;
}

.wd-card-body {
  padding: 22px;
}

.wd-card-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--wd-border);
  background: var(--wd-surface-2);
}

/* ── 9. METRIC CARDS (Dashboard) ─────────────────────────── */
.wd-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.wd-metric-card {
  background: var(--wd-surface);
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius);
  padding: 20px 22px;
  box-shadow: var(--wd-shadow-sm);
  transition: box-shadow var(--wd-duration-fast) var(--wd-ease),
              border-color var(--wd-duration-fast) var(--wd-ease);
}

.wd-metric-card:hover {
  box-shadow: var(--wd-shadow);
  border-color: var(--wd-border-strong);
}

.wd-metric-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wd-text-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wd-metric-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wd-metric-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wd-metric-icon--blue  { background: var(--wd-blue-light);  color: var(--wd-blue); }
.wd-metric-icon--green { background: var(--wd-green-light); color: var(--wd-green); }
.wd-metric-icon--amber { background: var(--wd-amber-light); color: var(--wd-amber); }
.wd-metric-icon--red   { background: var(--wd-red-light);   color: var(--wd-red); }

.wd-metric-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--wd-text);
  letter-spacing: -0.8px;
  line-height: 1;
  margin-bottom: 6px;
}

.wd-metric-change {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wd-metric-change--up   { color: var(--wd-green); }
.wd-metric-change--down { color: var(--wd-red); }
.wd-metric-change--neutral { color: var(--wd-text-muted); }

/* ── 10. DASHBOARD GRID ──────────────────────────────────── */
.wd-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
}

.wd-dashboard-grid--full {
  grid-template-columns: 1fr;
}

/* ── 11. TABLES ──────────────────────────────────────────── */
.wd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.wd-table thead tr {
  border-bottom: 1px solid var(--wd-border);
}

.wd-table th {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wd-text-muted);
  text-align: left;
  background: var(--wd-surface-2);
  white-space: nowrap;
}

.wd-table th:first-child { border-radius: var(--wd-radius-sm) 0 0 0; }
.wd-table th:last-child  { border-radius: 0 var(--wd-radius-sm) 0 0; }

.wd-table td {
  padding: 13px 16px;
  color: var(--wd-text);
  border-bottom: 1px solid var(--wd-border);
  vertical-align: middle;
}

.wd-table tbody tr:last-child td { border-bottom: none; }

.wd-table tbody tr {
  transition: background var(--wd-duration-fast) var(--wd-ease);
}

.wd-table tbody tr:hover {
  background: var(--wd-surface-2);
}

/* ── 12. STATUS BADGES ───────────────────────────────────── */
.wd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.wd-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.wd-badge--active, .wd-badge--open      { background: var(--wd-green-light); color: #059669; }
.wd-badge--pending, .wd-badge--on-hold  { background: var(--wd-amber-light); color: #B45309; }
.wd-badge--closed, .wd-badge--cancelled { background: var(--wd-surface-2);  color: var(--wd-text-muted); }
.wd-badge--cancelled                    { background: var(--wd-red-light);   color: #DC2626; }
.wd-badge--processing                   { background: var(--wd-blue-light);  color: var(--wd-blue); }
.wd-badge--in-progress                  { background: var(--wd-blue-light);  color: var(--wd-blue); }
.wd-badge--resolved                     { background: var(--wd-green-light); color: #059669; }

/* ── 13. BUTTONS ─────────────────────────────────────────── */
.wd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--wd-radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--wd-font);
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--wd-duration-fast) var(--wd-ease);
  white-space: nowrap;
  line-height: 1;
}

.wd-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.wd-btn--primary {
  background: var(--wd-blue);
  color: #fff;
  border-color: var(--wd-blue);
}
.wd-btn--primary:hover {
  background: var(--wd-blue-dark);
  border-color: var(--wd-blue-dark);
  color: #fff;
  text-decoration: none;
}

.wd-btn--secondary {
  background: var(--wd-surface);
  color: var(--wd-text);
  border-color: var(--wd-border);
}
.wd-btn--secondary:hover {
  background: var(--wd-surface-2);
  border-color: var(--wd-border-strong);
  color: var(--wd-text);
  text-decoration: none;
}

.wd-btn--ghost {
  background: transparent;
  color: var(--wd-blue);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.wd-btn--ghost:hover {
  color: var(--wd-blue-dark);
  text-decoration: none;
}

.wd-btn--danger {
  background: var(--wd-surface);
  color: var(--wd-red);
  border-color: var(--wd-border);
}
.wd-btn--danger:hover {
  background: var(--wd-red-light);
  border-color: var(--wd-red);
  color: var(--wd-red);
}

.wd-btn--sm {
  padding: 6px 12px;
  font-size: 12.5px;
}

.wd-btn--lg {
  padding: 12px 24px;
  font-size: 14.5px;
}

.wd-btn:disabled,
.wd-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 14. FORMS ───────────────────────────────────────────── */
.wd-form-group {
  margin-bottom: 18px;
}

.wd-form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wd-text-secondary);
  margin-bottom: 7px;
}

.wd-form-label .wd-form-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--wd-text-muted);
  margin-left: 4px;
}

.wd-form-input,
.wd-form-select,
.wd-form-textarea {
  width: 100%;
  border: 1.5px solid var(--wd-border);
  border-radius: var(--wd-radius);
  padding: 0 14px;
  height: 44px;
  font-size: 14px;
  font-family: var(--wd-font);
  color: var(--wd-text);
  background: #FAFBFF;
  outline: none;
  appearance: none;
  transition: border-color var(--wd-duration-fast) var(--wd-ease),
              box-shadow var(--wd-duration-fast) var(--wd-ease),
              background var(--wd-duration-fast) var(--wd-ease);
}

.wd-form-input:focus,
.wd-form-select:focus,
.wd-form-textarea:focus {
  border-color: var(--wd-blue);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(26,86,255,0.1);
}

.wd-form-input::placeholder,
.wd-form-textarea::placeholder {
  color: var(--wd-text-muted);
}

.wd-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;
  cursor: pointer;
}

.wd-form-textarea {
  height: auto;
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.6;
}

.wd-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.wd-form-hint {
  font-size: 12px;
  color: var(--wd-text-muted);
  margin-top: 5px;
  line-height: 1.5;
}

.wd-form-error {
  font-size: 12px;
  color: var(--wd-red);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Upload Box */
.wd-upload-box {
  border: 2px dashed var(--wd-border);
  border-radius: var(--wd-radius);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--wd-duration-fast) var(--wd-ease),
              background var(--wd-duration-fast) var(--wd-ease);
  position: relative;
}

.wd-upload-box:hover,
.wd-upload-box.drag-over {
  border-color: var(--wd-blue);
  background: var(--wd-blue-light);
}

.wd-upload-box input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.wd-upload-icon {
  width: 40px;
  height: 40px;
  background: var(--wd-blue-light);
  border-radius: var(--wd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.wd-upload-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--wd-blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wd-upload-text {
  font-size: 13.5px;
  color: var(--wd-text-secondary);
  line-height: 1.6;
}

.wd-upload-text strong {
  color: var(--wd-blue);
}

.wd-upload-sub {
  font-size: 11.5px;
  color: var(--wd-text-muted);
  margin-top: 4px;
}

/* ── 15. ALERT / NOTICE ──────────────────────────────────── */
.wd-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--wd-radius);
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.wd-alert svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 2px;
}

.wd-alert--success { background: var(--wd-green-light); color: #065F46; border-left: 3px solid var(--wd-green); }
.wd-alert--warning { background: var(--wd-amber-light); color: #92400E; border-left: 3px solid var(--wd-amber); }
.wd-alert--error   { background: var(--wd-red-light);   color: #991B1B; border-left: 3px solid var(--wd-red); }
.wd-alert--info    { background: var(--wd-blue-light);  color: #1E3A8A; border-left: 3px solid var(--wd-blue); }

/* WooCommerce native notices */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  border-radius: var(--wd-radius) !important;
  border: none !important;
  padding: 14px 16px !important;
  font-size: 13.5px !important;
  font-family: var(--wd-font) !important;
  list-style: none !important;
  margin: 0 0 20px !important;
}

.woocommerce-message {
  background: var(--wd-green-light) !important;
  color: #065F46 !important;
  border-left: 3px solid var(--wd-green) !important;
}

.woocommerce-error {
  background: var(--wd-red-light) !important;
  color: #991B1B !important;
  border-left: 3px solid var(--wd-red) !important;
}

.woocommerce-info {
  background: var(--wd-blue-light) !important;
  color: #1E3A8A !important;
  border-left: 3px solid var(--wd-blue) !important;
}

/* ── 16. EMPTY STATES ────────────────────────────────────── */
.wd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 56px 32px;
}

.wd-empty-state-icon {
  width: 60px;
  height: 60px;
  background: var(--wd-surface-2);
  border-radius: var(--wd-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.wd-empty-state-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--wd-text-muted);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wd-empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--wd-text);
  margin-bottom: 6px;
}

.wd-empty-state-text {
  font-size: 13.5px;
  color: var(--wd-text-muted);
  max-width: 320px;
  line-height: 1.65;
  margin-bottom: 20px;
}

/* ── 17. MODAL ───────────────────────────────────────────── */
.wd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--wd-duration) var(--wd-ease);
  backdrop-filter: blur(4px);
}

.wd-modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.wd-modal {
  background: var(--wd-surface);
  border-radius: var(--wd-radius-xl);
  box-shadow: var(--wd-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--wd-duration) var(--wd-ease);
}

.wd-modal-overlay.open .wd-modal {
  transform: translateY(0) scale(1);
}

.wd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--wd-border);
}

.wd-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--wd-text);
  letter-spacing: -0.2px;
}

.wd-modal-close {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wd-radius-sm);
  border: 1px solid var(--wd-border);
  background: transparent;
  cursor: pointer;
  color: var(--wd-text-muted);
  transition: all var(--wd-duration-fast) var(--wd-ease);
}

.wd-modal-close:hover {
  background: var(--wd-surface-2);
  color: var(--wd-text);
}

.wd-modal-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.wd-modal-body {
  padding: 24px;
}

.wd-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--wd-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

/* ── 18. SUBSCRIPTION ITEMS ──────────────────────────────── */
.wd-subscription-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--wd-border);
  gap: 16px;
}

.wd-subscription-item:last-child { border-bottom: none; }

.wd-subscription-info { flex: 1; min-width: 0; }

.wd-subscription-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--wd-text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wd-subscription-meta {
  font-size: 12.5px;
  color: var(--wd-text-muted);
}

.wd-subscription-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── 19. TICKET ITEMS ────────────────────────────────────── */
.wd-ticket-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--wd-border);
  cursor: pointer;
  transition: background var(--wd-duration-fast) var(--wd-ease);
}

.wd-ticket-item:last-child { border-bottom: none; }

.wd-ticket-item:hover { background: var(--wd-surface-2); margin: 0 -22px; padding: 16px 22px; }

.wd-ticket-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.wd-ticket-dot--open       { background: var(--wd-green); }
.wd-ticket-dot--in-progress { background: var(--wd-blue); }
.wd-ticket-dot--pending    { background: var(--wd-amber); }
.wd-ticket-dot--closed     { background: var(--wd-border-strong); }

.wd-ticket-content { flex: 1; min-width: 0; }

.wd-ticket-subject {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--wd-text);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wd-ticket-meta {
  font-size: 12px;
  color: var(--wd-text-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.wd-ticket-id {
  font-family: var(--wd-font-mono);
  font-size: 11px;
  color: var(--wd-text-muted);
  background: var(--wd-surface-2);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--wd-border);
}

/* ── 20. ASSET CARDS ─────────────────────────────────────── */
.wd-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.wd-asset-card {
  background: var(--wd-surface);
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius);
  padding: 16px 18px;
  transition: box-shadow var(--wd-duration-fast) var(--wd-ease),
              border-color var(--wd-duration-fast) var(--wd-ease);
}

.wd-asset-card:hover {
  box-shadow: var(--wd-shadow);
  border-color: var(--wd-border-strong);
}

.wd-asset-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.wd-asset-type-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--wd-blue-light);
  color: var(--wd-blue);
}

.wd-asset-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--wd-text);
  margin-bottom: 4px;
}

.wd-asset-url {
  font-size: 12px;
  color: var(--wd-blue);
  font-family: var(--wd-font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}

.wd-asset-url:hover { text-decoration: underline; }

.wd-asset-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--wd-border);
}

/* ── 21. QUICK ACTIONS (Dashboard) ──────────────────────── */
.wd-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.wd-quick-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--wd-radius-sm);
  border: 1px solid var(--wd-border);
  background: var(--wd-surface);
  text-decoration: none;
  color: var(--wd-text);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--wd-duration-fast) var(--wd-ease);
}

.wd-quick-action:hover {
  background: var(--wd-blue-light);
  border-color: var(--wd-blue-mid);
  color: var(--wd-blue);
  text-decoration: none;
}

.wd-quick-action-icon {
  width: 32px;
  height: 32px;
  background: var(--wd-surface-2);
  border-radius: var(--wd-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--wd-duration-fast) var(--wd-ease);
}

.wd-quick-action:hover .wd-quick-action-icon {
  background: var(--wd-blue-mid);
}

.wd-quick-action-icon svg {
  width: 15px;
  height: 15px;
  stroke: var(--wd-text-secondary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--wd-duration-fast) var(--wd-ease);
}

.wd-quick-action:hover .wd-quick-action-icon svg {
  stroke: var(--wd-blue);
}

/* ── 22. SUPPORT TICKET FORM ─────────────────────────────── */
.wd-support-steps {
  counter-reset: support-step;
}

.wd-support-step {
  display: flex;
  gap: 20px;
  margin-bottom: 28px;
}

.wd-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wd-blue-light);
  color: var(--wd-blue);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── 23. CHOICE / OPTION CARDS (Support Form) ────────────── */
.wd-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.wd-choice-card {
  border: 1.5px solid var(--wd-border);
  border-radius: var(--wd-radius);
  padding: 16px 14px;
  cursor: pointer;
  background: #FAFBFF;
  transition: all var(--wd-duration-fast) var(--wd-ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  user-select: none;
}

.wd-choice-card:hover {
  border-color: var(--wd-blue-mid);
  background: var(--wd-blue-light);
  transform: translateY(-1px);
  box-shadow: var(--wd-shadow);
}

.wd-choice-card.selected {
  border-color: var(--wd-blue);
  background: var(--wd-blue-light);
}

.wd-choice-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--wd-radius-sm);
  background: var(--wd-surface);
  border: 1.5px solid var(--wd-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--wd-duration-fast) var(--wd-ease);
}

.wd-choice-card:hover .wd-choice-icon,
.wd-choice-card.selected .wd-choice-icon {
  background: var(--wd-blue);
  border-color: var(--wd-blue);
}

.wd-choice-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--wd-blue);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--wd-duration-fast) var(--wd-ease);
}

.wd-choice-card:hover .wd-choice-icon svg,
.wd-choice-card.selected .wd-choice-icon svg {
  stroke: #fff;
}

.wd-choice-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--wd-text);
  line-height: 1.4;
}

/* ── 24. ACCOUNT SETTINGS ────────────────────────────────── */
.wd-settings-section {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--wd-border);
}

.wd-settings-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.wd-settings-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 4px;
  letter-spacing: -0.1px;
}

.wd-settings-section-desc {
  font-size: 13px;
  color: var(--wd-text-muted);
  margin-bottom: 20px;
  line-height: 1.6;
}

/* ── 25. WOOCOMMERCE OVERRIDES ───────────────────────────── */
/* Strip WC's default layout when inside our portal */
.wd-portal-body .woocommerce-MyAccount-navigation {
  display: none !important;
}

.wd-portal-body .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}

.wd-portal-body .woocommerce {
  max-width: none !important;
}

/* WC Orders Table */
.wd-portal-body .woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.wd-portal-body .woocommerce-orders-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wd-text-muted);
  padding: 10px 16px;
  border-bottom: 1px solid var(--wd-border);
  text-align: left;
  background: var(--wd-surface-2);
}

.wd-portal-body .woocommerce-orders-table td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--wd-border);
  vertical-align: middle;
}

.wd-portal-body .woocommerce-orders-table tbody tr:hover {
  background: var(--wd-surface-2);
}

/* WC Addresses */
.wd-portal-body .woocommerce-Address {
  background: var(--wd-surface);
  border: 1px solid var(--wd-border);
  border-radius: var(--wd-radius);
  padding: 20px 22px;
}

.wd-portal-body .woocommerce-Address-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--wd-text);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--wd-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wd-portal-body .woocommerce-Address-title a {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--wd-blue);
}

/* WC Form Fields */
.wd-portal-body .woocommerce-form-row input,
.wd-portal-body .woocommerce-account input[type="text"],
.wd-portal-body .woocommerce-account input[type="email"],
.wd-portal-body .woocommerce-account input[type="password"],
.wd-portal-body .woocommerce-account input[type="tel"],
.wd-portal-body .woocommerce-account select,
.wd-portal-body .woocommerce-account textarea {
  border: 1.5px solid var(--wd-border) !important;
  border-radius: var(--wd-radius) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  font-family: var(--wd-font) !important;
  color: var(--wd-text) !important;
  background: #FAFBFF !important;
  outline: none !important;
  box-shadow: none !important;
  height: 44px !important;
  transition: border-color var(--wd-duration-fast) var(--wd-ease),
              box-shadow var(--wd-duration-fast) var(--wd-ease) !important;
  width: 100% !important;
}

.wd-portal-body .woocommerce-account input:focus,
.wd-portal-body .woocommerce-account select:focus,
.wd-portal-body .woocommerce-account textarea:focus {
  border-color: var(--wd-blue) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(26,86,255,0.1) !important;
}

.wd-portal-body .woocommerce-account label {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--wd-text-secondary) !important;
  margin-bottom: 7px !important;
  display: block !important;
}

/* WC Buttons */
.wd-portal-body .woocommerce-account .button,
.wd-portal-body .woocommerce-account button[type="submit"],
.wd-portal-body .woocommerce button.button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 18px !important;
  border-radius: var(--wd-radius-sm) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  font-family: var(--wd-font) !important;
  background: var(--wd-blue) !important;
  color: #fff !important;
  border: 1px solid var(--wd-blue) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background var(--wd-duration-fast) var(--wd-ease) !important;
  line-height: 1 !important;
  height: auto !important;
}

.wd-portal-body .woocommerce-account .button:hover,
.wd-portal-body .woocommerce-account button[type="submit"]:hover {
  background: var(--wd-blue-dark) !important;
  border-color: var(--wd-blue-dark) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ── 26. LOADING STATES ──────────────────────────────────── */
.wd-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.wd-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--wd-border);
  border-top-color: var(--wd-blue);
  border-radius: 50%;
  animation: wd-spin 0.7s linear infinite;
}

@keyframes wd-spin { to { transform: rotate(360deg); } }

/* ── 27. MOBILE OVERLAY ──────────────────────────────────── */
.wd-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 90;
  backdrop-filter: blur(2px);
}

/* ── 28. RESPONSIVE BREAKPOINTS ──────────────────────────── */

/* Large desktop: ≥1400px */
@media (min-width: 1400px) {
  .wd-content { padding: 36px 40px 60px; }
}

/* Tablet landscape: 1024px–1199px */
@media (max-width: 1199px) {
  .wd-dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablet: 768px–1023px */
@media (max-width: 1023px) {
  :root {
    --wd-sidebar-width: 220px;
  }

  .wd-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .wd-asset-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile: ≤767px */
@media (max-width: 767px) {
  .wd-sidebar {
    transform: translateX(-100%);
    width: var(--wd-sidebar-width) !important;
    transition: transform var(--wd-duration-slow) var(--wd-ease);
    box-shadow: var(--wd-shadow-lg);
  }

  .wd-sidebar.mobile-open {
    transform: translateX(0);
  }

  .wd-sidebar-overlay {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--wd-duration) var(--wd-ease);
  }

  .wd-sidebar-overlay.visible {
    opacity: 1;
    pointer-events: all;
  }

  .wd-main {
    margin-left: 0 !important;
  }

  .wd-mobile-menu-toggle {
    display: flex;
  }

  .wd-content {
    padding: 20px 16px 40px;
  }

  .wd-header {
    padding: 0 16px;
  }

  .wd-metrics-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .wd-form-row-2 {
    grid-template-columns: 1fr;
  }

  .wd-quick-actions {
    grid-template-columns: 1fr;
  }

  .wd-asset-grid {
    grid-template-columns: 1fr;
  }

  .wd-modal {
    max-width: 100%;
    border-radius: var(--wd-radius-lg) var(--wd-radius-lg) 0 0;
  }

  .wd-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .wd-header-actions .wd-header-btn:not(.wd-header-btn--primary) {
    display: none;
  }

  .wd-table th, .wd-table td {
    padding: 10px 12px;
    font-size: 12.5px;
  }
}

/* Small mobile: ≤480px */
@media (max-width: 480px) {
  .wd-metrics-grid {
    grid-template-columns: 1fr;
  }

  .wd-choice-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wd-page-title {
    font-size: 19px;
  }
}

/* ── 29. UTILITY CLASSES ─────────────────────────────────── */
.wd-flex         { display: flex; }
.wd-flex-center  { display: flex; align-items: center; justify-content: center; }
.wd-gap-4        { gap: 4px; }
.wd-gap-8        { gap: 8px; }
.wd-gap-12       { gap: 12px; }
.wd-gap-16       { gap: 16px; }
.wd-mt-0         { margin-top: 0; }
.wd-mt-8         { margin-top: 8px; }
.wd-mt-16        { margin-top: 16px; }
.wd-mt-24        { margin-top: 24px; }
.wd-mb-0         { margin-bottom: 0; }
.wd-mb-16        { margin-bottom: 16px; }
.wd-mb-24        { margin-bottom: 24px; }
.wd-text-muted   { color: var(--wd-text-muted); }
.wd-text-small   { font-size: 12.5px; }
.wd-mono         { font-family: var(--wd-font-mono); font-size: 0.9em; }
.wd-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Divider */
.wd-divider {
  height: 1px;
  background: var(--wd-border);
  margin: 24px 0;
  border: none;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--wd-blue);
  outline-offset: 2px;
}

/* Scrollbar */
.wd-portal-body ::-webkit-scrollbar       { width: 6px; height: 6px; }
.wd-portal-body ::-webkit-scrollbar-track { background: transparent; }
.wd-portal-body ::-webkit-scrollbar-thumb { background: var(--wd-border-strong); border-radius: 99px; }
.wd-portal-body ::-webkit-scrollbar-thumb:hover { background: var(--wd-text-muted); }

/* ==========================================================================
   SAAS LAYOUT FORMS & BUTTON REFINEMENTS
   ========================================================================== */

/* Fix layout breaking and overlap inside data tables */
.wd-portal-table, table.wd-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 16px !important;
}

.wd-portal-table th, table.wd-table th {
  background: var(--wd-surface-2) !important;
  color: var(--wd-text-secondary) !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
}

/* Enforce modern SaaS style variables on core inputs */
input, select, textarea, .wd-field input {
  width: 100% !important;
  background: var(--wd-surface) !important;
  border: 1px solid var(--wd-border) !important;
  border-radius: var(--wd-radius-sm) !important;
  padding: 10px 14px !important;
  color: var(--wd-text) !important;
  font-family: var(--wd-font) !important;
  font-size: 0.92rem !important;
  margin: 6px 0 14px 0 !important; /* Clears row overlapping */
  box-shadow: var(--wd-shadow-sm) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--wd-blue) !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 255, 0.12) !important;
  outline: none !important;
}

/* Ensure data boxes render cleanly */
.wd-portal-container, .wd-card {
  background: var(--wd-surface) !important;
  border: 1px solid var(--wd-border) !important;
  border-radius: var(--wd-radius) !important;
  box-shadow: var(--wd-shadow-sm) !important;
  padding: 24px !important;
}