/* ── CSS theme variables ─────────────────────────────────────────────────── */

/*:root {
    --bg-primary:    #f5f5f5;
    --bg-card:       #ffffff;
    --bg-card-hover: #fde9d4;
    --text-primary:  #1a1a1a;
    --text-secondary:#6b7280;
    --border-color:  #e5e7eb;
    --icon-bg:       #fde9d4;
    --icon-color:    #f97316;
    --selected-border: #f97316;
    --transition:    background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.theme-dark {
    --bg-primary:    #121212;
    --bg-card:       #1e1e1e;
    --bg-card-hover: #2a2a2a;
    --text-primary:  #f1f1f1;
    --text-secondary:#9ca3af;
    --border-color:  #2e2e2e;
    --icon-bg:       #2a2a2a;
    --icon-color:    #f97316;
    --selected-border: #f97316;
}

body {
    background-color: var(--bg-primary);
    color:            var(--text-primary);
    transition:       var(--transition);
}*/

/* ── Theme settings page ─────────────────────────────────────────────────── */

/*.theme-settings-page {
    padding: 16px;
}

.theme-settings-page h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.theme-settings-page .grey-txt {
    color: var(--text-secondary);
    font-size: 0.875rem;
}*/

/* ── Theme option list ───────────────────────────────────────────────────── */

/*.theme-option-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}*/

/* ── Individual theme card ───────────────────────────────────────────────── */

/*.theme-card {
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         16px;
    border-radius:   14px;
    background:      var(--bg-card-hover);
    border:          2px solid transparent;
    cursor:          pointer;
    transition:      var(--transition), border-color 0.2s ease, box-shadow 0.2s ease;
    user-select:     none;
    -webkit-tap-highlight-color: transparent;
}

.theme-card:hover {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}*/

/* Selected state — white background + orange border (matches screenshot) */
/*.theme-card.selected {
    background:   var(--bg-card);
    border-color: var(--selected-border);
    box-shadow:   0 2px 12px rgba(249, 115, 22, 0.15);
}*/

/* ── Icon circle ─────────────────────────────────────────────────────────── */

/*.theme-icon-wrap {
    width:           44px;
    height:          44px;
    min-width:       44px;
    border-radius:   50%;
    background:      var(--icon-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.2rem;
    color:           var(--icon-color);
    transition:      var(--transition);
}*/

/* ── Card text ───────────────────────────────────────────────────────────── */

/*.theme-card-body {
    flex: 1;
}

.theme-card-body h4 {
    font-size:   1rem;
    font-weight: 600;
    color:       var(--text-primary);
    margin:      0 0 2px;
    transition:  var(--transition);
}

.theme-card-body p {
    font-size:  0.8125rem;
    color:      var(--text-secondary);
    margin:     0;
    transition: var(--transition);
}*/

/* ── Check icon — hidden unless card is selected ─────────────────────────── */

/*.theme-check {
    width:    38px;
    min-width:38px;
}

.theme-card .selected-icon {
    display: none;
}

.theme-card.selected .selected-icon {
    display: block;
}*/

.resend-link {
    color:#f56700
}

/* ── Offline feature styles ──────────────────────────────────────────────── */

.badge-offline {
    background: #e8f4fd;
    color:      #1a73e8;
    border:     1px solid #aed6f1;
}

/* Top indicator bar shown when device is offline */
.offline-indicator-bar {
    background:  #f44336;
    color:       #fff;
    text-align:  center;
    padding:     8px 15px;
    font-size:   13px;
    font-weight: 500;
    position:    sticky;
    top:         50px;
    z-index:     99;
}

/* Counter banner below the search bar */
.offline-limit-banner {
    background:    #fff8e1;
    border-left:   4px solid #f57c00;
    color:         #795548;
    padding:       8px 12px;
    font-size:     13px;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* Sync status badges on cards */
.sync-status-badge {
    font-size: 11px;
}