/* ==========================================================================
   VEdit theme: modern dark / light. Used by the dashboard, the login pages,
   the jConfirm modals and (lightly) the page builder chrome.
   Colours are tokens, so light and dark share the same rules.
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --vd-bg: #f4f6fb;
  --vd-surface: #ffffff;
  --vd-surface-2: #f0f3fa;
  --vd-border: #e1e6f0;
  --vd-text: #161b2e;
  --vd-muted: #6b7491;
  --vd-accent: #5046e5;
  --vd-accent-2: #8b5cf6;
  --vd-accent-soft: rgba(80, 70, 229, .10);
  --vd-input: #ffffff;
  --vd-shadow: 0 10px 30px rgba(22, 27, 46, .08);
  --vd-hero: linear-gradient(135deg, #e8ecff 0%, #efe6ff 55%, #e2f4ff 100%);
}
[data-bs-theme="dark"] {
  --vd-bg: #0c111d;
  --vd-surface: #131a2a;
  --vd-surface-2: #1b2438;
  --vd-border: #263149;
  --vd-text: #e8ecf8;
  --vd-muted: #8f9bb8;
  --vd-accent: #6d63ff;
  --vd-accent-2: #a78bfa;
  --vd-accent-soft: rgba(109, 99, 255, .16);
  --vd-input: #1b2438;
  --vd-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  --vd-hero: radial-gradient(1200px 400px at 0% 0%, rgba(80, 160, 190, .35), transparent 60%), radial-gradient(900px 400px at 100% 0%, rgba(139, 92, 246, .35), transparent 55%), #10172a;
}


/* Bootstrap variables follow the tokens ONLY on the dashboard pages (the page builder has its own theme). */
body.vd {
  --bs-body-bg: var(--vd-bg); --bs-body-color: var(--vd-text); --bs-primary: var(--vd-accent); --bs-border-color: var(--vd-border);
  --bs-tertiary-bg: var(--vd-surface-2); --bs-secondary-color: var(--vd-muted);
}
[data-bs-theme="light"] body.vd { --bs-primary-rgb: 80, 70, 229; }
[data-bs-theme="dark"] body.vd { --bs-primary-rgb: 109, 99, 255; }

body.vd { background: var(--vd-bg); color: var(--vd-text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
body.vd a { color: var(--vd-accent); }
body.vd .text-secondary, body.vd .text-body-secondary { color: var(--vd-muted) !important; }
body.vd code { background: var(--vd-surface-2); color: var(--vd-accent-2); padding: .1rem .35rem; border-radius: 6px; }

/* ---- top bar ---------------------------------------------------------- */
.vd-nav { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--vd-surface) 82%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--vd-border); }
.vd-nav .navbar-brand { font-weight: 700; letter-spacing: -.02em; color: var(--vd-text); }
.vd-nav .nav-link { color: var(--vd-muted); font-weight: 500; border-radius: 10px; padding: .45rem .8rem; }
.vd-nav .nav-link:hover, .vd-nav .nav-link.active { color: var(--vd-text); background: var(--vd-surface-2); }
.vd-user { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .75rem .25rem .3rem; border-radius: 999px; background: var(--vd-surface-2); font-size: .85rem; color: var(--vd-muted); }
.vd-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--vd-accent), var(--vd-accent-2)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .75rem; }
.vd-iconbtn { border: 1px solid var(--vd-border); background: var(--vd-surface); color: var(--vd-muted); width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.vd-iconbtn:hover { color: var(--vd-text); border-color: var(--vd-accent); }

/* ---- page header ------------------------------------------------------ */
.vd-hero { background: var(--vd-hero); border: 1px solid var(--vd-border); border-radius: 22px; padding: 1.6rem 1.8rem; margin-bottom: 1.4rem; box-shadow: var(--vd-shadow); }
.vd-hero h1 { font-size: 1.55rem; font-weight: 750; letter-spacing: -.025em; margin: 0; }
.vd-hero .sub { color: var(--vd-muted); font-size: .92rem; }

/* ---- cards, tables, forms ---------------------------------------------- */
body.vd .card { background: var(--vd-surface); border: 1px solid var(--vd-border); border-radius: 18px; box-shadow: var(--vd-shadow); }
body.vd .card-footer { background: transparent; border-top: 1px solid var(--vd-border); }
body.vd .card.border-danger { border-color: rgba(220, 53, 69, .5); }
body.vd .table { --bs-table-bg: transparent; --bs-table-color: var(--vd-text); --bs-table-hover-bg: var(--vd-surface-2); --bs-table-border-color: var(--vd-border); }
body.vd .table > thead th { color: var(--vd-muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--vd-border); background: transparent; }
body.vd .table-responsive { border-radius: 18px; }
body.vd .form-control, body.vd .form-select { background: var(--vd-input); color: var(--vd-text); border: 1px solid var(--vd-border); border-radius: 12px; padding: .6rem .85rem; }
body.vd .form-control::placeholder { color: var(--vd-muted); opacity: .8; }
body.vd .form-control:focus, body.vd .form-select:focus { border-color: var(--vd-accent); box-shadow: 0 0 0 .22rem var(--vd-accent-soft); background: var(--vd-input); color: var(--vd-text); }
body.vd .form-label { font-weight: 600; font-size: .86rem; margin-bottom: .35rem; }
body.vd .form-check-input:checked { background-color: var(--vd-accent); border-color: var(--vd-accent); }
body.vd .alert { border-radius: 14px; border: 1px solid var(--vd-border); }
body.vd .breadcrumb { --bs-breadcrumb-divider-color: var(--vd-muted); }

/* ---- buttons ----------------------------------------------------------- */
body.vd .btn { border-radius: 12px; font-weight: 600; padding: .5rem .95rem; }
body.vd .btn-sm { border-radius: 10px; padding: .3rem .65rem; }
body.vd .btn-primary { background: linear-gradient(135deg, var(--vd-accent), var(--vd-accent-2)); border: 0; color: #fff; box-shadow: 0 6px 16px var(--vd-accent-soft); }
body.vd .btn-primary:hover, body.vd .btn-primary:focus { filter: brightness(1.08); color: #fff; }
body.vd .btn-outline-secondary, body.vd .btn-outline-primary { border-color: var(--vd-border); color: var(--vd-text); background: transparent; }
body.vd .btn-outline-secondary:hover { background: var(--vd-surface-2); color: var(--vd-text); border-color: var(--vd-muted); }
body.vd .btn-outline-primary:hover { background: var(--vd-accent-soft); color: var(--vd-accent); border-color: var(--vd-accent); }
.vd-generate { width: 100%; padding: .8rem 1rem !important; font-size: 1rem; letter-spacing: .02em; }

/* ---- badges and tabs ---------------------------------------------------- */
body.vd .badge { border-radius: 999px; font-weight: 600; padding: .38em .7em; }
body.vd .nav-tabs { border-bottom: 0; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.2rem !important; }
body.vd .nav-tabs .nav-link { border: 1px solid var(--vd-border); background: var(--vd-surface); color: var(--vd-muted); border-radius: 999px; padding: .42rem 1rem; font-weight: 600; }
body.vd .nav-tabs .nav-link:hover { color: var(--vd-text); border-color: var(--vd-muted); }
body.vd .nav-tabs .nav-link.active { background: var(--vd-accent-soft); color: var(--vd-accent); border-color: var(--vd-accent); }

/* ---- project cards ------------------------------------------------------ */
.vd-project { transition: transform .15s ease, border-color .15s ease; }
.vd-project:hover { transform: translateY(-3px); border-color: var(--vd-accent); }
.vd-project .vd-dot { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--vd-accent), var(--vd-accent-2)); }

/* ---- auth pages --------------------------------------------------------- */
.vd-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: var(--vd-hero); }
.vd-auth .card { width: 100%; max-width: 440px; padding: .6rem; }

/* ---- datepicker + fontpicker follow the tokens -------------------------- */
body.vd .arise-datepicker-display { cursor: pointer; }

/* ---- jConfirm modals ----------------------------------------------------- */
.jconfirm.jconfirm-vedit .jconfirm-bg { background-color: rgba(8, 12, 24, .62) !important; backdrop-filter: blur(6px); opacity: 1 !important; }
.jconfirm.jconfirm-vedit .jconfirm-box { background: var(--vd-surface); color: var(--vd-text); border: 1px solid var(--vd-border); border-radius: 22px; box-shadow: var(--vd-shadow); padding: 0; font-family: inherit; }
.jconfirm.jconfirm-vedit .jconfirm-box div.jconfirm-title-c { padding: 1.4rem 1.6rem .2rem; font-size: 1.25rem; font-weight: 750; letter-spacing: -.02em; color: var(--vd-text); }
.jconfirm.jconfirm-vedit .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c { color: var(--vd-accent); }
.jconfirm.jconfirm-vedit .jconfirm-box div.jconfirm-content-pane { margin: 0; }
.jconfirm.jconfirm-vedit .jconfirm-box div.jconfirm-content { padding: .4rem 1.6rem 1rem; color: var(--vd-text); overflow: visible; }
.jconfirm.jconfirm-vedit .jconfirm-box .jconfirm-buttons { padding: .4rem 1.6rem 1.4rem; float: none; display: flex; justify-content: flex-end; gap: .5rem; }
.jconfirm.jconfirm-vedit .jconfirm-box .jconfirm-buttons button { border-radius: 12px; font-weight: 650; padding: .55rem 1.1rem; border: 1px solid var(--vd-border); background: var(--vd-surface-2); color: var(--vd-text); margin: 0; text-transform: none; }
.jconfirm.jconfirm-vedit .jconfirm-box .jconfirm-buttons button.btn-primary { background: linear-gradient(135deg, var(--vd-accent), var(--vd-accent-2)); border: 0; color: #fff; }
.jconfirm.jconfirm-vedit .jconfirm-box .jconfirm-buttons button.btn-danger { background: #dc3545; border: 0; color: #fff; }
.jconfirm.jconfirm-vedit .jconfirm-box .jconfirm-buttons button:disabled { opacity: .5; }
.jconfirm.jconfirm-vedit .jconfirm-box .jconfirm-closeIcon { color: var(--vd-muted); }
.jconfirm.jconfirm-vedit .vd-sub { color: var(--vd-muted); font-size: .9rem; margin: -.2rem 0 1rem; }
.jconfirm.jconfirm-vedit .form-control, .jconfirm.jconfirm-vedit .form-select { background: var(--vd-input); color: var(--vd-text); border: 1px solid var(--vd-border); border-radius: 12px; padding: .6rem .85rem; width: 100%; }
.jconfirm.jconfirm-vedit .form-label, .jconfirm.jconfirm-vedit label.vd-l { display: block; font-weight: 650; font-size: .85rem; margin: .8rem 0 .35rem; }

/* AI / icon / schedule dialogs */
.vd-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.vd-row > * { flex: 1 1 200px; }
.vd-link { background: none; border: 0; color: var(--vd-accent); font-weight: 600; font-size: .85rem; padding: 0; }
.vd-adv { border-top: 1px solid var(--vd-border); margin-top: 1rem; padding-top: .6rem; }
.vd-adv > summary { cursor: pointer; text-align: center; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: var(--vd-muted); list-style: none; padding: .4rem; }
.vd-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .7rem; border-radius: 999px; background: var(--vd-accent-soft); color: var(--vd-accent); font-size: .78rem; font-weight: 650; }
.vd-preview { width: 100%; height: 330px; border: 1px solid var(--vd-border); border-radius: 14px; background: #fff; }
.vd-split { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.vd-box { border: 1px solid var(--vd-border); background: var(--vd-surface-2); border-radius: 14px; padding: .8rem 1rem; max-height: 240px; overflow: auto; font-size: .92rem; }
.vd-modes { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .8rem; }
.vd-modes button { border: 1px solid var(--vd-border); background: var(--vd-surface); color: var(--vd-text); border-radius: 999px; padding: .32rem .8rem; font-size: .84rem; font-weight: 600; }
.vd-modes button.active { background: var(--vd-accent-soft); border-color: var(--vd-accent); color: var(--vd-accent); }
.vd-progress { height: 10px; border-radius: 999px; background: var(--vd-surface-2); overflow: hidden; margin: 1rem 0 .5rem; }
.vd-progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--vd-accent), var(--vd-accent-2)); transition: width .3s ease; }
.vd-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--vd-border); border-top-color: var(--vd-accent); border-radius: 50%; animation: vdspin .8s linear infinite; vertical-align: -3px; margin-right: .4rem; }
@keyframes vdspin { to { transform: rotate(360deg); } }
.vd-err { color: #dc3545; font-weight: 600; margin-top: .6rem; }
.vd-ok { color: #22a06b; font-weight: 600; }
.vd-seo-field { margin-bottom: .6rem; }
.vd-seo-field .hd { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: var(--vd-muted); font-weight: 600; margin-bottom: .2rem; }
.vd-tag { display: inline-block; padding: .15rem .6rem; margin: 0 .3rem .3rem 0; border-radius: 999px; background: var(--vd-surface-2); border: 1px solid var(--vd-border); font-size: .82rem; }

/* icon picker */
.vd-icons { display: grid; grid-template-columns: 190px 1fr; gap: 1rem; min-height: 360px; }
.vd-icons .cats { max-height: 380px; overflow: auto; border-right: 1px solid var(--vd-border); padding-right: .6rem; }
.vd-icons .cats button { display: flex; justify-content: space-between; width: 100%; text-align: left; background: none; border: 0; padding: .32rem .55rem; border-radius: 9px; color: var(--vd-muted); font-size: .84rem; }
.vd-icons .cats button:hover { background: var(--vd-surface-2); color: var(--vd-text); }
.vd-icons .cats button.active { background: var(--vd-accent-soft); color: var(--vd-accent); font-weight: 700; }
.vd-icons .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: .4rem; max-height: 320px; overflow: auto; padding: .1rem; }
.vd-icons .grid button { aspect-ratio: 1; border: 1px solid var(--vd-border); background: var(--vd-surface); border-radius: 12px; color: var(--vd-text); display: flex; align-items: center; justify-content: center; }
.vd-icons .grid button:hover { border-color: var(--vd-accent); background: var(--vd-accent-soft); }
.vd-icons .grid button.sel { border-color: var(--vd-accent); background: var(--vd-accent-soft); color: var(--vd-accent); box-shadow: 0 0 0 2px var(--vd-accent-soft); }
.vd-icons .grid svg { width: 26px; height: 26px; }
.vd-iconbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--vd-border); }
.vd-iconbar .prev { width: 64px; height: 64px; border-radius: 14px; border: 1px dashed var(--vd-border); display: flex; align-items: center; justify-content: center; background: var(--vd-surface-2); overflow: hidden; }
.vd-iconbar input[type=color] { width: 44px; height: 38px; padding: 2px; border-radius: 10px; }
.vd-iconbar input[type=range] { width: 150px; }

/* toasts */
.vd-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: 99999; display: flex; flex-direction: column; gap: .5rem; }
.vd-toast { background: var(--vd-surface, #131a2a); color: var(--vd-text, #e8ecf8); border: 1px solid var(--vd-border, #263149); border-left: 4px solid var(--vd-accent, #6d63ff); border-radius: 12px; padding: .7rem 1rem; box-shadow: var(--vd-shadow); max-width: 360px; font-size: .9rem; animation: vdin .18s ease-out; }
.vd-toast.err { border-left-color: #dc3545; }
@keyframes vdin { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- the page builder chrome (light touch: the builder keeps its own layout) ---- */
#vvveb-builder #top-panel .btn { border-radius: 10px; }
#vvveb-builder #top-panel #publish-btn, #vvveb-builder #top-panel #save-btn { border-radius: 10px; font-weight: 600; }
#vvveb-builder #top-panel .vd-ai-btn { background: linear-gradient(135deg, #5046e5, #8b5cf6); color: #fff; border: 0; font-weight: 650; }
#vvveb-builder #top-panel .vd-ai-btn:hover { filter: brightness(1.1); color: #fff; }
#vvveb-builder .dropdown-menu { border-radius: 14px; padding: .4rem; box-shadow: 0 14px 40px rgba(0, 0, 0, .25); }
#vvveb-builder .dropdown-item { border-radius: 9px; font-size: .9rem; padding: .45rem .8rem; }
#vvveb-builder .form-control:focus, #vvveb-builder .form-select:focus { border-color: #6d63ff; box-shadow: 0 0 0 .2rem rgba(109, 99, 255, .18); }
.fp-container .fp-select { border-radius: 10px; }
.vd-fontrow { margin-top: .5rem; }

/* action buttons of a table row wrap instead of stretching the table */
.vd-actions { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; align-items: center; }
.vd-actions form { margin: 0; display: inline-flex; gap: .35rem; }
.vd-actions .btn { white-space: nowrap; }

/* tables inside cards: breathing room at both ends */
body.vd .card .table > :not(caption) > * > *:first-child { padding-left: 1.25rem; }
body.vd .card .table > :not(caption) > * > *:last-child { padding-right: 1.25rem; }