/* Time Module Styles - Midnight Aurora Edition */

.time-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px;
}

/* Header */
.time-header {
    background: linear-gradient(135deg, #a855f7, #10b981);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 32px;
    color: white;
    text-align: center;
}

/* Country Grid */
.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.country-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.country-card:hover {
    transform: translateY(-5px);
    border-color: #a855f7;
    box-shadow: 0 10px 25px rgba(168,85,247,0.2);
}

.country-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.country-flag {
    font-size: 2.5rem;
}

.country-name {
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
}

.country-code {
    color: #6b7280;
    font-size: 0.9rem;
}

.timezone-list {
    margin-top: 15px;
    border-top: 1px solid #e5e7eb;
    padding-top: 15px;
}

.timezone-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    color: #4b5563;
}

.timezone-item:hover {
    color: #10b981;
}

/* Filters */
.filter-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

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

.filter-select {
    padding: 10px 15px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.filter-select:focus {
    border-color: #a855f7;
    outline: none;
}

/* Calendar */
.calendar-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-top: 30px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 15px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.calendar-day:hover {
    background: linear-gradient(135deg, #10b981, #a855f7);
    color: white;
    transform: scale(1.05);
}

.calendar-day.today {
    background: linear-gradient(135deg, #10b981, #a855f7);
    color: white;
    font-weight: 600;
}

/* Insights */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.insight-card {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.insight-card h4 {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.insight-card .value {
    font-size: 2rem;
    font-weight: 700;
    color: #10b981;
}

/* ===== DARK MODE - TIME ===== */
html.dark-mode .country-card { background: #1e293b; border-color: #334155; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
html.dark-mode .country-card:hover { border-color: #a855f7; box-shadow: 0 10px 25px rgba(168,85,247,0.3); }
html.dark-mode .country-name { color: #f1f5f9; }
html.dark-mode .country-code { color: #94a3b8; }
html.dark-mode .timezone-list { border-top-color: #334155; }
html.dark-mode .timezone-item { color: #cbd5e1; }
html.dark-mode .timezone-item:hover { color: #34d399; }
html.dark-mode .filter-section { background: #1e293b; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
html.dark-mode .filter-select { background: #0f172a; border-color: #334155; color: #e2e8f0; }
html.dark-mode .filter-select:focus { border-color: #a855f7; }
html.dark-mode .calendar-section { background: #1e293b; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
html.dark-mode .calendar-day { background: #334155; color: #cbd5e1; }
html.dark-mode .insight-card { background: linear-gradient(135deg, #1e293b, #334155); }
html.dark-mode .insight-card h4 { color: #94a3b8; }

/* ── FLAG IMAGE FIX ── */
.country-flag {
    width: 60px;
    height: 40px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 4px;
}

.country-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── COUNTRY CARD LAYOUT FIX ── */
.country-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    overflow: hidden;
}

.country-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.country-info {
    flex: 1;
    min-width: 0;
}

.country-time {
    margin-top: 8px;
    padding: 8px;
    background: #f9fafb;
    border-radius: 8px;
}

.current-time {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111827;
    font-family: monospace;
}

.current-date, .day-week {
    font-size: 0.8rem;
    color: #6b7280;
}

.country-weather {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #6b7280;
}

.country-meta {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6b7280;
}

.meta-item i {
    color: #a855f7;
    width: 14px;
}

.card-footer {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.badge {
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}

.badge-success { background: #d1fae5; color: #065f46; }
.badge-secondary { background: #f3f4f6; color: #6b7280; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-warning { background: #fef3c7; color: #92400e; }

/* Dark mode fixes */
html.dark-mode .country-time { background: #0f172a; }
html.dark-mode .current-time { color: #f1f5f9; }

/* ── INSIGHTS CHART SIZE FIX ── */
.insights-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.chart-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.chart-card canvas {
    max-height: 250px !important;
    width: 100% !important;
}

html.dark-mode .chart-card {
    background: #1e293b;
}

/* ============================================================
   TIME PREMIUM STYLES
   ============================================================ */

/* ── UPSELL CARD ── */
.premium-upsell {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    color: white;
    max-width: 520px;
    margin: 40px auto;
}
.upsell-icon { font-size: 3rem; margin-bottom: 12px; }
.premium-upsell h3 { font-size: 1.6rem; font-weight: 800; margin-bottom: 10px; }
.premium-upsell p { color: rgba(255,255,255,0.75); margin-bottom: 20px; }
.upsell-features {
    list-style: none;
    text-align: left;
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.upsell-features li { padding: 6px 0; font-size: 0.92rem; color: rgba(255,255,255,0.9); }
.upsell-price { font-size: 1.8rem; font-weight: 800; color: #fbbf24; margin-bottom: 16px; }
.btn-premium {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}
.btn-premium:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245,158,11,0.4); }

/* ── WORLD CLOCK DASHBOARD ── */
.wc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.wc-count { color: #6b7280; font-size: 0.88rem; }
.btn-add-clock {
    background: linear-gradient(135deg, #a855f7, #10b981);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.btn-add-clock:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(168,85,247,0.3); }
.clocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.clock-card {
    border-radius: 16px;
    padding: 20px;
    color: white;
    position: relative;
    transition: transform 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
.clock-card:hover { transform: translateY(-4px); }
.clock-card.morning  { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.clock-card.afternoon{ background: linear-gradient(135deg, #3b82f6, #8b5cf6); }
.clock-card.evening  { background: linear-gradient(135deg, #6366f1, #ec4899); }
.clock-card.night    { background: linear-gradient(135deg, #1e1b4b, #312e81); }
.clock-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.clock-flag { width: 28px; height: 20px; object-fit: cover; border-radius: 3px; }
.clock-flag-placeholder { font-size: 1.4rem; }
.clock-label { flex: 1; font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock-delete {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 6px;
    color: white;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.clock-delete:hover { opacity: 1; }
.clock-time { font-size: 2rem; font-weight: 800; font-family: monospace; letter-spacing: 2px; }
.clock-date { font-size: 0.82rem; opacity: 0.8; margin-top: 2px; }
.clock-tz { font-size: 0.75rem; opacity: 0.65; margin-top: 4px; }
.clock-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.clock-offset { font-size: 0.75rem; opacity: 0.7; }
.wc-empty {
    grid-column: 1/-1;
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

/* ── MEETING PLANNER ── */
.planner-form {
    background: white;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.planner-desc { color: #6b7280; font-size: 0.9rem; margin-bottom: 20px; }
.planner-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.planner-field label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: #374151; }
.form-label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: #374151; }
.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.form-input:focus { border-color: #a855f7; outline: none; }
.tz-selector-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.tz-row { display: flex; align-items: center; gap: 8px; }
.btn-remove-tz {
    background: #fee2e2; color: #ef4444; border: none;
    border-radius: 8px; padding: 8px 12px; cursor: pointer;
    transition: background 0.2s;
}
.btn-remove-tz:hover { background: #fca5a5; }
.planner-results { background: white; border-radius: 16px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.planner-slots { display: flex; flex-direction: column; gap: 12px; }
.planner-slot {
    border-radius: 12px;
    padding: 16px;
    border: 2px solid #e5e7eb;
}
.slot-ideal   { border-color: #10b981; background: #f0fdf4; }
.slot-good    { border-color: #3b82f6; background: #eff6ff; }
.slot-acceptable { border-color: #f59e0b; background: #fffbeb; }
.slot-bad     { border-color: #ef4444; background: #fef2f2; }
.slot-header  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.slot-utc     { font-weight: 700; font-size: 1rem; color: #374151; }
.slot-badge   { font-size: 0.82rem; font-weight: 700; }
.slot-locals  { display: flex; flex-wrap: wrap; gap: 8px; }
.slot-local {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(0,0,0,0.04); border-radius: 8px; padding: 8px 12px;
    min-width: 100px; font-size: 0.8rem;
}
.slot-tz { font-weight: 600; color: #374151; font-size: 0.75rem; }
.slot-time { font-size: 1rem; font-weight: 700; font-family: monospace; }
.slot-period { color: #6b7280; font-size: 0.72rem; text-transform: capitalize; }
.biz-open  { border: 1px solid #10b981; }
.biz-closed{ border: 1px solid #e5e7eb; opacity: 0.7; }
.all-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 6px; }
.mini-slot {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px; border-radius: 6px; font-size: 0.78rem;
    background: #f9fafb; border: 1px solid #e5e7eb;
}
.planner-no-overlap {
    text-align: center; padding: 40px; background: #fef2f2;
    border-radius: 16px; color: #ef4444;
}

/* ── TIME ALERTS ── */
.alerts-toolbar {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 10px;
}
.alerts-desc { color: #6b7280; font-size: 0.88rem; margin-bottom: 20px; }
.alert-card {
    display: flex; align-items: center; justify-content: space-between;
    background: white; border-radius: 14px; padding: 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07); margin-bottom: 12px;
    border-left: 4px solid #a855f7; transition: box-shadow 0.2s;
}
.alert-card:hover { box-shadow: 0 4px 16px rgba(168,85,247,0.15); }
.alert-inactive { border-left-color: #e5e7eb; opacity: 0.7; }
.alert-card-left { display: flex; align-items: center; gap: 14px; }
.alert-card-icon { font-size: 1.6rem; }
.alert-card-label { font-weight: 700; font-size: 0.95rem; color: #111827; }
.alert-card-time { font-size: 0.88rem; color: #4b5563; margin-top: 2px; }
.alert-card-meta { font-size: 0.78rem; color: #9ca3af; margin-top: 2px; }
.alert-card-actions { display: flex; gap: 8px; }
.btn-icon {
    background: #f3f4f6; border: none; border-radius: 8px;
    padding: 8px 12px; cursor: pointer; color: #374151; transition: all 0.2s;
}
.btn-icon:hover { background: #e5e7eb; }
.btn-danger { color: #ef4444; }
.btn-danger:hover { background: #fee2e2; }

/* ── DAYS SELECTOR ── */
.days-selector { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.day-btn {
    padding: 6px 12px; border-radius: 8px; border: 2px solid #e5e7eb;
    background: white; cursor: pointer; font-size: 0.82rem; font-weight: 600;
    color: #6b7280; transition: all 0.2s;
}
.day-btn.selected { background: #a855f7; border-color: #a855f7; color: white; }

/* ── PREMIUM TAB BUTTONS ── */
.tab-btn.premium-tab::after { content: ' ⭐'; font-size: 0.7rem; }

/* ── DARK MODE ── */
html.dark-mode .planner-form,
html.dark-mode .planner-results,
html.dark-mode .alert-card { background: #1e293b; }
html.dark-mode .form-input,
html.dark-mode .form-label { color: #e2e8f0; }
html.dark-mode .form-input { background: #0f172a; border-color: #334155; }
html.dark-mode .planner-desc,
html.dark-mode .alerts-desc { color: #94a3b8; }
html.dark-mode .alert-card-label { color: #f1f5f9; }
html.dark-mode .slot-ideal { background: #022c22; }
html.dark-mode .slot-good  { background: #0c1a2e; }
html.dark-mode .slot-acceptable { background: #1c1500; }
html.dark-mode .slot-local { background: rgba(255,255,255,0.06); }
html.dark-mode .mini-slot  { background: #0f172a; border-color: #334155; }
html.dark-mode .btn-icon   { background: #334155; color: #e2e8f0; }
html.dark-mode .day-btn    { background: #1e293b; border-color: #334155; color: #94a3b8; }
html.dark-mode .wc-empty   { color: #94a3b8; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .planner-fields { grid-template-columns: 1fr; }
    .clocks-grid { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
    .clock-time { font-size: 1.6rem; }
    .premium-upsell { padding: 28px 20px; }
    .alert-card { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* === migrated from time/index.html === */
.tab-btn { padding: 10px 20px; background: #f3f4f6; border: none; border-radius: 8px; cursor: pointer; font-size: 0.95rem; font-weight: 500; color: #374151; transition: all 0.2s; }
        .tab-btn.active { background: linear-gradient(135deg, #a855f7, #10b981); color: white; }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        html.dark-mode .tab-btn { background: #1e293b; color: #cbd5e1; }
        html.dark-mode .tab-btn.active { background: linear-gradient(135deg, #a855f7, #10b981); color: white; }
        html.dark-mode .modal-content, html.dark-mode .filter-section { background: #1e293b; color: #f1f5f9; }
        html.dark-mode input, html.dark-mode select { background: #0f172a; border-color: #334155; color: #e2e8f0; }