/* ============================================================
   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 (black chrome) — every app page ---------- */
.sidebar-head {
  background: #0f1216;
  box-shadow: none;
  border: none;
}

#user-header-wrap {
  background: linear-gradient(135deg, #0f1216 0%, #171b21 100%);
}

.user-header {
  background: linear-gradient(135deg, #0f1216 0%, #171b21 100%);
  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;
}

/* ---------- Premium polish (visual only: elevation + interaction) ---------- */
.inner-pages .card-box,
.inner-pages .card-box-sec .card-box {
  box-shadow: 0 6px 18px rgba(15, 33, 55, 0.07);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease;
}
.inner-pages .card-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15, 33, 55, 0.14);
}
.inner-pages .folder-pages {
  box-shadow: 0 12px 30px rgba(15, 33, 55, 0.07);
}
/* Collection tiles: consistent calm elevation + hover */
.inner-pages .all-folders li > div,
.inner-pages .all-folders li .new-folder,
.inner-pages .all-folders li .service-product {
  transition: transform .18s ease, box-shadow .18s ease;
}
.inner-pages .all-folders li > div:hover,
.inner-pages .all-folders li .new-folder:hover,
.inner-pages .all-folders li .service-product:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(15, 33, 55, 0.12);
}
/* Dashboard stat tiles: gentle interactive lift */
.inner-pages .cardit-stat {
  transition: transform .18s ease, box-shadow .18s ease;
}
.inner-pages .cardit-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 33, 55, 0.11);
}
/* Primary CTA (Create Digital Card): premium orange with soft depth */
.inner-pages .sign-up-btn {
  box-shadow: 0 8px 18px rgba(246, 99, 21, 0.24);
}
.inner-pages .sign-up-btn:hover,
.inner-pages .sign-up-btn:focus {
  box-shadow: 0 12px 22px rgba(246, 99, 21, 0.30);
}

/* ============================================================
   Dark mode (opt-in via html[data-cardit-theme="dark"], set by
   the top-bar toggle + localStorage). Light stays the default.
   Broad overrides for the main app surfaces; uses !important to
   win over legacy hard-coded light colours.
   ============================================================ */
.cardit-theme-toggle {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: #fff;
  font-size: 17px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.cardit-theme-toggle:hover { background: rgba(255,255,255,.18); }
.cardit-theme-toggle-li { display: flex; align-items: center; }

html[data-cardit-theme="dark"] body.inner-pages {
  background: radial-gradient(1100px 460px at -10% -20%, #10203a 0%, rgba(16,32,58,0) 60%),
              radial-gradient(900px 420px at 110% -10%, #2a1710 0%, rgba(42,23,16,0) 52%),
              #0b1220 !important;
  color: #e6edf5 !important;
}
html[data-cardit-theme="dark"] .folder-pages {
  background: #131c2b !important; border-color: #24344a !important; color: #e6edf5;
}
html[data-cardit-theme="dark"] .top-sec h3,
html[data-cardit-theme="dark"] h1,
html[data-cardit-theme="dark"] h2,
html[data-cardit-theme="dark"] h3,
html[data-cardit-theme="dark"] h4,
html[data-cardit-theme="dark"] .title-folder h3 { color: #e9f0f8 !important; }
html[data-cardit-theme="dark"] .inner-sidebar,
html[data-cardit-theme="dark"] .inner-sidebar-info,
html[data-cardit-theme="dark"] .sidebar-info,
html[data-cardit-theme="dark"] .wrapper .about-user { background: #0f1826 !important; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .inner-sidebar-links a,
html[data-cardit-theme="dark"] .inner-sidebar .full-name,
html[data-cardit-theme="dark"] .about-user .full-name { color: #d3deec !important; }
html[data-cardit-theme="dark"] .card-box,
html[data-cardit-theme="dark"] .card-box-content,
html[data-cardit-theme="dark"] .card-box-sec .card-box,
html[data-cardit-theme="dark"] .cardit-folder-card { background: #131c2b !important; border-color: #24344a !important; color: #e6edf5; }
html[data-cardit-theme="dark"] .cardit-stat { background: #131c2b !important; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .cardit-stat .cs-num { color: #e9f0f8 !important; }
html[data-cardit-theme="dark"] .cardit-stat .cs-lbl,
html[data-cardit-theme="dark"] .cardit-card-meta,
html[data-cardit-theme="dark"] .cardit-card-description,
html[data-cardit-theme="dark"] .all-folders .card-folder small { color: #9fb0c4 !important; }
html[data-cardit-theme="dark"] .all-folders li > div,
html[data-cardit-theme="dark"] .all-folders li .new-folder,
html[data-cardit-theme="dark"] .all-folders li .service-product { background: #131c2b !important; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .form-control,
html[data-cardit-theme="dark"] .search-field input,
html[data-cardit-theme="dark"] .controls-list .drop-down input { background: #0f1826 !important; border-color: #24344a !important; color: #e6edf5 !important; }
html[data-cardit-theme="dark"] .overlay-info { background: #131c2b !important; border-color: #24344a !important; color: #e6edf5; }
html[data-cardit-theme="dark"] .overlay-info h3,
html[data-cardit-theme="dark"] .overlay-info h2 { color: #e9f0f8 !important; }
html[data-cardit-theme="dark"] .drop-down { background: #131c2b !important; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .drop-down a,
html[data-cardit-theme="dark"] .drop-down li,
html[data-cardit-theme="dark"] .drop-down strong { color: #d3deec !important; }
html[data-cardit-theme="dark"] .controls-list > li > a { color: #d3deec; }
html[data-cardit-theme="dark"] table.table,
html[data-cardit-theme="dark"] .table td,
html[data-cardit-theme="dark"] .table th { color: #dbe4ef; border-color: #24344a !important; }
html[data-cardit-theme="dark"] .get-started-btn {
  background: #1a2536 !important; border-color: #31435c !important; color: #e9f0f8 !important;
}
html[data-cardit-theme="dark"] .cardit-card-chip { background: #1a2536 !important; border-color: #31435c !important; color: #c8d5e4 !important; }