/* ═══════════════════════════════════════════════════════════════════════
   Statistik Ammar Swim · style.css
   Mobile-first · CSS custom properties · BEM-lite
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Reset & Variables ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --clr-bg:        #f0f2f5;
    --clr-surface:   #ffffff;
    --clr-border:    #e2e6ea;
    --clr-text:      #1a1a2e;
    --clr-muted:     #6b7280;
    --clr-accent:    #4f46e5;
    --clr-accent-d:  #3730a3;
    --clr-success:   #10b981;
    --clr-warning:   #f59e0b;
    --clr-danger:    #ef4444;
    --clr-ramai:     #10b981;
    --clr-sepi:      #ef4444;
    --clr-normal:    #6b7280;

    --radius:   12px;
    --radius-sm: 6px;
    --shadow:   0 1px 4px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05);
    --shadow-md:0 4px 12px rgba(0,0,0,.12);
    --gap:      1rem;
    --gap-sm:   .5rem;

    --topbar-h:  56px;
    --bnav-h:    60px;
    --sticky-top:calc(var(--topbar-h) + 8px);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    background: var(--clr-bg);
    color: var(--clr-text);
    /* bottom padding for mobile bottom-nav */
    padding-bottom: var(--bnav-h);
}

img { max-width: 100%; display: block; }
a { color: var(--clr-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout helpers ───────────────────────────────────────────────────── */
.container     { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1rem; }
.hidden        { display: none !important; }
.muted         { color: var(--clr-muted); font-size: .85rem; }
.mt-xs         { margin-top: .4rem; }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.topbar {
    position: sticky; top: 0; z-index: 100;
    height: var(--topbar-h);
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.topbar-inner  { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand         { font-weight: 700; font-size: 1rem; color: var(--clr-accent); letter-spacing: -.3px; }
.nav-actions   { display: flex; align-items: center; gap: var(--gap-sm); }
.nav-user      { font-size: .8rem; color: var(--clr-muted); display: none; }
@media (min-width: 640px) { .nav-user { display: inline; } }

/* ── Main content ─────────────────────────────────────────────────────── */
.main-content  { padding-block: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }

/* ── Card ─────────────────────────────────────────────────────────────── */
.card {
    background: var(--clr-surface);
    border-radius: var(--radius);
    border: 1px solid var(--clr-border);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}
.card h2 { font-size: 1rem; font-weight: 600; margin-bottom: .75rem; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: .85rem; font-weight: 600;
    cursor: pointer; border: none; transition: opacity .15s, transform .1s;
    white-space: nowrap;
}
.btn:hover    { opacity: .85; }
.btn:active   { transform: scale(.97); }
.btn-primary  { background: var(--clr-accent);   color: #fff; }
.btn-secondary{ background: var(--clr-success);  color: #fff; }
.btn-ghost    { background: transparent; color: var(--clr-text); border: 1px solid var(--clr-border); }
.btn-sm       { padding: .35rem .75rem; font-size: .8rem; }
.btn-icon     { font-size: 1rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Alerts ───────────────────────────────────────────────────────────── */
.alert        { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: .875rem; }
.alert-success{ background: #d1fae5; border: 1px solid #6ee7b7; color: #065f46; }
.alert-warning{ background: #fef3c7; border: 1px solid #fde68a; color: #92400e; }
.alert-error  { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; }

/* ── Page header ──────────────────────────────────────────────────────── */
.page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: var(--gap-sm);
}
.page-header h1  { font-size: 1.3rem; font-weight: 700; }
.subtitle        { color: var(--clr-muted); font-size: .85rem; }
.header-actions  { display: flex; align-items: center; flex-wrap: wrap; gap: var(--gap-sm); }
.sync-actions    { display: flex; gap: var(--gap-sm); }

/* ── Account banner ───────────────────────────────────────────────────── */
.account-banner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: .5rem; padding: .85rem 1.25rem;
}
.ab-left        { display: flex; align-items: center; gap: .65rem; }
.ab-avatar      {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-accent), #a855f7);
    color: #fff; font-size: 1rem; font-weight: 700;
    display: grid; place-items: center; flex-shrink: 0;
}
.ab-username    { font-weight: 600; display: block; }
.ab-count       { font-size: .8rem; display: block; }
.ab-date        { font-size: .8rem; }

/* ── Stats grid ───────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-sm);
}
@media (min-width: 480px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .stats-grid { grid-template-columns: repeat(6, 1fr); } }

.stat-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    display: flex; flex-direction: column; gap: .2rem;
    box-shadow: var(--shadow);
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: '';
    position: absolute; inset: 0 auto 0 0;
    width: 3px;
    background: var(--clr-accent);
    border-radius: 3px 0 0 3px;
}
.stat-card-ramai::before { background: var(--clr-ramai); }
.stat-card-sepi::before  { background: var(--clr-sepi);  }

.stat-icon  { font-size: 1.1rem; }
.stat-label { font-size: .75rem; color: var(--clr-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.stat-ramai { color: var(--clr-ramai); }
.stat-sepi  { color: var(--clr-sepi);  }
.stat-sub   { font-size: .75rem; color: var(--clr-muted); }

/* ── Two column layout ────────────────────────────────────────────────── */
.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}
@media (min-width: 768px) {
    .two-col { grid-template-columns: 1fr 1fr; }
}

/* ── Widgets (best/worst month) ───────────────────────────────────────── */
.widget-row { }
.widget-card { border-left: 4px solid var(--clr-accent); }
.widget-best  { border-left-color: var(--clr-ramai); }
.widget-worst { border-left-color: var(--clr-sepi);  }
.widget-header { display: flex; align-items: center; gap: .4rem; margin-bottom: .65rem; }
.widget-icon   { font-size: 1.2rem; }
.widget-title  { font-weight: 600; font-size: .9rem; }
.widget-body   { display: block; }
.widget-info   { flex: 1; min-width: 0; }
.widget-caption{ font-size: .85rem; font-weight: 500; margin-bottom: .3rem; }
.widget-stats  { font-size: .8rem; color: var(--clr-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.widget-link   { font-size: .75rem; color: var(--clr-accent); margin-top: .3rem; display: inline-block; }

/* ── Insight box ──────────────────────────────────────────────────────── */
.insight-box   { border-left: 4px solid var(--clr-accent); }
.insight-list  { list-style: none; display: flex; flex-direction: column; gap: .4rem; margin-bottom: .6rem; }
.insight-list li {
    padding: .4rem .6rem;
    background: #f8faff;
    border-radius: var(--radius-sm);
    font-size: .85rem;
    border-left: 3px solid var(--clr-accent);
}
.insight-note  { font-size: .78rem; }

/* ── Bar chart (horizontal) ───────────────────────────────────────────── */
.rank-list  { display: flex; flex-direction: column; gap: .6rem; }
.rank-item  {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border);
    transition: background .15s;
}
.rank-item:hover         { background: #f8faff; }
.rank-ramai              { border-left: 3px solid var(--clr-ramai); }
.rank-sepi               { border-left: 3px solid var(--clr-sepi);  }
.rank-num {
    width: 24px; height: 24px;
    background: var(--clr-accent); color: #fff;
    border-radius: 50%; font-size: .75rem; font-weight: 700;
    display: grid; place-items: center; flex-shrink: 0;
}
.rank-ramai .rank-num { background: var(--clr-ramai); }
.rank-sepi  .rank-num { background: var(--clr-sepi);  }
.rank-body   { flex: 1; min-width: 0; }
.rank-caption{ font-size: .82rem; font-weight: 500; line-height: 1.3; }
.rank-meta   { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; margin-top: .25rem; font-size: .75rem; color: var(--clr-muted); }
.rank-type   { background: #f1f5f9; padding: .1rem .4rem; border-radius: 4px; }
.rank-link   { font-size: .75rem; color: var(--clr-accent); display: inline-block; margin-top: .2rem; }

/* ── Bar chart (horizontal) ───────────────────────────────────────────── */
.bar-chart-horiz .bar-row {
    display: grid;
    grid-template-columns: 130px 1fr 60px;
    align-items: center; gap: .5rem;
    padding: .25rem 0;
}
.bar-label { font-size: .78rem; color: var(--clr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 14px; background: #f1f5f9; border-radius: 10px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 10px; transition: width .5s; }
.bar-fill-ramai  { background: linear-gradient(90deg, #10b981, #34d399); }
.bar-fill-sepi   { background: linear-gradient(90deg, #ef4444, #f87171); }
.bar-fill-normal { background: linear-gradient(90deg, var(--clr-accent), #818cf8); }
.bar-value { font-size: .78rem; font-weight: 600; text-align: right; }

/* ── Type grid ────────────────────────────────────────────────────────── */
.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--gap-sm);
}
.type-card {
    padding: .75rem;
    background: #f8faff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--clr-border);
}
.type-name   { font-weight: 700; font-size: .9rem; margin-bottom: .2rem; }
.type-count  { font-size: .78rem; color: var(--clr-muted); margin-bottom: .3rem; }
.type-stat   { font-size: .82rem; margin-bottom: .15rem; }
.type-rates  { font-size: .75rem; }

/* ── Sticky filter ────────────────────────────────────────────────────── */
.sticky-filter {
    position: sticky;
    top: var(--sticky-top);
    z-index: 50;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    background: var(--clr-surface);
    /* glass feel */
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.92);
    border: 1px solid var(--clr-border);
    box-shadow: var(--shadow-md);
}

.sticky-filter.is-stuck { box-shadow: 0 4px 20px rgba(0,0,0,.12); border-color: var(--clr-accent); }

.filter-row { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; }
.filter-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
@media (min-width: 900px) { .filter-scroll { flex-wrap: wrap; } }

.filter-group  { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.filter-title  { font-size: .75rem; font-weight: 600; color: var(--clr-muted); text-transform: uppercase; letter-spacing: .05em; flex-shrink: 0; }
.filter-link {
    padding: .25rem .6rem;
    border-radius: 20px;
    font-size: .8rem; font-weight: 500;
    color: var(--clr-muted);
    border: 1px solid transparent;
    transition: all .15s;
}
.filter-link:hover { color: var(--clr-accent); background: #eff6ff; text-decoration: none; }
.filter-link.active {
    background: var(--clr-accent); color: #fff;
    border-color: var(--clr-accent);
}

.filter-tools { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .65rem; flex-wrap: wrap; }

.search-form  { flex: 1; min-width: 160px; max-width: 320px; }
.search-input {
    width: 100%; padding: .4rem .75rem;
    border: 1px solid var(--clr-border); border-radius: 20px;
    font-size: .85rem; background: #f8faff;
    outline: none; transition: border-color .15s;
}
.search-input:focus { border-color: var(--clr-accent); }

.search-badge { font-size: .8rem; background: #eff6ff; padding: .2rem .5rem; border-radius: 4px; margin-left: .4rem; }
.search-clear { color: var(--clr-muted); margin-left: .25rem; cursor: pointer; }

/* ── View toggle ──────────────────────────────────────────────────────── */
.view-toggle { display: flex; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); overflow: hidden; }
.vtbtn {
    width: 34px; height: 30px;
    background: transparent; border: none; cursor: pointer;
    font-size: 1rem; color: var(--clr-muted);
    display: grid; place-items: center;
    transition: background .15s;
}
.vtbtn.active { background: var(--clr-accent); color: #fff; }
.vtbtn:hover:not(.active) { background: #f1f5f9; }

/* ── Post grid (card view) ────────────────────────────────────────────── */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--gap);
}

.post-card {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--clr-surface);
    transition: box-shadow .2s, transform .15s;
    display: flex; flex-direction: column;
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.post-card-ramai { border-top: 3px solid var(--clr-ramai); }
.post-card-sepi  { border-top: 3px solid var(--clr-sepi);  }
.post-card-normal{ border-top: 3px solid var(--clr-accent); }

.post-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .65rem .85rem;
    background: #f8faff;
    border-bottom: 1px solid var(--clr-border);
}
.post-card-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.post-card-ig-link {
    font-size: .75rem; font-weight: 600; color: var(--clr-accent);
    white-space: nowrap;
}
.post-card-ig-link:hover { text-decoration: underline; }
.post-card-type {
    font-size: .72rem; font-weight: 600;
    background: #e0e7ff; color: var(--clr-accent-d);
    padding: .15rem .45rem; border-radius: 4px;
}

.post-card-body { padding: .85rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.post-card-caption { font-size: .82rem; font-weight: 500; line-height: 1.4; flex: 1; }
.post-card-date    { font-size: .75rem; color: var(--clr-muted); }

.post-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
    border-top: 1px solid var(--clr-border);
    padding-top: .5rem;
    margin-top: .25rem;
}
.pcs {
    display: flex; flex-direction: column; align-items: center;
    font-size: .7rem; gap: .1rem;
}
.pcs-icon { font-size: .9rem; }
.pcs-val  { font-weight: 600; color: var(--clr-text); }

.post-card-rates {
    display: flex; flex-wrap: wrap; align-items: center; gap: .3rem;
    padding-top: .4rem;
    border-top: 1px solid var(--clr-border);
}
.rate-badge {
    font-size: .72rem; background: #f3f4f6; padding: .15rem .4rem;
    border-radius: 4px; color: var(--clr-muted);
}

/* ── Table ────────────────────────────────────────────────────────────── */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table  { width: 100%; border-collapse: collapse; font-size: .83rem; }
.data-table th {
    text-align: left; padding: .6rem .75rem;
    background: #f8faff;
    border-bottom: 2px solid var(--clr-border);
    font-weight: 600; white-space: nowrap;
    color: var(--clr-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em;
}
.data-table td { padding: .65rem .75rem; border-bottom: 1px solid var(--clr-border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f8faff; }

.th-sort { color: var(--clr-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.th-sort:hover { color: var(--clr-accent); text-decoration: none; }
.th-sort.active { color: var(--clr-accent); }

.post-cell   { min-width: 180px; }
.post-caption{ font-size: .82rem; font-weight: 500; }

.rate-sm     { font-size: .78rem; color: var(--clr-muted); }

.row-ramai td { background-color: rgba(16, 185, 129, .04); }
.row-sepi  td { background-color: rgba(239, 68, 68,  .04); }

/* ── Badges ───────────────────────────────────────────────────────────── */
.badge        { display: inline-block; padding: .2rem .5rem; border-radius: 20px; font-size: .73rem; font-weight: 600; }
.badge-ramai  { background: #d1fae5; color: #065f46; }
.badge-sepi   { background: #fee2e2; color: #991b1b; }
.badge-normal { background: #f3f4f6; color: #374151; }

.vs-badge     { display: inline-block; padding: .18rem .45rem; border-radius: 4px; font-size: .74rem; font-weight: 600; }
.vs-up        { background: #d1fae5; color: #065f46; }
.vs-down      { background: #fee2e2; color: #991b1b; }
.vs-mid       { background: #f3f4f6; color: #374151; }
.vs-muted     { background: #f9fafb; color: #9ca3af; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; }
.empty-icon  { font-size: 3rem; margin-bottom: .75rem; }
.empty-state h2 { font-size: 1.1rem; margin-bottom: .4rem; }

/* ── Sync overlay ─────────────────────────────────────────────────────── */
.sync-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15,15,30,.55);
    display: grid; place-items: center;
    backdrop-filter: blur(3px);
}
.sync-overlay[hidden] { display: none; }
.sync-overlay-card {
    background: var(--clr-surface);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    min-width: 240px;
}
.sync-spinner {
    width: 36px; height: 36px;
    border: 4px solid var(--clr-border);
    border-top-color: var(--clr-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto .85rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.sync-overlay-title { font-weight: 600; margin-bottom: .3rem; }
.sync-overlay-hint  { font-size: .8rem; }

/* ── Bottom nav (mobile) ──────────────────────────────────────────────── */
.bottom-nav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    height: var(--bnav-h);
    background: var(--clr-surface);
    border-top: 1px solid var(--clr-border);
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
}
.bnav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px; font-size: .65rem; font-weight: 500;
    color: var(--clr-muted);
    text-decoration: none;
    border: none; background: transparent; cursor: pointer;
    transition: color .15s, background .15s;
    padding: 0;
}
.bnav-item:hover, .bnav-item.active { color: var(--clr-accent); }
.bnav-item.active { background: #eff6ff; }
.bnav-icon  { font-size: 1.25rem; line-height: 1; }
.bnav-label { line-height: 1; }

@media (min-width: 768px) {
    .bottom-nav { display: none; }
    body         { padding-bottom: 0; }
}

/* ── Responsive tweaks ────────────────────────────────────────────────── */
@media (max-width: 479px) {
    :root { --gap: .75rem; }
    .card { padding: 1rem; }
    .page-header { flex-direction: column; }
    .header-actions { width: 100%; }
    .sync-actions { flex-wrap: wrap; }
    .bar-chart-horiz .bar-row { grid-template-columns: 90px 1fr 52px; }
    .post-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .stat-value { font-size: 1.2rem; }
}

@media (max-width: 359px) {
    .post-grid { grid-template-columns: 1fr; }
}

@media (min-width: 640px) {
    .post-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (min-width: 1024px) {
    .main-content { gap: 1.25rem; }
    .post-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
}