/* ================================================================
   admin.css — Estilos do painel administrativo Montblanc
   Extraído de admin.php. Incrementar ?v= a cada deploy de mudanças.
================================================================ */

:root {
    --admin-header-h: 160px;
    --bg-primary: #050507;
    --bg-secondary: #111117;
    --bg-card: #15151f;
    --text-primary: #f5f5f5;
    --text-secondary: #d4af37;
    --text-muted: #9a9a9a;
    --border-primary: rgba(212, 175, 55, 0.4);
    --border-soft: rgba(255, 255, 255, 0.08);
    --gold-primary: #d4af37;
    --gold-soft: rgba(212, 175, 55, 0.18);
    --danger: #ff4d4d;
    --success: #46c46c;
    --input-bg: rgba(255,255,255,0.02);
    --input-border: rgba(255,255,255,0.18);
    --border: var(--border-primary);
}

        [data-theme="light"] {
            --bg-primary: #f5f5f0;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --text-primary: #1a1a1a;
            --text-secondary: #8b6f47;
            --text-muted: rgba(26, 26, 26, 0.7);
            --border-primary: rgba(139, 111, 71, 0.3);
            --border-soft: rgba(0,0,0,0.06);
            --gold-primary: #8b6f47;
            --gold-soft: rgba(139, 111, 71, 0.15);
            --danger: #c62828;
            --success: #2e7d32;
            --input-bg: rgba(139, 111, 71, 0.05);
            --input-border: rgba(139, 111, 71, 0.3);
        }

        * {
            box-sizing: border-box;
        }
                html, body { height: 100%; }
        body.is-login { height: 100vh; overflow: hidden; overscroll-behavior: none; }
body {
            margin: 0;
            padding: 0;
            font-family: 'Montserrat', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
        }
        .page {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        header {
            position: relative;
            padding: 8px 16px 6px;
            min-height: 68px;
            border-bottom: 1px solid var(--border-primary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: radial-gradient(circle at 0 0, rgba(212,175,55,0.12), transparent 45%);
        }
        /* Header logado */
        .admin-header.is-logged{
            justify-content: space-between !important;
            padding-right: 0;
        }
        .admin-header.is-logged .header-right{
            display: none;
        }
        /* Garante que o painel de ações permaneça visível */
        .admin-header.is-logged .header-center.header-center-logged {
            display: flex !important;
        }
        #actionsPanel {
            display: flex !important;
        }
        .admin-header.is-logged .header-center.header-center-logged{
            margin-left: 0 !important;
            margin-right: 0;
        }
        .admin-header.is-logged .header-center{
            justify-content: flex-end !important;
        }
        .admin-header.is-logged .header-search{
            padding-right: 0;
        }
        .admin-header.is-logged .header-center.header-center-logged .admin-actions-grid{
            padding-right: 16px !important;
            margin-right: 0 !important;
        }
        .admin-header{
            width: 100% !important;
        }

        .admin-header.is-logged #adminLastAction:empty{ display:none !important; }

        .brand-title {
            font-size: 1.05rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .brand-subtitle {
            font-size: 0.78rem;
            opacity: 0.75;
        }
        /* Agrupa título e subtítulo preservando o layout original */
        .brand-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        /* Toggle de tema na header-left: oculto por padrão (desktop usa btn-tema-inline no grid) */
        .admin-theme-mobile {
            display: none;
        }
        .header-left {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .header-center {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            gap: 8px;
        }
        .admin-header .header-center-logged{
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
        }
.admin-actions-grid{
            display:flex;
            flex-wrap:nowrap;
            justify-content:flex-end;
            align-items:center;
            gap:8px;
            padding:4px 16px 4px 10px;
        }
        /* Wrappers de dropdown: não adicionam altura nem espaço extra */
        .admin-actions-grid > .admin-actions-backup-buttons--dropdown {
            display: flex;
            align-items: center;
            position: relative;
            height: auto;
        }

        .admin-last-action{ display:none; margin-left:8px; font-size:12px; opacity:.75; }
        .admin-header .header-center-logged .admin-actions-grid .btn{
            font-size: 0.72rem;
            padding: 4px 14px;
        }

        .header-logo-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
        }
        .admin-logo-link { text-decoration: none; }
        .admin-logo-link:hover .admin-logo-btn {
            box-shadow: 0 0 10px rgba(198,163,86,0.55);
            transform: scale(1.03);
        }
        .admin-logo-btn {
            width: 68px;
            height: 68px;
            border-radius: 9999px;
            border: 1px solid var(--border-primary);
            background: transparent !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transition: transform 160ms ease, box-shadow 160ms ease;
        }
        .admin-logo-img {
            width: 56px;
            height: 56px;
            object-fit: contain;
            display: block;
            background: transparent !important;
            border-radius: 9999px;
            transition: transform 160ms ease, filter 160ms ease;
        }
        [data-theme="light"] .admin-logo-btn,
        [data-theme="light"] .admin-logo-link {
            background: transparent !important;
        }

.header-search {
            flex: 1;
            display: flex;
            justify-content: flex-start; /* alinha à esquerda, ao lado do brand */
            padding: 0 0 0 28px;         /* gap à esquerda do brand */
        }

        /* Wrapper para posicionar o X dentro do campo */
        .admin-search-wrapper {
            position: relative;
            width: 100%;
            max-width: 348px; /* 278px + 25% */
            display: flex;
            align-items: center;
        }

        #adminSearch {
            width: 100%;
            padding: 8px 34px 8px 16px; /* padding-right reserva espaço para o X */
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: var(--input-bg) !important;
            color: var(--text-primary) !important;
            font-size: 0.9em;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
        }

        /* autofill do #adminSearch acompanha o tema */
        #adminSearch:-webkit-autofill,
        #adminSearch:-webkit-autofill:hover,
        #adminSearch:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--text-primary) !important;
            -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
            box-shadow: 0 0 0px 1000px var(--input-bg) inset !important;
            transition: background-color 9999s ease-out 0s;
        }

        #adminSearch::placeholder {
            color: var(--text-muted) !important;
        }

        /* X dentro do campo: posicionado absolutamente à direita */
        .clear-search-btn {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            padding: 0 2px;
            cursor: pointer;
            color: var(--text-muted);
            font-size: 1.1em;
            line-height: 1;
            outline: none;
            transition: color 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .clear-search-btn:hover { color: var(--gold-primary); }

        .header-right { display:flex; align-items:center; gap:8px; margin-left:8px; }
        .badge-env {
            border-radius: 999px;
            padding: 3px 8px;
            border: 1px solid var(--border-primary);
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.8;
        }
        .theme-toggle {
            min-width: 32px;
            height: 28px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: var(--bg-secondary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0 6px;
        }

        main {
            padding: 10px 16px 80px;
            flex: 1;
        }

        .card {
            background: var(--bg-card);
            border-radius: 16px;
            border: 1px solid var(--border-soft);
            box-shadow: 0 8px 22px rgba(0,0,0,0.35);
            padding: 10px 12px 12px;
        }
        .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .card-title {
            font-size: 0.95rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .card-subtitle {
            font-size: 0.76rem;
            opacity: 0.8;
            margin-top: 2px;
        }

        .btn {
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            padding: 5px 12px;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            cursor: pointer;
            background: linear-gradient(135deg, var(--gold-soft), transparent);
            color: var(--text-primary);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-secondary {
            background: transparent;
        }
        .btn-danger {
            border-color: var(--danger);
            color: var(--danger);
            background: transparent;
        }
        .btn-sm {
            padding: 3px 9px;
            font-size: 0.72rem;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8rem;
        }
        thead {
            background: rgba(255,255,255,0.03);
        }
        th, td {
            padding: 5px 6px;
            border-bottom: 1px solid var(--border-soft);
            text-align: left;
        }
        th {
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-size: 0.72rem;
            opacity: 0.85;
        }
                #pensTable thead th {
            color: var(--gold-primary);
        }
        #pensTable th:nth-child(2),
        #pensTable td:nth-child(2) {
            min-width: 260px;
        }

        #pensTable th.col-tipo,
        #pensTable td.col-tipo,
        #pensTable th.col-nib,
        #pensTable td.col-nib,
        #pensTable th.col-tiragem,
        #pensTable td.col-tiragem,
        #pensTable th.col-localizacao,
        #pensTable td.col-localizacao {
            text-align: center;
            white-space: nowrap;
        }

        /* Coluna de visibilidade — mesmo mecanismo de centralização em th e td */
        #pensTable th.col-vis,
        #pensTable td.col-vis {
            width: 38px;
            min-width: 38px;
            padding: 4px 2px;
            text-align: center;
            vertical-align: middle;
        }

        #pensTable th.col-vis {
            font-size: 1.2rem;
            line-height: 1;
        }

        /* display:contents torna o wrapper transparente ao layout;
           o checkbox vira filho direto do td e responde ao text-align:center,
           o mesmo mecanismo que centraliza o emoji no th */
        .vis-cell-inner {
            display: contents;
        }

        .vis-check {
            width: 15px;
            height: 15px;
            cursor: pointer;
            accent-color: var(--gold-primary);
            display: inline-block;
            vertical-align: middle;
        }

        /* No desktop, nome em linha única (spans inline) */
        .col-nome-inner { display: inline; }
        .nome-wrap { display: inline; }
        .col-nome .pen-nome-mobile { display: inline; white-space: normal; }

        /* Subtítulo de visualizáveis */
        .card-subtitle-vis {
            font-size: 0.78rem;
            color: var(--gold-primary);
            opacity: 0.75;
            margin-top: 2px;
            font-weight: 400;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        
        #pensTable th.col-tipo,
        #pensTable td.col-tipo {
            min-width: 120px;
            white-space: nowrap;
        }
        #pensTable th.col-tiragem,
        #pensTable td.col-tiragem {
            min-width: 120px;
            white-space: nowrap;
        }

        tbody tr:hover {
            background: rgba(255,255,255,0.03);
        }
        /* Alternância leve entre linhas */
        #pensTable tbody tr:nth-child(even) {
            background: rgba(255,255,255,0.025);
        }
        #pensTable tbody tr:nth-child(even):hover {
            background: rgba(255,255,255,0.05);
        }
        .col-actions {
            white-space: nowrap;
            text-align: center;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px 10px;
            align-items: start;
        }
        /* NOME DA CANETA: largura total no desktop */
        .form-grid > .form-group:has(#nome) {
            grid-column: 1 / -1;
        }
        /* Label com botão Gerenciar alinhado — mesma altura que label simples */
        .form-group-label-row {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 3px;
            min-height: 0;
        }
        .form-group-label-row label {
            margin: 0;
            line-height: 1.4;
        }
        /* Botão Gerenciar: pequeno e uniforme em todos os campos */
        .btn-gerenciar {
            font-size: 0.5rem !important;
            padding: 1px 5px !important;
            line-height: 1.3 !important;
            white-space: nowrap;
            border-radius: 5px;
        }
        
        /* === ETAPA 1 — Compactar linha Edição/Tipo/Nib (somente UI; sem persistência) === */
        .form-row-compact{
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px 10px;
            align-items: end;
        }
        .form-row-compact .form-group-compact{
            min-width: 0;
        }
        .form-row-compact #edicaoDropdown,
        .form-row-compact #tipo_escrita,
        .form-row-compact #nib{
            width: 100%;
            min-width: 0; /* permite encolher dentro do grid */
        }

        @media (max-width: 1023px){
            .form-row-compact{
                grid-template-columns: 1fr 1fr;
            }
        }
        @media (max-width: 820px){
            .form-row-compact{
                grid-template-columns: 1fr;
            }
        }

        /* Tabela: coluna NIB */
        #pensTable th.col-nib,
        #pensTable td.col-nib{
            text-align: center;
            min-width: 70px;
            white-space: nowrap;
        }
.form-group {
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-size: 0.8rem;
        }

        .multi-select {
            position: relative;
            width: 100%;
        }
        .multi-select-display {
            padding: 8px 10px;
            border-radius: 999px;
            border: 1px solid var(--border-primary);
            background: var(--card-bg);
            cursor: pointer;
            min-height: 34px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px;
        }
        .multi-select-display.empty {
            opacity: 0.7;
        }
        .multi-select-menu {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(100% + 4px);
            background: var(--card-bg);
            border-radius: 6px;
            border: 1px solid var(--border-primary);
            box-shadow: 0 4px 18px rgba(0,0,0,0.4);
            padding: 8px;
            z-index: 50;
            max-height: 220px;
            overflow-y: auto;
            display: none;
        }
        .multi-select-menu.open {
            display: block;
        }
        .multi-select-menu label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.78rem;
            padding: 2px 0;
            cursor: pointer;
            text-transform: none;
            letter-spacing: normal;
        }

        #edicaoDropdown .multi-select-display.empty {
            opacity: 1;
        }
        #edicaoDropdown .multi-select-display {
            background: var(--bg-card);
            border-color: var(--border-primary);
        }
        #edicaoDropdown .multi-select-menu {
            background: var(--bg-card);
            border-color: var(--border-primary);
            max-height: 360px;
        }

        #colecaoDropdown .multi-select-display.empty {
            opacity: 1;
        }
        #colecaoDropdown .multi-select-display {
            background: var(--bg-card);
            border-color: var(--border-primary);
        }
        #colecaoDropdown .multi-select-menu {
            background: var(--bg-card);
            border-color: var(--border-primary);
            max-height: 360px;
        }

        .thumbs-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 6px;
        }
        .thumb-item {
            position: relative;
            width: 80px;
            height: 80px;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid var(--border-soft);
            cursor: move;
            background: #000;
        }
        .thumb-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .thumb-remove {
            position: absolute;
            top: 2px;
            right: 2px;
            border: none;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            font-size: 12px;
            line-height: 18px;
            text-align: center;
            cursor: pointer;
            background: rgba(0,0,0,0.7);
            color: #fff;
        }
        .thumb-cover {
            position: relative;
            display: inline-block;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--border-soft);
            margin-top: 8px;
        }
        .thumb-cover img {
            display: block;
            max-width: 160px;
            max-height: 120px;
            object-fit: cover;
        }
        .thumb-cover-empty {
            font-size: 0.8rem;
            opacity: 0.7;
            margin-top: 8px;
        }
        .thumb-item.dragging {
            opacity: 0.6;
            outline: 1px dashed var(--accent, #f0c040);
        }
        .thumb-index {
            position: absolute;
            right: 2px;
            bottom: 2px;
            min-width: 18px;
            padding: 0 4px;
            border-radius: 10px;
            font-size: 10px;
            line-height: 16px;
            text-align: center;
            background: rgba(0,0,0,0.7);
            color: #fff;
        }
        .thumb-badge {
            position: absolute;
            left: 2px;
            top: 2px;
            padding: 0 4px;
            border-radius: 10px;
            font-size: 10px;
            line-height: 16px;
            text-align: center;
            background: rgba(0,0,0,0.7);
            color: #fff;
            text-transform: uppercase;
        }
        .thumbs-pending .thumb-item {
            border-style: dashed;
        }

        .multi-select-menu input[type="checkbox"] {
            cursor: pointer;
        }

        .form-group.full {
            grid-column: 1 / -1;
        }
        label {
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-size: 0.72rem;
            opacity: 0.8;
        }
        input[type="text"],
        input[type="number"],
        input[type="password"],
        input[type="date"],
        select,
        textarea {
            background: var(--input-bg);
            border-radius: 999px;
            border: 1px solid var(--input-border);
            color: var(--text-primary);
            padding: 5px 9px;
            font-family: inherit;
            font-size: 0.84rem;
        }
        textarea {
            border-radius: 10px;
            min-height: 140px;
            resize: vertical;
        }
        input[type="file"] {
            font-size: 0.76rem;
        }
        input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(0.6);
            cursor: pointer;
        }
        [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(0.8);
        }
        select, select option {
            background-color: var(--bg-secondary);
            color: var(--text-primary);
        }

        .status-bar {
            margin-top: 6px;
            font-size: 0.76rem;
            min-height: 18px;
        }
        .status-ok {
            color: var(--success);
        }
        .status-error {
            color: var(--danger);
        }

        /* ── Barra sticky de salvar ──────────────────────────────── */
        .pen-form-sticky-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 400;
            background: var(--bg-card);
            border-top: 1px solid var(--gold-primary);
            box-shadow: 0 -4px 20px rgba(0,0,0,0.45);
            padding: 10px 24px;
        }
        .pen-form-sticky-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            max-width: 100%;
        }
        .pen-form-sticky-label {
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* ── Toast de feedback ao salvar caneta ─────────────────── */
        .save-pen-toast {
            display: none;
            position: fixed;
            bottom: 28px;
            left: 50%;
            transform: translateX(-50%) translateY(12px);
            z-index: 9999;
            padding: 11px 22px;
            border-radius: 10px;
            border: 1px solid var(--border-primary);
            background: var(--bg-secondary);
            box-shadow: 0 8px 32px rgba(0,0,0,0.45);
            font-size: 0.82rem;
            font-family: 'Montserrat', sans-serif;
            letter-spacing: 0.04em;
            white-space: nowrap;
            opacity: 0;
            transition: opacity 0.22s ease, transform 0.22s ease;
            pointer-events: none;
        }
        .save-pen-toast.show {
            display: block;
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
        .save-pen-toast.toast-saving {
            color: var(--text-muted);
            border-color: var(--border-soft);
        }
        .save-pen-toast.toast-ok {
            color: var(--success);
            border-color: var(--success);
        }
        .save-pen-toast.toast-error {
            color: var(--danger);
            border-color: var(--danger);
        }

        /* Botão Salvar: estado de progresso */
        .btn.btn-saving {
            opacity: 0.65;
            cursor: not-allowed;
            pointer-events: none;
        }

        /* Destaque dourado na linha recém-salva ou editada na tabela */
        @keyframes rowSavedGlow {
            0%   { background: rgba(212, 175, 55, 0.35); }
            100% { background: transparent; }
        }
        #pensTable tr.row-saved {
            animation: rowSavedGlow 2s ease-out forwards;
        }

        .layout {
            display: grid;
            grid-template-columns: 1fr 540px;
            gap: 12px;
            align-items: start;
        }

        /* Coluna direita: empilha Nova Caneta + Página Sobre */
        .right-col {
            display: flex;
            flex-direction: column;
            align-self: start;
            width: 540px;
            min-width: 0;
            max-width: 540px;
        }
        .right-col > .card {
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
            overflow: hidden;
        }
        .right-col > .card .form-grid,
        .right-col > .card .form-row-compact {
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
        }
        .right-col > .card .form-group {
            min-width: 0;
        }
        .right-col > .card input,
        .right-col > .card select,
        .right-col > .card textarea {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* === OPÇÃO B — Painel amplo (100% da viewport) === */
        main{ width: 100%; }
        .layout{
            /* evita overflow horizontal (100vw inclui a largura da scrollbar) */
            width: 100%;
            box-sizing: border-box;
            padding-left: 16px;
            padding-right: 16px;
            margin-left: 0;
            margin-right: 0;
        }
        .admin-header{
            width: 100vw;
            box-sizing: border-box;
            padding-left: 16px;
            padding-right: 16px;
        }
        /* garante que o bloco de ações encoste no limite direito do header */
        .admin-header.is-logged .header-center.header-center-logged{ margin-left: auto; }
        .admin-header.is-logged .header-center.header-center-logged .admin-actions-grid{ justify-content: flex-end; }

        @media (max-width: 960px) {
            .layout {
                grid-template-columns: 1fr;
            }
            .right-col {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }
        }

        .login-wrapper {
            height: calc(100vh - var(--admin-header-h, 0px));
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            padding: 0 0 12px;
            }

        .login-card {
            max-width: 380px;
            width: 100%;
            transform: translateY(-1vh);
            
        }
        .login-title {
            font-size: 0.95rem;
            font-weight: 500;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 4px;
        
            text-align: center;
        }

        .login-subtitle {
            font-size: 0.8rem;
            opacity: 0.8;
            margin-bottom: 14px;
        }

        .password-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        .password-wrapper input[type="password"],
        .password-wrapper input[type="text"] {
            width: 100%;
            padding-right: 42px;
        }
        .toggle-pass {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            background: transparent;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .toggle-pass svg {
            display: block;
        }
        .toggle-pass .icon-hide {
            display: none;
        }
        .toggle-pass.is-visible .icon-show {
            display: none;
        }
        .toggle-pass.is-visible .icon-hide {
            display: inline-flex;
        }
        .toggle-pass:hover svg {
            stroke: var(--text-secondary);
        }

        .formatting-toolbar {
            display: inline-flex;
            gap: 4px;
            margin-left: 8px;
            vertical-align: middle;
        }
        .fmt-btn {
            border: 1px solid var(--border-primary);
            background: transparent;
            padding: 0 6px;
            border-radius: 4px;
            font-size: 0.75rem;
            cursor: pointer;
            line-height: 1.4;
            color: var(--text-primary);
        }
        .fmt-btn:hover {
            background: var(--gold-soft);
            color: var(--bg-primary);
        }

        /* === Login header: true center + faster, stable logo === */
        .admin-header.is-login{
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 12px;
            min-height: 84px;
            /* Replica o efeito max-width:1400px da página principal:
               abaixo de 1400px usa 20px; acima, aumenta proporcionalmente. */
            padding-left: max(20px, calc((100% - 1400px) / 2 + 20px));
            padding-right: max(20px, calc((100% - 1400px) / 2 + 20px));
        }
        .admin-header.is-login .header-left{
            justify-self: start;
            min-width: 0;
        }
        .admin-header.is-login .header-right{
            justify-self: end;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .admin-header.is-login .header-center{
            justify-self: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .admin-header.is-login .admin-logo-btn{
            height: 64px;
            width: 64px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
        }
        .admin-header.is-login .admin-logo-img{
            height: 53px;
            width: 53px;
            object-fit: contain;
            display: block;
        }

/* === FIX ADMIN HEADER (ETAPA 1) === */
/* Header NÃO é fixo nesta etapa (evita sobreposição). Portanto, não há offset no topo. */
.page{
  padding-top: 0;
}

/* Header opaco (tema escuro/claro) */
.admin-header{
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
[data-theme="light"] .admin-header{
  background: var(--bg-primary);
  box-shadow: 0 6px 18px rgba(0,0,0,.10);
}

/* === HEADER COMPACTO APENAS NO DESKTOP === */
@media (min-width: 1024px) {
  .admin-header {
    min-height: 56px;
  }
  .page {
    padding-top: 0;
  }
}

/* Botão EXPORTAR: apenas no desktop */
@media (max-width: 1023px) {
  .btn-desktop-only { display: none !important; }
}

/* Botão ALTERAR SENHA inline: uppercase, mesma aparência dos demais btns */
.btn-alterar-senha {
  text-transform: uppercase;
  white-space: nowrap;
}

/* Botão TEMA inline: ícone apenas, sem texto */
.btn-tema-inline {
  white-space: nowrap;
}
.btn-tema-inline .theme-toggle-icon {
  font-size: 1em;
  line-height: 1;
}

/* Etapa 1: link estável "Voltar para a coleção" (não depende de $logged) */
.back-to-collection{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  font-size:12.5px;
  text-decoration:none;
  opacity:.9;
}
.back-to-collection:hover{ opacity:1; text-decoration:underline; }
/* Etapa II — header actions grid (pós-login): 2 linhas x 3 colunas */
.header-center.admin-actions-grid{
  display:flex;
  flex-wrap:nowrap;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  padding: 4px 10px;
}

        @media (max-width: 980px){
  /* Em telas menores, evita overflow */
  .header-center.admin-actions-grid{
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
}

/* Login: painel de alteração de senha (colapsável) */
.change-password-panel{
  max-width: 520px;
  margin: 14px auto 0 auto;
  display: none;
}
.change-password-panel.is-open{ display:block; }

/* Overlay (modal) — Alterar Senha */
.modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  padding: 18px;
}
.modal-backdrop.is-open{ display:flex; }
.modal{
  width: min(520px, 100%);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(20,20,24,.96);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-title{ font-weight: 700; letter-spacing: .02em; }
.modal-close{
  appearance:none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 10px;
}
.modal-close:hover{ background: rgba(255,255,255,.06); }
.modal-body{ padding: 14px; }
.modal-actions{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Oculta card antigo de alteração de senha (função migrou para overlay) */
#changePasswordCard{ display:none !important; }

/* FIX — campo de pesquisa do admin */
.header-search input,
.header-search input[type="search"]{
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
}
.header-search input::placeholder{
  color: var(--text-muted);
}

/* FIX — remover sublinhado do botão SAIR */
#btnLogout{
  text-decoration: none !important;
}

/* FIX — centralizar texto dos botões do grid */
.header-center.admin-actions-grid .btn,
.header-center.admin-actions-grid a.btn{
  text-align: center !important;
  justify-content: center;
}

/* FIX — remover sublinhado de links dentro do grid */
.header-center.admin-actions-grid a.btn{
  text-decoration: none !important;
}

/* Desktop: toggle dentro do grid aparece, o de fora fica oculto */
.admin-theme-toggle-logged { display: none; }
.theme-toggle-in-grid { display: flex; }

/* === Campos de login e modal — seguem o tema === */

.login-card input,
.login-card input[type="text"],
.login-card input[type="password"],
#loginForm input[type="text"],
#loginForm input[type="password"],
#loginUser,
#loginPass{
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
}

.modal input,
.modal input[type="password"],
.modal input[type="text"]{
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  color: var(--text-primary) !important;
}

.login-card input::placeholder,
#loginUser::placeholder,
#loginPass::placeholder,
.modal input::placeholder{
  color: var(--text-muted) !important;
}

/* Autofill — tema escuro (padrão) */
#loginForm input:-webkit-autofill,
#loginForm input:-webkit-autofill:hover,
#loginForm input:-webkit-autofill:focus,
.modal input:-webkit-autofill,
.modal input:-webkit-autofill:hover,
.modal input:-webkit-autofill:focus{
  -webkit-text-fill-color: #f5f5f5 !important;
  -webkit-box-shadow: 0 0 0px 1000px #111117 inset !important;
  box-shadow: 0 0 0px 1000px #111117 inset !important;
  caret-color: #f5f5f5 !important;
  transition: background-color 9999s ease-out 0s;
}

/*
 * Autofill — tema claro.
 * Usa body.theme-light (classe aplicada via JS) em vez de [data-theme="light"]
 * porque o iOS Safari não resolve seletores de atributo em ancestrais distantes
 * dentro do contexto :-webkit-autofill. Classe no body funciona em todos os browsers.
 */
body.theme-light #loginForm input:-webkit-autofill,
body.theme-light #loginForm input:-webkit-autofill:hover,
body.theme-light #loginForm input:-webkit-autofill:focus,
body.theme-light .modal input:-webkit-autofill,
body.theme-light .modal input:-webkit-autofill:hover,
body.theme-light .modal input:-webkit-autofill:focus{
  -webkit-text-fill-color: #1a1a1a !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  box-shadow: 0 0 0px 1000px #ffffff inset !important;
  caret-color: #1a1a1a !important;
  transition: background-color 9999s ease-out 0s;
}

/* Ajuste — Campo Contexto / Inspiração / Simbologia (+30%) */
#descricao{
  min-height: 30% !important;
  height: calc(1.3 * var(--textarea-height, 160px)) !important;
}

/* Painel — contador de canetas */
.count-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  padding: 2px 10px;
  margin-right: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .03em;
}



/* Ajuste visual — espaçamento entre header e seções principais */
.admin-header + main{
  margin-top: 0;
}

/* Garantia adicional para cards iniciais */
main .card:first-of-type{
  margin-top: 8px;
}

/* FIX — alinhar topo do header do 1º card (Instrumentos) com o card "Nova Caneta" */
.layout > section.card:first-of-type .card-header{
  align-items: flex-start !important;
}
.layout > section.card:first-of-type .card-header .btn.btn-sm{
  margin-top: 0 !important;
}

/* Alinhamento dos cards principais */
.layout > section.card .card-header{
  padding-top: 0 !important;
  margin-top: 0 !important;
  align-items: flex-start !important;
}
.layout > section.card .card-title{
  margin-top: 0 !important;
}

#instrumentosCard,
#novaCanetaCard {
  margin-top: 0 !important;
}
#sobreCard { margin-top: 12px; }

#instrumentosCard .card-header{
  padding-top: 2px !important;
  margin-top: 0 !important;
  align-items: flex-start !important;
}
#instrumentosCard .card-title{
  margin-top: 0 !important;
}

#novaCanetaCard .card-header{
  padding-top: 6px !important;
  margin-top: 0 !important;
  display: flex;
  align-items: flex-start !important;
}
#novaCanetaCard .card-header .header-left{
  min-width: 0;
}

/* UX — File picker: abrir seletor somente ao clicar em "PROCURAR" */
.file-picker{
  display:flex;
  gap:10px;
  align-items:center;
}
.file-picker .file-name{
  flex:1;
  background:#000;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:10px 14px;
  font-size:14px;
  outline:none;
}
.file-picker .file-name::placeholder{ color: rgba(255,255,255,.45); }

/* FIX — file input invisível (sem display:none) */
input[type="file"].vh-file{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}

/* Organização interna v3 — painel de ações recolhível no header */
body.actions-collapsed #actionsPanel{
  display:none !important;
}

/* Campos de valor sensível (Valor de Compra / Total) */
.valor-privado-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}
.valor-privado-wrapper .valor-privado-input {
    flex: 1;
    min-width: 0;
}
.valor-privado-input.valor-mascarado {
    filter: blur(0.35em);
}
.valor-privado-wrapper .valor-toggle-btn {
    flex-shrink: 0;
    border: 1px solid var(--gold-soft, #e0b35a);
    background: transparent;
    color: inherit;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
}

/* Ajuste fino: aproximar os cards do header e alinhar Instrumentos / Nova Caneta */
main .card{
  margin-top: 12px;
}
main .card:first-of-type{
  margin-top: 6px;
}

/* Mensagens de BACKUP / INTEGRIDADE: não podem deslocar botões nem alterar altura do header */
        .admin-actions-backup-group #backupStartedMsg{
            position: absolute;
            left: 0;
            top: 100%;
            margin-top: 2px;

            /* Mesmo estilo do texto do backup, em UMA linha, sem deslocar botões */
            font-size: 0.70rem;
            line-height: 14px;
            height: 14px;

            white-space: nowrap;
            overflow: visible;
            max-width: calc(100vw - 24px);
            pointer-events: none;
        }

/* ==========================================================================
   AJUSTE ESTÉTICO — OVERLAY "ALTERAR SENHA"
   --------------------------------------------------------------------------
   CONTRATO: alterar SOMENTE o visual do modal de alteração de senha.
   - Cria espaçamento vertical entre os campos
   - Mantém label acima do input (sem sobreposição)
   - Sem impacto no header, backups, integridade ou demais formulários
   ========================================================================== */
#changePasswordBackdrop .form-row{
  margin-bottom: 14px;
}
#changePasswordBackdrop .form-row label{
  display: block;
  margin-bottom: 6px;
}
#changePasswordBackdrop .form-row input{
  display: block;
  width: 100%;
}

#adminActionStatus{
    position: absolute; /* fora do fluxo: não muda a altura do grupo */
    left: 0;
    top: 100%;
    margin-top: 2px;

    /* Mesmo padrão tipográfico das mensagens de BACKUP/Integridade */
    font-size: 0.70rem;
    line-height: 14px;
    height: 14px;

    white-space: nowrap;
    overflow: visible;
    max-width: calc(100vw - 24px);
    pointer-events: none;
}
/* Compatível com showFlashMessage(): ele troca className para "status-bar ok|err" */
#adminActionStatus.success{ color:#22c55e; }
#adminActionStatus.error{ color:#ef4444; }

/* ETAPA 3h — ajustes finos: remover "linha inútil" no fim da tabela e eliminar espaço residual abaixo dos botões */
#pensTable tbody tr:last-child td{ border-bottom:none !important; }
/* reduzir respiro inferior do card "Nova Caneta" sem afetar layout geral */
#novaCanetaCard{ padding-bottom: 6px !important; }

/* ETAPA 6 — indicador de alteração não salva: asterisco vermelho, sem mexer no layout */
#formTitle.dirty::after{
    content: " *";
    color: var(--danger);
}

/* Ajuste fino — espaço entre Descrição/Simbologia e Foto de Capa */
#descricao{ margin-bottom: 14px; }

/* ETAPA 7 — aviso de saúde do DB (quick_check), sem empurrar layout */
.admin-actions-backup-group #dbHealthMsg{
    position: absolute;
    left: 0;
    top: calc(100% + 16px);
    margin-top: 2px;
    font-size: 0.70rem;
    line-height: 14px;
    height: 14px;
    white-space: nowrap;
    overflow: visible;
    max-width: calc(100vw - 24px);
    pointer-events: none;
}

/* Ajuste — Foto de Capa / Fotos Adicionais: botão PROCURAR próximo ao título + colunas alinhadas */
.photos-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:stretch;
}
.photos-col-left{
  display: flex;
  flex-direction: column;
}
.photos-col-right{ justify-self:end; width:100%; }
.file-head{
  display:flex;
  align-items:center;
  gap: 8px;
}
.file-head-left{ justify-content:flex-start; }
.file-head-right{ justify-content:flex-end; }
.file-head-label{ margin:0; }
.file-head-btn{ white-space:nowrap; padding-left:10px; padding-right:10px; }
@media (max-width: 960px){
  .photos-grid{ grid-template-columns: 1fr; }
  .photos-col-right{ justify-self:stretch; }
  .file-head-right{ justify-content:flex-start; }
}

/* Fotos adicionais — 4 por linha (sem afetar outros thumbs do admin) */
.photos-col-right .thumbs-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.photos-col-right .thumb-item{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}
@media (max-width: 960px){
  .photos-col-right .thumbs-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .photos-col-right .thumbs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Alinhamento à direita do texto informativo das fotos adicionais */
.photos-col-right small{
  display: block;
  text-align: right;
}


/* Modal de resultado da Integridade */
.integrity-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.integrity-modal-content{
  background:#111;
  border:1px solid #444;
  border-radius:10px;
  width:min(900px, 92vw);
  max-height:88vh;
  padding:18px;
  display:flex;
  flex-direction:column;
}
.integrity-modal-content pre{
  flex:1;
  overflow:auto;
  white-space:pre-wrap;
  font-family:monospace;
  font-size:0.8rem;
}
.integrity-modal-actions{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
}


/* ===== BACKUP MENU (DROPDOWN FIXO, SEM DESLOCAMENTO) ===== */
.admin-actions-backup-buttons--dropdown{ position: relative; display:inline-flex; align-items:center; }
.admin-backup-menu{
  position:absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  padding: 6px;
  margin: 0;
  z-index: 9999;
}
.admin-backup-menu[aria-hidden="true"]{ display:none; }
.admin-backup-menu[aria-hidden="false"]{ display:block; }
.admin-backup-menu .admin-backup-menu-item{
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}
.admin-backup-menu .admin-backup-menu-item:hover{ background: var(--gold-soft); }
/* ===== /BACKUP MENU ===== */


/* ===== ETAPA 14 — AUDITORIA (admin_log) ===== */
.audit-modal{ position: fixed; inset: 0; background: rgba(0,0,0,0.65); display:none; align-items:center; justify-content:center; z-index: 10000; padding: 16px; }
.audit-modal-content{ width: min(1100px, 96vw); max-height: 88vh; overflow:auto; background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,0.5); }
.audit-modal-header{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.audit-modal-title{ font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .95rem; color: var(--text-secondary); }
.audit-modal-body{ padding: 14px 16px 18px 16px; }
.audit-filters{ display:grid; grid-template-columns: 1.1fr 1fr 1fr 1fr 1.2fr auto auto; gap: 10px; align-items:end; margin-bottom: 12px; }
.audit-filters label{ font-size: .75rem; opacity:.85; display:block; margin-bottom: 4px; }
.audit-filters input, .audit-filters select{ width:100%; padding: 10px 10px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); outline:none; }
.audit-table{ width:100%; border-collapse: collapse; }
.audit-table th, .audit-table td{ text-align:left; padding: 10px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; font-size: .9rem; }
.audit-table th{ font-size: .78rem; letter-spacing:.04em; text-transform:uppercase; color: var(--text-muted); }
.audit-msg{ color: var(--text-primary); }
.audit-meta{ color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.audit-actions{ display:flex; gap: 8px; justify-content:flex-end; margin-top: 12px; align-items:center; }
.audit-pager{ display:flex; gap: 8px; align-items:center; }
.audit-pager .btn{ padding: 8px 10px; }
.audit-copyhint{ font-size:.8rem; color: var(--text-muted); margin-left:auto; }
@media (max-width: 900px){
  .audit-filters{ grid-template-columns: 1fr 1fr; }
  .audit-copyhint{ display:none; }
}
/* ===== /ETAPA 14 — AUDITORIA ===== */


/* ===== ETAPA 15 — SNAPSHOTS (gestão) ===== */
.snapshot-modal{ position: fixed; inset: 0; background: rgba(0,0,0,0.65); display:none; align-items:center; justify-content:center; z-index: 10000; padding: 16px; }
.snapshot-modal-content{ width: min(1200px, 98vw); max-height: 88vh; overflow:auto; background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 16px; box-shadow: 0 18px 40px rgba(0,0,0,0.5); }
.snapshot-modal-header{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); }
.snapshot-modal-title{ font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .95rem; color: var(--text-secondary); }
.snapshot-modal-body{ padding: 14px 16px 18px 16px; }
.snapshot-actions{ display:flex; gap: 8px; align-items:center; margin-bottom: 12px; flex-wrap: wrap; }
.snapshot-table{ width:100%; border-collapse: collapse; }
.snapshot-table th, .snapshot-table td{ text-align:left; padding: 10px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: top; font-size: .9rem; }
.snapshot-table th{ font-size: .78rem; letter-spacing:.04em; text-transform:uppercase; color: var(--text-muted); }

/* ── Modal flutuante de Estatísticas ────────────────────── */
.stats-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    backdrop-filter: blur(2px);
}
.stats-modal-overlay.open { display: block; }

.stats-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.97);
    z-index: 9001;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.55);
    width: min(680px, 96vw);
    max-height: 85vh;
    overflow: hidden;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.stats-modal.open {
    display: flex;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.stats-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}
.stats-modal-title {
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: .9rem;
    color: var(--text-secondary);
}
.stats-modal-body {
    overflow-y: auto;
    padding: 16px 18px 20px;
    flex: 1;
}

/* ── Estatísticas ───────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.stat-kpi {
    background: var(--bg-primary);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.stat-kpi-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.stat-kpi-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--gold-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stats-section-title {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    margin: 14px 0 6px;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 4px;
}
.stats-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.stats-bar-label {
    font-size: .78rem;
    color: var(--text-secondary);
    min-width: 160px;
    max-width: 220px;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    line-height: 1.4;
    flex-shrink: 0;
}
.stats-bar-track {
    flex: 1;
    height: 6px;
    background: var(--border-soft);
    border-radius: 3px;
    overflow: hidden;
}
.stats-bar-fill {
    height: 100%;
    background: var(--gold-primary);
    border-radius: 3px;
    transition: width .4s ease;
}
.stats-bar-count {
    font-size: .75rem;
    color: var(--text-muted);
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

/* Blur de valores financeiros */
.stats-valor-blur {
    filter: blur(0.35em);
    transition: filter 0.2s ease;
    user-select: none;
}
.stats-valor-blur.stats-valor-revealed { filter: none; }
.stats-blur-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: .8rem;
    opacity: .5;
    padding: 0 2px;
    line-height: 1;
    transition: opacity 0.15s;
}
.stats-blur-toggle:hover { opacity: 1; }
.stats-dono-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.stats-dono-card {
    flex: 1;
    background: var(--bg-primary);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 10px 12px;
}
.stats-dono-name {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 3px;
}
.stats-dono-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.stats-dono-valor {
    font-size: .75rem;
    color: var(--gold-primary);
    margin-top: 2px;
}
@media (max-width: 600px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-bar-label { min-width: 100px; max-width: 160px; font-size: .72rem; }
}

/* ── Mobile header: redesign compacto ───────────────────── */
@media (max-width: 768px) {
    /* Header logado: coluna única, relativo para o toggle absoluto */
    .admin-header.is-logged {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px 14px 8px !important;
        gap: 7px !important;
        position: relative !important;
    }

    /* Linha 1: brand à esquerda, espaço à direita para o toggle */
    .admin-header.is-logged .header-left {
        align-items: flex-start;

    }

    /* Toggle fora do grid: canto superior direito (mobile) */
    .admin-theme-toggle-logged {
        display: flex !important;
        position: absolute !important;
        top: 10px !important;
        right: 14px !important;
    }

    /* Toggle dentro do grid: oculto no mobile (já está fora) */
    .theme-toggle-in-grid {
        display: none !important;
    }

    /* Busca: largura total */
    .admin-header.is-logged .header-search {
        width: 100%;
        padding: 0 !important;
    }

    /* Container das ações: largura total */
    .admin-header.is-logged .header-center.header-center-logged {
        align-items: center !important;
        margin-left: 0 !important;
        width: 100%;
    }

    /* Grid de botões: 3 colunas iguais, centralizado */
    .admin-header.is-logged .admin-actions-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        padding: 0 !important;
        width: 100% !important;
        justify-items: center;
    }

    /* Elementos ocultos: fora do fluxo do grid */
    .admin-header.is-logged .mob-break,
    .admin-header.is-logged #adminLastAction,
    .admin-header.is-logged #backupStartedMsg,
    .admin-header.is-logged #adminActionStatus,
    .admin-header.is-logged #dbHealthMsg {
        display: none !important;
    }

    /* Cada célula: ocupa 100% */
    .admin-header.is-logged .admin-actions-grid > button.btn,
    .admin-header.is-logged .admin-actions-grid > a.btn,
    .admin-header.is-logged .admin-actions-grid > .admin-actions-backup-buttons--dropdown,
    .admin-header.is-logged .admin-actions-grid > .admin-actions-backup-group {
        width: 100% !important;
        box-sizing: border-box;
        min-width: 0;
    }

    /* Wrappers internos também precisam preencher 100% */
    .admin-header.is-logged .admin-actions-grid .admin-actions-backup-buttons,
    .admin-header.is-logged .admin-actions-grid .admin-actions-backup-buttons--dropdown {
        width: 100% !important;
        display: block !important;
        box-sizing: border-box;
    }

    /* Botões: altura fixa igual, fonte uniforme, centralizados */
    .admin-header.is-logged .admin-actions-grid .btn,
    .admin-header.is-logged .admin-actions-grid a.btn {
        font-size: 0.67rem !important;
        height: 32px !important;
        padding: 0 4px !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        display: flex !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Sticky bar de salvar */
    .pen-form-sticky-bar {
        padding: 8px 12px;
    }
}

/* Log de alterações por caneta */
#penLogTable td:first-child { font-size: .8rem; font-weight: 600; white-space: nowrap; }
#penLogTable tr:hover td { background: var(--bg-hover, rgba(255,255,255,.04)); }
#penLogTable .btn-pen-log-del { opacity: 0; transition: opacity 0.15s; padding: 2px 6px; font-size: .8rem; }
#penLogTable tr:hover .btn-pen-log-del { opacity: 1; }
.snapshot-hint{ font-size:.8rem; color: var(--text-muted); }
@media (max-width: 900px){ .snapshot-hash{ display:none; } }
/* ===== /ETAPA 15 — SNAPSHOTS ===== */

/* ===== ETAPA 15 — AJUSTE FINO (BUSCAR) ===== */
/* .header-search margin-left negativo removido — espaçamento ajustado via padding */
/* ===== /ETAPA 15 — AJUSTE FINO (BUSCAR) ===== */


/* ETAPA 19 — Health Modal */
.health-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99998;
}
.health-modal-content{
  width: min(1200px, 98vw);
  margin: 42px auto;
  background: #0f0f10;
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  overflow: hidden;
}
.health-modal-header{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(212,175,55,0.25);
}
.health-modal-title{
  font-weight: 800;
  letter-spacing: 0.10em;
}
.health-modal-body{
  padding: 12px 14px 14px;
}

/* === Preview de descrição + toolbar B/I/U === */

/* === Preview de descrição === */
/* .label-toolbar-row: agrupa B/I/U e Preview na mesma linha, abaixo do título */
.label-toolbar-row {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  vertical-align: middle;
}
.label-toolbar-row .formatting-toolbar {
  margin-left: 0;
}
.label-toolbar-row #btnTogglePreview,
.label-toolbar-row #btnSobrePreview {
  margin-left: 10px;
}
.desc-editor-wrap {
  display: flex;
  gap: 12px;
}
.desc-editor-wrap textarea {
  flex: 1;
  min-height: 120px;
}
.desc-preview {
  flex: 1;
  min-height: 120px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-primary);
  font-size: 0.9em;
  line-height: 1.7;
  overflow-y: auto;
  word-break: break-word;
}
.desc-preview:empty::before {
  content: 'O preview aparecerá aqui...';
  opacity: 0.4;
  font-style: italic;
}

/* === FIX VISUAL (PÓS-E2): centralizar colunas exceto NOME === */
#pensTable th,
#pensTable td {
  text-align: center !important;
}
#pensTable th:nth-child(2),
#pensTable td:nth-child(2) {
  text-align: left !important;
}

/* ============================================================
   ADMIN — RESPONSIVO MOBILE (≤ 768px)
   ============================================================ */
@media (min-width: 769px) and (max-width: 1023px) {
  .login-wrapper {
    padding-bottom: 45vh; /* sobe ~30% em relação ao centro */
    align-items: center;
  }

  /* form-row-compact na coluna estreita do tablet: mantém 3 colunas para ANO/TIRAGEM/Nº SÉRIE */
}

@media (max-width: 768px) {

  /* ── Login: sobe 20% em relação ao centro ───────────────── */
  .login-wrapper {
    padding-bottom: 30vh;
    align-items: center;
  }

  /* ── Header logado: coluna com 3 linhas ─────────────────── */
  header.admin-header.is-logged {
    flex-direction: column;
    align-items: stretch;
    padding: 8px 12px 4px;
    min-height: auto;
    gap: 3px;
  }

  /* Linha 1: brand — order:1 APENAS no header logado (não afeta o header de login) */
  .admin-header.is-logged .header-left {
    order: 1;
    width: 100%;
    flex-shrink: 0;
  }

  /* Header de login no mobile: preserva o grid de 3 colunas (1fr auto 1fr) do desktop.
     Apenas ajusta altura e padding. */
  header.admin-header.is-login {
    min-height: 64px;
    padding: 6px 12px;
  }

  .brand-title    { font-size: 0.85rem; }
  .brand-subtitle { font-size: 0.68rem; }

  /* Linha 2: botões (acima da busca) */
  .header-center.header-center-logged {
    order: 2;
    width: 100%;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
  }

  /* ── Alinhamento dos botões de ação: sobrescreve !important do fix15 ── */
  .admin-header.is-logged .header-center {
    justify-content: center !important;
  }

  .admin-actions-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center !important;
    gap: 4px;
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
  }

  .admin-actions-grid .btn,
  .admin-actions-grid a.btn {
    font-size: 0.65rem;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mob-break {
    flex-basis: 100%;
    height: 0;
  }

  #btnLogout {
    margin-left: 0;
  }

  /* Toggle de tema: oculto no grid, visível na header-left.
     Especificidade 3,0,2 necessária para vencer o display:flex !important
     do seletor .admin-header.is-logged .admin-actions-grid .btn (3,0,1) */
  .admin-header.is-logged .admin-actions-grid button.btn.btn-tema-inline {
    display: none !important;
  }

  /* header-left vira flex-row para alinhar brand e toggle na mesma linha */
  .admin-header.is-logged .header-left {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }

  /* Botão redondo de tema na header-left */
  .admin-theme-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-primary, rgba(197,151,95,0.20));
    background: var(--bg-secondary, #1a1a1a);
    color: var(--text-primary, #fff);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
  }

  .theme-toggle {
    flex-shrink: 0;
    min-width: 28px;
    height: 26px;
  }

  #btnRestoreMenu,
  #btnGoChangePassword { display: inline-flex; }

  /* Linha 3: busca */
  .header-search {
    order: 3;
    width: 100%;
    flex-shrink: 0;
    padding: 0;
    justify-content: flex-start;
  }

  .admin-search-wrapper { max-width: 100%; }

  /* ── Nova Caneta e Sobre: coluna única no mobile ────────── */
  .layout {
    grid-template-areas: none;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .right-col,
  #instrumentosCard,
  #novaCanetaCard,
  #sobreCard {
    grid-area: auto;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* ── Botão Nova Caneta: mesmo tamanho dos botões de ação ─── */
  #instrumentosCard .card-header .btn {
    font-size: 0.65rem;
    padding: 4px 8px;
  }
  label[for="descricao"],
  label[for="sobreTexto"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  label[for="descricao"] .label-toolbar-row,
  label[for="sobreTexto"] .label-toolbar-row {
    margin-left: 0;
  }

  /* ── Main ────────────────────────────────────────────────── */
  main { padding: 8px 10px 16px; }

  /* ── Cards ───────────────────────────────────────────────── */
  .card { padding: 10px; border-radius: 12px; }

  /* ── Tabela de canetas ───────────────────────────────────── */
  #tableWrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Título "N Instrumentos de Escrita": levemente menor no mobile */
  #instrumentosCard .card-title {
    font-size: 0.78rem;
  }

  /*
     Colunas visíveis no mobile: ID(1), Vis.(2), Nome(3), Coleção(4), Tipo(6), Localização(10), Ações(11).
     Ocultas: Edição(5), Nib(7), Ano(8), Tiragem(9).
  */
  #pensTable th:nth-child(5), #pensTable td:nth-child(5),
  #pensTable th:nth-child(7), #pensTable td:nth-child(7),
  #pensTable th:nth-child(8), #pensTable td:nth-child(8),
  #pensTable th:nth-child(9), #pensTable td:nth-child(9) {
    display: none;
  }

  /* No mobile/tablet, cada span do nome ocupa sua própria linha com white-space intacto */
  .col-nome .pen-nome-mobile { display: block; white-space: nowrap; }

  /* Flex aplicado no inner wrapper — td permanece como table-cell para não quebrar bordas de linha */
  .col-nome-inner {
    display: flex;
    align-items: flex-start;
    gap: 3px;
  }
  .nome-wrap {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .manut-badge {
    flex-shrink: 0;
    margin-top: 1px;
  }

  #pensTable th,
  #pensTable td {
    padding: 6px 4px;
    font-size: 0.75rem;
  }

  /* Botões de ação do card: ícones menores */
  .col-actions .btn { padding: 2px 6px; font-size: 0.85rem; }

  /* ── Formulário de caneta: 2 colunas no mobile ───────────── */
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* form-row-compact vira transparente: seus filhos entram direto no form-grid */
  .form-row-compact {
    display: contents;
  }

  /* Ordens explícitas para o layout móbile */
  .form-grid > .form-group:first-child       { order: 1; grid-column: 1 / -1; } /* Nome */
  .form-grid > .form-group:nth-child(2)      { order: 2; grid-column: 1 / -1; } /* Coleção */
  [data-field="edicao"]                      { order: 3; grid-column: 1 / -1; } /* Edição */
  [data-field="tipo_escrita"]                { order: 4; }                       /* Tipo | */
  [data-field="nib"]                         { order: 4; }                       /* | Pena */
  [data-field="caixa"]                       { order: 5; }                       /* Caixa | */
  [data-field="estado_caixa"]               { order: 5; }                       /* | Estado da Caixa */
  [data-field="certificado"]                 { order: 6; }                       /* Certificado | */
  [data-field="livreto"]                     { order: 6; }                       /* | Livreto(s) */
  [data-field="ano_lancamento"]              { order: 7; }                       /* Ano | */
  [data-field="tiragem"]                     { order: 7; }                       /* | Tiragem */
  [data-field="numero_serie"]                { order: 8; }                       /* Nº Série | */
  [data-field="localizacao"]                 { order: 8; }                       /* | Local */
  [data-field="data_manutencao"]             { order: 9; grid-column: 1 / -1; } /* Data (linha inteira) */
  .form-grid > .form-group:has(#valor_compra){ order: 10; }                      /* Valor | */
  .form-grid > .form-group:has(#valor_compra_total){ order: 10; }                /* | Total */
  .form-group.full                           { order: 11; grid-column: 1 / -1; } /* Descrição */

  /* Descrição / Simbologia: 6 linhas visíveis */
  #descricao,
  .desc-editor-wrap > textarea {
    min-height: 160px !important;
    height: 160px !important;
    flex: none !important;
  }

  /* Editor de descrição: stacked em vez de side-by-side */
  .desc-editor-wrap {
    flex-direction: column;
  }

  /* ── Fotos ───────────────────────────────────────────────── */
  .photos-grid {
    grid-template-columns: 1fr;
  }

  .photos-col-right { justify-self: stretch; }

  /* Capa: altura natural no mobile */
  .photos-col-left {
    height: auto;
    min-height: 0;
  }

  /*
   * Foto de capa no mobile: container com dimensões explícitas.
   * object-fit sem dimensões fixas no container é inconsistente em browsers mobile.
   */
  .thumb-cover {
    display: block;
    width: 160px;
    height: 120px;
    max-width: 100%;
  }
  .thumb-cover img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
  }

  /* Fotos adicionais: 2 por linha */
  .photos-col-right .thumbs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Espaço extra para a barra fixa não cobrir o botão SALVAR SOBRE */
  main {
    padding-bottom: 120px;
  }

  /* ── Botões de submit ────────────────────────────────────── */
  .card-body .btn { font-size: 0.78rem; }

  /* ── Multi-select dropdowns ──────────────────────────────── */
  .multi-select-menu {
    max-height: 200px;
    overflow-y: auto;
  }

  /* ── Página Sobre (card) ─────────────────────────────────── */
  #sobreCard .desc-editor-wrap {
    flex-direction: column;
  }
}

/* ── Multi-Check Dropdown (MCD) ───────────────────────────── */
.multi-check-dropdown {
  position: relative;
  width: 100%;
}

.mcd-trigger {
  width: 100%;
  padding: 5px 9px;
  background: var(--input-bg, #1e1e1e);
  border: 1px solid var(--input-border, #444);
  border-radius: 999px;
  color: var(--text, #ddd);
  cursor: pointer;
  text-align: left;
  font-size: 0.84rem;
  font-family: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.18s;
}

.mcd-trigger:hover { border-color: #c5975f; }

.mcd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: #1e1e1e;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 6px 0;
  min-width: 180px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

.mcd-panel.mcd-open { display: block; }

.mcd-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  font-size: 0.87rem;
  color: #ddd;
  transition: background 0.13s;
}

.mcd-opt:hover { background: rgba(197,151,95,0.12); }

.mcd-opt input[type="checkbox"],
.mcd-opt input[type="radio"] {
  accent-color: #c5975f;
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}


/* ── Centralização botões admin — mobile/tablet ──────────────
   Usa #actionsPanel (especificidade 1,0,0) para vencer os
   !important de classe (max 0,4,0) nas regras existentes.
   Botões: mesma largura proporcional, flex centralizado. */
@media (max-width: 1023px) {

  .admin-header.is-logged .header-center.header-center-logged {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* ID supera qualquer seletor de classe — flex centralizado */
  #actionsPanel {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Botões: largura fixa igual (1/3 menos gap) — especificidade 1,1,0 */
  #actionsPanel > button.btn,
  #actionsPanel > a.btn,
  #actionsPanel > .admin-actions-backup-buttons--dropdown {
    flex: 0 0 calc(33.33% - 6px) !important;
    width: calc(33.33% - 6px) !important;
    min-width: 0 !important;
  }

  /* Btn dentro do wrapper dropdown: 100% do wrapper */
  #actionsPanel .admin-actions-backup-buttons--dropdown .btn {
    width: 100% !important;
  }

  /* Btn direto no grid: mesma largura fixa — especificidade 1,1,0 vence 0,4,0 */
  #actionsPanel .btn {
    width: calc(33.33% - 6px) !important;
  }
}

/* Tablet: layout em coluna */
@media (min-width: 769px) and (max-width: 1023px) {
  .admin-header.is-logged {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 14px 8px !important;
    gap: 6px !important;
    position: relative !important;
  }
  .admin-header.is-logged .header-left {
    order: 1;
    width: 100%;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .admin-header.is-logged .header-center.header-center-logged { order: 2; }
  .admin-header.is-logged .header-search {
    order: 3; width: 100% !important; padding: 0 !important;
  }
  .admin-header.is-logged .mob-break,
  .admin-header.is-logged #adminLastAction,
  .admin-header.is-logged #backupStartedMsg,
  .admin-header.is-logged #adminActionStatus,
  .admin-header.is-logged #dbHealthMsg,
  .admin-header.is-logged .theme-toggle-in-grid { display: none !important; }
  /* Toggle no grid oculto; aparece na header-left.
     Especificidade 3,0,2 necessária para vencer display:flex !important */
  .admin-header.is-logged .admin-actions-grid button.btn.btn-tema-inline { display: none !important; }
  .admin-theme-mobile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--border-primary, rgba(197,151,95,0.20));
    background: var(--bg-secondary, #1a1a1a);
    color: var(--text-primary, #fff);
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
  }
}


/* ── Alertas de manutenção ───────────────────────────────── */
.manut-alert-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px;
  margin-bottom: 10px;
  background: rgba(197, 151, 95, 0.10);
  border: 1px solid rgba(197, 151, 95, 0.35);
  border-radius: 8px;
  font-size: 0.78rem;
  color: var(--gold-primary);
  font-weight: 500;
}

.manut-alert-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.manut-alert-icon { font-size: 1em; flex-shrink: 0; }

.manut-badge {
  font-size: 0.80em;
  margin-right: 2px;
  opacity: 0.5;
}

.manut-vencida { opacity: 1; color: #e8a455; }
.manut-nunca   { opacity: 0.6; }

.row-manut-alert td:nth-child(3) { color: var(--gold-light, #e8c87a); }


/* ── Menu ⋮ do header admin (página de login) ────────────── */
.admin-hdr-menu-wrap {
  position: relative;
  z-index: 50;
}

/* Botão circular — mesma aparência da página principal */
.admin-hdr-menu-trigger {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.admin-hdr-menu-trigger:hover {
  border-color: var(--gold-primary, #c5975f);
  background: rgba(197,151,95,0.10);
}

.admin-hdr-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  z-index: 999;
  overflow: hidden;
}

.admin-hdr-menu-dropdown.open { display: block; }

.admin-hdr-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  white-space: nowrap;
}

.admin-hdr-menu-item:last-child { border-bottom: none; }

.admin-hdr-menu-item:hover {
  background: rgba(197,151,95,0.10);
  color: var(--gold-primary);
}
@media (max-width: 1023px) {
  .admin-header.is-login .admin-logo-btn {
    width: 66px !important;
    height: 66px !important;
  }
  .admin-header.is-login .admin-logo-img {
    width: 54px !important;
    height: 54px !important;
  }
}