/* =====================================================================
   Teslim — design system
   Cohesive look across the business app, admin panel and marketing site.
   Layered on top of Bootstrap 5 via CSS variables + component overrides.
   ===================================================================== */

:root {
    /* Brand palette */
    --tw-brand: #4f46e5;       /* indigo-600 */
    --tw-brand-600: #4338ca;
    --tw-brand-700: #3730a3;
    --tw-brand-50: #eef2ff;
    --tw-accent: #06b6d4;      /* cyan-500 */

    /* Neutrals (slate) */
    --tw-ink: #0f172a;
    --tw-body: #334155;
    --tw-muted: #64748b;
    --tw-line: #e2e8f0;
    --tw-surface: #ffffff;
    --tw-bg: #f6f7fb;

    --tw-radius: 12px;
    --tw-radius-lg: 18px;
    --tw-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --tw-shadow: 0 4px 6px -1px rgba(15, 23, 42, .07), 0 2px 4px -2px rgba(15, 23, 42, .06);
    --tw-shadow-lg: 0 20px 25px -5px rgba(15, 23, 42, .10), 0 8px 10px -6px rgba(15, 23, 42, .08);

    /* Bootstrap variable overrides */
    --bs-primary: var(--tw-brand);
    --bs-primary-rgb: 79, 70, 229;
    --bs-body-color: var(--tw-body);
    --bs-body-bg: var(--tw-bg);
    --bs-border-color: var(--tw-line);
    --bs-link-color: var(--tw-brand-600);
    --bs-link-hover-color: var(--tw-brand-700);
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { position: relative; min-height: 100%; font-size: 16px; }

body {
    margin: 0;
    background: var(--tw-bg);
    color: var(--tw-body);
    font-family: var(--bs-font-sans-serif);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: "Plus Jakarta Sans", var(--bs-font-sans-serif);
    color: var(--tw-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Layout ---------- */
.page-container { max-width: 1140px; }
main { min-height: 60vh; }

/* ---------- Navbar ---------- */
.navbar {
    background: rgba(255, 255, 255, .85) !important;
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--tw-line) !important;
    box-shadow: none !important;
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.navbar-brand {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--tw-brand-600) !important;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.navbar-brand img { width: 28px; height: 28px; border-radius: 8px; }
.navbar .nav-link {
    color: var(--tw-body) !important;
    font-weight: 500;
    border-radius: 8px;
    padding: .4rem .75rem !important;
    transition: background .15s, color .15s;
}
.navbar .nav-link:hover { background: var(--tw-brand-50); color: var(--tw-brand-700) !important; }

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-border-radius: 10px;
    border-radius: 10px;
    font-weight: 600;
    padding: .5rem 1rem;
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: .7rem 1.4rem; border-radius: 12px; }
.btn-primary {
    --bs-btn-bg: var(--tw-brand);
    --bs-btn-border-color: var(--tw-brand);
    --bs-btn-hover-bg: var(--tw-brand-600);
    --bs-btn-hover-border-color: var(--tw-brand-600);
    --bs-btn-active-bg: var(--tw-brand-700);
    box-shadow: 0 1px 2px rgba(79, 70, 229, .35);
}
.btn-primary:hover { box-shadow: 0 6px 16px -4px rgba(79, 70, 229, .5); }
.btn-outline-secondary { --bs-btn-border-color: var(--tw-line); --bs-btn-color: var(--tw-body); --bs-btn-hover-bg: var(--tw-ink); --bs-btn-hover-border-color: var(--tw-ink); }
.btn-link { color: var(--tw-brand-600); font-weight: 600; }
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .25);
}

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--tw-line);
    border-radius: var(--tw-radius-lg);
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--tw-shadow); }
.card-body { padding: 1.25rem; }
.card-title { font-weight: 700; }

/* ---------- Forms ---------- */
.form-label { font-weight: 600; color: var(--tw-ink); font-size: .9rem; margin-bottom: .3rem; }
.form-control, .form-select {
    border-radius: 10px;
    border-color: var(--tw-line);
    padding: .55rem .8rem;
    background-color: #fff;
}
.form-control::placeholder { color: #94a3b8; }

/* ---------- Tables ---------- */
.table { --bs-table-bg: transparent; color: var(--tw-body); }
.table > thead { background: #f8fafc; }
.table > thead th {
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--tw-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--tw-line);
}
.table > tbody td { border-color: #eef2f7; padding-top: .8rem; padding-bottom: .8rem; vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background: var(--tw-brand-50); }

/* Wrap tables in a card-like surface */
.table-surface {
    background: var(--tw-surface);
    border: 1px solid var(--tw-line);
    border-radius: var(--tw-radius-lg);
    box-shadow: var(--tw-shadow-sm);
    overflow: hidden;
}
.table-surface .table { margin-bottom: 0; }
.table-surface .table > :not(caption) > * > * { padding-left: 1.1rem; padding-right: 1.1rem; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; letter-spacing: .01em; }
.bg-info { background: #cffafe !important; color: #0e7490 !important; }
.bg-secondary { background: #e2e8f0 !important; color: #475569 !important; }
.bg-success { background: #dcfce7 !important; color: #15803d !important; }
.bg-danger { background: #fee2e2 !important; color: #b91c1c !important; }
.bg-warning { background: #fef9c3 !important; color: #a16207 !important; }

/* ---------- Alerts ---------- */
.alert { border: 1px solid transparent; border-radius: var(--tw-radius); }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--tw-line);
    background: var(--tw-surface);
    color: var(--tw-muted);
    padding: 1.5rem 0;
    margin-top: 3rem;
}
.site-footer a { color: var(--tw-muted); }
.site-footer a:hover { color: var(--tw-brand-600); }

/* ---------- Auth card ---------- */
.auth-wrap { min-height: 78vh; display: flex; align-items: center; }
.auth-card {
    background: var(--tw-surface);
    border: 1px solid var(--tw-line);
    border-radius: var(--tw-radius-lg);
    box-shadow: var(--tw-shadow-lg);
    padding: 2rem;
}

/* ---------- Hero / marketing ---------- */
.hero {
    background:
        radial-gradient(1200px 500px at 50% -120px, rgba(79, 70, 229, .12), transparent 60%),
        radial-gradient(900px 400px at 90% 0, rgba(6, 182, 212, .10), transparent 60%);
    border-radius: var(--tw-radius-lg);
}
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; }
.gradient-text {
    background: linear-gradient(120deg, var(--tw-brand), var(--tw-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.feature-icon {
    width: 46px; height: 46px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tw-brand-50); color: var(--tw-brand-600);
    font-size: 1.4rem; margin-bottom: .75rem;
}
.price-card.featured { border-color: var(--tw-brand); box-shadow: 0 0 0 1px var(--tw-brand), var(--tw-shadow-lg); }

/* ---------- Board (Vue) ---------- */
#board-app .card { border-radius: 12px; }
.board-col-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tw-muted); }

/* ---------- Misc ---------- */
.text-muted { color: var(--tw-muted) !important; }
.shadow-soft { box-shadow: var(--tw-shadow); }
hr { color: var(--tw-line); opacity: 1; }
.section { padding: 3.5rem 0; }

/* ---------- Flip feature cards (marketing) ---------- */
.flip-card { perspective: 1200px; height: 340px; }
.flip-card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
    transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner { transform: rotateY(180deg); }

.flip-card-face {
    position: absolute; inset: 0;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border-radius: var(--tw-radius-lg);
    border: 1px solid var(--tw-line);
    background: var(--tw-surface);
    box-shadow: var(--tw-shadow-sm);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.flip-card:hover .flip-card-face { box-shadow: var(--tw-shadow-lg); }

/* Front: big visual fills the card, title centered below */
.flip-visual {
    flex: 1 1 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 5.5rem; line-height: 1; color: #fff;
}
.flip-title {
    text-align: center; padding: 1.1rem 1rem 1.25rem;
    font-family: var(--bs-font-sans-serif); /* Inter — lighter, elegant */
    font-weight: 500; font-size: 1.08rem; letter-spacing: 0;
    color: var(--tw-ink); background: var(--tw-surface); line-height: 1.3;
}
.flip-card-back h3 { line-height: 1.2; }

/* Back: description, revealed on flip */
.flip-card-back {
    transform: rotateY(180deg);
    align-items: center; justify-content: center; text-align: center;
    padding: 1.75rem;
    background: linear-gradient(160deg, var(--tw-brand-50), #fff);
}
.flip-card-back h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.flip-card-back p { color: var(--tw-body); margin: 0; }

/* ---------- Sticky footer (push footer to bottom on short pages) ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-footer { margin-top: auto; }

/* ---------- Feature tiles (features page) ---------- */
.feature-badge {
    width: 54px; height: 54px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.6rem; color: #fff; margin-bottom: .9rem;
    box-shadow: var(--tw-shadow);
}
.feature-tile { transition: transform .18s ease, box-shadow .18s ease; }
.feature-tile:hover { transform: translateY(-4px); box-shadow: var(--tw-shadow-lg); }

/* ---------- Pricing ---------- */
.price-amount {
    font-family: "Plus Jakarta Sans", var(--bs-font-sans-serif);
    font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--tw-ink);
    letter-spacing: -0.03em;
}
.pf-list { list-style: none; padding: 0; margin: 0; }
.pf-list li { display: flex; align-items: flex-start; gap: .55rem; padding: .35rem 0; color: var(--tw-body); }
.pf-check {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #dcfce7; color: #15803d; font-size: .7rem; font-weight: 700; margin-top: .15rem;
}
.price-card.featured {
    border-color: var(--tw-brand);
    box-shadow: 0 0 0 1px var(--tw-brand), var(--tw-shadow-lg);
}
@media (min-width: 992px) {
    .price-card.featured { transform: scale(1.04); }
}

/* ---------- Blog ---------- */
.blog-card { overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--tw-shadow-lg); }
.blog-cover {
    height: 170px; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.92); background-size: cover; background-position: center;
}
.blog-cover span {
    font-family: "Plus Jakarta Sans", var(--bs-font-sans-serif);
    font-weight: 800; font-size: 3.2rem; opacity: .9;
}
.blog-article-cover {
    height: 240px; border-radius: var(--tw-radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.92);
}
.blog-article-cover span { font-family: "Plus Jakarta Sans"; font-weight: 800; font-size: 4.5rem; }
.blog-body { font-size: 1.06rem; line-height: 1.75; color: var(--tw-body); }
.blog-body h3 { font-size: 1.2rem; margin-top: 1.6rem; margin-bottom: .5rem; }
.blog-body p { margin-bottom: 1rem; }