@import "tailwindcss";

@theme {
  --font-sans: "Inter Variable", "Noto Sans Bengali", ui-sans-serif, system-ui, sans-serif;
  --color-brand: #2563eb;
  --color-brand-dark: #1e40af;
  --color-accent: #06b6d4;
  --color-ink: #0b1220;
  --color-muted: #64748b;
  --color-line: #e5eaf3;
  --color-surface: #f6f8fc;
}

:root { --brand: #2563eb; --accent: #06b6d4; --ink: #0b1220; --muted: #64748b; --line: #e5eaf3; --ok: #059669; --warn: #d97706; --bad: #e11d48; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
::selection { background: color-mix(in oklab, var(--brand) 22%, white); }

/* ── atmosphere (same look as the original site: soft blobs + fine grid) ── */
.atmos { position: relative; isolation: isolate; background: linear-gradient(180deg, #f7f9ff 0%, #fff 70%); }
.atmos::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60rem 28rem at -10% -5%, color-mix(in oklab, var(--brand) 20%, transparent), transparent 70%),
              radial-gradient(48rem 26rem at 105% 15%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
              linear-gradient(to right, rgb(37 99 235 / .045) 1px, transparent 1px) 0 0/72px 72px,
              linear-gradient(to bottom, rgb(37 99 235 / .045) 1px, transparent 1px) 0 0/72px 72px; }
.gradient-text { background: linear-gradient(90deg, var(--brand), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.container-x { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 1.25rem; }

/* ── components ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 999px; padding: .65rem 1.25rem; font-size: .875rem; font-weight: 600;
  transition: transform .15s, box-shadow .2s, background .2s; cursor: pointer; white-space: nowrap; border: 1px solid transparent; }
.btn:active { transform: scale(.97); } .btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--brand) 70%, transparent); }
.btn-primary:hover:not(:disabled) { background: #1d4ed8; transform: translateY(-1px); }
.btn-ghost { background: rgb(255 255 255 / .75); border-color: var(--line); color: var(--ink); backdrop-filter: blur(6px); }
.btn-ghost:hover:not(:disabled) { background: #fff; border-color: #cfd8ea; }
.btn-white { background: #fff; color: var(--brand); } .btn-danger { background: #fff1f2; color: var(--bad); border-color: #fecdd3; }
.btn-sm { padding: .4rem .85rem; font-size: .8rem; } .btn-lg { padding: .85rem 1.6rem; font-size: .95rem; }
.card { background: rgb(255 255 255 / .82); border: 1px solid var(--line); border-radius: 1.5rem; box-shadow: 0 1px 2px rgb(15 23 42 / .03), 0 12px 32px -18px rgb(30 64 175 / .18); backdrop-filter: blur(8px); }
.card-hover { transition: transform .25s, box-shadow .25s, border-color .25s; }
.card-hover:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 30%, white); box-shadow: 0 24px 48px -22px rgb(30 64 175 / .35); }
.input { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: .85rem; padding: .65rem .9rem; font-size: .9rem; outline: none; transition: border .15s, box-shadow .15s; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 14%, transparent); }
.label { display: block; font-size: .75rem; font-weight: 600; color: #475569; margin-bottom: .35rem; }
.badge { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .15rem .6rem; font-size: .7rem; font-weight: 600; background: #eef2ff; color: #3730a3; }
.badge.ok { background: #ecfdf5; color: #047857; } .badge.warn { background: #fffbeb; color: #b45309; } .badge.bad { background: #fff1f2; color: #be123c; } .badge.gray { background: #f1f5f9; color: #475569; }
.eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--brand)); }
.tbl { width: 100%; font-size: .85rem; border-collapse: collapse; }
.tbl th { text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: .6rem .9rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: .75rem .9rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tbl tr:hover td { background: #f8faff; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.skeleton { background: linear-gradient(90deg, #eef2f9 25%, #f7f9fd 50%, #eef2f9 75%); background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: .75rem; }
@keyframes sk { to { background-position: -200% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; } .rise-2 { animation-delay: .08s; } .rise-3 { animation-delay: .16s; } .rise-4 { animation-delay: .24s; }
@keyframes floaty { 50% { transform: translateY(-8px); } } .floaty { animation: floaty 6s ease-in-out infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.dot-live { width: .5rem; height: .5rem; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 0 rgb(5 150 105 / .5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgb(5 150 105 / 0); } 100% { box-shadow: 0 0 0 0 rgb(5 150 105 / 0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ── dashboard shell ── */
.dash { background: #f4f6fb; min-height: 100dvh; }
.side-link { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; border-radius: .85rem; font-size: .85rem; font-weight: 500; color: #475569; transition: background .15s, color .15s; }
.side-link:hover { background: #eef2ff; color: var(--brand); }
.side-link[aria-current="page"] { background: var(--brand); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in oklab, var(--brand) 70%, transparent); }
.stat { padding: 1.1rem 1.25rem; } .stat .k { font-size: .72rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stat .v { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; margin-top: .25rem; }
.chat-bubble { max-width: 78%; padding: .6rem .9rem; border-radius: 1.1rem; font-size: .88rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.chat-me { background: var(--brand); color: #fff; border-bottom-right-radius: .3rem; margin-left: auto; }
.chat-them { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: .3rem; }

/* ── print: invoices ── */
@media print {
  body { background: #fff !important; } .no-print { display: none !important; }
  .print-area { box-shadow: none !important; border: 0 !important; }
}

/* ── Mother dashboard theme (original admin look & feel) ── */
.mother { background: #fafafa; color: #0f172a; font-size: 14px; }
.mother .m-side { width: 250px; background: #fff; border-right: 1px solid #ececf0; }
.m-grp { padding: 0 .75rem; margin: 1.1rem 0 .35rem; font-size: .66rem; font-weight: 600; letter-spacing: .12em; color: #8b8fa3; text-transform: uppercase; }
.m-link { display: flex; align-items: center; gap: .7rem; margin: 1px .6rem; padding: .5rem .65rem; border-radius: .6rem; font-size: .84rem; font-weight: 500; color: #3f4457; }
.m-link svg { color: #6b7086; } .m-link:hover { background: #f4f5f8; }
.m-link[aria-current="page"] { background: #eaf0ff; color: #1d4ed8; } .m-link[aria-current="page"] svg { color: #2563eb; }
.m-card { background: #fff; border: 1px solid #ececf0; border-radius: 1rem; box-shadow: 0 1px 2px rgb(15 23 42 / .03); }
.m-input { width: 100%; border: 1px solid #e3e5ec; background: #fff; border-radius: .6rem; padding: .5rem .75rem; font-size: .85rem; outline: none; } .m-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #2563eb22; }
.m-btn { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #e3e5ec; background: #fff; border-radius: .6rem; padding: .48rem .85rem; font-size: .82rem; font-weight: 600; color: #3f4457; transition: .15s; } .m-btn:hover:not(:disabled) { background: #f6f7fa; } .m-btn:disabled { opacity: .55; }
.m-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; } .m-btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.m-icon { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: .5rem; color: #7b8094; } .m-icon:hover { background: #f1f2f6; color: #0f172a; }
.chip { border-radius: 999px; background: #f1f2f6; padding: .28rem .8rem; font-size: .78rem; font-weight: 500; color: #4b5068; } .chip-on { background: #111827; color: #fff; }
.m-tbl th { background: transparent; font-size: .66rem; letter-spacing: .08em; } .m-tbl td { border-color: #f2f3f7; }
.m-stat { padding: 1rem 1.15rem; } .m-stat .k { font-size: .8rem; color: #5b6075; display: flex; justify-content: space-between; align-items: center; } .m-stat .v { font-size: 1.55rem; font-weight: 600; margin-top: .35rem; letter-spacing: -.02em; } .m-stat .s { font-size: .78rem; color: #8b8fa3; margin-top: .15rem; }
.m-tab { padding: .45rem .9rem; border-radius: .6rem; font-size: .82rem; font-weight: 500; color: #5b6075; } .m-tab[aria-current="page"], .m-tab.on { background: #fff; color: #0f172a; box-shadow: 0 0 0 1px #e3e5ec; }
.mother h1 { letter-spacing: -.02em; }
html.dark .mother { background: #0e1117; color: #e6e8ef; }
html.dark .mother .m-side, html.dark .mother .m-card, html.dark .mother .m-input, html.dark .mother .m-btn, html.dark .mother header { background: #151922; border-color: #252a36; color: #e6e8ef; }
html.dark .mother .m-link { color: #b7bccd; } html.dark .mother .m-link:hover { background: #1c212c; } html.dark .mother .m-link[aria-current="page"] { background: #1e2a4a; color: #8fb0ff; }
html.dark .mother .tbl td, html.dark .mother .tbl th { border-color: #252a36; } html.dark .mother .tbl tr:hover td { background: #1a1f2a; }
html.dark .mother .chip { background: #202533; color: #c6cbe0; } html.dark .mother .chip-on { background: #e6e8ef; color: #0e1117; }
html.dark .mother .text-slate-500, html.dark .mother .text-slate-400 { color: #8d93a8; } html.dark .mother .bg-white { background: #151922; } html.dark .mother .border-slate-100 { border-color: #252a36; } html.dark .mother .m-btn-primary { background: #2563eb; color: #fff; border-color: #2563eb; }
.mother .card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 2px rgb(15 23 42 / .03); backdrop-filter: none; border-color: #ececf0; }
.mother .btn { border-radius: .6rem; padding: .5rem .9rem; font-size: .82rem; box-shadow: none; } .mother .btn-sm { padding: .38rem .75rem; } .mother .btn-primary { box-shadow: none; } .mother .btn-primary:hover:not(:disabled) { transform: none; }
.mother .btn-ghost { background: #fff; backdrop-filter: none; border-color: #e3e5ec; }
.mother .input { border-radius: .6rem; padding: .5rem .75rem; font-size: .85rem; border-color: #e3e5ec; }
.mother h1.text-2xl, .mother h1.text-3xl { font-size: 1.65rem; font-weight: 600; }
.mother .stat .v { font-weight: 600; }
html.dark .mother .card, html.dark .mother .input { background: #151922; border-color: #252a36; color: #e6e8ef; } html.dark .mother .btn-ghost { background: #151922; border-color: #252a36; color: #e6e8ef; }
html.dark .mother .bg-slate-50, html.dark .mother .bg-slate-100 { background: #1c212c; } html.dark .mother .text-slate-600, html.dark .mother .text-slate-700, html.dark .mother .text-slate-800, html.dark .mother .text-slate-900 { color: #d6d9e6; }