/* ============================================================
   Vocabs System — Design tokens from Zoom 2024–2026 identity
   ============================================================ */

:root {
  /* Brand colors */
  --blue:        #0B5CFF;
  --blue-hover:  #0E72ED;
  --navy:        #00053D;
  --near-black:  #00031F;
  --white:       #FFFFFF;
  --off-white:   #F3F8FF;
  --blue-tint1:  #E6F0FF;
  --blue-tint2:  #D1DEF2;
  --mid-gray:    #696B6E;
  --light-gray:  #F8F8F8;
  --fog:         #F4F4F4;
  --divider:     #E0E0E6;
  --green:       #466854;

  /* Gradients */
  --grad-text-dark:  linear-gradient(90deg, #006be5, #4ab5ff);
  --grad-hero:       radial-gradient(400% 240% at 50% 100%,
                       #fff 0%, #c7c5fd 30%, rgba(154,103,250,.6) 55%,
                       #264cab 75%, #00031d 100%);
  --grad-ai:         linear-gradient(-81.05deg, #fb327e 0%, #0b5cff 100%);

  /* Shadows */
  --shadow-card: rgba(0,0,0,.20) 0px -9px 75px 0px,
                 rgba(0,0,0,.15) 0px -2px 20px 0px,
                 rgba(0,0,0,.10) 0px -1px 10px 0px;
  --shadow-panel: 0px 2.7px 14.4px rgba(0,0,0,.06) inset,
                  0px 1.1px 6px rgba(0,0,0,.04) inset;

  /* Typography */
  --font-head: 'Happy Face Semi Bold', Helvetica, Arial, sans-serif;
  --font-body: 'Almaden Sans', Helvetica, Arial, sans-serif;

  /* Radii */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  20px;
  --r-pill:99px;
}

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

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--navy);
  background: var(--white);
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

/* ---- Top Nav ---- */
.topnav {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  height: 56px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.topnav .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
}
.topnav .brand img { height: 32px; }
.topnav .nav-links { display: flex; gap: 8px; }
.topnav .nav-links a {
  color: var(--white);
  font-size: 14px; font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-lg);
  transition: background .2s;
}
.topnav .nav-links a:hover,
.topnav .nav-links a.active { background: rgba(255,255,255,.12); }
.topnav .nav-user {
  display: flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  padding: 6px 10px;
  cursor: default;
}
.role-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px; font-weight: 600;
}
.role-badge.role-superadmin { background: rgba(11,92,255,.3); color: #7db3ff; }
.role-badge.role-author      { background: rgba(255,255,255,.1); color: rgba(255,255,255,.6); }

/* ---- Page Wrapper ---- */
.page-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px;
}

/* ---- Hero Banner ---- */
.hero {
  background: var(--grad-hero);
  color: var(--white);
  padding: 48px 32px;
  border-radius: var(--r-xl);
  margin-bottom: 32px;
}
.hero h1 {
  font-family: var(--font-head);
  font-size: 36px;
  line-height: 1.15;
  font-weight: 600;
}
.hero p { font-size: 16px; opacity: .85; margin-top: 8px; }

/* ---- Cards ---- */
.card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: 16px; }
.card-title {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 16px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--r-lg);
  border: none; cursor: pointer;
  transition: background .2s, transform .1s;
  text-decoration: none;
  line-height: 1;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  background: var(--blue);
  color: var(--white);
}
.btn-primary:hover { background: var(--blue-hover); color: var(--white); }

.btn-secondary {
  background: var(--blue-tint1);
  color: var(--navy);
  border: 0.8px solid var(--blue-tint2);
}
.btn-secondary:hover { background: var(--blue-tint2); }

.btn-danger {
  background: #dc3545;
  color: var(--white);
}
.btn-danger:hover { background: #b02a37; }

.btn-sm { font-size: 13px; padding: 6px 14px; }

/* ---- Form Controls ---- */
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--mid-gray);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.form-control {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--divider);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--navy);
  background: var(--white);
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11,92,255,.12);
}

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--divider); }
table { width: 100%; border-collapse: collapse; }
thead { background: var(--navy); color: var(--white); }
thead th {
  padding: 12px 16px;
  font-size: 13px; font-weight: 600;
  text-align: left; text-transform: uppercase; letter-spacing: .04em;
}
tbody tr { border-bottom: 1px solid var(--divider); }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--off-white); }
tbody td { padding: 12px 16px; font-size: 14px; }

/* ---- Alert ---- */
.alert {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  margin-bottom: 16px;
}
.alert-success { background: #d1e7dd; color: #0a3622; border: 1px solid #a3cfbb; }
.alert-danger  { background: #f8d7da; color: #58151c; border: 1px solid #f1aeb5; }
.alert-info    { background: var(--blue-tint1); color: var(--navy); border: 1px solid var(--blue-tint2); }

/* ---- Breadcrumb ---- */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--mid-gray);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--blue); }
.breadcrumb .sep { color: var(--divider); }

/* ---- Badge ---- */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 12px; font-weight: 600;
}
.badge-blue   { background: var(--blue-tint1); color: var(--blue); }
.badge-navy   { background: var(--navy); color: var(--white); }
.badge-green  { background: #d1e7dd; color: #0a3622; }

/* ---- Empty state ---- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--mid-gray);
}
.empty-state i { font-size: 48px; margin-bottom: 16px; display: block; opacity: .4; }
.empty-state p { font-size: 15px; }

/* ---- Mobile scroll smoothness ---- */
* { -webkit-overflow-scrolling: touch; }

html, body {
  scroll-behavior: smooth;
}

.table-wrap,
.page-wrapper,
.card {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}