/* =====================================================================
   Ease Therapy — redesign layer
   Loaded AFTER app.css. Reskins the Bootstrap theme to the warm palette:
   Quicksand headings + Inter body, slate sidebar, coral accents, motion.
   Purely visual + additive — safe to remove to revert the look.
   ===================================================================== */

:root{
  --et-slate:#22434e; --et-slate-700:#2b5361; --et-slate-900:#102730;
  --et-coral:#e8654f; --et-coral-600:#d64f39; --et-apricot:#f4a24c;
  --et-mint:#2fa389; --et-aqua:#3fa8c0; --et-blue:#8dcbd8;
  --et-ink:#1c333c; --et-body:#4d6169; --et-muted:#8497a0;
  --et-cream:#faf5ee; --et-cream-2:#f4e9d8; --et-card:#fffdf9; --et-line:#ece1d0;
  --et-r:14px; --et-ease:cubic-bezier(.19,1,.22,1); --et-spring:cubic-bezier(.34,1.56,.55,1);
}

/* ---- Typography ---------------------------------------------------- */
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--et-cream) !important;color:var(--et-ink)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.dashboard-card h3,.card-title,.breadcrumb-title,.page-title,.fw-bold.text-dark{
  font-family:'Quicksand','Inter',sans-serif !important;font-weight:700 !important;letter-spacing:-.01em}
main{background:radial-gradient(46% 26% at 88% 0%, rgba(244,162,76,.14), transparent 62%), var(--et-cream) !important}

/* ---- Sidebar (with baked-in glow — no clipping, no bleed) ---------- */
.sidebar,aside.sidebar{
  background:
    radial-gradient(78% 42% at 92% 6%, rgba(232,101,79,.42), transparent 60%),
    radial-gradient(80% 44% at 2% 100%, rgba(47,163,137,.36), transparent 60%),
    linear-gradient(165deg,var(--et-slate-700),var(--et-slate-900)) !important}
@keyframes et-blob{to{transform:translate(22px,-16px) scale(1.15)}}

.sidebar .accordion-button,.sidebar .accordion-button-single{
  color:#cbdbdf !important;background:transparent !important;border-radius:12px !important;font-weight:600 !important;
  box-shadow:none !important;transition:background .3s var(--et-spring),color .25s,transform .3s var(--et-spring) !important}
.sidebar .accordion-button:hover,.sidebar .accordion-button-single:hover{background:rgba(255,255,255,.09) !important;color:#fff !important;transform:translateX(4px)}
.sidebar .accordion-button:not(.collapsed){color:#fff !important;background:rgba(255,255,255,.06) !important}
.sidebar .accordion-button::after{filter:brightness(0) invert(1);opacity:.6}
.sidebar .accordion-button-single.accordion-active,.sidebar a.accordion-active{
  background:linear-gradient(100deg,rgba(232,101,79,.34),rgba(244,162,76,.16)) !important;color:#fff !important;position:relative}
.sidebar .accordion-button-single.accordion-active::before,.sidebar a.accordion-active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--et-apricot)}
.sidebar .accordion-body{background:transparent !important}
.sidebar .child-nav-icon{opacity:.85}
.nav-section-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;
  color:rgba(215,228,232,.42);font-weight:700;margin:18px 12px 6px;padding:0 4px}

/* ---- Sidebar user card --------------------------------------------- */
.et-side-user{margin:18px 14px 20px;padding:11px;background:rgba(255,255,255,.08);border-radius:14px;
  display:flex;align-items:center;gap:10px}
.et-side-avatar{width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--et-apricot),var(--et-coral));color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13px}
.et-side-meta{min-width:0}
.et-side-name{color:#fff;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.et-side-user small{display:block;color:rgba(215,228,232,.55);font-size:12px}

/* ---- Header bar — slim, not a heavy card -------------------------- */
.sticky-top.mx-0.mx-md-4{margin-top:0 !important;margin-bottom:0 !important}
.header-nav{background:transparent !important;backdrop-filter:none !important;border:none !important;border-radius:0 !important;box-shadow:none !important;padding:8px 2px !important}
#btn-menu-lg,.btn-menu-lg{border:1px solid var(--et-line) !important;background:var(--et-card) !important;color:var(--et-body) !important;width:40px;height:40px;border-radius:12px !important;display:inline-grid !important;place-items:center;box-shadow:none !important}
.btn-dropdown{border:1px solid var(--et-line) !important;background:var(--et-card) !important;border-radius:30px !important;padding:5px 12px 5px 6px !important}
.et-viewall{color:var(--et-coral) !important;font-weight:700;text-decoration:none;font-size:14px;white-space:nowrap}
.et-viewall:hover{text-decoration:underline}

/* ---- Buttons ------------------------------------------------------- */
.btn{border-radius:12px !important;font-weight:600 !important;
  transition:transform .16s var(--et-spring),box-shadow .3s var(--et-ease),filter .2s !important}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--et-coral),var(--et-apricot)) !important;border:none !important;color:#fff !important;box-shadow:0 8px 20px rgba(232,101,79,.34)}
.btn-primary:hover{box-shadow:0 13px 28px rgba(232,101,79,.46)}
.btn-success{background:linear-gradient(135deg,var(--et-mint),#57c2a9) !important;border:none !important;color:#fff !important}
.btn-info{background:linear-gradient(135deg,var(--et-aqua),#7fcbdc) !important;border:none !important;color:#0f333d !important}
.btn-dark{background:var(--et-slate) !important;border:none !important}
.btn-outline-primary{color:var(--et-coral-600) !important;border-color:var(--et-coral) !important}
.btn-outline-primary:hover{background:var(--et-coral) !important;color:#fff !important}
.btn-light{background:var(--et-card) !important;border:1px solid var(--et-line) !important;color:var(--et-body) !important}

/* ---- Cards --------------------------------------------------------- */
.card,.dashboard-card{background:var(--et-card) !important;border:1px solid var(--et-line) !important;border-radius:16px !important;
  transition:transform .3s var(--et-ease),box-shadow .3s var(--et-ease)}
.dashboard-card:hover,.card.dashboard-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 16px 38px rgba(34,67,78,.14)}
.dashboard-card h3{font-size:28px}

/* stat icon chips — bold gradient with white icon (like the preview) */
.dashboard-card .stat-icon-wrapper{border-radius:14px !important;width:50px;height:50px;display:grid;place-items:center;opacity:1 !important;padding:0 !important;box-shadow:0 6px 16px rgba(34,67,78,.14)}
.dashboard-card .stat-icon-wrapper.bg-primary{background:linear-gradient(135deg,var(--et-mint),#57c2a9) !important}
.dashboard-card .stat-icon-wrapper.bg-success{background:linear-gradient(135deg,var(--et-apricot),#f6c94b) !important}
.dashboard-card .stat-icon-wrapper.bg-danger{background:linear-gradient(135deg,var(--et-coral),var(--et-apricot)) !important}
.dashboard-card .stat-icon-wrapper.bg-info{background:linear-gradient(135deg,var(--et-aqua),#7fcbdc) !important}
.dashboard-card .stat-icon-wrapper *{color:#fff !important;stroke:#fff !important}
.dashboard-card .stat-icon-wrapper .circle-icon{background:transparent !important}

/* stat cards — chip on top, then label, number, subtext (preview layout) */
.et-stat .card-body{display:flex !important;flex-direction:column;align-items:flex-start !important;padding:20px 22px !important}
.et-chip{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;margin-bottom:14px;box-shadow:0 6px 16px rgba(34,67,78,.16)}
.et-chip em,.et-chip svg{width:22px !important;height:22px !important;stroke:#fff}
.et-chip-coral{background:linear-gradient(135deg,var(--et-coral),var(--et-apricot))}
.et-chip-aqua{background:linear-gradient(135deg,var(--et-aqua),#7fcbdc)}
.et-chip-mint{background:linear-gradient(135deg,var(--et-mint),#57c2a9)}
.et-chip-gold{background:linear-gradient(135deg,#f4a24c,#f6c94b)}
.et-stat h6{margin:0 0 3px !important;font-size:13px;line-height:1.3}
.et-stat h3{font-size:28px !important;margin:0 !important;line-height:1.15}
.et-stat .et-sub{font-size:12.5px;color:var(--et-muted);margin-top:8px;font-weight:600}
.et-stat .et-sub a{color:var(--et-coral);text-decoration:none;font-weight:700}

/* welcome heading + subtitle */
.et-welcome-sub{color:var(--et-body);margin:2px 0 0;font-size:15px}

/* recent-timesheet status pills — soft warm tints (match preview) */
.badge.status-completed,.badge.status-approved{background:var(--appr-bg) !important;color:var(--appr-tx) !important}
.badge.status-submitted,.badge.status-resubmitted,.badge.status-for-approval{background:var(--pend-bg) !important;color:var(--pend-tx) !important}
.badge.status-rejected{background:var(--rej-bg) !important;color:var(--rej-tx) !important}
.badge.status-draft{background:var(--draft-bg) !important;color:var(--draft-tx) !important}

/* status overview + recent side-by-side; both stretch to equal height */
.et-lower>[class*="col-"]{display:flex}
.et-lower .card{width:100%}
.et-lower .status-overview{margin-bottom:0 !important}

/* recent timesheets rows — readable + stacked for the narrow column */
#accordionTable .accordion-item{padding:12px 6px !important;border-bottom:1px solid var(--et-line) !important}
#accordionTable .accordion-header>.d-flex{flex-wrap:wrap;row-gap:6px}
#accordionTable .accordion-button{background:transparent !important;padding:0 !important;color:var(--et-ink) !important;box-shadow:none !important}
#accordionTable .accordion-button::after{display:none !important}
#accordionTable .accordion-button .row{flex-direction:column !important;row-gap:3px;margin:0}
#accordionTable .accordion-button .row>.col,#accordionTable .accordion-button .row>.d-flex.col{flex:0 0 100% !important;max-width:100% !important;padding:0}
#accordionTable .text-muted{color:var(--et-body) !important}
#accordionTable .fw-light{font-weight:600 !important;color:var(--et-muted) !important}
#accordionTable a[href*="/timesheets/"]{color:var(--et-coral) !important;font-weight:700;white-space:nowrap}
#accordionTable .badge{margin-right:6px}

/* ---- Gradient name in the welcome heading -------------------------- */
.et-grad{background:linear-gradient(100deg,var(--et-coral),var(--et-apricot) 55%,var(--et-mint));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% auto;animation:et-shine 5s linear infinite}
@keyframes et-shine{to{background-position:220% center}}
#dashboard-title{font-size:30px}

/* ---- Status overview bars ----------------------------------------- */
.status-overview .card-body{display:block !important}
.status-overview .sb-row{display:flex !important;align-items:center;gap:14px;padding:9px 0;width:100%}
.status-overview .sb-label{width:170px;font-size:14px;font-weight:600;color:var(--et-body);flex:none}
.status-overview .sb-track{flex:1;height:12px;border-radius:8px;background:var(--et-cream-2);overflow:hidden}
.status-overview .sb-fill{height:100%;width:0;border-radius:8px;transition:width 1s var(--et-spring)}
.status-overview .sb-completed{background:linear-gradient(90deg,var(--et-mint),#57c2a9)}
.status-overview .sb-pending{background:linear-gradient(90deg,var(--et-aqua),#7fcbdc)}
.status-overview .sb-rejected{background:linear-gradient(90deg,var(--et-coral),#ef8b74)}
.status-overview .sb-num{width:34px;text-align:right;font-size:15px;font-weight:800;color:var(--et-ink);flex:none;font-variant-numeric:tabular-nums}
@media(max-width:560px){.status-overview .sb-label{width:110px;font-size:12.5px}}

/* ---- Forms --------------------------------------------------------- */
.form-control,.form-select,.custom-select{border-radius:11px !important;border-color:var(--et-line) !important;
  transition:border-color .2s,box-shadow .2s !important}
.form-control:focus,.form-select:focus,.custom-select:focus{
  border-color:var(--et-coral) !important;box-shadow:0 0 0 .2rem rgba(232,101,79,.16) !important}

/* ---- Status badges / pills ---------------------------------------- */
.badge.bg-warning,.badge.bg-warning-subtle{background:#fbeaca !important;color:#8a6410 !important}
.badge.bg-success,.badge.bg-success-subtle{background:#d9f0e7 !important;color:#1c7a63 !important}
.badge.bg-info,.badge.bg-info-subtle{background:#dcedf2 !important;color:#1c6b7d !important}
.badge.bg-danger,.badge.bg-danger-subtle{background:#fbe2dc !important;color:#bd3f2b !important}
.badge{border-radius:20px !important;font-weight:700 !important;padding:.4em .85em !important}

/* ---- Tables -------------------------------------------------------- */
.table tbody tr{transition:background .15s}
.table tbody tr:hover>*{background:var(--et-cream-2) !important}

/* ---- Login (auth) -------------------------------------------------- */
#auth .row.bg-info,#auth .bg-info{background:linear-gradient(165deg,var(--et-slate-700),var(--et-slate-900)) !important;position:relative;overflow:hidden}
#auth .row.bg-info::before{content:"";position:absolute;top:-16%;right:-10%;width:52%;height:52%;border-radius:50%;
  background:radial-gradient(circle,rgba(232,101,79,.4),transparent 62%);filter:blur(22px);pointer-events:none;animation:et-blob 12s var(--et-ease) infinite alternate}
#auth .row.bg-info::after{content:"";position:absolute;bottom:-18%;left:-12%;width:56%;height:54%;border-radius:50%;
  background:radial-gradient(circle,rgba(47,163,137,.36),transparent 62%);filter:blur(22px);pointer-events:none;animation:et-blob 15s var(--et-ease) infinite alternate-reverse}
#auth .auth-card,#auth .logo-brand{position:relative;z-index:1}
#auth .auth-card .card{border:none !important;border-radius:20px !important;box-shadow:0 30px 70px rgba(16,39,48,.28) !important;overflow:hidden}
#auth .auth-card .card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--et-aqua),var(--et-blue) 30%,var(--et-mint) 65%,var(--et-apricot))}
#auth .logo-brand img{filter:drop-shadow(0 6px 22px rgba(141,203,216,.25))}
#auth .btn-primary{background:linear-gradient(135deg,var(--et-blue),#6fbccd) !important;color:#12333d !important;box-shadow:0 8px 22px rgba(141,203,216,.5)}
#auth .form-control:focus{border-color:var(--et-blue) !important;box-shadow:0 0 0 .2rem rgba(141,203,216,.28) !important}

/* ---- Content entrance (staggered) --------------------------------- */
main>.card,main .row.g-3,main .breadcrumb-wrapper,main .dashboard-card,main>div>.card{animation:et-rise .6s var(--et-ease) both}
main .row.g-3>*{animation:et-pop .55s var(--et-spring) both}
main .row.g-3>*:nth-child(1){animation-delay:.04s}
main .row.g-3>*:nth-child(2){animation-delay:.10s}
main .row.g-3>*:nth-child(3){animation-delay:.16s}
main .row.g-3>*:nth-child(4){animation-delay:.22s}
main .row.g-3>*:nth-child(5){animation-delay:.28s}
@keyframes et-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes et-pop{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
/* dashboard number count-up target */
.et-count{font-variant-numeric:tabular-nums}

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