/* Advanced UI/UX Enhancements (non-destructive) */
:root {
  --form-bg: var(--surface, #fff);
  --form-border: var(--card-border, #dbe1e8);
  --form-border-accent: var(--ring, #2563eb);
  --form-radius: 14px;
  --focus-ring: 0 0 0 3px rgba(37,99,235,.25);
  --danger: var(--destructive,#dc2626);
  --success-color: var(--success,#15803d);
  --gradient-accent: linear-gradient(135deg,#2563eb,#6366f1);
  --gradient-soft: linear-gradient(145deg,#f1f5f9,#ffffff 55%,#f8fafc);
  --glass: rgba(255,255,255,.65);
  --glass-border: rgba(255,255,255,.35);
}

/* Section shells */
#reminders-page .form-section, #reminders-page .info, #reminders-page .token-info {
  position: relative;
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);
  background: var(--gradient-soft);
  padding: 1.5rem 1.75rem 1.75rem;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);
  overflow: hidden;
}
#reminders-page .form-section:before { /* subtle corner accent */
  content:""; position:absolute; inset:0; background:radial-gradient(circle at top left, rgba(37,99,235,.12), transparent 60%);
  pointer-events:none;
}
#reminders-page .form-section h3 { margin-top:0; font-size:1.15rem; letter-spacing:.5px; display:flex; align-items:center; gap:.55rem; font-weight:600; background:var(--gradient-accent); -webkit-background-clip:text; color:transparent; }
#reminders-page .form-section h3 svg { width:1.05rem; height:1.05rem; stroke: currentColor; }

/* Grid auto layout inside sections */
#reminders-page .form-section .form-group { position:relative; display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
#reminders-page .form-group:last-child { margin-bottom:0; }

/* Label styling */
#reminders-page label { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:#111827; display:flex; align-items:center; gap:.4rem; }
#reminders-page label svg { width:.85rem; height:.85rem; stroke: currentColor; opacity:.8; }

/* Inputs / selects / textareas unified */
#reminders-page input[type=text],
#reminders-page input[type=number],
#reminders-page input[type=email],
#reminders-page input[type=date],
#reminders-page select,
#reminders-page textarea {
  appearance:none; -webkit-appearance:none; outline:none; width:100%; font:400 .9rem/1.4 var(--font-family,'Inter');
  padding:.65rem .85rem .65rem 2.35rem; border:1px solid var(--input-border,#d0d7e1);
  border-radius:10px; background:var(--surface,#fff); color:var(--foreground,#111827);
  transition:border-color .18s, box-shadow .18s, background .25s; position:relative;
}
#reminders-page textarea { min-height:7.5rem; resize:vertical; }
#reminders-page input:focus, #reminders-page select:focus, #reminders-page textarea:focus {
  border-color: var(--form-border-accent); box-shadow: var(--focus-ring); background: #fff;
}
#reminders-page input::placeholder, #reminders-page textarea::placeholder { color:var(--foreground-muted,#9ca3af); }

/* Embedded leading icon slot */
#reminders-page .form-group { --icon-size:1rem; }
#reminders-page .form-group .field-icon { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); width:var(--icon-size); height:var(--icon-size); color:var(--foreground-muted); pointer-events:none; }
#reminders-page .form-group textarea + .field-icon { top:1.1rem; transform:none; }

/* Buttons */
#reminders-page button { --btn-bg:#f3f4f6; --btn-color:#111827; --btn-border:#9ca3af; font:600 .85rem/1 var(--font-family,'Inter'); border:1px solid var(--btn-border); border-radius:10px; padding:.7rem 1.05rem; cursor:pointer; display:inline-flex; align-items:center; gap:.55rem; background:#f3f4f6; color:#111827; position:relative; overflow:hidden; transition:background .25s, transform .18s, box-shadow .25s, color .25s, border-color .25s; }
#reminders-page button:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.15),transparent 60%); opacity:0; transition:opacity .4s; }
#reminders-page button:hover:before { opacity:1; }
#reminders-page button:hover { transform:translateY(-2px); background:#e5e7eb; border-color:#6b7280; color:#000; box-shadow:0 6px 18px -6px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.05) inset; }
#reminders-page button:active { transform:translateY(0); box-shadow:0 2px 6px -2px rgba(0,0,0,.35); }
#reminders-page button.secondary { --btn-bg:#d1d5db; --btn-color:#111827; --btn-border:#9ca3af; background:#d1d5db; color:#111827; border:1px solid #9ca3af; }
#reminders-page button.secondary:hover { background:#cbd5e1; border-color:#6b7280; }
#reminders-page .action-buttons { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.35rem; }

/* Search field special */
#reminders-page .search-field { max-width:380px; }

/* Reminder table enhancements */
#reminders-page .table-container { border:1px solid #cbd5e1; border-radius:14px; background:#f1f5f9; overflow:hidden; box-shadow:0 3px 10px -2px rgba(0,0,0,.08); }
#reminders-page table thead th { font-size:.65rem; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:#111827; background:#e5e7eb; position:relative; }
#reminders-page table tbody tr { transition:background .15s, box-shadow .25s; }
#reminders-page table tbody tr:hover { background:#f8fafc; box-shadow:0 1px 0 rgba(0,0,0,.05) inset; }
#reminders-page table tbody td { font-size:.78rem; vertical-align:top; }
#reminders-page #reminder-pagination { display:flex; flex-wrap:wrap; gap:.4rem; padding:.75rem; justify-content:center; }
#reminders-page #reminder-pagination button { font-size:.65rem; padding:.5rem .75rem; background:#d1d5db; color:#111827; border:1px solid #9ca3af; }
#reminders-page #reminder-pagination button[style*='background:#3b82f6'] { background:#9ca3af !important; color:#000 !important; }

/* Methods container refinement */
#reminders-page .methods-container { align-items:stretch; }
#reminders-page .method-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; isolation:isolate; color:#111827; }
#reminders-page .method-card:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.6),transparent 70%); opacity:0; transition:opacity .35s; z-index:0; }
#reminders-page .method-card:hover:after { opacity:1; }
#reminders-page .method-card .method-icon { z-index:1; }

/* Info blocks */
#reminders-page .info { backdrop-filter:blur(2px); background:#e5e7eb; border:1px solid #cbd5e1; color:#111827; }
#reminders-page .alert { backdrop-filter:blur(4px); }

/* Token Status badge */
#reminders-page #token-status { font-weight:600; padding:.25rem .55rem; border-radius:6px; background:#dcfce7; color:#166534; font-size:.7rem; letter-spacing:.05em; }

/* Modal improvements (only for reminder related modals) */
.modal .modal-content { border-radius:20px; background:var(--form-bg,#fff); border:1px solid var(--form-border); box-shadow:0 12px 40px -8px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.12); animation:scaleIn .35s cubic-bezier(.4,0,.2,1); }
.modal .modal-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border-bottom:1px solid var(--form-border); }
.modal .modal-header h3 { margin:0; font-size:1rem; font-weight:600; letter-spacing:.5px; }
.modal .modal-footer { padding: .9rem 1.25rem; border-top:1px solid var(--form-border); display:flex; justify-content:flex-end; gap:.5rem; }
.modal .info { margin:1rem 1rem 1.25rem; }

@keyframes scaleIn { from { transform:translateY(12px) scale(.96); opacity:0; } to { transform:translateY(0) scale(1); opacity:1; } }

/* Utility pills / badges */
#reminders-page .badge { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px; font-size:.6rem; font-weight:600; letter-spacing:.05em; background:#d1d5db; color:#111827; }
#reminders-page .badge.success { background:#dcfce7; color:#166534; }
#reminders-page .badge.warn { background:#fef3c7; color:#92400e; }
#reminders-page .badge.danger { background:#fee2e2; color:#b91c1c; }

/* Responsive adjustments */
@media (max-width: 920px){
  #reminders-page { padding: var(--space-4); }
  #reminders-page .form-section { padding:1.25rem 1.25rem 1.5rem; }
  #reminders-page .methods-container { flex-direction:column; }
  #reminders-page .search-field { max-width:100%; }
  #reminders-page table { font-size:.75rem; }
}
@media (prefers-color-scheme: dark){
  #reminders-page .form-section, #reminders-page .info, #reminders-page .token-info { background: linear-gradient(145deg,#1e293b,#0f172a 55%,#1e293b); border-color:#334155; }
  #reminders-page input, #reminders-page select, #reminders-page textarea { background:#0f172a; border-color:#1e293b; color:#e2e8f0; }
  #reminders-page input:focus, #reminders-page select:focus, #reminders-page textarea:focus { background:#1e293b; }
  #reminders-page table tbody tr:hover { background:#1e293b; }
}