/* Roo Trade Co. — Visual Identity */

/* Custom properties */
:root {
  --roo-black: #0a0a0a;
  --roo-dark: #141414;
  --roo-charcoal: #1e1e1e;
  --roo-gold: #c8a55a;
  --roo-gold-light: #dfc07f;
  --roo-cream: #f5f0e8;
  --roo-warm-gray: #2a2723;
}

/* Utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Roo diagonal hatch pattern — SVG-based, used as background */
.roo-pattern {
  background-color: var(--roo-dark);
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c8a55a' stroke-width='0.8' opacity='0.25'%3E%3Cpath d='M0 40L40 0M-10 10L10 -10M30 50L50 30'/%3E%3C/g%3E%3C/svg%3E");
}

/* Subtle dot grid pattern */
.roo-dots {
  background-image: radial-gradient(circle, rgba(200, 165, 90, 0.08) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Cross-hatch for cards */
.roo-crosshatch {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c8a55a' stroke-width='0.5' opacity='0.12'%3E%3Cpath d='M0 20L20 0M-5 5L5 -5M15 25L25 15'/%3E%3Cpath d='M20 20L0 0M25 5L15 -5M5 25L-5 15'/%3E%3C/g%3E%3C/svg%3E");
}

/* Glass header with scrolling glint */
.glass-header {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.3);
}

.glass-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -100%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,165,90,0.5), rgba(255,255,255,0.3), rgba(200,165,90,0.5), transparent);
  animation: glint 32s ease-in-out infinite;
}

@keyframes glint {
  0% { left: -60%; }
  40% { left: -60%; }
  70% { left: 100%; }
  100% { left: 100%; }
}

/* Glass card */
.glass-card {
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(200, 165, 90, 0.12);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 8px 32px rgba(0, 0, 0, 0.3);
  position: relative;
}

.glass-card > *:first-child {
  position: relative;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 165, 90, 0.2), rgba(255, 255, 255, 0.08), rgba(200, 165, 90, 0.2), transparent);
  z-index: 1;
}

.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c8a55a' stroke-width='0.5' opacity='0.1'%3E%3Cpath d='M0 20L20 0M-5 5L5 -5M15 25L25 15'/%3E%3Cpath d='M20 20L0 0M25 5L15 -5M5 25L-5 15'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, black 70%);
  mask-image: radial-gradient(ellipse at center, transparent 20%, black 70%);
  z-index: 0;
}

/* Maple leaf inline icon (used as period in "Co.") */
.maple-dot {
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  vertical-align: baseline;
  margin-left: 0.02em;
  position: relative;
  top: 0.08em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2015 -2000 4030 4030'%3E%3Cpath fill='%23c8a55a' d='m-90 2030 45-863a95 95 0 0 0-111-98l-859 151 116-320a65 65 0 0 0-20-73l-941-762 212-99a65 65 0 0 0 34-79l-186-572 542 115a65 65 0 0 0 73-38l105-247 423 454a65 65 0 0 0 111-57l-204-1052 327 189a65 65 0 0 0 91-27l332-652 332 652a65 65 0 0 0 91 27l327-189-204 1052a65 65 0 0 0 111 57l423-454 105 247a65 65 0 0 0 73 38l542-115-186 572a65 65 0 0 0 34 79l212 99-941 762a65 65 0 0 0-20 73l116 320-859-151a95 95 0 0 0-111 98l45 863z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Gold gradient text */
.roo-gold-text {
  background: linear-gradient(135deg, var(--roo-gold) 0%, var(--roo-gold-light) 50%, var(--roo-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gold border accent */
.roo-gold-border {
  border-color: rgba(200, 165, 90, 0.3);
}

.roo-gold-border:hover {
  border-color: rgba(200, 165, 90, 0.6);
}

/* Product card hover glow */
.roo-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(200, 165, 90, 0.1);
}

.roo-card:hover {
  border-color: rgba(200, 165, 90, 0.4);
  box-shadow: 0 8px 32px rgba(200, 165, 90, 0.08), 0 0 0 1px rgba(200, 165, 90, 0.1);
  transform: translateY(-2px);
}

/* Strength chip */
.strength-chip {
  background: linear-gradient(135deg, var(--roo-charcoal), #2a2a2a);
  color: var(--roo-gold);
  font-weight: 700;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(200, 165, 90, 0.3);
  letter-spacing: 0.02em;
}

/* Brand chip */
.brand-chip {
  color: var(--roo-gold);
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Button styles */
.roo-btn-primary {
  background: linear-gradient(135deg, var(--roo-gold) 0%, #b8953f 100%);
  color: var(--roo-black);
  font-weight: 700;
  border: none;
  transition: all 0.2s ease;
}

.roo-btn-primary:hover {
  background: linear-gradient(135deg, var(--roo-gold-light) 0%, var(--roo-gold) 100%);
  box-shadow: 0 4px 16px rgba(200, 165, 90, 0.3);
}

/* Hero section */
.roo-hero {
  background: linear-gradient(180deg, var(--roo-black) 0%, var(--roo-dark) 100%);
  position: relative;
  overflow: hidden;
}

.roo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23c8a55a' stroke-width='0.8' opacity='0.15'%3E%3Cpath d='M0 60L60 0M-15 15L15 -15M45 75L75 45'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Divider line with gold accent + centered dots */
.roo-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 165, 90, 0.3), transparent);
  position: relative;
}

.roo-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='7'%3E%3Crect width='42' height='7' fill='%230a0a0a'/%3E%3Ccircle cx='3.5' cy='3.5' r='3' fill='%23c8a55a'/%3E%3Ccircle cx='10.5' cy='3.5' r='3' fill='%23c8a55a'/%3E%3Ccircle cx='17.5' cy='3.5' r='3' fill='%23c8a55a'/%3E%3Ccircle cx='24.5' cy='3.5' r='3' fill='%23c8a55a'/%3E%3Ccircle cx='31.5' cy='3.5' r='3' fill='%23c8a55a'/%3E%3Ccircle cx='38.5' cy='3.5' r='3' fill='%23c8a55a'/%3E%3C/svg%3E") no-repeat;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--roo-dark); }
::-webkit-scrollbar-thumb { background: rgba(200, 165, 90, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(200, 165, 90, 0.5); }

/* Input focus ring */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--roo-gold) !important;
  box-shadow: 0 0 0 3px rgba(200, 165, 90, 0.15) !important;
}

/* Nav link hover */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--roo-gold);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* ========================================================================
   Admin button system — used across /admin views. Three semantic variants:
     .admin-btn-primary    Filled gold; main affirmative action.
     .admin-btn-secondary  Outlined; secondary / cancel-style.
     .admin-btn-danger     Outlined red; destructive actions.
   Sizes:
     .admin-btn            Default
     .admin-btn-sm         Compact, table-row-friendly
   All variants share disabled styling (opacity + cursor).
   ======================================================================== */

.admin-btn,
.admin-btn-primary,
.admin-btn-secondary,
.admin-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.admin-btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
}

.admin-btn-primary {
  background: var(--roo-gold);
  color: var(--roo-black);
  border-color: var(--roo-gold);
}
.admin-btn-primary:hover:not(:disabled) {
  background: var(--roo-gold-light);
  border-color: var(--roo-gold-light);
}

.admin-btn-secondary {
  background: rgba(200, 165, 90, 0.08);
  color: var(--roo-gold);
  border-color: rgba(200, 165, 90, 0.3);
}
.admin-btn-secondary:hover:not(:disabled) {
  background: rgba(200, 165, 90, 0.18);
  border-color: rgba(200, 165, 90, 0.5);
}

.admin-btn-danger {
  background: rgba(239, 68, 68, 0.08);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.3);
}
.admin-btn-danger:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fecaca;
}

.admin-btn:disabled,
.admin-btn-primary:disabled,
.admin-btn-secondary:disabled,
.admin-btn-danger:disabled,
.admin-btn[disabled],
.admin-btn-primary[disabled],
.admin-btn-secondary[disabled],
.admin-btn-danger[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ========================================================================
   Admin form helpers
   ======================================================================== */

.admin-required::after {
  content: '*';
  color: #f87171;
  margin-left: 0.25rem;
}

.admin-input,
.admin-select,
.admin-textarea {
  display: block;
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  background: var(--roo-charcoal);
  color: #fff;
  border: 1px solid rgba(200, 165, 90, 0.2);
  border-radius: 0.5rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-input:focus,
.admin-select:focus,
.admin-textarea:focus {
  outline: none;
  border-color: var(--roo-gold);
  box-shadow: 0 0 0 3px rgba(200, 165, 90, 0.15);
}
.admin-input.is-invalid,
.admin-select.is-invalid,
.admin-textarea.is-invalid {
  border-color: #f87171;
}

/* ========================================================================
   Admin table consistency — clickable rows + hover affordance.
   ======================================================================== */

.admin-row-link {
  cursor: pointer;
  transition: background-color .15s ease;
}
.admin-row-link:hover {
  background-color: rgba(30, 30, 30, 0.6);
}

/* ========================================================================
   Status badge palette — semantic tokens. Use these instead of one-off
   color combinations to keep order/customer/fraud states visually
   consistent. Each badge is a small inline span.
     .admin-badge-success  Affirmative completion (paid, captured, approved, active)
     .admin-badge-info     In-flight informational (shipped, processing-blue)
     .admin-badge-warning  Needs attention (pending, low stock, fraud-medium)
     .admin-badge-danger   Failed/destructive (cancelled, refunded, blocked, disabled)
     .admin-badge-neutral  Inactive / completed lifecycle (gray)
     .admin-badge-feature  Editor highlight (featured, gold)
   ======================================================================== */
.admin-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9999px;
  border: 1px solid transparent;
  text-transform: capitalize;
  white-space: nowrap;
}
.admin-badge-success { background: rgba(34, 197, 94, 0.10); color: #4ade80; border-color: rgba(34, 197, 94, 0.30); }
.admin-badge-info    { background: rgba(59, 130, 246, 0.10); color: #93c5fd; border-color: rgba(59, 130, 246, 0.30); }
.admin-badge-warning { background: rgba(245, 158, 11, 0.10); color: #fbbf24; border-color: rgba(245, 158, 11, 0.30); }
.admin-badge-danger  { background: rgba(239, 68, 68, 0.10); color: #fca5a5; border-color: rgba(239, 68, 68, 0.30); }
.admin-badge-neutral { background: rgba(107, 114, 128, 0.10); color: #9ca3af; border-color: rgba(107, 114, 128, 0.30); }
.admin-badge-feature { background: rgba(200, 165, 90, 0.12); color: var(--roo-gold); border-color: rgba(200, 165, 90, 0.40); }

/* ========================================================================
   Toggle switch — used for boolean settings. Rendered as a styled
   checkbox track + animated thumb. Wraps a real <input type=checkbox>
   so browsers handle keyboard nav, focus, and form submission natively.

   Markup:
     <span class="admin-toggle">
       <input type="checkbox" name="key" value="1" [checked]>
       <span class="admin-toggle-track"></span>
       <span class="admin-toggle-thumb"></span>
     </span>
   ======================================================================== */
.admin-toggle {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.375rem;
  flex-shrink: 0;
}
.admin-toggle input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}
.admin-toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(107, 114, 128, 0.25);
  border: 1px solid rgba(107, 114, 128, 0.4);
  border-radius: 9999px;
  transition: background-color .15s ease, border-color .15s ease;
}
.admin-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1rem;
  height: 1rem;
  background: #e5e7eb;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform .15s ease, background-color .15s ease;
}
.admin-toggle input[type="checkbox"]:checked ~ .admin-toggle-track {
  background: rgba(200, 165, 90, 0.30);
  border-color: var(--roo-gold);
}
.admin-toggle input[type="checkbox"]:checked ~ .admin-toggle-thumb {
  transform: translateX(1.125rem);
  background: var(--roo-gold);
}
.admin-toggle input[type="checkbox"]:focus-visible ~ .admin-toggle-track {
  box-shadow: 0 0 0 3px rgba(200, 165, 90, 0.25);
}