/* ============================================
   BTCPay Server - Elegant Black Theme
   Inspired by Kredete App Design
   ============================================ */

/* ============================================
   COLOR PALETTE & VARIABLES
   ============================================ */
:root {
    /* Primary Brand Colors - Kredete Inspired */
    --btcpay-brand-primary: #00D9A3;
    --btcpay-brand-secondary: #00B88A;
    --btcpay-brand-tertiary: #009B75;

    /* Background Colors - Deep Black Theme */
    --btcpay-body-bg: #0A0A0A;
    --btcpay-bg-tile: #141414;
    --btcpay-bg-tile-hover: #1A1A1A;
    --btcpay-neutral-100: #1F1F1F;
    --btcpay-neutral-200: #2A2A2A;
    --btcpay-neutral-300: #353535;
    --btcpay-neutral-400: #4A4A4A;
    --btcpay-neutral-500: #6B6B6B;

    /* Text Colors */
    --btcpay-body-text: #FFFFFF;
    --btcpay-body-text-muted: #A0A0A0;
    --btcpay-body-text-hover: #FFFFFF;
    --btcpay-body-link-accent: #00D9A3;
    --btcpay-body-link-rgb: 0, 217, 163;

    /* Primary Color System */
    --btcpay-primary: #00D9A3;
    --btcpay-primary-rgb: 0, 217, 163;
    --btcpay-primary-text: #000000;
    --btcpay-primary-shadow: rgba(0, 217, 163, 0.3);

    /* Status Colors */
    --btcpay-success: #00D9A3;
    --btcpay-success-text: #000000;
    --btcpay-warning: #FFB800;
    --btcpay-warning-text: #000000;
    --btcpay-danger: #FF4757;
    --btcpay-danger-text: #FFFFFF;
    --btcpay-danger-border: #FF3545;
    --btcpay-info: #00A8FF;
    --btcpay-info-text: #000000;

    /* Form Elements */
    --btcpay-form-bg: #1A1A1A;
    --btcpay-form-bg-hover: #202020;
    --btcpay-form-bg-disabled: #141414;
    --btcpay-form-text: #FFFFFF;
    --btcpay-form-border: #2A2A2A;
    --btcpay-form-border-hover: #353535;
    --btcpay-form-border-focus: #00D9A3;
    --btcpay-form-border-disabled: #1F1F1F;

    /* Borders & Dividers */
    --btcpay-body-border-light: #2A2A2A;
    --btcpay-border-width: 1px;
    --btcpay-border-radius: 8px;
    --btcpay-border-radius-l: 12px;

    /* Dropdown */
    --btcpay-dropdown-bg: #1A1A1A;
    --btcpay-dropdown-color: #FFFFFF;
    --btcpay-dropdown-border-color: #2A2A2A;
    --btcpay-dropdown-border-width: 1px;
    --btcpay-dropdown-border-radius: 8px;
    --btcpay-dropdown-padding-x: 1rem;
    --btcpay-dropdown-padding-y: 0.5rem;
    --btcpay-dropdown-min-width: 10rem;

    /* Shadows */
    --btcpay-box-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --btcpay-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);

    /* Spacing */
    --btcpay-space-xs: 0.25rem;
    --btcpay-space-s: 0.5rem;
    --btcpay-space-m: 1rem;
    --btcpay-space-l: 1.5rem;
    --btcpay-space-xl: 2rem;

    /* Typography */
    --btcpay-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --btcpay-font-monospace: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;
    --btcpay-font-size-s: 0.875rem;
    --btcpay-font-weight-normal: 400;
    --btcpay-font-weight-semibold: 600;
    --btcpay-font-weight-bold: 700;

    /* Transitions */
    --btcpay-transition-duration-fast: 0.15s;
    --btcpay-link-opacity: 1;

    /* Chart Colors */
    --chart-main-rgb: var(--btcpay-primary-rgb);
    --chart-series-a-rgb: 0, 217, 163;
    --chart-series-b-rgb: 255, 184, 0;
    --chart-series-c-rgb: 0, 168, 255;
    --chart-series-d-rgb: 255, 71, 87;
    --chart-series-e-rgb: 160, 98, 255;

    /* White for QR codes and specific elements */
    --btcpay-white: #FFFFFF;

    /* Profile Picture */
    --profile-picture-size: 2.1rem;

    /* Sticky Header */
    --sticky-header-height: 0;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
    background-color: var(--btcpay-body-bg);
    color: var(--btcpay-body-text);
    font-family: var(--btcpay-font-family-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   LINKS & BUTTONS
   ============================================ */
a {
    color: var(--btcpay-body-link-accent);
    text-decoration: none;
    transition: all var(--btcpay-transition-duration-fast) ease;
}

a:hover {
    color: var(--btcpay-brand-secondary);
    text-decoration: none;
}

.btn-primary {
    background: linear-gradient(135deg, var(--btcpay-primary) 0%, var(--btcpay-brand-secondary) 100%);
    border: none;
    color: var(--btcpay-primary-text);
    font-weight: var(--btcpay-font-weight-semibold);
    padding: 0.75rem 1.5rem;
    border-radius: var(--btcpay-border-radius);
    box-shadow: 0 4px 12px var(--btcpay-primary-shadow);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--btcpay-brand-secondary) 0%, var(--btcpay-brand-tertiary) 100%);
    box-shadow: 0 6px 20px var(--btcpay-primary-shadow);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--btcpay-neutral-200);
    border: 1px solid var(--btcpay-neutral-300);
    color: var(--btcpay-body-text);
    font-weight: var(--btcpay-font-weight-semibold);
    padding: 0.75rem 1.5rem;
    border-radius: var(--btcpay-border-radius);
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background-color: var(--btcpay-neutral-300);
    border-color: var(--btcpay-neutral-400);
    transform: translateY(-2px);
}

.btn-link {
    color: var(--btcpay-body-link-accent);
    text-decoration: none;
}

.btn-link:hover {
    color: var(--btcpay-brand-secondary);
}

/* ============================================
   CARDS & TILES
   ============================================ */
.tile {
    --tile-padding: 1.5rem;
    --tile-border-radius: var(--btcpay-border-radius-l);
    padding: var(--tile-padding);
    background: var(--btcpay-bg-tile);
    border-radius: var(--tile-border-radius);
    box-shadow: var(--btcpay-box-shadow-lg);
    border: 1px solid var(--btcpay-body-border-light);
    transition: all 0.3s ease;
}

.tile:hover {
    background: var(--btcpay-bg-tile-hover);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    border-color: var(--btcpay-neutral-300);
}

.card {
    background-color: var(--btcpay-bg-tile);
    border: 1px solid var(--btcpay-body-border-light);
    border-radius: var(--btcpay-border-radius-l);
    box-shadow: var(--btcpay-box-shadow);
}

/* ============================================
   FORMS
   ============================================ */
.form-control,
.form-select {
    background-color: var(--btcpay-form-bg);
    border: 1px solid var(--btcpay-form-border);
    color: var(--btcpay-form-text);
    border-radius: var(--btcpay-border-radius);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.form-control:hover,
.form-select:hover {
    background-color: var(--btcpay-form-bg-hover);
    border-color: var(--btcpay-form-border-hover);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--btcpay-form-bg);
    border-color: var(--btcpay-form-border-focus);
    box-shadow: 0 0 0 3px rgba(0, 217, 163, 0.1);
    color: var(--btcpay-form-text);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--btcpay-form-bg-disabled);
    border-color: var(--btcpay-form-border-disabled);
    opacity: 0.5;
}

.form-label {
    color: var(--btcpay-body-text);
    font-weight: var(--btcpay-font-weight-semibold);
    margin-bottom: 0.5rem;
}

.form-control-plaintext {
    color: var(--btcpay-body-text);
}

/* ============================================
   TABLES
   ============================================ */
.table {
    color: var(--btcpay-body-text);
    border-color: var(--btcpay-body-border-light);
}

.table thead th {
    background-color: var(--btcpay-neutral-100);
    color: var(--btcpay-body-text-muted);
    font-weight: var(--btcpay-font-weight-semibold);
    border-bottom: 2px solid var(--btcpay-body-border-light);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
}

.table tbody tr {
    border-bottom: 1px solid var(--btcpay-body-border-light);
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: var(--btcpay-bg-tile-hover);
}

.table td {
    padding: 1rem;
    vertical-align: middle;
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-weight: var(--btcpay-font-weight-semibold);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.badge-new,
.badge-pending {
    background: linear-gradient(135deg, #00D9A3 0%, #00B88A 100%);
    color: #000;
}

.badge-expired {
    background: var(--btcpay-neutral-300);
    color: var(--btcpay-body-text-muted);
}

.badge-invalid {
    background: var(--btcpay-danger);
    color: var(--btcpay-danger-text);
}

.badge-unusual,
.badge-processing {
    background: var(--btcpay-warning);
    color: var(--btcpay-warning-text);
}

.badge-settled {
    background: var(--btcpay-success);
    color: var(--btcpay-success-text);
}

/* ============================================
   DASHBOARD & WIDGETS
   ============================================ */
#Dashboard {
    display: grid;
    gap: var(--btcpay-space-m);
    grid-template-columns: repeat(12, 1fr);
}

.widget {
    --widget-padding: var(--btcpay-space-m);
    --widget-chart-width: 100vw;
    border: 1px solid var(--btcpay-body-border-light);
    border-radius: var(--btcpay-border-radius-l);
    padding: var(--widget-padding);
    background: var(--btcpay-bg-tile);
    box-shadow: var(--btcpay-box-shadow);
    transition: all 0.3s ease;
}

.widget:hover {
    border-color: var(--btcpay-neutral-300);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.widget header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--btcpay-space-s);
    gap: var(--btcpay-space-s);
    line-height: 1.2;
}

.widget h3,
.widget .h3 {
    margin-bottom: 0;
    color: var(--btcpay-body-text);
    font-weight: var(--btcpay-font-weight-bold);
}

.widget h6,
.widget .h6 {
    font-weight: var(--btcpay-font-weight-semibold);
    color: var(--btcpay-body-text-muted);
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

/* ============================================
   PAYMENT BOX & QR CODES
   ============================================ */
.payment-box {
    --qr-size: 256px;
    --icon-size: 64px;
    --icon-border-size: var(--btcpay-space-xs);
    --icon-border-color: var(--btcpay-white);
    max-width: 320px;
    min-width: var(--qr-size);
    margin: 0 auto;
    text-align: center;
}

.payment-box .qr-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: var(--qr-size);
    background: var(--btcpay-bg-tile);
    border-radius: var(--btcpay-border-radius-l);
    padding: var(--btcpay-space-m);
    box-shadow: var(--btcpay-box-shadow);
}

.payment-box .qr-container svg,
.payment-box .qr-container img.qr-code {
    border-radius: var(--btcpay-border-radius);
    background: var(--btcpay-white);
    width: 100%;
    box-shadow: 0 4px 12px rgba(0, 217, 163, 0.2);
}

#qrCode {
    padding: 10px;
    background: white;
    display: inline-block;
    border-radius: var(--btcpay-border-radius);
    box-shadow: 0 4px 12px rgba(0, 217, 163, 0.2);
}

/* ============================================
   STORE HEADER & BRANDING
   ============================================ */
.store-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--btcpay-space-s);
    padding: var(--btcpay-space-l);
}

.store-logo {
    --logo-size: 3rem;
    --logo-bg: transparent;
    --logo-radius: 50%;
    max-height: var(--logo-size);
    background: var(--logo-bg);
    border-radius: var(--logo-radius);
    box-shadow: 0 4px 12px rgba(0, 217, 163, 0.2);
}

.store-name {
    font-size: 1.5rem;
    font-weight: var(--btcpay-font-weight-bold);
    color: var(--btcpay-body-text);
    text-align: center;
}

.store-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--btcpay-space-m);
    margin-top: auto;
    color: var(--btcpay-body-text-muted);
    padding: 1.5rem 1.5rem 0;
}

.store-footer a {
    color: var(--btcpay-body-text-muted);
    transition: color 0.3s ease;
}

.store-footer a:hover {
    color: var(--btcpay-primary);
}

a.store-powered-by {
    display: flex;
    align-items: center;
    gap: var(--btcpay-space-s);
    transition: all 0.3s ease;
}

a.store-powered-by:hover {
    color: var(--btcpay-primary);
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */
.alert {
    border-radius: var(--btcpay-border-radius);
    padding: 1rem 1.25rem;
    border: 1px solid;
}

.alert-success {
    background-color: rgba(0, 217, 163, 0.1);
    border-color: var(--btcpay-success);
    color: var(--btcpay-success);
}

.alert-warning {
    background-color: rgba(255, 184, 0, 0.1);
    border-color: var(--btcpay-warning);
    color: var(--btcpay-warning);
}

.alert-danger {
    background-color: rgba(255, 71, 87, 0.1);
    border-color: var(--btcpay-danger);
    color: var(--btcpay-danger);
}

.alert-info {
    background-color: rgba(0, 168, 255, 0.1);
    border-color: var(--btcpay-info);
    color: var(--btcpay-info);
}

.validation-summary-errors {
    padding: .75rem 1rem;
    margin-bottom: 1.5rem;
    color: var(--btcpay-danger-text);
    background-color: rgba(255, 71, 87, 0.1);
    border: var(--btcpay-border-width) solid var(--btcpay-danger-border);
    border-radius: var(--btcpay-border-radius);
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dropdown-menu {
    background-color: var(--btcpay-dropdown-bg);
    border: 1px solid var(--btcpay-dropdown-border-color);
    border-radius: var(--btcpay-dropdown-border-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    padding: var(--btcpay-space-s);
}

.dropdown-item {
    color: var(--btcpay-dropdown-color);
    padding: 0.5rem 1rem;
    border-radius: var(--btcpay-border-radius);
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--btcpay-neutral-200);
    color: var(--btcpay-primary);
}

.dropdown-item:active {
    background-color: var(--btcpay-neutral-300);
}

/* ============================================
   MODALS
   ============================================ */
.modal-content {
    background-color: var(--btcpay-bg-tile);
    border: 1px solid var(--btcpay-body-border-light);
    border-radius: var(--btcpay-border-radius-l);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
}

.modal-header {
    border-bottom: 1px solid var(--btcpay-body-border-light);
    padding: 1.5rem;
}

.modal-title {
    color: var(--btcpay-body-text);
    font-weight: var(--btcpay-font-weight-bold);
}

.modal-body {
    padding: 1.5rem;
    color: var(--btcpay-body-text);
}

.modal-footer {
    border-top: 1px solid var(--btcpay-body-border-light);
    padding: 1.5rem;
}

/* ============================================
   LIST GROUPS
   ============================================ */
.list-group-item {
    background-color: var(--btcpay-bg-tile);
    border: 1px solid var(--btcpay-body-border-light);
    color: var(--btcpay-body-text);
    transition: all 0.2s ease;
}

.list-group-item:hover {
    background-color: var(--btcpay-bg-tile-hover);
    border-color: var(--btcpay-neutral-300);
}

.list-group-item a:not(.btn) {
    color: inherit;
}

/* ============================================
   TRANSACTION LABELS
   ============================================ */
.transaction-label {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--btcpay-space-xs);
    color: var(--btcpay-body-text);
    background: transparent;
    border: 1px solid var(--label-bg, var(--btcpay-neutral-300));
    border-radius: var(--btcpay-border-radius-l);
    font-size: var(--btcpay-font-size-s);
    margin: 0;
    padding: 1px var(--btcpay-space-s);
    text-align: left;
    word-break: break-word;
    transition: all 0.2s ease;
}

.transaction-label:hover {
    background: var(--label-bg, var(--btcpay-neutral-300));
    border-color: var(--btcpay-primary);
}

/* ============================================
   COPY & CLIPBOARD
   ============================================ */
.clipboard-button {
    cursor: copy;
    transition: all 0.2s ease;
}

.clipboard-button:hover {
    color: var(--btcpay-primary) !important;
}

.clipboard-button[data-clipboard-confirming] {
    color: var(--btcpay-success) !important;
}

/* ============================================
   ICONS
   ============================================ */
.icon {
    display: inline-block;
    width: var(--icon-size, 1.25rem);
    height: var(--icon-size, 1.25rem);
    vertical-align: middle;
}

.icon-note {
    color: var(--btcpay-body-text-muted);
}

.icon.icon-info {
    position: relative;
    top: -.05em;
    color: var(--btcpay-neutral-500);
    transition: color 0.2s ease;
}

.icon.icon-info:hover {
    color: var(--btcpay-primary);
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */
@media (max-width: 768px) {
    .tile {
        --tile-padding: 1rem;
    }

    .widget {
        --widget-padding: var(--btcpay-space-s);
    }

    .btn-primary,
    .btn-secondary {
        padding: 0.625rem 1.25rem;
    }
}

@media (min-width: 1200px) {
    .widget.app-sales,
    .widget.setup-guide,
    .widget.store-wallet-balance,
    .widget.store-lightning-balance {
        --widget-chart-width: 80vw;
        grid-column-start: 1;
        grid-column-end: 9;
    }

    .widget.store-lightning-services,
    .widget.app-top-items,
    .widget.store-numbers {
        grid-column-start: 9;
        grid-column-end: 13;
    }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--btcpay-body-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--btcpay-neutral-300);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--btcpay-neutral-400);
}

/* ============================================
   ANIMATIONS & TRANSITIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tile,
.widget,
.card {
    animation: fadeIn 0.3s ease;
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    body {
        background-color: white;
        color: black;
    }

    .tile,
    .widget,
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    .btn,
    .dropdown,
    .modal {
        display: none !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
:focus-visible {
    outline: 2px solid var(--btcpay-primary);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-primary {
    color: var(--btcpay-primary) !important;
}

.text-muted {
    color: var(--btcpay-body-text-muted) !important;
}

.bg-tile {
    background-color: var(--btcpay-bg-tile) !important;
}

.border-primary {
    border-color: var(--btcpay-primary) !important;
}

/* Gradient text effect */
.text-gradient {
    background: linear-gradient(135deg, var(--btcpay-primary) 0%, var(--btcpay-brand-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glow effect for important elements */
.glow {
    box-shadow: 0 0 20px var(--btcpay-primary-shadow);
}

/* ============================================
   END OF THEME
   ============================================ */