/* =====================================================================
   Material Design 3 Theme Overlay  —  TaskGorilla SaaS
   ---------------------------------------------------------------------
   Loaded LAST (after custom.css) so it restyles the whole app at once.
   Built around the existing brand primary (#696cff) using an MD3
   tonal palette, elevation system, shape scale and state layers.
   Author: feature/ui-enhance
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Flex:opsz,wght@8..144,400;8..144,500;8..144,600&display=swap');

/* ---------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------- */
:root {
  /* Brand-derived tonal palette (primary = #696cff) */
  --md-primary:            #696cff;
  --md-primary-rgb:        105, 108, 255;
  --md-primary-hover:      #5457e6;
  --md-primary-press:      #484bd1;
  --md-on-primary:         #ffffff;
  --md-primary-container:  #e7e7ff;
  --md-on-primary-container:#1b1b6b;

  --md-secondary:          #8592a3;
  --md-secondary-container:#eef0f4;

  --md-tertiary:           #ff5b91;
  --md-tertiary-container: #ffe1ec;

  /* Surfaces & background (MD3 neutral tints toward primary) */
  --md-background:         #f6f6fb;
  --md-surface:            #ffffff;
  --md-surface-1:          #fbfbfe;
  --md-surface-2:          #f4f4fb;
  --md-surface-3:          #eeeef9;
  --md-surface-variant:    #f2f2f7;
  --md-on-surface:         #2b2c40;
  --md-on-surface-muted:   #6f7287;
  --md-outline:            #d9dbe6;
  --md-outline-variant:    #e9eaf1;

  /* Semantic containers */
  --md-success:            #38c172;  --md-success-container:#e3f7ec;
  --md-warning:            #ffab00;  --md-warning-container:#fff3da;
  --md-danger:             #ff3e5e;  --md-danger-container: #ffe2e7;
  --md-info:               #17c2d7;  --md-info-container:   #def8fb;

  /* Shape scale (MD3) */
  --md-radius-xs: 6px;
  --md-radius-sm: 10px;
  --md-radius-md: 14px;
  --md-radius-lg: 18px;
  --md-radius-xl: 26px;
  --md-radius-full: 999px;

  /* Elevation (MD3 levels, light-tuned) */
  --md-elev-0: none;
  --md-elev-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px 1px rgba(16,24,40,.05);
  --md-elev-2: 0 1px 2px rgba(16,24,40,.07), 0 3px 8px 1px rgba(16,24,40,.07);
  --md-elev-3: 0 4px 10px 2px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.06);
  --md-elev-4: 0 8px 18px 4px rgba(16,24,40,.10), 0 3px 6px rgba(16,24,40,.07);
  --md-elev-5: 0 14px 28px 6px rgba(16,24,40,.12), 0 5px 10px rgba(16,24,40,.08);

  /* Motion */
  --md-ease: cubic-bezier(.2, 0, 0, 1);          /* emphasized-decelerate */
  --md-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --md-dur-fast: 120ms;
  --md-dur: 200ms;
  --md-dur-slow: 320ms;

  /* State layer opacities */
  --md-state-hover: .08;
  --md-state-press: .12;

  /* Map onto Bootstrap/Sneat variables so the whole app inherits */
  --bs-primary: var(--md-primary);
  --bs-primary-rgb: var(--md-primary-rgb);
  --bs-body-bg: var(--md-background);
  --bs-body-color: var(--md-on-surface);
  --bs-border-radius: var(--md-radius-sm);
  --bs-border-radius-sm: var(--md-radius-xs);
  --bs-border-radius-lg: var(--md-radius-md);
  --bs-border-color: var(--md-outline-variant);
  --bs-font-sans-serif: 'Roboto Flex', 'Roboto', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------- */
body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--md-background) !important;
  color: var(--md-on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .1px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-font-sans-serif);
  font-weight: 600;
  letter-spacing: -.2px;
  color: var(--md-on-surface);
}

a { transition: color var(--md-dur) var(--md-ease-standard); }

/* Smooth global interaction baseline */
.btn, .card, .menu-link, .dropdown-item, .nav-link, .page-link,
.badge, .form-control, .form-select, .list-group-item, .table tbody tr,
.alert, .avatar, .accordion-button {
  transition: background-color var(--md-dur) var(--md-ease-standard),
              color var(--md-dur) var(--md-ease-standard),
              border-color var(--md-dur) var(--md-ease-standard),
              box-shadow var(--md-dur) var(--md-ease-standard),
              transform var(--md-dur-fast) var(--md-ease-standard);
}

/* MD3 scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--md-outline) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--md-outline);
  border-radius: var(--md-radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--md-secondary); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------------
   3. Cards  (MD3 elevated / filled surfaces)
   ------------------------------------------------------------------- */
.card {
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elev-1);
  background: var(--md-surface);
  overflow: hidden;
}
.card:hover { box-shadow: var(--md-elev-2); }

.card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--md-outline-variant);
  font-weight: 600;
  padding: 1.1rem 1.4rem;
}
.card .card-body { padding: 1.4rem; }
.card .card-footer { background: transparent; border-top: 1px solid var(--md-outline-variant); }

/* Elevation utility helpers */
.shadow-sm  { box-shadow: var(--md-elev-1) !important; }
.shadow     { box-shadow: var(--md-elev-2) !important; }
.shadow-lg  { box-shadow: var(--md-elev-4) !important; }

/* ---------------------------------------------------------------------
   4. Buttons  (MD3 filled / tonal / outlined / text) + ripple
   ------------------------------------------------------------------- */
.btn {
  --md-btn-shade: transparent;
  position: relative;
  overflow: hidden;
  border-radius: var(--md-radius-full);
  font-weight: 500;
  letter-spacing: .2px;
  text-transform: none;
  padding: .5rem 1.35rem;
  box-shadow: none;
  border-width: 1px;
  isolation: isolate;
}
.btn:focus-visible {
  outline: 2px solid rgba(var(--md-primary-rgb), .55);
  outline-offset: 2px;
}
/* State layer */
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-dur) var(--md-ease-standard);
  z-index: -1;
  pointer-events: none;
}
.btn:hover::after  { opacity: var(--md-state-hover); }
.btn:active::after { opacity: var(--md-state-press); }
.btn:active { transform: scale(.985); }

/* Filled primary */
.btn-primary {
  background: var(--md-primary);
  border-color: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elev-1);
}
.btn-primary:hover  { background: var(--md-primary-hover); border-color: var(--md-primary-hover); color:#fff; box-shadow: var(--md-elev-2); }
.btn-primary:active,
.btn-primary:focus  { background: var(--md-primary-press) !important; border-color: var(--md-primary-press) !important; color:#fff !important; }

/* Other filled colors keep tonal elevation */
.btn-success { background: var(--md-success); border-color: var(--md-success); color:#fff; box-shadow: var(--md-elev-1); }
.btn-danger  { background: var(--md-danger);  border-color: var(--md-danger);  color:#fff; box-shadow: var(--md-elev-1); }
.btn-warning { background: var(--md-warning); border-color: var(--md-warning); color:#3a2c00; box-shadow: var(--md-elev-1); }
.btn-info    { background: var(--md-info);    border-color: var(--md-info);    color:#fff; box-shadow: var(--md-elev-1); }
.btn-secondary{background: var(--md-secondary);border-color:var(--md-secondary);color:#fff; box-shadow: var(--md-elev-1); }
.btn-success:hover,.btn-danger:hover,.btn-warning:hover,.btn-info:hover,.btn-secondary:hover{ box-shadow: var(--md-elev-2); }

/* Tonal / soft buttons */
.btn-label-primary,.btn-soft-primary { background: var(--md-primary-container); color: var(--md-on-primary-container); border-color: transparent; }
.btn-label-primary:hover,.btn-soft-primary:hover { background: #dadaff; color: var(--md-on-primary-container); }

/* Outlined */
.btn-outline-primary { color: var(--md-primary); border-color: var(--md-outline); }
.btn-outline-primary:hover { background: var(--md-primary-container); border-color: var(--md-primary); color: var(--md-on-primary-container); }
[class*="btn-outline-"] { background: transparent; }

/* Text buttons */
.btn-text, .btn-link { box-shadow: none; }

/* Icon buttons stay circular */
.btn-icon, .btn.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--md-radius-full); display: inline-flex; align-items: center; justify-content: center; }

.btn-sm { padding: .35rem 1rem; font-size: .8125rem; }
.btn-lg { padding: .7rem 1.8rem; font-size: 1rem; }

/* FAB-like floating action affordances already in app */
.floating-buy-plan .buy-button,
.timer-img, .chat-img { box-shadow: var(--md-elev-3); }

/* ---------------------------------------------------------------------
   5. Ripple (driven by material-theme.js)
   ------------------------------------------------------------------- */
.md-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: currentColor;
  opacity: .28;
  pointer-events: none;
  animation: md-ripple-anim 560ms var(--md-ease) forwards;
  z-index: 0;
}
@keyframes md-ripple-anim {
  to { transform: scale(2.6); opacity: 0; }
}

/* ---------------------------------------------------------------------
   6. Forms  (MD3 outlined fields)
   ------------------------------------------------------------------- */
.form-control, .form-select {
  border-radius: var(--md-radius-sm);
  border: 1px solid var(--md-outline);
  background-color: var(--md-surface);
  padding: .58rem .9rem;
  color: var(--md-on-surface);
}
.form-control:hover, .form-select:hover { border-color: var(--md-secondary); }
.form-control:focus, .form-select:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb), .16);
  background-color: var(--md-surface);
}
.form-control::placeholder { color: var(--md-on-surface-muted); opacity: .8; }
.form-label { font-weight: 500; color: var(--md-on-surface); margin-bottom: .4rem; }

.input-group-text { border-radius: var(--md-radius-sm); background: var(--md-surface-2); border-color: var(--md-outline); }

/* Switches & checks */
.form-check-input { border-color: var(--md-outline); }
.form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); }
.form-check-input:focus { border-color: var(--md-primary); box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb), .16); }
.form-switch .form-check-input { height: 1.25rem; width: 2.25rem; }

/* Select2 alignment with MD3 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-radius: var(--md-radius-sm) !important;
  border: 1px solid var(--md-outline) !important;
  min-height: 42px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
  border-color: var(--md-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--md-primary-rgb), .16);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--md-primary) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
  border: none !important;
  border-radius: var(--md-radius-full) !important;
  padding: 2px 10px;
}

/* ---------------------------------------------------------------------
   7. Sidebar menu  (MD3 navigation rail/drawer)
   ------------------------------------------------------------------- */
.menu.bg-menu-theme, #layout-menu {
  background: var(--md-surface) !important;
  border-right: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-1);
}
.menu-inner > .menu-item { margin: 1px .65rem; }
.bg-menu-theme .menu-inner > .menu-item .menu-link {
  border-radius: var(--md-radius-full);
  padding: .55rem .95rem;
  font-weight: 500;
  position: relative;
  overflow: hidden;
}
.bg-menu-theme .menu-inner > .menu-item .menu-link:hover { background: var(--md-surface-3); }

/* Active item = primary tonal pill */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
  box-shadow: none !important;
}
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link .menu-icon { color: var(--md-primary) !important; }

/* Submenus */
.bg-menu-theme .menu-sub > .menu-item .menu-link { border-radius: var(--md-radius-full); padding-block: .42rem; }
.bg-menu-theme .menu-sub > .menu-item.active .menu-link { color: var(--md-primary) !important; font-weight: 600; background: transparent; }
.menu-header-text { color: var(--md-on-surface-muted); font-weight: 600; letter-spacing: .6px; }
.menu-icon { transition: color var(--md-dur) var(--md-ease-standard); }

/* Workspace switcher button */
#layout-menu .btn.dropdown-toggle.btn-primary { box-shadow: var(--md-elev-1); }

/* ---------------------------------------------------------------------
   8. Top navbar  (MD3 top app bar)
   ------------------------------------------------------------------- */
.layout-navbar, .navbar {
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--md-elev-1);
  border-radius: var(--md-radius-lg);
}
.layout-navbar .navbar-nav .nav-link { border-radius: var(--md-radius-full); }
.layout-navbar .navbar-nav .nav-link:hover { background: var(--md-surface-3); }

/* Avatar polish */
.avatar img, .avatar .avatar-initial { border-radius: var(--md-radius-full); }
.avatar-initial { background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 600; }

/* ---------------------------------------------------------------------
   9. Dropdowns / menus  (MD3 menu surface)
   ------------------------------------------------------------------- */
.dropdown-menu {
  border-radius: var(--md-radius-md);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elev-3);
  padding: .4rem;
}
.dropdown-item { border-radius: var(--md-radius-sm); padding: .5rem .8rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--md-surface-3); }
.dropdown-item.active, .dropdown-item:active { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* ---------------------------------------------------------------------
   10. Tables  (MD3 data table)
   ------------------------------------------------------------------- */
.table { --bs-table-bg: transparent; color: var(--md-on-surface); }
.table > thead th, .table thead th {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .5px;
  font-weight: 600;
  color: var(--md-on-surface-muted);
  border-bottom: 1px solid var(--md-outline-variant);
  background: var(--md-surface-2);
}
.table > tbody > tr { border-color: var(--md-outline-variant); }
.table > tbody > tr:hover { background: var(--md-surface-2); }
.table td, .table th { padding: .85rem 1rem; vertical-align: middle; }

.bootstrap-table .fixed-table-container { border-radius: var(--md-radius-md); border-color: var(--md-outline-variant); }
.bootstrap-table .fixed-table-toolbar .btn { border-radius: var(--md-radius-full); }
.fixed-table-pagination .page-item.active .page-link { background: var(--md-primary); border-color: var(--md-primary); color:#fff; }
.page-link { border-radius: var(--md-radius-sm) !important; margin: 0 2px; border-color: var(--md-outline-variant); color: var(--md-on-surface); }
.page-link:hover { background: var(--md-surface-3); }
.page-item.active .page-link { background: var(--md-primary); border-color: var(--md-primary); }

/* ---------------------------------------------------------------------
   11. Badges & chips  (MD3 tonal)
   ------------------------------------------------------------------- */
.badge { border-radius: var(--md-radius-full); font-weight: 600; letter-spacing: .2px; padding: .35em .7em; }
.bg-label-primary,  .badge.bg-label-primary  { background: var(--md-primary-container) !important;  color: var(--md-on-primary-container) !important; }
.bg-label-success,  .badge.bg-label-success  { background: var(--md-success-container) !important;  color: #126e3b !important; }
.bg-label-danger,   .badge.bg-label-danger   { background: var(--md-danger-container) !important;   color: #b21533 !important; }
.bg-label-warning,  .badge.bg-label-warning  { background: var(--md-warning-container) !important;  color: #9a6700 !important; }
.bg-label-info,     .badge.bg-label-info     { background: var(--md-info-container) !important;     color: #0b7280 !important; }
.bg-label-secondary,.badge.bg-label-secondary{ background: var(--md-secondary-container) !important;color: #4c5564 !important; }

/* ---------------------------------------------------------------------
   12. Modals / offcanvas  (MD3 dialog)
   ------------------------------------------------------------------- */
.modal-content {
  border-radius: var(--md-radius-xl);
  border: none;
  box-shadow: var(--md-elev-5);
  overflow: hidden;
}
.modal-header { border-bottom: 1px solid var(--md-outline-variant); padding: 1.25rem 1.5rem; }
.modal-body   { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--md-outline-variant); padding: 1rem 1.5rem; }
.offcanvas { border-radius: var(--md-radius-lg) 0 0 var(--md-radius-lg); border: none; box-shadow: var(--md-elev-4); }
.modal-backdrop.show { opacity: .32; }

/* ---------------------------------------------------------------------
   13. Tabs / pills / nav  (MD3 secondary tabs)
   ------------------------------------------------------------------- */
.nav-tabs { border-bottom: 1px solid var(--md-outline-variant); gap: .25rem; }
.nav-tabs .nav-link {
  border: none; border-radius: var(--md-radius-full);
  color: var(--md-on-surface-muted); font-weight: 500;
  padding: .55rem 1.1rem;
}
.nav-tabs .nav-link:hover { background: var(--md-surface-3); color: var(--md-on-surface); }
.nav-tabs .nav-link.active {
  color: var(--md-primary); background: var(--md-primary-container);
  border: none; position: relative;
}
.nav-pills .nav-link { border-radius: var(--md-radius-full); }
.nav-pills .nav-link.active { background: var(--md-primary); color:#fff; box-shadow: var(--md-elev-1); }

/* ---------------------------------------------------------------------
   14. Alerts  (MD3 tonal banners)
   ------------------------------------------------------------------- */
.alert { border: none; border-radius: var(--md-radius-md); }
.alert-primary { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.alert-success { background: var(--md-success-container); color:#126e3b; }
.alert-danger  { background: var(--md-danger-container);  color:#b21533; }
.alert-warning { background: var(--md-warning-container); color:#9a6700; }
.alert-info    { background: var(--md-info-container);    color:#0b7280; }

/* ---------------------------------------------------------------------
   15. Progress, list groups, accordions, tooltips
   ------------------------------------------------------------------- */
.progress { border-radius: var(--md-radius-full); background: var(--md-surface-3); height: .55rem; }
.progress-bar { border-radius: var(--md-radius-full); background: var(--md-primary); }

.list-group-item { border-color: var(--md-outline-variant); }
.list-group-item:first-child { border-top-left-radius: var(--md-radius-md); border-top-right-radius: var(--md-radius-md); }
.list-group-item:last-child  { border-bottom-left-radius: var(--md-radius-md); border-bottom-right-radius: var(--md-radius-md); }

.accordion-item { border-color: var(--md-outline-variant); border-radius: var(--md-radius-md) !important; overflow: hidden; margin-bottom: .6rem; }
.accordion-button { border-radius: 0 !important; }
.accordion-button:not(.collapsed) { background: var(--md-primary-container); color: var(--md-on-primary-container); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--md-outline-variant); }

.tooltip .tooltip-inner { border-radius: var(--md-radius-sm); padding: .4rem .7rem; box-shadow: var(--md-elev-2); }

/* Toastr → MD3 snackbar */
#toast-container > div {
  border-radius: var(--md-radius-md) !important;
  box-shadow: var(--md-elev-4) !important;
  opacity: 1 !important;
  font-family: var(--bs-font-sans-serif);
}

/* ---------------------------------------------------------------------
   16. Misc polish
   ------------------------------------------------------------------- */
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--md-on-surface-muted); text-decoration: none; }
.breadcrumb-item.active { color: var(--md-primary); font-weight: 600; }

hr, .dropdown-divider { border-color: var(--md-outline-variant); opacity: 1; }

.text-primary { color: var(--md-primary) !important; }
.bg-primary { background-color: var(--md-primary) !important; }

/* Focus-visible accessibility everywhere */
a:focus-visible, .menu-link:focus-visible, .dropdown-item:focus-visible {
  outline: 2px solid rgba(var(--md-primary-rgb), .5);
  outline-offset: 2px;
  border-radius: var(--md-radius-xs);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, .btn, .card, .menu-link { transition: none !important; animation: none !important; }
  .md-ripple { display: none; }
}

/* Subtle entrance for content cards */
@keyframes md-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.content-wrapper .card { animation: md-fade-up var(--md-dur-slow) var(--md-ease) both; }

/* =====================================================================
   SHOWCASE A — Dashboard stat tiles (.gradient-card)
   Upgrade the small corner-blob cards into full MD3 gradient surfaces.
   ===================================================================== */
.gradient-card {
  border: none !important;
  border-radius: var(--md-radius-lg) !important;
  color: #fff !important;
  box-shadow: var(--md-elev-2) !important;
  transition: transform var(--md-dur) var(--md-ease), box-shadow var(--md-dur) var(--md-ease) !important;
}
.gradient-card:hover { transform: translateY(-4px); box-shadow: var(--md-elev-4) !important; }
.gradient-card::before {
  width: 100% !important; height: 100% !important;
  opacity: 1 !important;
  border-radius: inherit;
}
/* Vibrant brand-aligned gradients */
.gradient-card-primary::before { background: linear-gradient(135deg, #696cff 0%, #8f6dff 55%, #b57bff 100%) !important; }
.gradient-card-success::before { background: linear-gradient(135deg, #0fa968 0%, #38c172 100%) !important; }
.gradient-card-warning::before { background: linear-gradient(135deg, #ff9f1a 0%, #ffba49 100%) !important; }
.gradient-card-info::before    { background: linear-gradient(135deg, #11a8c3 0%, #17c2d7 100%) !important; }

.gradient-card .card-body { color: #fff; }
.gradient-card h6 { color: rgba(255,255,255,.9); font-weight: 500; }
.gradient-card h3 { color: #fff; font-size: 2rem; line-height: 1.1; }
.gradient-card a, .gradient-card a small, .gradient-card .text-success,
.gradient-card .text-primary, .gradient-card .text-warning, .gradient-card .text-info {
  color: rgba(255,255,255,.95) !important; font-weight: 500;
}
.gradient-card a { transition: opacity var(--md-dur); }
.gradient-card a:hover { opacity: .82; }
/* Frosted icon chip */
.gradient-card .avatar .avatar-initial {
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
  border-radius: var(--md-radius-md) !important;
  width: 48px; height: 48px;
}
.gradient-card .avatar .avatar-initial i { color: #fff !important; }

/* =====================================================================
   SHOWCASE B — Authentication (login / register / reset)
   Polished MD3 sign-in surface with an ambient animated backdrop.
   ===================================================================== */
.authentication-wrapper {
  position: relative;
  min-height: 100vh;
}
.authentication-wrapper::before {
  content: "";
  position: fixed; inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(105,108,255,.20), transparent 60%),
    radial-gradient(900px 480px at 108% 8%, rgba(255,91,145,.16), transparent 55%),
    radial-gradient(800px 600px at 50% 120%, rgba(23,194,215,.14), transparent 55%),
    var(--md-background);
  background-size: 200% 200%;
  animation: md-aurora 18s var(--md-ease-standard) infinite alternate;
}
@keyframes md-aurora {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  100% { background-position: 30% 20%, 70% 30%, 40% 80%; }
}

.authentication-wrapper .authentication-inner { width: 100%; max-width: 440px; }
.authentication-wrapper .card {
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--md-radius-xl) !important;
  box-shadow: var(--md-elev-5);
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.authentication-wrapper .card-body { padding: 2.4rem 2.2rem; }
.authentication-wrapper .app-brand { margin-bottom: 1rem; }
.authentication-wrapper .app-brand img { max-width: 220px; height: auto; }
.authentication-wrapper h4 { font-weight: 700; }
.authentication-wrapper .form-control { padding: .7rem .95rem; }
.authentication-wrapper .btn { padding-block: .65rem; font-weight: 600; }
.authentication-wrapper .btn-primary { box-shadow: var(--md-elev-2); }
/* Demo role buttons → tonal so the primary CTA stays dominant */
.authentication-wrapper .superadmin-login,
.authentication-wrapper .admin-login,
.authentication-wrapper .member-login,
.authentication-wrapper .client-login { box-shadow: none; }
.authentication-wrapper footer { position: relative; z-index: 1; }
.authentication-wrapper a { color: var(--md-primary); }