/*
 * Glassmorphism / soft-3D treatment for the member portal.
 *
 * Scope: linked from every page that already loads portal-ui.css (the
 * pages brought into the modernized "portal-*" design system this project
 * uses) - Product.aspx, ProductDetail.aspx, ProductNew.aspx,
 * ProductSubmitExtendedWarranty.aspx, ServiceRequest.aspx, Profile.aspx,
 * ChangePassword.aspx, UpdateEmail.aspx, UpdateMobileNumber.aspx,
 * Notifications.aspx. Nothing in portal-ui.css itself was touched; this
 * file only adds a visual layer on top, loaded after it.
 *
 * Direction: frosted-glass panels (translucent background + backdrop-blur)
 * over a soft multi-tone gradient backdrop (glass needs color behind it to
 * actually read as glass - over plain white, blur is invisible), plus a
 * gentle hover-lift/tilt on cards for the "a bit 3D" part of the brief.
 *
 * Palette: built around Sharp's brand red (#ED1C24, from assets/img/logo.png),
 * not a generic admin-template violet - every accent, glow, gradient and
 * tinted shadow below is red/warm-toned so the glass treatment actually
 * matches the company's own colour rather than clashing with it.
 *
 * Started as Product.aspx-only (product-glass.css); renamed/extended here
 * once the direction was approved to roll out portal-wide. .portal-product-*
 * rules below only ever match on pages that have those elements (Product.aspx),
 * same as everywhere else in this file - a selector simply has no effect on
 * a page that doesn't contain it.
 */

body {
  background:
    radial-gradient(1200px circle at 8% -10%, rgba(237, 28, 36, 0.14), transparent 45%),
    radial-gradient(900px circle at 108% 8%, rgba(255, 140, 60, 0.1), transparent 45%),
    radial-gradient(1000px circle at 50% 115%, rgba(196, 18, 60, 0.07), transparent 50%),
    #faf5f5 !important;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* ---- Shared glass panel base: translucent + blurred + soft depth shadow.
   Covers every "card-like" surface across the portal: the page header, the
   generic Bootstrap .card used by the form pages (Profile, ChangePassword,
   UpdateEmail, UpdateMobileNumber, ProductNew, ProductSubmitExtendedWarranty,
   ServiceRequest, ProductDetail), and the Product.aspx-specific panels. ---- */
.portal-page-header,
.container-xxl .card,
.portal-search-box .form-control,
.portal-stat-card,
.portal-empty-state,
.portal-product-card,
.portal-notice-card,
.portal-sticky-footer {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 8px 28px rgba(120, 20, 24, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Page title: a card of its own now (it wasn't before), so give it the
   same rounded/padded treatment as the other panels. */
.portal-page-header {
  padding: 1.1rem 1.4rem;
  border-radius: 0.9rem;
}

/* Generic form-page content card (Bootstrap .card): round it to match the
   rest of the glass surfaces - the vendor theme's default is a harder,
   smaller radius. */
.container-xxl .card {
  border-radius: 1rem;
}

.portal-search-box .form-control {
  border-radius: 0.75rem;
}
.portal-search-box .form-control:focus {
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 8px 28px rgba(237, 28, 36, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Sticky Save/Cancel footer (Profile, ProductNew, ProductDetail,
   ProductSubmitExtendedWarranty): keep it a touch more opaque than other
   panels since it's the one place action buttons sit directly on glass and
   need to stay unambiguous while scrolling content passes behind it. */
.portal-sticky-footer {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 0 0 1rem 1rem;
}

/* ---- KPI stat cards (Product.aspx): glass + a soft color-matched glow per
   card, plus a gentle hover-lift. ---- */
.portal-stat-card {
  border-radius: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.portal-stat-card:hover {
  transform: translateY(-4px);
}
.portal-stat-card.portal-stat-total {
  box-shadow: 0 8px 28px rgba(237, 28, 36, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.portal-stat-card.portal-stat-warning {
  box-shadow: 0 8px 28px rgba(166, 112, 10, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.portal-stat-card.portal-stat-success {
  box-shadow: 0 8px 28px rgba(26, 122, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.portal-stat-card.portal-stat-danger {
  box-shadow: 0 8px 28px rgba(179, 38, 30, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* Icon badges: a touch of embossed depth instead of a flat tint block. */
.portal-stat-icon {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), inset 0 -2px 3px rgba(0, 0, 0, 0.06);
}

/* ---- Empty state panel (Product.aspx) ---- */
.portal-empty-state {
  border-radius: 1rem;
  border-style: solid;
}
.portal-empty-state-icon {
  box-shadow: 0 10px 24px rgba(237, 28, 36, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* ---- Product cards (Product.aspx): the centerpiece. Glass panel + a
   gentle 3D tilt-lift on hover (perspective + rotateX), not just a flat
   translateY, so it actually reads as "a bit 3D". ---- */
.portal-product-card {
  border-radius: 1rem;
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portal-product-card:hover {
  transform: perspective(900px) rotateX(1.5deg) translateY(-6px);
  box-shadow:
    0 20px 40px rgba(120, 20, 24, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.portal-product-card-header {
  background: linear-gradient(135deg, rgba(237, 28, 36, 0.1), rgba(255, 140, 60, 0.06));
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
.portal-product-icon {
  background: linear-gradient(145deg, #ff4d4d, #b0121a);
  color: #fff;
  box-shadow: 0 6px 14px rgba(237, 28, 36, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Status badges (Product.aspx, ProductDetail.aspx): soft gradient fill +
   matching glow instead of a flat tinted pill, so they read as lit rather
   than just colored. */
.portal-status-badge {
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.portal-status-warning {
  background: linear-gradient(135deg, #ffe3a8, #ffd37a);
  box-shadow: 0 3px 10px rgba(166, 112, 10, 0.25);
}
.portal-status-success {
  background: linear-gradient(135deg, #b3f0c4, #8be8a8);
  box-shadow: 0 3px 10px rgba(26, 122, 60, 0.25);
}
.portal-status-danger {
  background: linear-gradient(135deg, #ffc2c2, #ff9d9d);
  box-shadow: 0 3px 10px rgba(179, 38, 30, 0.25);
}

.portal-product-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

/* ---- Notice history cards (Notifications.aspx): same glass treatment as
   product cards, lighter hover (a list of notices, not a grid of cards -
   lift only, no tilt). ---- */
.portal-notice-card {
  border-radius: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.portal-notice-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(120, 20, 24, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.portal-notice-card-header {
  background: linear-gradient(135deg, rgba(237, 28, 36, 0.1), rgba(255, 140, 60, 0.06));
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
}
.portal-notice-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.55);
}

/* ---- Outline buttons across the portal (View Details, form Save, etc.):
   gradient fill + glow on hover instead of a plain flat outline-fill. ---- */
.btn-outline-primary {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn-outline-primary:hover {
  background: linear-gradient(135deg, #ff4d4d, #b0121a);
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(237, 28, 36, 0.35);
  transform: translateY(-2px);
}
.btn-primary {
  background: linear-gradient(135deg, #ff4d4d, #b0121a);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(237, 28, 36, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  box-shadow: 0 8px 20px rgba(237, 28, 36, 0.4);
  transform: translateY(-2px);
}

/* ---- Sidebar menu active state. theme-default.css (the vendor file, left
   untouched) was already half-customized: the selected item's text/icon
   color was changed to a dull red (#d9534f) at some point, but its
   background highlight was left on the original template violet
   (rgba(105, 108, 255, 0.16)) - that mismatched violet pill behind
   already-reddish text/icon is exactly the "purple when selected" look.
   Both now match the same Sharp red. Matches theme-default.css's own
   selectors/specificity (including !important where it used it) so this
   reliably wins over it. ---- */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: #ed1c24;
  background-color: rgba(237, 28, 36, 0.12) !important;
}
.bg-menu-theme .menu-inner > .menu-item.active:before {
  background: #ed1c24;
}
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon {
  color: #ed1c24;
}
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
  background-color: #ed1c24 !important;
}

/* Reduce the hover-tilt/lift on touch devices (no hover intent, and
   perspective tricks can look odd on first-tap) and for anyone who's asked
   the OS for less motion. */
@media (hover: none) {
  .portal-product-card:hover,
  .portal-notice-card:hover,
  .portal-stat-card:hover,
  .btn-outline-primary:hover,
  .btn-primary:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-stat-card,
  .portal-product-card,
  .portal-notice-card,
  .btn-outline-primary,
  .btn-primary {
    transition: none;
  }
  .portal-product-card:hover,
  .portal-notice-card:hover,
  .portal-stat-card:hover,
  .btn-outline-primary:hover,
  .btn-primary:hover {
    transform: none;
  }
}