/* ============================================================
   Cardit — modern global layer
   Loaded LAST (after style.css, mg.css, webapp-compat.css) so it
   sets one consistent design language across every app page.

   Design tokens (shared with the modernised all-folders /
   folder-content pages):
     ink #222831 / #202733 · body #53616f
     surface #fff · panel #f5f8fa · border #dfe7eb
     accent #f66315 · accent-hover #c95300 · accent-tint #fff5ef
     chrome teal: header #127a63 · logo tile #0c5647
     radius 10px controls / 12px cards
     shadow 0 12px 28px rgba(15,33,55,.06)

   Chrome rules are unscoped (the header/sidebar chrome only
   exists on logged-in app pages). Component rules are scoped to
   .inner-pages and are visual-only (no layout dimensions) to
   stay safe across every page. The already-tailored
   .folder-content-page keeps its own styling (more specific).
   ============================================================ */

/* ---------- Top bar (teal chrome) — every app page ---------- */
.sidebar-head {
  background: #0c5647;
  box-shadow: none;
  border: none;
}

.user-header {
  background: #127a63;
  border-bottom: none;
}

.user-header li {
  border-right: none;
}

.user-header li input {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 10px;
  padding: 9px 12px;
  color: #ffffff;
}

.user-header li input::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

/* ---------- Buttons (visual only) ---------- */
.inner-pages .sign-up-btn {
  border: 1px solid #f66315;
  border-radius: 10px;
  background: #f66315;
  color: #ffffff;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.inner-pages .sign-up-btn:hover,
.inner-pages .sign-up-btn:focus {
  background: #d95400;
  border-color: #d95400;
  color: #ffffff;
}

.inner-pages .get-started-btn {
  border: 1px solid #cfd9e0;
  border-radius: 10px;
  background: #ffffff;
  color: #222831;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.inner-pages .get-started-btn:hover,
.inner-pages .get-started-btn:focus {
  border-color: #f66315;
  background: #fff5ef;
  color: #c95300;
}

/* ---------- Form inputs (visual only, height unchanged) ---------- */
.inner-pages .form-control {
  border: 1px solid #dfe7eb;
  border-radius: 10px;
  box-shadow: none;
  color: #33404d;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.inner-pages .form-control:focus {
  border-color: #f66315;
  box-shadow: 0 0 0 3px rgba(246, 99, 21, 0.15);
  outline: none;
}

/* ---------- Modal popups (create / rename / confirm) ---------- */
.inner-pages .overlay-info {
  border-radius: 16px;
  border: 1px solid #dfe7eb;
  box-shadow: 0 24px 60px rgba(15, 33, 55, 0.18);
}

.inner-pages .overlay-info h3 {
  color: #222831;
  font-weight: 700;
}