/**
 * UI Enhancements — Graphics peripheral pass (2026-09-12)
 * Shared polish for main + peripheral pages.
 */
:root {
  --ui-ease: cubic-bezier(.22, .75, .25, 1);
  --ui-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ui-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --ui-shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
  --ui-shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);
  --ui-ring: 0 0 0 3px rgba(255, 107, 0, .18);
  --ui-ring-admin: 0 0 0 3px rgba(225, 29, 72, .18);
}

.card, .panel, .stat-card, .service-card, .order-card, .ticket-card,
.settings-card, .quick-tile, .app-card, .hero-box, .wallet-card,
.gateway-card, .table-wrap, .kpi-card, .report-card, .announcement-card,
.platform-card, .faq-item, .drip-info, .sub-info, .bulk-info, .info-callout {
  transition: transform .22s var(--ui-ease), box-shadow .22s var(--ui-ease),
    border-color .2s var(--ui-ease), background-color .2s var(--ui-ease);
}

.card:hover, .panel:hover, .stat-card:hover, .service-card:hover,
.order-card:hover, .ticket-card:hover, .settings-card:hover,
.quick-tile:hover, .app-card:hover, .wallet-card:hover, .gateway-card:hover,
.kpi-card:hover, .report-card:hover, .platform-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ui-shadow-lg);
}

.btn, .button, button:not(.no-ui), input[type="submit"], input[type="button"],
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  transition: transform .16s var(--ui-ease), box-shadow .16s var(--ui-ease),
    filter .16s var(--ui-ease), background-color .16s ease, border-color .16s ease;
}
.btn:hover, .button:hover, button:not(.no-ui):hover,
input[type="submit"]:hover, input[type="button"]:hover,
.btn-primary:hover, .btn-secondary:hover {
  transform: translateY(-1.5px);
  filter: brightness(1.04);
}
.btn:active, .button:active, button:not(.no-ui):active, input[type="submit"]:active {
  transform: translateY(0);
  filter: brightness(.98);
}

input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  transition: border-color .16s var(--ui-ease), box-shadow .16s var(--ui-ease),
    background-color .16s var(--ui-ease);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: var(--ui-ring);
}
.admin-shell input:focus, .admin-shell select:focus, .admin-shell textarea:focus {
  box-shadow: var(--ui-ring-admin);
}

tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: rgba(255, 107, 0, .04); }
.admin-shell tbody tr:hover { background: rgba(225, 29, 72, .04); }

.badge, .status, .pill, .chip, .tag, .t-badge, .update-tag {
  border-radius: 999px;
  transition: transform .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}
.badge:hover, .pill:hover, .chip:hover, .t-badge:hover { transform: scale(1.03); }

.icon, .qt-icon, .hero-icon, .platform-icon, .nav-icon, .menu-icon {
  transition: transform .2s var(--ui-ease), color .16s ease, filter .16s ease;
}
.icon:hover, .qt-icon:hover, .hero-icon:hover, .platform-icon:hover {
  transform: scale(1.06) rotate(-2deg);
}

.nav a, .sidebar a, .menu a, .side-nav a, .bottom-nav a {
  transition: color .16s ease, background-color .16s ease, transform .16s var(--ui-ease);
}
.nav a:hover, .sidebar a:hover, .menu a:hover, .side-nav a:hover {
  transform: translateX(-2px);
}

/* Peripheral list rows */
.drip-row, .sub-row, .update-item, .ticket-row, .audit-row {
  transition: background-color .15s ease, transform .15s var(--ui-ease);
  border-radius: 10px;
  margin-inline: -6px;
  padding-inline: 6px;
}
.drip-row:hover, .sub-row:hover, .update-item:hover {
  background: rgba(255, 107, 0, .035);
}

/* Info callouts */
.drip-info, .sub-info, .bulk-info, .info-callout {
  background: linear-gradient(135deg, rgba(255,107,0,.04), rgba(255,255,255,.9));
  border: 1px solid rgba(255,107,0,.12);
  border-right: 4px solid #ff6b00;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  line-height: 1.9;
  margin-bottom: 20px;
  box-shadow: var(--ui-shadow-sm);
}
.drip-info strong, .sub-info strong, .bulk-info strong { color: var(--text-light, #1f2937); }

/* Code / API blocks */
.code-block, .endpoint-url {
  border-radius: 12px !important;
  transition: box-shadow .2s var(--ui-ease), border-color .2s ease;
}
.code-block:hover, .endpoint-url:hover {
  box-shadow: var(--ui-shadow-md);
}

/* Empty states */
.empty-state {
  text-align: center;
  padding: 36px 16px;
  color: var(--text-muted, #64748b);
}
.empty-state i {
  font-size: 36px;
  opacity: .35;
  margin-bottom: 12px;
  display: block;
}

/* Page title strip for peripheral pages */
.page-hero-mini {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-hero-mini .ph-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,107,0,.1); color: #ff6b00; font-size: 18px;
}
.page-hero-mini h1, .page-hero-mini .ph-title {
  margin: 0; font-size: 18px; font-weight: 800; color: var(--text-light, #1f2937);
}
.page-hero-mini .ph-sub {
  margin: 0; font-size: 12.5px; color: var(--text-muted, #64748b);
}

@keyframes ui-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.ui-enter { animation: ui-fade-up .45s var(--ui-ease-out) both; }
.ui-enter-delay-1 { animation-delay: .05s; }
.ui-enter-delay-2 { animation-delay: .1s; }
.ui-enter-delay-3 { animation-delay: .15s; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); }

::selection { background: rgba(255, 107, 0, .22); color: inherit; }
.admin-shell ::selection { background: rgba(225, 29, 72, .2); }

@media (max-width: 760px) {
  .card:hover, .panel:hover, .stat-card:hover, .service-card:hover,
  .order-card:hover, .ticket-card:hover, .settings-card:hover,
  .quick-tile:hover, .app-card:hover, .wallet-card:hover, .gateway-card:hover {
    transform: none;
    box-shadow: var(--ui-shadow-md);
  }
  .btn:hover, .button:hover, button:not(.no-ui):hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

:focus-visible { outline: 2px solid #ff6b00; outline-offset: 2px; }
.admin-shell :focus-visible { outline-color: #e11d48; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible),
input:focus:not(:focus-visible), select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) { outline: none; }