/* ==========================================================================
   DRAGON STUDIO — UI/UX Design System (prototype → production)
   Self-contained; does NOT depend on Tailwind runtime utilities.
   Tokens follow the approved prototype palette.
   ========================================================================== */

.dragon-studio {
  /* Palette — Dragon blue scale */
  --dg-50:  #F0F7FF;
  --dg-100: #DBEDFF;
  --dg-200: #B9DBFF;
  --dg-300: #8BC4FF;
  --dg-400: #4FA8F8;
  --dg-500: #0E83EA;
  --dg-600: #0267C7;
  --dg-700: #035391;
  --dg-800: #0C3A6D;
  --dg-900: #0A2540;
  --dg-950: #061626;

  /* Gold accent */
  --dg-gold-400: #FBBF24;
  --dg-gold-500: #F59E0B;
  --dg-gold-600: #D97706;

  /* Success / status */
  --dg-teal-400: #2DD4BF;
  --dg-teal-500: #14B8A6;
  --dg-teal-600: #0D9488;
  --dg-amber-400: #FBBF24;
  --dg-amber-500: #F59E0B;
  --dg-amber-600: #D97706;
  --dg-slate-100: #F1F5F9;
  --dg-slate-200: #E2E8F0;
  --dg-slate-400: #94A3B8;
  --dg-slate-500: #64748B;
  --dg-slate-700: #334155;
  --dg-slate-900: #0F172A;
  --dg-purple-500: #8B5CF6;
  --dg-red-500:   #EF4444;
  --dg-red-600:   #DC2626;

  /* Surfaces */
  --dg-bg:        #F8FAFC;
  --dg-surface:   #FFFFFF;
  --dg-border:    #E5EAF0;
  --dg-text:      #0F172A;
  --dg-text-muted:#64748B;

  /* Radii */
  --dg-r-sm: 8px;
  --dg-r-md: 12px;
  --dg-r-lg: 16px;
  --dg-r-full: 9999px;

  /* Shadow */
  --dg-shadow-sm: 0 1px 2px rgba(6,22,38,.06);
  --dg-shadow-md: 0 6px 20px rgba(6,22,38,.10);
  --dg-shadow-lg: 0 18px 50px rgba(6,22,38,.18);

  font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif;
  color: var(--dg-text);
  background: var(--dg-bg);
  border-radius: var(--dg-r-lg);
}

/* Dark mode overrides (system theme inheritance & manual toggle) */
.dragon-studio.theme-dark,
[data-theme="dark"] .dragon-studio,
[data-bs-theme="dark"] .dragon-studio,
.odoo-app.dark-mode .dragon-studio,
.dark-mode .dragon-studio,
html[data-theme="dark"] .dragon-studio,
body[data-theme="dark"] .dragon-studio,
body.dark-mode .dragon-studio,
.dragon-studio.theme-dark .dg-drawer,
[data-theme="dark"] .dg-drawer,
[data-bs-theme="dark"] .dg-drawer,
.odoo-app.dark-mode .dg-drawer,
.dark-mode .dg-drawer,
html[data-theme="dark"] .dg-drawer,
body[data-theme="dark"] .dg-drawer {
  --dg-bg:         #061626;
  --dg-surface:    #0E1B2E;
  --dg-border:     #1E2F45;
  --dg-text:       #E6EDF7;
  --dg-text-muted: #8CA3BD;
  --dg-50:         #102238;
  --dg-100:        #182e4b;
  --dg-200:        #233f63;
  --dg-slate-100:  #12233A;
  --dg-slate-200:  #1B2F49;
  --dg-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
  --dg-shadow-md:  0 6px 20px rgba(0,0,0,.5);
}

/* ===== Page shell ===== */
.dg-shell {
  padding: 20px;
  max-width: 1440px;
  margin: 0 auto;
}
.dg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dg-header-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--dg-600);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.dg-header-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--dg-text);
  margin: 0;
}
.dg-header-sub {
  font-size: 13px;
  color: var(--dg-text-muted);
  margin: 4px 0 0;
}

/* ===== Nav pills (hub ↔ views) ===== */
.dg-nav {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-md);
  margin-bottom: 20px;
  overflow-x: auto;
}
.dg-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--dg-r-sm);
  border: none;
  background: transparent;
  color: var(--dg-text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.dg-nav-pill:hover { background: var(--dg-slate-100); color: var(--dg-text); }
.dg-nav-pill.active {
  background: var(--dg-500);
  color: #fff;
}
.dg-nav-pill.active .dg-nav-badge {
  background: rgba(255,255,255,.25);
  color: #fff;
}
.dg-nav-badge {
  background: var(--dg-slate-200);
  color: var(--dg-text-muted);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--dg-r-full);
  padding: 1px 8px;
}

/* ===== Cards & toolbars ===== */
.dg-card {
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-md);
  box-shadow: var(--dg-shadow-sm);
  overflow: hidden;
}
.dg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--dg-border);
}
.dg-card-title { font-size: 15px; font-weight: 700; color: var(--dg-text); margin: 0; }
.dg-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dg-search {
  min-width: 240px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-sm);
}
.dg-search i { color: var(--dg-text-muted); font-size: 13px; }
.dg-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  color: var(--dg-text);
  flex: 1;
  width: 100%;
}

/* ===== Buttons ===== */
.dg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--dg-r-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border .15s, transform .05s;
  white-space: nowrap;
}
.dg-btn:active { transform: translateY(1px); }
.dg-btn-primary { background: var(--dg-500); color: #fff; }
.dg-btn-primary:hover { background: var(--dg-600); }
.dg-btn-secondary { background: var(--dg-surface); color: var(--dg-text); border-color: var(--dg-border); }
.dg-btn-secondary:hover { background: var(--dg-slate-100); }
.dg-btn-ghost { background: transparent; color: var(--dg-text-muted); }
.dg-btn-ghost:hover { background: var(--dg-slate-100); color: var(--dg-text); }
.dg-btn-danger { background: var(--dg-red-500); color: #fff; }
.dg-btn-danger:hover { background: var(--dg-red-600); }
.dg-btn-success { background: var(--dg-teal-500); color: #fff; }
.dg-btn-success:hover { background: var(--dg-teal-600); }
.dg-btn-amber { background: var(--dg-amber-500); color: #fff; }
.dg-btn-amber:hover { background: var(--dg-amber-600); }
.dg-btn-sm { padding: 5px 10px; font-size: 12px; }
.dg-btn[disabled] { opacity: .5; cursor: not-allowed; }

.dg-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--dg-r-sm);
  border: none;
  background: transparent;
  color: var(--dg-text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dg-btn-icon:hover { background: var(--dg-slate-100); color: var(--dg-text); }
.dg-btn-icon.danger:hover { background: #FEE2E2; color: var(--dg-red-600); }
.dg-btn-icon.primary:hover { background: var(--dg-50); color: var(--dg-600); }

/* ===== Selects ===== */
.dg-select {
  padding: 8px 12px;
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-sm);
  background: var(--dg-surface);
  color: var(--dg-text);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ===== Status pills ===== */
.dg-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: var(--dg-r-full);
  font-size: 12px;
  font-weight: 700;
}
.dg-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.dg-pill.published { background: rgba(20,184,166,.12); color: var(--dg-teal-600); }
.dg-pill.reviewed   { background: rgba(245,158,11,.14); color: var(--dg-amber-600); }
.dg-pill.draft      { background: var(--dg-slate-200); color: var(--dg-slate-500); }
.dg-pill.archived   { background: rgba(100,116,139,.15); color: var(--dg-slate-500); }

/* Source type chips */
.dg-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--dg-r-full);
  font-size: 11px;
  font-weight: 700;
}
.dg-type.static { background: rgba(139,92,246,.12); color: var(--dg-purple-500); }
.dg-type.entity { background: rgba(14,131,234,.12); color: var(--dg-600); }
.dg-type.query  { background: rgba(20,184,166,.12); color: var(--dg-teal-600); }

/* ===== Table ===== */
.dg-table { width: 100%; border-collapse: collapse; }
.dg-table th {
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--dg-text-muted);
  padding: 10px 18px;
  border-bottom: 1px solid var(--dg-border);
  background: var(--dg-surface);
}
.dg-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--dg-border);
  font-size: 13px;
  color: var(--dg-text);
  vertical-align: middle;
}
.dg-table tbody tr { transition: background .1s; }
.dg-table tbody tr:hover { background: var(--dg-50); }
.dg-table .dg-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.dg-cell-main { font-weight: 700; color: var(--dg-text); }
.dg-cell-sub { font-size: 12px; color: var(--dg-text-muted); }

/* ===== Empty state ===== */
.dg-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--dg-text-muted);
}
.dg-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: var(--dg-r-full);
  background: var(--dg-slate-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--dg-500);
}
.dg-empty-title { font-size: 16px; font-weight: 700; color: var(--dg-text); margin-bottom: 4px; }
.dg-empty-text { font-size: 13px; max-width: 400px; margin: 0 auto 16px; }

/* ===== Drawer (side, right-anchored for RTL) ===== */
.dg-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6,22,38,.5);
  z-index: 1040;
  animation: dg-fade .2s ease;
}
.dg-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(640px, 100vw);
  background: var(--dg-surface);
  box-shadow: var(--dg-shadow-lg);
  z-index: 1041;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
  animation: dg-drawer-in .25s ease forwards;
}
@keyframes dg-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes dg-fade { from { opacity: 0; } to { opacity: 1; } }

.dg-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--dg-border);
}
.dg-drawer-title { font-size: 17px; font-weight: 800; color: var(--dg-text); margin: 0; }
.dg-drawer-sub { font-size: 12px; color: var(--dg-text-muted); margin-top: 2px; }
.dg-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.dg-drawer-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--dg-border);
}
.dg-drawer-foot .dg-foot-left { margin-right: auto; }

/* ===== Wizard steps ===== */
.dg-steps {
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--dg-slate-100);
  border-radius: var(--dg-r-md);
  margin-bottom: 20px;
}
.dg-step {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--dg-r-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--dg-text-muted);
}
.dg-step .dg-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #CDD8E5;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  margin-inline-end: 6px;
}
.dg-step.active { background: var(--dg-surface); color: var(--dg-text); box-shadow: var(--dg-shadow-sm); }
.dg-step.active .dg-step-num { background: var(--dg-500); }
.dg-step.done .dg-step-num { background: var(--dg-teal-500); }

/* ===== Form fields ===== */
.dg-field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.dg-field label { font-size: 12px; font-weight: 700; color: var(--dg-text); }
.dg-field label .req { color: var(--dg-red-500); }
.dg-input, .dg-textarea {
  padding: 9px 12px;
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-sm);
  background: var(--dg-surface);
  color: var(--dg-text);
  font-family: inherit;
  font-size: 13px;
  width: 100%;
}
.dg-input:focus, .dg-textarea:focus { outline: 2px solid var(--dg-500); border-color: var(--dg-500); }
.dg-textarea { min-height: 72px; resize: vertical; }
.dg-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }

/* Type choice cards */
.dg-choice {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1.5px solid var(--dg-border);
  border-radius: var(--dg-r-md);
  cursor: pointer;
  transition: border .15s, box-shadow .15s, background .15s;
  background: var(--dg-surface);
}
.dg-choice:hover { box-shadow: var(--dg-shadow-sm); }
.dg-choice.selected { border-color: var(--dg-500); background: var(--dg-50); }
.dg-choice-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--dg-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  margin-bottom: 6px;
}
.dg-choice-icon.static { background: var(--dg-purple-500); }
.dg-choice-icon.entity { background: var(--dg-500); }
.dg-choice-icon.query  { background: var(--dg-teal-500); }
.dg-choice-title { font-size: 14px; font-weight: 700; color: var(--dg-text); }
.dg-choice-text { font-size: 12px; color: var(--dg-text-muted); }

/* Static values rows */
.dg-value-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.dg-value-row .dg-input { height: 38px; }

/* ===== Alert / toast ===== */
.dg-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--dg-r-sm);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}
.dg-alert.error { background: #FEE2E2; color: #B91C1C; border: 1px solid #FECACA; }
.dg-alert.success { background: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0; }
.dg-alert.info { background: var(--dg-50); color: var(--dg-700); border: 1px solid var(--dg-100); }

/* ===== Mini grid count chips ===== */
.dg-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-md);
}
.dg-stat-value { font-size: 22px; font-weight: 800; color: var(--dg-500); }
.dg-stat-label { font-size: 12px; color: var(--dg-text-muted); }

/* Loading */
.dg-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 40px; color: var(--dg-text-muted); font-size: 14px; }
.dg-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--dg-border);
  border-top-color: var(--dg-500);
  border-radius: 50%;
  animation: dg-spin .7s linear infinite;
}
@keyframes dg-spin { to { transform: rotate(360deg); } }

/* ===== Tool cards (studio hub) ===== */
.dg-tool-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-md);
  box-shadow: var(--dg-shadow-sm);
  text-decoration: none;
  color: var(--dg-text);
  transition: box-shadow .15s, transform .1s, border .15s;
  position: relative;
}
.dg-tool-card:hover {
  box-shadow: var(--dg-shadow-md);
  transform: translateY(-2px);
  border-color: var(--dg-500);
}
.dg-tool-card-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--dg-r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.dg-tool-card-title { font-size: 14px; font-weight: 800; color: var(--dg-text); margin-bottom: 4px; }
.dg-tool-card-text { font-size: 12px; color: var(--dg-text-muted); line-height: 1.5; }
.dg-tool-card-arrow {
  position: absolute;
  top: 18px;
  left: 16px;
  color: var(--dg-slate-400);
  font-size: 13px;
}

/* ===== Field layout card (Page Field Layout) ===== */
.dg-field-card {
  background: var(--dg-surface);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-r-md);
  padding: 14px;
  box-shadow: var(--dg-shadow-sm);
  transition: border .15s, box-shadow .15s;
}
.dg-field-card:hover { border-color: var(--dg-500); box-shadow: var(--dg-shadow-md); }
.dg-field-card .dg-input { font-size: 12px; padding: 6px 10px; }

@media (max-width: 720px) {
  .dg-value-row { grid-template-columns: 1fr 1fr; }
  .dg-header-title { font-size: 19px; }
  .dg-search { min-width: 100%; }
}