/* Admin UI - Enterprise look and feel */
/* Softer, modern light palette by default; dark theme opt-in via data-theme="dark" */
:root {
  --bg: #f7f9fc;         /* soft off-white */
  --panel: #ffffff;      /* clean cards/panels */
  --muted: #64748b;      /* slate-500 for subtext */
  --accent: #2563eb;     /* blue-600 primary */
  --accent-2: #16a34a;   /* green-600 secondary */
  --border: #e2e8f0;     /* slate-200 borders */
  --text: #0f172a;       /* slate-900 text */
}

[data-theme="dark"] {
  --bg: #0b1220;
  --panel: #0f172a;
  --muted: #94a3b8;
  --accent: #60a5fa;     /* softer blue in dark */
  --accent-2: #34d399;   /* emerald in dark */
  --border: #1e293b;
  --text: #e5e7eb;
}

html, body { height: 100%; }
body { background: var(--bg); color: var(--text); font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; transition: background .2s ease, color .2s ease; }

.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.admin-sidebar { background: var(--panel); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-sidebar .brand {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
}
.admin-sidebar .brand h1 { margin: 0; font-size: 16px; letter-spacing: .4px; font-weight: 800; }
.admin-sidebar .brand small { color: var(--muted); }

.nav { padding: 12px; }
.nav .nav-section { margin-bottom: 8px; }
.nav .nav-title { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.nav .nav-group { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: rgba(148,163,184,.08); }
.nav .nav-item, .nav .nav-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border); transition: background .15s ease; }
.nav .nav-item:hover, .nav .nav-toggle:hover { background: rgba(148, 163, 184, .08); }
.nav .nav-item:last-child { border-bottom: 0; }
.nav .nav-item .icon { width: 22px; text-align: center; }
.nav .nav-item.active { background: rgba(37,99,235, .12); border-left: 3px solid var(--accent); padding-left: 9px; }

.nav .children { display: none; }
.nav .children.open { display: block; }
.nav .children .nav-item { padding-left: 34px; }
.nav .nav-item.disabled { opacity: .45; pointer-events: none; }

.admin-main { padding: 24px 28px; background: radial-gradient(1000px 600px at -20% -10%, rgba(37,99,235,.06), transparent), radial-gradient(700px 500px at 120% -10%, rgba(22,163,74,.06), transparent); }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.topbar .title { font-size: 20px; font-weight: 800; }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.15); }
.panel h3 { margin: 0 0 8px 0; font-size: 16px; }
.panel .sub { color: var(--muted); font-size: 13px; margin-bottom: 10px; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); color: var(--text); background: var(--panel); cursor: pointer; font-weight: 700; }
.btn.primary { background: linear-gradient(135deg, var(--accent), #1d4ed8); border: 0; color: #fff; }
.btn.outline { background: transparent; border-color: var(--border); }
.btn.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); border: 0; }

.input, textarea, select { width: 100%; background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }

.badge { display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.badge.ok { background: rgba(34,197,94,.15); color: #34d399; }
.badge.warn { background: rgba(239,68,68,.15); color: #f87171; }

.grid { display: grid; gap: 12px; }
.grid.col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.col-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .admin-layout{ grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; } .grid.col-2, .grid.col-3, .grid.col-4{ grid-template-columns: 1fr; } }

/* Platform tiles grid */
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.platform-tile { display:block; text-decoration:none; color:#fff; padding: 1.5rem; border-radius: 1rem; }
.platform-tile .tile-header { display:flex; align-items:center; gap:1rem; margin-bottom: 1rem; }
.platform-tile .tile-body { background: rgba(255,255,255,.2); padding:.75rem; border-radius:.5rem; margin-bottom:.75rem; font-size:.85rem; }
.platform-tile.is-enabled { cursor: pointer; }
.platform-tile.is-disabled { opacity: .6; cursor: not-allowed; pointer-events:none; }
.gradient-instagram { background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%); }
.gradient-facebook { background: linear-gradient(135deg, #1877f2 0%, #0c63d4 100%); }
.gradient-twitter { background: linear-gradient(135deg, #1DA1F2 0%, #0c85d0 100%); }
.gradient-linkedin { background: linear-gradient(135deg, #0077b5 0%, #005582 100%); }
.gradient-tiktok { background: linear-gradient(135deg, #000000 0%, #ee1d52 50%, #69c9d0 100%); }
.gradient-pinterest { background: linear-gradient(135deg, #E60023 0%, #bd0a1f 100%); }
.gradient-youtube { background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%); }
.gradient-snapchat { background: linear-gradient(135deg, #FFFC00 0%, #FFF000 100%); }
.gradient-threads { background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); }
.gradient-google { background: linear-gradient(135deg, #4285F4 0%, #34A853 50%, #FBBC05 75%, #EA4335 100%); }
.gradient-reddit { background: linear-gradient(135deg, #FF4500 0%, #d63a00 100%); }
.gradient-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }

/* Generic auto-fit grids for tiles/cards */
.auto-grid-200 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.auto-grid-240 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.auto-grid-250 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.auto-grid-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.auto-grid-500 { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 16px; }

/* Base cards and common patterns used across admin pages */
.settings-card, .section-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.settings-card h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; }
.settings-card p { color: var(--muted); }
.info-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.info-item { padding:12px; border:1px solid var(--border); border-radius:10px; background: var(--panel); }
.info-item strong { display:block; font-size:.8rem; color: var(--muted); margin-bottom:.25rem; }

/* Alerts */
.alert { padding: 12px; border-radius: 10px; margin-bottom: 12px; }
.alert-info { background: #1e3a8a22; color: #93c5fd; border-left: 4px solid #3b82f6; }
.alert-warning { background: #f59e0b22; color: #facc15; border-left: 4px solid #f59e0b; }
.alert-success { background: #10b98122; color: #34d399; border-left: 4px solid #10b981; }
.alert-error { background: #ef444422; color: #fca5a5; border-left: 4px solid #ef4444; }

/* Setting rows */
.setting-item { display:flex; justify-content:space-between; align-items:center; padding: 12px; background: rgba(148,163,184,.12); border-radius: 10px; margin-bottom:10px; }

/* Toggles (checkbox + slider) */
.toggle-switch { position:relative; width:60px; height:30px; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:#334155; transition:.3s; border-radius:30px; box-shadow: inset 0 0 0 1px #263146; }
.toggle-slider:before { position:absolute; content:""; height:22px; width:22px; left:4px; bottom:4px; background:#fff; transition:.3s; border-radius:50%; }
input:checked + .toggle-slider { background: linear-gradient(135deg, #0ea5e9, #2563eb); box-shadow: none; }
input:checked + .toggle-slider:before { transform: translateX(30px); }

/* Buttons mapping for legacy class names */
.btn-primary { padding:.65rem 1rem; background: linear-gradient(135deg, var(--accent), #1d4ed8); color:#fff; border:0; border-radius:10px; font-weight:700; cursor:pointer; }
.btn-outline { padding:.65rem 1rem; background:#fff; color: var(--accent); border:2px solid var(--accent); border-radius:10px; font-weight:700; cursor:pointer; }
.btn-outline:hover { background: rgba(37,99,235,.06); border-color: var(--accent); }
.btn-outline:focus-visible { outline: 3px solid rgba(37,99,235,.25); outline-offset: 1px; }
.btn-secondary { padding:.65rem 1rem; background:#fff; color: var(--text); border:1px solid var(--border); border-radius:10px; font-weight:600; cursor:pointer; }
.btn-danger { padding:.65rem 1rem; background: linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; border:0; border-radius:10px; font-weight:700; cursor:pointer; }

/* Links inside admin area */
.admin-main a { color: var(--accent); text-decoration: none; }
.admin-main a:hover { text-decoration: underline; }

/* Info tile component */
.info-tile { display:block; background: var(--panel); border:1px solid var(--border); border-radius:12px; padding:16px; box-shadow: 0 6px 24px rgba(0,0,0,.08); color: var(--text); text-decoration:none; }
.info-tile .tile-header { display:flex; align-items:center; gap:.5rem; margin-bottom:.25rem; color: var(--muted); font-size:.85rem; font-weight:700; text-transform: uppercase; letter-spacing:.06em; }
.info-tile .tile-label { line-height: 1; }
.info-tile .tile-value { font-size: 2rem; font-weight: 900; color: var(--text); margin: .25rem 0 .5rem; }
.info-tile .tile-description { font-size:.85rem; color: var(--muted); }
.info-tile.tile-success { border-left:4px solid #10b981; }
.info-tile.tile-warning { border-left:4px solid #f59e0b; }
.info-tile.tile-info { border-left:4px solid #3b82f6; }
.info-tile.tile-danger { border-left:4px solid #ef4444; }

/* Section card aliases */
.section-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 12px; }
.feature-list { display:grid; gap: 12px; }
.feature-item { display:flex; justify-content:space-between; align-items:center; padding: 12px; background: rgba(148,163,184,.12); border-radius: 10px; border:1px solid var(--border); }
.feature-info h4 { font-size: 1rem; font-weight: 700; margin: 0 0 .25rem; }
.feature-info p { font-size: .85rem; color: var(--muted); margin: 0; }
.status-badge { display:inline-block; padding: 6px 10px; border-radius:9999px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.status-badge.enabled { background:#10b98133; color:#10b981; }
.status-badge.disabled { background:#ef444433; color:#ef4444; }
.status-badge.pending { background:#f59e0b33; color:#f59e0b; }

/* Soft gradients for metric tiles (light-theme friendly) */
.gradient-deep-1 { background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%); }
.gradient-deep-2 { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.gradient-deep-3 { background: linear-gradient(135deg, #ede9fe 0%, #e9d5ff 100%); }