/*
 * FINANCEOS360 MAINTENANCE DOCUMENTATION
 * File: home-style.css
 * Role: Stylesheet for this page/module.
 * Maintenance: preserve existing selectors, responsive breakpoints, layout, dimensions, colors, and component states unless explicitly requested.
 */

*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Arial,Helvetica,sans-serif;background:#f8fafc;color:#111827}
.navbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 7%;background:#fff;border-bottom:1px solid #e5e7eb}.logo{font-size:22px;font-weight:800}.logo a{text-decoration:none;color:#111827}.logo span{color:#2563eb}.main-nav{display:flex;align-items:center;gap:26px}.main-nav a{text-decoration:none;color:#64748b;font-size:14px;position:relative;padding:27px 0}.main-nav a:hover{color:#2563eb}.main-nav a.active{color:#2563eb}.main-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;background:#2563eb;border-radius:2px}.nav-buttons{display:flex;gap:10px}button{cursor:pointer;font-family:inherit}.login-btn,.signup-btn{padding:9px 17px;border-radius:7px;font-size:14px}.login-btn{background:#fff;border:1px solid #d1d5db}.signup-btn{background:#2563eb;color:#fff;border:0}
.hero{min-height:650px;padding:90px 7%;display:flex;align-items:center;justify-content:space-between;gap:70px;background:linear-gradient(135deg,#f8fbff,#eef5ff)}.hero-content{max-width:580px}.badge{display:inline-block;padding:7px 12px;background:#e8f0ff;color:#2563eb;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:20px}.hero h1{font-size:clamp(42px,5vw,68px);line-height:1.05;margin-bottom:24px}.hero h1 span{color:#2563eb}.hero p{color:#64748b;font-size:17px;line-height:1.7;max-width:500px;margin-bottom:30px}.hero-buttons{display:flex;gap:12px}.primary-btn,.secondary-btn{padding:13px 22px;border-radius:8px;font-size:14px;font-weight:600}.primary-btn{background:#2563eb;color:#fff;border:0}.secondary-btn{background:#fff;border:1px solid #d1d5db}
.dashboard-preview{width:440px;padding:24px;background:#fff;border:1px solid #e2e8f0;border-radius:18px;box-shadow:0 25px 60px rgba(37,99,235,.12)}.preview-header{display:flex;justify-content:space-between;align-items:center}.preview-header small,.preview-stats small{color:#94a3b8;font-size:11px}.preview-header h2{margin-top:5px;font-size:28px}.balance-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eaf2ff;color:#2563eb;border-radius:10px;font-weight:bold}.chart{height:150px;display:flex;align-items:end;justify-content:space-around;margin:30px 0 20px;border-bottom:1px solid #e5e7eb}.bar{width:28px;background:#2563eb;border-radius:5px 5px 0 0}.b1{height:45%}.b2{height:65%}.b3{height:50%}.b4{height:80%}.b5{height:60%}.b6{height:90%}.b7{height:75%}.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.preview-stats div{padding:10px;background:#f8fafc;border-radius:8px}.preview-stats strong{display:block;margin-top:5px;font-size:14px}.income{color:#059669}.expense{color:#dc2626}
.features{padding:90px 7%;background:#fff}.section-title{max-width:600px;margin-bottom:45px}.section-title small,.about small{color:#2563eb;font-size:11px;font-weight:bold}.section-title h2{font-size:35px;margin:10px 0 12px}.section-title p{color:#64748b;line-height:1.6}.feature-container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature-card{padding:28px;border:1px solid #e5e7eb;border-radius:14px;transition:.2s}.feature-card:hover{transform:translateY(-4px);border-color:#bfdbfe;box-shadow:0 15px 30px rgba(0,0,0,.05)}.feature-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:#eaf2ff;color:#2563eb;border-radius:10px;margin-bottom:18px;font-weight:bold}.feature-card h3{margin-bottom:10px}.feature-card p{color:#64748b;line-height:1.6;font-size:14px}
.about{padding:80px 7%;display:grid;grid-template-columns:1fr 1fr;gap:50px;background:#f8fafc}.about h2{font-size:40px;margin-top:10px}.about h2 span{color:#2563eb}.about p{color:#64748b;line-height:1.8;align-self:center}
footer{padding:18px 7%;display:flex;justify-content:space-between;align-items:center;gap:24px;background:#111827;color:#fff}
footer p{color:#94a3b8;font-size:12px}
.footer-links{display:flex;align-items:center;gap:22px}
.footer-links a{text-decoration:none;color:#94a3b8;font-size:12px}
.footer-links a:hover{color:#fff}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.65);z-index:1000}.modal.show{display:flex}.modal-box{width:100%;max-width:400px;padding:30px;background:#fff;border-radius:14px;position:relative}.modal-box h2{margin-bottom:8px}.modal-box>p{color:#64748b;font-size:13px;margin-bottom:22px}.close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:25px;color:#64748b}.modal-box form{display:flex;flex-direction:column;gap:12px}.modal-box input{padding:12px;border:1px solid #d1d5db;border-radius:7px;outline:0}.modal-box input:focus{border-color:#2563eb}.modal-btn{padding:12px;background:#2563eb;color:#fff;border:0;border-radius:7px;font-weight:600}.switch{text-align:center;margin-top:18px;color:#64748b;font-size:12px}.switch span{color:#2563eb;cursor:pointer;font-weight:bold}
@media(max-width:900px){.main-nav{gap:14px}.main-nav a{font-size:12px}.hero{flex-direction:column;text-align:center;padding-top:60px}.hero p{margin-left:auto;margin-right:auto}.hero-buttons{justify-content:center}.dashboard-preview{width:min(440px,100%)}.feature-container{grid-template-columns:1fr}.about{grid-template-columns:1fr}}
@media(max-width:500px){.navbar{height:auto;min-height:72px;padding:12px 20px;flex-wrap:wrap;gap:10px}.main-nav{order:3;width:100%;justify-content:center;gap:14px;flex-wrap:wrap}.main-nav a{font-size:11px}.hero,.features,.about{padding-left:20px;padding-right:20px}.login-btn{display:none}.hero h1{font-size:42px}footer{flex-direction:column;gap:9px;padding:16px 20px}.footer-links{gap:16px;flex-wrap:wrap;justify-content:center}}

.google-divider{display:flex;align-items:center;gap:10px;margin:14px 0;color:#94a3b8;font-size:11px}
.google-divider::before,.google-divider::after{content:"";height:1px;background:#e2e8f0;flex:1}
.google-btn{width:100%;height:42px;border:1px solid #d5ddea;background:#fff;border-radius:7px;color:#26344c;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px}
.google-btn:hover{background:#f8fafc}
.google-g{font-weight:800;font-size:18px;font-family:Arial,sans-serif}


/* ============================================================
   RESPONSIVE LAYOUT
   These rules keep the FinanceOS interface usable on desktop,
   laptop, tablet and mobile screens without changing features.
   ============================================================ */

html, body {
    max-width: 100%;
    overflow-x: clip;
}

@media (max-width: 900px) {
    .content {
        width: 100%;
        max-width: none;
        padding: 20px;
    }

    .topbar {
        gap: 16px;
    }

    .top-actions {
        flex-wrap: wrap;
    }

    .card,
    .panel,
    .management-card,
    .planner-card,
    .monthly-card,
    .records-card {
        max-width: 100%;
    }

    .table-wrap,
    .table-container,
    .transactions-table-wrap,
    .distribution-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Phone navigation becomes a compact bottom navigation bar. */
@media (max-width: 1024px) {

    .sidebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 58px;
        min-height: 58px;
        padding: 4px 2px;
        z-index: 1000;
        border-top: 1px solid #24314a;
    }

    .sidebar .brand,
    .sidebar-bottom {
        display: none;
    }

    .sidebar nav {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: space-around;
        gap: 0;
    }

    .sidebar nav button {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 2px;
        font-size: 16px;
        line-height: 1;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        border-radius: 7px;
    }

    .sidebar nav button.active {
        background: #1b2943;
    }

    .content {
        width: 100%;
        padding: 16px;
    }

    .topbar,
    .settings-header,
    .section-heading {
        flex-wrap: wrap;
    }

    .topbar h1 {
        font-size: 25px;
    }

    .top-actions {
        width: 100%;
        justify-content: space-between;
    }

    .year-control {
        flex: 1;
    }

    .year-control select {
        max-width: 130px;
    }

    .profile-name {
        display: inline;
    }

    .date-month-card,
    .salary-overview,
    .summary-grid,
    .category-grid,
    .distribution-grid,
    .management-form,
    .charts-grid {
        width: 100%;
        max-width: 100%;
    }

    .date-box,
    .month-box,
    .total-expense {
        min-width: 0;
    }

    .month-box .month-list {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .month-box .month-list button {
        flex: 1 0 auto;
    }

    .table-wrap table,
    .table-container table,
    .transactions-table-wrap table,
    .distribution-table-wrap table {
        min-width: 650px;
    }

    .management-form input,
    .management-form select,
    .management-form textarea,
    .management-form button {
        width: 100%;
        max-width: 100%;
    }

    .table-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .table-actions input,
    .search-input {
        width: 100%;
        max-width: 100%;
    }

    .profile-menu {
        right: 16px;
        left: auto;
        max-width: calc(100vw - 32px);
    }

    .settings-card {
        width: 100%;
    }
}

/* Very small phones: reduce spacing, keep controls tappable. */
@media (max-width: 380px) {
    .content {
        padding: 12px;
    }

    .topbar h1 {
        font-size: 22px;
    }

    .profile-name {
        display: none;
    }

    .sidebar nav button {
        font-size: 15px;
    }

    .card,
    .planner-card,
    .monthly-card,
    .records-card {
        border-radius: 10px;
    }
}


/* PUBLIC HEADER — REFERENCE DESIGN */
.public-header{
    height:56px !important;
    margin:8px 16px 0 !important;
    padding:0 16px !important;
    background:#ffffff !important;
    border:1px solid #e5edf7 !important;
    border-radius:11px !important;
    box-shadow:0 4px 18px rgba(37,99,235,.08) !important;
}

.public-header .logo{
    font-size:20px;
}

.public-header .main-nav{
    gap:28px;
}

.public-header .main-nav a{
    padding:20px 0 !important;
}

.public-header .main-nav a.active::after{
    bottom:8px !important;
}

.public-header .nav-buttons{
    gap:9px;
}

.public-header .login-btn,
.public-header .signup-btn{
    padding:8px 18px;
    border-radius:7px;
}

@media(max-width:900px){
    .public-header{
        margin:8px 12px 0 !important;
    }
}

@media(max-width:500px){
    .public-header{
        height:auto !important;
        min-height:56px !important;
        margin:8px 8px 0 !important;
        padding:10px 12px !important;
        border-radius:10px !important;
    }

    .public-header .main-nav{
        gap:14px;
    }

    .public-header .main-nav a{
        padding:8px 0 !important;
    }

    .public-header .main-nav a.active::after{
        bottom:0 !important;
    }
}

.topbar .logo,
.topbar .logo a,
.nav-buttons .login-btn,
.nav-buttons .signup-btn{
    text-decoration:none;
}

/* PUBLIC HEADER - STICKY */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
}