/* Fjern number input spinners */
input.no-spinners::-webkit-inner-spin-button,
input.no-spinners::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.no-spinners {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================
   Admin skærm
   ============================================ */
.admin-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.admin-header h1 {
    font-size: 28px;
    margin: 0;
}

.admin-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.admin-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}

.tab-btn {
    padding: 12px 18px 12px 0;
    font-size: 20px;
    font-weight: bold;
    border: 2px solid #999;
    border-radius: 10px 10px 0 0;
    background: #ddd;
    cursor: pointer;
    touch-action: manipulation;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.tab-btn .tab-icon {
    font-size: 22px;
    line-height: 1;
}

.tab-btn .tab-icon-img {
    height: 20px;
    width: 20px;
    object-fit: contain;
    margin-right: 3px;
}

.tab-active {
    background: #fff;
    border-bottom-color: #fff;
}

/* Sub-faner på Konfigurations-siden — mindre end de primære admin-faner men
   med samme markante grå kant og baggrund så de tydeligt læses som faner. */
.config-subtabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid #999;
}

.config-subtab-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid #999;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background: #ddd;
    color: #555;
    cursor: pointer;
    margin-bottom: -2px;
    touch-action: manipulation;
}

.config-subtab-btn:hover {
    background: #ccc;
}

.config-subtab-btn.active {
    background: #fff;
    color: #1565C0;
    border-bottom: 2px solid #fff;
}

.admin-content {
    flex: 1;
    display: flex;
    gap: 15px;
    overflow: auto;
}

/* RFID panel */
.member-list-panel {
    flex: 0 0 33%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.member-list-panel h2 {
    font-size: 20px;
    margin: 0 0 8px;
}

.member-list-scroll {
    flex: 1;
    overflow-y: auto;
    border: 2px solid #ccc;
    border-radius: 10px;
    background: #f5f5f5;
    padding: 5px;
}

.member-list-scroll::-webkit-scrollbar {
    width: 36px;
}

.member-list-scroll::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
}

.member-list-scroll::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
    border: 4px solid #e0e0e0;
}

.member-list-scroll::-webkit-scrollbar-thumb:active {
    background: #666;
}

.member-list-item {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 5px 10px;
    cursor: pointer;
    touch-action: manipulation;
}

.member-list-item:hover {
    background: #e3f2fd;
    transition: background 0.1s;
}

.member-list-item:active {
    background: #eef;
}

.member-selected {
    border-color: var(--color-success) !important;
    background: var(--color-success-light) !important;
}

.member-list-name {
    font-size: 20px;
    font-weight: bold;
}

.member-list-rfid {
    font-size: 16px;
    color: #666;
    margin-top: 3px;
}

/* Medlemslisten som standard-tabel (.data-table) i stedet for de gamle
   .member-list-item-kort. Beholder .member-list-scroll's højde/scroll-opførsel
   men giver hvid baggrund, ingen indre padding og sticky grå kolonneoverskrifter. */
.member-list-table-scroll {
    padding: 0;
    background: #fff;
}
.member-list-table-scroll .data-table {
    border-collapse: separate;
    border-spacing: 0;
}
.member-list-table-scroll .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7f9fb;
    box-shadow: inset 0 -1px 0 #d4dae1;
}
/* Pills i markeringskolonnen maa wrappe i den smalle kolonne. */
.member-list-table .badge,
.member-list-table td span[class$="-badge"] {
    display: inline-block;
    margin: 1px 2px;
}

/* Søgefelt */
.search-box {
    position: relative;
    margin-bottom: 8px;
}

.search-input {
    width: 100%;
    padding: 12px 40px 12px 15px;
    font-size: 20px;
    border: 2px solid #ccc;
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
}

.search-input:focus {
    border-color: var(--color-success);
}

.search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 5px;
    touch-action: manipulation;
}

.rfid-action-panel {
    flex: 2;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    overflow-y: auto;
    min-width: 0;
}

.rfid-action-panel h2 {
    font-size: 22px;
    margin: 0 0 15px;
}

.rfid-instruction {
    font-size: 22px;
    color: #666;
    text-align: center;
}

.rfid-waiting {
    color: #3a8fd4;
    font-weight: bold;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* On-screen keyboard */
.onscreen-keyboard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.kb-row {
    display: flex;
    gap: 7px;
    justify-content: center;
}

.kb-key {
    min-width: 81px;
    height: 94px;
    font-size: 38px;
    font-weight: bold;
    border: 2px solid #999;
    border-radius: 8px;
    background: linear-gradient(145deg, #e8e8e8, #c8c8c8);
    cursor: pointer;
    touch-action: manipulation;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.kb-key:active {
    background: linear-gradient(145deg, #c8c8c8, #aaa);
}

.kb-special {
    min-width: 160px;
    font-size: 24px;
    background: linear-gradient(145deg, #d5d5d5, #bbb);
}

.kb-clear {
    background: linear-gradient(145deg, #f0b0b0, #d88);
    color: #633;
}

/* Admin medlem-aktivitet */
.member-activity-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 12px;
}

.member-activity-section h3 {
    font-size: 18px;
    margin: 0 0 8px;
}

.admin-print-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.admin-print-buttons .btn-print {
    padding: 10px 15px;
    font-size: 16px;
}

.member-activity-list {
    flex: 1;
    overflow-y: auto;
    max-height: 350px;
    border: 2px solid #ccc;
    border-radius: 10px;
    background: #f5f5f5;
    padding: 5px;
}

.member-activity-list::-webkit-scrollbar {
    width: 42px;
}

.member-activity-list::-webkit-scrollbar-track {
    background: #ccc;
    border-radius: 10px;
}

.member-activity-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
    border: 5px solid #ccc;
}

.member-activity-list::-webkit-scrollbar-thumb:active {
    background: #555;
}

/* Log viewer */
.log-viewer {
    flex: 1;
    overflow-y: auto;
    border: 2px solid #ccc;
    border-radius: 10px;
    background: #1e1e1e;
    padding: 10px;
    font-family: 'Consolas', 'Courier New', monospace;
    width: 100%;
}

.log-entry {
    padding: 4px 8px;
    font-size: 14px;
    border-bottom: 1px solid #333;
    color: #ccc;
}

.log-info { color: #ccc; }
.log-advarsel { color: #ffa500; }
.log-fejl { color: #ff6b6b; }

.log-time {
    color: #888;
    margin-right: 10px;
}

.log-level {
    font-weight: bold;
    margin-right: 10px;
}

/* Admin footer */
.admin-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
}

.admin-footer-left {
    display: flex;
    gap: 10px;
}

.admin-footer-right {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* ---- Scrollbar styling for touch ---- */
::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--scrollbar-radius);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--scrollbar-radius);
}

::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
}

/* ---- Admin member list header ---- */
.member-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.member-list-header h2 {
    margin: 0;
}

.member-list-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    width: 36px;
    height: 36px;
    cursor: pointer;
    flex-shrink: 0;
}

.sync-status {
    font-size: 0.78rem;
    color: #666;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sync-btn {
    padding: 2px 8px;
    font-size: 11px;
    border: 1px solid #4caf50;
    border-radius: 4px;
    background: #fff;
    color: var(--color-success);
    cursor: pointer;
    font-weight: 500;
}

.sync-btn:hover {
    background: #f0fff0;
}

.sync-btn.sync-btn-disabled {
    border-color: #ccc;
    color: #999;
    cursor: not-allowed;
}

/* ---- Deleted members ---- */
.member-deleted {
    opacity: 0.5;
    background: #f5f5f5 !important;
    font-style: italic;
}

.deleted-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #e0e0e0;
    color: #888;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
}

.admin-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #cc5555;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.heavy-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #8b5a2b;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.officer-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #6b8e23;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.admin-status-label {
    color: #2a6bb5;
    font-weight: bold;
    margin-bottom: 8px;
}

.import-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid #ddd;
    border-top-color: #4caf50;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.member-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.member-header-bar h1 {
    margin: 0;
}

.member-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.member-checkin-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.detail-action-btn {
    padding: 3px 10px;
    font-size: 13px;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    background: #fff;
}

.detail-action-green {
    color: var(--color-success);
    border-color: var(--color-success);
}

.detail-action-green:hover {
    background: #f0fff0;
}

.detail-action-red {
    color: #cc5555;
    border-color: #cc5555;
}

.detail-action-red:hover {
    background: #fff0f0;
}

.member-detail-columns {
    display: flex;
    gap: 20px;
}

.member-detail-left {
    flex: 0 0 auto;
    min-width: 430px;
    max-width: 570px;
}

.member-detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.member-detail-right .member-activity-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.member-detail-right .member-activity-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* "Under-rækken" på medlems-detalje — Våbenudlån, SKV, Salg, Skabsleje, Adgang
   til huset. Samme bredde som left-kolonnen ovenover (uden at flex'e med højre). */
.member-detail-narrow {
    max-width: 570px;
    margin-top: 16px;
}

.detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.detail-table th {
    padding: 5px 10px;
    text-align: left;
    font-size: 13px;
    color: #666;
    border-bottom: 2px solid #ddd;
    background: #ebebeb;
}

.weapon-row {
    transition: background 0.1s;
}

.weapon-row:hover {
    background: #e3f2fd;
}

.detail-table td {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
    white-space: pre-wrap;
}

.detail-table tr:last-child td {
    border-bottom: none;
}

.detail-table tr.skv-expired {
    opacity: 0.5;
}

.member-profile-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 8px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 12px;
}

.profile-image-container {
    width: 120px;
    height: 160px;
    flex: 0 0 120px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    border: 2px solid #ddd;
    background: #f5f5f5;
}

.profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-align: center;
    font-size: 11px;
    padding: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-image-container:hover .profile-image-overlay {
    opacity: 1;
}

.profile-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    gap: 4px;
}

.profile-image-icon {
    font-size: 32px;
}

.profile-image-text {
    font-size: 11px;
}

.detail-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
    margin: 4px 0;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-label {
    width: 255px;
    flex: 0 0 255px;
    font-weight: bold;
}

.detail-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-status {
    display: inline-block;
    min-width: 28px;
}

.kiosk-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.kiosk-toggle-label {
    font-size: 13px;
    color: #555;
}

.kiosk-toggle-switch {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    position: relative;
    transition: background 0.2s;
}

.kiosk-toggle-switch.kiosk-on {
    background: var(--color-success);
}

.kiosk-toggle-switch.kiosk-off {
    background: #cc5555;
}

/* Farven på en toggle skal fortælle om tilstanden er god eller dårlig — ikke om
   kontakten er slået til. Default ("til" = grøn) passer på de fleste, fx "Har NFC"
   eller "Er admin", hvor til er det positive.
   Men på "Våbnet er defekt" er "ja" netop det dårlige, og en grøn toggle ved siden
   af ordet "Ja" fik kassevagter til at tvivle på hvad de havde slået til.
   kiosk-invert vender KUN farven — knoppens placering styres fortsat af
   kiosk-on/kiosk-off, så kontakten stadig peger den rigtige vej. */
.kiosk-toggle-switch.kiosk-invert.kiosk-on {
    background: #cc5555;
}
.kiosk-toggle-switch.kiosk-invert.kiosk-off {
    background: var(--color-success);
}

.kiosk-toggle-knob {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    transition: left 0.2s;
}

.kiosk-on .kiosk-toggle-knob {
    left: 20px;
}

.kiosk-off .kiosk-toggle-knob {
    left: 2px;
}

.admin-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.admin-user-name {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
}

.version-badge {
    font-size: 11px;
    color: #888;
    font-family: 'Consolas', 'Courier New', monospace;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    padding: 2px 4px;
    border-radius: 3px;
}

.version-badge:hover {
    color: #333;
    background: #f0f0f0;
}

.list-count {
    font-size: 13px;
    color: #333;
    padding: 2px 4px;
    text-align: right;
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 0;
    flex: 1;
}

.filter-label {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    align-self: center;
}

.filter-pill {
    padding: 4px 12px;
    font-size: 12px;
    border: 1.5px solid;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.15s;
}

/* Inaktive (nedtonede) default-farver per type */
.filter-pill.fp-admin  { background: #fce8e8; color: #cc5555; border-color: #e8aaaa; }
.filter-pill.fp-rfid   { background: #e8f2fb; color: #5b9bd5; border-color: #aad0ee; }
.filter-pill.fp-intro  { background: #e8f5e6; color: #5a9a4e; border-color: #b0daa8; }
.filter-pill.fp-loan   { background: #fdf4e0; color: #b8880f; border-color: #e8cc7a; }
.filter-pill.fp-skv    { background: #f3eaf8; color: #9b59b6; border-color: #c9a5db; }
.filter-pill.fp-defect { background: #fce8e8; color: #cc5555; border-color: #e8aaaa; }
.filter-pill.fp-muted  { background: #f0f0f0; color: #999;    border-color: #ccc; }

/* Aktive (fulde farver) */
.filter-pill.pill-admin { background: #cc5555; color: #fff; border-color: #cc5555; }
.filter-pill.pill-rfid  { background: #5b9bd5; color: #fff; border-color: #5b9bd5; }
.filter-pill.pill-intro { background: #6bba5e; color: #fff; border-color: #6bba5e; }
.filter-pill.pill-loan  { background: #d4a017; color: #fff; border-color: #d4a017; }
.filter-pill.pill-skv   { background: #9b59b6; color: #fff; border-color: #9b59b6; }
.filter-pill.pill-defect { background: #cc5555; color: #fff; border-color: #cc5555; }
.filter-pill.fp-caliber { background: #e8eff5; color: #3a6d99; border-color: #a8c4de; }
.filter-pill.pill-caliber { background: #3a6d99; color: #fff; border-color: #3a6d99; }

.filter-pill.pill-muted { background: #999;    color: #fff; border-color: #999;
}

.member-properties {
    display: flex;
    gap: 16px;
    margin: 8px 0;
}

.rfid-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #5b9bd5;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.checkin-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #34495e;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
    white-space: nowrap;
}

.loan-active-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #d4a017;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.intro-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #6bba5e;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

/* Kassevagt-pill på medlemmer. Mørk rødlig orange — signalerer flere rettigheder
   end et menigt medlem (men mindre end admin-rød). Adskilt fra "Lånt våben"-guld. */
.cashier-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #d35400;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

/* Holdnavn-pill på prøveskytter (fx "aug 2026"). Vises lige efter Prøveskytte-
   pill'en. Teal-farve så den skiller sig ud fra de øvrige badges. */
.team-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #0d8a8a;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.skv2-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #9b59b6;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.skv-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #9b59b6;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.member-skv-section {
    margin-bottom: 16px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 12px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.section-header h2,
.section-header h3 {
    margin: 0;
}

.section-action-btn {
    padding: 5px 16px;
    font-size: 13px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    background: var(--color-success);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
}

.qty-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: #f0f0f0;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    color: #333;
}

.qty-btn:hover {
    background: #ddd;
}

.qty-btn:active {
    background: #ccc;
}

.qty-input {
    width: 44px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    padding: 4px 0;
    height: 32px;
    -moz-appearance: textfield;
    outline: none;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner {
    -moz-appearance: textfield;
}

.section-action-btn:hover {
    background: #43a047;
}

.member-skv-section h3 {
    margin: 0 0 4px 0;
    font-size: 15px;
}

.member-skv-section .empty-message {
    margin: 0;
    padding: 16px;
    font-size: 16px;
}

.member-skv-section .btn-rect-md {
    margin-top: 4px;
}

.skv-list {
    margin: 4px 0;
}

.skv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #e0e0e0;
}

.skv-item.skv-expired {
    opacity: 0.5;
}

.skv-type {
    font-weight: bold;
    min-width: 50px;
}

.skv-expired-label {
    color: #cc5555;
    font-weight: bold;
    font-size: 0.8rem;
}

.btn-inline {
    padding: 4px 12px;
    font-size: 0.8rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.btn-delete-inline {
    background: #cc5555;
    color: #fff;
}

.btn-return-inline {
    background: #5a9a4e;
    color: #fff;
}

.skv-add-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.skv-add-form select,
.skv-add-form input[type="date"] {
    padding: 6px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.defect-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #cc5555;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
    font-weight: bold;
}

.weapon-caliber-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #555;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-style: normal;
}

.weapon-list-panel {
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.active-loans-panel {
    padding: 12px;
    overflow-y: auto;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
}

.loan-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loan-item {
    padding: 8px 12px;
    background: #f0f7ff;
    border: 1px solid #cce0ff;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.loan-item.loan-offsite {
    background: #fff5e6;
    border-color: #ffd699;
}

.loan-weapon {
    flex: 1;
    min-width: 200px;
}

.totp-numpad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 12px 0;
}

.totp-numpad-row {
    display: flex;
    gap: 6px;
}

.totp-numpad-btn {
    width: 70px;
    height: 56px;
    font-size: 24px;
    font-weight: bold;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #f5f5f5;
    cursor: pointer;
}

.totp-numpad-btn:active {
    background: #ddd;
}

.totp-numpad-delete {
    width: 70px;
}

.loan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.loan-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.9rem;
    width: 100%;
}

.loan-note {
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    width: 100%;
}

.offsite-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72rem;
    background: #e67e22;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: bold;
}

.btn-green-small {
    background: var(--color-success);
    color: #fff;
}

.loan-select-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.loan-select-item:hover {
    background: #f0f0f0;
}

.loan-select-active {
    background: #d4edda !important;
    font-weight: bold;
}

/* Dokumentation (markdown) */
.docs-content h1 { font-size: 1.6rem; margin: 24px 0 12px; border-bottom: 2px solid #ddd; padding-bottom: 6px; }
.docs-content h2 { font-size: 1.3rem; margin: 20px 0 8px; border-bottom: 1px solid #eee; padding-bottom: 4px; }
.docs-content h3 { font-size: 1.1rem; margin: 16px 0 6px; }
.docs-content h4 { font-size: 1rem; margin: 12px 0 4px; }
.docs-content p { margin: 6px 0; }
.docs-content ul, .docs-content ol { margin: 6px 0 6px 20px; }
.docs-content li { margin: 2px 0; }
.docs-content table { border-collapse: collapse; margin: 8px 0; width: 100%; }
.docs-content th, .docs-content td { border: 1px solid #ddd; padding: 6px 10px; text-align: left; }
.docs-content th { background: #f5f5f5; font-weight: bold; }
.docs-content blockquote { border-left: 3px solid #ffc107; background: #fff8e1; padding: 8px 12px; margin: 8px 0; }
.docs-content code { background: #f0f0f0; padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }
.docs-content pre { background: #f5f5f5; padding: 12px; border-radius: 6px; overflow-x: auto; }
.docs-content pre code { background: none; padding: 0; }
.docs-content hr { border: none; border-top: 1px solid #ddd; margin: 16px 0; }
.docs-content a { color: #1976d2; }


/* Tabel-agtigt 2-kolonne layout til dialog-formularer:
   labels venstre (auto bredde, højrejusteret), inputs højre (med min-bredde).
   Inputs sætter selv deres faktiske bredde via inline width.
   Ekstra hint-tekst kan bruge .form-hint efter input. */
.form-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    align-items: center;
    margin: 12px 0;
    text-align: left;
}
.form-grid > label {
    grid-column: 1;
    text-align: right;
    font-weight: 500;
    white-space: nowrap;
}
.form-grid > .form-input {
    grid-column: 2;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-grid input,
.form-grid select {
    padding: 6px;
    font-size: 1rem;
}
.form-hint {
    color: #666;
    font-size: 0.85rem;
}

/* Filter-dropdown: multi-select dropdown med checkboxes.
   Bruges til filtrering med mange mulige vaerdier (kaliber, lokation osv.). */
.filter-dropdown {
    position: relative;
    display: inline-block;
}
.filter-dropdown-btn {
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
}
.filter-dropdown-btn:hover {
    border-color: #888;
    background: #f5f5f5;
}
.filter-dropdown-btn.has-selection {
    background: #e3f2fd;
    border-color: #2196F3;
    font-weight: 600;
}
.filter-dropdown-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}
.filter-dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 6px 0;
    min-width: 160px;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 2px;
}
.filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}
.filter-dropdown-item:hover {
    background: #e3f2fd;
}

/* "Nulstil filter" øverst i en multi-select filter-dropdown.
   Altid synlig — var den kun der når noget var valgt, ville den dukke op i det
   øjeblik man klikkede den første valgmulighed af og skubbe hele listen en række
   ned, så det næste klik ramte den forkerte linje. Det var reelt en fælde når man
   skulle vælge to naboliggende værdier.
   Dæmpet når intet er valgt: den er inaktiv, men rækken fylder præcis det samme. */
.filter-dropdown-reset {
    color: #1565c0;
    font-weight: 600;
    border-bottom: 1px solid #eee;
}
.filter-dropdown-reset.is-empty {
    color: #9aa0a6;
    cursor: default;
}
.filter-dropdown-reset.is-empty:hover {
    background: transparent;
}

/* Pill-choice: raekke af knapper hvor kun én kan vaere valgt.
   Bruges som visuelt alternativ til select-dropdown naar der er faa (typisk 2-3) muligheder. */
.pill-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.pill-choice-btn {
    background: #fff;
    border: 1px solid #bbb;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}
.pill-choice-btn:hover {
    border-color: #888;
    background: #f5f5f5;
}
.pill-choice-btn.pill-choice-selected {
    background: #d6d6d6;
    border-color: #666;
    font-weight: 600;
}
.form-required {
    color: #d32f2f;
    margin-left: 2px;
    font-weight: bold;
}

/* Søge-resultatliste i fx Opret salg — tydelig liste med hover */
.search-results-list {
    max-width: 320px;
    max-height: 200px;
    overflow-y: auto;
    background: #f8f9fa;
    border: 1px solid #b0bec5;
    border-radius: 4px;
    margin-top: 4px;
    text-align: left;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.search-result-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.1s;
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-item:hover,
.search-result-item:focus {
    background: #e3f2fd;
    outline: 2px solid #1565C0;
    outline-offset: -2px;
}
.search-result-item-trial {
    color: #2e7d32;
    font-style: italic;
}

/* Overskrift/sumlinje i kontoplanen (Konfiguration -> Kontoplan). */
.data-table tr.account-heading td {
    font-weight: 700;
    background: #f3f5f8;
}

/* Fakturering: linjer i opret/rediger-dialogen (Tekst | Antal | Stykpris | Fast pris | Beløb | knapper). */
.invoice-lines-grid {
    display: grid;
    grid-template-columns: 1fr 80px 100px 110px 110px auto;
    gap: 6px 10px;
    align-items: start;
}
.invoice-lines-grid .invoice-lines-head {
    font-size: 12px;
    font-weight: 600;
    color: #5b6272;
}
.invoice-lines-grid textarea,
.invoice-lines-grid input {
    width: 100%;
    box-sizing: border-box;
}
.invoice-lines-grid input[type=number] { text-align: right; }
.invoice-lines-grid .invoice-line-amount {
    text-align: right;
    padding-top: 6px;
    font-variant-numeric: tabular-nums;
}
.invoice-lines-grid .invoice-line-actions {
    display: flex;
    gap: 4px;
    padding-top: 2px;
    white-space: nowrap;
}

/* Fakturering: badge til "Ændret" og "Ved ikke". */
.badge-warning { background: #fff4e5; color: #b26a00; }

/* Fakturering: udfoldet før/efter-tekst i fakturaens log. */
.invoice-log-details {
    white-space: pre-wrap;
    margin-top: 6px;
    padding: 6px 8px;
    background: #f6f7fb;
    border-left: 3px solid #d5d9e2;
    font-size: 12px;
}

/* Faktura-mail: lille WYSIWYG-editor (RichTextEditor.razor) */
.richtext-toolbar { display:flex; gap:4px; margin-bottom:4px; }
.richtext-toolbar button { padding:2px 8px; border:1px solid #ccc; background:#fff; border-radius:4px; cursor:pointer; }
.richtext-editor { min-height:220px; max-height:420px; overflow-y:auto; border:1px solid #ccc; border-radius:4px; padding:8px 10px; background:#fff; }
.richtext-editor:focus { outline:2px solid #90caf9; }