/* Table styles */
#result_list {
    width: 100%;
}

/* Icon styles */
.icon-yes img,
.icon-no img {
    width: 13px;
    height: 13px;
    margin-right: 4px;
    vertical-align: text-bottom;
}

.icon-yes {
    color: #30a030;
}

.icon-no {
    color: #ba2121;
}

/* Message list styles */
.messagelist {
    margin: 0 0 20px 0;
}

.messagelist .success,
.messagelist .error {
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 10px;
    border: 1px solid;
}

.messagelist .success {
    background-color: var(--message-success-bg, #d4edda);
    color: var(--message-success-fg, #155724);
    border-color: var(--message-success-border, #c3e6cb);
}

.messagelist .error {
    background-color: var(--message-error-bg, #f8d7da);
    color: var(--message-error-fg, #721c24);
    border-color: var(--message-error-border, #f5c6cb);
}

/* ===== INSTANCE OVERVIEW STYLES ===== */

.instance-stats {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.stat-item {
    text-align: center;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid var(--border-color, #ddd);
}

.stat-value {
    font-size: 18px;
    font-weight: bold;
    color: var(--link-fg, #417690);
}

.default-badge {
    background: var(--link-fg, #417690);
    color: var(--body-bg, white);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 5px;
}

.ttl-value {
    font-weight: bold;
    color: var(--link-fg, #417690);
}

/* ===== KEY SEARCH STYLES ===== */

.search-form {
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #ddd);
}

.search-form .form-row {
    margin: 0;
}

.search-form label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

.search-form .help {
    font-size: 11px;
    margin-top: 3px;
    opacity: 0.7;
}

/* Key type badges - used in both search and detail views */
.key-type {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    color: white;
}

.key-type-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    color: white;
}

/* Key type colors - consistent across templates */
.key-type-string {
    background-color: #28a745;
}

.key-type-list {
    background-color: #007bff;
}

.key-type-set {
    background-color: #ffc107;
}

.key-type-zset {
    background-color: #17a2b8;
}

.key-type-hash {
    background-color: #6f42c1;
}

.key-type-stream {
    background-color: #059669;
}

/* Alternative key type colors used in search view */
.key-search .key-type-string {
    background: #417690;
}

.key-search .key-type-list {
    background: #30a030;
}

.key-search .key-type-set {
    background: #e47911;
}

.key-search .key-type-zset {
    background: #7b68ee;
}

.key-search .key-type-hash {
    background: #dc2626;
}

/* ===== KEY DETAIL STYLES ===== */

.key-value-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.key-value-table th,
.key-value-table td {
    padding: 8px 12px;
    border: 1px solid var(--border-color, #ddd);
    text-align: left;
}

.key-value-table th {
    font-weight: bold;
    background-color: var(--darkened-bg, rgba(0, 0, 0, 0.05));
}

.key-value-table tbody tr:nth-child(even) {
    background-color: var(--darkened-bg, rgba(0, 0, 0, 0.02));
}

.key-value-table code {
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    background-color: var(--darkened-bg, rgba(0, 0, 0, 0.05));
}

.string-value-field {
    width: 100%;
    rows: 5;
}

.readonly {
    padding: 8px 0;
}

.readonly code {
    padding: 4px 8px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 13px;
    background-color: var(--darkened-bg, rgba(0, 0, 0, 0.05));
}

.danger-zone {
    border: 2px solid #dc3545;
    border-radius: 4px;
    background-color: var(--error-bg, rgba(220, 53, 69, 0.1));
}

.danger-zone h2 {
    color: #dc3545;
}

.field-box {
    margin-bottom: 15px;
}

.submit-row {
    margin-top: 10px;
}

.key-value-display h3 {
    margin: 0 0 15px 0;
    opacity: 0.8;
}

/* Delete button styling to match Django admin */
.delete-button {
    background-color: #ba2121 !important;
    color: white !important;
    border-color: #ba2121 !important;
}

.delete-button:hover,
.delete-button:focus {
    background-color: #a41e1e !important;
    border-color: #a41e1e !important;
    color: white !important;
}

/* Disabled delete button styling */
.delete-button:disabled {
    background-color: #ba2121 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: #ba2121 !important;
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

.delete-button:disabled:hover,
.delete-button:disabled:focus {
    background-color: #ba2121 !important;
    border-color: #ba2121 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 0.6 !important;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .delete-button {
        background-color: #cc2936 !important;
        border-color: #cc2936 !important;
    }

    .delete-button:hover,
    .delete-button:focus {
        background-color: #b02329 !important;
        border-color: #b02329 !important;
    }

    .delete-button:disabled {
        background-color: #cc2936 !important;
        border-color: #cc2936 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        opacity: 0.6 !important;
    }

    .delete-button:disabled:hover,
    .delete-button:disabled:focus {
        background-color: #cc2936 !important;
        border-color: #cc2936 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        opacity: 0.6 !important;
    }
}

/* Pagination Mode Indicator Styles */
.pagination-mode-indicator {
    margin-bottom: 10px;
}

.pagination-mode-indicator .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pagination-mode-indicator .badge.cursor-mode {
    background-color: #2196F3;
    color: white;
}

.pagination-mode-indicator .badge.page-mode {
    background-color: #4CAF50;
    color: white;
}

/* Dark mode support for badges */
@media (prefers-color-scheme: dark) {
    .pagination-mode-indicator .badge.cursor-mode {
        background-color: #1976D2;
    }

    .pagination-mode-indicator .badge.page-mode {
        background-color: #388E3C;
    }
}

/* Search Form Alignment Styles */
.search-form-row {
    margin-bottom: 15px;
}

.search-form-fields {
    display: flex;
    gap: 15px;
    align-items: end;
    margin-bottom: 5px;
}

.search-field-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.search-field-group label {
    font-weight: bold;
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 3px;
    white-space: nowrap;
}

.search-field-group input[type="text"],
.search-field-group select {
    height: 32px;
    box-sizing: border-box;
}

.search-field-group select {
    min-width: 80px;
    padding: 6px 8px;
}

.search-field-group input[type="submit"] {
    height: 32px;
    padding: 6px 15px;
    box-sizing: border-box;
}

.search-help {
    margin-left: 0;
    margin-top: 5px;
}

.search-help .help {
    margin: 0;
    color: #666;
    font-size: 11px;
    font-style: italic;
}
