/* =========================================================================
   UI polish layer for every portal. Loaded after base.css; paired with
   js/ui-pro.js, which adds the icon chips, active-link state and the
   number ticker. Without JS everything here still renders sensibly - the
   JS-only effects key off classes the script adds.

   The app is used mostly on phones, so the base rules target small screens
   and anything heavier (hover effects, blur) is added only for wide /
   hover-capable devices. Effects are CSS re-creations of Magic UI patterns
   (blur-fade, border-beam, shimmer button, number-ticker, dot pattern),
   since the app is plain PHP + Bootstrap rather than React.
   ========================================================================= */

:root{
  --brand: #2ec1ac;
  --brand-dark: #1f8f80;
  --nav-bg-1: #0f172a;
  --nav-bg-2: #1e293b;
  --nav-text: #cbd5e1;

  /* Icon chip gradients, one per area of the app. */
  --ico-blue:   linear-gradient(135deg, #3b82f6, #1d4ed8);
  --ico-sky:    linear-gradient(135deg, #38bdf8, #0284c7);
  --ico-teal:   linear-gradient(135deg, #2dd4bf, #0f9488);
  --ico-green:  linear-gradient(135deg, #4ade80, #16a34a);
  --ico-amber:  linear-gradient(135deg, #fbbf24, #d97706);
  --ico-orange: linear-gradient(135deg, #fb923c, #ea580c);
  --ico-red:    linear-gradient(135deg, #f87171, #dc2626);
  --ico-slate:  linear-gradient(135deg, #94a3b8, #475569);
  --ico-cyan:   linear-gradient(135deg, #22d3ee, #0891b2);
}

/* Faint dot pattern behind the dashboards (static). */
body{
  background-image: radial-gradient(#dfe3ec 1px, transparent 1px);
  background-size: 20px 20px;
}

/* iOS Safari zooms the page when a field under 16px is focused; the app's
   14px root made every input trigger that. */
@media (max-width: 767px){
  .form-control,
  .form-select{ font-size: 16px; }
}

/* --- Navigation ---------------------------------------------------------- */

#dashboard-menu.bg-dark{
  background: linear-gradient(180deg, var(--nav-bg-1), var(--nav-bg-2)) !important;
}

/* .text-muted is !important and #6c757d on a dark background fails
   contrast, so lift it for menu links only. */
#dashboard-menu .nav-link.text-muted,
#dashboard-menu .nav-link{
  color: var(--nav-text) !important;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  transition: background-color .15s ease, color .15s ease;
}

#dashboard-menu .nav-link:hover,
#dashboard-menu .nav-link:focus-visible{
  color: #fff !important;
  background-color: rgba(255,255,255,.07);
}

/* Each portal's setActive() adds .active by substring match, so on
   food_order_logs.php it also lights up food_order.php. ui-pro.js marks the
   exact page with .ui-active; only that one is highlighted. */
#dashboard-menu .nav-link.active:not(.ui-active),
#dashboard-menu .dropdown-item.active:not(.ui-active){
  background-color: transparent;
  color: inherit;
}

#dashboard-menu .nav-link.ui-active{
  color: #fff !important;
  background-color: rgba(46,193,172,.18);
  box-shadow: inset 3px 0 0 var(--brand);
}

#dashboard-menu .dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

#dashboard-menu .dropdown-item.ui-active{
  background-color: rgba(46,193,172,.14);
  color: #0f5f55;
  font-weight: 500;
}

/* Square gradient chip holding a white icon. */
.ui-ico{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  background: var(--ico-slate);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

.ui-ico-sm{
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 12px;
}

.ui-ico.c-blue  { background: var(--ico-blue); }
.ui-ico.c-sky   { background: var(--ico-sky); }
.ui-ico.c-teal  { background: var(--ico-teal); }
.ui-ico.c-green { background: var(--ico-green); }
.ui-ico.c-amber { background: var(--ico-amber); }
.ui-ico.c-orange{ background: var(--ico-orange); }
.ui-ico.c-red   { background: var(--ico-red); }
.ui-ico.c-slate { background: var(--ico-slate); }
.ui-ico.c-cyan  { background: var(--ico-cyan); }

/* --- KPI tiles ------------------------------------------------------------ */

.kpi .ui-ico{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 20px;
  margin: 0 auto 10px;
}

.kpi h2{
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Bootstrap's yellow and cyan text is about 1.6:1 on the tiles' tinted
   backgrounds; these darker shades of the same hues reach 4.5:1. */
.kpi .text-warning{ color: #b45309 !important; text-shadow: none !important; }
.kpi .text-info{ color: #0e7490 !important; }

/* Phones: two tiles per row instead of one full-width column. The pages'
   own inline styles force a single column, so these selectors are written
   to out-rank them. */
@media (max-width: 767px){
  .box-style.d-flex{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .box-style.d-flex > *,
  .box-style.d-flex > * > .card,
  .box-style.d-flex .kpi{
    margin: 0 !important;
    width: 100%;
    min-width: 0;
    height: 100%;
  }
  .kpi .card-body{ padding: 12px 10px !important; }
  .kpi h6{ font-size: 13px; margin-bottom: 6px !important; }
  .kpi h2{ font-size: 24px; }
  .kpi .ui-ico{ width: 36px; height: 36px; font-size: 17px; margin-bottom: 6px; }
}

/* --- Shimmer on primary actions ------------------------------------------
   Desktop gets a light sweep on hover; touch screens get a press flash,
   because hover never fires there. */
.btn-primary,
.btn-success{
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-primary::after,
.btn-success::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference){
  @media (hover: hover){
    .btn-primary:hover::after,
    .btn-success:hover::after{
      transform: translateX(120%);
      transition: transform .7s ease;
    }
  }
  @media (hover: none){
    .btn-primary:active::after,
    .btn-success:active::after{
      transform: translateX(120%);
      transition: transform .45s ease;
    }
  }
}

/* --- Blur fade-in ----------------------------------------------------------
   ui-pro.js adds .ui-fade to cards on load with a staggered delay. Blur is
   costly on low-end phones, so it is only used on wide screens. */
@media (prefers-reduced-motion: no-preference){
  @keyframes ui-fade-in{
    from{ opacity: 0; transform: translateY(8px); }
    to{ opacity: 1; transform: none; }
  }
  @keyframes ui-blur-fade-in{
    from{ opacity: 0; transform: translateY(8px); filter: blur(6px); }
    to{ opacity: 1; transform: none; filter: none; }
  }
  /* backwards, not both: a held end state would override the KPI hover
     lift for the life of the page. */
  .ui-fade{
    animation: ui-fade-in .35s ease-out backwards;
    animation-delay: var(--ui-delay, 0ms);
  }
  @media (min-width: 992px){
    .ui-fade{ animation-name: ui-blur-fade-in; }
  }
}

/* --- Border beam -----------------------------------------------------------
   A light that travels around the card edge a few times, then stops, so the
   main flow is never animating forever. */
@property --ui-beam-angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* No position rule here: .card is already position:relative in Bootstrap,
   and the login card is absolutely positioned and must stay that way. */
.ui-beam::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  z-index: 1;
  background: conic-gradient(from var(--ui-beam-angle), transparent 70%, #2ec1ac 85%, #38bdf8 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference){
  @keyframes ui-beam-spin{
    0%  { --ui-beam-angle: 0deg;   opacity: 1; }
    95% { opacity: 1; }
    100%{ --ui-beam-angle: 360deg; opacity: 0; }
  }
  .ui-beam::before{
    animation: ui-beam-spin 3s linear .4s 3;
  }
}