/* =========================================================
   SaaS Platform
   Modern B2B Dashboard UI
   ========================================================= */

/* ---------- Design tokens ---------- */

:root {
    --primary: #4f46e5;--primary-hover: #4338ca;--primary-light: #eef2ff;
    --background: #f6f7fb;--surface: #ffffff;--surface-secondary: #f8fafc;
    --text: #111827;--text-secondary: #64748b;--text-muted: #94a3b8;
    --border: #e5e7eb;--border-light: #eef0f4;
    --danger: #dc2626;--danger-bg: #fef2f2;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-sm:0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:0 4px 10px rgba(15, 23, 42, 0.04),0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-lg:0 20px 40px rgba(15, 23, 42, 0.08),0 4px 12px rgba(15, 23, 42, 0.04);
    --transition: 180ms ease;}

/* ======GLOBAL======*/
* {box-sizing: border-box;}
html {-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;}
body {margin: 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background: var(--background);color: var(--text);line-height: 1.5;}
a {color: var(--primary);text-decoration: none;transition: color var(--transition);}
a:hover {color: var(--primary-hover);}
button,input {font: inherit;}

/* ======LOGIN + REGISTER====== */
.auth-page {min-height: 100vh;display: flex;justify-content: center;align-items: center;padding: 32px;
    background:
        radial-gradient(circle at 15% 10%,rgba(79, 70, 229, 0.09),transparent 32%),
        radial-gradient(circle at 85% 90%,rgba(99, 102, 241, 0.07),transparent 32%),
        #f8fafc;}
.auth-card {width: 100%;max-width: 440px;background: rgba(255, 255, 255, 0.97);padding: 42px;border: 1px solid var(--border-light);border-radius: var(--radius-xl);box-shadow: var(--shadow-lg);}

/* ---------- Logo ---------- */
.logo {width: 48px;height: 48px;display: flex;align-items: center;justify-content: center;margin-bottom: 28px;
    border-radius: 13px;background:linear-gradient(135deg,#6366f1,#4338ca);color: #ffffff;font-size: 20px;font-weight: 700;box-shadow:0 6px 14px rgba(79, 70, 229, 0.25);}
.logo.small {width: 36px;height: 36px;margin: 0;border-radius: 10px;font-size: 15px;}

/* ---------- Authentication heading ---------- */
.auth-card h1 {margin: 0;font-size: 29px;font-weight: 700;letter-spacing: -0.025em;}
.subtitle {margin: 8px 0 30px;color: var(--text-secondary);font-size: 15px;}

/* ======FORMS======*/
label {display: block;margin: 18px 0 7px;color: #374151;font-size: 14px;font-weight: 600;}
input {width: 100%;padding: 12px 14px;border: 1px solid #d8dee8;border-radius: var(--radius-sm);background: #ffffff;
    color: var(--text);font-size: 15px;outline: none;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition);}
input::placeholder {color: #a1a9b7;}
input:hover {border-color: #c7cdd8;}
input:focus {border-color: var(--primary);box-shadow:0 0 0 3px rgba(79, 70, 229, 0.11);}

/* ---------- Primary button ---------- */
button[type="submit"] {width: 100%;margin-top: 26px;padding: 13px 18px;border: 0;border-radius: var(--radius-sm);background:linear-gradient(180deg,#5b54e8,#4f46e5);color: #ffffff;
    font-size: 14px;font-weight: 600;cursor: pointer;box-shadow:0 2px 4px rgba(79, 70, 229, 0.18);transition:background var(--transition),transform var(--transition),box-shadow var(--transition);}
button[type="submit"]:hover {background:linear-gradient(180deg,#5149df,#4338ca);box-shadow:0 5px 12px rgba(79, 70, 229, 0.22);transform: translateY(-1px);}
button[type="submit"]:active {transform: translateY(0);box-shadow:0 2px 4px rgba(79, 70, 229, 0.18);}

/* ---------- Authentication footer ---------- */
.auth-footer {margin: 26px 0 0;text-align: center;color: var(--text-secondary);font-size: 14px;}
.auth-footer a {font-weight: 600;}

/* ---------- Alerts ---------- */
.alert {margin: 20px 0;padding: 11px 14px;border: 1px solid #fecaca;border-radius: var(--radius-sm);background: var(--danger-bg);color: #b91c1c;font-size: 14px;}

/* ======NAVIGATION BAR======*/
.navbar {height: 68px;display: flex;align-items: center;justify-content: space-between;padding: 0 36px;
    background: rgba(255, 255, 255, 0.96);border-bottom: 1px solid var(--border);box-shadow:0 1px 2px rgba(15, 23, 42, 0.02);position: sticky;top: 0;z-index: 100;}

/* ---------- Brand ---------- */
.brand {display: flex;align-items: center;gap: 12px;}
.brand strong {color: #1e293b;font-size: 15px;font-weight: 650;letter-spacing: -0.01em;}

/* ---------- User ---------- */
.user-area {display: flex;align-items: center;gap: 16px;color: var(--text-secondary);font-size: 13px;}
.account-button,.logout {padding: 8px 13px;border: 1px solid var(--border);border-radius: var(--radius-sm);background: #ffffff;color: #475569;font-size: 13px;font-weight: 500;transition: background var(--transition),border-color var(--transition),color var(--transition),box-shadow var(--transition);}
.account-button:hover,.logout:hover {background: #f8fafc;border-color: #cbd5e1;color: #1e293b;box-shadow: var(--shadow-sm);}

/* ======DASHBOARD======*/
.dashboard {width: 100%;max-width: 1180px;margin: 0 auto;padding: 52px 36px 80px;}

/* ---------- Dashboard heading ---------- */
.dashboard-heading {margin-bottom: 34px;}
.dashboard-heading h1 {margin: 0;color: #111827;font-size: 30px;font-weight: 700;letter-spacing: -0.03em;}
.dashboard-heading p {margin: 7px 0 0;color: var(--text-secondary);font-size: 15px;}

/* ======TABS======*/
.tabs {display: flex;gap: 4px;padding: 4px;width: fit-content;border: 1px solid var(--border);border-radius: 10px;background: #f1f3f7;}
.tab {position: relative;padding: 9px 18px;border: 0;border-radius: 7px;background: transparent;color: #64748b;font-size: 14px;font-weight: 550;cursor: pointer;
    transition:color var(--transition),background var(--transition),box-shadow var(--transition);}
.tab:hover {color: #334155;}
.tab.active {background: #ffffff;color: var(--primary);box-shadow:0 1px 2px rgba(15, 23, 42, 0.06),0 1px 4px rgba(15, 23, 42, 0.04);}

/*Remove the old underline indicator.*/
.tab.active::after {display: none;}

/* ======FEATURE CONTENT======*/
.tab-content {display: none;margin-top: 24px;min-height: 420px;border: 1px solid var(--border);border-radius: var(--radius-lg);background: var(--surface);
    box-shadow: var(--shadow-md);overflow: hidden;animation: fadeIn 180ms ease;}
.tab-content.active {display: block;}

/* ---------- Placeholder feature ---------- */
.placeholder {min-height: 420px;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 60px 30px;text-align: center;}
.placeholder-icon {width: 58px;height: 58px;display: flex;align-items: center;justify-content: center;margin-bottom: 20px;border: 1px solid #dfe3ff;border-radius: 15px;
    background:linear-gradient(145deg,#f5f6ff,#e9ecff);color: var(--primary);font-size: 14px;font-weight: 700;box-shadow:0 5px 15px rgba(79, 70, 229, 0.08);}
.placeholder h2 {margin: 0 0 8px;color: #1e293b;font-size: 19px;font-weight: 650;letter-spacing: -0.015em;}
.placeholder p {max-width: 400px;margin: 0;color: var(--text-secondary);font-size: 14px;line-height: 1.65;}

/* =========================================================
   DASHBOARD FOOTER
   ========================================================= */

.dashboard-footer {width: 100%;margin-top: 28px;padding-top: 18px;border-top: 1px solid #e5e7eb;color: #94a3b8;}
.dashboard-footer p {margin: 0;font-size: 12px;line-height: 1.6;color: #9ca3af;}
.dashboard-footer p + p {margin-top: 7px;}
.dashboard-footer strong {color: #64748b;font-weight: 600;}

/* ====== MOBILE ====== */
@media (max-width: 600px) {
    .dashboard-footer {margin-top: 22px;padding-top: 15px;}
    .dashboard-footer p {font-size: 10px;}}

/* ======ANIMATION======*/
@keyframes fadeIn {from {opacity: 0;transform: translateY(3px);}to {opacity: 1;transform: translateY(0);}}

/* ======TABLET======*/
@media (max-width: 800px) {
    .navbar {padding: 0 24px;}
    .dashboard {padding:42px 24px 60px;}}

/* ======MOBILE====== */
@media (max-width: 600px) {
    .auth-page {padding: 20px;}
    .auth-card {padding: 32px 24px;border-radius: 16px;}
    .auth-card h1 {font-size: 26px;}

    /* Navbar */
    .navbar {height: 62px;padding: 0 16px;}
    .user-area {gap: 8px;}
    .user-area span {display: none;}

    /* Dashboard */
    .dashboard {padding:32px 16px 50px;}
    .dashboard-heading {margin-bottom: 26px;}
    .dashboard-heading h1 {font-size: 26px;}

    /* Tabs */
    .tabs {width: 100%;overflow-x: auto;scrollbar-width: none;}
    .tabs::-webkit-scrollbar {display: none;}
    .tab {flex: 1;min-width: max-content;padding: 9px 14px;}

    /* Content */
    .tab-content {margin-top: 18px;min-height: 350px;}
    .placeholder {min-height: 350px;padding: 40px 20px;}
}

/* ======ACCESSIBILITY======*/
button:focus-visible,a:focus-visible,input:focus-visible {outline: 2px solid var(--primary);outline-offset: 2px;}

/* Users who request reduced animation */
@media (prefers-reduced-motion: reduce) {*,*::before,*::after {scroll-behavior: auto !important;animation-duration: 0.01ms !important;transition-duration: 0.01ms !important;}}