:root {
    --bg-dark:          #0f111a;
    --bg-card:          rgba(25, 28, 41, 0.6);
    --border-glass:     rgba(255, 255, 255, 0.08);
    --text-main:        #f8fafc;
    --text-muted:       #94a3b8;
    --accent-primary:   #00B4DB;
    --accent-hover:     #0083B0;
    --success:          #10b981;
    --success-bg:       rgba(16, 185, 129, 0.15);
    --danger:           #ef4444;
    --danger-bg:        rgba(239, 68, 68, 0.15);
    --warning:          #f59e0b;
    --gradient-brand:   linear-gradient(to right, #0083B0, #00B4DB);
    --gradient-glow:    radial-gradient(circle at 50% 50%, rgba(0,180,219,0.15), transparent 60%);
    --shadow-glass:     0 8px 32px 0 rgba(0,0,0,0.3);
    --blur-glass:       blur(12px);
    --font-sans:        'Outfit', sans-serif;
    --radius-card:      20px;
    --radius-btn:       12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-dark);
    color: var(--text-main);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ── Background ──────────────────────────────────────────────────────── */
.background-mesh {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(circle at 15% 50%, rgba(0,180,219,0.15), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(0,131,176,0.1),   transparent 40%);
    filter: blur(40px);
}

/* ── App Shell ───────────────────────────────────────────────────────── */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 2rem 3rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    gap: 0;
}

/* ── Glassmorphism Card ──────────────────────────────────────────────── */
.glass-panel {
    background: var(--bg-card);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-glass);
}

.card { padding: 1.5rem; }

/* ── Navbar ──────────────────────────────────────────────────────────── */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.5rem;
    margin-bottom: 2rem;
    position: sticky;
    top: 1.5rem;
    z-index: 100;
    gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.logo-text { display: flex; align-items: baseline; gap: 0.4rem; }

.logo-icon {
    width: 38px; height: 38px;
    border-radius: 12px;
    background: var(--gradient-brand);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,180,219,0.3);
}

.logo h1 { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.5px; white-space: nowrap; margin: 0; }
.logo-badge { display: none; }

/* ── Nav Tabs ────────────────────────────────────────────────────────── */
.nav-tabs {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
    padding: 0 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }

.tab-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.6rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.tab-link .lucide { width: 18px; height: 18px; transition: transform 0.3s; }

.tab-link:hover { color: var(--text-main); background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.tab-link:hover .lucide { transform: scale(1.1); color: var(--accent-primary); }

.tab-link.active {
    color: #fff;
    background: var(--gradient-brand);
    box-shadow: 0 4px 15px rgba(0,180,219,0.4);
}
.tab-link.active .lucide { color: #fff; }
.tab-link.active:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,180,219,0.5); }
.tab-link.active:hover .lucide { transform: scale(1.1) rotate(-5deg); }

/* ── User Profile ────────────────────────────────────────────────────── */
.user-profile { display: flex; align-items: center; flex-shrink: 0; gap: 0.875rem; cursor: pointer; padding: 0.4rem 0.5rem 0.4rem 1rem; border-radius: 100px; transition: background 0.2s; }
.user-profile:hover { background: rgba(255,255,255,0.03); }

.user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.user-email { font-size: 0.85rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.1rem; }

.btn-logout {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: none; border: none;
    color: var(--text-muted);
    font-family: inherit; font-weight: 500;
    cursor: pointer; font-size: 0.75rem;
    padding: 0;
    transition: all 0.2s;
}
.btn-logout:hover { color: var(--danger); text-shadow: 0 0 8px rgba(239,68,68,0.4); }


/* ── Main Content ────────────────────────────────────────────────────── */
.main-content { display: flex; flex-direction: column; gap: 1.5rem; flex: 1; }

.tab-content.hidden { display: none !important; }

/* ── Page / Tab Header ───────────────────────────────────────────────── */
.page-header { margin-bottom: 0.25rem; }
.page-header h2 { font-size: 1.75rem; font-weight: 600; margin-bottom: 0.25rem; }

.tab-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title { font-size: 1.5rem; font-weight: 600; }

/* ── Month Navigator ─────────────────────────────────────────────────── */
.month-nav { display: flex; align-items: center; gap: 0.875rem; }

.btn-nav {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-main);
    font-size: 1rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-nav:hover { background: rgba(255,255,255,0.12); }

.month-label { font-size: 1rem; font-weight: 600; min-width: 150px; text-align: center; }

/* ── Stats Row ───────────────────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

/* Dashboard large stat cards */
.stat-card-lg {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.stat-icon {
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem; font-weight: 700;
    flex-shrink: 0;
}

.income-icon  { background: var(--success-bg); color: var(--success); }
.expense-icon { background: var(--danger-bg);  color: var(--danger);  }
.salary-icon  { background: rgba(0,180,219,0.15); color: var(--accent-primary); }
.owed-icon    { background: rgba(245,158,11,0.15); color: var(--warning); }

.stat-label { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.2rem; }
.stat-value { font-size: 1.4rem; font-weight: 700; }

/* Transaction / Payroll tab mini stats */
.stat-mini {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1.1rem 1.25rem;
}
.stat-mini-label {
    font-size: 0.72rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.stat-mini-value { font-size: 1.2rem; font-weight: 700; }
.stat-mini.income  .stat-mini-value { color: var(--success); }
.stat-mini.expense .stat-mini-value { color: var(--danger);  }
.stat-mini.balance .stat-mini-value { color: var(--accent-primary); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--gradient-brand);
    color: #fff; border: none;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius-btn);
    font-family: inherit; font-weight: 600; font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.5rem;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,180,219,0.4); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-delete {
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem 0.4rem;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-delete:hover { color: var(--danger); background: var(--danger-bg); }

.btn-close {
    background: none; border: none;
    color: var(--text-muted); font-size: 1.5rem;
    cursor: pointer; transition: color 0.2s; line-height: 1;
}
.btn-close:hover { color: var(--text-main); }

/* ── Charts ──────────────────────────────────────────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.card-title {
    font-size: 0.9rem; font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    text-transform: uppercase; letter-spacing: 0.05em;
}

.chart-container { position: relative; height: 250px; }

/* ── Transaction List ────────────────────────────────────────────────── */
.transaction-list {
    list-style: none;
    display: flex; flex-direction: column;
    gap: 0.625rem;
}

.transaction-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
    transition: transform 0.2s, background 0.2s;
}
.transaction-item:hover { transform: translateX(4px); background: rgba(255,255,255,0.05); }

.t-info { display: flex; align-items: center; gap: 0.875rem; overflow: hidden; }

.t-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.t-details h5  { font-size: 0.95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-details p   { font-size: 0.78rem; color: var(--text-muted); }

.t-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }

.t-amount { font-weight: 600; font-size: 0.95rem; }
.t-amount.expense { color: var(--text-main); }
.t-amount.income  { color: var(--success);   }

/* ── Editable salary stat badge ──────────────────────────────────────── */
.stat-editable {
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    user-select: none;
}
.stat-editable:hover { border-color: rgba(0,180,219,0.45); background: rgba(0,180,219,0.06); }
.stat-editable.editing { border-color: var(--accent-primary); cursor: default; }

.stat-pencil {
    width: 10px !important; height: 10px !important;
    opacity: 0; transition: opacity 0.2s; margin-left: 3px;
    vertical-align: -0.05em;
}
.stat-editable:hover .stat-pencil { opacity: 0.7; }

.stat-inline-edit { margin-top: 0.5rem; }

.stat-edit-input {
    font-size: 0.82rem !important;
    padding: 0.3rem 0.5rem !important;
    width: 100%;
}

.stat-edit-btns {
    display: flex; gap: 0.25rem; margin-top: 0.3rem;
}
.stat-edit-btns .btn-save-row { width: 26px; height: 24px; }
.stat-edit-btns .btn-row-del  { width: 24px; height: 24px; }

/* ─────────────────────────────────────────────────────────────────────
   ΆΔΕΙΑ — Modern redesign
   ───────────────────────────────────────────────────────────────────── */
.leave-card {
    margin-top: 1.25rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, rgba(0,180,219,0.04) 0%, rgba(0,131,176,0.04) 100%), var(--bg-card);
    border: 1px solid var(--border-glass);
}

/* Top bar — title + annual total badge */
.leave-top {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-glass);
}

.leave-title { display: flex; align-items: center; gap: 0.75rem; }
.leave-title h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.2px; }
.leave-title h3 span { color: var(--text-muted); font-weight: 500; }
.leave-title .lucide { color: var(--accent-primary); width: 22px; height: 22px; }

.leave-stat.editable {
    position: relative;
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}
.leave-stat.editable:hover {
    background: rgba(0,180,219,0.1);
    border-color: rgba(0,180,219,0.4);
}
.leave-stat.editable:hover .stat-pencil { opacity: 0.7; }

.leave-stat .leave-stat-lbl {
    font-size: 0.7rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 500;
}
.leave-stat .leave-stat-num {
    font-size: 1.15rem; font-weight: 700;
    color: var(--text-main);
}
.leave-stat .stat-pencil { opacity: 0; transition: opacity 0.2s; }

.leave-config-edit {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: rgba(15,18,32,0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(0,180,219,0.4);
    border-radius: 12px;
    padding: 0.75rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    z-index: 100;
    min-width: 150px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.leave-config-edit .py-input { width: 100%; text-align: center; font-weight: 600; }

/* HERO section */
.leave-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 1.75rem;
}

.leave-hero-main {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 0.5rem 0;
}
.leave-hero-num {
    font-size: 4rem; font-weight: 800;
    line-height: 1; letter-spacing: -2px;
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.leave-hero-lbl {
    font-size: 0.78rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-top: 0.5rem; font-weight: 500;
}

.leave-hero-side {
    display: flex; flex-direction: column; gap: 1.25rem;
    flex: 1;
}

.leave-side-stat {
    display: flex; align-items: baseline; gap: 0.625rem;
}
.leave-side-num {
    font-size: 1.5rem; font-weight: 700;
    color: var(--text-main);
}
.leave-side-lbl {
    font-size: 0.78rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}

.leave-progress-wrap {
    display: flex; align-items: center; gap: 0.75rem;
}
.leave-progress-bar {
    flex: 1; height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 5px;
    overflow: hidden;
}
.leave-progress-fill {
    height: 100%;
    background: var(--gradient-brand);
    transition: width 0.5s cubic-bezier(0.16,1,0.3,1), background 0.3s;
    border-radius: 5px;
}
.leave-progress-pct {
    font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
    min-width: 38px; text-align: right;
}

/* Section divider with label */
.leave-section-divider {
    display: flex; align-items: center; gap: 0.875rem;
    margin: 1.25rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.leave-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-glass);
}
.leave-section-divider.compact { margin: 1rem 0 0.75rem; }

/* List */
.leave-list { display: flex; flex-direction: column; gap: 0.5rem; }

.leave-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 2fr 100px 28px;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border-glass);
    transition: all 0.2s;
}
.leave-row:hover {
    background: rgba(0,180,219,0.06);
    border-color: rgba(0,180,219,0.25);
    transform: translateX(2px);
}

.leave-row-date  { font-weight: 600; color: var(--text-main); }
.leave-row-notes { color: var(--text-muted); font-size: 0.82rem;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leave-row-days  {
    font-weight: 700; text-align: right;
    color: var(--accent-primary); font-size: 0.85rem;
    padding: 0.2rem 0.6rem;
    background: rgba(0,180,219,0.12);
    border-radius: 8px; justify-self: end;
    white-space: nowrap;
}

.leave-empty {
    text-align: center; color: var(--text-muted);
    padding: 1.75rem; font-size: 0.88rem;
    background: rgba(255,255,255,0.02);
    border: 1px dashed var(--border-glass);
    border-radius: 10px;
}

/* Add row — labeled fields */
.leave-add-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: nowrap;
}

.leave-add-field {
    display: flex; flex-direction: column; gap: 0.3rem;
    min-width: 0;
}
.leave-add-field:nth-child(1),
.leave-add-field:nth-child(2) { width: 145px; flex-shrink: 0; }
.leave-add-field label {
    font-size: 0.68rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.leave-add-field .py-input { width: 100%; }

.leave-add-btn {
    padding: 0.6rem 1.1rem !important;
    font-size: 0.85rem !important;
    flex-shrink: 0;
    height: 38px;
}
.leave-add-btn .lucide { width: 14px; height: 14px; }

@media (max-width: 900px) {
    .leave-card { padding: 1.25rem 1.25rem; }
    .leave-hero { grid-template-columns: 1fr; gap: 1rem; }
    .leave-hero-num { font-size: 3rem; }
    .leave-row { grid-template-columns: 1fr 90px 28px; }
    .leave-row-notes { display: none; }
    .leave-add-row { flex-wrap: wrap; }
    .leave-add-field:nth-child(1),
    .leave-add-field:nth-child(2) { width: calc(50% - 0.4rem); }
}

/* ── Payroll Inline Layout ───────────────────────────────────────────── */
.py-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 1.5rem;
    align-items: start;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-glass);
    max-width: 1000px;
}

.py-card {
    padding: 1.5rem 1.75rem;
    background: linear-gradient(135deg, rgba(0,180,219,0.03) 0%, rgba(0,131,176,0.03) 100%), var(--bg-card);
}

.py-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-glass);
}

.py-card-title { display: flex; align-items: center; gap: 0.625rem; }
.py-card-title h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.2px; }

.py-count-badge {
    font-size: 0.72rem; font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(0,180,219,0.12);
    border: 1px solid rgba(0,180,219,0.25);
    color: var(--accent-primary);
    letter-spacing: 0.02em;
}
.py-count-badge.full {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.3);
    color: var(--danger);
}

/* Column headers */
.py-col-heads {
    display: grid;
    gap: 0.4rem;
    padding: 0 0.75rem 0.5rem;
    font-size: 0.65rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--text-muted);
    margin-bottom: 0.4rem;
    font-weight: 600;
}

/* Entry rows — modern, soft bg + hover slide */
.py-entry-row {
    display: grid;
    gap: 0.4rem; align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border-glass);
    font-size: 0.875rem;
    margin-bottom: 0.35rem;
    transition: all 0.2s;
}
.py-entry-row:hover {
    background: rgba(0,180,219,0.06);
    border-color: rgba(0,180,219,0.2);
    transform: translateX(2px);
}

.py-cell-date   { font-weight: 600; font-size: 0.85rem; }
.py-cell-amount { font-weight: 700; }
.py-cell-method {
    font-size: 0.78rem; color: var(--text-muted);
    display: flex; align-items: center; gap: 0.3rem;
}
.py-cell-method .lucide { width: 13px; height: 13px; color: var(--accent-primary); }
.py-cell-bank { color: var(--accent-primary); }
.py-cell-cash { color: var(--success); }

/* New entry row — clearly separated as the input strip */
.py-new-row {
    display: grid;
    gap: 0.4rem; align-items: center;
    padding: 1rem 0.75rem 0;
    border-top: 1px dashed rgba(0,180,219,0.3);
    margin-top: 0.6rem;
}

/* Inline inputs */
.py-input {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-glass);
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    color: var(--text-main);
    font-family: inherit; font-size: 0.82rem;
    outline: none; width: 100%;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}
.py-input::-webkit-outer-spin-button,
.py-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.py-input:focus { border-color: var(--accent-primary); }

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85) brightness(1.2);
    cursor: pointer;
    border-radius: 4px;
    padding: 2px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.owed-live-cell {
    font-size: 0.8rem; font-weight: 700;
    text-align: center; white-space: nowrap;
}

/* Buttons in rows */
.btn-save-row {
    width: 28px; height: 28px; border-radius: 7px;
    background: var(--gradient-brand); border: none;
    color: #fff; font-size: 0.85rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, opacity 0.15s; flex-shrink: 0;
}
.btn-save-row:hover   { transform: scale(1.12); }
.btn-save-row:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-row-del {
    width: 24px; height: 24px; border-radius: 6px;
    background: none; border: none;
    color: var(--text-muted); font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.btn-row-del:hover   { color: var(--danger); background: var(--danger-bg); }
.btn-row-del.invisible { visibility: hidden; pointer-events: none; }

.py-empty {
    text-align: center; color: var(--text-muted);
    font-size: 0.82rem; padding: 1.25rem 0;
}

/* Owed badge (inline compact) */
.owed-badge {
    padding: 0.3rem 0.65rem; border-radius: 8px;
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
}
.owed-badge.ok      { background: var(--success-bg); color: var(--success); }
.owed-badge.pending { background: var(--danger-bg);  color: var(--danger);  }
.owed-badge.sm      { padding: 0.2rem 0.5rem; font-size: 0.72rem; }

/* ── Lucide icons ────────────────────────────────────────────────────── */
.lucide, svg.lucide {
    width: 16px; height: 16px;
    stroke: currentColor;
    fill: none;
    vertical-align: -0.15em;
    flex-shrink: 0;
    display: inline;
}
.py-card-title .lucide { width: 18px; height: 18px; }
.stat-icon .lucide { width: 22px; height: 22px; }
.dt-icon.lucide        { width: 15px; height: 15px; }
.dt-chevron.lucide     { width: 13px; height: 13px; transition: transform 0.2s; }

/* 4-column weekly table — date fills available space */
.py-4col {
    grid-template-columns: 1fr 90px 115px 28px !important;
}

/* Salary config bar */
.salary-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.7rem 1rem;
    background: rgba(0,180,219,0.08);
    border: 1px solid rgba(0,180,219,0.2);
    border-radius: 12px;
    margin-bottom: 1rem;
    gap: 0.75rem; flex-wrap: wrap;
}
.salary-info { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.salary-lbl  { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.salary-val  { font-size: 1.05rem; font-weight: 700; }
.salary-since{ font-size: 0.7rem; color: var(--text-muted); }

.btn-change-salary {
    background: none;
    border: 1px solid var(--border-glass);
    padding: 0.3rem 0.75rem; border-radius: 8px;
    color: var(--text-muted); font-family: inherit; font-size: 0.78rem;
    cursor: pointer; white-space: nowrap; transition: all 0.2s; flex-shrink: 0;
}
.btn-change-salary:hover { border-color: var(--accent-primary); color: var(--text-main); }

.salary-edit-bar {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.6rem 0.75rem;
    background: rgba(0,180,219,0.06);
    border: 1px dashed rgba(0,180,219,0.3);
    border-radius: 10px; margin-bottom: 1rem; flex-wrap: wrap;
}
.salary-edit-lbl { font-size: 0.8rem; color: var(--text-muted); }
.salary-edit-lbl strong { color: var(--accent-primary); }

/* Payment method toggle */
.payment-toggle { display: flex; gap: 0.25rem; }

.pay-btn {
    width: 36px; height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-muted);
    cursor: pointer; transition: all 0.15s;
    display: flex; align-items: center; justify-content: center;
}
.pay-btn:hover  { background: rgba(255,255,255,0.1); color: var(--text-main); }
.pay-btn.active { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.pay-btn .lucide { width: 15px; height: 15px; }

.py-cell-amount { font-weight: 600; }
.py-cell-method { font-size: 0.8rem; color: var(--text-muted); }

/* ── Benefits sections ───────────────────────────────────────────────── */
.benefits-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 0.75rem; }

/* Per-benefit card — modern compact */
.bsec {
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    background: rgba(255,255,255,0.025);
    display: flex; flex-direction: column; gap: 0.5rem;
    transition: border-color 0.2s, background 0.2s;
}
.bsec:hover {
    border-color: rgba(0,180,219,0.2);
    background: rgba(0,180,219,0.04);
}

.bsec-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 0.5rem;
    margin-bottom: 0.1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bsec-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 600;
}
.bsec-title .lucide { width: 14px; height: 14px; color: var(--accent-primary); }

/* Received total — pill badge in green */
.bsec-received {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: rgba(16,185,129,0.15);
    border: 1px solid rgba(16,185,129,0.3);
    color: var(--success);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.02em;
}

/* Benefits rows — flex layout, always fits inside 340px card */
.bsec-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
}

.bsec-pmts { display: flex; flex-direction: column; gap: 0.2rem; }

/* read-only row cells */
.bsec-date-cell   { flex: 1; min-width: 0; font-weight: 500; font-size: 0.78rem; }
.bsec-amt-cell    { width: 68px; flex-shrink: 0; text-align: right; font-weight: 600; }
.bsec-method-cell {
    width: 78px; flex-shrink: 0;
    display: flex; align-items: center; gap: 0.2rem;
    color: var(--text-muted); font-size: 0.75rem;
}
.bsec-method-cell .lucide { width: 12px; height: 12px; }

/* hover on read-only rows — modern slide */
.bsec-row:not(.bsec-add-row) {
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    transition: all 0.18s;
}
.bsec-row:not(.bsec-add-row):hover {
    background: rgba(0,180,219,0.08);
    transform: translateX(2px);
}

/* add row inputs — compact, fits in 340px card */
.bsec-add-row { gap: 0.3rem !important; }
.bsec-add-row > * { flex-shrink: 0; }
.bsec-add-row .bsec-date    { flex: 1; min-width: 90px; max-width: 130px; }
.bsec-add-row .bsec-amt-in  { width: 56px; padding: 0.35rem 0.4rem !important; font-size: 0.78rem !important; }
.bsec-add-row .payment-toggle { display: flex; gap: 2px; }
.bsec-add-row .pay-btn      { width: 28px; height: 28px; }
.bsec-add-row .pay-btn .lucide { width: 12px; height: 12px; }
.bsec-add-row .btn-save-row { width: 28px; height: 28px; }

/* Add row separator */
.bsec-add-row {
    padding-top: 0.4rem;
    border-top: 1px dashed rgba(0,180,219,0.2);
    margin-top: 0.1rem;
}

.bsec-custom-row { opacity: 0.85; }

/* Custom add row — separated by dashed divider */
.benefit-custom-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 1rem 0 0.5rem;
    border-top: 1px dashed rgba(0,180,219,0.25);
    margin-top: 0.5rem;
}

.btn-add-benefit {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px;
    background: rgba(0,180,219,0.18);
    border: 1px solid rgba(0,180,219,0.35);
    color: var(--accent-primary); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.btn-add-benefit:hover { background: rgba(0,180,219,0.35); }

.benefits-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.875rem 1rem;
    margin-top: 0.5rem;
    background: rgba(16,185,129,0.08);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.benefits-total strong { font-size: 1.05rem; font-weight: 700; color: var(--success); }

/* Color helpers */
.txt-success { color: var(--success); }
.txt-danger  { color: var(--danger);  }

/* ── Annual Report Table ─────────────────────────────────────────────── */
.table-wrapper { overflow-x: auto; }

.report-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.report-table th, .report-table td {
    padding: 0.875rem 1rem;
    text-align: right;
    border-bottom: 1px solid var(--border-glass);
}
.report-table th:first-child, .report-table td:first-child { text-align: left; }

.report-table th {
    color: var(--text-muted); font-weight: 500;
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
}

.report-table tbody tr:hover { background: rgba(255,255,255,0.03); }

.report-table tfoot tr { font-weight: 700; }
.report-table tfoot td { color: var(--accent-primary); border-top: 2px solid var(--border-glass); }

.td-income   { color: var(--success); }
.td-expense  { color: var(--danger);  }
.td-positive { color: var(--success); }
.td-negative { color: var(--danger);  }
.td-owed     { color: var(--warning); }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group.row { flex-direction: row; gap: 1rem; }
.form-group.row .col { flex: 1; display: flex; flex-direction: column; gap: 0.5rem; }

.form-group label { font-size: 0.82rem; color: var(--text-muted); }

.form-group input, .form-group select {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-glass);
    padding: 0.7rem 1rem;
    border-radius: 10px;
    color: var(--text-main);
    font-family: inherit; font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus { border-color: var(--accent-primary); }

/* ── Auth Screen ─────────────────────────────────────────────────────── */
.auth-screen {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}

.auth-card {
    width: 100%; max-width: 400px;
    padding: 2.25rem 2rem 2rem;
    display: flex; flex-direction: column; gap: 1.5rem;
}

/* Brand */
.auth-brand {
    display: flex; align-items: center; gap: 1rem;
}

.auth-logo-wrap {
    width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
    background: var(--gradient-brand);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(0,180,219,0.35);
}

.auth-app-title {
    font-size: 1.2rem; font-weight: 700; color: var(--text-main);
    display: flex; align-items: center; gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.auth-app-sub { font-size: 0.78rem; color: var(--text-muted); }

/* Separator */
.auth-sep { height: 1px; background: var(--border-glass); }

/* Welcome */
.auth-heading { font-size: 1.35rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.25rem; }
.auth-subheading { font-size: 0.84rem; color: var(--text-muted); }

/* Form */
.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-field { display: flex; flex-direction: column; gap: 0.4rem; }

.auth-label {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; font-weight: 500; color: var(--text-muted);
}

.auth-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-btn);
    padding: 0.8rem 1rem;
    color: var(--text-main);
    font-family: var(--font-sans); font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auth-input:focus {
    border-color: rgba(0,180,219,0.55);
    box-shadow: 0 0 0 3px rgba(0,180,219,0.12);
}

.auth-input::placeholder { color: var(--text-muted); opacity: 0.7; }

/* Password wrapper */
.auth-pw-wrap { position: relative; }
.auth-pw-wrap .auth-input { padding-right: 3rem; }

.auth-pw-toggle {
    position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; padding: 0.25rem;
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center;
    transition: color 0.15s;
}
.auth-pw-toggle:hover { color: var(--text-main); }

/* Submit */
.auth-submit-btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.875rem; width: 100%; margin-top: 0.25rem;
    font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em;
    border-radius: var(--radius-btn);
}

/* Security badge */
.auth-security {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    font-size: 0.72rem; color: var(--text-muted); opacity: 0.65;
}

/* ── Modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: 1rem;
}

.modal-content {
    width: 100%; max-width: 500px;
    animation: slideUp 0.3s ease forwards;
}

.modal-content-scroll {
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.5rem;
}

.transaction-form { display: flex; flex-direction: column; gap: 1.1rem; }

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast-container {
    position: fixed; bottom: 2rem; right: 2rem;
    display: flex; flex-direction: column; gap: 0.875rem;
    z-index: 9999;
}
.toast-modern {
    background: rgba(15, 18, 32, 0.95);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 0.875rem 1rem 1.125rem 1rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    display: flex; align-items: center; gap: 0.875rem;
    min-width: 280px; max-width: 360px;
    animation: toastEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative; overflow: hidden;
}
.toast-modern.closing {
    animation: toastExit 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.toast-icon-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
}
.toast-success .toast-icon-wrap { background: rgba(16,185,129,0.15); color: var(--success); }
.toast-error .toast-icon-wrap   { background: rgba(239,68,68,0.15); color: var(--danger); }
.toast-info .toast-icon-wrap    { background: rgba(0,180,219,0.15); color: var(--accent-primary); }

.toast-content { flex: 1; font-size: 0.88rem; font-weight: 500; color: var(--text-main); }
.toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; transition: color 0.2s; display: flex; align-items: center; }
.toast-close:hover { color: #fff; }

.toast-progress {
    position: absolute; bottom: 0; left: 0; height: 3px; background: rgba(255,255,255,0.05); width: 100%;
}
.toast-progress::after {
    content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%;
    animation: toastProgress 4s linear forwards;
    transform-origin: left;
}
.toast-success .toast-progress::after { background: var(--success); }
.toast-error .toast-progress::after   { background: var(--danger); }
.toast-info .toast-progress::after    { background: var(--gradient-brand); }

@keyframes toastEnter { 
    from { opacity: 0; transform: translateX(60px) scale(0.95); } 
    to { opacity: 1; transform: translateX(0) scale(1); } 
}
@keyframes toastExit { 
    from { opacity: 1; transform: scale(1); } 
    to { opacity: 0; transform: scale(0.9); } 
}
@keyframes toastProgress { 
    from { transform: scaleX(1); } 
    to { transform: scaleX(0); } 
}

/* ── Date Nav (trigger + picker) ─────────────────────────────────────── */
.date-nav { position: relative; }

.date-trigger {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.6rem 1.1rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    color: var(--text-main);
    font-family: inherit; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}
.date-trigger:hover { background: rgba(255,255,255,0.1); border-color: rgba(0,180,219,0.4); }
.date-trigger.open  { background: rgba(0,180,219,0.15); border-color: var(--accent-primary); }

.dt-icon    { font-size: 1rem; }
.dt-chevron { color: var(--text-muted); font-size: 0.75rem; transition: transform 0.2s; }
.date-trigger.open .dt-chevron { transform: rotate(180deg); }

.month-picker {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 300;
    min-width: 272px;
    background: rgba(15, 18, 32, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.55);
    padding: 1rem;
    animation: slideDown 0.18s ease forwards;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mp-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-glass);
}

.mp-year-nav {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-glass);
    color: var(--text-main); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; flex-shrink: 0;
    transition: background 0.15s;
}
.mp-year-nav:hover { background: rgba(255,255,255,0.12); }

.mp-year-label {
    flex: 1; text-align: center;
    font-size: 1rem; font-weight: 700;
}

.mp-today-btn {
    background: rgba(0,180,219,0.15);
    border: 1px solid rgba(0,180,219,0.35);
    color: var(--accent-primary);
    padding: 0.28rem 0.7rem;
    border-radius: 8px;
    font-family: inherit; font-size: 0.75rem; font-weight: 600;
    cursor: pointer; white-space: nowrap;
    transition: background 0.15s;
}
.mp-today-btn:hover { background: rgba(0,180,219,0.3); }

.mp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem;
}

.mp-month-btn {
    padding: 0.5rem 0.2rem;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-family: inherit; font-size: 0.82rem; font-weight: 500;
    cursor: pointer; text-align: center;
    transition: all 0.15s;
}
.mp-month-btn:hover        { background: rgba(255,255,255,0.07); color: var(--text-main); }
.mp-month-btn.today        { color: var(--accent-primary); border-color: rgba(0,180,219,0.35); }
.mp-month-btn.active       { background: var(--gradient-brand); color: #fff; font-weight: 700;
                             border-color: transparent; box-shadow: 0 2px 10px rgba(0,180,219,0.45); }

/* ── Year Nav (Annual Report) ────────────────────────────────────────── */
.year-nav-control { display: flex; align-items: center; gap: 0.75rem; }

.year-display {
    display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
    min-width: 70px;
}
.year-display span { font-size: 1.2rem; font-weight: 700; }

.today-link {
    background: none; border: none;
    color: var(--accent-primary);
    font-family: inherit; font-size: 0.7rem; font-weight: 600;
    cursor: pointer; padding: 0;
}
.today-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════════════
   PAYROLL — New Design
   ══════════════════════════════════════════════════════════════════════ */

/* ── Overview card ── */
.py-overview {
    background:
        linear-gradient(135deg, rgba(0,180,219,0.06) 0%, rgba(0,131,176,0.06) 100%),
        var(--bg-card);
    margin-top: 0.75rem;   /* extra breathing room below the date picker */
}

.py-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2.5rem;
    margin-bottom: 1.5rem;
}

.py-stat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}

/* Thin divider centered in the gap between stats */
.py-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -1.25rem;
    top: 5%;
    height: 90%;
    width: 1px;
    background: var(--border-glass);
}

.py-stat-lbl-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.py-stat-icon {
    width: 13px !important;
    height: 13px !important;
    flex-shrink: 0;
    opacity: 0.85;
}

.py-stat-lbl {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

.py-stat-num {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.75px;
    line-height: 1;
}

/* Editable salary stat */
.py-stat-editable {
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    border: 1px dashed rgba(0,180,219,0.3);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}
.py-stat-editable:hover {
    background: rgba(0,180,219,0.08);
    border-color: rgba(0,180,219,0.55);
    border-style: solid;
}
.py-stat-editable:hover .stat-pencil { opacity: 0.7; }
.py-stat-editable.editing {
    border-color: var(--accent-primary);
    border-style: solid;
    cursor: default;
}

/* Color helpers */
.clr-success { color: var(--success); }
.clr-danger  { color: var(--danger);  }
.clr-accent  { color: var(--accent-primary); }

/* Progress bar */
.py-prog-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-glass);
}

.py-prog-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    overflow: hidden;
}

.py-prog-fill {
    height: 100%;
    background: var(--gradient-brand);
    border-radius: 3px;
    transition: width 0.65s cubic-bezier(0.16,1,0.3,1), background 0.3s;
}

.py-prog-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 96px;
    text-align: right;
}

/* ── 2-column grid ── */
.py-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}

/* Column cards */
.py-col-card {
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(135deg, rgba(0,180,219,0.025) 0%, rgba(0,131,176,0.025) 100%),
        var(--bg-card);
}

.py-col-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-glass);
}

.py-col-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.py-col-title h3      { font-size: 1rem; font-weight: 600; }
.py-col-title .lucide { width: 18px; height: 18px; color: var(--accent-primary); }

/* Entry list */
.py-entry-list { display: flex; flex-direction: column; min-height: 2rem; }

.py-entry-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 0.875rem;
    border-radius: 11px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--border-glass);
    font-size: 0.875rem;
    margin-bottom: 0.45rem;
    transition: all 0.2s;
}
.py-entry-item:last-child { margin-bottom: 0; }
.py-entry-item:hover {
    background: rgba(0,180,219,0.07);
    border-color: rgba(0,180,219,0.25);
    transform: translateX(3px);
}

.py-ei-date   { flex: 1; font-weight: 600; color: var(--text-main); font-size: 0.85rem; }
.py-ei-amount {
    font-weight: 700;
    color: var(--success);
    min-width: 78px;
    text-align: right;
}
.py-ei-method {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    min-width: 80px;
}
.py-ei-method .lucide { width: 12px; height: 12px; color: var(--accent-primary); }

/* Add row */
.py-add-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0 0;
    margin-top: 0.75rem;
    border-top: 1px dashed rgba(0,180,219,0.28);
    flex-wrap: nowrap;
}
.py-add-row .py-input { flex: 1; min-width: 0; }
.py-date-input { max-width: 148px; }
.py-num-input  { max-width: 84px;  }
.py-save-btn   { width: 36px !important; height: 36px !important; border-radius: 10px !important; flex-shrink: 0; }

/* ── Payroll Responsive ── */
@media (max-width: 1000px) {
    .py-stats-grid   { column-gap: 2rem; }
    .py-stat-num     { font-size: 1.45rem; }
    .py-stat:not(:last-child)::after { right: -1rem; }
}
@media (max-width: 900px) {
    .py-grid         { grid-template-columns: 1fr; }
    .py-stats-grid   { grid-template-columns: repeat(2, 1fr); column-gap: 2rem; row-gap: 1.5rem; }
    .py-stat::after  { display: none; }  /* no dividers in 2×2 grid */
}
@media (max-width: 560px) {
    .py-add-row    { flex-wrap: wrap; }
    .py-date-input { max-width: 100%; flex-basis: 100%; }
}

/* ── Utilities ───────────────────────────────────────────────────────── */
.hidden          { display: none !important; }
.justify-center  { justify-content: center;  }
.text-center     { text-align: center;        }
.full-width      { width: 100%;               }
.mt-1            { margin-top: 1rem;          }

.loading-text {
    text-align: center; color: var(--text-muted);
    padding: 2.5rem 0; font-size: 0.9rem;
}

/* ── Animations ──────────────────────────────────────────────────────── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);     }
}

.animate-slide-up {
    opacity: 0;
    animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Responsive (non-navbar — navbar τα έχει στο τέλος του αρχείου) ──── */
@media (max-width: 900px) {
    .charts-grid { grid-template-columns: 1fr; }
    .py-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .month-label { min-width: 120px; font-size: 0.9rem; }
    .report-table th, .report-table td { padding: 0.625rem 0.5rem; font-size: 0.8rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   NEW TRANSACTIONS TAB DESIGN
   ══════════════════════════════════════════════════════════════════════ */

.tx-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap-reverse;
    gap: 1rem;
}
.tx-page-title {
    font-size: 1.75rem;
    font-weight: 600;
}

/* Summary KPIs */
.tx-summary-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.tx-kpi {
    background: var(--bg-card);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-card);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.tx-kpi-income .tx-kpi-icon  { background: var(--success-bg); color: var(--success); }
.tx-kpi-expense .tx-kpi-icon { background: var(--danger-bg);  color: var(--danger);  }
.tx-kpi-balance .tx-kpi-icon { background: rgba(0,180,219,0.15); color: var(--accent-primary); }

.tx-kpi-icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tx-kpi-icon .lucide { width: 22px; height: 22px; }

.tx-kpi-body {
    display: flex; flex-direction: column; gap: 0.2rem;
}
.tx-kpi-label {
    font-size: 0.75rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.tx-kpi-value {
    font-size: 1.5rem; font-weight: 700;
}

/* Main Layout */
.tx-two-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.tx-section-card {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(25, 28, 41, 0.7) 0%, rgba(15, 18, 32, 0.8) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

.tx-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-glass);
}
.tx-section-title {
    display: flex; align-items: center; gap: 0.75rem;
}
.tx-section-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.income-section-icon  { background: rgba(16,185,129,0.1); color: var(--success); }
.expense-section-icon { background: rgba(239,68,68,0.1); color: var(--danger); }

.tx-section-title h3 { font-size: 1.1rem; font-weight: 600; }
.tx-section-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

.tx-section-total {
    font-size: 1.25rem; font-weight: 700;
}
.income-total  { color: var(--success); }
.expense-total { color: var(--text-main); }

/* Common inputs & buttons inside the new Tx tab */
.tx-input {
    background: rgba(0,0,0,0.25);
    border: 1px solid var(--border-glass);
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    color: var(--text-main);
    font-family: inherit; font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
}
.tx-input:focus { border-color: var(--accent-primary); }
.tx-input-amount { width: 100px; text-align: right; }
.tx-input-date { width: 140px; }
.tx-input-date::-webkit-calendar-picker-indicator {
    filter: invert(0.85) brightness(1.2); cursor: pointer;
}

.btn-tx-add {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--gradient-brand); border: none;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, box-shadow 0.15s; flex-shrink: 0;
}
.btn-tx-add:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,180,219,0.4); }
.btn-tx-add:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-tx-cancel {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-glass);
    color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s; flex-shrink: 0;
}
.btn-tx-cancel:hover { background: var(--danger-bg); color: var(--danger); border-color: rgba(239,68,68,0.3); }

/* ---- INCOME SECTION SPECIFICS ---- */
.income-source-block {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0,180,219,0.06);
    border: 1px dashed rgba(0,180,219,0.3);
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
}
.income-source-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 500; color: var(--text-muted);
}
.income-source-label .lucide { width: 16px; height: 16px; color: var(--accent-primary); }
.income-source-amount { font-size: 1.1rem; font-weight: 700; color: var(--success); }

.income-entries-list {
    display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem;
    min-height: 2rem;
}
.income-add-section {
    margin-top: auto;
    padding-top: 1.5rem; border-top: 1px solid var(--border-glass);
}
.income-add-title {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem;
    color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.income-quick-btns {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.income-quick-btn {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border-glass);
    color: var(--text-main); font-size: 0.8rem; padding: 0.4rem 0.75rem;
    border-radius: 8px; cursor: pointer; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 0.35rem;
}
.income-quick-btn .lucide { width: 14px; height: 14px; color: var(--text-muted); transition: color 0.2s; }
.income-quick-btn:hover .lucide, .income-quick-btn.active .lucide { color: var(--success); }
.income-quick-btn:hover, .income-quick-btn.active {
    background: rgba(16,185,129,0.15); border-color: var(--success); color: var(--success);
}

.income-add-form {
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
}
.income-add-form #incomeTitle { flex: 1; min-width: 120px; }

/* ---- EXPENSES SECTION SPECIFICS ---- */
.expense-cats-label {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem;
    color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.expense-cats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.expense-cat-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 14px;
    padding: 0.875rem 0.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.expense-cat-btn:hover {
    background: rgba(255,255,255,0.08); 
    transform: translateY(-4px);
    border-color: rgba(255,255,255,0.1);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.expense-cat-btn.active {
    background: linear-gradient(135deg, rgba(239,68,68,0.15) 0%, rgba(239,68,68,0.05) 100%);
    border-color: rgba(239,68,68,0.4);
    box-shadow: 0 8px 24px rgba(239,68,68,0.2);
    transform: translateY(-2px);
}
.expense-cat-btn .lucide { color: var(--text-muted); transition: color 0.2s; }
.expense-cat-btn.active .lucide { color: var(--danger); }
.expense-cat-name { font-size: 0.72rem; color: var(--text-muted); text-align: center; }
.expense-cat-btn.active .expense-cat-name { color: var(--text-main); font-weight: 600; }

.expense-quick-form {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    background: rgba(239,68,68,0.05); padding: 1rem; border-radius: 12px;
    border: 1px dashed rgba(239,68,68,0.3); margin-bottom: 1.5rem;
    animation: slideDown 0.2s ease-out;
}
.eq-selected {
    width: 100%; font-size: 0.85rem; font-weight: 600; color: var(--danger); margin-bottom: 0.25rem;
    display: flex; align-items: center; gap: 0.4rem;
}

.expense-custom-divider {
    display: flex; align-items: center; gap: 1rem;
    margin: 0.5rem 0 1rem;
    color: var(--text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}
.expense-custom-divider::before, .expense-custom-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border-glass);
}
.expense-custom-form {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 2rem;
}

.expense-history-label {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem;
    color: var(--text-muted); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
    padding-top: 1.5rem; border-top: 1px solid var(--border-glass);
}
.expense-entries-list {
    display: flex; flex-direction: column; gap: 0.5rem;
}

/* Shared Entry Rows */
.tx-entry-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.8rem;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border-glass);
    border-radius: 10px; transition: all 0.2s;
}
.tx-entry-row:hover {
    background: rgba(255,255,255,0.05); transform: translateX(2px);
}
.tx-entry-date { font-size: 0.75rem; color: var(--text-muted); width: 45px; flex-shrink: 0; }
.tx-entry-icon {
    width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.tx-entry-icon .lucide { width: 14px; height: 14px; }
.tx-entry-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tx-entry-title { font-size: 0.85rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-entry-note { font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-entry-amount { font-weight: 700; font-size: 0.95rem; }
.tx-entry-amount.inc { color: var(--success); }

.tx-loading { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* Responsive Transactions */
@media (max-width: 1000px) {
    .tx-two-col { grid-template-columns: 1fr; }
}

/* Tablet — μειωμένα paddings & summary 2 cols αντί 3 */
@media (max-width: 768px) {
    /* Page header: stack αν χρειάζεται */
    .tx-page-header { flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
    .tx-page-title { font-size: 1.4rem; }

    /* Summary KPIs: 1 column για readability — η οριζόντια σειρά κόβει τα ποσά */
    .tx-summary-row { grid-template-columns: 1fr; gap: 0.625rem; margin-bottom: 1rem; }
    .tx-kpi { padding: 0.875rem 1rem; gap: 0.75rem; }
    .tx-kpi-icon { width: 40px; height: 40px; }
    .tx-kpi-icon .lucide { width: 18px; height: 18px; }
    .tx-kpi-value { font-size: 1.2rem; }
    .tx-kpi-label { font-size: 0.7rem; }

    /* Section cards: μικρότερο padding & radius */
    .tx-section-card { padding: 1rem; border-radius: 16px; }
    .tx-section-header { margin-bottom: 1rem; padding-bottom: 0.75rem; }
    .tx-section-title h3 { font-size: 1rem; }
    .tx-section-sub { font-size: 0.7rem; }
    .tx-section-total { font-size: 1.1rem; }
    .tx-section-icon { width: 32px; height: 32px; }
    .tx-two-col { gap: 1rem; }

    /* Income source block compact */
    .income-source-block { padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
    .income-source-amount { font-size: 1rem; }

    /* Forms: stack vertically full-width */
    .income-add-form, .expense-quick-form, .expense-custom-form {
        flex-direction: column; align-items: stretch; gap: 0.5rem;
    }
    .income-add-form #incomeTitle,
    .expense-custom-form #expenseCustomTitle,
    .expense-quick-form #expenseQuickNote {
        flex: none; min-width: 0; width: 100%;
    }
    .tx-input-amount, .tx-input-date { width: 100%; min-width: 0; }
    .btn-tx-add, .btn-tx-cancel { width: 100%; height: 44px; }

    /* Quick income buttons: smaller, wrap nicely */
    .income-quick-btns { gap: 0.4rem; margin-bottom: 0.75rem; }
    .income-quick-btn { padding: 0.5rem 0.7rem; font-size: 0.75rem; }

    /* Add section padding tighter */
    .income-add-section { padding-top: 1rem; }
    .income-add-title, .expense-cats-label, .expense-history-label { font-size: 0.7rem; margin-bottom: 0.5rem; }

    /* Expense category grid: 4 columns σε μικρές οθόνες (πιο compact, καλύτερα touch) */
    .expense-cats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.4rem;
        margin-bottom: 1rem;
    }
    .expense-cat-btn { padding: 0.7rem 0.25rem; gap: 0.3rem; border-radius: 12px; }
    .expense-cat-btn .lucide { width: 18px; height: 18px; }
    .expense-cat-name { font-size: 0.62rem; line-height: 1.1; }
    .expense-cat-btn:hover { transform: none; }     /* disable hover translate σε touch */

    /* Expense quick form: μικρότερο padding */
    .expense-quick-form { padding: 0.75rem; margin-bottom: 1rem; }
    .expense-history-label { padding-top: 1rem; }
    .expense-custom-form { margin-bottom: 1rem; }

    /* Entry rows: tighter spacing */
    .tx-entry-row { padding: 0.5rem 0.6rem; gap: 0.5rem; }
    .tx-entry-row:hover { transform: none; }
    .tx-entry-date { width: 38px; font-size: 0.7rem; }
    .tx-entry-icon { width: 24px; height: 24px; }
    .tx-entry-title { font-size: 0.8rem; }
    .tx-entry-amount { font-size: 0.85rem; }
}

/* 3-column expense grid σε πολύ μικρά */
@media (max-width: 380px) {
    .expense-cats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Custom Confirm Modal ────────────────────────────────────────────── */
.confirm-modal-content {
    max-width: 400px; text-align: center; padding: 2.5rem 2rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.confirm-icon-wrap {
    width: 64px; height: 64px; border-radius: 50%;
    background: rgba(239,68,68,0.15); color: var(--danger);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.5rem;
}
.confirm-icon-wrap .lucide { width: 32px; height: 32px; }
.confirm-modal-content h3 { font-size: 1.4rem; font-weight: 600; margin: 0; color: var(--text-main); }
.confirm-modal-content p { color: var(--text-muted); font-size: 0.95rem; margin: 0 0 1.5rem 0; line-height: 1.5; }
.confirm-actions {
    display: flex; gap: 1rem; width: 100%;
}
.confirm-actions button {
    flex: 1; padding: 0.75rem; border-radius: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; border: none; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.confirm-actions button .lucide { width: 18px; height: 18px; }
.confirm-actions .btn-secondary {
    background: rgba(255,255,255,0.05); color: var(--text-main); border: 1px solid rgba(255,255,255,0.1);
}
.confirm-actions .btn-secondary:hover { background: rgba(255,255,255,0.1); }
.confirm-actions .btn-danger {
    background: var(--danger); color: white; box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}
.confirm-actions .btn-danger:hover {
    background: #dc2626; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(239,68,68,0.4);
}

/* ══════════════════════════════════════════════════════════════════════
   NEW DASHBOARD DESIGN
   ══════════════════════════════════════════════════════════════════════ */
.dash-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 2rem;
}
.dash-welcome h2 { font-size: 2rem; font-weight: 700; margin: 0 0 0.25rem 0; color: var(--text-main); }
.dash-subtitle { font-size: 0.95rem; color: var(--text-muted); margin: 0; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;}

/* KPIs */
.dash-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2rem;
}
.dash-kpi-card {
    background: linear-gradient(145deg, rgba(30, 33, 48, 0.7) 0%, rgba(20, 22, 36, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 1.5rem;
    display: flex; align-items: center; gap: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.dash-kpi-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.4); }
.dash-kpi-card .kpi-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dash-kpi-card .kpi-icon .lucide { width: 24px; height: 24px; }
.dash-kpi-card.balance .kpi-icon { background: rgba(0,180,219,0.15); color: var(--accent-primary); }
.dash-kpi-card.income .kpi-icon  { background: rgba(16,185,129,0.15); color: var(--success); }
.dash-kpi-card.expense .kpi-icon { background: rgba(239,68,68,0.15); color: var(--danger); }
.dash-kpi-card.owed .kpi-icon    { background: rgba(245,158,11,0.15); color: var(--warning); }

.kpi-info { display: flex; flex-direction: column; gap: 0.2rem; }
.kpi-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 600; }
.kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--text-main); }

/* Insights */
.dash-insights-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 2rem;
}
.insight-card {
    padding: 1.5rem;
    background: linear-gradient(145deg, rgba(25, 28, 41, 0.7) 0%, rgba(15, 18, 32, 0.8) 100%);
}
.insight-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.insight-header h3 { font-size: 1.05rem; font-weight: 600; margin: 0; color: var(--text-main); }
.insight-header .icon { width: 20px; height: 20px; color: var(--text-muted); }
.insight-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1.25rem 0; }

.progress-bar-bg {
    width: 100%; height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; margin-bottom: 0.75rem;
}
.progress-bar-fill {
    height: 100%; border-radius: 4px; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-bar-fill.warning { background: var(--warning); }
.progress-bar-fill.info { background: var(--accent-primary); }
.progress-bar-fill.danger { background: var(--danger); }
.progress-bar-fill.success { background: var(--success); }
.insight-footer { font-size: 0.85rem; font-weight: 600; margin: 0; color: var(--text-main); text-align: right; }

/* Middle Grid */
.dash-middle-grid {
    display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; margin-bottom: 2rem;
}
.dash-recent-card { padding: 1.5rem; display: flex; flex-direction: column; }
.recent-tx-list { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; min-height: 150px; }
.recent-tx-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.75rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px; transition: background 0.2s;
}
.recent-tx-item:hover { background: rgba(255,255,255,0.05); }
.rti-left { display: flex; align-items: center; gap: 0.75rem; flex: 1; min-width: 0; }
.rti-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rti-icon.inc { background: rgba(16,185,129,0.1); color: var(--success); }
.rti-icon.exp { background: rgba(239,68,68,0.1); color: var(--danger); }
.rti-icon .lucide { width: 16px; height: 16px; }
.rti-info { display: flex; flex-direction: column; min-width: 0; }
.rti-title { font-size: 0.85rem; font-weight: 600; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rti-date { font-size: 0.7rem; color: var(--text-muted); }
.rti-amount { font-size: 0.95rem; font-weight: 700; flex-shrink: 0; white-space: nowrap; padding-left: 0.5rem; }
.rti-amount.inc { color: var(--success); }
.rti-amount.exp { color: var(--text-main); }
.btn-text-only {
    background: none; border: none; color: var(--accent-primary);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    transition: opacity 0.2s;
}
.btn-text-only:hover { opacity: 0.8; }
.btn-text-only .lucide { width: 16px; height: 16px; }

/* Bottom Categories */
.dash-categories-card { padding: 1.5rem; }

/* Responsive adjustments */
@media (max-width: 1024px) {
    .dash-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-middle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .dash-kpi-grid { grid-template-columns: 1fr; }
    .dash-insights-grid { grid-template-columns: 1fr; }
}

/* ── Global Owed Section ── */
.global-owed-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.global-owed-header {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
}
.global-owed-header h4 { font-size: 0.95rem; font-weight: 600; margin: 0; color: var(--text-main); }
.global-owed-header .lucide { width: 18px; height: 18px; color: var(--danger); }
.global-owed-list { display: flex; flex-direction: column; gap: 0.5rem; }
.global-owed-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 1rem; background: rgba(239,68,68,0.05); border-radius: 8px;
    border-left: 3px solid var(--danger);
}
.global-owed-item .go-month { font-size: 0.85rem; font-weight: 600; color: var(--text-main); text-transform: capitalize; }
.global-owed-item .go-amount { font-size: 0.95rem; font-weight: 700; color: var(--danger); }
.global-owed-empty {
    text-align: center; padding: 1rem; font-size: 0.85rem; color: var(--success);
    background: rgba(16,185,129,0.05); border-radius: 8px; border: 1px dashed rgba(16,185,129,0.2);
}

/* ══════════════════════════════════════════════════════════════════════
   ANNUAL REPORT DESIGN
   ══════════════════════════════════════════════════════════════════════ */
.rep-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;
}
.rep-title { font-size: 1.8rem; font-weight: 700; margin: 0 0 0.25rem 0; color: var(--text-main); }
.rep-subtitle { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

.rep-year-badge { font-size: 1.25rem; font-weight: 700; padding: 0.4rem 1rem; background: rgba(255,255,255,0.05); border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); }

.rep-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem;
}
.rep-kpi {
    padding: 1.25rem; display: flex; align-items: center; gap: 1rem;
}
.rep-kpi-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(16,185,129,0.15); color: var(--success);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.rep-kpi-icon.danger { background: rgba(239,68,68,0.15); color: var(--danger); }
.rep-kpi-icon.primary { background: rgba(0,180,219,0.15); color: var(--accent-primary); }
.rep-kpi-icon.warning { background: rgba(245,158,11,0.15); color: var(--warning); }
.rep-kpi-info { display: flex; flex-direction: column; }
.rep-kpi-info span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.2rem; }
.rep-kpi-info strong { font-size: 1.3rem; font-weight: 700; }

.rep-layout {
    display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;
}
.rep-card-title {
    font-size: 1rem; font-weight: 600; margin: 0 0 1rem 0; color: var(--text-main);
}
.rep-chart-card { padding: 1.5rem; }

.rep-insights-col { display: flex; flex-direction: column; gap: 1rem; }
.rep-insight {
    padding: 1.25rem; display: flex; align-items: center; gap: 1rem; flex: 1;
}
.ri-icon-wrap {
    width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ri-data { display: flex; flex-direction: column; }
.ri-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.15rem; }
.ri-value { font-size: 1.1rem; font-weight: 600; color: var(--text-main); }
.ri-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.15rem; }

@media (max-width: 1024px) {
    .rep-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .rep-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .rep-header { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .rep-kpi-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE NAVIGATION REDESIGN
   ────────────────────────────────────────────────────────────────────────
   3-tier responsive strategy:
     • Desktop  (>1024px): top horizontal nav (default styles)
     • Tablet   (641-1024px): compact top nav, hide labels gradually
     • Mobile   (≤640px):  bottom navigation bar (tabs fixed στο bottom)
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tablet ── */
@media (max-width: 1024px) {
    .navbar { padding: 0.75rem 1rem; gap: 0.75rem; top: 0.75rem; }
    .logo h1, .logo-badge { display: none; }
    .user-email { display: none; }
    .user-profile { padding: 0.25rem; gap: 0.5rem; background: none; }
    .nav-tabs { gap: 0.25rem; padding: 0; }
    .tab-link { padding: 0.6rem 0.875rem; font-size: 0.875rem; }
    .btn-logout span { display: none; }
    .btn-logout {
        width: 36px; height: 36px;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(239,68,68,0.1);
        border-radius: 8px;
    }
    .btn-logout .lucide { width: 16px !important; height: 16px !important; color: var(--danger); }
}

/* ── Mobile (Bottom Nav) ── */
@media (max-width: 768px) {
    /* Horizontal padding ώστε τα cards να μη κολλάνε στις άκρες της οθόνης.
       Bottom padding για να μη κρύβει το bottom-nav το content. */
    .app-container { padding: 0 0.75rem calc(80px + env(safe-area-inset-bottom, 0px)); }

    /* Top bar: μόνο logo + logout. Edge-to-edge με safe-area inset για iPhone notch.
       Negative horizontal margin = αντισταθμίζει το container padding. */
    .navbar {
        position: sticky; top: 0;
        margin: 0 -0.75rem 1rem;
        border-radius: 0;
        border-left: none; border-right: none; border-top: none;
        padding: 0.65rem 1rem;
        padding-top: calc(0.65rem + env(safe-area-inset-top, 0px));
        background: rgba(15, 17, 26, 0.97); /* πιο αδιαφανές χωρίς blur */
        /* backdrop-filter ΑΠΑΓΟΡΕΥΕΤΑΙ εδώ: δημιουργεί containing block
           και παγιδεύει το position:fixed του nav-tabs μέσα στο navbar */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        gap: 0.5rem;
        z-index: 100;
    }
    .logo { gap: 0.6rem; }
    .logo-icon { width: 34px; height: 34px; }
    .logo h1 { display: block; font-size: 1.1rem; }   /* υπάρχει χώρος, δείχνουμε */
    .logo-badge { display: none; }

    /* User profile: εξαφανίζω text/email και κάνω τον logout button αληθινό icon-button */
    .user-info { display: none; }
    .user-profile { padding: 0; gap: 0.5rem; background: none; cursor: default; }
    .user-profile:hover { background: none; }
    .btn-logout {
        width: 40px; height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(239,68,68,0.12);
        border-radius: 10px;
        font-size: 0;     /* κρύβει το "Αποσύνδεση" text */
        padding: 0;
        order: 2;          /* logout δεξιά από avatar */
    }
    .btn-logout .lucide { width: 18px !important; height: 18px !important; color: var(--danger); }
    .btn-logout:hover { background: rgba(239,68,68,0.2); }

    /* ── Bottom navigation bar ── */
    .nav-tabs {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        margin: 0;
        padding: 0.75rem max(0.5rem, env(safe-area-inset-left, 0px))
                 max(0.5rem, env(safe-area-inset-bottom, 0px))
                 max(0.5rem, env(safe-area-inset-right, 0px));
        background: rgba(15, 17, 26, 0.94);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        border-top: 1px solid rgba(255,255,255,0.08);
        gap: 0.25rem;
        justify-content: space-around;
        overflow: visible;
        z-index: 1000;
    }

    /* Κάθε tab: icon-over-label, ίσο πλάτος, μεγάλο touch target */
    .tab-link {
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.55rem 0.4rem;
        min-height: 56px;
        text-align: center;
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1;
        border-radius: 12px;
    }
    .tab-link .lucide { width: 22px; height: 22px; }
    .tab-link span    { font-size: 0.7rem; }

    /* Disable hover transforms σε touch */
    .tab-link:hover,
    .tab-link.active:hover { transform: none; box-shadow: none; }
    .tab-link:hover .lucide,
    .tab-link.active:hover .lucide { transform: none; }
    .tab-link:hover { background: transparent; color: var(--text-muted); }

    /* Active — dark mode: gradient pill */
    .tab-link.active {
        box-shadow: 0 -2px 12px rgba(0,180,219,0.4);
    }

    /* Active — light mode: indigo icon + subtle bg, NO white icons */
    [data-theme="light"] .tab-link.active,
    [data-theme="light"] .mob-menu-tab.active {
        color: var(--accent-primary) !important;
        background: rgba(0,180,219,0.13) !important;
        box-shadow: none !important;
    }
    [data-theme="light"] .tab-link.active .lucide,
    [data-theme="light"] .mob-menu-tab.active .lucide { color: var(--accent-primary); }
}

/* ── Πολύ μικρές οθόνες (iPhone SE κ.λπ.) ── */
@media (max-width: 380px) {
    .logo h1 { font-size: 1rem; }
    .logo-icon { width: 32px; height: 32px; }
    .tab-link { padding: 0.5rem 0.25rem; }
    .tab-link span { font-size: 0.65rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════════════ */
.btn-theme {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid var(--border-glass);
    color: var(--text-muted);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.btn-theme:hover {
    color: var(--accent-primary);
    background: rgba(0,180,219,0.12);
    border-color: rgba(0,180,219,0.35);
    box-shadow: 0 0 10px rgba(0,180,219,0.2);
}
.btn-theme .lucide { width: 16px; height: 16px; }

/* Icon visibility per theme */
.theme-icon-light { display: none;        }
.theme-icon-dark  { display: inline-flex; }
[data-theme="light"] .theme-icon-dark  { display: none;        }
[data-theme="light"] .theme-icon-light { display: inline-flex; }

@media (max-width: 768px) {
    .btn-theme { width: 40px; height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════
   LIGHT THEME — palette & component overrides
   ══════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ── */
[data-theme="light"] {
    --bg-dark:      #eef0f9;
    --bg-card:      rgba(255, 255, 255, 0.76);
    --border-glass: rgba(0, 180, 219, 0.14);
    --text-main:    #1e2035;
    --text-muted:   #64748b;
    --success:      #059669;
    --success-bg:   rgba(5, 150, 105, 0.12);
    --danger:       #dc2626;
    --danger-bg:    rgba(220, 38, 38, 0.12);
    --warning:      #d97706;
    --shadow-glass: 0 4px 24px rgba(0,180,219,0.09), 0 1px 4px rgba(0,0,0,0.06);
    --blur-glass:   blur(20px);
}

/* ── Background mesh ── */
[data-theme="light"] .background-mesh {
    background:
        radial-gradient(circle at 15% 50%, rgba(0,180,219,0.09), transparent 40%),
        radial-gradient(circle at 85% 30%, rgba(0,131,176,0.07), transparent 40%);
}

/* ── Navigation ── */
[data-theme="light"] .btn-nav {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .btn-nav:hover { background: rgba(0,0,0,0.09); }

[data-theme="light"] .tab-link:hover {
    background: rgba(0,0,0,0.05);
    color: var(--text-main);
}

[data-theme="light"] .user-profile:hover { background: rgba(0,0,0,0.03); }


[data-theme="light"] .btn-theme {
    background: rgba(0,0,0,0.05);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .btn-theme:hover {
    background: rgba(0,180,219,0.1);
    border-color: rgba(0,180,219,0.35);
}

/* ── Inputs ── */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select {
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.12);
}

[data-theme="light"] .auth-input {
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.12);
    color: #1e293b;
}
[data-theme="light"] .auth-input:focus {
    border-color: rgba(0,131,176,0.5);
}
[data-theme="light"] .auth-heading { color: #0f172a; }
[data-theme="light"] .auth-app-title { color: #0f172a; }
[data-theme="light"] .py-input {
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] .tx-input {
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.12);
}
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .tx-input-date::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.5;
}

/* ── Date trigger & month-picker popup ── */
[data-theme="light"] .date-trigger {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .date-trigger:hover {
    background: rgba(0,0,0,0.07);
    border-color: rgba(0,180,219,0.35);
}
[data-theme="light"] .date-trigger.open {
    background: rgba(0,180,219,0.1);
    border-color: var(--accent-primary);
}
[data-theme="light"] .month-picker {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 24px 48px rgba(0,0,0,0.14);
}
[data-theme="light"] .mp-year-nav {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .mp-year-nav:hover { background: rgba(0,0,0,0.09); }
[data-theme="light"] .mp-month-btn:hover { background: rgba(0,0,0,0.06); color: var(--text-main); }

/* ── Transaction list items ── */
[data-theme="light"] .transaction-item {
    background: rgba(0,0,0,0.025);
}
[data-theme="light"] .transaction-item:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .t-icon              { background: rgba(0,0,0,0.06); }

/* ── Leave section ── */
[data-theme="light"] .leave-config-edit {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,180,219,0.35);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
[data-theme="light"] .leave-stat.editable           { background: rgba(0,0,0,0.03); }
[data-theme="light"] .leave-stat.editable:hover     { background: rgba(0,180,219,0.08); }
[data-theme="light"] .leave-row                     { background: rgba(0,0,0,0.025); }
[data-theme="light"] .leave-progress-bar            { background: rgba(0,0,0,0.08); }
[data-theme="light"] .leave-empty                   { background: rgba(0,0,0,0.02); }

/* ── Payroll rows & benefits ── */
[data-theme="light"] .py-entry-row                  { background: rgba(0,0,0,0.025); }
[data-theme="light"] .py-entry-row:hover            { background: rgba(0,180,219,0.06); }
[data-theme="light"] .py-entry-item                 { background: rgba(0,0,0,0.025); }
[data-theme="light"] .py-entry-item:hover           { background: rgba(0,180,219,0.06); }
[data-theme="light"] .py-prog-bar                   { background: rgba(0,0,0,0.08); }
[data-theme="light"] .bsec                          { background: rgba(0,0,0,0.025); }
[data-theme="light"] .bsec-header                   { border-bottom-color: rgba(0,0,0,0.07); }
[data-theme="light"] .bsec-row:not(.bsec-add-row):hover { background: rgba(0,180,219,0.07); }

/* ── Payment toggle ── */
[data-theme="light"] .pay-btn {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .pay-btn:hover { background: rgba(0,0,0,0.09); }

/* ── Modal overlay ── */
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.38); }

/* ── Toast ── */
[data-theme="light"] .toast-modern {
    background: rgba(255,255,255,0.97);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}
[data-theme="light"] .toast-content { color: var(--text-main); }
[data-theme="light"] .toast-close   { color: var(--text-muted); }
[data-theme="light"] .toast-close:hover { color: var(--text-main); }
[data-theme="light"] .toast-progress    { background: rgba(0,0,0,0.05); }

/* ── Transactions tab ── */
[data-theme="light"] .tx-section-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.84) 0%, rgba(244,246,255,0.9) 100%);
    border-color: rgba(0,180,219,0.14);
    box-shadow: 0 8px 32px rgba(0,180,219,0.08), 0 2px 8px rgba(0,0,0,0.05);
}
[data-theme="light"] .tx-entry-row {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.06);
}
[data-theme="light"] .tx-entry-row:hover  { background: rgba(0,0,0,0.05); }
[data-theme="light"] .tx-entry-icon       { background: rgba(0,0,0,0.06); }
[data-theme="light"] .btn-tx-cancel {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .income-quick-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .expense-cat-btn {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme="light"] .expense-cat-btn:hover {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ── Dashboard ── */
[data-theme="light"] .insight-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.84) 0%, rgba(244,246,255,0.9) 100%);
}
[data-theme="light"] .recent-tx-item {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.05);
}
[data-theme="light"] .recent-tx-item:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .progress-bar-bg      { background: rgba(0,0,0,0.07); }

/* ── Annual Report ── */
[data-theme="light"] .rep-year-badge {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .ri-icon-wrap               { background: rgba(0,0,0,0.05); }
[data-theme="light"] .report-table tbody tr:hover { background: rgba(0,0,0,0.03); }

/* ── Dashboard KPI cards ── */
[data-theme="light"] .dash-kpi-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.88) 0%, rgba(244,246,255,0.94) 100%);
    border-color: rgba(0,180,219,0.12);
    box-shadow: 0 4px 20px rgba(0,180,219,0.08), 0 1px 4px rgba(0,0,0,0.05);
}
[data-theme="light"] .dash-kpi-card:hover {
    box-shadow: 0 10px 32px rgba(0,180,219,0.12), 0 2px 8px rgba(0,0,0,0.07);
}

/* ── Payroll — specific elements ── */
[data-theme="light"] .py-overview {
    background:
        linear-gradient(135deg, rgba(0,180,219,0.04) 0%, rgba(0,131,176,0.04) 100%),
        var(--bg-card);
}
[data-theme="light"] .py-col-card,
[data-theme="light"] .py-card {
    background:
        linear-gradient(135deg, rgba(0,180,219,0.025) 0%, rgba(0,131,176,0.025) 100%),
        var(--bg-card);
}
[data-theme="light"] .salary-bar {
    background: rgba(0,180,219,0.06);
    border-color: rgba(0,180,219,0.18);
}
[data-theme="light"] .benefits-total {
    background: rgba(5,150,105,0.07);
    border-color: rgba(5,150,105,0.18);
}
[data-theme="light"] .global-owed-item {
    background: rgba(220,38,38,0.04);
}
[data-theme="light"] .py-new-row {
    border-top-color: rgba(0,180,219,0.2);
}

/* ── Global owed ── */
[data-theme="light"] .global-owed-section { border-top-color: rgba(0,0,0,0.07); }

/* ══════════════════════════════════════════════════════════════════════
   MOBILE USER PANEL
   ══════════════════════════════════════════════════════════════════════ */

/* 5th bottom-nav tab — hidden on desktop, shown in mobile bottom bar */
.mob-menu-tab {
    display: none; /* shown only via media query */
}

/* Full-screen overlay */
.mob-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mob-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* Slide-up panel */
.mob-panel {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1002;
    background: var(--bg-dark);
    backdrop-filter: var(--blur-glass);
    -webkit-backdrop-filter: var(--blur-glass);
    border-radius: 24px 24px 0 0;
    border: 1px solid var(--border-glass);
    border-bottom: none;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.4);
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.mob-panel.open {
    transform: translateY(0);
}

/* Drag handle */
.mob-handle {
    width: 40px; height: 4px;
    background: var(--border-glass);
    border-radius: 2px;
    margin: 0.875rem auto 1.5rem;
}

/* User row */
.mob-user-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0 1.5rem 1.25rem;
}
.mob-avatar-sm {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--gradient-brand);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0,180,219,0.35);
}
.mob-user-info  { display: flex; flex-direction: column; gap: 0.1rem; }
.mob-user-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.mob-user-email { font-size: 0.9rem; font-weight: 600; color: var(--text-main); }

/* Separator */
.mob-sep {
    height: 1px;
    background: var(--border-glass);
    margin: 0 1.5rem;
}

/* Generic row button */
.mob-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.mob-row:hover  { background: rgba(255,255,255,0.04); }
.mob-row-left {
    display: flex; align-items: center; gap: 0.875rem;
    color: var(--text-main);
}

/* Theme chip badge */
.mob-theme-chip {
    font-size: 0.78rem; font-weight: 700;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(0,180,219,0.15);
    border: 1px solid rgba(0,180,219,0.3);
    color: var(--accent-primary);
    white-space: nowrap;
}

/* Logout row */
.mob-logout-row { color: var(--danger); }
.mob-logout-row .mob-row-left { color: var(--danger); }
.mob-logout-row:hover { background: var(--danger-bg); }

/* ── Mobile responsive — 5th tab in bottom nav ── */
@media (max-width: 768px) {
    /* 5th tab: στυλ ίδιο με τα .tab-link στο mobile */
    .mob-menu-tab {
        display: inline-flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
        padding: 0.55rem 0.4rem;
        min-height: 56px;
        text-align: center;
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1;
        border-radius: 12px;
        color: var(--text-muted);
        background: none;
        border: none;
        cursor: pointer;
        white-space: nowrap;
        font-family: inherit;
        transition: color 0.2s, background 0.2s;
    }
    .mob-menu-tab .lucide { width: 22px; height: 22px; }
    .mob-menu-tab span    { font-size: 0.68rem; }
    /* Active — dark mode: gradient pill (same as tab-link) */
    .mob-menu-tab.active {
        color: #fff;
        background: var(--gradient-brand);
        box-shadow: 0 -2px 12px rgba(0,180,219,0.4);
    }

    /* Hide desktop-only nav elements */

    #themeToggleBtn     { display: none; }
    .user-profile       { display: none; }
}

/* ── Light theme: mobile panel ── */
[data-theme="light"] .mob-panel {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.15);
}
[data-theme="light"] .mob-handle       { background: rgba(0,0,0,0.1); }
[data-theme="light"] .mob-sep          { background: rgba(0,0,0,0.07); }
[data-theme="light"] .mob-row:hover    { background: rgba(0,0,0,0.03); }
[data-theme="light"] .mob-logout-row:hover { background: var(--danger-bg); }
[data-theme="light"] .mob-menu-btn     { box-shadow: 0 4px 12px rgba(0,180,219,0.3); }

/* ── Mobile nav in light mode ── */
@media (max-width: 768px) {
    [data-theme="light"] .navbar {
        background: rgba(234,236,249,0.99);
        border-bottom: 1px solid rgba(0,0,0,0.07);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    [data-theme="light"] .nav-tabs {
        background: rgba(234,236,249,0.97);
        border-top: 1px solid rgba(0,0,0,0.08);
    }
    [data-theme="light"] .tab-link:hover {
        background: transparent;
        color: var(--text-muted);
    }
}

/* ── PWA Install Banner ──────────────────────────────────────────────────── */
.pwa-banner {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 9998;
    max-width: 480px;
    margin: 0 auto;
    animation: slideUpBanner 0.3s ease;
}

@keyframes slideUpBanner {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.pwa-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: rgba(25, 28, 41, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 180, 219, 0.35);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
}

.pwa-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00B4DB, #00B4DB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.pwa-banner-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pwa-banner-text strong {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pwa-banner-text span {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.pwa-banner-btns {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.pwa-install-btn {
    font-size: 0.8125rem;
    padding: 0.375rem 0.875rem;
    white-space: nowrap;
}

.pwa-dismiss-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pwa-dismiss-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-main);
}

/* Shift banner above mobile bottom nav if it's visible */
@media (max-width: 640px) {
    .pwa-banner {
        bottom: 80px;
    }
}