/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Timezone Converter — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Source datetime inputs row ──────────────────────────────────────────────── */
.tz-source-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

@media (max-width: 480px) {
    .tz-source-grid {
        grid-template-columns: 1fr;
    }
}

.tz-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tz-input-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tz-datetime-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.9375rem;
    color: var(--text);
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.tz-datetime-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── From timezone row ───────────────────────────────────────────────────────── */
.tz-from-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.tz-from-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.tz-from-select {
    flex: 1;
    min-width: 200px;
    padding: 0.5625rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.tz-from-select:focus {
    outline: none;
    border-color: var(--accent);
}

.set-now-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: transparent;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.set-now-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ── Add timezone row ────────────────────────────────────────────────────────── */
.tz-add-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.tz-add-select {
    flex: 1;
    min-width: 200px;
    padding: 0.5625rem 0.875rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.9rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.tz-add-select:focus {
    outline: none;
    border-color: var(--accent);
}

.tz-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5625rem 1.125rem;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    white-space: nowrap;
}

.tz-add-btn:hover:not(:disabled) {
    opacity: 0.88;
}

.tz-add-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tz-add-btn-icon {
    font-size: 1.1rem;
    line-height: 1;
    font-style: normal;
}

/* ── Quick-add pills ─────────────────────────────────────────────────────────── */
.tz-quick-add-section {
    margin-bottom: 1.375rem;
}

.tz-quick-add-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
}

.quick-add-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
}

.quick-add-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.625rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--card-bg, #fff);
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
}

.quick-add-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: #fff5f1;
}

/* ── Timezone row cards ──────────────────────────────────────────────────────── */
#tz-rows-container {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.tz-row-card {
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.125rem;
    transition: box-shadow 0.15s;
}

.tz-row-card:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}

.tz-row-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.tz-city-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text);
    min-width: 100px;
    flex-shrink: 0;
}

.tz-row-select {
    flex: 1;
    min-width: 160px;
    padding: 0.375rem 0.625rem;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.8125rem;
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.15s;
}

.tz-row-select:focus {
    outline: none;
    border-color: var(--accent);
}

.tz-remove-btn {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    background: transparent;
    font-size: 1rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.tz-remove-btn:hover {
    border-color: #e53e3e;
    color: #e53e3e;
    background: #fff5f5;
}

/* ── Large time display ──────────────────────────────────────────────────────── */
.tz-time-block {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.tz-time-display {
    font-family: 'IBM Plex Serif', serif;
    font-size: 2.625rem;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.01em;
    line-height: 1;
}

.tz-ampm {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    letter-spacing: 0.04em;
    align-self: flex-end;
    padding-bottom: 0.2rem;
}

.tz-date-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
    background: #f0efec;
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
    align-self: flex-end;
    margin-bottom: 0.25rem;
}

/* ── Row footer: UTC offset badge ────────────────────────────────────────────── */
.tz-row-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tz-offset-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5625rem;
    border-radius: 999px;
    background: #E2E4E8;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.03em;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
#tz-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--muted);
    font-size: 0.9375rem;
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    margin-bottom: 1rem;
}

#tz-empty-state p {
    margin: 0;
}

/* ── Meeting quality indicator ───────────────────────────────────────────────── */
.meeting-quality-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.meeting-quality-badge .mq-icon {
    font-size: 1rem;
    line-height: 1;
}

.meeting-quality-badge .mq-label {
    flex: 1;
}

.mq-green {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    color: #166534;
}

.mq-yellow {
    background: #fefce8;
    border: 1.5px solid #fde047;
    color: #713f12;
}

.mq-red {
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    color: #7f1d1d;
}

/* ── Section divider between source and rows ─────────────────────────────────── */
.tz-divider {
    height: 1px;
    background: var(--border);
    margin: 1.125rem 0;
}

/* ── Row count hint ──────────────────────────────────────────────────────────── */
.tz-row-count-hint {
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.625rem;
    display: block;
}

/* cache-buster: 2026-05-24T05:06:05Z */