/* Compatibility layer: map common Bootstrap classes used in templates to Tailwind-like styles.
   This lets existing templates keep their class names while adopting Tailwind visuals.
*/
:root{ --bg:#0f172a; --surface:#0f172a; --muted:#94a3b8; --text:#f1f5f9; --card:#111827; --primary:#3b82f6; }
html,body{height:100%;background:var(--bg);color:var(--text);font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif}

/* Container and grid */
.container, .container-fluid, .content-container{ max-width:1200px; margin:0 auto; padding:0 1rem; }
.row{ display:flex; flex-wrap:wrap; margin:0 -0.5rem; }
[class^="col-"]{ padding:0 0.5rem; }
.col-12{ width:100%; }
.col-md-6{ width:50%; }
.col-lg-3{ width:25%; }
@media (max-width:900px){ .col-md-6, .col-lg-3{ width:100%; } }

/* Cards */
.glass-card, .card, .md-card{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)); border-radius:12px; padding:1rem; border:1px solid rgba(148,163,184,0.04); }

/* Buttons */
.btn, .btn-link, .btn-sm, .btn-glass{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.75rem; border-radius:8px; background:transparent; color:var(--text); border:1px solid rgba(148,163,184,0.04); text-decoration:none; cursor:pointer; }
.btn:hover, .btn-link:hover{ background:rgba(255,255,255,0.02); }
.btn-sm{ padding:0.25rem 0.5rem; font-size:0.85rem; }

/* Badges / chips */
.badge, .chip{ padding:0.25rem 0.5rem; border-radius:999px; font-weight:700; font-size:11px; }
.bg-success, .badge.bg-success{ background:rgba(16,185,129,0.12); color:#bbf7d0; border:1px solid rgba(16,185,129,0.15); }
.bg-secondary{ background:rgba(148,163,184,0.06); color:var(--muted); border:1px solid rgba(148,163,184,0.04); }

/* Tables */
.table, .table-hover, .table-dark{ width:100%; border-collapse:collapse; color:var(--text); }
.table th{ text-transform:uppercase; font-size:12px; color:var(--muted); background:rgba(15,23,42,0.6); padding:0.75rem 1rem; }
.table td{ padding:0.75rem 1rem; border-bottom:1px solid rgba(148,163,184,0.03); }
.table-hover tbody tr:hover{ background:rgba(255,255,255,0.02); }

/* Forms */
input[type=file], input[type=text], select, textarea{ background:transparent; border:1px solid rgba(148,163,184,0.04); color:var(--text); padding:0.5rem; border-radius:8px; }

/* Utility */
.text-glass{ color:var(--text); }
.text-glass-muted{ color:var(--muted); }
.p-4{ padding:1rem !important; }
.mb-4{ margin-bottom:1rem !important; }
.mt-4{ margin-top:1rem !important; }

/* Toast */
.toast{ background:rgba(17,24,39,0.9); color:var(--text); padding:0.75rem 1rem; border-radius:8px; }

/* ensure legacy icon fonts show */
.material-symbols-outlined{ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Fix: icon overlays inside inputs — ensure padding and non-interactive icons */
.relative .material-symbols-outlined.absolute{ left:0.75rem; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; font-size:1.05rem; z-index:2; }
.relative input[type="text"], .relative input[type="password"], .relative input[type="email"], .relative input, .md-input{ padding-left:3rem !important; }
.md-input{ height:44px; }

/* Modal styles to replace Bootstrap modals (hidden by default) */
.modal{ display:none; }
.modal.show{ display:flex; align-items:center; justify-content:center; position:fixed; inset:0; z-index:1000; padding:1.5rem; }
.modal .modal-dialog{ max-width:760px; width:100%; margin:0 1rem; }
.modal .modal-content{ background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12)); border-radius:12px; padding:1rem; border:1px solid rgba(148,163,184,0.04); }
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:900; }