/* ==========================================================================
   Old School RuneScape (OSRS) Classic Theme for InazumaUK Dashboard
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&family=Cinzel:wght@600;800;900&family=MedievalSharp&display=swap');

/* --- Root Theme Variables when RuneScape theme is active --- */
:root[data-theme="runescape"],
html.theme-runescape,
body.theme-runescape {
  /* Color Palette */
  --bg-primary: #1e1711 !important;
  --bg-secondary: #2b2219 !important;
  --bg-tertiary: #382c20 !important;
  --bg-sidebar: #18120d !important;
  --bg-hover: #4a3b2c !important;
  
  --text-primary: #ffff00 !important;   /* Classic OSRS Yellow */
  --text-secondary: #ff981f !important; /* Classic OSRS Orange */
  --text-muted: #c8b99c !important;     /* Parchment / Bone */
  
  /* Primary Accents */
  --accent-primary: #8b6b23 !important;   /* RuneScape Bronze/Gold */
  --accent-secondary: #b89130 !important; /* Bright Gold */
  --accent-purple: #8e44ad !important;
  --accent-blue: #2980b9 !important;
  --accent-cyan: #00ffff !important;      /* OSRS Cyan */
  
  /* Status Colors */
  --accent-danger: #c0392b !important;    /* Red Dragon / Blood */
  --accent-success: #27ae60 !important;   /* Nature Rune Green */
  --accent-warning: #f39c12 !important;   /* Warning Gold */
  
  /* Borders & Radius */
  --border-color: #5c4a35 !important;
  --border-color-accent: #8b6b23 !important;
  --border-radius: 3px !important;
  --border-radius-small: 2px !important;
  --border-radius-large: 4px !important;
  
  /* RuneScape Fonts */
  --font-osrs-pixel: 'Press Start 2P', monospace, sans-serif;
  --font-osrs-chat: 'VT323', monospace, sans-serif;
  --font-osrs-title: 'Cinzel', 'MedievalSharp', serif;
}

/* --- Global Background & Typography --- */
html.theme-runescape,
body.theme-runescape,
body.theme-runescape * {
  border-radius: 2px;
}

body.theme-runescape {
  background-color: #1a140e !important;
  background-image: radial-gradient(#2b2117 1px, transparent 1px), radial-gradient(#2b2117 1px, #1a140e 1px) !important;
  background-size: 20px 20px !important;
  background-position: 0 0, 10px 10px !important;
  color: #ff981f !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Headings */
body.theme-runescape h1,
body.theme-runescape h2,
body.theme-runescape h3,
body.theme-runescape h4,
body.theme-runescape h5,
body.theme-runescape h6,
body.theme-runescape .section-title,
body.theme-runescape .bento-title,
body.theme-runescape .font-outfit {
  font-family: 'Cinzel', 'MedievalSharp', serif !important;
  color: #ffff00 !important;
  text-shadow: 1px 1px 0px #000, -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 2px 2px 3px rgba(0,0,0,0.8) !important;
  letter-spacing: 0.5px !important;
}

body.theme-runescape p,
body.theme-runescape span,
body.theme-runescape label,
body.theme-runescape .bento-desc {
  color: #c8b99c;
  text-shadow: 1px 1px 0px #000;
}

body.theme-runescape a {
  color: #ffff00 !important;
  text-shadow: 1px 1px 0px #000;
}
body.theme-runescape a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}

/* --- RuneScape Classic 3D Beveled Stone Buttons --- */
body.theme-runescape .btn,
body.theme-runescape .ina-btn-glow,
body.theme-runescape .btn-glow,
body.theme-runescape button:not(.ina-toggle-btn):not(.sidebar-expand-toggle):not(.swal2-close) {
  background: linear-gradient(180deg, #534534 0%, #3e3224 100%) !important;
  border-top: 2px solid #826e55 !important;
  border-left: 2px solid #826e55 !important;
  border-right: 2px solid #1a140d !important;
  border-bottom: 2px solid #1a140d !important;
  box-shadow: inset 1px 1px 0px #a48c6d, 0 2px 4px rgba(0,0,0,0.6) !important;
  border-radius: 3px !important;
  color: #ff981f !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
  text-shadow: 1px 1px 0px #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: background 0.1s ease, transform 0.05s ease !important;
}

body.theme-runescape .btn:hover,
body.theme-runescape .ina-btn-glow:hover,
body.theme-runescape .btn-glow:hover,
body.theme-runescape button:not(.ina-toggle-btn):not(.sidebar-expand-toggle):not(.swal2-close):hover {
  background: linear-gradient(180deg, #645440 0%, #4c3e2d 100%) !important;
  color: #ffff00 !important;
  box-shadow: inset 1px 1px 0px #baa180, 0 3px 6px rgba(0,0,0,0.8) !important;
  transform: translateY(-1px) !important;
}

body.theme-runescape .btn:active,
body.theme-runescape .ina-btn-glow:active,
body.theme-runescape .btn-glow:active,
body.theme-runescape button:not(.ina-toggle-btn):not(.sidebar-expand-toggle):not(.swal2-close):active {
  border-top: 2px solid #1a140d !important;
  border-left: 2px solid #1a140d !important;
  border-right: 2px solid #826e55 !important;
  border-bottom: 2px solid #826e55 !important;
  background: #33281c !important;
  box-shadow: inset 2px 2px 4px #000 !important;
  transform: translate(1px, 1px) !important;
  color: #ff981f !important;
}

/* Primary Button */
body.theme-runescape .btn-primary {
  background: linear-gradient(180deg, #664d26 0%, #4a3617 100%) !important;
  border-top-color: #a37f40 !important;
  border-left-color: #a37f40 !important;
  color: #ffff00 !important;
}
body.theme-runescape .btn-primary:hover {
  background: linear-gradient(180deg, #7c5f30 0%, #5a421c 100%) !important;
  color: #ffffff !important;
}

/* Danger / Blood Rune Button */
body.theme-runescape .btn-danger {
  background: linear-gradient(180deg, #6e201b 0%, #4a130f 100%) !important;
  border-top: 2px solid #a33c35 !important;
  border-left: 2px solid #a33c35 !important;
  border-right: 2px solid #200604 !important;
  border-bottom: 2px solid #200604 !important;
  box-shadow: inset 1px 1px 0px #c2574f, 0 2px 4px rgba(0,0,0,0.6) !important;
  color: #ffcccc !important;
}
body.theme-runescape .btn-danger:hover {
  background: linear-gradient(180deg, #872822 0%, #5f1813 100%) !important;
  color: #ffffff !important;
}

/* Success / Nature Rune Button */
body.theme-runescape .btn-success {
  background: linear-gradient(180deg, #1b5e20 0%, #103813 100%) !important;
  border-top: 2px solid #338a37 !important;
  border-left: 2px solid #338a37 !important;
  border-right: 2px solid #081a09 !important;
  border-bottom: 2px solid #081a09 !important;
  box-shadow: inset 1px 1px 0px #4fb053, 0 2px 4px rgba(0,0,0,0.6) !important;
  color: #ccffcc !important;
}
body.theme-runescape .btn-success:hover {
  background: linear-gradient(180deg, #237a2a 0%, #164f1b 100%) !important;
  color: #ffffff !important;
}

/* Secondary Button */
body.theme-runescape .btn-secondary {
  background: linear-gradient(180deg, #44372b 0%, #2f251b 100%) !important;
  color: #c8b99c !important;
}

/* --- Cards, Panels & Windows --- */
body.theme-runescape .bento-card,
body.theme-runescape .card,
body.theme-runescape .ina-premium-settings-panel,
body.theme-runescape .table-container,
body.theme-runescape .modal-content,
body.theme-runescape .chart-container,
body.theme-runescape .stat-card,
body.theme-runescape .activity-card {
  background: #2b2218 !important;
  border: 3px solid #544434 !important;
  box-shadow: inset 2px 2px 0px #705b46, inset -2px -2px 0px #15100b, 0 4px 20px rgba(0,0,0,0.7) !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
}

body.theme-runescape .bento-card:hover,
body.theme-runescape .card:hover {
  border-color: #7a634c !important;
  box-shadow: inset 2px 2px 0px #8f7459, inset -2px -2px 0px #15100b, 0 6px 25px rgba(0,0,0,0.8) !important;
  transform: translateY(-2px) !important;
}

/* Headers of panels */
body.theme-runescape .ina-settings-header-banner {
  background: linear-gradient(180deg, #3d3023 0%, #2a2016 100%) !important;
  border-bottom: 2px solid #544434 !important;
  border-top-left-radius: 2px !important;
  border-top-right-radius: 2px !important;
}

body.theme-runescape .ina-banner-icon {
  background: #4a3a2b !important;
  border: 2px solid #705b46 !important;
  color: #ffff00 !important;
  border-radius: 4px !important;
}

/* Settings Split & Tabs */
body.theme-runescape .ina-settings-tabs {
  background: #201811 !important;
  border-bottom: 2px solid #453627 !important;
}

body.theme-runescape .ina-tab-btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  color: #c8b99c !important;
  border-radius: 2px !important;
  border: 1px solid transparent !important;
}

body.theme-runescape .ina-tab-btn:hover {
  background: #382c20 !important;
  color: #ffff00 !important;
}

body.theme-runescape .ina-tab-btn.active {
  background: #453627 !important;
  border: 1px solid #705b46 !important;
  color: #ffff00 !important;
  box-shadow: inset 1px 1px 0px #8f7459 !important;
}

/* --- Sidebar --- */
body.theme-runescape .sidebar {
  background: #18120c !important;
  border-right: 3px solid #3d3022 !important;
  box-shadow: inset -1px 0 0 #544434, 4px 0 20px rgba(0,0,0,0.6) !important;
}

body.theme-runescape .sidebar-item {
  border-radius: 3px !important;
}

body.theme-runescape .sidebar-item:hover {
  background: #2f251a !important;
  border: 1px solid #544434 !important;
}

body.theme-runescape .sidebar-item.active {
  background: #3e3223 !important;
  border: 1px solid #705b46 !important;
  box-shadow: inset 1px 1px 0 #8f7459 !important;
}

body.theme-runescape .sidebar-item-name {
  color: #ff981f !important;
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0px #000 !important;
}

body.theme-runescape .sidebar-item.active .sidebar-item-name {
  color: #ffff00 !important;
}

body.theme-runescape .sidebar-divider {
  background: linear-gradient(90deg, transparent, #544434, transparent) !important;
}

body.theme-runescape .sidebar-expand-toggle {
  background: #3e3223 !important;
  border: 2px solid #705b46 !important;
  color: #ffff00 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}

/* --- Form Controls & Inputs --- */
body.theme-runescape input[type="text"],
body.theme-runescape input[type="url"],
body.theme-runescape input[type="search"],
body.theme-runescape input[type="number"],
body.theme-runescape input[type="password"],
body.theme-runescape textarea,
body.theme-runescape select,
body.theme-runescape .ina-glass-input,
body.theme-runescape .ina-glass-textarea,
body.theme-runescape .form-control {
  background: #140e09 !important;
  border: 2px solid #47392a !important;
  border-radius: 2px !important;
  color: #ffff00 !important;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.8) !important;
  font-family: 'Inter', monospace, sans-serif !important;
  font-size: 13px !important;
  text-shadow: 1px 1px 0px #000 !important;
}

body.theme-runescape input::placeholder,
body.theme-runescape textarea::placeholder {
  color: #7a6a57 !important;
}

body.theme-runescape input:focus,
body.theme-runescape textarea:focus,
body.theme-runescape select:focus {
  border-color: #8b6b23 !important;
  outline: none !important;
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(255, 255, 0, 0.3) !important;
}

/* Toggles & Radio Buttons */
body.theme-runescape .ina-toggle-group {
  background: #140e09 !important;
  border: 2px solid #47392a !important;
  border-radius: 3px !important;
}

body.theme-runescape .ina-toggle-btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  color: #c8b99c !important;
}

body.theme-runescape .ina-toggle-input:checked + .ina-toggle-btn {
  background: #544434 !important;
  color: #ffff00 !important;
  border: 1px solid #705b46 !important;
  box-shadow: inset 1px 1px 0px #8f7459 !important;
}

/* Status Chips & Badges */
body.theme-runescape .ina-status-chip,
body.theme-runescape .badge,
body.theme-runescape .chip {
  background: #140e09 !important;
  border: 2px solid #47392a !important;
  color: #ffff00 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  text-shadow: 1px 1px 0px #000 !important;
  border-radius: 2px !important;
}

body.theme-runescape .pulse-dot {
  background: #00ff00 !important;
  box-shadow: 0 0 6px #00ff00 !important;
  border-radius: 0 !important;
}

/* Tables */
body.theme-runescape table {
  border-collapse: collapse !important;
}

body.theme-runescape th {
  background: #382c20 !important;
  color: #ffff00 !important;
  font-family: 'Cinzel', serif !important;
  border-bottom: 2px solid #544434 !important;
  text-shadow: 1px 1px 0 #000 !important;
}

body.theme-runescape td {
  border-bottom: 1px solid #3d3022 !important;
  color: #c8b99c !important;
}

body.theme-runescape tr:hover td {
  background: rgba(84, 68, 52, 0.3) !important;
}

/* Custom Scrollbars */
body.theme-runescape ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.theme-runescape ::-webkit-scrollbar-track {
  background: #140e09;
  border: 1px solid #382c20;
}

body.theme-runescape ::-webkit-scrollbar-thumb {
  background: #47392a;
  border: 1px solid #705b46;
  box-shadow: inset 1px 1px 0 #8f7459, inset -1px -1px 0 #140e09;
}

body.theme-runescape ::-webkit-scrollbar-thumb:hover {
  background: #5c4a37;
}

/* Modal and Alert styling */
body.theme-runescape .swal2-popup {
  background: #2b2218 !important;
  border: 3px solid #544434 !important;
  box-shadow: inset 2px 2px 0px #705b46, inset -2px -2px 0px #15100b, 0 8px 32px rgba(0,0,0,0.9) !important;
  border-radius: 4px !important;
  color: #ff981f !important;
}

body.theme-runescape .swal2-title {
  color: #ffff00 !important;
  font-family: 'Cinzel', serif !important;
  text-shadow: 1px 1px 0 #000 !important;
}

body.theme-runescape .swal2-html-container {
  color: #c8b99c !important;
  font-family: 'Inter', sans-serif !important;
  text-shadow: 1px 1px 0 #000 !important;
}

/* Dashboard Theme Selector in Settings */
.ina-theme-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 6px;
}

.ina-theme-card-option {
  position: relative;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all 0.2s ease;
}

.ina-theme-card-option:hover {
  border-color: rgba(99, 102, 241, 0.5);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
}

.ina-theme-card-option.active {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.12);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.3);
}

.ina-theme-card-option .theme-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: rgba(255, 255, 255, 0.05);
}

.ina-theme-card-option .theme-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
}

.ina-theme-card-option .theme-sub {
  font-size: 0.68rem;
  color: #94a3b8;
}

.ina-theme-card-option .theme-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.ina-theme-card-option.active .theme-check {
  display: flex;
}

/* Theme card styling when in RuneScape theme */
body.theme-runescape .ina-theme-card-option {
  background: #1c150e !important;
  border: 2px solid #4a3b2a !important;
  border-radius: 2px !important;
}

body.theme-runescape .ina-theme-card-option:hover {
  border-color: #8b6b23 !important;
}

body.theme-runescape .ina-theme-card-option.active {
  border-color: #ffff00 !important;
  background: #382c1f !important;
  box-shadow: inset 1px 1px 0 #705b46, 0 0 10px rgba(255,255,0,0.3) !important;
}

body.theme-runescape .ina-theme-card-option .theme-title {
  color: #ffff00 !important;
  font-family: 'Cinzel', serif !important;
}

body.theme-runescape .ina-theme-card-option .theme-check {
  background: #8b6b23 !important;
  color: #ffff00 !important;
  border-radius: 0 !important;
}