/* Dragonfly CPD consistency layer — v48
   Purpose: one shared visual language across live app, manager/admin and demo surfaces.
   This file is loaded last so legacy page-specific CSS can stay in place while the
   shared component system wins the final cascade. */
:root{
  --df-green:#274640;
  --df-green-dark:#1C3832;
  --df-green-mid:#31564D;
  --df-green-soft:#E3EEE9;
  --df-gold:#C9970C;
  --df-gold-dark:#A07A08;
  --df-gold-soft:#F8EBC6;
  --df-cream:#F7F1E6;
  --df-cream-2:#F3ECDE;
  --df-panel:#FFFDF7;
  --df-white:#FFFFFF;
  --df-line:#E5DCCB;
  --df-line-strong:#D5C8B2;
  --df-text:#1A2E1E;
  --df-muted:#6B6660;
  --df-danger:#B84A3A;
  --df-danger-soft:#F7E5E0;
  --df-success:#2F6B4F;
  --df-success-soft:#E3EEE9;
  --df-blue:#315F8C;
  --df-blue-soft:#EFF6FF;
  --df-radius-sm:10px;
  --df-radius:14px;
  --df-radius-lg:22px;
  --df-shadow:0 10px 30px rgba(26,46,30,.10);
  --df-shadow-lg:0 18px 55px rgba(26,46,30,.16);
  --df-focus:0 0 0 4px rgba(201,151,12,.18);
  --green:var(--df-green);
  --green-dark:var(--df-green-dark);
  --green-light:var(--df-green-soft);
  --gold:var(--df-gold);
  --gold-dark:var(--df-gold-dark);
  --gold-light:var(--df-gold-soft);
  --white:var(--df-panel);
  --off-white:var(--df-cream-2);
  --panel:var(--df-panel);
  --gray-light:var(--df-line);
  --text:var(--df-text);
  --text-muted:var(--df-muted);
  --danger:var(--df-danger);
  --danger-soft:var(--df-danger-soft);
  --success:var(--df-success);
  --success-soft:var(--df-success-soft);
  --radius:var(--df-radius);
  --radius-lg:var(--df-radius-lg);
  --shadow:var(--df-shadow);
  --shadow-lg:var(--df-shadow-lg);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--font,'Nunito',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);background:linear-gradient(180deg,var(--df-cream) 0%,var(--df-cream-2) 100%);color:var(--df-text);line-height:1.55;}
a{color:var(--df-green);font-weight:800;text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:0;box-shadow:var(--df-focus)!important;}
/* Shell and navigation */
nav,.top-nav,.app-nav{background:var(--df-green-dark)!important;border-bottom:1px solid rgba(255,255,255,.10)!important;box-shadow:0 8px 28px rgba(0,0,0,.16)!important;}
.nav-brand img{height:48px!important;width:auto!important;object-fit:contain!important;}
.nav-right{gap:.75rem!important;}
.nav-user,.nav-user-name,.nav-user-role{color:rgba(255,253,247,.82)!important;}
.btn-nav,.btn-nav-ghost,.nav-back,.account-menu-trigger{border:1px solid rgba(255,255,255,.24)!important;background:rgba(255,255,255,.08)!important;color:#FFFDF7!important;border-radius:999px!important;min-height:40px!important;padding:.52rem .9rem!important;font-weight:900!important;}
.btn-nav:hover,.btn-nav-ghost:hover,.nav-back:hover,.account-menu-trigger:hover{background:rgba(255,255,255,.15)!important;text-decoration:none!important;}
.account-menu,.user-menu,.dropdown-menu{border:1px solid var(--df-line)!important;border-radius:18px!important;box-shadow:var(--df-shadow-lg)!important;background:#fff!important;overflow:hidden!important;}
.account-menu a,.account-menu button,.user-menu a,.user-menu button,.dropdown-menu a,.dropdown-menu button{border-radius:0!important;font-weight:800!important;}
main,.layout,.container,.page-wrap{width:min(1180px,calc(100% - 2rem));margin-left:auto;margin-right:auto;}
/* Hero blocks */
.hero,.page-hero,.dashboard-hero,.manager-hero{background:linear-gradient(135deg,var(--df-green-dark),var(--df-green))!important;color:#FFFDF7!important;border-radius:0!important;}
.hero h1,.page-hero h1,.dashboard-hero h1,.manager-hero h1,.hero-name{color:#FFFDF7!important;}
.hero p,.page-hero p,.dashboard-hero p,.manager-hero p,.hero-sub,#hero-sub{color:rgba(255,253,247,.78)!important;}
/* Cards: one default surface */
.card,.panel,.section-card,.manager-soft-panel,.seat-status-card,.code-banner,.attention-panel,.preview-card,.team-card,.team-card-v41,.demo-mode-banner,.package-card,.learner-card,.module-card,.library-card,.summary-card,.metric-card,.stat-card,.onboarding-card,.account-card,.auth-card,.tour-card,.modal-card,.code-list-card,.pathway-group-detail,.toolbox-quick-panel,.toolbox-panel,.evidence-card,.badge-card,.journey-card{background:rgba(255,253,247,.98)!important;border:1px solid var(--df-line)!important;border-radius:var(--df-radius-lg)!important;box-shadow:var(--df-shadow)!important;}
.card,.panel,.section-card,.manager-soft-panel,.attention-panel,.preview-card,.team-card,.team-card-v41,.package-card,.learner-card,.module-card,.library-card,.summary-card,.metric-card,.stat-card,.onboarding-card,.account-card,.auth-card,.tour-card,.modal-card,.toolbox-panel,.evidence-card,.badge-card,.journey-card{padding:clamp(1rem,2vw,1.55rem)!important;}
.card:hover,.module-card:hover,.library-card:hover,.package-card:hover,.team-card:hover,.team-card-v41:hover,.learner-card:hover{box-shadow:var(--df-shadow-lg)!important;}
.card h2,.card h3,.panel h2,.panel h3,.section-card h2,.section-card h3,.module-card h3,.library-card h3,.team-card h3,.team-card-v41 h3{color:var(--df-green-dark)!important;font-weight:900!important;}
.card p,.panel p,.section-card p,.module-card p,.library-card p,.team-card p,.team-card-v41 p{color:var(--df-muted);}
/* Buttons: one button system */
button,.btn,.btn-primary,.btn-secondary,.btn-outline,.btn-sm,.btn-danger,.btn-gold,.btn-copy,.copy-btn,.action-btn,.primary-action,.secondary-action{font-family:var(--font,'Nunito',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif)!important;border-radius:14px!important;min-height:44px!important;padding:.72rem 1.08rem!important;font-weight:900!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:.45rem!important;text-decoration:none!important;line-height:1.15!important;transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,border-color .14s ease,color .14s ease!important;}
.btn-primary,.btn-gold,.btn-copy,.primary-action,button[type="submit"],.attention-actions button:not(.btn-secondary):not(.btn-outline):not(.btn-danger){background:var(--df-gold)!important;color:#fff!important;border:1px solid var(--df-gold)!important;box-shadow:0 4px 14px rgba(201,151,12,.24)!important;}
.btn-primary:hover,.btn-gold:hover,.btn-copy:hover,.primary-action:hover,button[type="submit"]:hover,.attention-actions button:not(.btn-secondary):not(.btn-outline):not(.btn-danger):hover{background:var(--df-gold-dark)!important;border-color:var(--df-gold-dark)!important;box-shadow:0 8px 20px rgba(201,151,12,.30)!important;transform:translateY(-1px)!important;}
.btn-secondary,.btn-outline,.btn-sm,.secondary-action,.copy-btn,.action-btn{background:#fff!important;color:var(--df-green)!important;border:1.5px solid var(--df-line)!important;box-shadow:0 1px 3px rgba(26,46,30,.06)!important;}
.btn-secondary:hover,.btn-outline:hover,.btn-sm:hover,.secondary-action:hover,.copy-btn:hover,.action-btn:hover{background:var(--df-green-soft)!important;border-color:var(--df-green)!important;text-decoration:none!important;transform:translateY(-1px)!important;}
.btn-danger{background:var(--df-danger-soft)!important;color:var(--df-danger)!important;border:1px solid rgba(184,74,58,.22)!important;}
.btn-danger:hover{background:var(--df-danger)!important;color:#fff!important;}
button:disabled,.btn:disabled,.btn-primary:disabled{opacity:.52!important;cursor:not-allowed!important;transform:none!important;box-shadow:none!important;}
/* Forms */
label,.form-group label{font-size:.8rem!important;font-weight:900!important;color:var(--df-green)!important;margin:.7rem 0 .3rem!important;}
input,select,textarea,.form-control{width:100%;border:1.5px solid var(--df-line)!important;background:#fff!important;color:var(--df-text)!important;border-radius:14px!important;padding:.78rem .9rem!important;min-height:44px!important;outline:none!important;box-shadow:none!important;}
textarea{min-height:110px;resize:vertical;}
input:focus,select:focus,textarea:focus,.form-control:focus{border-color:var(--df-gold)!important;box-shadow:var(--df-focus)!important;}
.form-row,.form-grid,.form-row-2{gap:1rem!important;}
/* Tabs and segmented controls */
.tabs,.learner-primary-tabs,.learning-subnav,.tabs-sub{border:1px solid var(--df-line)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 2px 8px rgba(26,46,30,.04)!important;overflow-x:auto!important;}
.tab,.tab-btn,.segmented-btn{border-radius:0!important;min-height:42px!important;font-weight:850!important;color:var(--df-muted)!important;background:transparent!important;border:0!important;border-right:1px solid var(--df-line)!important;}
.tab:last-child,.tab-btn:last-child,.segmented-btn:last-child{border-right:0!important;}
.tab:hover,.tab-btn:hover,.segmented-btn:hover{background:var(--df-cream-2)!important;color:var(--df-green)!important;}
.tab.active,.tab-btn.active,.segmented-btn.active{background:var(--df-gold-soft)!important;color:var(--df-gold-dark)!important;}
/* Tables */
table,.data-table{width:100%;border-collapse:separate!important;border-spacing:0!important;background:#fff!important;border:1px solid var(--df-line)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:var(--df-shadow)!important;}
th,.data-table th{background:var(--df-green-soft)!important;color:var(--df-green-dark)!important;font-size:.72rem!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.06em!important;padding:.8rem .9rem!important;}
td,.data-table td{border-top:1px solid #EEE7DC!important;border-bottom:0!important;padding:.85rem .9rem!important;color:var(--df-text)!important;}
.table-scroll-wrap{border-radius:18px!important;}
/* Pills, badges and status */
.badge,.pill,.status-pill,.tag,.module-type,.course-pill,.applied-status-pill{border-radius:999px!important;padding:.25rem .62rem!important;font-size:.7rem!important;font-weight:900!important;letter-spacing:.04em!important;text-transform:uppercase!important;display:inline-flex!important;align-items:center!important;gap:.25rem!important;}
.badge-passed,.status-complete,.pill-success,.success-pill{background:var(--df-success-soft)!important;color:var(--df-success)!important;}
.badge-retry,.status-due,.pill-gold,.warning-pill{background:var(--df-gold-soft)!important;color:var(--df-gold-dark)!important;}
.badge-overdue,.status-overdue,.pill-danger,.danger-pill{background:var(--df-danger-soft)!important;color:var(--df-danger)!important;}
.badge-progress,.status-progress,.pill-blue{background:var(--df-blue-soft)!important;color:var(--df-blue)!important;}
.badge-pending,.status-pending,.pill-muted{background:var(--df-cream-2)!important;color:var(--df-muted)!important;}
/* Messages and empty states */
.msg,.notice,.alert,.empty-state,.success-box,.error-box,.info-box{border-radius:16px!important;padding:1rem 1.1rem!important;border:1px solid var(--df-line)!important;background:#fff!important;color:var(--df-text)!important;}
.msg.success,.notice.success,.success-box{background:var(--df-success-soft)!important;border-color:rgba(47,107,79,.22)!important;color:var(--df-success)!important;}
.msg.error,.notice.error,.error-box{background:var(--df-danger-soft)!important;border-color:rgba(184,74,58,.22)!important;color:var(--df-danger)!important;}
.msg.info,.notice.info,.info-box{background:var(--df-blue-soft)!important;border-color:#CFE0FF!important;color:#23476A!important;}
.empty-state{text-align:center!important;color:var(--df-muted)!important;}
/* Progress */
progress,.progress-bar,.progress-mini-bar,.hero-progress-bar,.hero-org-bar{background:rgba(229,220,203,.8)!important;border-radius:999px!important;overflow:hidden!important;}
.progress-fill,.progress-mini-fill,.hero-progress-fill,.hero-org-fill{background:var(--df-gold)!important;border-radius:999px!important;}
.progress-mini-fill.full,.progress-fill.full{background:var(--df-success)!important;}
/* Auth pages */
.auth-shell,.auth-page{background:linear-gradient(180deg,var(--df-green-dark),var(--df-green))!important;}
.auth-card{max-width:520px!important;margin-inline:auto!important;background:#FFFDF7!important;border-radius:26px!important;box-shadow:0 24px 70px rgba(0,0,0,.26)!important;}
.auth-card h1,.auth-card h2{color:var(--df-green-dark)!important;}
.auth-card .logo,.auth-logo{max-height:92px!important;width:auto!important;object-fit:contain!important;}
.auth-muted,.auth-card p{color:var(--df-muted)!important;}
/* Modals and onboarding */
.modal,.modal-content,.overlay-card,.tour-popover,.tour-card,.onboarding-modal,.manager-onboarding-card{border-radius:26px!important;background:#FFFDF7!important;border:1px solid var(--df-line)!important;box-shadow:0 28px 90px rgba(0,0,0,.28)!important;}
.modal-backdrop,.tour-backdrop,.onboarding-backdrop{background:rgba(28,56,50,.58)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;}
.onboarding-step-dot,.tour-dot{background:var(--df-line)!important;border-radius:999px!important;}
.onboarding-step-dot.active,.tour-dot.active{background:var(--df-gold)!important;}
/* Demo must visually match live surfaces */
.demo-lock,.paywall-blur{border-radius:var(--df-radius-lg)!important;}
.demo-mode-banner{border-left:5px solid var(--df-gold)!important;}
/* Mobile consistency */
@media(max-width:900px){
  main,.layout,.container,.page-wrap{width:min(100% - 1rem,1180px)!important;padding-left:0!important;padding-right:0!important;}
  nav,.top-nav,.app-nav{min-height:68px!important;padding:.65rem .8rem!important;}
  .nav-brand img{height:42px!important;}
  .hero-inner,.dashboard-hero-inner,.manager-hero-inner{grid-template-columns:1fr!important;}
  .attention-grid,.stat-grid,.stats-grid,.manager-side-grid,.signup-code-grid,.supervision-grid,.package-grid,.module-grid,.manager-library-grid,.team-grid,.compare-grid,.form-row,.form-grid,.form-row-2{grid-template-columns:1fr!important;}
  .card,.panel,.section-card,.manager-soft-panel,.attention-panel,.preview-card,.team-card,.team-card-v41,.package-card,.learner-card,.module-card,.library-card{padding:1rem!important;border-radius:18px!important;}
  button,.btn,.btn-primary,.btn-secondary,.btn-outline,.btn-sm,.btn-danger{width:auto;}
  .btn-row,.attention-actions,.result-actions{align-items:stretch;}
  .btn-row > *,.attention-actions > *,.result-actions > *{flex:1 1 auto;}
}
@media(max-width:520px){
  h1{font-size:2rem!important;}
  .nav-right{font-size:.82rem!important;}
  .btn-nav,.btn-nav-ghost,.nav-back,.account-menu-trigger{padding:.48rem .68rem!important;font-size:.78rem!important;}
  table,.data-table{font-size:.84rem!important;}
  th,td,.data-table th,.data-table td{padding:.72rem!important;}
}