/* ==========================================================================
   Cryptio Design System — Light mode
   A professional fintech aesthetic layered on top of Bootstrap 5.
   ========================================================================== */

:root {
    /* Core palette (HSL triplets) */
    --background: 0 0% 100%;
    --foreground: 222 84% 4.9%;
    --border: 214 32% 91%;
    --card: 0 0% 100%;
    --sidebar: 210 40% 98%;
    --primary: 175 77% 27%;
    --primary-foreground: 355 100% 97%;
    --secondary: 210 40% 94%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --destructive: 25 95% 50%;
    --success: 152 60% 36%;
    --input: 214 32% 91%;
    --ring: 175 77% 27%;

    --radius: 0.5rem;

    /* Interaction overlays */
    --elevate-1: rgba(0, 0, 0, 0.03);
    --elevate-2: rgba(0, 0, 0, 0.08);

    /* Shadows — minimal, nearly flat */
    --shadow-sm: 0px 2px 0px 0px hsl(220 15% 8% / 0.04), 0px 1px 2px -1px hsl(220 15% 8% / 0.08);
    --shadow-md: 0px 2px 0px 0px hsl(220 15% 8% / 0.05), 0px 2px 4px -1px hsl(220 15% 8% / 0.10);

    /* Map Bootstrap theme variables to Cryptio palette */
    --bs-body-bg: hsl(var(--background));
    --bs-body-color: hsl(var(--foreground));
    --bs-border-color: hsl(var(--border));
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.625rem;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-font-monospace: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Map Bootstrap semantic colors (for utility classes text-*/bg-*) */
    --bs-primary: hsl(var(--primary));
    --bs-primary-rgb: 16, 122, 113;
    --bs-success-rgb: 37, 147, 95;
    --bs-info-rgb: 16, 122, 113;
    --bs-warning-rgb: 249, 107, 6;
    --bs-danger-rgb: 249, 107, 6;
    --bs-secondary-rgb: 101, 117, 139;
    --bs-secondary-color: hsl(var(--muted-foreground));
}

html, body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}

code, .font-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    background-color: hsl(var(--muted));
    color: hsl(var(--foreground));
    padding: 0.1em 0.35em;
    border-radius: 0.375rem;
    font-size: 0.85em;
}

/* --- Typography ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    color: hsl(var(--foreground));
    font-weight: 600;
    letter-spacing: -0.01em;
}

.text-muted {
    color: hsl(var(--muted-foreground)) !important;
}

.lead {
    font-size: 1.0625rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
}

/* Brand mark in hero */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: hsl(var(--primary) / 0.10);
    color: hsl(var(--primary));
    font-size: 1.5rem;
}
.brand-mark.brand-success {
    background: hsl(var(--success) / 0.10);
    color: hsl(var(--success));
}

/* --- Hero ----------------------------------------------------------------- */
.hero-section {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.06), hsl(var(--sidebar)));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    padding: 2.75rem 2rem;
    margin-bottom: 2rem;
}
.hero-section h1 {
    font-size: 2rem;
    font-weight: 700;
}

/* --- Cards ---------------------------------------------------------------- */
.card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
}
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid hsl(var(--border));
    padding: 1.25rem 1.5rem;
    color: hsl(var(--foreground)) !important;
    font-weight: 600;
}
.card-header h5,
.card-header .card-title {
    color: hsl(var(--foreground)) !important;
    margin-bottom: 0;
}
.card-body {
    padding: 1.5rem;
}

/* Accent icon used inside neutral card headers */
.header-icon {
    color: hsl(var(--primary));
    margin-right: 0.5rem;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn-lg {
    min-height: 44px;
    padding: 0.625rem 1.75rem;
    font-size: 0.95rem;
}
.btn-sm {
    min-height: 32px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-primary,
.btn-success {
    background-color: hsl(var(--primary));
    border: 1px solid hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}
.btn-primary:hover,
.btn-success:hover {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: inset 0 0 0 999px var(--elevate-1);
}
.btn-primary:active,
.btn-success:active {
    box-shadow: inset 0 0 0 999px var(--elevate-2) !important;
}
.btn-primary:focus-visible,
.btn-success:focus-visible {
    box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-secondary:hover {
    background-color: var(--elevate-1);
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}
.btn-outline-primary:active,
.btn-outline-success:active,
.btn-outline-secondary:active {
    background-color: var(--elevate-2);
}

.btn-outline-danger {
    background-color: transparent;
    border: 1px solid hsl(var(--destructive) / 0.4);
    color: hsl(var(--destructive));
}
.btn-outline-danger:hover {
    background-color: hsl(var(--destructive) / 0.08);
    border-color: hsl(var(--destructive));
    color: hsl(var(--destructive));
}

.btn:disabled,
.btn.disabled {
    opacity: 0.5;
}

/* --- Badges --------------------------------------------------------------- */
.badge {
    border-radius: 0.375rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge.bg-light {
    background-color: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
    border: 1px solid hsl(var(--border));
}
.badge.bg-warning {
    background-color: hsl(var(--destructive) / 0.12) !important;
    color: hsl(var(--destructive)) !important;
}

/* --- Inputs --------------------------------------------------------------- */
.form-control {
    min-height: 36px;
    border-radius: 0.375rem;
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}
.form-control::placeholder {
    color: hsl(var(--muted-foreground));
}
.form-control:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
}
.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: hsl(var(--foreground));
}
.form-text {
    color: hsl(var(--muted-foreground));
    font-size: 0.8125rem;
}
.form-check-input {
    border-color: hsl(var(--input));
}
.form-check-input:checked {
    background-color: hsl(var(--primary));
    border-color: hsl(var(--primary));
}
.form-check-input:focus {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.form-check-label strong {
    color: hsl(var(--foreground));
}

/* --- Mode selection cards ------------------------------------------------- */
.mode-option {
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    height: 100%;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    cursor: pointer;
}
.mode-option:hover {
    background-color: var(--elevate-1);
}
.mode-option.selected {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.04);
    box-shadow: 0 0 0 1px hsl(var(--primary) / 0.4);
}

/* --- Drop zones ----------------------------------------------------------- */
.drop-zone {
    border: 2px dashed hsl(var(--border));
    border-radius: 0.625rem;
    padding: 2.25rem 1.5rem;
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: hsl(var(--sidebar));
}
.drop-zone:hover,
.drop-zone.dragover {
    border-color: hsl(var(--primary));
    background-color: hsl(var(--primary) / 0.04);
}
.drop-zone.filled {
    border-color: hsl(var(--success));
    border-style: solid;
    background-color: hsl(var(--success) / 0.05);
}
.drop-zone .drop-icon {
    color: hsl(var(--muted-foreground));
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}
.drop-zone h5 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.file-info {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background-color: hsl(var(--muted));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

/* --- Stats cards (results) ------------------------------------------------ */
.stats-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.625rem;
    padding: 1.5rem 1rem;
    text-align: center;
    box-shadow: var(--shadow-sm);
    height: 100%;
}
.stats-card .stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
    background-color: hsl(var(--primary) / 0.10);
    color: hsl(var(--primary));
}
.stats-card .stat-icon.accent-success { background-color: hsl(var(--success) / 0.12); color: hsl(var(--success)); }
.stats-card .stat-icon.accent-warning { background-color: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); }
.stats-card .stat-icon.accent-muted   { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.stats-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.stats-card p {
    font-size: 0.875rem;
    color: hsl(var(--foreground));
    font-weight: 500;
}
.stats-card small {
    color: hsl(var(--muted-foreground));
}

/* --- File cards (downloads) ----------------------------------------------- */
.download-section {
    background-color: hsl(var(--sidebar));
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    padding: 1.75rem;
    margin-top: 2rem;
}
.file-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.5rem;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.file-card:hover {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: var(--shadow-sm);
}

/* --- Tables --------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    color: hsl(var(--foreground));
    margin-bottom: 0;
}
.table > thead th {
    height: 3rem;
    padding: 0 1rem;
    vertical-align: middle;
    font-weight: 500;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
    background-color: transparent;
}
.table > tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid hsl(var(--border));
    vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
    background-color: var(--elevate-1);
}
.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* --- Alerts --------------------------------------------------------------- */
.alert {
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    padding: 0.9rem 1.1rem;
}
.alert-info {
    background-color: hsl(var(--primary) / 0.06);
    border-color: hsl(var(--primary) / 0.25);
    color: hsl(var(--foreground));
}
.alert-secondary {
    background-color: hsl(var(--muted));
    border-color: hsl(var(--border));
    color: hsl(var(--foreground));
}
.alert-success {
    background-color: hsl(var(--success) / 0.08);
    border-color: hsl(var(--success) / 0.3);
    color: hsl(var(--foreground));
}
.alert-danger {
    background-color: hsl(var(--destructive) / 0.08);
    border-color: hsl(var(--destructive) / 0.3);
    color: hsl(var(--foreground));
}

/* --- Section headers ------------------------------------------------------ */
.section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
}

hr {
    border-color: hsl(var(--border));
    opacity: 1;
}

/* --- Progress ------------------------------------------------------------- */
.progress {
    background-color: hsl(var(--muted));
    border-radius: 999px;
    height: 0.5rem;
}
.progress-bar {
    background-color: hsl(var(--primary));
}
.spinner-border {
    color: hsl(var(--primary));
}

/* Utility color overrides to match palette */
.text-primary { color: hsl(var(--primary)) !important; }
.text-success { color: hsl(var(--success)) !important; }
.text-info    { color: hsl(var(--primary)) !important; }
.text-warning { color: hsl(var(--destructive)) !important; }
.text-danger  { color: hsl(var(--destructive)) !important; }