/* Madocks dark fintech theme.
   Loaded LAST on every page (Blade layouts, legacy HTML via LegacyPage, v3_B pages),
   so it re-skins the older stylesheets without touching page logic or markup.
   Tokens first, then a global skin, then per-component overrides. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    --primary: #070708;
    --black: #000000;
    --white: #ffffff;
    --orange: #ff7a18;
    --mk-bg: #070708;
    --mk-surface: #101012;
    --mk-surface-2: #17171a;
    --mk-line: #242428;
    --mk-line-2: #2e2e33;
    --mk-text: #e9e9ea;
    --mk-muted: #a7a7ad;
    --mk-brand: #ff7a18;
    --mk-brand-2: #ffb06a;
    --mk-good: #44d18d;
    --mk-bad: #ff4d4d;
    --mk-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mk-head: 'Sora', 'IBM Plex Sans', sans-serif;
    --mk-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
}

/* ---------- global skin ---------- */
html, body {
    background-color: var(--mk-bg) !important;
    color: var(--mk-text);
    font-family: var(--mk-font) !important;
    -webkit-font-smoothing: antialiased;
}
body { min-height: 100%; }
/* drifting aurora + fading grid behind every page */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background:
        radial-gradient(600px 380px at 82% 0%, rgba(255,122,24,.16), transparent 70%),
        radial-gradient(520px 340px at 6% 10%, rgba(255,150,60,.07), transparent 70%);
    animation: mk-drift 16s ease-in-out infinite alternate;
}
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
    background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 25%, transparent 75%);
}
@keyframes mk-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-24px,18px,0) scale(1.06); } }
@keyframes mk-shine { to { background-position: -250% 0; } }
@keyframes mk-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

h1, h2, h3, h4, h5, h6 { font-family: var(--mk-head) !important; letter-spacing: -0.02em; color: var(--mk-text); }
a { transition: color .2s; }
::selection { background: rgba(255,122,24,.35); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #2e2e33 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #2e2e33; border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--mk-brand); outline-offset: 2px; }

/* ---------- top navigation (Blade + legacy header) ---------- */
.header_section { padding-top: 18px; }
.home_section::after { opacity: .18; filter: saturate(.6); }
.header {
    padding: 10px 18px; margin-bottom: 8px;
    background: rgba(16,16,18,.62);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.08); border-radius: 18px;
}
.header_menu a { font-family: var(--mk-font); font-size: 15px; font-weight: 500; color: var(--mk-muted); margin: 0 14px; position: relative; }
.header_menu a:hover { color: #fff; }
.header_menu > a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
    background: var(--mk-brand); transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.header_menu > a:hover::after { transform: scaleX(1); }
.dropdown-content, .nested-content {
    background: rgba(16,16,18,.96) !important;
    border: 1px solid var(--mk-line-2); border-radius: 16px !important;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.8) !important;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.dropdown-content a { color: var(--mk-muted) !important; border-radius: 10px; font-size: 14px !important; margin: 0 !important; }
.dropdown-content a:hover { background: rgba(255,122,24,.1) !important; color: #fff !important; }

/* ---------- buttons ---------- */
.get_started_btn a, .get_started_btn_white, .btn-primary,
.graph_button, .subscribe_btn, .info-btn, input[type=submit], button[type=submit] {
    font-family: var(--mk-font); font-weight: 600; border-radius: 12px;
    transition: transform .2s, box-shadow .2s, border-color .2s, filter .2s;
}
.get_started_btn a, .btn-primary, .subscribe_btn {
    background-color: var(--mk-brand); color: #140a02 !important; border: 1px solid var(--mk-brand);
    background-image: linear-gradient(110deg, #ff7a18 38%, #ffb06a 50%, #ff7a18 62%); background-size: 250% 100%;
    animation: mk-shine 5s linear infinite; box-shadow: 0 8px 28px -10px rgba(255,122,24,.7);
}
.get_started_btn a:hover, .btn-primary:hover, .subscribe_btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px -8px rgba(255,122,24,.9); }
.graph_button:hover, .info-btn:hover { transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- surfaces ---------- */
.card, .section-box, .graph_section, .service_list_box, .ratings_section, .rating_form, .module-tag,
.feature-value, .card-top, .modal-content {
    background-image: linear-gradient(180deg, rgba(24,24,27,.92), rgba(16,16,18,.92)) !important;
    border-color: var(--mk-line) !important; border-radius: 18px;
}
.card, .section-box, .service_list_box { transition: transform .3s, border-color .3s, box-shadow .3s; }
.card:hover, .service_list_box:hover { border-color: #4a2c14 !important; }
.chip, .tag, .badge { font-family: var(--mk-font); border-radius: 999px; }

/* ---------- forms ----------
   No !important here on purpose: page-level rules for specific panels (terminals,
   toolbars) are more specific than these element selectors and keep winning, so only
   plain fields pick up the new look. Checkboxes, radios, ranges and colour pickers
   are left alone entirely. */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]), select, textarea, .form-control {
    font-family: var(--mk-font);
    background-color: rgba(7,7,8,.8); color: var(--mk-text);
    border: 1px solid var(--mk-line-2); border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #6e6e76; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=button]):not([type=submit]):not([type=reset]):not([type=hidden]):not([type=image]):focus, select:focus, textarea:focus, .form-control:focus {
    outline: none; border-color: var(--mk-brand); box-shadow: 0 0 0 4px rgba(255,122,24,.16);
}
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--mk-brand); }
label { color: var(--mk-muted); }
option { background: #101012; color: var(--mk-text); }

/* ---------- tables ---------- */
table { border-collapse: collapse; }
th { color: var(--mk-muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--mk-line) !important; }
td { border-bottom: 1px solid #1c1c20 !important; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(255,122,24,.05); }

/* ---------- footer ---------- */
.footer_section { border-top: 1px solid var(--mk-line); background: rgba(10,10,12,.8) !important; }
.footer_links h3 { font-size: 15px; color: var(--mk-text); }
.footer_links a { color: var(--mk-muted) !important; transition: color .2s; }
.footer_links a:hover { color: var(--mk-brand) !important; }
.footer_box p, .sub_footer, .sub_footer p { color: var(--mk-muted); }
.subscribe_div input { border-radius: 12px; }

/* ---------- Tailwind pages (auth, billing, dashboard shells) ---------- */
.bg-slate-950 { background-color: var(--mk-bg) !important; }
.bg-slate-900 { background-color: rgba(16,16,18,.9) !important; }
.bg-slate-800 { background-color: var(--mk-surface-2) !important; }
.border-slate-800, .border-slate-700 { border-color: var(--mk-line) !important; }
.text-slate-300, .text-slate-400 { color: var(--mk-muted) !important; }
.bg-indigo-600, .bg-blue-600, .bg-sky-600, .bg-emerald-600 { background-color: var(--mk-brand) !important; color: #140a02 !important; }
.bg-indigo-600:hover, .bg-blue-600:hover, .bg-sky-600:hover, .bg-emerald-600:hover { background-color: var(--mk-brand-2) !important; }
.text-indigo-400, .text-sky-400, .text-blue-400 { color: var(--mk-brand) !important; }
.rounded-2xl { border-radius: 20px; }

/* ---------- modals and toasts ---------- */
.modal-content { color: var(--mk-text); border: 1px solid var(--mk-line-2); }
.modal-backdrop.show { opacity: .7; }

@media (max-width: 768px) {
    .header { border-radius: 14px; padding: 8px 12px; }
    body::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}