/* =========================================================
   assets/css/app.css - FINAL (Site + Dashboard)
   ========================================================= */

/* ========== ROOT VARIABLES ========== */
:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;

  --btn:#2563eb;
  --btn2:#3b82f6;
  --link:#2563eb;

  --okbg:#ecfdf5;
  --errbg:#fef2f2;
  --ok:#065f46;
  --err:#991b1b;

  --dark-bg:#0f172a;
  --dark-line:#1e293b;
  --dark-text:#e5e7eb;
  --dark-muted:#94a3b8;

  --radius:14px;
}

/* ========== RESET ========== */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family: system-ui,-apple-system,"Segoe UI",Arial;
  background: linear-gradient(180deg,#eef2ff,var(--bg));
  color:var(--text);
}

.wrap{
  width:min(980px,92vw);
  margin:0 auto;
}

/* =========================================================
   HEADER (GLOBAL)
   ========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  flex-shrink:0;
  background:linear-gradient(180deg,#111827,var(--dark-bg));
  border-bottom:1px solid var(--dark-line);
}

.topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
}

.brand{
  color:var(--dark-text);
  text-decoration:none;
  font-weight:700;
}

.nav a{
  color:var(--dark-muted);
  text-decoration:none;
  margin-inline-start:14px;
  font-size:14px;
}

.nav a:hover{color:var(--dark-text)}
.nav .lang{color:#93c5fd;font-weight:600}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */
.main{
  flex:1;
  padding:32px 0 60px;
}

/* ===== HERO (Homepage only) ===== */
.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* =========================================================
   FOOTER (GLOBAL)
   ========================================================= */
.footer{
  flex-shrink:0;
  border-top:1px solid var(--dark-line);
  padding:18px 0;
  background:linear-gradient(180deg,var(--dark-bg),#020617);
  color:var(--dark-muted);
}

.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* =========================================================
   DASHBOARD OVERRIDES
   ========================================================= */

/* Background */
body.dashboard{
  background:#f5f7fb;
}

/* Disable hero behavior inside dashboard */
body.dashboard .hero{
  flex:0;
  min-height:auto;
  display:block;
}

/* =========================================================
   DASHBOARD STYLES
   ========================================================= */
body.dashboard .dash-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

body.dashboard .dash-actions .link{
  margin-inline-start:12px;
  color:var(--link);
  text-decoration:none;
  font-weight:500;
}

body.dashboard .search{
  display:flex;
  gap:12px;
  margin-bottom:20px;
}

body.dashboard .search input{
  flex:1;
}

/* ===== TABLE ===== */
body.dashboard .table{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

body.dashboard .tr{
  display:grid;
  grid-template-columns: 140px 1fr 110px 90px 160px 180px;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  align-items:center;
}

body.dashboard .tr.th{
  background:#f3f4f6;
  font-weight:600;
  border-top:none;
}

body.dashboard .tr .url a{
  color:var(--link);
  text-decoration:none;
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

body.dashboard .mono{
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
}

body.dashboard .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

body.dashboard .mini-btn{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#f9fafb;
  font-size:13px;
  cursor:pointer;
}

body.dashboard .mini-btn:hover{
  background:#f3f4f6;
}

body.dashboard .mini-btn.danger{
  border-color:#fecaca;
  color:#991b1b;
  background:#fff5f5;
}

body.dashboard .muted{
  color:var(--muted);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  body.dashboard .tr{
    grid-template-columns:1fr;
  }
  body.dashboard .tr.th{
    display:none;
  }
}