/* ══════════════════════════════════════════════════════
   Collecto Admin v2 — Main Stylesheet
   ══════════════════════════════════════════════════════ */

/* ─── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #f4f5f7; color: #333; }
a { color: #0066cc; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ─── Login page ───────────────────────────────────── */
body.login-page { display:flex; align-items:center; justify-content:center;
                  min-height:100vh; background: #1a1a2e; }
.login-wrap { width: 100%; max-width: 420px; padding: 20px; }
.login-box  { background:#fff; border-radius:8px; padding:40px;
              box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.login-logo { text-align:center; margin-bottom:24px; }
.login-logo img { max-height:80px; }
.login-box h2 { text-align:center; margin-bottom:20px; color:#1a1a2e; }

/* ─── App shell ────────────────────────────────────── */
.app-shell { display:flex; min-height:100vh; }

/* ─── Sidebar ──────────────────────────────────────── */
.sidebar { width:220px; min-width:220px; background:#1a1a2e; color:#ccc;
           display:flex; flex-direction:column; }
.sidebar-logo { padding:20px 16px; border-bottom:1px solid #2e2e4e; background:#47a535; }
.sidebar-logo img { max-height:50px; filter:brightness(1.2); }

/* Nav menu */
.nav-menu { flex:1; padding:12px 0; }
.nav-menu ul { list-style:none; }
.nav-menu li a { display:block; padding:9px 20px; color:#b0b8cc;
                 font-size:13px; transition:background .15s; }
.nav-menu li a:hover,
.nav-menu li.active > a { background:#2e2e4e; color:#fff; text-decoration:none; }
.nav-menu li.nav-section { padding:14px 20px 4px; font-size:10px;
                            letter-spacing:.08em; color:#666; text-transform:uppercase; }
.nav-menu li.nav-divider { border-top:1px solid #2e2e4e; margin:8px 0; }

/* ─── Main content ─────────────────────────────────── */
.content { flex:1; display:flex; flex-direction:column; overflow:hidden; }

.topbar { background:#fff; border-bottom:1px solid #e0e0e0; padding:0 24px;
          height:52px; display:flex; align-items:center; justify-content:space-between;
          font-size:13px; }
.topbar-title { font-size:16px; font-weight:600; color:#1a1a2e; }
.topbar-user  { color:#666; }
/* Logout button — base style used in topbar */
.btn-logout-link { background:none; border:none; padding:0; margin:0; color:inherit;
                   font:inherit; cursor:pointer; text-decoration:underline; }
/* In the sidebar nav it must look and behave exactly like a nav <a> link */
.nav-menu .btn-logout-link { display:block; width:100%; padding:9px 20px;
                              color:#b0b8cc; font-size:13px; text-align:left;
                              text-decoration:none; transition:background .15s; }
.nav-menu .btn-logout-link:hover { background:#2e2e4e; color:#fff; }

.page-body { flex:1; padding:24px; overflow-y:auto; }

/* ─── Cards ────────────────────────────────────────── */
.card { background:#fff; border-radius:6px; box-shadow:0 1px 4px rgba(0,0,0,.1);
        padding:20px; margin-bottom:20px; }
.card-title { font-size:15px; font-weight:600; margin-bottom:16px;
              padding-bottom:10px; border-bottom:1px solid #eee; color:#1a1a2e; }

/* ─── Forms ────────────────────────────────────────── */
.form-group { margin-bottom:16px; }
.form-group label { display:block; margin-bottom:5px; font-weight:500; font-size:13px; }
.form-control { width:100%; padding:8px 10px; border:1px solid #ccc;
                border-radius:4px; font-size:13px; transition:border .2s; }
.form-control:focus { outline:none; border-color:#0066cc;
                      box-shadow:0 0 0 3px rgba(0,102,204,.12); }
.form-control[readonly] { background:#f8f8f8; }
textarea.form-control { min-height:120px; resize:vertical; }
.form-row { display:flex; gap:16px; flex-wrap:wrap; }
.form-row .form-group { flex:1; min-width:140px; }
.form-hint { font-size:11px; color:#888; margin-top:3px; }

/* ─── Buttons ──────────────────────────────────────── */
.btn { display:inline-block; padding:8px 16px; border-radius:4px; font-size:13px;
       font-weight:500; border:none; cursor:pointer; text-align:center; transition:.15s; }
.btn:hover { opacity:.88; text-decoration:none; }
.btn-primary   { background:#0066cc; color:#fff; }
.btn-success   { background:#28a745; color:#fff; }
.btn-danger    { background:#dc3545; color:#fff; }
.btn-warning   { background:#fd7e14; color:#fff; }
.btn-secondary { background:#6c757d; color:#fff; }
.btn-info      { background:#17a2b8; color:#fff; }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-lg { padding:12px 22px; font-size:15px; }
.btn-block { display:block; width:100%; }

/* Platform publish buttons */
.btn-ml   { background:#ffe600; color:#333; font-weight:700; }
.btn-wp   { background:#21759b; color:#fff; }
.btn-lbr  { background:#c0392b; color:#fff; }

/* ─── Tables ───────────────────────────────────────── */
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; border-collapse:collapse; font-size:13px; }
table.data-table thead th { background:#1a1a2e; color:#fff; padding:10px 12px;
                             text-align:left; white-space:nowrap; }
table.data-table tbody tr { border-bottom:1px solid #f0f0f0; }
table.data-table tbody tr:hover { background:#f9f9f9; }
table.data-table tbody td { padding:9px 12px; vertical-align:middle; }
table.data-table tbody tr:nth-child(even) { background:#fafafa; }

/* ─── Alerts ───────────────────────────────────────── */
.alert { padding:12px 16px; border-radius:4px; margin-bottom:16px; font-size:13px; }
.alert-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.alert-error   { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }
.alert-info    { background:#d1ecf1; color:#0c5460; border:1px solid #bee5eb; }
.alert-warning { background:#fff3cd; color:#856404; border:1px solid #ffeeba; }

/* ─── Badges ───────────────────────────────────────── */
.badge { display:inline-block; padding:2px 8px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-role.badge-admin { background:#1a1a2e; color:#fff; }
.badge-role.badge-user  { background:#6c757d; color:#fff; }
.badge-success { background:#28a745; color:#fff; }
.badge-error   { background:#dc3545; color:#fff; }
.badge-pending { background:#fd7e14; color:#fff; }
.badge-active  { background:#28a745; color:#fff; }
.badge-inactive{ background:#aaa;    color:#fff; }

/* ─── Product list action icons ─────────────────────── */
.action-icons { display:inline-flex; align-items:center; gap:5px; flex-wrap:nowrap; }
.action-icons a { display:inline-flex; align-items:center; line-height:1; cursor:pointer; }
.action-icons a:hover { opacity:0.7; text-decoration:none; }
.action-icon { width:20px; height:20px; object-fit:contain; display:block; }

/* ─── Image grid ───────────────────────────────────── */
.img-grid { display:flex; flex-wrap:wrap; gap:12px; }
.img-card  { position:relative; width:130px; text-align:center;
             border:2px solid #ddd; border-radius:6px; overflow:hidden;
             background:#f8f8f8; }
.img-card.is-main { border-color:#0066cc; }
.img-card img { width:100%; height:100px; object-fit:cover; display:block; }
.img-card .img-actions { padding:6px; display:flex; gap:4px; justify-content:center; flex-wrap:wrap; }
.img-card .lbl-main { font-size:10px; font-weight:700; color:#0066cc; display:block; }

/* ─── Publish log ──────────────────────────────────── */
.publish-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.publish-tile { flex:1; min-width:160px; background:#f8f8f8; border-radius:6px;
                padding:14px; border:1px solid #e0e0e0; text-align:center; }
.publish-tile .platform-name { font-weight:700; font-size:13px; margin-bottom:8px; }
.publish-tile .ext-id { font-size:11px; color:#666; word-break:break-all; }

/* ─── Dropzone upload ──────────────────────────────── */
.dropzone-box { border:2px dashed #0066cc; border-radius:6px; padding:30px;
                text-align:center; cursor:pointer; color:#666; background:#f0f6ff; }
.dropzone-box:hover { background:#e6f0ff; }

/* ─── Misc ─────────────────────────────────────────── */
.text-right { text-align:right; }
.text-center { text-align:center; }
.mb-0 { margin-bottom:0; }
.mb-1 { margin-bottom:8px; }
.mb-2 { margin-bottom:16px; }
.mb-3 { margin-bottom:24px; }
.mt-1 { margin-top:8px; }
.mt-2 { margin-top:16px; }
.flex-between { display:flex; justify-content:space-between; align-items:center; }
.user-filter-bar { display:flex; gap:12px; align-items:center; margin-bottom:16px;
                   padding:12px 16px; background:#fff; border-radius:6px;
                   border:1px solid #e0e0e0; }
.sync-progress { font-size:16px; line-height:2; }

/* ─── Hamburger button (hidden on desktop) ──────────── */
.hamburger {
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:24px; height:18px;
    background:none; border:none;
    cursor:pointer; padding:0;
    margin-right:14px; flex-shrink:0;
}
.hamburger span {
    display:block; height:2px; width:100%;
    background:#333; border-radius:2px;
    transition:transform .2s, opacity .2s;
}
/* Animate to X when open */
.sidebar.open ~ * .hamburger span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.sidebar.open ~ * .hamburger span:nth-child(2) { opacity:0; }
.sidebar.open ~ * .hamburger span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

/* ─── Sidebar overlay (mobile tap-to-close) ─────────── */
.sidebar-overlay {
    display:none;
    position:fixed; inset:0;
    z-index:199;
    background:rgba(0,0,0,.45);
}

/* ─── Mobile responsive ─────────────────────────────── */
@media (max-width:768px) {

    /* Sidebar becomes a slide-in overlay */
    .sidebar {
        position:fixed;
        top:0; left:0; bottom:0;
        z-index:200;
        transform:translateX(-220px);
        transition:transform .25s ease;
        overflow-y:auto;
    }
    .sidebar.open {
        transform:translateX(0);
        box-shadow:4px 0 24px rgba(0,0,0,.4);
    }
    .sidebar.open + .sidebar-overlay { display:block; }

    /* Content fills full width */
    .app-shell { display:block; }
    .content { width:100%; min-width:0; }

    /* Show hamburger */
    .hamburger { display:flex; }

    /* Topbar adjustments */
    .topbar { padding:0 14px; gap:0; }
    .topbar-title { font-size:14px; flex:1; white-space:nowrap;
                    overflow:hidden; text-overflow:ellipsis; }
    .topbar-user { font-size:12px; white-space:nowrap; }
    .topbar-sep { display:none; }

    /* Tighter page padding */
    .page-body { padding:14px; }

    /* Cards full width */
    .card[style*="max-width"] { max-width:100% !important; }

    /* Form rows stack on small screens */
    .form-row { flex-direction:column; gap:0; }

    /* Publish tiles wrap tighter */
    .publish-tile { min-width:130px; }
}