/* ============================================================
   VisualsBySaad — Shared Brand Styles
   Warm cream/brown with a gold touch — premium, light theme.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: #F5EEE1;
  color: #2B2014;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.cormorant { font-family: 'Cormorant Garamond', serif; }

a { color: #A6793A; text-decoration: none; }

.page-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.brand-header {
  text-align: center;
  margin-bottom: 32px;
}
.brand-header .name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  color: #A6793A;
  letter-spacing: 0.02em;
}
.brand-header .tagline {
  font-size: 12px;
  color: #A8956F;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.card {
  background: #FBF5E9;
  border: 1px solid #DCC9A8;
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
}

.card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: #2B2014;
  margin-bottom: 4px;
}
.card-sub {
  font-size: 13px;
  color: #7A6A52;
  margin-bottom: 18px;
  line-height: 1.5;
}

.modal-overlay {
  position: fixed; inset: 0; background: rgba(5,5,6,0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; padding: 20px;
}
.modal-box {
  background: #FFFFFF; border: 1px solid #C9AD80; border-radius: 14px;
  padding: 28px; width: min(640px, 94vw); max-height: 88vh; overflow-y: auto;
}

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px;
  color: #7A6A52;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: #F5EEE1;
  border: 1px solid #DCC9A8;
  border-radius: 8px;
  padding: 11px 13px;
  color: #2B2014;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #A6793A; }
.field textarea { min-height: 80px; resize: vertical; }
.field-hint { font-size: 11px; color: #A8956F; margin-top: 4px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
  transition: all .15s;
}
.btn-primary { background: #A6793A; color: #F5EEE1; }
.btn-primary:hover { background: #C9A96E; }
.btn-secondary { background: transparent; border: 1px solid #C9AD80; color: #2B2014; }
.btn-secondary:hover { border-color: #A6793A; }
.btn-success { background: #4F7A5C; color: #F5EEE1; }
.btn-danger { background: #A8514C; color: #F5EEE1; }
.btn-full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.badge-gold { background: rgba(166,121,58,.15); color: #A6793A; }
.badge-green { background: rgba(79,122,92,.15); color: #4F7A5C; }
.badge-red { background: rgba(168,81,76,.15); color: #A8514C; }
.badge-blue { background: rgba(74,115,150,.15); color: #4A7396; }

.error-text { color: #A8514C; font-size: 13px; margin-top: 10px; }
.success-text { color: #4F7A5C; font-size: 13px; margin-top: 10px; }

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #DCC9A8;
}
.row-between:last-child { border-bottom: none; }

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid #DCC9A8;
  background: #FFFFFF;
}
.topbar .name { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: #A6793A; }

.spinner {
  border: 2px solid #C9AD80;
  border-top-color: #A6793A;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.progress { height: 8px; background: #F5EEE1; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; transition: width .4s ease; }

.photo-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
  background: #F5EEE1;
}

.tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.tab {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  background: #FBF5E9;
  color: #7A6A52;
  border: 1px solid #DCC9A8;
}
.tab.active { background: rgba(166,121,58,.12); color: #A6793A; border-color: #A6793A; }
.tab-group { padding: 9px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; background: transparent; color: #A8956F; border: none; border-bottom: 2px solid transparent; }
.tab-group.active { color: #2B2014; border-bottom-color: #A6793A; }

.app-layout { display: flex; min-height: 100vh; }
.app-main { flex: 1; padding: 28px 32px; max-width: 980px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .grid2, .grid3 { grid-template-columns: 1fr; } .app-layout { flex-direction: column; } }
.section-label { font-size:11px; color:#A8956F; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; }
table.tbl { width:100%; border-collapse:collapse; font-size:13px; }
table.tbl th { text-align:left; color:#A8956F; font-size:11px; text-transform:uppercase; padding:8px 6px; border-bottom:1px solid #DCC9A8; }
table.tbl td { padding:9px 6px; border-bottom:1px solid #DCC9A8; color:#2B2014; }

/* ===== Toast notifications ===== */
#vbs-toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 340px; }
@media (max-width: 720px) { #vbs-toast-container { left: 16px; right: 16px; bottom: 16px; max-width: none; } }
.vbs-toast {
  background: #FFFFFF; border: 1px solid #DCC9A8; border-left: 4px solid #A6793A;
  border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #2B2014;
  box-shadow: 0 4px 16px rgba(43,32,20,.12);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.vbs-toast.vbs-toast-show { opacity: 1; transform: translateY(0); }
.vbs-toast.vbs-toast-success { border-left-color: #4F7A5C; }
.vbs-toast.vbs-toast-error { border-left-color: #A8514C; }

/* ===== Modal (confirm / prompt replacement) ===== */
#vbs-modal-overlay {
  position: fixed; inset: 0; background: rgba(43,32,20,.45); z-index: 9998;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; transition: opacity .2s ease;
}
#vbs-modal-overlay.vbs-modal-show { opacity: 1; }
.vbs-modal-card {
  background: #FFFFFF; border-radius: 14px; padding: 24px; max-width: 420px; width: 100%;
  box-shadow: 0 12px 40px rgba(43,32,20,.25);
  transform: scale(.96); transition: transform .2s ease;
}
#vbs-modal-overlay.vbs-modal-show .vbs-modal-card { transform: scale(1); }
.vbs-modal-title { font-size: 17px; font-weight: 600; color: #2B2014; margin-bottom: 8px; font-family: 'Cormorant Garamond', serif; }
.vbs-modal-body { font-size: 14px; color: #4A3A26; line-height: 1.6; margin-bottom: 16px; white-space: pre-wrap; }
.vbs-modal-card select, .vbs-modal-card input { margin-bottom: 16px; }
.vbs-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.vbs-modal-list-option {
  display: block; width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px;
  background: #FBF5E9; border: 1px solid #DCC9A8; border-radius: 8px; font-size: 13px; color: #2B2014;
  cursor: pointer; transition: background .15s ease;
}
.vbs-modal-list-option:hover { background: rgba(166,121,58,.12); border-color: #A6793A; }

/* ===== Skeleton loading placeholders ===== */
@keyframes vbs-shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.vbs-skel {
  background: linear-gradient(90deg, #F0E8D8 25%, #E8DCC4 37%, #F0E8D8 63%);
  background-size: 400px 100%;
  animation: vbs-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
.vbs-skel-line { height: 13px; margin-bottom: 8px; }
.vbs-skel-line.short { width: 40%; }
.vbs-skel-line.medium { width: 65%; }
.vbs-skel-line.long { width: 90%; }
.vbs-skel-title { height: 18px; width: 50%; margin-bottom: 12px; }
.vbs-skel-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid #DCC9A8; }
.vbs-skel-row .vbs-skel { height: 13px; }
.vbs-skel-card { padding: 4px 0; }
.vbs-skel-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================
   DARK MODE
   Most colors in this app are inline styles rather than CSS
   variables, scattered across 28 files — there was no central
   place to flip a single set of variables. Rather than rewrite
   every inline style (a much bigger job), this targets the actual
   small set of recurring hex colors directly, since the palette
   turned out to be remarkably consistent everywhere. Coverage is
   broad but not guaranteed pixel-perfect in every corner — a one-off
   color used nowhere else wouldn't be caught by this.
   ============================================================ */
body.dark-mode { background: #1C1710; color: #F0E6D4; }

/* Base component classes */
body.dark-mode .card { background: #241D14; border-color: #3D3322; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
  background: #241D14 !important; border-color: #3D3322 !important; color: #F0E6D4 !important;
}
body.dark-mode .vbs-modal-card { background: #241D14; }
body.dark-mode .tbl th { border-color: #3D3322; }
body.dark-mode .tbl td { border-color: #2A2318; }

/* Text colors, by inline style value */
body.dark-mode [style*="color:#2B2014"] { color: #F0E6D4 !important; }
body.dark-mode [style*="color:#4A3A26"] { color: #E5D9C3 !important; }
body.dark-mode [style*="color:#7A6A52"] { color: #C2B49A !important; }
body.dark-mode [style*="color:#A8956F"] { color: #B5A483 !important; }
body.dark-mode [style*="color:#A8514C"] { color: #D38077 !important; }
body.dark-mode [style*="color:#4F7A5C"] { color: #7AB58C !important; }
body.dark-mode [style*="color:#7A5A94"] { color: #B49BCB !important; }
body.dark-mode [style*="color:#A6793A"] { color: #D2A565 !important; }

/* Backgrounds, by inline style value */
body.dark-mode [style*="background:#F5EEE1"] { background: #1C1710 !important; }
body.dark-mode [style*="background:#FBF5E9"] { background: #241D14 !important; }
body.dark-mode [style*="background:#FFFFFF"] { background: #211B12 !important; }
body.dark-mode [style*="background-color:#F5EEE1"] { background-color: #1C1710 !important; }
body.dark-mode [style*="background-color:#FBF5E9"] { background-color: #241D14 !important; }

/* Borders, by inline style value */
body.dark-mode [style*="border:1px solid #DCC9A8"] { border-color: #3D3322 !important; }
body.dark-mode [style*="border-color:#DCC9A8"] { border-color: #3D3322 !important; }
body.dark-mode [style*="border-top:1px solid #DCC9A8"] { border-top-color: #3D3322 !important; }
body.dark-mode [style*="border-bottom:1px solid #DCC9A8"] { border-bottom-color: #3D3322 !important; }

/* Sidebar nav specifically renders inline via JS, so it needs its
   own override since it's regenerated fresh each page load */
body.dark-mode #sidebar-mount > div { background: #211B12 !important; border-color: #3D3322 !important; }

.dark-toggle {
  position: fixed; bottom: 18px; right: 18px; z-index: 70;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #DCC9A8;
  background: #FBF5E9; color: #4A3A26; font-size: 18px; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center;
}
body.dark-mode .dark-toggle { background: #241D14; border-color: #3D3322; color: #F0E6D4; }