/* Magic Ribbon common Bootstrap theme
   All page-specific CSS was moved out of PHP files into this shared file. */
:root {
  --mr-bg: #f4f7fb;
  --mr-bg-accent: #eaf1ff;
  --mr-panel: rgba(255,255,255,.94);
  --mr-panel-solid: #ffffff;
  --mr-text: #111827;
  --mr-muted: #64748b;
  --mr-border: #e2e8f0;
  --mr-border-strong: #cbd5e1;
  --mr-primary: #2563eb;
  --mr-primary-dark: #1d4ed8;
  --mr-primary-soft: #eff6ff;
  --mr-success-bg: #ecfdf5;
  --mr-success-border: #a7f3d0;
  --mr-success-text: #047857;
  --mr-danger-bg: #fef2f2;
  --mr-danger-border: #fecaca;
  --mr-danger-text: #b91c1c;
  --mr-warning-bg: #fffbeb;
  --mr-warning-text: #92400e;
  --mr-shadow: 0 16px 44px rgba(15,23,42,.08);
  --mr-shadow-sm: 0 8px 24px rgba(15,23,42,.06);
  --mr-radius: 18px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--mr-text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, .10), transparent 32rem),
    radial-gradient(circle at top right, rgba(14, 165, 233, .10), transparent 28rem),
    linear-gradient(180deg, var(--mr-bg-accent) 0%, var(--mr-bg) 42%, #fff 100%);
}
body.panel-page { padding: 18px; }
body.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
}
a { color: var(--mr-primary); text-decoration: none; }
a:hover { color: var(--mr-primary-dark); }
h1 { font-size: clamp(1.55rem, 2.3vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 14px; }
h2 { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
.section-title { margin: 24px 0 12px; }
.wrap { max-width: none; margin: 0 auto; padding: 0; }

/* Navigation */
.topnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 18px;
  padding: 10px 12px;
  background: rgba(255,255,255,.90);
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  box-shadow: var(--mr-shadow-sm);
  backdrop-filter: blur(10px);
}
.topnav .brand,
.panel-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--mr-text);
  font-weight: 900;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.panel-brand-logo,
.topnav .brand img,
.login-brand img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}
.topnav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  color: #334155;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  line-height: 1;
  transition: .16s ease;
}
.topnav a:hover,
.topnav a.active {
  color: var(--mr-primary-dark);
  background: var(--mr-primary-soft);
  border-color: #bfdbfe;
}
.topnav .logout {
  color: #475569;
  background: #f8fafc;
  border-color: var(--mr-border);
}
.topnav .logout:hover {
  color: var(--mr-danger-text);
  background: var(--mr-danger-bg);
  border-color: var(--mr-danger-border);
}

/* Cards and layouts */
.card,
.login-card,
.table-card,
.toolbar,
.stat,
.group {
  background: var(--mr-panel);
  border: 1px solid var(--mr-border);
  border-radius: var(--mr-radius);
  box-shadow: var(--mr-shadow-sm);
}
.card { padding: 18px; margin: 0 0 16px; min-width: 0; }
.table-card { padding: 14px; margin-bottom: 16px; overflow: auto; }
.login-card {
  width: 410px;
  max-width: 100%;
  padding: 28px;
  box-shadow: var(--mr-shadow);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--mr-text);
  font-size: 18px;
  font-weight: 900;
}
.top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.subtitle,
.muted,
.small,
.card .label,
.dataTables_wrapper .dataTables_info {
  color: var(--mr-muted);
  opacity: 1;
}
.small { font-size: 12px; }
.card .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
}
.card .value { font-size: 23px; font-weight: 850; margin-top: 8px; letter-spacing: -.03em; }
.cards,
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.stat { padding: 14px; }
.stat b { display: inline-block; margin-top: 4px; font-size: 24px; letter-spacing: -.04em; }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.live-position-stack { display: flex; flex-direction: column; gap: 6px; }
.hour-note { margin: -2px 0 10px; }
.controls-profit { margin-top: 14px; }

/* Forms */
label { font-weight: 700; color: #334155; }
input,
select,
textarea,
.form-control,
.form-select,
.controls input,
.controls select,
.toolbar select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  color: var(--mr-text);
  background: var(--mr-panel-solid);
  border: 1px solid var(--mr-border-strong);
 /*  border-radius: 12px; */
  padding: 9px 11px;
  outline: 0;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
input:focus,
select:focus,
textarea:focus,
.controls input:focus,
.controls select:focus,
.toolbar select:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 .22rem rgba(37,99,235,.12);
}
input::placeholder,
textarea::placeholder { color: #94a3b8; }
.login-card label { display: block; margin: 14px 0 7px; font-size: 13px; }
.login-card input { width: 100%; }
.check,
.controls input[type="checkbox"] { width: auto; padding: 0; accent-color: var(--mr-primary); }
.check { justify-self: start; transform: scale(1.12); }
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin: 12px 0 4px;
}
.controls input,
.controls select { width: 130px; }
.controls input.profitInput { width: 90px; }
.hour-exclude label { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  padding: 12px;
}
button,
.btn,
.controls button,
.toolbar button,
.dt-button,
button[name="save_strategy_settings"],
#saveFiltersBtn,
button[name="save_hours"],
.save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  color: #fff !important;
  background: linear-gradient(135deg, var(--mr-primary), var(--mr-primary-dark)) !important;
  border: 1px solid rgba(37,99,235,.18) !important;
  border-radius: 12px !important;
  padding: 9px 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  box-shadow: 0 10px 20px rgba(37,99,235,.18) !important;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
button:hover,
.btn:hover,
.controls button:hover,
.toolbar button:hover,
.dt-button:hover,
button[name="save_strategy_settings"]:hover,
#saveFiltersBtn:hover,
button[name="save_hours"]:hover,
.save-btn:hover {
  filter: brightness(.98);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(37,99,235,.22) !important;
}
button:active,
.btn:active,
.controls button:active,
.toolbar button:active,
.dt-button:active { transform: translateY(1px); }

/* Settings page */
.group { padding: 14px; margin: 10px 0; }
.group legend { float: none; width: auto; padding: 0 6px; margin: 0; font-size: 13px; font-weight: 900; color: #1e293b; }
.field { display: grid; grid-template-columns: minmax(190px, 1fr) minmax(160px, 2fr); gap: 10px; align-items: center; margin: 8px 0; }
.field span { font-size: 13px; font-weight: 800; word-break: break-word; }
.sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0 12px;
  margin-bottom: 12px;
  background: linear-gradient(180deg, rgba(244,247,251,.98) 0%, rgba(244,247,251,.82) 100%);
  border-bottom: 1px solid rgba(203,213,225,.8);
  backdrop-filter: blur(10px);
}

/* Badges and alerts */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--mr-border-strong);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--mr-text);
  background: #f8fafc;
}
.badge-flat,
.flat { color: #334155 !important; background: #f8fafc !important; border-color: var(--mr-border-strong) !important; }
.badge-long,
.badge-win,
.win,
.green,
.pnl-positive,
.msg,
.text-success-emphasis {
  color: var(--mr-success-text) !important;
}
.badge-long,
.badge-win,
.win,
.msg {
  background: var(--mr-success-bg) !important;
  border-color: var(--mr-success-border) !important;
}
.badge-short,
.badge-loss,
.loss,
.red,
.pnl-negative,
.err,
.error,
.text-danger-emphasis {
  color: var(--mr-danger-text) !important;
}
.badge-short,
.badge-loss,
.loss,
.err,
.error {
  background: var(--mr-danger-bg) !important;
  border-color: var(--mr-danger-border) !important;
}
.msg,
.err,
.error {
  border: 1px solid;
  padding: 11px 12px;
  border-radius: 14px;
  font-weight: 800;
}
.error { display: none; margin: 12px 0; }
.warn { color: var(--mr-warning-text) !important; background: var(--mr-warning-bg) !important; }
.mono,
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #0f172a;
  background: #fff;
  border-radius: 0px;
  padding: 1px 5px;
}

/* Chart */
#chart {
  position: relative;
  height: 520px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mr-border);
 /*  border-radius: 16px; */
}
.legend {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 2;
  color: var(--mr-text);
  background: rgba(255,255,255,.94);
  border: 1px solid var(--mr-border);
  border-radius: 12px;
  padding: 7px 10px;
  font-size: 12px;
  box-shadow: var(--mr-shadow-sm);
  pointer-events: none;
}

/* Tables and DataTables */
.table-wrap { overflow: auto; max-width: 100%; }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 10px 9px; border-bottom: 1px solid var(--mr-border); text-align: left; vertical-align: middle; }
th.num, td.num { text-align: right; }
.sep { border-left: 1px solid var(--mr-border); }
table.dataTable,
table.dataTable.no-footer {
  width: 100% !important;
  color: var(--mr-text) !important;
  background: #fff !important;
  border: 1px solid var(--mr-border) !important;
/*   border-radius: 14px; */
  overflow: hidden;
}
table.dataTable thead th {
  white-space: nowrap;
  color: #334155 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--mr-border) !important;
  font-weight: 900;
}
table.dataTable tbody td { border-bottom: 1px solid var(--mr-border) !important; }
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even,
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3,
table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
  background: #fff !important;
}
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.display tbody tr:hover > .sorting_3 { background: #f8fafc !important; }
.dataTables_wrapper { width: 100%; overflow: visible !important; color: var(--mr-text) !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate { color: var(--mr-text) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--mr-text) !important;
  border: 1px solid var(--mr-border) !important;
  background: #fff !important;
/*   border-radius: 10px !important; */
  margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: var(--mr-primary-dark) !important;
  background: var(--mr-primary-soft) !important;
  border-color: #bfdbfe !important;
}
.dataTables_scroll,
.dataTables_scrollHead,
.dataTables_scrollHeadInner,
.dataTables_scrollBody { width: 100% !important; background: #fff !important; }
.dataTables_scrollHead { overflow: hidden !important; }
.dataTables_scrollBody { overflow-x: auto !important; overflow-y: visible !important; }
.dataTables_scrollHead table,
.dataTables_scrollBody table { margin-left: 0 !important; background: #fff !important; }
#tradesTable { white-space: nowrap; width: 100% !important; }
tr.row-open td,
table.dataTable tbody tr.row-open td,
table.dataTable tbody tr.result-open td { color: var(--mr-danger-text) !important; background: var(--mr-danger-bg) !important; font-weight: 800 !important; }
table.dataTable tbody tr.result-win td,
table.dataTable tbody tr.result-win td * { color: #0f172a !important; font-weight: 700 !important; }
table.dataTable tbody tr.result-loss td,
table.dataTable tbody tr.result-loss td * { color: var(--mr-danger-text) !important; }

@media (max-width: 900px) {
  body.panel-page { padding: 12px; }
  .top { flex-direction: column; }
  .topnav .brand { width: 100%; margin-right: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .login-card { padding: 22px; }
  .topnav a { width: 100%; justify-content: flex-start; }
}

/* ===== Settings page fix: do not squeeze config sections into narrow columns ===== */
.settings-page .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr));
  gap: 18px;
  align-items: start;
  margin: 18px 0 28px;
}

.settings-page .grid > .group {
  margin: 0;
  padding: 18px;
  min-width: 0;
  overflow: hidden;
}

.settings-page .group .group {
  background: rgba(248, 250, 252, .72);
  box-shadow: none;
  margin: 14px 0 0;
}

.settings-page .field {
  display: grid;
  grid-template-columns: minmax(210px, .85fr) minmax(0, 1.15fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.settings-page .field span {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.settings-page .field input:not([type="checkbox"]),
.settings-page .field select,
.settings-page .field textarea {
  width: 100%;
  min-width: 0;
}

.settings-page .field input[type="checkbox"] {
  justify-self: start;
}

.settings-page .sticky {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 760px) {
  .settings-page .grid {
    grid-template-columns: 1fr;
  }
  .settings-page .field {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}


/* ===== Index trades table: same visual behavior as list.php tables ===== */
.index-trades-card {
  padding: 14px;
  overflow: hidden;
}
.index-trades-card .controls {
  background: #f8fafc;
  border: 1px solid var(--mr-border);
/*   border-radius: 14px; */
  padding: 12px;
}
.index-trades-card .hour-exclude {
  align-items: flex-start;
}
.index-trades-card .hour-exclude > span {
  width: 100%;
  font-weight: 900;
  color: #334155;
}
.index-trades-card .hour-exclude label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--mr-border);
  /* border-radius: 999px; */
  font-size: 13px;
}
.index-trades-card .dataTables_wrapper {
  margin-top: 12px;
}
#tradesTable.dataTable {
  width: 100% !important;
  min-width: 1500px;
  /* border-radius: 14px; */
  overflow: hidden;
}
#tradesTable.dataTable thead th {
 
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 13px;
  font-weight: 900;
  border-bottom: 1px solid var(--mr-border) !important;
  white-space: nowrap;
}
#tradesTable.dataTable tbody td {
  padding: 11px 14px !important;
  font-size: 13px;
  vertical-align: middle;
  white-space: nowrap;
}
#tradesTable.dataTable tbody tr:hover td {
  background: #f8fafc !important;
}
#tradesTable .badge {
  min-width: 52px;
  justify-content: center;
}
#tradesTable .mono {
  font-variant-numeric: tabular-nums;
}
.index-trades-card .dataTables_scrollBody {
  border: 1px solid var(--mr-border);
  border-top: 0;
/*   border-radius: 0 0 14px 14px; */
}
.index-trades-card .dataTables_scrollHead table.dataTable {
 /*  border-radius: 14px 14px 0 0; */
}
div.dt-buttons {
    float: left;
 margin-bottom: 12px; 
}

/* ===== Report filters: same checkbox design as index.php ===== */
.report-filters-card {
  overflow: hidden;
}
.report-filters-card form {
  margin: 0;
}
.report-filters-card .controls {
  background: #f8fafc;
  border: 1px solid var(--mr-border);
  padding: 12px;
}
.report-filters-card .hour-exclude {
  align-items: flex-start;
}
.report-filters-card .hour-exclude > span {
  width: 100%;
  font-weight: 900;
  color: #334155;
}
.report-filters-card .hour-exclude label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  margin: 0;
  padding: 5px 8px;
  background: #fff;
  border: 1px solid var(--mr-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.report-filters-card .hour-exclude input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  accent-color: var(--mr-primary);
}
.report-filters-card .hour-exclude label:has(input[type="checkbox"]:checked) {
  color: var(--mr-primary-dark);
  background: var(--mr-primary-soft);
  border-color: #bfdbfe;
}
.report-filters-card .hour-note {
  margin: -2px 0 10px;
}
@media (max-width: 760px) {
  .report-filters-card .controls {
    gap: 8px;
  }
  .report-filters-card .hour-exclude label {
    min-width: 52px;
    justify-content: center;
  }
}


/* ===== MySQL bot history table: stable horizontal scroll header ===== */
.mysql-history-card {
  overflow: hidden;
}

.mysql-history-card .dataTables_wrapper,
.mysql-history-card .dataTables_scroll {
  width: 100% !important;
  overflow: hidden !important;
}

.mysql-history-card .dataTables_scrollHead {
  position: relative;
  z-index: 3;
  overflow: hidden !important;
  border: 1px solid var(--mr-border);
  border-bottom: 0;
  background: #fff !important;
}

.mysql-history-card .dataTables_scrollBody {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  border: 1px solid var(--mr-border);
  border-top: 0;
  background: #fff !important;
}

.mysql-history-card .dataTables_scrollHeadInner,
.mysql-history-card .dataTables_scrollHeadInner table,
.mysql-history-card .dataTables_scrollBody table {
  width: max-content !important;
  min-width: 100% !important;
}

#mysqlTrades.dataTable {
  min-width: 1520px;
}

#mysqlTrades.dataTable thead th,
#mysqlTrades.dataTable tbody td {
  white-space: nowrap;
}

/* Единый блок параметров стратегии и фильтров на всех страницах. */
.global-settings-shell{
  margin:12px 0 16px;
  border:1px solid #dbe3ee;
  border-radius:14px;
  background:#fff;
  box-shadow:0 5px 18px rgba(15,23,42,.06);
  overflow:hidden;
}
.global-settings-shell>summary{
  cursor:pointer;
  padding:13px 16px;
  font-weight:700;
  background:#f8fafc;
  user-select:none;
}
.global-settings-panel{padding:14px 16px 16px}
.global-settings-section+ .global-settings-section{margin-top:16px;padding-top:14px;border-top:1px solid #e5e7eb}
.global-settings-section h3{font-size:17px;margin:0 0 10px}
.global-settings-grid{display:grid;grid-template-columns:repeat(6,minmax(105px,1fr));gap:10px;align-items:end}
.global-settings-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.global-settings-grid input{width:100%;min-width:0}
.global-settings-subtitle{font-weight:700;margin:12px 0 7px}
.global-settings-checks{display:flex;flex-wrap:wrap;gap:7px 10px}
.global-settings-checks label{display:inline-flex;align-items:center;gap:4px;min-width:42px;font-size:13px}
.global-settings-checks.compact label{min-width:auto;margin-right:8px}
.global-settings-note{font-size:12px;color:#64748b;margin-top:7px}
.global-settings-actions{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid #e5e7eb}
.global-settings-actions button{font-weight:700;padding:9px 20px}
.global-settings-status{font-size:13px;color:#475569}
.global-settings-status.is-ok{color:#15803d}
.global-settings-status.is-dirty{color:#a16207}
.global-settings-status.is-working{color:#1d4ed8}
.global-settings-status.is-error{color:#b91c1c}
.legacy-settings-block,.legacy-filter-controls{display:none!important}
@media (max-width:1100px){.global-settings-grid{grid-template-columns:repeat(3,minmax(120px,1fr))}}
@media (max-width:640px){
  .global-settings-grid{grid-template-columns:repeat(2,minmax(110px,1fr))}
  .global-settings-actions{align-items:flex-start;flex-direction:column}
}