/* Alasta v5.22.15.T175 - HarmonyOS inspired polish + pixel boot colors */

:root,
:root[data-theme="light"] {
  --bg: #f3f7fb;
  --bg-2: #ffffff;
  --surface: rgba(255, 255, 255, 0.92);
  --surface-2: rgba(255, 255, 255, 0.76);
  --surface-3: #eef4fa;
  --surface-hover: rgba(241, 247, 253, 0.96);
  --border: rgba(207, 218, 232, 0.82);
  --border-2: rgba(187, 201, 219, 0.9);
  --border-strong: #aebdd1;
  --text: #111827;
  --text-2: #223044;
  --muted: #66758a;
  --muted-2: #98a6b9;
  --accent: #0a59f7;
  --accent-2: #004fd6;
  --accent-soft: #eef5ff;
  --accent-soft-2: #dceaff;
  --accent-glow: rgba(10, 89, 247, 0.16);
  --green: #0f8b4c;
  --green-soft: #edf9f2;
  --red: #d92d20;
  --red-soft: #fff1f0;
  --amber: #b86b00;
  --amber-soft: #fff7e7;
  --blue: #0a59f7;
  --blue-soft: #eef5ff;
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.035);
  --shadow-sm: 0 5px 16px rgba(39, 56, 82, 0.07), 0 1px 2px rgba(39, 56, 82, 0.04);
  --shadow: 0 14px 38px rgba(39, 56, 82, 0.09), 0 3px 8px rgba(39, 56, 82, 0.045);
  --shadow-lg: 0 24px 70px rgba(39, 56, 82, 0.14), 0 8px 18px rgba(39, 56, 82, 0.06);
  --ring: 0 0 0 4px rgba(10, 89, 247, 0.14);
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
}

body {
  background: linear-gradient(180deg, #f7faff 0%, #eef4fa 48%, #f7f9fc 100%) !important;
  color: var(--text);
}

.topbar,
.breadcrumb-bar {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom: 1px solid rgba(213, 222, 235, 0.72) !important;
  box-shadow: 0 8px 24px rgba(39, 56, 82, 0.055) !important;
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}

.sidebar {
  background: rgba(255, 255, 255, 0.82) !important;
  border-right: 1px solid rgba(213, 222, 235, 0.72) !important;
  box-shadow: 10px 0 32px rgba(39, 56, 82, 0.05) !important;
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
}

.card,
.settings-card,
.form-card,
.assistant-card,
.table-card,
.modal-body,
.t167-module-panel,
.mes-card,
.dashboard-card,
.mes-orders-filter-bar,
.mes-pagination-bar,
.rcp-range-section,
.rps-card,
.sales-card,
.integ-card {
  background: var(--surface) !important;
  border: 1px solid rgba(210, 221, 235, 0.86) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: blur(12px) saturate(1.08);
  -webkit-backdrop-filter: blur(12px) saturate(1.08);
}

.card:hover,
.settings-card:hover,
.table-card:hover,
.mes-card:hover,
.dashboard-card:hover,
.mes-order-row:hover,
.integ-card:hover,
.rcp-range-card:hover,
.rcp-today-card-mini:hover {
  box-shadow: var(--shadow) !important;
  transform: translateY(-1px) !important;
}

.card-header,
.modal-header,
.modal-footer,
.rcp-range-head,
.mes-shop-header,
.mes-section-head {
  border-color: rgba(214, 224, 237, 0.82) !important;
}

.input,
input,
select,
textarea {
  background: rgba(255, 255, 255, 0.88) !important;
  border-color: rgba(190, 204, 222, 0.92) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75) !important;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(10, 89, 247, 0.72) !important;
  box-shadow: var(--ring), inset 0 1px 1px rgba(255, 255, 255, 0.85) !important;
}

.btn,
.pill,
.mes-tab,
.iconbtn {
  border-radius: 999px !important;
  box-shadow: none !important;
}

.btn.primary,
.btn.success,
.btn.warn,
.btn.danger {
  box-shadow: 0 8px 18px rgba(10, 89, 247, 0.18) !important;
}

.btn:not(.primary):not(.danger):not(.success):not(.warn),
.pill,
.mes-tab {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(196, 209, 226, 0.86) !important;
}

.btn:not(.primary):not(.danger):not(.success):not(.warn):hover,
.pill:hover,
.mes-tab:hover {
  background: rgba(245, 249, 255, 0.96) !important;
  border-color: rgba(151, 173, 205, 0.92) !important;
}

.pill.active,
.mes-tab.active {
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%) !important;
  border-color: rgba(10, 89, 247, 0.28) !important;
  color: var(--accent) !important;
  box-shadow: 0 8px 18px rgba(10, 89, 247, 0.12) !important;
}

.brand-logo-wrap {
  gap: 10px !important;
}

.brand-a-mark {
  width: 38px !important;
  height: 38px !important;
  padding: 0 0 4px 0 !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, #17202d 0%, #2b3545 100%) !important;
  color: #ffffff !important;
  text-indent: 0 !important;
  overflow: visible !important;
  box-shadow: 0 10px 24px rgba(23, 32, 45, 0.22), inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

.brand-text .brand-name {
  display: block !important;
}

.brand-sub {
  color: var(--muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}

.rcp-range-section {
  padding: 20px 22px !important;
}

.rcp-range-head {
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(221, 229, 240, 0.78) !important;
}

.rcp-range-cards,
.rcp-today-summary-grid {
  gap: 12px !important;
}

.rcp-range-card,
.rcp-today-card-mini {
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(249,251,255,0.92) 100%) !important;
  border: 1px solid rgba(210, 221, 235, 0.88) !important;
  border-left: 1px solid rgba(210, 221, 235, 0.88) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-xs) !important;
  transition: transform 0.16s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

.rcp-range-card.rcp-color-green,
.rcp-today-card-mini.rcp-color-green {
  background: linear-gradient(135deg, rgba(240,253,244,0.95) 0%, rgba(255,255,255,0.92) 58%) !important;
}

.rcp-range-card.rcp-color-orange,
.rcp-today-card-mini.rcp-color-orange,
.rcp-today-card-mini.rcp-color-amber {
  background: linear-gradient(135deg, rgba(255,247,237,0.96) 0%, rgba(255,255,255,0.92) 58%) !important;
}

.rcp-range-card.rcp-color-blue,
.rcp-today-card-mini.rcp-color-blue {
  background: linear-gradient(135deg, rgba(239,246,255,0.96) 0%, rgba(255,255,255,0.92) 58%) !important;
}

.rcp-today-card-mini.rcp-color-red {
  background: linear-gradient(135deg, rgba(255,241,240,0.96) 0%, rgba(255,255,255,0.92) 58%) !important;
}

.rcp-today-card-mini.rcp-color-purple {
  background: linear-gradient(135deg, rgba(246,240,255,0.96) 0%, rgba(255,255,255,0.92) 58%) !important;
}

.rcp-range-card.rcp-color-green .rcp-rc-val,
.rcp-today-card-mini.rcp-color-green .rcp-card-val { color: #0f8b4c !important; }
.rcp-range-card.rcp-color-orange .rcp-rc-val,
.rcp-today-card-mini.rcp-color-orange .rcp-card-val,
.rcp-today-card-mini.rcp-color-amber .rcp-card-val { color: #b86b00 !important; }
.rcp-range-card.rcp-color-blue .rcp-rc-val,
.rcp-today-card-mini.rcp-color-blue .rcp-card-val { color: #0a59f7 !important; }
.rcp-today-card-mini.rcp-color-red .rcp-card-val { color: #d92d20 !important; }
.rcp-today-card-mini.rcp-color-purple .rcp-card-val { color: #7c3aed !important; }
.rcp-range-card.rcp-color-gray .rcp-rc-val,
.rcp-today-card-mini.rcp-color-gray .rcp-card-val,
.rcp-today-card-mini.rcp-color-slate .rcp-card-val { color: #344054 !important; }

.rcp-leave-breakdown {
  background: rgba(249, 251, 255, 0.84) !important;
  border-color: rgba(210, 221, 235, 0.82) !important;
  border-radius: 16px !important;
}

.rcp-leave-row,
.rcp-card-row,
.mes-order-row {
  border-color: rgba(213, 222, 235, 0.86) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-xs) !important;
}

.mes-order-row {
  background: rgba(255, 255, 255, 0.9) !important;
}

.mes-orders-filter-bar {
  padding: 16px !important;
}

.mes-pagination-footer,
.pagination {
  border-color: rgba(213, 222, 235, 0.78) !important;
}

.boot-spinner {
  display: none !important;
}

#boot-screen {
  background: #151c28 !important;
  color: rgba(255, 255, 255, 0.74) !important;
  gap: 18px !important;
}

.boot-pixel-grid {
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.24));
}

.boot-pixel {
  background: #ffffff !important;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.22);
}

.boot-pixel-heart {
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.42);
}

.alasta-logo-assembly {
  position: relative;
  width: clamp(180px, 26vw, 286px);
  aspect-ratio: 163 / 37;
  flex: 0 0 auto;
}

.alasta-logo-pixels,
.alasta-logo-final {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.alasta-logo-pixels {
  -webkit-mask: url("./assets/alasta-logo.svg") center / contain no-repeat;
  mask: url("./assets/alasta-logo.svg") center / contain no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Crect width='5' height='5' rx='1' fill='%2336424D'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  background-repeat: repeat;
  image-rendering: pixelated;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  animation: alastaPixelWord 1.75s steps(24, end) 0.12s forwards,
             alastaPixelSettle 0.58s ease 1.86s forwards;
}

.alasta-logo-final {
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.65));
  animation: alastaWordFinal 0.7s ease 1.92s forwards;
}

#pixel-refresh-overlay {
  background: rgba(245, 249, 255, 0.78) !important;
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

.alasta-refresh-card {
  width: 244px;
  height: 92px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(210, 221, 235, 0.88);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
}

.alasta-refresh-logo {
  width: 174px;
}

@keyframes alastaPixelWord {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(8px) scale(0.98); filter: blur(1px); }
  18% { opacity: 1; }
  82%, 100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes alastaPixelSettle {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes alastaWordFinal {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .alasta-logo-pixels,
  .alasta-logo-final {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
}

@media (max-width: 760px) {
  .card,
  .settings-card,
  .table-card,
  .rcp-range-section,
  .rcp-range-card,
  .rcp-today-card-mini {
    border-radius: 16px !important;
  }

  .alasta-refresh-card {
    width: 210px;
  }
}
/* v5.22.15 HarmonyOS compact refinements */
#theme-toggle,
#auth-theme-toggle,
#ai-memory-card,
#ai-memory-card-operator,
#invite-modal,
#btn-invite-user,
#users-info-banner {
  display: none !important;
}

.sidebar .pill,
.nav-group-head,
.nav-group-header {
  font-family: "HarmonyOS Sans", "Huawei Sans", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  color: #101828 !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
}

.sidebar .pill span:not(.nav-count),
.nav-group-label {
  color: #101828 !important;
}

.sidebar .nav-icon,
.sidebar .pill svg,
.nav-group-dot {
  color: #101828 !important;
  opacity: 0.9 !important;
}

.mes-tabs,
.items-action-tabs,
.worker-orders-tabs,
.rcp-manual-tabs,
.rcp-pay-mode-tabs,
.psm-mode-tabs {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  gap: 8px !important;
  border-radius: 0 !important;
}

.mes-tabs .mes-tab,
.items-action-tabs .mes-tab,
.picklist-tab,
.worker-orders-tab,
.rcp-manual-tab,
.rcp-pay-mode-tab,
.psm-tab {
  min-height: 40px !important;
  padding: 9px 15px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid rgba(207, 218, 232, 0.88) !important;
  border-radius: 999px !important;
  color: #1d2939 !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  box-shadow: 0 5px 14px rgba(39, 56, 82, 0.055) !important;
}

.mes-tabs .mes-tab:hover,
.items-action-tabs .mes-tab:hover,
.picklist-tab:hover,
.worker-orders-tab:hover,
.rcp-manual-tab:hover,
.rcp-pay-mode-tab:hover,
.psm-tab:hover {
  background: rgba(246, 250, 255, 0.98) !important;
  border-color: rgba(151, 173, 205, 0.92) !important;
  transform: translateY(-1px) !important;
}

.mes-tabs .mes-tab.active,
.items-action-tabs .mes-tab.active,
.picklist-tab.active,
.worker-orders-tab.active,
.rcp-manual-tab.active,
.rcp-pay-mode-tab.active,
.psm-tab.active {
  background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%) !important;
  border-color: rgba(10, 89, 247, 0.34) !important;
  color: #0a59f7 !important;
  box-shadow: 0 10px 24px rgba(10, 89, 247, 0.12) !important;
}

.mes-tabs .mes-tab.active::after,
.items-action-tabs .mes-tab.active::after {
  display: none !important;
}

.rcp-range-section {
  border-radius: 24px !important;
  padding: 22px !important;
}

.rcp-range-head {
  border-bottom: 0 !important;
  padding-bottom: 8px !important;
}

.rcp-range-cards,
.rcp-today-summary-grid,
.rcp-card-summary {
  gap: 14px !important;
  align-items: stretch !important;
}

.rcp-range-card,
.rcp-today-card-mini {
  position: relative !important;
  min-height: 88px !important;
  padding: 16px 24px !important;
  border: 1px solid rgba(210, 221, 235, 0.88) !important;
  border-left-width: 1px !important;
  border-left-color: rgba(210, 221, 235, 0.88) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 251, 255, 0.92) 100%) !important;
  box-shadow: 0 8px 22px rgba(39, 56, 82, 0.06) !important;
  overflow: hidden !important;
}

.rcp-range-card::before,
.rcp-today-card-mini::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 20px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #9aa8bb;
  box-shadow: 0 0 0 5px rgba(154, 168, 187, 0.12);
}

.rcp-range-card.rcp-color-green::before,
.rcp-today-card-mini.rcp-color-green::before { background: #16a34a; box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.12); }
.rcp-range-card.rcp-color-orange::before,
.rcp-today-card-mini.rcp-color-orange::before,
.rcp-today-card-mini.rcp-color-amber::before { background: #f59e0b; box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.13); }
.rcp-range-card.rcp-color-blue::before,
.rcp-today-card-mini.rcp-color-blue::before { background: #0a59f7; box-shadow: 0 0 0 5px rgba(10, 89, 247, 0.13); }
.rcp-range-card.rcp-color-gray::before,
.rcp-today-card-mini.rcp-color-gray::before,
.rcp-today-card-mini.rcp-color-slate::before { background: #64748b; box-shadow: 0 0 0 5px rgba(100, 116, 139, 0.12); }

.rcp-sum-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 108px !important;
  padding: 18px 22px !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(210, 221, 235, 0.88) !important;
  box-shadow: 0 8px 22px rgba(39, 56, 82, 0.055) !important;
  overflow: hidden !important;
}

.rcp-sum-card > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

.rcp-sum-lbl {
  display: block !important;
  margin: 0 !important;
  color: #8da0ba !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
}

.rcp-sum-val {
  display: block !important;
  margin: 0 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.rcp-sum-val.mono {
  font-size: clamp(20px, 1.6vw, 26px) !important;
  white-space: nowrap !important;
}

.rcp-sum-sub {
  display: block !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

#boot-screen {
  background:
    radial-gradient(circle at 50% 42%, rgba(10, 89, 247, 0.12), transparent 28%),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), transparent 30%),
    linear-gradient(180deg, #f7faff 0%, #eef4fa 100%) !important;
  color: #36424d !important;
}

#boot-screen > * {
  position: relative !important;
  z-index: 1 !important;
}

.alasta-boot-logo,
.alasta-refresh-logo {
  width: clamp(220px, 28vw, 336px) !important;
}

.alasta-logo-assembly::before {
  content: "";
  position: absolute;
  inset: -42% -22%;
  z-index: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(228, 238, 252, 0.42) 44%, transparent 72%);
  filter: blur(18px);
  opacity: 0.85;
  pointer-events: none;
  animation: alastaAuraPulse 3.3s ease both;
}

.alasta-logo-pixels,
.alasta-logo-final {
  z-index: 1;
}

.alasta-logo-pixels {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'%3E%3Crect x='1' y='1' width='5' height='5' rx='1' fill='%2336424D'/%3E%3C/svg%3E") !important;
  background-size: 9px 9px !important;
  background-position: 38px -24px;
  animation: alastaPixelWord 2.08s steps(30, end) 0.1s forwards,
             alastaPixelSettle 0.62s ease 2.28s forwards !important;
}

.alasta-logo-final {
  filter: drop-shadow(0 8px 24px rgba(39, 56, 82, 0.12)) !important;
  animation: alastaWordFinal 0.66s ease 2.38s forwards !important;
}

#pixel-refresh-overlay {
  background: rgba(245, 249, 255, 0.84) !important;
  backdrop-filter: blur(14px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.16) !important;
}

.alasta-refresh-card {
  width: clamp(220px, 28vw, 336px) !important;
  height: auto !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@keyframes alastaAuraPulse {
  0% { opacity: 0; transform: scale(0.84); }
  38% { opacity: 0.9; transform: scale(1.02); }
  100% { opacity: 0.62; transform: scale(1); }
}

@keyframes alastaPixelWord {
  0% { clip-path: inset(0 100% 0 0); opacity: 0; transform: translate3d(0, 8px, 0) scale(0.985); filter: blur(1.4px); background-position: 46px -30px; }
  18% { opacity: 1; }
  70% { clip-path: inset(0 12% 0 0); opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); background-position: 8px 4px; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); background-position: 0 0; }
}

@keyframes alastaPixelSettle {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.006); }
}

@keyframes alastaWordFinal {
  0% { opacity: 0; transform: translateY(2px) scale(0.998); filter: blur(0.8px) drop-shadow(0 8px 24px rgba(39, 56, 82, 0.08)); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0) drop-shadow(0 8px 24px rgba(39, 56, 82, 0.12)); }
}

@media (prefers-reduced-motion: reduce) {
  .alasta-logo-pixels {
    animation: alastaPixelWord 2.08s steps(30, end) 0.1s forwards,
               alastaPixelSettle 0.62s ease 2.28s forwards !important;
  }

  .alasta-logo-final {
    animation: alastaWordFinal 0.66s ease 2.38s forwards !important;
  }
}

@media (max-width: 760px) {
  .rcp-range-card,
  .rcp-today-card-mini {
    border-radius: 24px !important;
  }

  .alasta-boot-logo,
  .alasta-refresh-logo,
  .alasta-refresh-card {
    width: min(72vw, 280px) !important;
  }
}