/* ============================================================
   Ivycarp Secure Share — Professional White Theme
   Base: pure white + cool grey
   Accent: sparse ivy green on interactive elements only
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ── Variables ──────────────────────────────────────────── */
:root {
  --ivy:           #6a8f5e;   /* green — used sparingly         */
  --ivy-deep:      #3d5c3a;   /* green dark — hover/active      */
  --ivy-pale:      #d4e3cf;   /* green tint — focus rings only  */

  --grey-900:      #1a1d1a;   /* near-black text                */
  --grey-700:      #3f4440;   /* secondary text                 */
  --grey-500:      #7a8278;   /* muted / placeholder            */
  --grey-300:      #c4c9c2;   /* borders                        */
  --grey-200:      #e4e8e3;   /* input backgrounds              */
  --grey-100:      #f1f3f0;   /* card surface                   */
  --grey-50:       #ffffff;   /* page background                */
  --white:         #ffffff;

  --radius:        8px;
  --radius-lg:     14px;
  --shadow-card:   0 2px 16px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow-btn:    0 1px 4px rgba(0,0,0,.18);
  --transition:    0.18s cubic-bezier(.4,0,.2,1);
}

/* ── Base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; }

body,
body.font-body,
body.page_publicshare {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-weight: 300;
  background-color: var(--grey-50) !important;
  color: var(--grey-900);
  line-height: 1.6;
}

/* ── Top section — logo zone ────────────────────────────── */
.bg-slate-100 {
  background-color: var(--grey-50) !important;
  background-image: none !important;
  border: none !important;
  border-bottom: none !important;
}

/* ── Logo ───────────────────────────────────────────────── */
.logo { text-align: center; }

.logo img,
img.w-auto.h-auto {
  display: inline-block;
  max-width: 140px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--grey-200);
  box-shadow: 0 1px 8px rgba(0,0,0,.08);
  background: var(--white);
}

/* ── Card ───────────────────────────────────────────────── */
/* .shadow-2xl targets the card more reliably than chained Tailwind classes */
.shadow-2xl,
.max-w-2xl.mx-auto.bg-white {
  background: var(--white) !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ── Instruction text ───────────────────────────────────── */
.page_publicshare form > div:first-of-type {
  font-size: 0.9375rem;
  color: var(--grey-700);
}

/* ── Textarea ───────────────────────────────────────────── */
textarea.field,
textarea.codefield,
textarea.font-code {
  width: 100%;
  background: var(--grey-100) !important;
  border: 1px solid var(--grey-200) !important;
  border-radius: var(--radius) !important;
  color: var(--grey-900) !important;
  font-family: 'DM Mono', ui-monospace, monospace !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  padding: 0.75rem 0.9rem !important;
  outline: none;
  resize: vertical;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

textarea.field:focus,
textarea.codefield:focus {
  background: var(--white) !important;
  border-color: var(--ivy) !important;          /* ← green touch #1 */
  box-shadow: 0 0 0 3px rgba(106,143,94,.12) !important;
}

textarea.field::placeholder { color: var(--grey-500); font-style: normal; }

/* ── FilePond drop zone ─────────────────────────────────── */
.filepond--root,
.filepond--root.fileupload {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  margin-bottom: 0 !important;
}

.filepond--drop-label {
  background: var(--grey-100) !important;
  border: 1px dashed var(--grey-300) !important;
  border-radius: var(--radius) !important;
  color: var(--grey-500) !important;
  font-size: 0.85rem !important;
}

.filepond--root:hover .filepond--drop-label,
.filepond--is-drag-over .filepond--drop-label {
  border-color: var(--ivy) !important;           /* ← green touch #2 */
  color: var(--grey-700) !important;
}

.filepond--panel-root {
  background: var(--grey-100) !important;
  border: 1px dashed var(--grey-300) !important;
  border-radius: var(--radius) !important;
}

.filepond--label-action {
  color: var(--ivy) !important;                  /* ← green touch #3 */
  text-decoration-color: var(--ivy-pale) !important;
}

/* ── Email label ────────────────────────────────────────── */
label.text-sm,
.text-sm.inline-block.mb-1 {
  display: block;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-700) !important;
  margin-bottom: 0.35rem !important;
}

/* ── Email input ────────────────────────────────────────── */
input.field {
  width: 100%;
  background: var(--grey-100) !important;
  border: 1px solid var(--grey-200) !important;
  border-radius: var(--radius) !important;
  color: var(--grey-900) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 300 !important;
  padding: 0.65rem 0.9rem !important;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

input.field:focus {
  background: var(--white) !important;
  border-color: var(--ivy) !important;           /* ← green touch #4 */
  box-shadow: 0 0 0 3px rgba(106,143,94,.12) !important;
}

input.field::placeholder { color: var(--grey-500); font-style: normal; }

/* ── Submit button ──────────────────────────────────────── */
button.btn,
.btn[type="submit"] {
  display: block !important;
  width: 100% !important;
  padding: 0.75rem 1.5rem !important;
  background: var(--grey-900) !important;        /* dark grey — not green */
  color: var(--white) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: var(--radius) !important;
  cursor: pointer;
  box-shadow: var(--shadow-btn) !important;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
}

button.btn:hover {
  background: var(--ivy-deep) !important;        /* ← green touch #5: hover only */
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.18) !important;
}

button.btn:active {
  transform: translateY(0) !important;
  background: var(--grey-900) !important;
}

/* ── Links ──────────────────────────────────────────────── */
a { color: var(--grey-700); text-decoration: none; }
a:hover { color: var(--ivy); }                   /* ← green touch #6 */

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--grey-50); }
::-webkit-scrollbar-thumb { background: var(--grey-300); border-radius: 3px; }

::selection { background: var(--ivy-pale); color: var(--grey-900); }