@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');

:root{
    --wistag-blue-1: #006fc4;
    --wistag-blue-2: #112051;
    --wistag-blue-3: #0b3a7a;
    --wistag-bg: #f5f7fb;
    --wistag-text: #0f172a;
    --wistag-muted: #5b6b82;
    --wistag-border: #e2e8f0;
    --wistag-card: #ffffff;
    --wistag-shadow: 0 12px 28px rgba(17,32,81,0.08);
    --wistag-radius: 16px;
}

body{
    font-family: 'Sora', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    color: var(--wistag-text);
    background: var(--wistag-bg);
}

a{ color: inherit; }
.bg-light{ background-color: var(--wistag-bg) !important; }

.loading-overlay{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15,23,42,0.45);
    backdrop-filter: blur(2px);
    z-index: 2000;
}
.loading-overlay.show{ display: flex; }
.loading-card{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 22px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: var(--wistag-shadow);
    color: var(--wistag-text);
    font-weight: 600;
}
.loading-spinner{
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0,111,196,0.2);
    border-top-color: var(--wistag-blue-1);
    border-radius: 50%;
    animation: loading-spin 0.8s linear infinite;
}
.loading-text{
    font-size: 0.95rem;
}

.dashboard-page{
    position: relative;
    overflow-x: hidden;
}
.dashboard-page::before{
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 65vh;
    background:
      radial-gradient(circle at 18% 20%, rgba(0,111,196,0.18), transparent 60%),
      radial-gradient(circle at 82% 0%, rgba(17,32,81,0.16), transparent 58%),
      linear-gradient(180deg, rgba(0,111,196,0.12) 0%, rgba(245,247,251,0) 70%);
    z-index: -1;
    pointer-events: none;
}

.generator-page{
    position: relative;
    overflow-x: hidden;
}
.generator-page::before{
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 60vh;
    background:
      radial-gradient(circle at 15% 18%, rgba(0,111,196,0.2), transparent 62%),
      radial-gradient(circle at 88% 5%, rgba(17,32,81,0.18), transparent 58%),
      linear-gradient(180deg, rgba(0,111,196,0.1) 0%, rgba(245,247,251,0) 70%);
    z-index: -1;
    pointer-events: none;
}

.qr-page{
    position: relative;
    overflow-x: hidden;
}
.qr-page::before{
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 60vh;
    background:
      radial-gradient(circle at 20% 16%, rgba(0,111,196,0.18), transparent 62%),
      radial-gradient(circle at 80% 10%, rgba(17,32,81,0.16), transparent 60%),
      linear-gradient(180deg, rgba(0,111,196,0.08) 0%, rgba(245,247,251,0) 70%);
    z-index: -1;
    pointer-events: none;
}

.card{
    border-radius: var(--wistag-radius);
    border: 1px solid var(--wistag-border);
    box-shadow: var(--wistag-shadow);
}
.card-header{
    background: #f3f6ff;
    border-bottom: 1px solid var(--wistag-border);
    font-weight: 600;
}

.btn-primary{
    background: var(--wistag-blue-1);
    border-color: var(--wistag-blue-1);
}
.btn-primary:hover{
    background: #0062af;
    border-color: #0062af;
}
.btn-secondary{
    background: var(--wistag-blue-2);
    border-color: var(--wistag-blue-2);
}
.btn-secondary:hover{
    background: #0b1a3c;
    border-color: #0b1a3c;
}
.btn-outline-secondary{
    color: var(--wistag-blue-2);
    border-color: var(--wistag-blue-2);
}
.btn-outline-secondary:hover{
    background: rgba(17,32,81,0.08);
    color: var(--wistag-blue-2);
}
.btn-dark{
    background: #0b1a3c;
    border-color: #0b1a3c;
}

.dashboard-page .btn-primary{
    background: linear-gradient(135deg, var(--wistag-blue-1), #1b8fe0);
    border-color: transparent;
    box-shadow: 0 10px 22px rgba(0,111,196,0.25);
}
.dashboard-page .btn-primary:hover{
    background: linear-gradient(135deg, #047bcf, #0f6fc6);
}

.form-control, .form-select{
    border-radius: 12px;
    border-color: var(--wistag-border);
}
.form-control:focus, .form-select:focus{
    border-color: var(--wistag-blue-1);
    box-shadow: 0 0 0 3px rgba(0,111,196,0.15);
}

.table-dark{
    background-color: var(--wistag-blue-2);
    color: #fff;
}
.table-dark th{
    border-color: rgba(255,255,255,0.12);
}

.table{
    border-color: var(--wistag-border);
}
.table-striped>tbody>tr:nth-of-type(odd){
    background-color: #f6f9ff;
}
.table-bordered>:not(caption)>*{
    border-color: var(--wistag-border);
}

.page-hero{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    animation: dash-rise 0.6s ease both;
}
.hero-kicker{
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-size: 0.68rem;
    color: var(--wistag-muted);
    font-weight: 600;
}
.page-hero h1{
    font-size: clamp(1.9rem, 2.8vw, 2.6rem);
    margin: 8px 0 6px;
    font-weight: 700;
}
.page-hero p{
    margin: 0;
    color: var(--wistag-muted);
    max-width: 560px;
}
.hero-actions{
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-chip{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid #d7e4ff;
    background: #ffffff;
    color: var(--wistag-blue-2);
    font-weight: 600;
    box-shadow: 0 8px 18px rgba(15,23,42,0.06);
}
.hero-chip.subtle{
    background: #f1f5ff;
    color: var(--wistag-muted);
    font-weight: 500;
}
.hero-chip i{
    font-size: 1rem;
}

.form-card,
.result-card{
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid var(--wistag-border);
    box-shadow: var(--wistag-shadow);
    padding: 24px;
    margin-bottom: 24px;
    animation: dash-rise 0.6s ease 0.12s both;
}
.result-card .table-shell{
    background: #f8faff;
    border-color: #dfe9f7;
    box-shadow: none;
    margin-bottom: 0;
}
.form-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.form-card-head h2{
    margin: 0 0 6px;
    font-size: 1.4rem;
}
.form-card-head p{
    margin: 0;
    color: var(--wistag-muted);
}
.generator-form .form-label{
    font-weight: 600;
    color: var(--wistag-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}
.generator-form .form-control,
.generator-form .form-select{
    height: 52px;
    background: #f7f9ff;
}
.form-hint{
    display: block;
    margin-top: 6px;
    color: var(--wistag-muted);
    font-size: 0.78rem;
}

.qr-card{
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid var(--wistag-border);
    box-shadow: var(--wistag-shadow);
    padding: 24px;
    height: 100%;
}
.qr-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.qr-card-head h2{
    margin: 0 0 6px;
    font-size: 1.4rem;
}
.qr-card-head p{
    margin: 0;
    color: var(--wistag-muted);
}
.qr-icon{
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wistag-blue-1), #1b86d9);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: 0 14px 26px rgba(0,111,196,0.28);
}
.qr-icon-alt{
    background: linear-gradient(135deg, var(--wistag-blue-2), #27457f);
}
.qr-form .form-label{
    font-weight: 600;
    color: var(--wistag-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}
.qr-form .form-control,
.qr-form .form-select{
    height: 52px;
    background: #f7f9ff;
}
.qr-form .form-check-label{
    color: var(--wistag-muted);
    font-weight: 600;
}
.qr-alert{
    border-radius: 16px;
    border: 1px solid rgba(255,193,7,0.35);
    box-shadow: 0 8px 18px rgba(15,23,42,0.08);
}
.qr-output{
    margin-top: 18px;
    padding: 16px;
    border-radius: 18px;
    background: #f8faff;
    border: 1px solid #dfe9f7;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.qr-preview{
    width: 170px;
    height: 170px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--wistag-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(15,23,42,0.08);
}
.qr-preview img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.qr-meta{
    flex: 1 1 240px;
    min-width: 220px;
}
.qr-actions{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.qr-form .qr-textarea{
    min-height: 120px;
    height: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.82rem;
    background: #ffffff;
}
.qr-note{
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--wistag-muted);
}

.scan-page{
    position: relative;
    overflow-x: hidden;
}
.scan-page::before{
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 60vh;
    background:
      radial-gradient(circle at 18% 16%, rgba(0,111,196,0.18), transparent 62%),
      radial-gradient(circle at 85% 10%, rgba(17,32,81,0.16), transparent 60%),
      linear-gradient(180deg, rgba(0,111,196,0.08) 0%, rgba(245,247,251,0) 70%);
    z-index: -1;
    pointer-events: none;
}
.scan-grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    align-items: start;
}
.scan-card{
    background: #ffffff;
    border-radius: 24px;
    border: 1px solid var(--wistag-border);
    box-shadow: var(--wistag-shadow);
    padding: 24px;
}
.scan-card-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.scan-card-head h2{
    margin: 0 0 6px;
    font-size: 1.35rem;
}
.scan-card-head p{
    margin: 0;
    color: var(--wistag-muted);
}
.scan-card-icon{
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wistag-blue-1), #1b86d9);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 12px 24px rgba(0,111,196,0.28);
}
.scan-card-icon.alt{
    background: linear-gradient(135deg, var(--wistag-blue-2), #27457f);
}
.scan-camera{
    grid-column: span 7;
}
.scan-action{
    grid-column: span 5;
}
.scan-side{
    grid-column: span 5;
    display: grid;
    gap: 24px;
    align-content: start;
}
.camera-shell{
    background: #0b1a3c;
    border-radius: 20px;
    border: 1px solid #d7e4ff;
    padding: 12px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}
.camera-shell #video{
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
    background: #0b1a3c;
}
.scan-status{
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px dashed #cfe3ff;
    background: #f7f9ff;
    font-weight: 600;
    color: var(--wistag-blue-2);
}
.scan-status strong{
    color: var(--wistag-blue-2);
}
.scan-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #cfe3ff;
    background: #eef4ff;
    font-weight: 600;
    color: var(--wistag-blue-2);
}
.scan-muted{
    color: var(--wistag-muted);
    font-weight: 600;
}
.scan-actions{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.scan-form .form-label{
    font-weight: 600;
    color: var(--wistag-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}
.scan-form .form-control,
.scan-form .form-select{
    height: 52px;
    background: #f7f9ff;
}
.scan-alert{
    border-radius: 16px;
    border: 1px solid rgba(220,53,69,0.2);
    box-shadow: 0 10px 22px rgba(220,53,69,0.12);
}

.result-head{
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.result-kicker{
    text-transform: uppercase;
    letter-spacing: 0.24em;
    font-size: 0.7rem;
    color: var(--wistag-muted);
    font-weight: 600;
}
.result-sub{
    margin: 4px 0 0;
    color: var(--wistag-muted);
}
.result-meta{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.meta-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--wistag-blue-2);
    font-weight: 600;
    border: 1px solid #cfe3ff;
    font-size: 0.82rem;
}

.generator-alert{
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,0.08);
    box-shadow: 0 10px 22px rgba(15,23,42,0.08);
}

.result-toolbar{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.wisid-results th:nth-child(4),
.wisid-results td:nth-child(4){
    min-width: 320px;
}
.wisid-results tr.used-row{
    background: #e7f7ef;
    box-shadow: 0 8px 18px rgba(15,23,42,0.04), 0 0 0 1px rgba(35,163,104,0.25);
}
.wisid-results tr.used-row td{
    opacity: 0.55;
}
.result-actions{
    gap: 6px;
}

@media (min-width: 1200px){
    .result-actions{
        flex-wrap: nowrap;
    }
}

.search-panel{
    position: relative;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid var(--wistag-border);
    background: rgba(255,255,255,0.9);
    box-shadow: var(--wistag-shadow);
    animation: dash-rise 0.6s ease 0.08s both;
}
.search-panel::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(0,111,196,0.08), rgba(17,32,81,0.04));
    opacity: 0.6;
    pointer-events: none;
}
.search-panel .input-group{
    position: relative;
    z-index: 1;
    background: #f7f9ff;
    border-radius: 16px;
    border: 1px solid var(--wistag-border);
    padding: 6px;
    gap: 6px;
}
.search-panel .input-group-text{
    background: transparent;
    border: none;
    color: var(--wistag-blue-2);
}
.search-panel .form-control{
    border: none;
    background: transparent;
    box-shadow: none;
}
.search-panel .form-control:focus{
    box-shadow: none;
}
.search-panel .btn{
    border-radius: 12px;
    padding: 0.6rem 1.25rem;
}

.table-shell{
    padding: 16px;
    border-radius: 24px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--wistag-border);
    box-shadow: var(--wistag-shadow);
    animation: dash-rise 0.6s ease 0.16s both;
}
.table-shell .table-responsive{
    overflow-x: auto;
    overflow-y: visible;
}
.wistag-table{
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-bottom: 0;
}
.wistag-table-compact{
    border-spacing: 0 8px;
}
.wistag-table-compact thead th{
    font-size: 0.68rem;
}
.wistag-table-compact tbody td{
    padding: 0.55rem 0.75rem;
}
.wistag-table thead th{
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--wistag-muted);
    border: none !important;
    background: transparent;
}
.wistag-table tbody tr{
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15,23,42,0.06), 0 0 0 1px rgba(226,232,240,0.9);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wistag-table tbody tr:hover{
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(15,23,42,0.08);
}
.wistag-table tbody td{
    border: none;
    background: transparent;
}
.wistag-table tbody td:first-child{
    border-radius: 16px 0 0 16px;
}
.wistag-table tbody td:last-child{
    border-radius: 0 16px 16px 0;
}
.wistag-table tbody td{
    background: inherit;
}
.wistag-table th:nth-child(3),
.wistag-table td:nth-child(3){
    min-width: 120px;
}
.wistag-table th:nth-child(6),
.wistag-table td:nth-child(6){
    min-width: 230px;
    white-space: nowrap;
}
.wistag-table th:nth-child(8),
.wistag-table td:nth-child(8){
    min-width: 190px;
    white-space: nowrap;
}
.wistag-table .destino-wisid{
    width: 9ch;
    max-width: 10ch;
    text-align: center;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.action-group{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.action-group .btn{
    white-space: nowrap;
    padding: .35rem .55rem;
    font-size: .78rem;
}
.desktop-only .action-group{
    flex-wrap: nowrap;
}

.tipo-toggle{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid #d7e4ff;
    background: #f1f5ff;
    flex-wrap: nowrap;
}
.tipo-btn{
    border: none;
    background: transparent;
    color: var(--wistag-blue-2);
    padding: .35rem .65rem;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.tipo-btn.is-active{
    background: var(--wistag-blue-1);
    color: #fff;
    box-shadow: 0 6px 14px rgba(0,111,196,0.25);
}
.tipo-btn i{
    font-size: .9rem;
}

.generator-page .tipo-toggle{
    gap: 8px;
    padding: 6px;
    border: 1px solid #d3e2ff;
    background: #eef4ff;
    white-space: nowrap;
    width: 100%;
    min-height: 52px;
    justify-content: space-between;
    box-shadow: 0 8px 16px rgba(15,23,42,0.06);
}
.generator-page .tipo-btn{
    padding: 8px 14px;
    gap: 10px;
    flex: 1 1 0;
    justify-content: center;
    text-align: center;
    height: 40px;
    box-shadow: none;
    transition: all 0.2s ease;
}
.generator-page .tipo-btn:hover{
    background: rgba(17,32,81,0.08);
}
.generator-page .tipo-btn.is-active{
    background: linear-gradient(135deg, var(--wistag-blue-1), #1b86d9);
    color: #fff;
    box-shadow: 0 8px 18px rgba(0,111,196,0.3);
}
.generator-page .tipo-btn.is-active:hover{
    background: linear-gradient(135deg, #0b6fcf, #1a7fd0);
}
.generator-page .tipo-icon{
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(17,32,81,0.12);
    color: var(--wistag-blue-2);
    font-weight: 700;
    font-size: 0.95rem;
}
.generator-page .tipo-btn.is-active .tipo-icon{
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.generator-page .tipo-label{
    font-size: 0.95rem;
}
.wisid-pill{
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: #eef4ff;
    color: var(--wistag-blue-2);
    border: 1px solid #cfe3ff;
    letter-spacing: 0.08em;
}
.copiar-wisid.btn{
    background: #eef4ff;
    border: 1px solid #cfe3ff;
    color: var(--wistag-blue-2);
}
 
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    }
    .toast-message {
    background-color: #28a745; /* Verde para sucesso */
    color: white;
    padding: 12px 20px;
    border-radius: 6px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(0);
    }
    /* Efeito de fade-out */
    .toast-message.fade-out {
    opacity: 0;
    transform: translateY(-20px);
    }
    /* Toast para erro */
    .toast-message.error {
    background-color: #dc3545; /* Vermelho */
    }
    /* Animação do botão quando há mudanças */
    @keyframes piscar {
    0% { background-color: #ffc107; } /* Amarelo */
    50% { background-color: #ff9800; } /* Laranja */
    100% { background-color: #ffc107; } /* Amarelo */
    }
    .botao-alterado {
    animation: piscar 1s infinite alternate;
    font-weight: bold;
    border: 2px solid #fff;
    color: #000; /* Deixa o texto sempre visível */
    }
    /* Sidebar (Menu Lateral) */
    .sidebar {
    width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(165deg, var(--wistag-blue-1), var(--wistag-blue-2));
    padding: 22px 12px 16px;
    }
    .sidebar a {
    color: #e8f1ff;
    display: block;
    padding: 12px 14px;
    margin: 4px 8px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    }
    .sidebar a:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
    }
    /* Barra Superior */
    .topbar {
    height: 64px;
    width: calc(100% - 260px);
    position: fixed;
    top: 0;
    left: 260px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
    border-bottom: 1px solid var(--wistag-border);
    box-shadow: 0 6px 16px rgba(17,32,81,0.06);
    }
    /* Conteúdo principal */
    .main-content {
    margin-left: 260px;
    padding: 90px 24px 24px;
    }
    .main-content .container {
    max-width: 1280px;
    }

    .logo-sidebar {
        width: 140px;
        margin-bottom: 18px;
    }

    
    

/* ================== RESPONSIVO ================== */
/* Overlay para quando o menu estiver aberto no mobile */
.sidebar-overlay { 
  position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none; z-index: 998;
}
.sidebar-overlay.show { display: block; }

/* Estados padrão do menu (desktop) já definidos acima.  No mobile escondemos a sidebar. */
@media (max-width: 991.98px) {
  .sidebar { 
    transform: translateX(-100%); transition: transform .25s ease; z-index: 999; width: 260px; 
  }
  .sidebar.open { transform: translateX(0); }

  /* Topbar ocupa 100% da largura e desloca conteúdo */
  .topbar { left: 0; width: 100%; z-index: 998; }
  .main-content { margin-left: 0; padding: 86px 12px 20px; }

  /* Logo menor no menu lateral */
  .logo-sidebar { width: 120px; }

  .qr-card{ padding: 20px; }
  .qr-output{ flex-direction: column; align-items: flex-start; }
  .qr-preview{ width: 150px; height: 150px; }

  .scan-card{ padding: 20px; }
  .scan-camera,
  .scan-action,
  .scan-side{ grid-column: span 12; }
}

/* Melhorar tabela em telas muito pequenas */
@media (max-width: 575.98px) {
  .table { font-size: .84rem; }
  .table thead { position: sticky; top: 60px; z-index: 1; }
  .btn-sm { padding: .25rem .5rem; font-size: .75rem; }
  input.form-control { height: 36px; }
  .generator-page .tipo-toggle{ min-height: 46px; }
  .generator-page .tipo-btn{ padding: 5px 10px; height: 34px; }
  .generator-page .tipo-label{ font-size: .8rem; }
  .generator-page .tipo-icon{ width: 24px; height: 24px; font-size: .8rem; }
  .qr-form .form-control,
  .qr-form .form-select{ height: 46px; }
  .qr-preview{ width: 140px; height: 140px; }
  .scan-form .form-control,
  .scan-form .form-select{ height: 46px; }
  .scan-card-icon{ width: 46px; height: 46px; font-size: 1.2rem; }
}

/* ======= Cards (Mobile) ======= */
.mobile-only{ display:none; }
.desktop-only{ display:block; }

.wis-card{
    background: #ffffff;
    animation: dash-rise 0.5s ease both;
}
.wis-card .card-header{ background:#f1f5ff; }
.wis-card .copiar-wisid{ font-weight:700; letter-spacing:.04em; }
.wis-card .form-label{ font-size:.78rem; color:#6c757d; }
.acoes-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

@media (max-width: 991.98px){
  .mobile-only{ display:block; }
  .desktop-only{ display:none; }
  .wis-card .btn-sm{ padding:.4rem .55rem; line-height:1; }
}

/* Pagination: manter em uma linha no mobile */
.pagination-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pagination-wrap .pagination { flex-wrap: nowrap; white-space: nowrap; }
.pagination-wrap .page-link { padding: .35rem .6rem; }

/* Pagination: evitar corte nas extremidades e centralizar melhor */
.pagination-wrap { padding: 0 14px; box-sizing: border-box; }
.pagination-wrap nav { min-width: max-content; }
.pagination-wrap .pagination { margin-bottom: 0; }



/* ===== Z-INDEX NORMALIZATION (sidebar acima da topbar) ===== */
.sidebar, .sidebar.open { z-index: 1040 !important; }
.sidebar-overlay { z-index: 1030 !important; }
.topbar { z-index: 1020 !important; }

/* Câmera nunca bloqueia os cliques da UI */
#camera-container, #video { pointer-events: none; }
.main-content, .sidebar, .topbar, .sidebar-overlay { pointer-events: auto; }

@keyframes dash-rise{
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes loading-spin{
    to { transform: rotate(360deg); }
}

@media (max-width: 991.98px){
  .page-hero{
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-actions{
    width: 100%;
  }
  .hero-actions .btn{
    width: 100%;
  }
  .hero-chip{
    width: 100%;
    justify-content: center;
  }
  .form-card,
  .result-card{
    padding: 20px;
  }
  .result-toolbar{
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce){
    .page-hero,
    .search-panel,
    .table-shell,
    .wis-card{
        animation: none !important;
    }
}