/* ================================
   Global Variables
================================ */
:root {
    --color-bg: rgba(255, 255, 255, 0.05);
    --color-bg-error: #f8d7da;
    --color-bg-warning: #fff3cd;
    --color-bg-success: #d4edda;

    --color-border: rgba(255, 255, 255, 0.2);
    --color-border-alert: #f5c6cb;
    --color-border-warning: #ffeeba;
    --color-border-success: #c3e6cb;

    --color-white: white;
    --color-dark: black;
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-txt-error: #721c24;
    --color-txt-warning: #856404;
    --color-txt-success: #155724;

    --font-main: "IBM Plex Sans Thai", "Poppins", -apple-system, sans-serif;
    --radius-lg: 40px;
    --radius-md: 25px;
    --radius-sm: 10px;
    --blur-bg: 50px;

    /* ============================================================
       🆕 v3.1.0 Design Tokens — Redesign namespace (pf-*)
       Non-breaking: coexists with legacy tokens above. New components
       use pf-* directly; legacy pages keep their old vars until each
       phase touches them (progressive migration).
       ============================================================ */

    /* ---- Typography ---- */
    --pf-font-sans:  "IBM Plex Sans Thai", "Poppins", -apple-system, sans-serif;
    --pf-font-mono:  "IBM Plex Mono", "SF Mono", "Consolas", monospace;

    /* ---- Ink / text scale (dark neutrals) ---- */
    --pf-ink:        #0E1F44;   /* headings / hero */
    --pf-ink-2:      #2b3242;   /* body */
    --pf-ink-3:      #3a4260;   /* subheads */
    --pf-muted-1:    #475569;   /* secondary text */
    --pf-muted-2:    #64748b;   /* captions */
    --pf-muted-3:    #7a8494;   /* dim / disabled */

    /* ---- Brand ---- */
    --pf-primary:      #1F5FE6;
    --pf-primary-dark: #1535a8;
    --pf-primary-2:    #1d3fae;
    --pf-primary-tint: #E8EEFB;

    /* ---- Status ---- */
    --pf-success:      #2f8a5c;
    --pf-success-2:    #16a34a;
    --pf-success-tint: #E7F5EE;

    --pf-warning:      #B26A00;
    --pf-warning-2:    #f59e0b;
    --pf-warning-tint: #FBF1E0;

    --pf-danger:       #dc2626;
    --pf-danger-2:     #ef4444;
    --pf-danger-tint:  #fef2f2;

    --pf-info:         #14b8a6;
    --pf-info-tint:    #ccfbf1;

    /* 🆕 v3.1.0 Phase N §12 — Chart palette (reports.js reads these via getComputedStyle).
       Keeps hardcoded hex out of JS so a single token change restyles every chart. */
    --pf-chart-income:  #10b981;    /* emerald-500 */
    --pf-chart-expense: #ef4444;    /* red-500 */
    --pf-chart-net:     #2563eb;    /* blue-600 */
    --pf-chart-grid:    rgba(15, 23, 42, 0.06);
    --pf-chart-tick:    #94a3b8;
    --pf-chart-label:   #0f172a;

    /* ---- Surfaces ---- */
    --pf-bg:           #eceef3;
    --pf-bg-alt:       #f5f7fa;
    --pf-card:         #ffffff;
    --pf-line:         #e2e8f0;
    --pf-line-2:       #cbd5e1;

    /* ---- Elevation ---- */
    --pf-shadow-sm:    0 1px 2px rgba(15,23,42,.06);
    --pf-shadow:       0 4px 12px rgba(15,23,42,.08);
    --pf-shadow-lg:    0 8px 30px -14px rgba(15,23,42,.18);

    /* ---- Radius (component-specific presets) ---- */
    --pf-radius-btn:   10px;
    --pf-radius-card:  16px;
    --pf-radius-sheet: 20px;

    /* ---- Motion ---- */
    --pf-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --pf-duration:     220ms;

    /*===== Colors =====*/
    --body-color: #f5f5f5;
    --sidebar-color: #E9E9E9;
    --primary-color: #B0B0B0;
    --primary-color-dark: #B0B0B0;
    --primary-color-light: #F6F5FF;
    --primary-color-active: #2196F3;
    --toggle-color: red;
    --text-color: #333333;
    --main-body-color: #FFF;
    --main-text-color: #323130;
    --card-color: #D9D9D9;

    --table-dark: #07090c;
    --table-light: #e9f7fd;
    --table-text: #333333;
    --table-header-text: #FFF;

    /*===== Transition =====*/
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

/* ================================
   Reset & Base Styles
================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    overflow: hidden;
}

/* Legacy .container — no longer used (login redesigned, dashboard uses .app-shell).
   Removed background image reference to dead file. */
.container {
    font-family: var(--font-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* ================================
   Wrapper
================================ */
.wrapper {
    width: 100%;
    max-width: 420px;
    padding: 30px 40px;
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    backdrop-filter: blur(var(--blur-bg));
    border-radius: var(--radius-sm);
    box-shadow: 0 0 20px var(--color-shadow);
}

/* ================================
   Typography
================================ */
.wrapper h1 {
    font-size: 2.25rem;
    text-align: center;
    margin-bottom: 30px;
}

/* ================================
   Form Signin Elements
================================ */
.input-box {
    position: relative;
    margin-bottom: 25px;
}

.input-box input {
    width: 100%;
    height: 50px;
    padding: 0 20px;
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    color: var(--color-white);
    outline: none;
}

.input-box input::placeholder {
    color: var(--primary-color);
}

.input-box input:focus::placeholder {
    color: transparent;
}

.input-box i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    pointer-events: none;
}

/* ================================
   Utilities
================================ */
.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.remember-forgot input {
    accent-color: var(--color-white);
    margin-right: 5px;
}

.remember-forgot a {
    color: var(--color-white);
    text-decoration: none;
}

.remember-forgot a:hover {
    text-decoration: underline;
}

/* ================================
   Buttons
================================ */
.btn {
    width: 100%;
    height: 45px;
    background-color: var(--color-white);
    color: var(--color-dark);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 0 10px var(--color-shadow);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #eaeaea;
}

/* ================================
   Register Link
================================ */
.register-link {
    text-align: center;
    font-size: 0.9rem;
    margin-top: 20px;
}

.register-link a {
    color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
}

.register-link a:hover {
    text-decoration: underline;
}

/* ================================
   Utilities
================================ */
.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.remember-forgot input[type="checkbox"] {
    accent-color: var(--color-white);
    margin-right: 5px;
}

.remember-forgot label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--color-white);
}

.remember-forgot a {
    color: var(--color-white);
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

.remember-forgot a:hover {
    text-decoration: underline;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-dark);
    background-color: var(--color-white);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    text-decoration: none;
}

/* ================================
   Alert Box
================================ */
.floating-alert {
    position: fixed;
    width: 25%;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 25px;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    animation: slideDown 1s ease forwards;
}

.floating-alert.error {
    background-color: var(--color-bg-error);
    border-color: var(--color-border-error);
    color: var(--color-txt-error);
}

.floating-alert.warning {
    background-color: var(--color-bg-warning);
    border-color: var(--color-border-warning);
    color: var(--color-txt-warning);
}

.floating-alert.success {
    background-color: var(--color-bg-success);
    border-color: var(--color-border-success);
    color: var(--color-txt-success);
}

.floating-alert .closebtn {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ================================
   sidebar
================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--sidebar-color);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

.sidebar.collapsed {
    width: 88px;
}

.sidebar .text {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    opacity: 1;
}

.sidebar.collapsed .text {
    opacity: 0;
}

.sidebar .image {
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar li {
    height: 40px;
    margin-top: 10px;
    list-style: none;
    display: flex;
    align-items: center;
}

.sidebar li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    font-size: 20px;
}

.sidebar li .icon,
.sidebar li .text {
    color: var(--text-color);
}

.sidebar header {
    position: relative;
}

.sidebar .image-text img {
    width: 40px;
    border-radius: 6px;
    cursor: pointer;
}

.sidebar header .image-text {
    display: flex;
    align-items: center;
}

.sidebar header .image-text .header-text {
    display: flex;
    flex-direction: column;
}

.sidebar .header-text .name {
    font-weight: 600;
}

.sidebar .header-text .profressional {
    margin-top: -2px;
}

/* .sidebar header .toggle {
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    background-color: var(--primary-color-light);
    cursor: pointer;
    transition: var(--tran-05);
}

.sidebar header .toggle:hover {
    color: var(--sidebar-color);
    background: var(--primary-color);
} */

.sidebar .menu-bar {
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar .menu {
    margin-top: 35px;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    background-color: #2196F3;
    border-radius: 2px;
}

.sidebar .search-box {
    background: var(--primary-color-light);
    border-radius: 6px;
    cursor: pointer;
}

.sidebar .search-box input {
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 500;
    background: var(--primary-color-light);
    transition: var(--tran-04);
}

.sidebar li a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sidebar li a:hover {
    background: var(--primary-color);
    transition: background-color 0.1s ease;
}

/* .sidebar li a:hover .icon,
.sidebar li a:hover .text,
.sidebar li.active a:hover .icon {
    color: var(--sidebar-color);
}

.sidebar li.active a .icon {
    color: var(--primary-color-dark);
} */

.bottom-content {
    margin-top: auto;
}

.bottom-content li a:hover {
    background: #e53935;
}

.bottom-content li a:hover .icon,
.bottom-content li a:hover .text,
.bottom-content li.active a:hover .icon {
    color: var(--sidebar-color);
}

.sidebar.collapsed~.main-content {
    left: 88px;
    width: calc(100% - 88px);
}

/* ================================
   Main Content
================================ */
.main-content {
    position: relative;
    left: 250px;
    height: 100vh;
    width: calc(100% - 250px);
    padding: 1rem;
    background: var(--body-color);
    background-color: var(--body-color);
    overflow-x: hidden;
}

.header-warpper img {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border-radius: 50%;
}

.header-warpper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background: var(--main-body-color);
    padding: 1rem;
    margin-bottom: 1rem;
}

.header-title {
    color: var(--main-text-color);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.main-content .search-box {
    background: var(--primary-color-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
}

.main-content .search-box input {
    outline: none;
    border: none;
    font-size: 8px;
    font-weight: 500;
    padding: 10px;
    background: transparent;
    cursor: pointer;
}

.main-content .search-box i {
    font-size: 1.2rem;
    color: var(--text-color);
    cursor: pointer;
}

.main-content .search-box i:hover {
    transform: scale(1.2);
}

/* ================================
   Responsive
================================ */
@media (min-width: 1200px) {}

/* Computer, Notebook */
@media (min-width: 992px) and (max-width: 1199px) {}

/* iPad, Tablet */
@media (min-width: 768px) and (max-width: 991px) {}

/* iPhone, MobilePhone*/
@media (min-width: 375px) and (max-width: 768px) {
    .wrapper {
        max-width: 350px;
        padding: 20px 30px;
    }
}

@media (max-width: 374px) {
    .wrapper {
        display: none;
    }
}

/* ================================================================
   LOGIN PAGE — Phase 1-5 improvements
================================================================ */

/* --- Accessibility: visually hidden but readable by screen readers --- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Login wrapper: animation + glassmorphism polish --- */
.login-wrapper {
    animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    padding: 36px 40px 24px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Brand header --- */
.login-brand {
    text-align: center;
    margin-bottom: 28px;
}

.login-brand__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-white);
    margin-bottom: 12px;
    border: 1.5px solid var(--color-border);
}

.login-brand__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 6px;
    letter-spacing: 0.3px;
}

.login-brand__subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Hide the old <h1>Sign In</h1> if it still exists (kept for back-compat) */
.login-wrapper > form > h1 {
    display: none;
}

/* --- Password input + eye toggle --- */
.input-box--password {
    position: relative;
}

.input-box--password input {
    padding-right: 50px; /* room for eye button */
}

.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--color-white);
    opacity: 0.7;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    outline: none;
}

/* --- Caps Lock warning --- */
.caps-lock-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -15px 0 15px;
    padding: 8px 12px;
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: var(--radius-sm);
    color: #ffd54f;
    font-size: 0.8rem;
}

.caps-lock-warning[hidden] {
    display: none;
}

/* --- Inline form error (replaces floating alert for login errors) --- */
.form-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: rgba(220, 53, 69, 0.18);
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: var(--radius-sm);
    color: #ffb3b3;
    font-size: 0.88rem;
    line-height: 1.4;
    animation: shake 0.4s ease;
}

.form-error i {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-6px); }
    75%      { transform: translateX(6px); }
}

/* --- Primary button + loading state --- */
.btn--primary {
    position: relative;
    width: 100%;
    height: 45px;
    background-color: var(--color-white);
    color: var(--color-dark);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn--primary:hover:not(:disabled) {
    background-color: #eaeaea;
}

.btn--primary:active:not(:disabled) {
    transform: scale(0.98);
}

.btn--primary:disabled {
    cursor: not-allowed;
    opacity: 0.75;
}

.btn__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--color-dark);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

/* 🆕 v3.1.0 Phase X Login Round 6 — loading state: animated dots cycle
   instead of a static "..." so the button feels alive while waiting. */
.btn--primary.is-loading .btn__spinner {
    display: inline-block;
}
.btn--primary.is-loading {
    cursor: wait;
    opacity: 0.9;
}
.btn--primary.is-loading .btn__label {
    position: relative;
}
.btn--primary.is-loading .btn__label::after {
    content: "";
    display: inline-block;
    width: 1.6em;
    text-align: left;
    animation: btnLoadingDots 1.4s steps(4, end) infinite;
}
@keyframes btnLoadingDots {
    0%, 100% { content: ""; }
    25%      { content: "."; }
    50%      { content: ".."; }
    75%      { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
    .btn--primary.is-loading .btn__label::after {
        content: "...";
        animation: none;
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- Footer --- */
.login-footer {
    text-align: center;
    margin-top: 22px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

/* --- Mobile tweaks --- */
@media (max-width: 768px) {
    .login-wrapper {
        padding: 28px 24px 20px;
    }

    .login-brand__icon {
        width: 56px;
        height: 56px;
    }

    .login-brand__title {
        font-size: 1.3rem;
    }
}

/* ================================================================
   MODERN LOGIN — design refresh
   Blue / Sky / Cyan accent · refined glassmorphism · aligned icons
================================================================ */

:root {
    /* Accent single-color tokens (kept — still used individually) */
    --accent-500:        #3b82f6;   /* blue-500  */
    --accent-600:        #2563eb;   /* blue-600  */
    --accent-sky:        #0ea5e9;   /* sky-500   */
    --accent-cyan:       #06b6d4;   /* cyan-500  */
    --accent-cyan-light: #22d3ee;   /* cyan-400  */

    /* ============================================================
       BRAND GRADIENT SYSTEM (v3.1.2+)
       Single source of truth for every blue-gradient surface in the
       app. Default (profile-avatar / FAB / primary buttons / pills)
       is the "deep brand blue" — bright #3b82f6 → #1d4ed8. Hero cards
       (Net Worth, Balance Sheet) use the 3-stop cyan-tinted variant.
       Deep is for Add-TX review / Profile card hero / Setup totals.
       Soft is reserved for subtle background washes.

       Round 4 (v3.1.2+): removed legacy --accent-gradient-* tokens
       after migrating all 60+ call sites to --brand-gradient*.
       ============================================================ */
    --brand-500:              #3b82f6;   /* blue-500 · bright edge */
    --brand-600:              #2563eb;   /* blue-600 · mid stop    */
    --brand-700:              #1d4ed8;   /* blue-700 · deep anchor */

    --brand-gradient:         linear-gradient(135deg, #3b82f6, #1d4ed8);
    --brand-gradient-hero:    linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #06b6d4 100%);
    --brand-gradient-deep:    linear-gradient(135deg, #2563eb 0%, #1d3fae 100%);
    --brand-gradient-soft:    linear-gradient(135deg, rgba(59, 130, 246, 0.10), rgba(59, 130, 246, 0.05));

    --brand-shadow-sm:        0 3px 10px rgba(37, 99, 235, 0.28);
    --brand-shadow-md:        0 6px 14px rgba(37, 99, 235, 0.35);
    --brand-shadow-lg:        0 10px 28px -4px rgba(37, 99, 235, 0.45);

    --surface-glass:     rgba(15, 23, 42, 0.55);   /* slate-900 a:0.55 */
    --surface-input:     rgba(255, 255, 255, 0.06);
    --border-soft:       rgba(255, 255, 255, 0.10);
    --border-focus:      rgba(6, 182, 212, 0.55);   /* cyan focus ring */

    --text-primary:      #f8fafc;   /* slate-50  */
    --text-secondary:    rgba(248, 250, 252, 0.65);
    --text-muted:        rgba(248, 250, 252, 0.45);

    --shadow-card:       0 25px 60px -20px rgba(0, 0, 0, 0.6),
                         0 10px 25px -10px rgba(59, 130, 246, 0.25);
    --shadow-button:     0 10px 30px -8px rgba(59, 130, 246, 0.55);
    --shadow-button-hov: 0 14px 40px -8px rgba(6, 182, 212, 0.7);
}

/* --- Page background: blue→cyan aura on deep navy --- */
.container:has(.login-wrapper) {
    background:
        radial-gradient(ellipse at 20% 0%,  rgba(59, 130, 246, 0.35), transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(6, 182, 212, 0.30), transparent 50%),
        linear-gradient(135deg, #0f172a 0%, #0c2447 50%, #0f172a 100%);
    background-attachment: fixed;
}

/* Fallback for browsers without :has() */
@supports not selector(:has(*)) {
    body {
        background: linear-gradient(135deg, #0f172a, #0c2447, #0f172a);
    }
}

/* --- Refined card --- */
/* 🆕 v3.1.0 Phase X Login Round 5 — card refinement:
   - deeper 2-layer shadow for better separation from the dark gradient bg
   - entrance animation (slide up + fade) so the form arrives smoothly
   - inner highlight via inset box-shadow for subtle "lit from above" depth */
.login-wrapper {
    background: var(--surface-glass);
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    box-shadow: 0 24px 60px -16px rgba(2, 6, 23, 0.55),
                0 8px 24px -8px rgba(2, 6, 23, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 40px 36px 28px;
    max-width: 440px;
    animation: loginWrapperEnter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes loginWrapperEnter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .login-wrapper { animation: none; }
}

/* --- Brand icon: blue→cyan gradient circle ---
   🆕 v3.1.0 Phase X login polish — spring bounce-in on page load so the
   mark feels alive the moment the form appears. */
.login-brand__icon {
    background: var(--brand-gradient);
    border: none;
    color: #ffffff;
    box-shadow:
        0 12px 24px -8px rgba(59, 130, 246, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    width: 68px;
    height: 68px;
    margin-bottom: 16px;
    animation: loginBrandPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes loginBrandPop {
    0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .login-brand__icon { animation: none; }
}

.login-brand__icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

/* 🆕 v3.1.0 Phase X Login Round 5 — brand title with 3-stop gradient
   (white → sky-100 → cyan-200) for a subtle sheen that ties to the brand
   blue→cyan accent. Added a soft text-shadow for depth on the glass bg. */
.login-brand__title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    background: linear-gradient(180deg, #ffffff 0%, #dbeafe 55%, #a5f3fc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 8px rgba(59, 130, 246, 0.14);
}

.login-brand__subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* --- Inputs: cleaner border, cyan focus ring --- */
.login-wrapper .input-box input {
    background: var(--surface-input);
    border: 1.5px solid var(--border-soft);
    border-radius: 12px;
    height: 52px;
    padding: 0 48px 0 18px;
    font-size: 0.95rem;
    color: var(--text-primary);
    /* 🆕 Force visible caret on iOS Safari (#3b82f6 / brand blue) */
    -webkit-text-fill-color: var(--text-primary);
    caret-color: #06b6d4;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.login-wrapper .input-box input:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* 🆕 v3.1.0 Phase X Login Round 3 — focus ring: 2-tone glow (blue outer +
   cyan inner) matching the Face ID / Primary button gradient family. */
.login-wrapper .input-box input:focus {
    border-color: var(--border-focus);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.16),
                0 0 0 1px rgba(59, 130, 246, 0.45),
                0 8px 20px -8px rgba(59, 130, 246, 0.35);
}

.login-wrapper .input-box input::placeholder {
    color: var(--text-muted);
}

/* --- ICON ALIGNMENT (Username icon + Password eye toggle ต้องตรงกัน) ---
   ทั้งสองตัวอยู่ตำแหน่งและขนาดเดียวกันเป๊ะ
   ใช้ `> i` direct child เพื่อไม่ให้ rule นี้ไปกระทบ <i> ที่อยู่ใน <button>
*/
.login-wrapper .input-box > i,
.login-wrapper .password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 1;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-wrapper .input-box > i {
    pointer-events: none;   /* decorative — ไม่ block click */
}

.login-wrapper .password-toggle {
    background: transparent;
    border: none;
    padding: 0;
    opacity: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.2s ease, transform 0.15s ease;
}

/* รีเซ็ต <i> ที่อยู่ใน toggle button — กัน base `.input-box i` มา override
   (เนื่องจาก <i> เป็น descendant ของ .input-box → base rule match ด้วย)
*/
.login-wrapper .password-toggle > i {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    pointer-events: none;
    font-size: inherit;
    line-height: 1;
}

/* 🆕 v3.1.0 Phase X Login Round 4 — password-toggle: subtle backdrop on
   hover + spring scale for a tactile feel. */
.login-wrapper .password-toggle:hover {
    color: var(--accent-cyan);
    background: rgba(6, 182, 212, 0.14);
    transform: translateY(-50%) scale(1.15);
}
.login-wrapper .password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

.login-wrapper .password-toggle:focus-visible {
    color: var(--accent-cyan);
    outline: none;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.45);
}

/* --- Remember + Reset row --- */
/* 🆕 v3.1.0 Phase X Login Round 3 — Remember-me + Forgot link row polish:
   bumped checkbox size, pointer cursor on label, slightly denser line-height,
   animated-underline on the forgot link (matches .settings-link pattern). */
.login-wrapper .remember-forgot {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 6px 0 22px;
    line-height: 1.3;
}

.login-wrapper .remember-forgot label {
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.login-wrapper .remember-forgot input[type="checkbox"] {
    accent-color: var(--accent-500);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.login-wrapper .remember-forgot a {
    color: #93c5fd;          /* blue-300 */
    font-weight: 600;
    position: relative;
    transition: color 0.18s ease;
}
.login-wrapper .remember-forgot a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1.5px;
    background: var(--accent-cyan-light, #67e8f9);
    transition: right 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-wrapper .remember-forgot a:hover {
    color: var(--accent-cyan-light);
    text-decoration: none;
}
.login-wrapper .remember-forgot a:hover::after { right: 0; }

/* --- Primary button: blue→cyan gradient + glow ---
   🆕 v3.1.0 Phase X login polish — height bumped to 52 for a weightier
   primary action; spring curve on transform for a bouncier hover. */
.login-wrapper .btn--primary {
    background: var(--brand-gradient);
    color: #ffffff;
    height: 52px;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-button);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease,
                filter 0.2s ease;
}

.login-wrapper .btn--primary:hover:not(:disabled) {
    background: var(--brand-gradient);
    filter: brightness(1.08) saturate(1.08);
    box-shadow: var(--shadow-button-hov);
    transform: translateY(-2px);
}

.login-wrapper .btn--primary:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    filter: brightness(0.96);
}

.login-wrapper .btn--primary:disabled {
    opacity: 0.7;
    filter: saturate(0.7);
}

.login-wrapper .btn__spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
}

/* --- Register link ---
   🆕 v3.1.0 Phase X Login Round 4 — animated underline on the register link
   (same pattern as the forgot link in Round 3 and .settings-link). */
.login-wrapper .register-link {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.login-wrapper .register-link a {
    color: #93c5fd;
    font-weight: 600;
    position: relative;
    transition: color 0.18s ease;
}
.login-wrapper .register-link a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -2px;
    height: 1.5px;
    background: var(--accent-cyan-light, #67e8f9);
    transition: right 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-wrapper .register-link a:hover {
    color: var(--accent-cyan-light);
    text-decoration: none;
}
.login-wrapper .register-link a:hover::after { right: 0; }

/* --- Caps Lock warning (universal amber) ---
   🆕 v3.1.0 Phase X Login Round 6 — slide-in reveal + left-accent for a
   proper "nudge" when the warning appears. Reads like a Health warning card. */
.login-wrapper .caps-lock-warning {
    background: rgba(251, 191, 36, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-left: 3px solid #fbbf24;
    color: #fcd34d;
    border-radius: 10px;
    font-size: 0.78rem;
    animation: loginNoticeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Inline error (universal rose) --- */
.login-wrapper .form-error {
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.4);
    border-left: 3px solid #fb7185;
    color: #fda4af;
    border-radius: 10px;
    font-size: 0.85rem;
    animation: loginNoticeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes loginNoticeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .login-wrapper .caps-lock-warning,
    .login-wrapper .form-error { animation: none; }
}

/* --- Footer --- */
.login-wrapper .login-footer {
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}

/* ================================================================
   TOAST NOTIFICATIONS — Tier 2
   - Stack ที่ bottom-right (newest อยู่ล่างสุด ใกล้มุมจอ)
   - Slide-in จากขวา / Fade-out
   - Progress bar countdown
   - Hover/focus → pause
   - Click × → dismiss / Esc → dismiss newest
   - 4 types: error / warning / success / info
================================================================ */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;              /* container ไม่บัง click ของอย่างอื่น */
    max-width: calc(100vw - 48px);
    width: 380px;
}

/* 🆕 v3.1.0 Phase AE toast Round 1 — deeper shadow + spring slide-in +
   subtle 1px inset highlight for glass depth. */
.toast {
    pointer-events: auto;
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 40px 16px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    box-shadow:
        0 20px 48px -8px rgba(0, 0, 0, 0.60),
        0 6px 16px -4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    font-size: 0.875rem;
    line-height: 1.45;
    overflow: hidden;
    transform: translateX(120%);
    opacity: 0;
    animation: toastSlideIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast--leaving {
    opacity: 0;
    transform: translateX(40px);
}

@keyframes toastSlideIn {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 🆕 v3.1.0 Phase AE toast Round 1 — icon bounce on arrival. */
.toast__icon {
    font-size: 22px;
    flex-shrink: 0;
    margin-top: 1px;
    animation: toastIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
@keyframes toastIconPop {
    0%   { opacity: 0; transform: scale(0.3) rotate(-30deg); }
    60%  { opacity: 1; transform: scale(1.25) rotate(10deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .toast__icon { animation: none; }
}

.toast__message {
    flex: 1 1 auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

.toast__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.toast__close:hover,
.toast__close:focus-visible {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

/* Progress bar — แท่งเล็กๆ ด้านล่าง toast นับถอยหลังด้วย scaleX animation */
.toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    animation: toastProgress linear forwards;
}

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ---------- Severity variants ---------- */

/* Error — rose */
.toast--error                   { border-left: 4px solid #f43f5e; }
.toast--error  .toast__icon     { color: #fb7185; }
.toast--error  .toast__progress { background: #f43f5e; }

/* Warning — amber */
.toast--warning                 { border-left: 4px solid #f59e0b; }
.toast--warning .toast__icon    { color: #fbbf24; }
.toast--warning .toast__progress{ background: #f59e0b; }

/* Success — emerald */
.toast--success                 { border-left: 4px solid #10b981; }
.toast--success .toast__icon    { color: #34d399; }
.toast--success .toast__progress{ background: #10b981; }

/* Info — cyan (เข้ากับ login theme) */
.toast--info                    { border-left: 4px solid #06b6d4; }
.toast--info .toast__icon       { color: #22d3ee; }
.toast--info .toast__progress   { background: #06b6d4; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
    }
}

/* ---------- Hide legacy .floating-alert (ถูกแทนด้วย toast แล้ว) ---------- */
.floating-alert {
    display: none !important;
}