:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --sidebar: #0f172a;
    --sidebar-hover: #1e293b;
    --sidebar-active: #2563eb;

    --text: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --border: #e2e8f0;

    --primary: #2563eb;
    --primary-hover: #1d4ed8;

    --success: #16a34a;
    --success-soft: #dcfce7;

    --danger: #dc2626;
    --danger-soft: #fee2e2;

    --warning: #d97706;
    --warning-soft: #fef3c7;

    --info: #0284c7;
    --info-soft: #e0f2fe;

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

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08);

    --sidebar-width: 240px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

/* ================================
   APP LAYOUT
================================ */

.app {
    min-height: 100vh;
    display: flex;
}

.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;

    width: var(--sidebar-width);

    background: var(--sidebar);
    color: white;

    display: flex;
    flex-direction: column;

    z-index: 1000;
}

.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    width: calc(100% - var(--sidebar-width));
}

/* ================================
   SIDEBAR
================================ */

.brand {
    padding: 26px 22px 30px;
}

.brand-title {
    display: flex;
    align-items: center;
    gap: 11px;

    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

.brand-icon {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--primary);
    border-radius: 10px;

    font-size: 17px;
}

.brand-subtitle {
    margin-top: 5px;
    margin-left: 45px;

    font-size: 11px;
    color: #94a3b8;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.sidebar-section {
    padding: 0 12px;
    margin-bottom: 22px;
}

.sidebar-label {
    padding: 0 11px;
    margin-bottom: 8px;

    color: #64748b;

    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 12px;

    border-radius: 9px;

    color: #cbd5e1;
    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.sidebar-link:hover {
    background: var(--sidebar-hover);
    color: white;
}

.sidebar-link.active {
    background: var(--sidebar-active);
    color: white;
}

.sidebar-icon {
    width: 20px;
    text-align: center;
    font-size: 16px;
}

.sidebar-bottom {
    margin-top: auto;
    padding: 14px 12px 20px;
}

/* ================================
   TOP BAR
================================ */

.topbar {
    height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 32px;

    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.topbar-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-button {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: white;
    color: var(--text-secondary);
}

.topbar-button:hover {
    background: var(--surface-soft);
}

/* ================================
   PAGE
================================ */

.page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 30px 32px 50px;
}

.page-heading {
    margin-bottom: 25px;
}

.page-heading h1 {
    margin: 0;

    font-size: 27px;
    font-weight: 700;

    letter-spacing: -0.7px;
}

.page-heading p {
    margin: 5px 0 0;

    color: var(--text-secondary);
    font-size: 14px;
}

/* ================================
   GRID
================================ */

.grid {
    display: grid;
    gap: 20px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ================================
   CARDS
================================ */

.card {
    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-lg);

    padding: 22px;

    box-shadow: var(--shadow-sm);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.card-title {
    margin: 0;

    font-size: 15px;
    font-weight: 700;
}

.card-subtitle {
    margin-top: 3px;

    color: var(--text-secondary);
    font-size: 12px;
}

/* ================================
   STAT CARDS
================================ */

.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-label {
    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 600;
}

.stat-value {
    margin-top: 7px;

    font-size: 26px;
    font-weight: 750;

    letter-spacing: -0.8px;
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin-top: 7px;

    font-size: 12px;
    font-weight: 600;
}

.stat-change.positive {
    color: var(--success);
}

.stat-change.negative {
    color: var(--danger);
}

.stat-icon {
    position: absolute;
    right: 20px;
    top: 20px;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: var(--info-soft);
    color: var(--primary);
}

/* ================================
   BUTTONS
================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 40px;

    padding: 0 15px;

    border: 1px solid transparent;
    border-radius: 9px;

    font-size: 13px;
    font-weight: 600;

    transition:
        background 0.15s ease,
        border 0.15s ease,
        transform 0.1s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: white;
    border-color: var(--border);
    color: var(--text);
}

.btn-secondary:hover {
    background: var(--surface-soft);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

/* ================================
   INPUTS
================================ */

.input,
.select {
    width: 100%;

    height: 42px;

    padding: 0 12px;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: white;
    color: var(--text);

    outline: none;

    transition:
        border 0.15s ease,
        box-shadow 0.15s ease;
}

.input:focus,
.select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* ================================
   TABLES
================================ */

.table-container {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    padding: 12px 14px;

    background: var(--surface-soft);

    color: var(--text-secondary);

    font-size: 11px;
    font-weight: 700;

    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table td {
    padding: 14px;

    border-top: 1px solid var(--border);

    font-size: 13px;
}

.table tbody tr:hover {
    background: #f8fafc;
}

/* ================================
   BADGES
================================ */

.badge {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 11px;
    font-weight: 700;
}

.badge-success {
    background: var(--success-soft);
    color: #166534;
}

.badge-danger {
    background: var(--danger-soft);
    color: #991b1b;
}

.badge-warning {
    background: var(--warning-soft);
    color: #92400e;
}

.badge-info {
    background: var(--info-soft);
    color: #075985;
}

/* ================================
   FINANCIAL VALUES
================================ */

.positive {
    color: var(--success);
}

.negative {
    color: var(--danger);
}

.muted {
    color: var(--text-secondary);
}

/* ================================
   CHART CONTAINERS
================================ */

.chart-container {
    width: 100%;
    min-height: 280px;

    position: relative;
}

.chart-large {
    min-height: 350px;
}

/* ================================
   TOOLBAR
================================ */

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 20px;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-box {
    position: relative;
}

.search-box .input {
    min-width: 240px;
}

/* ================================
   EMPTY / LOADING
================================ */

.empty-state {
    padding: 50px 20px;

    text-align: center;
    color: var(--text-secondary);
}

.loading {
    padding: 35px;

    text-align: center;
    color: var(--text-secondary);
}

/* ================================
   DIVIDEND / STOCK LOGOS
================================ */

.company-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-logo {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: #eff6ff;
    color: var(--primary);

    font-size: 12px;
    font-weight: 800;
}

.company-name {
    font-weight: 650;
}

.company-symbol {
    color: var(--text-secondary);
    font-size: 11px;
}

/* ================================
   DIVIDEND CALENDAR
================================ */

.month-card {
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 12px;

    background: white;
}

.month-name {
    font-size: 13px;
    font-weight: 700;
}

.month-value {
    margin-top: 5px;

    font-size: 20px;
    font-weight: 700;
}

.month-bar {
    height: 6px;

    margin-top: 12px;

    background: #e2e8f0;
    border-radius: 999px;

    overflow: hidden;
}

.month-bar-fill {
    height: 100%;

    background: var(--primary);
    border-radius: 999px;
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1100px) {

    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 800px) {

    :root {
        --sidebar-width: 0px;
    }

    .sidebar {
        position: static;

        width: 100%;
        height: auto;

        min-height: auto;
    }

    .app {
        display: block;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    .brand {
        padding: 18px;
    }

    .sidebar-nav {
        flex-direction: row;
        overflow-x: auto;
    }

    .sidebar-section {
        padding: 0 10px 10px;
    }

    .sidebar-link {
        white-space: nowrap;
    }

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

    .topbar {
        padding: 0 18px;
    }

    .page {
        padding: 22px 16px 40px;
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .toolbar-left,
    .toolbar-right {
        width: 100%;
        flex-wrap: wrap;
    }

    .search-box,
    .search-box .input {
        width: 100%;
        min-width: 0;
    }

}

@media (max-width: 500px) {

    .topbar {
        height: 64px;
    }

    .topbar-title {
        font-size: 17px;
    }

    .page-heading h1 {
        font-size: 23px;
    }

    .card {
        padding: 17px;
    }

    .stat-value {
        font-size: 23px;
    }

    .btn {
        width: 100%;
    }

}
</style>

/* ================================
   USER MENU
================================ */

.user-menu {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8efff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
}

.user-details {
    min-width: 120px;
}

.user-name {
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
}

.user-email {
    margin-top: 2px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.2;
}

.logout-button {
    height: 32px;
    padding: 0 11px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.logout-button:hover {
    background: #fee2e2;
    border-color: #fecaca;
    color: #dc2626;
}

.portfolio-status{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.portfolio-status-in{background:#dcfce7;color:#15803d}
.portfolio-status-out{background:#f1f5f9;color:#64748b}

.user-account-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;border-radius:10px;padding:4px 6px;transition:background .2s ease}.user-account-link:hover{background:rgba(15,23,42,.06)}

/* ===== Admin Panel ===== */
.admin-layout{min-height:100vh;display:flex;background:#f5f7fb;color:#172033}
.admin-sidebar{width:240px;min-height:100vh;background:#0f1b2d;color:#fff;padding:28px 20px;box-sizing:border-box}
.admin-brand{font-size:20px;font-weight:800;margin-bottom:38px}
.admin-label{font-size:11px;font-weight:700;letter-spacing:1.2px;color:#8190a8;margin-bottom:12px}
.admin-nav{display:flex;flex-direction:column;gap:7px}
.admin-nav a{display:block;padding:12px 14px;border-radius:9px;text-decoration:none;color:#c7d0df;font-size:14px;font-weight:600}
.admin-nav a:hover,.admin-nav a.active{background:#1c2b42;color:#fff}
.admin-main{flex:1;padding:30px 34px;min-width:0}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.admin-header h1{margin:0 0 5px;font-size:28px;color:#152238}
.admin-header p{margin:0;color:#778399;font-size:14px}
.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}
.admin-stat{background:#fff;border:1px solid #e7ebf2;border-radius:14px;padding:20px;box-shadow:0 3px 12px rgba(15,23,42,.04)}
.admin-stat span{display:block;color:#7b8799;font-size:13px;margin-bottom:10px}
.admin-stat strong{font-size:27px;color:#172033}
.admin-users-card{background:#fff;border:1px solid #e7ebf2;border-radius:14px;padding:22px;box-shadow:0 3px 12px rgba(15,23,42,.04)}
.admin-users-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.admin-users-heading h2{margin:0 0 4px;font-size:19px}
.admin-users-heading p{margin:0;color:#7b8799;font-size:13px}
.admin-users-heading input{width:260px;padding:10px 13px;border:1px solid #dbe1ea;border-radius:9px;outline:none}
.admin-table-wrap{overflow-x:auto}
.admin-table{width:100%;border-collapse:collapse;font-size:13px}
.admin-table th{text-align:left;padding:12px 10px;color:#7a8699;font-size:11px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #e8ecf2}
.admin-table td{padding:14px 10px;border-bottom:1px solid #eef1f5;vertical-align:middle}
.admin-user-name{font-weight:700;color:#172033}
.admin-user-email{font-size:12px;color:#7b8799;margin-top:3px}
.admin-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#eef2f7;color:#4b5870}
.admin-badge.active{background:#e8f7ef;color:#198754}
.admin-badge.inactive{background:#fdecec;color:#c0392b}
.admin-badge.paid{background:#eee9ff;color:#6941c6}
.admin-actions{display:flex;gap:6px;flex-wrap:wrap}
.admin-action-btn{border:1px solid #dce2eb;background:#fff;border-radius:7px;padding:6px 9px;font-size:11px;font-weight:700;cursor:pointer;color:#344054}
.admin-action-btn:hover{background:#f5f7fa}
.admin-action-btn.danger{color:#c0392b;border-color:#f0c7c3}
@media(max-width:900px){.admin-sidebar{width:190px}.admin-main{padding:22px}.admin-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.admin-layout{display:block}.admin-sidebar{width:100%;min-height:auto}.admin-stats{grid-template-columns:1fr 1fr}.admin-header,.admin-users-heading{align-items:flex-start;flex-direction:column}.admin-users-heading input{width:100%;box-sizing:border-box}}

/* ===== Admin User Management Modal ===== */
.admin-modal{position:fixed;inset:0;background:rgba(15,23,42,.58);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.admin-modal-box{width:min(650px,100%);max-height:90vh;overflow-y:auto;background:#fff;border-radius:16px;padding:24px;box-shadow:0 24px 70px rgba(15,23,42,.25)}
.admin-modal-head{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #e8ecf2;padding-bottom:17px;margin-bottom:20px}
.admin-modal-head h2{margin:0 0 4px;color:#172033;font-size:21px}
.admin-modal-head p{margin:0;color:#7b8799;font-size:13px}
.admin-modal-close{border:0;background:#f2f4f7;width:34px;height:34px;border-radius:8px;font-size:23px;line-height:30px;cursor:pointer;color:#475467}
.admin-manage-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.admin-manage-section{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.admin-manage-section label{font-size:12px;font-weight:700;color:#667085}
.admin-manage-section select,.admin-manage-section input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #dbe1ea;border-radius:8px;background:#fff;color:#172033;outline:none}
.admin-password-row{display:flex;gap:9px}
.admin-password-row input{flex:1}
.admin-manage-message{display:none;margin:4px 0 18px;padding:10px 12px;border-radius:8px;font-size:13px;background:#eef4ff;color:#344054}
.admin-danger-zone{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:7px;padding:17px;border:1px solid #f4ceca;background:#fff8f7;border-radius:10px}
.admin-danger-zone strong{color:#b42318}
.admin-danger-zone p{margin:4px 0 0;color:#7b8799;font-size:12px}
@media(max-width:650px){.admin-manage-grid{grid-template-columns:1fr}.admin-password-row,.admin-danger-zone{align-items:stretch;flex-direction:column}}

/* ===== Admin Panel App Layout Final ===== */
.admin-page{
    padding:28px 32px 40px;
}

.admin-page .admin-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
    margin:0 0 24px;
}

.admin-page .admin-stat{
    background:#fff;
    border:1px solid #e6eaf0;
    border-radius:14px;
    padding:20px 22px;
    box-shadow:0 4px 16px rgba(15,23,42,.04);
}

.admin-page .admin-stat span{
    display:block;
    margin-bottom:10px;
    color:#7b8799;
    font-size:13px;
    font-weight:600;
}

.admin-page .admin-stat strong{
    display:block;
    color:#172033;
    font-size:28px;
    line-height:1;
    font-weight:800;
}

.admin-page .admin-users-card{
    background:#fff;
    border:1px solid #e6eaf0;
    border-radius:14px;
    padding:22px;
    box-shadow:0 4px 16px rgba(15,23,42,.04);
}

.admin-page .admin-users-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:20px;
}

.admin-page .admin-users-heading h2{
    margin:0 0 5px;
    color:#172033;
    font-size:19px;
}

.admin-page .admin-users-heading p{
    margin:0;
    color:#7b8799;
    font-size:13px;
}

.admin-page #userSearch{
    width:270px;
    padding:11px 14px;
    border:1px solid #dce2ea;
    border-radius:9px;
    background:#f9fafb;
    color:#172033;
    outline:none;
}

.admin-page #userSearch:focus{
    background:#fff;
    border-color:#98a2b3;
}

.admin-page .admin-table{
    width:100%;
    border-collapse:collapse;
}

.admin-page .admin-table th{
    padding:12px 14px;
    background:#f8fafc;
    border-bottom:1px solid #e8ecf2;
    color:#667085;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.5px;
}

.admin-page .admin-table td{
    padding:15px 14px;
    border-bottom:1px solid #eef1f5;
}

.admin-page .admin-table tbody tr:hover{
    background:#fafbfc;
}

.admin-page .admin-table tbody tr:last-child td{
    border-bottom:0;
}

.admin-page .admin-action-btn{
    background:#fff;
    border:1px solid #d8dee8;
    color:#344054;
    padding:7px 11px;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
}

.admin-page .admin-action-btn:hover{
    background:#f2f4f7;
}

@media(max-width:1000px){
    .admin-page .admin-stats{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:650px){
    .admin-page{
        padding:20px 16px 30px;
    }

    .admin-page .admin-stats{
        grid-template-columns:1fr;
    }

    .admin-page .admin-users-heading{
        align-items:stretch;
        flex-direction:column;
    }

    .admin-page #userSearch{
        width:100%;
        box-sizing:border-box;
    }
}

/* Allow sidebar navigation to remain accessible on shorter screens */
.sidebar{
    overflow-y:auto;
    overflow-x:hidden;
}

.sidebar::-webkit-scrollbar{
    width:4px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.12);
    border-radius:10px;
}