/* ElySpace web-design dashboard - Flup-inspired layout
   Palette mirrors main site: #2b1f51 primary, #7c51fb accent, #F67A3C action.
   Charts use #3866ff (blue) and #f59f4a (orange) to match the reference. */

:root{
  --wd-purple:#2b1f51;
  --wd-violet:#7c51fb;
  --wd-violet-soft:#f4f0ff;
  --wd-violet-border:rgba(124,81,251,.18);
  --wd-orange:#F67A3C;
  --wd-blue:#3866ff;
  --wd-blue-soft:#eef2ff;
  --wd-green:#22c55e;
  --wd-red:#ef4444;
  --wd-canvas:#f4f5f8;
  --wd-surface:#ffffff;
  --wd-line:#ecedf2;
  --wd-line-strong:#dcdee6;
  --wd-text:#1c1738;
  --wd-text-soft:#5e617a;
  --wd-text-mute:#9ca0b3;
  --wd-radius:14px;
  --wd-side-w:260px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;overflow-x:hidden;}
.wd-body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--wd-canvas);color:var(--wd-text);-webkit-font-smoothing:antialiased;min-height:100vh;}

/* CRITICAL: many component rules use display:flex/grid which override [hidden]. */
[hidden]{display:none !important;}

a{color:inherit;text-decoration:none;}
button{font-family:inherit;}

/* ===== Layout shell ===== */
.wd-app{display:grid;grid-template-columns:var(--wd-side-w) 1fr;min-height:100vh;}
.wd-app.is-collapsed{grid-template-columns:0 1fr;}
.wd-app.is-collapsed .wd-sidebar{transform:translateX(-100%);opacity:0;pointer-events:none;}

/* Mobile-only hamburger to open sidebar */
.wd-mobile-toggle{display:none;position:fixed;top:14px;left:14px;z-index:25;width:42px;height:42px;border-radius:10px;background:#fff;border:1px solid var(--wd-line);cursor:pointer;box-shadow:0 4px 14px rgba(43,31,81,.10);font-size:16px;color:var(--wd-text);align-items:center;justify-content:center;}
.wd-mobile-toggle:hover{background:var(--wd-violet-soft);color:var(--wd-violet);border-color:var(--wd-violet-border);}
.wd-mobile-backdrop{display:none;position:fixed;inset:0;background:rgba(43,31,81,.4);z-index:14;animation:wd-fade .2s ease;}
.wd-mobile-backdrop.is-open{display:block;}

/* ===== Sidebar ===== */
.wd-sidebar{background:var(--wd-surface);border-right:1px solid var(--wd-line);display:flex;flex-direction:column;padding:16px 14px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;transition:transform .25s ease,opacity .25s ease;z-index:15;}
.wd-side-top{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 14px;border-bottom:1px solid var(--wd-line);margin-bottom:14px;}
.wd-side-logo{display:flex;align-items:center;}
.wd-side-logo-img{height:30px;width:auto;display:block;}
/* Sidebar header collapse button - hidden on desktop (no rail to re-open from), shown only on mobile to close the drawer. See @media block below. */
.wd-side-collapse-btn{display:none;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--wd-line);color:var(--wd-text-soft);cursor:pointer;align-items:center;justify-content:center;font-size:11px;transition:all .15s ease;}
.wd-side-collapse-btn:hover{background:var(--wd-violet);color:#fff;border-color:var(--wd-violet);}

.wd-nav{display:flex;flex-direction:column;gap:2px;flex:1;}
.wd-nav-section{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--wd-text-mute);font-weight:700;padding:14px 12px 6px;}
.wd-nav-section:first-of-type{padding-top:0;}
.wd-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:14px;color:var(--wd-text-soft);font-weight:500;cursor:pointer;background:transparent;border:0;width:100%;text-align:left;transition:background .15s ease,color .15s ease;}
.wd-nav-item i{font-size:14px;width:18px;text-align:center;color:var(--wd-text-mute);transition:color .15s ease;}
.wd-nav-item:hover{background:#f5f5fa;color:var(--wd-text);}
.wd-nav-item:hover i{color:var(--wd-violet);}
.wd-nav-item.is-active{background:var(--wd-violet-soft);color:var(--wd-violet);font-weight:600;}
.wd-nav-item.is-active i{color:var(--wd-violet);}

/* Dark-mode row with switch */
.wd-nav-darkmode{cursor:pointer;}
.wd-switch{margin-left:auto;position:relative;width:34px;height:20px;display:inline-block;flex-shrink:0;}
.wd-switch input{position:absolute;opacity:0;width:0;height:0;}
.wd-switch-track{position:absolute;inset:0;background:#d6d8e2;border-radius:99px;cursor:pointer;transition:background .2s ease;}
.wd-switch-track::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.18);}
.wd-switch input:checked + .wd-switch-track{background:var(--wd-violet);}
.wd-switch input:checked + .wd-switch-track::after{transform:translateX(14px);}

.wd-side-bottom{padding-top:12px;border-top:1px solid var(--wd-line);margin-top:8px;display:flex;flex-direction:column;gap:8px;}
.wd-user{display:flex;align-items:center;gap:10px;padding:4px 8px;}
.wd-avatar{width:38px;height:38px;border-radius:50%;background:var(--wd-violet-soft);color:var(--wd-violet);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:.5px;}
.wd-user-text{min-width:0;flex:1;}
.wd-user-name{font-weight:700;font-size:13.5px;color:var(--wd-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25;}
.wd-user-email{font-size:11.5px;color:var(--wd-text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.wd-side-logout{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-size:13.5px;color:var(--wd-text-soft);transition:all .15s ease;}
.wd-side-logout:hover{background:#fef0ef;color:var(--wd-red);}
.wd-side-logout:hover i{color:var(--wd-red);}
.wd-side-logout i{width:18px;text-align:center;color:var(--wd-text-mute);}

/* ===== Main area ===== */
.wd-main{display:flex;flex-direction:column;min-width:0;padding:0 0 40px;gap:24px;}

/* ===== Top header bar ===== */
.wd-topbar{position:sticky;top:0;z-index:25;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);gap:24px;align-items:center;padding:16px 32px;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(8px);-webkit-backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--wd-line);}
.wd-topbar-left{display:flex;align-items:center;gap:14px;min-width:0;}
.wd-topbar-user{display:flex;align-items:center;gap:12px;min-width:0;}
.wd-topbar-user-text{min-width:0;line-height:1.25;}
.wd-topbar-user-name{font-size:13.5px;font-weight:700;color:var(--wd-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.wd-topbar-user-email{font-size:11.5px;color:var(--wd-text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;}
.wd-topbar-center{min-width:0;}
.wd-search-global{width:100%;max-width:none;}
.wd-search-global input{padding:11px 16px 11px 42px;background:#f4f5f8;border-color:transparent;font-size:14px;}
.wd-search-global input:hover{background:#eef0f5;}
.wd-search-global input:focus{background:#fff;border-color:var(--wd-violet);}
.wd-topbar-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;min-width:0;}
.wd-topbar-bell{position:relative;width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--wd-line);color:var(--wd-text-soft);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;}
.wd-topbar-bell:hover{background:var(--wd-violet-soft);color:var(--wd-violet);border-color:var(--wd-violet-border);}
.wd-topbar-bell i{font-size:15px;}
.wd-topbar-brand{display:flex;align-items:center;padding:8px 14px;border-radius:10px;background:#fff;border:1px solid var(--wd-line);transition:border-color .15s ease;}
.wd-topbar-brand:hover{border-color:var(--wd-violet-border);}
.wd-topbar-brand-img{height:26px;width:auto;display:block;}

/* ===== View head ===== */
.wd-view{padding:0 32px;display:flex;flex-direction:column;gap:24px;}
.wd-view-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;}
.wd-view-head > div:first-child{min-width:0;}
.wd-view-head h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.015em;color:var(--wd-text);line-height:1.2;}
.wd-view-sub{margin:6px 0 0;font-size:13.5px;color:var(--wd-text-mute);font-weight:500;}
.wd-view-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
.wd-period-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:10px;background:#fff;border:1px solid var(--wd-line);font-size:13px;color:var(--wd-text-soft);font-weight:600;cursor:pointer;transition:all .15s ease;}
.wd-period-pill:hover:not(:disabled){border-color:var(--wd-violet-border);color:var(--wd-text);}
.wd-period-pill:disabled{opacity:.7;cursor:not-allowed;}
.wd-period-pill i{font-size:12px;}

/* ===== Dashboard row 1: KPI grid + activity chart side-by-side ===== */
.wd-dash-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:stretch;}

/* KPI 2x2 grid */
.wd-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.wd-kpi{position:relative;background:#fff;border:1px solid var(--wd-line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:12px;transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease,border-color .2s ease;min-width:0;}
.wd-kpi:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(43,31,81,.08);border-color:var(--wd-violet-border);}
.wd-kpi-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.wd-kpi-icon-blue{background:#e7eeff;color:var(--wd-blue);}
.wd-kpi-icon-green{background:#e6f7ec;color:#15803d;}
.wd-kpi-icon-violet{background:var(--wd-violet-soft);color:var(--wd-violet);}
.wd-kpi-icon-orange{background:#fff1e6;color:var(--wd-orange);}
.wd-kpi-label{font-size:12.5px;color:var(--wd-text-soft);font-weight:500;}
.wd-kpi-row-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;}
.wd-kpi-value{font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-.015em;color:var(--wd-text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wd-kpi-delta{font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;flex-shrink:0;}
.wd-kpi-delta i{font-size:9px;}
.wd-kpi-delta.wd-delta-up{background:#e7f8ee;color:#15803d;}
.wd-kpi-delta.wd-delta-down{background:#fdeae7;color:#b91c1c;}
.wd-kpi-delta.wd-delta-flat{background:#f1f2f5;color:var(--wd-text-soft);}

/* ===== Panels (chart containers) ===== */
.wd-panel{background:#fff;border:1px solid var(--wd-line);border-radius:14px;padding:22px 22px 18px;display:flex;flex-direction:column;min-width:0;}
.wd-panel-tall{min-height:100%;}
.wd-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.wd-panel-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--wd-text);}
.wd-panel-sub{margin:4px 0 0;font-size:12.5px;color:var(--wd-text-mute);font-weight:500;}
.wd-legend{display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--wd-text-soft);font-weight:500;}
.wd-legend-item{display:inline-flex;align-items:center;gap:7px;}
.wd-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.wd-dot-blue{background:var(--wd-blue);}
.wd-dot-orange{background:var(--wd-orange);}

/* Bar chart */
.wd-chart-bars{position:relative;flex:1;min-height:280px;}
.wd-chart-bars svg{width:100%;height:100%;display:block;}
.wd-chart-grid-line{stroke:var(--wd-line);stroke-width:1;}
.wd-chart-axis-text{fill:var(--wd-text-mute);font-size:11px;font-family:inherit;}
.wd-chart-bar{transition:opacity .2s ease;cursor:pointer;}
.wd-chart-bar:hover{opacity:.85;}
.wd-chart-tooltip{position:absolute;background:#fff;border:1px solid var(--wd-line);border-radius:10px;padding:10px 14px;box-shadow:0 12px 28px rgba(43,31,81,.14);pointer-events:none;font-size:12px;color:var(--wd-text);min-width:120px;opacity:0;transform:translate(-50%,-100%) translateY(-8px);transition:opacity .15s ease;z-index:10;}
.wd-chart-tooltip.is-visible{opacity:1;}
.wd-chart-tooltip-head{font-size:11px;color:var(--wd-text-mute);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.wd-chart-tooltip-val{font-size:15px;font-weight:700;letter-spacing:-.01em;}

/* Two-column row */
.wd-two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;}

/* Donut chart */
.wd-donut-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center;}
.wd-donut-list{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;}
.wd-donut-list-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--wd-text);}
.wd-donut-list-item .wd-dot{width:8px;height:8px;flex-shrink:0;}
.wd-donut-list-name{font-weight:500;}
.wd-donut-list-pct{color:var(--wd-text-mute);margin-left:auto;font-weight:600;}
.wd-donut-svg{display:flex;align-items:center;justify-content:center;}
.wd-donut-svg svg{max-width:240px;width:100%;height:auto;}
.wd-donut-empty{text-align:center;padding:40px 20px;color:var(--wd-text-mute);font-size:13px;grid-column:1/-1;}

/* Timeline / right list */
.wd-list{display:flex;flex-direction:column;gap:14px;}
.wd-list-item{display:flex;align-items:center;gap:12px;}
.wd-list-bullet{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.wd-list-name{font-size:13.5px;color:var(--wd-text);font-weight:500;}
.wd-list-pct{margin-left:auto;font-size:13px;color:var(--wd-text-soft);font-weight:600;}

/* ===== Projects view ===== */
.wd-search{position:relative;width:260px;}
.wd-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--wd-text-mute);font-size:13px;}
.wd-search input{width:100%;padding:10px 14px 10px 38px;border:1px solid var(--wd-line);border-radius:10px;font-size:13.5px;background:#fff;color:var(--wd-text);outline:none;transition:all .15s ease;}
.wd-search input:focus{border-color:var(--wd-violet);box-shadow:0 0 0 3px rgba(124,81,251,.12);}

.wd-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;font-size:14px;font-weight:600;border:1px solid transparent;cursor:pointer;transition:all .2s ease;}
.wd-btn-primary{background:var(--wd-orange);color:#fff;border-color:var(--wd-orange);box-shadow:0 6px 18px rgba(246,122,60,.3);}
.wd-btn-primary:hover{background:#e36a2c;border-color:#e36a2c;transform:translateY(-1px);box-shadow:0 8px 22px rgba(246,122,60,.4);}
.wd-btn-primary i{font-size:13px;}
.wd-btn-ghost{background:transparent;color:var(--wd-text);border:1px solid var(--wd-line);}
.wd-btn-ghost:hover{background:#f5f5fa;}

.wd-tabs{display:flex;gap:10px;flex-wrap:wrap;}
.wd-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:10px;background:#fff;border:1px solid var(--wd-line);color:var(--wd-text-soft);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s ease;}
.wd-tab:hover{border-color:var(--wd-violet-border);color:var(--wd-text);}
.wd-tab.is-active{background:var(--wd-purple);border-color:var(--wd-purple);color:#fff;box-shadow:0 6px 18px rgba(43,31,81,.18);}
.wd-tab i{font-size:12.5px;}
.wd-tab-count{background:rgba(255,255,255,.16);color:inherit;font-size:11.5px;padding:2px 8px;border-radius:99px;font-weight:700;line-height:1;}
.wd-tab:not(.is-active) .wd-tab-count{background:var(--wd-violet-soft);color:var(--wd-violet);}

.wd-projects-area{display:contents;}
.wd-projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.wd-empty{background:#fff;border:1px dashed var(--wd-line);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px 20px;color:var(--wd-text-soft);}
.wd-empty-icon{width:72px;height:72px;border-radius:18px;background:var(--wd-violet-soft);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--wd-violet);margin-bottom:18px;}
.wd-empty h3{margin:0 0 6px;font-size:18px;color:var(--wd-text);font-weight:700;}
.wd-empty p{margin:0;font-size:14px;}

.wd-card{background:#fff;border:1px solid var(--wd-line);border-radius:14px;padding:20px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;gap:14px;}
.wd-card:hover{border-color:var(--wd-violet-border);box-shadow:0 4px 14px rgba(43,31,81,.06);}
.wd-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.wd-card-icon{width:42px;height:42px;border-radius:12px;background:var(--wd-violet-soft);color:var(--wd-violet);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.wd-status{font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:5px 11px;border-radius:99px;text-transform:uppercase;white-space:nowrap;}
.wd-status-submitted{background:#fff4e6;color:#b75e1a;}
.wd-status-in-review{background:#e6f0ff;color:#1d4ed8;}
.wd-status-active{background:#e6f7ec;color:#15803d;}
.wd-card-title{font-size:16px;font-weight:700;color:var(--wd-text);margin:0;line-height:1.3;letter-spacing:-.005em;}
.wd-card-desc{font-size:13.5px;color:var(--wd-text-soft);margin:0;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
.wd-card-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--wd-text-mute);padding-top:12px;border-top:1px solid var(--wd-line);margin-top:auto;}
.wd-card-meta-item{display:inline-flex;align-items:center;gap:6px;font-weight:500;}
.wd-card-meta-item i{font-size:11px;color:var(--wd-text-mute);}

/* ===== Placeholder views ===== */
.wd-placeholder{background:#fff;border:1px solid var(--wd-line);border-radius:14px;padding:64px 24px;text-align:center;color:var(--wd-text-soft);}
.wd-placeholder i{font-size:22px;color:var(--wd-text-mute);margin-bottom:14px;display:block;}
.wd-placeholder p{margin:0 auto;font-size:14px;line-height:1.55;max-width:380px;}
.wd-placeholder-badge{display:none;}

/* ===== Account Settings ===== */
.wd-settings{display:flex;flex-direction:column;gap:18px;max-width:820px;}
.wd-settings-card{background:#fff;border:1px solid var(--wd-line);border-radius:14px;overflow:hidden;}
.wd-settings-head{padding:22px 24px 16px;border-bottom:1px solid var(--wd-line);}
.wd-settings-head h3{margin:0 0 6px;font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;color:var(--wd-text);}
.wd-settings-head h3 i{font-size:14px;color:var(--wd-violet);width:18px;text-align:center;}
.wd-settings-head p{margin:0;font-size:13.5px;color:var(--wd-text-mute);line-height:1.5;}
.wd-settings-body{padding:22px 24px;display:flex;flex-direction:column;gap:16px;}
.wd-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.wd-form-field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.wd-form-field label{font-size:12.5px;font-weight:600;color:var(--wd-text-soft);letter-spacing:.01em;}
.wd-form-field input{padding:10px 14px;border:1px solid var(--wd-line);border-radius:10px;font-size:14px;color:var(--wd-text);background:#fafafd;outline:none;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;font-family:inherit;width:100%;}
.wd-form-field input:hover{border-color:#d8d4e6;}
.wd-form-field input:focus{background:#fff;border-color:var(--wd-violet);box-shadow:0 0 0 3px rgba(124,81,251,.14);}
.wd-form-msg{font-size:13px;min-height:18px;padding-top:4px;}
.wd-form-msg.ok{color:#15803d;}
.wd-form-msg.err{color:#c0392b;}
.wd-form-msg::before{font-family:"Font Awesome 6 Free";font-weight:900;margin-right:6px;}
.wd-form-msg.ok::before{content:"\f00c";}
.wd-form-msg.err::before{content:"\f06a";}
.wd-settings-foot{padding:14px 24px;background:#fafafd;border-top:1px solid var(--wd-line);display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap;}
.wd-settings-foot.wd-foot-spread{justify-content:space-between;}
.wd-foot-meta{font-size:13px;color:var(--wd-text-mute);}

.wd-settings-danger{border-color:#fde2e0;}
.wd-settings-danger .wd-settings-head{border-bottom-color:#fde2e0;background:#fef5f4;}
.wd-settings-danger .wd-settings-head h3 i{color:#c0392b;}
.wd-settings-danger .wd-settings-foot{background:#fef5f4;border-top-color:#fde2e0;}

.wd-btn-danger{background:#c0392b;color:#fff;border-color:#c0392b;box-shadow:0 4px 14px rgba(192,57,43,.22);}
.wd-btn-danger:hover{background:#a82c1f;border-color:#a82c1f;transform:translateY(-1px);box-shadow:0 6px 18px rgba(192,57,43,.32);}

/* Toast */
.wd-toast{position:fixed;bottom:24px;right:24px;background:var(--wd-text);color:#fff;padding:12px 20px;border-radius:12px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;box-shadow:0 14px 40px rgba(0,0,0,.22);z-index:200;animation:wd-toast-in .3s cubic-bezier(.23,1,.32,1);max-width:calc(100% - 48px);}
.wd-toast.ok{background:#15803d;}
.wd-toast.err{background:#c0392b;}
.wd-toast i{font-size:14px;flex-shrink:0;}
@keyframes wd-toast-in{from{opacity:0;transform:translateY(20px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes wd-toast-out{to{opacity:0;transform:translateY(20px);}}

/* ===== Project detail modal ===== */
.wd-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;}
.wd-modal-overlay{position:absolute;inset:0;background:rgba(43,31,81,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:wd-fade .2s ease;}
.wd-modal-dialog{position:relative;background:#fff;border-radius:16px;width:100%;max-width:640px;max-height:90vh;overflow:auto;box-shadow:0 40px 80px rgba(43,31,81,.4);animation:wd-pop .22s cubic-bezier(.4,0,.2,1);}
.wd-modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--wd-line);cursor:pointer;color:var(--wd-text-soft);display:inline-flex;align-items:center;justify-content:center;transition:all .15s ease;z-index:1;}
.wd-modal-close:hover{color:var(--wd-violet);border-color:var(--wd-violet);transform:rotate(90deg);}
.wd-modal-body{padding:36px 32px 28px;}
.wd-detail-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--wd-line);}
.wd-detail-icon{width:54px;height:54px;border-radius:14px;background:var(--wd-violet-soft);color:var(--wd-violet);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.wd-detail-title{font-size:19px;font-weight:700;margin:0 0 4px;color:var(--wd-text);}
.wd-detail-id{font-size:12px;color:var(--wd-text-mute);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.wd-detail-rows{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;margin-bottom:20px;}
.wd-detail-row{display:flex;flex-direction:column;gap:3px;}
.wd-detail-row-label{font-size:11px;color:var(--wd-text-mute);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.wd-detail-row-value{font-size:14px;color:var(--wd-text);font-weight:500;}
.wd-detail-section{margin-top:14px;}
.wd-detail-section h4{font-size:13px;font-weight:700;margin:0 0 8px;color:var(--wd-text);text-transform:uppercase;letter-spacing:.06em;}
.wd-detail-section p{font-size:14px;color:var(--wd-text-soft);line-height:1.6;margin:0;white-space:pre-wrap;}

@keyframes wd-fade{from{opacity:0;}to{opacity:1;}}
@keyframes wd-pop{from{opacity:0;transform:translateY(12px) scale(.97);}to{opacity:1;transform:none;}}

/* ===== Responsive ===== */
@media (max-width:1280px){
  .wd-dash-row{grid-template-columns:1fr;}
  .wd-panel-tall{min-height:auto;}
  .wd-chart-bars{min-height:240px;}
}
@media (max-width:980px){
  .wd-two-col{grid-template-columns:1fr;}
  .wd-donut-wrap{grid-template-columns:1fr;}
  .wd-donut-svg{order:-1;}
  .wd-topbar{grid-template-columns:1fr auto;}
  .wd-topbar-center{grid-column:1 / -1;order:3;}
  .wd-topbar{padding:14px 24px;}
  .wd-view{padding:0 24px;}
  .wd-topbar-user-name,.wd-topbar-user-email{max-width:140px;}
}
@media (max-width:768px){
  .wd-app{grid-template-columns:1fr;}
  .wd-sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--wd-side-w);transform:translateX(-100%);box-shadow:0 0 50px rgba(0,0,0,.18);z-index:18;}
  .wd-sidebar.is-open{transform:none;opacity:1;pointer-events:auto;}
  .wd-app.is-collapsed .wd-sidebar{opacity:1;}
  .wd-mobile-toggle{display:flex;}
  /* On mobile, show the collapse button - it closes the drawer */
  .wd-side-collapse-btn{display:flex;}
  .wd-main{padding:0 0 24px;gap:16px;}
  .wd-topbar{position:sticky;padding:12px 16px 12px 64px;grid-template-columns:1fr;gap:12px;}
  .wd-topbar-left,.wd-topbar-right{justify-content:flex-start;}
  .wd-topbar-right{justify-content:space-between;width:100%;}
  .wd-topbar-center{order:3;}
  .wd-view{padding:0 16px;gap:18px;}
  .wd-view-head{grid-template-columns:1fr;}
  .wd-view-actions{justify-content:flex-start;}
  .wd-view-head h1{font-size:22px;}
  .wd-kpi-grid{gap:12px;}
  .wd-form-row{grid-template-columns:1fr;}
  .wd-toast{left:16px;right:16px;bottom:16px;}
  .wd-detail-rows{grid-template-columns:1fr;}
  .wd-modal{padding:0;}
  .wd-modal-dialog{border-radius:0;max-height:100vh;height:100vh;max-width:none;}
  .wd-placeholder{padding:48px 20px;}
  .wd-placeholder::before{width:200px;height:200px;}
}
@media (max-width:480px){
  .wd-kpi-grid{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}