/* ============================================================
   MyInvois Extension — Tailwind-inspired Bootstrap Theme
   ============================================================
   1. Design Tokens (CSS Variables)
   2. Base
   3. Cards
   4. Buttons
   5. Form Controls
   6. Alerts
   7. Badges
   8. Tables
   9. Tabs / Nav
  10. Accordion
  11. Modal
  12. App Header
  13. Page Layout
  14. Loading Overlay
  15. Section Header
  16. Integration Cards (Setup)
  17. File Upload (Setup)
  18. Certificate Details (Setup)
  19. QR Scanner
  20. Status Bar
  21. Code Textarea
  22. Scrollbar
  23. Utilities
  24. Dark-mode Overrides
   ============================================================ */

/* ==========================================================
   1. DESIGN TOKENS
   ========================================================== */
:root {
    --bs-body-bg: #f8fafc;
    --bs-body-color: #1e293b;
    --bs-secondary-color: #64748b;
    --bs-tertiary-color: #94a3b8;
    --bs-tertiary-bg: #f1f5f9;
    --bs-secondary-bg: #e2e8f0;
    --bs-emphasis-color: #0f172a;
    --bs-border-color: #e2e8f0;
    --bs-border-color-translucent: rgba(148,163,184,.2);
    --bs-link-color: #258cfb;
    --bs-link-hover-color: #1a73e8;
    --bs-body-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

    /* Radius */
    --mi-radius: .5rem;
    --mi-radius-lg: .75rem;
    --mi-radius-sm: .375rem;

    /* Shadows (Tailwind-style) */
    --mi-shadow-xs: 0 1px 2px 0 rgba(0,0,0,.05);
    --mi-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
    --mi-shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    --mi-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);

    /* Focus ring */
    --mi-ring: 0 0 0 3px rgba(37,140,251,.15);

    /* Transition */
    --mi-transition: 150ms cubic-bezier(.4,0,.2,1);

    /* Semantic colors */
    --mi-primary: #258cfb;
    --mi-primary-soft: #5ba8fc;
    --mi-success: #059669;
    --mi-success-soft: #10b981;
    --mi-danger: #dc2626;
    --mi-danger-soft: #ef4444;
    --mi-warning: #d97706;
    --mi-warning-soft: #f59e0b;
    --mi-info: #0284c7;

    /* Header */
    --mi-header-bg: linear-gradient(135deg, #1750ad, #0f172a);
}

/* --- Dark mode tokens ------------------------------------ */
[data-bs-theme="dark"] {
    --bs-body-bg: #0f172a;
    --bs-body-color: #e2e8f0;
    --bs-secondary-color: #94a3b8;
    --bs-tertiary-color: #64748b;
    --bs-tertiary-bg: #1e293b;
    --bs-secondary-bg: #334155;
    --bs-emphasis-color: #f8fafc;
    --bs-border-color: #334155;
    --bs-border-color-translucent: rgba(148,163,184,.12);
    --bs-link-color: #5ba8fc;
    --bs-link-hover-color: #93c5fd;

    --mi-shadow-xs: 0 1px 2px 0 rgba(0,0,0,.3);
    --mi-shadow: 0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.3);
    --mi-shadow-md: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
    --mi-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.4), 0 4px 6px -4px rgba(0,0,0,.3);
    --mi-ring: 0 0 0 3px rgba(91,168,252,.2);
    --mi-header-bg: linear-gradient(135deg, #1750ad, #0f172a);
}

/* ==========================================================
   2. BASE
   ========================================================== */
html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .01em;
    line-height: 1.625;
    font-size: 14px;
}

/* ==========================================================
   3. CARDS
   ========================================================== */
.card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mi-radius-lg);
    box-shadow: var(--mi-shadow);
    transition: box-shadow var(--mi-transition);
    overflow: hidden;
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .card {
    background-color: var(--bs-tertiary-bg);
}

.card:hover {
    box-shadow: var(--mi-shadow-md);
}

.card-header {
    border-bottom: 1px solid var(--bs-border-color);
    background-color: transparent;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .8125rem 1rem;
}

.card-footer {
    border-top: 1px solid var(--bs-border-color);
    background-color: transparent;
    padding: .8125rem;
}

.card-header.bg-body-tertiary {
    background-color: var(--bs-tertiary-bg) !important;
}

/* Soft gradient card headers */
.card-header.bg-primary {
    background: linear-gradient(135deg, var(--mi-primary), var(--mi-primary-soft)) !important;
    border-bottom: none;
    color: #fff;
}
.card-header.bg-success {
    background: linear-gradient(135deg, var(--mi-success), var(--mi-success-soft)) !important;
    border-bottom: none;
    color: #fff;
}
.card-header.bg-danger {
    background: linear-gradient(135deg, var(--mi-danger), var(--mi-danger-soft)) !important;
    border-bottom: none;
    color: #fff;
}
.card-header.bg-warning {
    background: linear-gradient(135deg, var(--mi-warning), var(--mi-warning-soft)) !important;
    border-bottom: none;
    color: #fff;
}

/* ==========================================================
   4. BUTTONS
   ========================================================== */

/* Inline code */
code {
    font-size: .8em;
    padding: .125em .375em;
    border-radius: .25rem;
    background-color: var(--bs-tertiary-bg);
    color: var(--mi-primary);
}
[data-bs-theme="dark"] code {
    color: #93c5fd;
}

.btn {
    border-radius: var(--mi-radius);
    transition: all var(--mi-transition);
    font-weight: 500;
    font-size: .8125rem;
    letter-spacing: .01em;
}

.btn:active {
    transform: scale(.98);
}

.btn:focus-visible {
    box-shadow: var(--mi-ring);
}

.btn-sm {
    border-radius: var(--mi-radius-sm);
    font-size: .75rem;
}

.btn-primary {
    --bs-btn-bg: var(--mi-primary);
    --bs-btn-border-color: var(--mi-primary);
    --bs-btn-hover-bg: #1a73e8;
    --bs-btn-hover-border-color: #1a73e8;
}

.btn-success {
    --bs-btn-bg: var(--mi-success);
    --bs-btn-border-color: var(--mi-success);
    --bs-btn-hover-bg: #047857;
    --bs-btn-hover-border-color: #047857;
}

.btn-danger {
    --bs-btn-bg: var(--mi-danger);
    --bs-btn-border-color: var(--mi-danger);
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
}

.btn-warning {
    --bs-btn-bg: var(--mi-warning);
    --bs-btn-border-color: var(--mi-warning);
    --bs-btn-hover-bg: #b45309;
    --bs-btn-hover-border-color: #b45309;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-secondary {
    --bs-btn-bg: #475569;
    --bs-btn-border-color: #475569;
    --bs-btn-hover-bg: #334155;
    --bs-btn-hover-border-color: #334155;
}

.btn-outline-secondary {
    --bs-btn-color: #64748b;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-color: #334155;
    --bs-btn-hover-border-color: #94a3b8;
}

.btn-outline-primary {
    --bs-btn-color: var(--mi-primary);
    --bs-btn-border-color: var(--mi-primary);
    --bs-btn-hover-bg: var(--mi-primary);
    --bs-btn-hover-color: #fff;
}

/* Circle button (header) */
.btn-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    transition: all var(--mi-transition);
}

.btn-circle:hover {
    background: rgba(255,255,255,.35);
    color: #fff;
    transform: translateY(-1px) scale(1.05);
}

.btn-circle:active {
    transform: scale(.95);
}

/* ==========================================================
   5. FORM CONTROLS
   ========================================================== */
.form-control,
.form-select {
    border-radius: var(--mi-radius);
    border-color: #cbd5e1;
    transition: border-color var(--mi-transition), box-shadow var(--mi-transition);
    font-size: .875rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mi-primary);
    box-shadow: var(--mi-ring);
}

.form-control-sm,
.form-select-sm {
    border-radius: var(--mi-radius-sm);
    font-size: .8125rem;
}

.form-label {
    font-weight: 500;
    font-size: .8125rem;
    margin-bottom: .25rem;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-secondary-bg);
    color: #cbd5e1;
}

/* ==========================================================
   6. ALERTS
   ========================================================== */
.alert {
    border-radius: var(--mi-radius);
    font-size: .8125rem;
    border-left: 4px solid;
}

.alert-danger  { border-left-color: var(--mi-danger); }
.alert-success { border-left-color: var(--mi-success); }
.alert-warning { border-left-color: var(--mi-warning); }
.alert-info    { border-left-color: var(--mi-info); }

/* ==========================================================
   7. BADGES
   ========================================================== */
.badge {
    border-radius: var(--mi-radius-sm);
    font-weight: 500;
    font-size: .7rem;
    letter-spacing: .02em;
}

.badge-version {
    background: rgba(248,250,252,.1);
    color: #cbd5e1;
}

.badge-env-preproduction {
    background-color: #64748b;
    color: #fff;
}

.badge-env-production {
    background-color: var(--mi-danger);
    color: #fff;
}

/* ==========================================================
   8. TABLES
   ========================================================== */
.table {
    font-size: .8125rem;
}

.table th {
    font-weight: 600;
    letter-spacing: .01em;
}

/* ==========================================================
   9. TABS / NAV
   ========================================================== */
.nav-tabs {
    border-bottom-color: var(--bs-border-color);
}

.nav-tabs .nav-link {
    border-radius: var(--mi-radius-sm) var(--mi-radius-sm) 0 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
    transition: color var(--mi-transition), border-color var(--mi-transition);
}

.nav-tabs .nav-link.active {
    color: var(--mi-primary);
    border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: transparent;
    color: var(--mi-primary);
}

/* ==========================================================
  10. ACCORDION
   ========================================================== */
.accordion-item {
    border-color: var(--bs-border-color);
}

.accordion-button {
    font-size: .875rem;
    font-weight: 500;
}

.accordion-button:focus {
    box-shadow: var(--mi-ring);
}

.accordion-body {
    font-size: .8125rem;
}

/* ==========================================================
  11. MODAL
   ========================================================== */
.modal-content {
    border-radius: var(--mi-radius-lg);
    box-shadow: var(--mi-shadow-lg);
}

.modal-header {
    border-bottom-color: var(--bs-border-color);
}

.modal-footer {
    border-top-color: var(--bs-border-color);
}

/* ==========================================================
  12. APP HEADER
   ========================================================== */
.app-header {
    background: var(--mi-header-bg);
    color: #f1f5f9;
    border-bottom: 1px solid rgba(148,163,184,.1);
    padding: .625rem 1rem;
    flex-shrink: 0;
}

.app-header .icon-badge {
    width: 36px;
    height: 36px;
    border-radius: var(--mi-radius);
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

/* ==========================================================
  13. PAGE LAYOUT
   ========================================================== */
.page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.page-content {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: 1rem;
    padding-bottom: 3.5rem;
}

.page-footer {
    flex-shrink: 0;
    background: var(--bs-tertiary-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: .375rem 1rem;
    font-size: .75rem;
    text-align: center;
    color: var(--bs-secondary-color);
}

/* ==========================================================
  14. LOADING OVERLAY
   ========================================================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15,23,42,.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-overlay.d-none {
    display: none !important;
}

.loading-overlay > div {
    border-radius: var(--mi-radius-lg);
    box-shadow: var(--mi-shadow-lg);
}

.spinner-border {
    --bs-spinner-border-width: 2px;
}

/* ==========================================================
  15. SECTION HEADER
   ========================================================== */
.section-header {
    background-color: var(--bs-light-bg-subtle, #f8f9fa);
    border-left: 4px solid var(--mi-primary);
    margin: 1rem 0;
    padding: .5rem 1rem;
    border-radius: 0 var(--mi-radius-sm) var(--mi-radius-sm) 0;
}

.section-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: .8125rem;
    color: var(--mi-primary);
}

[data-bs-theme="dark"] .section-header {
    background-color: var(--bs-tertiary-bg);
}

/* ==========================================================
  16. INTEGRATION CARDS (Setup)
   ========================================================== */
.integration-type-cards {
    display: flex;
    gap: 1rem;
}

.integration-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mi-radius);
    padding: .75rem;
    text-align: center;
    flex: 1;
    cursor: pointer;
    transition: all var(--mi-transition);
    background: var(--bs-body-bg);
}

.integration-card:hover {
    border-color: var(--mi-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(37,140,251,.15);
}

.integration-card.selected {
    border-color: var(--mi-primary);
    box-shadow: 0 0 0 2px rgba(37,140,251,.2);
    background: rgba(37,140,251,.05);
}

.integration-card input[type="radio"] {
    display: none;
}

[data-bs-theme="dark"] .integration-card {
    background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .integration-card.selected {
    background: rgba(37,140,251,.15);
}

@media (max-width: 768px) {
    .integration-type-cards {
        flex-direction: column;
    }
}

/* ==========================================================
  17. FILE UPLOAD (Setup)
   ========================================================== */
.file-upload-area {
    border: 2px dashed var(--mi-primary);
    border-radius: var(--mi-radius);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all var(--mi-transition);
    background: var(--bs-body-bg);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-upload-area:hover {
    background: rgba(37,140,251,.05);
    border-color: #1a73e8;
}

.file-upload-area.dragover {
    background: rgba(37,140,251,.1);
    border-color: #1a73e8;
    transform: scale(1.02);
}

[data-bs-theme="dark"] .file-upload-area {
    background: var(--bs-tertiary-bg);
}

/* ==========================================================
  18. CERTIFICATE DETAILS (Setup)
   ========================================================== */
.certificate-details {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: .75rem;
    background: var(--bs-tertiary-bg);
    padding: .25rem .5rem;
    border-radius: var(--mi-radius-sm);
    border: 1px solid var(--bs-border-color);
    word-break: break-all;
    margin-bottom: .5rem;
}

.certificate-info {
    background: var(--bs-light-bg-subtle, #f8f9fa);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mi-radius);
    padding: 1rem;
}

[data-bs-theme="dark"] .certificate-info {
    background: var(--bs-tertiary-bg);
}

/* ==========================================================
  19. QR SCANNER
   ========================================================== */
#qr-reader {
    background-color: var(--bs-tertiary-bg) !important;
    border: 1px solid var(--bs-border-color) !important;
    border-radius: var(--mi-radius) !important;
    box-shadow: var(--mi-shadow-xs) !important;
    color: var(--bs-body-color) !important;
}

#qr-reader div[style*="dashed"] {
    border: 2px dashed var(--bs-border-color) !important;
    border-radius: var(--mi-radius) !important;
    padding: 1rem !important;
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

#qr-reader button.html5-qrcode-element {
    background-color: var(--mi-primary) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--mi-radius-sm) !important;
    padding: .375rem .75rem !important;
    font-size: .8125rem !important;
}

#qr-reader button.html5-qrcode-element:hover {
    opacity: 0.9 !important;
}

#qr-reader #html5-qrcode-anchor-scan-type-change {
    color: var(--bs-link-color) !important;
    font-size: .8125rem !important;
}

/* QR preview box */
.qr-preview-box {
    background: #fff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--mi-radius);
    padding: .5rem;
    aspect-ratio: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-bs-theme="dark"] .qr-preview-box {
    background: #fff;
}

/* ==========================================================
  20. STATUS BAR
   ========================================================== */
.status-bar {
    padding: .5rem .75rem;
    font-size: .8125rem;
    border-radius: var(--mi-radius-sm);
    margin-bottom: 1rem;
}

.status-info {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

[data-bs-theme="dark"] .status-info {
    background-color: #1a2332;
    color: #90caf9;
    border-color: #2d3748;
}

.status-error {
    background-color: #ffebee;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
}

[data-bs-theme="dark"] .status-error {
    background-color: #2d1b1b;
    color: #f48fb1;
    border-color: #4a2c2a;
}

/* ==========================================================
  21. CODE TEXTAREA
   ========================================================== */
.textarea-code {
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: .75rem;
    resize: vertical;
    height: 200px;
    white-space: pre;
    overflow-x: auto;
    border-radius: var(--mi-radius);
    background-color: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color);
    tab-size: 4;
    line-height: 1.4;
}

/* ==========================================================
  22. SCROLLBAR
   ========================================================== */
.page-content::-webkit-scrollbar {
    width: 5px;
}

.page-content::-webkit-scrollbar-track {
    background: transparent;
}

.page-content::-webkit-scrollbar-thumb {
    background: var(--bs-secondary-bg);
    border-radius: 10px;
}

/* ==========================================================
  23. UTILITIES
   ========================================================== */
.text-primary { color: var(--mi-primary) !important; }
.text-success { color: var(--mi-success) !important; }
.text-danger  { color: var(--mi-danger)  !important; }
.text-warning { color: var(--mi-warning) !important; }
.text-info    { color: var(--mi-info)    !important; }
.text-muted   { color: var(--bs-secondary-color) !important; }

.bg-body-tertiary {
    background-color: var(--bs-tertiary-bg) !important;
}

.text-right { text-align: right; }

/* Status box */
.status-box {
    background: var(--bs-body-bg);
    padding: .75rem;
    border-radius: var(--mi-radius);
    box-shadow: var(--mi-shadow-xs);
    border: 1px solid var(--bs-border-color);
    margin-bottom: 1rem;
}

[data-bs-theme="dark"] .status-box {
    background: var(--bs-tertiary-bg);
}

/* Hover lift for bordered containers */
.border.rounded.p-3 {
    border-radius: var(--mi-radius-lg) !important;
    border-color: var(--bs-border-color) !important;
    transition: box-shadow var(--mi-transition), transform var(--mi-transition);
}

.border.rounded.p-3:hover {
    box-shadow: var(--mi-shadow-md);
    transform: translateY(-2px);
}

/* Guide screenshot */
.guide-screenshot img {
    max-width: 100%;
    border-radius: var(--mi-radius);
}

/* Wizard status indicators */
.status-indicator {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-left: 6px;
}

.status-pending   { background-color: #94a3b8; }
.status-completed { background-color: var(--mi-success); }
.status-error     { background-color: var(--mi-danger); }