/* =========================================================
   Expiry Premium Seller - Common UI Standardization
   Applies across all tabs using base.html
   ========================================================= */

:root {
  --eps-bg: #f4f6fb;
  --eps-panel: #ffffff;
  --eps-panel-soft: #f8fafc;
  --eps-border: #d9e1ec;
  --eps-text: #0f172a;
  --eps-muted: #64748b;
  --eps-primary: #2563eb;
  --eps-primary-dark: #1d4ed8;
  --eps-danger: #dc2626;
  --eps-success: #16a34a;
  --eps-warning: #f59e0b;
  --eps-nav-bg: #0f172a;
  --eps-nav-text: #e5e7eb;
  --eps-nav-hover: #1e293b;
  --eps-nav-active: #2563eb;
  --eps-radius: 12px;
  --eps-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
  --eps-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--eps-font);
  background: var(--eps-bg);
  color: var(--eps-text);
  font-size: 14px;
  line-height: 1.45;
}

/* keep login pages clean if they do not use normal app layout */
body.login-page,
body.auth-page {
  background: linear-gradient(135deg, #0f172a, #1e293b);
}

/* ---------------- Navbar ---------------- */

.eps-navbar,
.navbar,
.topnav,
.nav-bar,
header nav {
  background: var(--eps-nav-bg);
  color: var(--eps-nav-text);
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 4px 14px rgba(15,23,42,0.16);
  flex-wrap: wrap;
}

.eps-navbar a,
.navbar a,
.topnav a,
.nav-bar a,
header nav a {
  color: var(--eps-nav-text) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 11px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  white-space: nowrap;
}

.eps-navbar a:hover,
.navbar a:hover,
.topnav a:hover,
.nav-bar a:hover,
header nav a:hover {
  background: var(--eps-nav-hover);
  color: #ffffff !important;
}

.eps-navbar a.active,
.navbar a.active,
.topnav a.active,
.nav-bar a.active,
header nav a.active {
  background: var(--eps-nav-active);
  color: #ffffff !important;
}

/* ---------------- Page Layout ---------------- */

.eps-page,
.page,
.container,
.main-container,
.content,
main {
  max-width: 100%;
}

.eps-content,
.page-content,
.main-content,
main {
  padding: 16px;
}

.eps-card,
.card,
.panel,
.box,
.section,
.form-box,
.table-box {
  background: var(--eps-panel);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius);
  box-shadow: var(--eps-shadow);
  padding: 14px;
}

.eps-card + .eps-card,
.card + .card,
.panel + .panel,
.box + .box {
  margin-top: 14px;
}

h1,
h2,
h3,
h4 {
  color: var(--eps-text);
  margin-top: 0;
  font-weight: 700;
}

h1 {
  font-size: 22px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

small,
.muted,
.text-muted {
  color: var(--eps-muted);
}

/* ---------------- Forms ---------------- */

label {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
}

input,
select,
textarea {
  font-family: var(--eps-font);
  font-size: 13px;
  border: 1px solid var(--eps-border);
  border-radius: 9px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--eps-text);
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--eps-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ---------------- Buttons ---------------- */

button,
.btn,
input[type="submit"],
input[type="button"] {
  font-family: var(--eps-font);
  font-size: 13px;
  font-weight: 700;
  border-radius: 9px;
  border: 1px solid transparent;
  padding: 8px 12px;
  cursor: pointer;
  background: var(--eps-primary);
  color: #ffffff;
  min-height: 34px;
}

button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--eps-primary-dark);
}

button.danger,
.btn-danger,
.delete-btn {
  background: var(--eps-danger);
  color: #ffffff;
}

button.success,
.btn-success {
  background: var(--eps-success);
  color: #ffffff;
}

button.warning,
.btn-warning {
  background: var(--eps-warning);
  color: #111827;
}

button.secondary,
.btn-secondary {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #cbd5e1;
}

button.secondary:hover,
.btn-secondary:hover {
  background: #cbd5e1;
}

/* ---------------- Tables ---------------- */

table {
  border-collapse: collapse;
  width: 100%;
  background: #ffffff;
  font-size: 13px;
}

th {
  background: #eef3fb;
  color: #0f172a;
  font-weight: 800;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid var(--eps-border);
  padding: 9px 10px;
  white-space: nowrap;
}

td {
  border-bottom: 1px solid #edf2f7;
  padding: 8px 10px;
  vertical-align: middle;
}

tr:hover td {
  background: #f8fafc;
}

/* ---------------- Global Trade Mode Badge ---------------- */

.eps-mode-wrap {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eps-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
  border: 1px solid rgba(255,255,255,0.18);
}

.eps-mode-paper {
  background: rgba(22,163,74,0.16);
  color: #bbf7d0;
}

.eps-mode-live {
  background: rgba(220,38,38,0.18);
  color: #fecaca;
}

.eps-risk-lock {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(245,158,11,0.16);
  color: #fde68a;
  border: 1px solid rgba(245,158,11,0.28);
}

.eps-risk-lock.unlocked {
  background: rgba(220,38,38,0.22);
  color: #fecaca;
  border-color: rgba(220,38,38,0.35);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 900px) {
  .eps-content,
  .page-content,
  .main-content,
  main {
    padding: 10px;
  }

  .eps-navbar,
  .navbar,
  .topnav,
  .nav-bar,
  header nav {
    align-items: flex-start;
  }

  .eps-navbar a,
  .navbar a,
  .topnav a,
  .nav-bar a,
  header nav a {
    font-size: 12px;
    padding: 7px 9px;
  }

  .eps-mode-wrap {
    width: 100%;
    margin-left: 0;
  }
}

/* =========================================================
   Readability correction after common UI standardization
   Keep dark pages dark, but make light data tables readable.
   ========================================================= */

.page-put-selling-scanner table,
.page-value-buying table,
.page-users table,
.page-audit-log table,
.page-broker-sync table,
.page-risk-settings table {
  background: #ffffff !important;
}

.page-put-selling-scanner tbody tr,
.page-value-buying tbody tr,
.page-users tbody tr,
.page-audit-log tbody tr,
.page-broker-sync tbody tr,
.page-risk-settings tbody tr {
  background: #ffffff !important;
  opacity: 1 !important;
}

.page-put-selling-scanner tbody td,
.page-value-buying tbody td,
.page-users tbody td,
.page-audit-log tbody td,
.page-broker-sync tbody td,
.page-risk-settings tbody td {
  color: #0f172a !important;
  opacity: 1 !important;
  font-weight: 600;
  background: #ffffff !important;
}

.page-put-selling-scanner tbody td *,
.page-value-buying tbody td *,
.page-users tbody td *,
.page-audit-log tbody td *,
.page-broker-sync tbody td *,
.page-risk-settings tbody td * {
  color: inherit;
  opacity: 1 !important;
}

.page-put-selling-scanner thead th,
.page-value-buying thead th,
.page-users thead th,
.page-audit-log thead th,
.page-broker-sync thead th,
.page-risk-settings thead th {
  background: #111827 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 800;
}

/* Do not force Option Chain and Strategy Builder tables/cards into light theme */
.page-option-chain table,
.page-option-chain th,
.page-option-chain td,
.page-builder table,
.page-builder th,
.page-builder td {
  opacity: 1 !important;
}

/* =========================================================
   Light / Dark Mode Toggle
   Light mode = current standard UI
   Dark mode = old professional dark UI
   ========================================================= */

.eps-theme-toggle {
  color: #e5e7eb !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 999px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.35);
  cursor: pointer;
  white-space: nowrap;
}

.eps-theme-toggle:hover {
  background: rgba(37, 99, 235, 0.35);
  color: #ffffff !important;
}

/* ---------- Dark Theme Global ---------- */

body.eps-theme-dark {
  --eps-bg: #05070b;
  --eps-panel: #111827;
  --eps-panel-soft: #0b1220;
  --eps-border: #263244;
  --eps-text: #f8fafc;
  --eps-muted: #aab4c3;
  background: #05070b !important;
  color: #f8fafc !important;
}

body.eps-theme-dark main,
body.eps-theme-dark .eps-content,
body.eps-theme-dark .page-content,
body.eps-theme-dark .main-content,
body.eps-theme-dark .content,
body.eps-theme-dark .container {
  background: #05070b !important;
  color: #f8fafc !important;
}

body.eps-theme-dark .eps-card,
body.eps-theme-dark .card,
body.eps-theme-dark .panel,
body.eps-theme-dark .box,
body.eps-theme-dark .section,
body.eps-theme-dark .form-box,
body.eps-theme-dark .table-box {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #263244 !important;
}

body.eps-theme-dark h1,
body.eps-theme-dark h2,
body.eps-theme-dark h3,
body.eps-theme-dark h4,
body.eps-theme-dark label {
  color: #f8fafc !important;
}

body.eps-theme-dark small,
body.eps-theme-dark .muted,
body.eps-theme-dark .text-muted,
body.eps-theme-dark p {
  color: #cbd5e1 !important;
}

/* ---------- Dark Theme Forms ---------- */

body.eps-theme-dark input,
body.eps-theme-dark select,
body.eps-theme-dark textarea {
  background: #0b1220 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.eps-theme-dark input::placeholder,
body.eps-theme-dark textarea::placeholder {
  color: #94a3b8 !important;
}

/* ---------- Dark Theme Tables ---------- */

body.eps-theme-dark table {
  background: #0f172a !important;
  color: #f8fafc !important;
}

body.eps-theme-dark thead th,
body.eps-theme-dark th {
  background: #111827 !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

body.eps-theme-dark tbody tr,
body.eps-theme-dark tr {
  background: #0f172a !important;
  color: #f8fafc !important;
}

body.eps-theme-dark tbody tr:hover td {
  background: #172033 !important;
}

body.eps-theme-dark td {
  background: #0f172a !important;
  color: #f8fafc !important;
  border-color: #263244 !important;
}

body.eps-theme-dark td *,
body.eps-theme-dark th * {
  color: inherit;
}

/* Keep badges/buttons readable */
body.eps-theme-dark .eps-mode-badge,
body.eps-theme-dark .eps-risk-lock,
body.eps-theme-dark button,
body.eps-theme-dark .btn {
  opacity: 1 !important;
}

/* Dashboard dark cards */
body.eps-theme-dark .risk-card,
body.eps-theme-dark .summary-card,
body.eps-theme-dark .metric-card {
  background: #0b1220 !important;
  color: #f8fafc !important;
  border-color: #263244 !important;
}

/* Broker sync / Audit log dark cards */
body.eps-theme-dark .page-broker-sync .card,
body.eps-theme-dark .page-audit-log .card,
body.eps-theme-dark .page-broker-sync .panel,
body.eps-theme-dark .page-audit-log .panel {
  background: #111827 !important;
  color: #f8fafc !important;
}

/* Option Chain and Builder already dark; keep them clean */
body.eps-theme-dark.page-option-chain,
body.eps-theme-dark.page-builder {
  background: #05070b !important;
}

/* Light mode remains current UI */
body.eps-theme-light {
  background: var(--eps-bg);
}

/* =========================================================
   Improved Light Mode Professional Theme
   Dark mode remains unchanged.
   ========================================================= */

body.eps-theme-light {
  --eps-bg: #eef3fb;
  --eps-panel: #ffffff;
  --eps-panel-soft: #f8fbff;
  --eps-border: #d7e2f1;
  --eps-text: #0f172a;
  --eps-muted: #5b6b80;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 28%),
    linear-gradient(180deg, #f4f8ff 0%, #eef3fb 45%, #e9eff8 100%) !important;
  color: #0f172a !important;
}

/* Light navbar */
body.eps-theme-light .eps-navbar,
body.eps-theme-light .navbar,
body.eps-theme-light .topnav,
body.eps-theme-light .nav-bar,
body.eps-theme-light header nav {
  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 48%, #e8f1ff 100%) !important;
  color: #0f172a !important;
  border-bottom: 1px solid #c9d8ee !important;
  box-shadow: 0 8px 24px rgba(30, 64, 175, 0.12) !important;
}

/* Light navbar links */
body.eps-theme-light .eps-navbar a,
body.eps-theme-light .navbar a,
body.eps-theme-light .topnav a,
body.eps-theme-light .nav-bar a,
body.eps-theme-light header nav a {
  color: #1e293b !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  text-shadow: none !important;
}

body.eps-theme-light .eps-navbar a:hover,
body.eps-theme-light .navbar a:hover,
body.eps-theme-light .topnav a:hover,
body.eps-theme-light .nav-bar a:hover,
body.eps-theme-light header nav a:hover {
  color: #0f172a !important;
  background: #dbeafe !important;
  border-color: #bfdbfe !important;
}

/* Active nav item */
body.eps-theme-light .eps-navbar a.active,
body.eps-theme-light .navbar a.active,
body.eps-theme-light .topnav a.active,
body.eps-theme-light .nav-bar a.active,
body.eps-theme-light header nav a.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #2563eb, #0284c7) !important;
  border-color: #60a5fa !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.25) !important;
}

/* Light cards / boxes */
body.eps-theme-light .eps-card,
body.eps-theme-light .card,
body.eps-theme-light .panel,
body.eps-theme-light .box,
body.eps-theme-light .section,
body.eps-theme-light .form-box,
body.eps-theme-light .table-box {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
  color: #0f172a !important;
  border: 1px solid #d7e2f1 !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08) !important;
}

/* Specific large dark-looking cards in light mode */
body.eps-theme-light .page-value-buying .card,
body.eps-theme-light .page-value-buying .panel,
body.eps-theme-light .page-value-buying .box,
body.eps-theme-light .page-put-selling-scanner .card,
body.eps-theme-light .page-put-selling-scanner .panel,
body.eps-theme-light .page-put-selling-scanner .box,
body.eps-theme-light .page-broker-sync .card,
body.eps-theme-light .page-broker-sync .panel,
body.eps-theme-light .page-audit-log .card,
body.eps-theme-light .page-audit-log .panel {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%) !important;
  color: #0f172a !important;
  border-color: #d7e2f1 !important;
}

/* Headings/text in light mode */
body.eps-theme-light h1,
body.eps-theme-light h2,
body.eps-theme-light h3,
body.eps-theme-light h4,
body.eps-theme-light label {
  color: #0f172a !important;
  text-shadow: none !important;
}

body.eps-theme-light p,
body.eps-theme-light small,
body.eps-theme-light .muted,
body.eps-theme-light .text-muted {
  color: #475569 !important;
}

/* Links inside cards */
body.eps-theme-light a {
  color: #2563eb;
}

body.eps-theme-light a:hover {
  color: #1d4ed8;
}

/* Forms */
body.eps-theme-light input,
body.eps-theme-light select,
body.eps-theme-light textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

body.eps-theme-light input::placeholder,
body.eps-theme-light textarea::placeholder {
  color: #64748b !important;
}

/* Table style in light mode */
body.eps-theme-light table {
  background: #ffffff !important;
  color: #0f172a !important;
  border-radius: 12px;
  overflow: hidden;
}

body.eps-theme-light thead th,
body.eps-theme-light th {
  background: linear-gradient(135deg, #1e3a8a, #0f172a) !important;
  color: #ffffff !important;
  border-color: #334155 !important;
}

body.eps-theme-light tbody tr,
body.eps-theme-light tr {
  background: #ffffff !important;
}

body.eps-theme-light td {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e2e8f0 !important;
}

body.eps-theme-light tbody tr:hover td {
  background: #f1f7ff !important;
}

/* Buttons */
body.eps-theme-light button,
body.eps-theme-light .btn,
body.eps-theme-light input[type="submit"],
body.eps-theme-light input[type="button"] {
  background: linear-gradient(135deg, #2563eb, #0284c7) !important;
  color: #ffffff !important;
  border-color: #60a5fa !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

body.eps-theme-light button:hover,
body.eps-theme-light .btn:hover,
body.eps-theme-light input[type="submit"]:hover,
body.eps-theme-light input[type="button"]:hover {
  background: linear-gradient(135deg, #1d4ed8, #0369a1) !important;
}

/* Keep danger buttons red */
body.eps-theme-light button.danger,
body.eps-theme-light .btn-danger,
body.eps-theme-light .delete-btn {
  background: linear-gradient(135deg, #dc2626, #991b1b) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
}

/* Theme toggle button in light mode */
body.eps-theme-light .eps-theme-toggle {
  background: #ffffff !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08) !important;
}

body.eps-theme-light .eps-theme-toggle:hover {
  background: #dbeafe !important;
  color: #0f172a !important;
}

/* Mode badges in light mode */
body.eps-theme-light .eps-mode-paper {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important;
}

body.eps-theme-light .eps-mode-live {
  background: #fee2e2 !important;
  color: #991b1b !important;
  border-color: #fca5a5 !important;
}

body.eps-theme-light .eps-risk-lock {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fbbf24 !important;
}

/* Keep Option Chain and Strategy Builder dark-special pages unchanged */
body.eps-theme-light.page-option-chain,
body.eps-theme-light.page-builder {
  background: #05070b !important;
}

body.eps-theme-light.page-option-chain .card,
body.eps-theme-light.page-option-chain .panel,
body.eps-theme-light.page-option-chain .box,
body.eps-theme-light.page-option-chain .section,
body.eps-theme-light.page-builder .card,
body.eps-theme-light.page-builder .panel,
body.eps-theme-light.page-builder .box,
body.eps-theme-light.page-builder .section {
  background: inherit;
}

/* But keep their navbar light if light mode is selected */
body.eps-theme-light.page-option-chain .eps-navbar,
body.eps-theme-light.page-option-chain .navbar,
body.eps-theme-light.page-option-chain .topnav,
body.eps-theme-light.page-option-chain .nav-bar,
body.eps-theme-light.page-option-chain header nav,
body.eps-theme-light.page-builder .eps-navbar,
body.eps-theme-light.page-builder .navbar,
body.eps-theme-light.page-builder .topnav,
body.eps-theme-light.page-builder .nav-bar,
body.eps-theme-light.page-builder header nav {
  background: linear-gradient(135deg, #ffffff 0%, #eef6ff 48%, #e8f1ff 100%) !important;
  color: #0f172a !important;
}

/* Login/auth page should not be affected */
body.login-page.eps-theme-light,
body.auth-page.eps-theme-light {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}