:root {
    --bg: #f7f8fb;
    --surface: #fff;
    --ink: #17243b;
    --muted: #8994a7;
    --line: #edf0f4;
    --primary: #4858d6;
    --primary-dark: #3546c6;
    --sidebar: #fff;
    --soft: #f5f6fa;
    --shadow: 0 8px 32px rgba(32, 45, 81, .035)
}

* {
    box-sizing: border-box
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    margin: 0
}

h1, h2, h3, h4, .brand {
    font-family: 'Plus Jakarta Sans', sans-serif
}

a {
    text-decoration: none
}

button, a, input, select {
    transition: .18s ease
}

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
    outline: 3px solid #adb7ff;
    outline-offset: 2px
}

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

.sidebar {
    width: 255px;
    position: fixed;
    inset: 0 auto 0 0;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    padding: 30px 17px 18px;
    z-index: 40;
    overflow-y: auto
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--ink);
    padding: 0 13px;
    margin-bottom: 46px
}

.brand-symbol {
    background: #4b5cdb;
    color: #fff;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    font-size: 19px
}

.brand-accent {
    color: var(--primary)
}

.brand small {
    display: block;
    font: 700 8px 'DM Sans', sans-serif;
    letter-spacing: 2.2px;
    color: #a4acbb;
    margin-top: 0
}

.nav-section-label {
    color: #b1bac7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
    padding: 0 17px;
    margin: 19px 0 10px
}

.nav-menu {
    display: grid;
    gap: 4px
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 16px;
    border-radius: 11px;
    color: #69768c;
    font-weight: 600;
    font-size: 13px
}

.nav-link i {
    font-size: 17px;
    width: 21px;
    text-align: center
}

.nav-link:hover {
    background: #f6f7ff;
    color: var(--primary)
}

.nav-link.active {
    background: #edf0ff;
    color: #4858d6
}

.sidebar-bottom {
    margin-top: auto;
    padding-top: 25px
}

.sidebar-tip {
    background: linear-gradient(145deg, #eff1ff, #f8f9ff);
    padding: 18px;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #5c6bd0
}

.sidebar-tip i {
    font-size: 19px
}

.sidebar-tip strong {
    font-size: 13px;
    color: #263465
}

.sidebar-tip span {
    font-size: 11px;
    line-height: 1.5;
    color: #8290b0
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 21px;
    padding: 15px 5px 0;
    border-top: 1px solid var(--line)
}

.avatar, .top-avatar {
    display: grid;
    place-items: center;
    background: #e8eafb;
    color: #4d5bcd;
    font-weight: 800;
    border-radius: 12px;
    width: 36px;
    height: 36px
}

.user-meta {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0
}

.user-meta strong {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis
}

.user-meta small {
    font-size: 10px;
    color: var(--muted)
}

.main-shell {
    margin-left: 255px;
    min-width: 0;
    width: calc(100% - 255px);
    display: flex;
    flex-direction: column
}

.topbar {
    height: 76px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 0 43px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

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

.breadcrumb-label {
    font-size: 12px;
    color: #a3acba
}

.breadcrumb-label i {
    font-size: 10px;
    margin: 0 10px
}

.breadcrumb-label strong {
    color: #35425c
}

.icon-button {
    border: 0;
    background: transparent;
    color: #7c889c;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-size: 17px
}

.icon-button:hover {
    background: var(--soft);
    color: var(--primary)
}

.top-avatar {
    border-radius: 50%;
    width: 34px;
    height: 34px
}

.mobile-menu {
    display: none
}

.content-wrap {
    padding: 38px 43px;
    max-width: 1700px;
    width: 100%;
    margin: 0 auto;
    flex: 1
}

.footer {
    padding: 18px 43px;
    color: #a1aabc;
    font-size: 11px;
    display: flex;
    justify-content: space-between
}

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

.eyebrow {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.7px;
    color: var(--primary);
    margin-bottom: 9px
}

.page-heading h1 {
    font-size: 28px;
    letter-spacing: -1.1px;
    font-weight: 800;
    margin: 0 0 8px
}

.page-heading p {
    color: var(--muted);
    margin: 0;
    font-size: 13px
}

.wave {
    color: #efb963;
    font-size: 21px
}

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

.period-chip, .pill-neutral {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 10px 14px;
    border-radius: 10px;
    color: #788399;
    font-size: 12px;
    font-weight: 600
}

.period-chip i {
    margin-right: 8px
}

.btn-primary {
    background: #4a5bd8;
    border-color: #4a5bd8;
    box-shadow: 0 6px 14px rgba(74, 91, 216, .15)
}

.btn-primary:hover {
    background: #3649c8;
    border-color: #3649c8
}

.btn-pill {
    border-radius: 10px;
    font-weight: 700;
    font-size: 12px;
    padding: 11px 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px
}

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

.stat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 17px;
    padding: 23px 22px;
    min-height: 157px;
    box-shadow: var(--shadow)
}

.stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #8893a5;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 18px
}

.stat-icon, .tx-icon, .account-icon {
    display: grid;
    place-items: center;
    border-radius: 12px;
    width: 38px;
    height: 38px;
    font-size: 18px
}

.mint {
    background: #e9f8f2;
    color: #22a77c
}

.peach {
    background: #fff1ea;
    color: #ef9062
}

.lavender {
    background: #eef0ff;
    color: #6571d9
}

.stat-value {
    font: 800 clamp(18px, 1.75vw, 27px) 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -1px;
    white-space: nowrap
}

.stat-value small {
    font: 600 12px 'DM Sans', sans-serif;
    color: #9aa4b3
}

.stat-note {
    font-size: 11px;
    color: #9da7b6;
    margin-top: 13px
}

.positive {
    color: #26a77d !important
}

.negative {
    color: #e78060 !important
}

.dark-stat {
    background: #202f57;
    color: #fff;
    border-color: #202f57
}

.dark-stat .stat-top, .dark-stat .stat-note, .dark-stat .stat-value small {
    color: #b4c0dd
}

.dark-icon {
    background: #354672;
    color: #dce5ff
}

.dashboard-grid {
    display: grid;
    grid-template-columns:minmax(0, 1.55fr) minmax(280px, 1fr);
    gap: 20px
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: var(--shadow);
    min-width: 0
}

.chart-panel, .account-panel {
    padding: 25px
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px
}

.panel-header h2 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.35px;
    margin: 0 0 6px
}

.panel-header p {
    font-size: 11px;
    color: #a0aaba;
    margin: 0
}

.text-link {
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap
}

.text-link i {
    margin-left: 3px
}

.chart-area {
    height: 245px;
    margin-top: 25px
}

.chart-legend {
    display: flex;
    gap: 22px;
    justify-content: center;
    font-size: 11px;
    color: #8d97a9;
    margin-top: 18px
}

.legend-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px
}

.legend-dot.green {
    background: #5366d9
}

.legend-dot.orange {
    background: #f4a77d
}

.account-stack {
    margin-top: 20px
}

.account-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line)
}

.account-item > div {
    flex: 1;
    min-width: 0
}

.account-item strong, .cell-title strong {
    display: block;
    font-size: 12px;
    font-weight: 700
}

.account-item small, .cell-title small {
    display: block;
    color: #a0aaba;
    font-size: 10px;
    margin-top: 4px
}

.account-item b {
    font-size: 12px;
    white-space: nowrap
}

.account-item b small {
    display: inline;
    font-size: 10px
}

.account-icon {
    background: #f0f2ff;
    color: #6575cf;
    width: 36px;
    height: 36px
}

.panel-bottom-link {
    display: block;
    color: #5262d3;
    font-weight: 700;
    font-size: 12px;
    padding-top: 19px
}

.recent-panel {
    grid-column: 1/-1;
    padding: 24px 25px
}

.fin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    min-width: 0;
}

.fin-table th,
.fin-table td {
    padding: 14px 12px;
    text-align: left;
    vertical-align: middle;
}

.fin-table th {
    font-size: 11px;
    color: black;
    letter-spacing: 0.5px;
    font-weight: 1000;
    border-bottom: 1px solid var(--line);
}

.fin-table td {
    font-size: 13px;
    color: black;
    border-bottom: 1px solid #f1f2f6;
}

.fin-table tbody tr:hover {
    background: var(--soft);
}

.fin-table tr:last-child td {
    border-bottom: 0;
}

.cell-title {
    display: flex;
    align-items: center;
    gap: 12px
}

.tx-icon {
    width: 37px;
    height: 37px;
    font-size: 16px;
    flex-shrink: 0
}

.status-tag {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 10px;
    font-weight: 800
}

.status-tag.success {
    background: #e8f8f0;
    color: #1c9e72
}

.status-tag.danger {
    background: #fff0e9;
    color: #e98a5d
}

.status-tag.neutral {
    background: #eff1fb;
    color: #7a83a7
}

.amount {
    font-weight: 800 !important;
    color: var(--ink) !important;
    white-space: nowrap
}

.amount.positive {
    color: #26a77d !important
}

.amount.negative {
    color: #e78060 !important
}

.listing-panel {
    overflow: hidden
}

.filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 22px 24px
}

.search-wrap {
    position: relative;
    flex: 1;
    max-width: 410px
}

.search-wrap i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #9da8bb
}

.search-wrap input {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--soft);
    width: 100%;
    height: 43px;
    padding: 0 14px 0 42px;
    font-size: 12px;
    color: var(--ink);
    outline: 0
}

.search-wrap input:focus {
    border-color: #abb4ff;
    box-shadow: 0 0 0 3px #e9ebff
}

.filter-controls {
    display: flex;
    gap: 8px
}

.filter-select {
    width: 140px
}

.form-select, .form-control {
    border: 1px solid #e6e9f1;
    border-radius: 9px;
    background-color: var(--surface);
    color: var(--ink);
    font-size: 12px;
    min-height: 42px
}

.btn-filter, .btn-reset {
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    font-weight: 700;
    color: #62718a;
    font-size: 12px;
    padding: 10px 13px
}

.btn-filter:hover, .btn-reset:hover {
    background: var(--soft)
}

.advanced-filters {
    display: flex;
    gap: 9px;
    padding: 0 24px 20px;
    flex-wrap: wrap
}

.advanced-filters > * {
    max-width: 190px
}

.list-caption {
    padding: 14px 25px;
    background: var(--soft);
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #8c98a9
}

.list-table th:first-child, .list-table td:first-child {
    padding-left: 25px
}

.list-table th:last-child, .list-table td:last-child {
    padding-right: 25px
}

.muted-inline {
    font-size: 11px;
    color: #9ba5b4;
    margin-left: 7px
}

.row-actions {
    display: flex;
    gap: 7px
}
.fin-table tbody td {
    text-transform: uppercase;
}
.table-action {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #6575c8;
    background: #f1f2fd
}

.table-action.danger {
    color: #e87f72;
    background: #fff1ef
}

.table-action:hover {
    filter: brightness(.95)
}

.pagination-bar {
    padding: 20px 24px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #98a3b2;
    font-size: 11px
}

.pagination .page-link {
    border-radius: 8px !important;
    margin-left: 5px;
    border-color: var(--line);
    color: var(--primary)
}

.pagination .active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: white
}

.empty-state, .empty-inline {
    text-align: center;
    padding: 40px 20px;
    color: #a1aabb
}

.empty-state h3 {
    font-size: 15px;
    color: var(--ink);
    margin: 14px 0 8px
}

.empty-state p, .empty-inline p {
    font-size: 12px
}

.empty-illustration {
    display: grid;
    place-items: center;
    width: 65px;
    height: 65px;
    background: #f1f3fc;
    color: #6573d2;
    font-size: 25px;
    border-radius: 19px;
    margin: auto
}

.empty-inline {
    padding: 25px
}

.empty-inline i {
    font-size: 22px;
    color: #8b96d8
}

.empty-inline a {
    font-size: 12px;
    color: var(--primary);
    font-weight: 700
}

.form-layout {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 270px;
    gap: 22px;
    align-items: start
}

.form-panel {
    padding: 30px
}

.form-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 21px
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0
}

.field-group.full-width {
    grid-column: 1/-1
}

.field-group label {
    font-size: 12px;
    font-weight: 800;
    color: #48546b
}

.field-group input:not([type=checkbox]), .field-group select, .field-group textarea {
    border: 1px solid #e3e8f1;
    border-radius: 10px;
    padding: 11px 13px;
    min-height: 43px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    width: 100%;
    outline: none
}

.field-group textarea {
    min-height: 90px
}

.field-group input:focus, .field-group select:focus, .field-group textarea:focus {
    border-color: #98a5ff;
    box-shadow: 0 0 0 3px #eef0ff
}

.field-group input[type=checkbox] {
    width: 17px;
    height: 17px
}

.required, .field-error {
    color: #e16c67
}

.field-error, .form-hint {
    font-size: 11px
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 28px;
    padding-top: 23px;
    border-top: 1px solid var(--line)
}

.form-help {
    background: #eff1ff;
    border-radius: 16px;
    padding: 26px;
    color: #7783a1
}

.form-help h3 {
    font-size: 15px;
    font-weight: 800;
    color: #28375d;
    margin: 18px 0 12px
}

.form-help p {
    font-size: 12px;
    line-height: 1.8
}

.help-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: #dfe4ff;
    color: #5868d2;
    font-size: 23px
}

.help-divider {
    height: 1px;
    background: #dce1f4;
    margin: 20px 0
}

.help-row {
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 11px;
    margin: 13px 0
}

.help-row i {
    color: #4eac8c
}

.delete-panel {
    text-align: center;
    padding: 50px;
    max-width: 620px;
    margin: auto
}

.delete-icon {
    font-size: 35px;
    color: #e98b68
}

.delete-panel h2 {
    font-size: 19px;
    font-weight: 800;
    margin: 20px 0
}

.delete-panel p {
    color: #8995a7;
    margin-bottom: 25px
}

.auth-shell {
    min-height: 100vh
}

.auth-grid {
    min-height: 100vh;
    display: grid;
    grid-template-columns:1fr 1fr
}

.auth-brand-panel {
    background: #202f57;
    color: #fff;
    padding: 55px clamp(30px, 5vw, 90px);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.auth-brand {
    font: 800 27px 'Plus Jakarta Sans', sans-serif;
    letter-spacing: -1px
}

.auth-brand i {
    color: #aebaff;
    margin-right: 10px
}

.auth-eyebrow {
    letter-spacing: 2px;
    font-size: 11px;
    color: #abb8e4;
    font-weight: 800;
    margin-bottom: 23px
}

.auth-brand-panel h1 {
    font-size: clamp(34px, 4vw, 55px);
    line-height: 1.18;
    letter-spacing: -2px;
    font-weight: 800;
    max-width: 520px
}

.auth-brand-panel h1 em {
    font-style: normal;
    color: #a6b4ff
}

.auth-brand-panel p {
    color: #b4c0df;
    max-width: 410px;
    line-height: 1.8;
    margin-top: 22px
}

.auth-visual {
    background: #2d406f;
    border: 1px solid #425787;
    border-radius: 22px;
    padding: 25px;
    margin-top: 35px;
    max-width: 470px
}

.auth-visual small {
    letter-spacing: 1.4px;
    color: #acbce4
}

.auth-visual h3 {
    font-size: 17px;
    margin-top: 12px
}

.auth-bars {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 95px;
    margin-top: 25px
}

.auth-bars span {
    flex: 1;
    border-radius: 6px 6px 0 0;
    background: linear-gradient(#9aaaff, #6578e7)
}

.auth-form-panel {
    display: grid;
    place-items: center;
    padding: 35px
}

.auth-form-box {
    width: 100%;
    max-width: 390px
}

.auth-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #edf0ff;
    color: #5265db;
    font-size: 23px;
    margin-bottom: 25px
}

.auth-form-box h2 {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -1px
}

.auth-form-box > p {
    color: #909bac;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 28px
}

.auth-signup {
    text-align: center;
    margin-top: 25px !important
}

.auth-signup a {
    color: var(--primary);
    font-weight: 800
}

.auth-mobile-brand {
    display: none
}

.mobile-shade {
    display: none
}

[data-theme=dark] {
    --bg: #101726;
    --surface: #1b2538;
    --ink: #edf2ff;
    --muted: #9caac2;
    --line: #2c3850;
    --sidebar: #182236;
    --soft: #243047;
    --shadow: none
}

[data-theme=dark] .sidebar-tip, [data-theme=dark] .form-help {
    background: #273557
}

[data-theme=dark] .sidebar-tip strong, [data-theme=dark] .form-help h3 {
    color: #e5eaff
}

[data-theme=dark] .nav-link.active {
    background: #293965;
    color: #b4c2ff
}

[data-theme=dark] .breadcrumb-label strong {
    color: #e4eaf7
}

[data-theme=dark] .fin-table td {
    border-bottom-color: var(--line)
}

[data-theme=dark] .account-icon, [data-theme=dark] .empty-illustration {
    background: #2c3a5d
}

[data-theme=dark] .stat-value {
    color: var(--ink)
}

[data-theme=dark] .dark-stat .stat-value {
    color: #fff
}

[data-theme=dark] .field-group label {
    color: #d5def0
}

[data-theme=dark] .fin-table tbody tr:hover {
    background: #243047
}

@media (max-width: 1250px) {
    .stats-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .content-wrap {
        padding: 30px
    }

    .topbar {
        padding: 0 30px
    }
}

@media (max-width: 991px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .22s
    }

    .sidebar.open {
        transform: translateX(0)
    }

    .mobile-shade.open {
        display: block;
        position: fixed;
        inset: 0;
        background: #111b31a8;
        z-index: 35
    }

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

    .mobile-menu {
        display: grid
    }

    .dashboard-grid {
        grid-template-columns:1fr
    }

    .recent-panel {
        grid-column: auto
    }

    .form-layout {
        grid-template-columns:1fr
    }

    .form-help {
        display: none
    }
}

@media (max-width: 600px) {
    .content-wrap {
        padding: 22px 15px
    }

    .topbar {
        height: 64px;
        padding: 0 16px
    }

    .footer {
        padding: 18px 15px
    }

    .footer span {
        display: none
    }

    .breadcrumb-label {
        font-size: 11px
    }

    .page-heading {
        align-items: flex-start;
        flex-direction: column
    }

    .page-heading h1 {
        font-size: 24px
    }

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

    .stats-grid {
        gap: 10px
    }

    .stat-card {
        padding: 16px 13px;
        min-height: 140px
    }

    .stat-value {
        font-size: 17px
    }

    .stat-value small {
        font-size: 10px
    }

    .stat-top {
        font-size: 10px
    }

    .stat-icon {
        width: 31px;
        height: 31px;
        font-size: 14px
    }

    .chart-panel, .account-panel, .recent-panel {
        padding: 18px
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px
    }

    .search-wrap {
        max-width: none
    }

    .filter-controls {
        justify-content: space-between
    }

    .filter-select {
        flex: 1
    }

    .form-panel {
        padding: 20px
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .form-footer {
        flex-wrap: wrap
    }

    .auth-grid {
        grid-template-columns:1fr
    }

    .auth-brand-panel {
        display: none
    }

    .auth-mobile-brand {
        display: block;
        font: 800 24px 'Plus Jakarta Sans';
        color: var(--primary);
        margin-bottom: 45px
    }

    .auth-form-panel {
        min-height: 100vh
    }

    .pagination-bar {
        padding: 14px
    }

    .advanced-filters {
        padding: 0 16px 16px
    }

    .advanced-filters > * {
        flex: 1;
        min-width: 125px
    }

    .list-caption {
        padding: 12px 16px
    }
}

@media print {
    .sidebar, .topbar, .footer, .filter-bar, .heading-actions {
        display: none !important
    }

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

    .content-wrap {
        padding: 0
    }

    .panel {
        box-shadow: none
    }
}

/* ==========================================
   FINANSIM - PREMIUM LOGIN
   ========================================== */








/* =========================================
   FINANSIM — PREMIUM LOGIN
   THEME: MIDNIGHT NAVY
========================================= */







/* FULL SCREEN MIDNIGHT NAVY LOGIN */

.login-page {
    min-height: 100vh;
    min-height: 100svh;
    background: #0F172A;
    color: #FFFFFF;
}

/* Tek sütun - sağdaki beyaz alan kalkar */
.login-layout {
    display: block;
    min-height: 100vh;
    min-height: 100svh;
}

/* Tüm ekran koyu arka plan */
.login-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 32px;

    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 32px clamp(20px, 4vw, 60px);

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(96, 165, 250, .15),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #0F172A 0%,
            #1E293B 55%,
            #334155 100%
        );
}

/* Dekoratif daireyi kaldır */
.login-brand-panel::before,
.login-brand-panel::after {
    display: none;
}

/* Logo sol üst köşede */
.login-logo {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    flex-shrink: 0;
}

.login-logo > span:last-child {
    color: #93C5FD;
}

/* Ortalanmış giriş kartı */
.login-form-inner {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: 440px;
    margin: auto 0;

    padding: 38px;

    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 22px;

    background: rgba(255, 255, 255, .07);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-shadow: 0 25px 65px rgba(0, 0, 0, .18);
}

/* Mevcut mobile-logo'yu başlık olarak göster */
.login-mobile-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    margin-bottom: 32px;

    color: #FFFFFF;
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -1px;
}

.login-mobile-logo i {
    color: #93C5FD;
    font-size: 26px;
}

/* Form etiketleri */
.login-field > label {
    color: #E2E8F0;
    font-size: 13px;
    font-weight: 650;
}

/* Şeffaf input alanları */
.login-input-wrap {
    height: 56px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 12px;

    background: rgba(255, 255, 255, .07);
}

.login-input-wrap:hover {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
}

.login-input-wrap:focus-within {
    background: rgba(255, 255, 255, .1);
    border-color: #93C5FD;

    box-shadow: 0 0 0 4px rgba(147, 197, 253, .12);
}

.login-input-wrap input,
.login-input-wrap input:focus {
    background: transparent;
    color: #FFFFFF;
    caret-color: #FFFFFF;
}

.login-input-wrap input::placeholder {
    color: #AEBFD1;
}

.login-input-wrap > i,
.password-toggle {
    color: #CBD5E1;
}

.password-toggle:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, .1);
}

/* Beyaz premium giriş butonu */
.login-submit {
    width: 100%;
    height: 55px;
    margin-top: 26px;

    border: none;
    border-radius: 12px;

    background: #FFFFFF;
    color: #0F172A;

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

    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
}

.login-submit:hover {
    background: #E2E8F0;
    color: #0F172A;
    transform: translateY(-2px);
}

.login-security {
    color: #CBD5E1;
}

.login-security i {
    color: #93C5FD;
}

.login-brand-footer {
    position: relative;
    z-index: 1;

    align-self: stretch;
    flex-shrink: 0;

    color: #CBD5E1;
}

/* Hata mesajları */
.login-field .errorlist {
    color: #FCA5A5;
}

.login-form-inner .alert-danger {
    border: 1px solid rgba(252, 165, 165, .35);
    background: rgba(127, 29, 29, .32);
    color: #FEE2E2;
}

/* Mobil - eski beyaz panel kurallarını geçersiz kıl */
@media (max-width: 767px) {
    .login-layout {
        display: block;
    }

    .login-brand-panel {
        display: flex;
        min-height: 100svh;
        padding: 25px 20px;
        gap: 25px;
    }

    .login-form-inner {
        max-width: 420px;
        padding: 28px 22px;
        border-radius: 18px;
    }

    .login-mobile-logo {
        display: flex;
        margin-bottom: 26px;
        font-size: 23px;
    }

    .login-brand-footer {
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
        font-size: 11px;
    }

    .login-brand-footer span {
        text-align: center;
    }
}






/* =====================================
   FINANSIM - MOBILE LOGIN FIX
===================================== */

@media screen and (max-width: 767px) {

    .login-page {
        min-height: 100svh;
        background: #0F172A;
    }

    .login-page .login-layout {
        display: block;
        width: 100%;
        min-height: 100svh;
    }

    /* GİRİŞ FORMUNU GÖRÜNÜR YAP */
    .login-page .login-brand-panel {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        min-height: 100svh;
        height: auto;

        padding: 24px 18px;

        background: linear-gradient(
            145deg,
            #0F172A 0%,
            #1E293B 55%,
            #334155 100%
        );
    }

    /* Logo */
    .login-logo {
        align-self: flex-start;
        font-size: 23px;
    }

    /* FORM TAM ORTADA */
    .login-form-inner {
        display: block !important;
        position: relative;
        z-index: 2;

        width: 100%;
        max-width: 420px;

        margin: auto 0;
        padding: 28px 22px;

        border: 1px solid rgba(255,255,255,.15);
        border-radius: 18px;

        background: rgba(255,255,255,.07);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .login-mobile-logo {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;

        margin-bottom: 28px;
        color: #FFFFFF;
        font-size: 24px;
        font-weight: 800;
    }

    .login-field > label {
        color: #E2E8F0;
    }

    .login-input-wrap {
        width: 100%;
        height: 54px;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.2);
    }

    .login-input-wrap input {
        color: #FFFFFF;
    }

    .login-input-wrap input::placeholder {
        color: #94A3B8;
    }

    .login-submit {
        height: 54px;
        background: #FFFFFF;
        color: #0F172A;
    }

    .login-security {
        color: #CBD5E1;
    }

    .login-brand-footer {
        align-self: stretch;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px 12px;
        margin-top: 20px;
        text-align: center;
        color: #CBD5E1;
    }

    .login-brand-footer span {
        text-align: center;
    }
}




/* =========================================
   DASHBOARD PREVIEW
========================================= */

.login-preview {
    width: 100%;
    max-width: 440px;

    margin-top: 40px;
    padding: 24px;

    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;

    background: rgba(255, 255, 255, .065);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    box-shadow: 0 20px 60px rgba(0, 0, 0, .12);
}

.preview-heading,
.preview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: #F8FAFC;
    font-size: 12px;
    font-weight: 700;
}

.preview-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;

    height: 115px;
    margin: 24px 0;
}

.preview-chart span {
    flex: 1;
    min-width: 0;
    min-height: 5px;

    border-radius: 6px 6px 2px 2px;
    background: rgba(148, 163, 184, .42);
}

.preview-chart span:nth-child(4n),
.preview-chart span:last-child {
    background: linear-gradient(
        180deg,
        #93C5FD,
        #3B82F6
    );
}

.preview-footer {
    justify-content: flex-start;
    color: #CBD5E1;
    font-size: 11px;
}

/* =========================================
   BRAND FOOTER
========================================= */

.login-brand-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    color: #94A3B8;
    font-size: 11px;
    font-weight: 500;
}

.login-brand-footer span {
    text-align: right;
}

/* =========================================
   RIGHT FORM PANEL
========================================= */

.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    padding: 55px clamp(30px, 6vw, 95px);

    background: #FFFFFF;
}

.login-form-inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;

    animation: loginFadeIn .55s ease both;
}

/* =========================================
   WELCOME
========================================= */

.login-mobile-logo {
    display: none;
}

.login-welcome-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 20px;

    color: #2563EB;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.login-welcome h2 {
    margin: 0 0 12px;

    color: #0F172A;
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -1.3px;
}

.login-welcome p {
    margin: 0 0 38px;

    color: #64748B;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

/* =========================================
   FORM FIELDS
========================================= */

.login-form {
    width: 100%;
}

.login-field {
    margin-bottom: 22px;
}

.login-field > label {
    display: block;

    margin-bottom: 10px;

    color: #334155;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1px;
}

.login-input-wrap {
    display: flex;
    align-items: center;
    gap: 13px;

    width: 100%;
    height: 56px;
    padding: 0 16px;

    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: #F8FAFC;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.login-input-wrap:hover {
    border-color: #CBD5E1;
    background: #FFFFFF;
}

.login-input-wrap:focus-within {
    border-color: #3B82F6;
    background: #FFFFFF;

    box-shadow:
        0 0 0 4px rgba(59, 130, 246, .09);
}

.login-input-wrap > i {
    flex-shrink: 0;
    color: #94A3B8;
    font-size: 18px;
    transition: color .2s ease;
}

.login-input-wrap:focus-within > i {
    color: #2563EB;
}

.login-input-wrap input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;

    padding: 0;
    border: 0;
    outline: 0;
    box-shadow: none;

    background: transparent;
    color: #0F172A;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

.login-input-wrap input:focus {
    outline: none;
    box-shadow: none;
    background: transparent;
}

.login-input-wrap input::placeholder {
    color: #94A3B8;
    font-size: 13px;
    font-weight: 400;
}

/* =========================================
   PASSWORD VISIBILITY
========================================= */

.password-toggle {
    display: grid;
    place-items: center;

    flex-shrink: 0;
    width: 32px;
    height: 32px;

    padding: 0;
    border: 0;
    border-radius: 8px;

    background: transparent;
    color: #94A3B8;
    font-size: 17px;

    cursor: pointer;
    transition:
        color .2s ease,
        background .2s ease;
}

.password-toggle:hover {
    background: #E2E8F0;
    color: #0F172A;
}

/* =========================================
   LOGIN BUTTON
========================================= */

.login-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: 100%;
    height: 56px;
    margin-top: 28px;
    padding: 0 22px;

    border: 1px solid #0F172A;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #0F172A,
        #1E293B
    );

    box-shadow: 0 7px 18px rgba(15, 23, 42, .12);

    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .2px;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.login-submit i {
    font-size: 17px;
    transition: transform .2s ease;
}

.login-submit:hover {
    background: #26364D;
    color: #FFFFFF;

    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(15, 23, 42, .19);
}

.login-submit:hover i {
    transform: translateX(4px);
}

.login-submit:active {
    transform: translateY(0);
}

/* Keyboard accessibility */

.login-submit:focus-visible,
.password-toggle:focus-visible,
.login-logo:focus-visible {
    outline: 3px solid #60A5FA;
    outline-offset: 3px;
}

/* =========================================
   SECURITY LABEL
========================================= */

.login-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin-top: 30px;

    color: #94A3B8;
    font-size: 11px;
    font-weight: 600;
}

.login-security i {
    color: #64748B;
    font-size: 15px;
}

/* =========================================
   ERRORS
========================================= */

.login-field .errorlist {
    margin: 9px 0 0;
    padding-left: 18px;

    color: #DC2626;
    font-size: 12px;
    line-height: 1.6;
}

.login-form-inner .alert-danger {
    margin-bottom: 25px;
    padding: 14px 16px;

    border: 1px solid #FECACA;
    border-radius: 12px;

    background: #FEF2F2;
    color: #B91C1C;

    font-size: 12px;
    line-height: 1.6;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes loginFadeIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 1100px) {

    .login-layout {
        grid-template-columns: minmax(0, 43%) minmax(0, 100%);
    }

    .login-brand-panel {
        padding: 36px;
    }

    .login-form-panel {
        padding: 45px 40px;
    }

    .login-hero h1 {
        font-size: 39px;
    }

    .login-preview {
        padding: 20px;
    }

    .login-brand-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .login-brand-footer span {
        text-align: left;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .login-layout {
        display: block;
        min-height: 100svh;
    }

    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        min-height: 100vh;
        min-height: 100svh;
        padding: 35px 24px;

        align-items: center;
    }

    .login-form-inner {
        max-width: 430px;
        animation: none;
    }

    .login-mobile-logo {
        display: inline-flex;
        align-items: center;
        gap: 11px;

        margin-bottom: 54px;

        color: #0F172A;
        font-size: 25px;
        font-weight: 800;
        letter-spacing: -1.3px;
    }

    .login-mobile-logo i {
        display: grid;
        place-items: center;

        width: 42px;
        height: 42px;

        border-radius: 12px;
        background: #0F172A;

        color: #FFFFFF;
        font-size: 20px;
    }

    .login-welcome h2 {
        font-size: 29px;
    }

    .login-welcome p {
        margin-bottom: 30px;
    }

    .login-input-wrap {
        height: 54px;
    }

    .login-submit {
        height: 54px;
    }
}

@media (max-width: 390px) {

    .login-form-panel {
        padding: 24px 18px;
    }

    .login-welcome h2 {
        font-size: 26px;
    }

    .login-mobile-logo {
        margin-bottom: 36px;
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {

    .login-form-inner {
        animation: none;
    }

    .login-submit,
    .login-submit i,
    .login-input-wrap,
    .password-toggle {
        transition: none;
    }
}









/* ==========================================
   FINANSIM - TYPOGRAPHY & CONTRAST UPGRADE
   ========================================== */

:root {
    --fm-text: #172033;
    --fm-heading: #101828;
    --fm-muted: #596579;
    --fm-primary: #635bff;
    --fm-primary-hover: #5148ed;
    --fm-border: #e5e9f0;
    --fm-surface: #ffffff;
}

body {
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.65;
    color: var(--fm-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.page-title, .section-title,
.card-title, .brand {
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--fm-heading);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.3;
}

h1 {
    font-size: clamp(25px, 2.4vw, 34px);
}

h2 {
    font-size: clamp(21px, 2vw, 27px);
}

h3 {
    font-size: 19px;
}

p, td, th, label, input, select,
textarea, button {
    font-weight: 500;
}

p, td, label {
    color: var(--fm-text);
}

.text-muted,
.text-secondary,
small,
.form-text {
    color: var(--fm-muted) !important;
}

.nav-link {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.nav-section-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.sidebar-user .user-meta strong,
.breadcrumb-label strong {
    font-weight: 800;
}

.form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--fm-heading);
}

.form-control,
.form-select {
    font-size: 14px;
    font-weight: 550;
    color: var(--fm-heading);
    border: 1px solid var(--fm-border);
    border-radius: 12px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--fm-primary);
    box-shadow: 0 0 0 4px rgba(99, 91, 255, .10);
}

.form-control::placeholder {
    color: #8290a3;
    opacity: 1;
}

.table th {
    font-weight: 750;
}

.table td {
    font-weight: 550;
}

.btn {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Koyu temada kontrastı koru */
html[data-theme="dark"] {
    --fm-text: #e7ebf4;
    --fm-heading: #f8faff;
    --fm-muted: #aab6c8;
    --fm-border: #354155;
    --fm-surface: #202a3b;
}

/* Finansal Planlama dashboard kartları */
.planning-section {
    margin: 28px 0 32px
}

.planning-heading {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.planning-heading h2 {
    margin: 0;
    color: var(--fm-heading, #172033);
    font-size: 22px;
    font-weight: 800
}

.planning-heading p {
    margin: 5px 0 0;
    color: var(--fm-muted, #596579)
}

.planning-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 18px
}

.planning-card {
    min-width: 0;
    background: var(--fm-surface, #fff);
    border: 1px solid var(--fm-border, #e5e9f0);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 8px 25px rgba(20, 28, 55, .035)
}

.planning-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.planning-card-top a {
    color: var(--fm-text, #172033);
    font-weight: 750;
    text-decoration: none;
    font-size: 13px
}

.planning-card-top a:hover {
    color: #635bff
}

.planning-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 18px
}

.planning-icon.purple {
    background: #eeebff;
    color: #635bff
}

.planning-icon.green {
    background: #dcf8ee;
    color: #15936e
}

.planning-icon.orange {
    background: #fff1e6;
    color: #d07b39
}

.planning-icon.blue {
    background: #e7f0ff;
    color: #3973c9
}

.planning-card h3 {
    margin: 20px 0 10px;
    font-size: 27px;
    font-weight: 800;
    color: var(--fm-heading, #172033)
}

.planning-card h3 small {
    font-size: 13px;
    font-weight: 600;
    color: var(--fm-muted, #596579)
}

.planning-card > p {
    margin: 8px 0 14px;
    font-size: 12px;
    color: var(--fm-muted, #596579)
}

.planning-progress {
    height: 8px;
    background: var(--fm-border, #e5e9f0);
    border-radius: 99px;
    overflow: hidden
}

.planning-progress span {
    display: block;
    height: 100%;
    background: #635bff;
    border-radius: 99px
}

.planning-progress.green span {
    background: #16a085
}

.planning-list {
    border-top: 1px solid var(--fm-border, #e5e9f0);
    margin-top: 15px;
    padding-top: 6px
}

.planning-list > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 12px
}

.planning-list span {
    color: var(--fm-text, #172033);
    min-width: 0;
    overflow-wrap: anywhere
}

.planning-list strong {
    font-weight: 750;
    color: var(--fm-heading, #172033);
    text-align: right;
    white-space: nowrap
}

.planning-list small {
    color: var(--fm-muted, #596579)
}

.planning-danger {
    color: #d44343 !important
}

.planning-debt-totals {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px;
    margin-top: 18px
}

.planning-debt-totals > div {
    background: var(--fm-border, #f4f5fa);
    border-radius: 12px;
    padding: 12px
}

.planning-debt-totals span {
    display: block;
    font-size: 11px;
    color: var(--fm-muted, #596579)
}

.planning-debt-totals strong {
    display: block;
    margin-top: 6px;
    font-size: 15px;
    color: var(--fm-heading, #172033)
}

.planning-empty {
    margin-top: 15px !important
}

@media (max-width: 800px) {
    .planning-grid {
        grid-template-columns:1fr
    }

    .planning-card {
        padding: 18px
    }
}



.rec-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.rec-count-success {
    background: #e8f7ee;
    color: indianred;
}

.rec-count-warning {
    background: #fff4db;
    color: #a66b00;
}











/* ======================================
   FINANSIM - FINANSAL UYARILAR
====================================== */

.finance-alerts-section {
    margin: 28px 0;
    padding: 25px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
}

.finance-alerts-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 22px;
}

.finance-alerts-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #64748b;
}

.finance-alerts-heading h2 {
    margin: 6px 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
}

.finance-alerts-heading h2 i {
    color: #2563eb;
    margin-right: 7px;
}

.finance-alerts-heading p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}

.finance-alerts-heading-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.finance-alerts-count {
    padding: 8px 12px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.finance-alerts-link {
    color: #475569;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.finance-alerts-link:hover {
    color: #2563eb;
}

.finance-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.finance-alert {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
}

.finance-alert-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 19px;
}

.finance-alert-danger .finance-alert-icon {
    background: #fff1f2;
    color: #e11d48;
}

.finance-alert-warning .finance-alert-icon {
    background: #fff7ed;
    color: #ea580c;
}

.finance-alert-info .finance-alert-icon {
    background: #eff6ff;
    color: #2563eb;
}

.finance-alert-content {
    flex: 1;
    min-width: 0;
}

.finance-alert-content h3 {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 750;
    color: #0f172a;
}

.finance-alert-content p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #64748b;
    overflow-wrap: anywhere;
}

.finance-alert-action {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #475569;
    text-decoration: none;
}

.finance-alert-action:hover {
    color: #2563eb;
    border-color: #bfdbfe;
}

.finance-alerts-empty {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 24px;
    border-radius: 13px;
    background: #f0fdf4;
    color: #15803d;
}

.finance-alerts-empty > i {
    font-size: 28px;
}

.finance-alerts-empty h3 {
    margin: 0 0 5px;
    font-size: 14px;
}

.finance-alerts-empty p {
    margin: 0;
    font-size: 12px;
}

.finance-alerts-footnote {
    margin: 14px 0 0;
    color: #64748b;
    font-size: 12px;
}

@media (max-width: 768px) {
    .finance-alerts-section {
        padding: 17px;
    }

    .finance-alerts-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .finance-alerts-heading-actions {
        width: 100%;
        justify-content: space-between;
    }

    .finance-alert {
        padding: 13px;
        gap: 10px;
    }

    .finance-alert-icon {
        width: 37px;
        height: 37px;
    }
}






/* ==========================================
   FINANSIM - PROFESYONEL TABLO TASARIMI
========================================== */

/* ==========================================
   FINANSIM - TABLO GÖVDE TASARIMI
========================================== */

/* GENEL TABLO GÖVDESİ */
.fin-table tbody {
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    color: #334155;
}

/* TABLO HÜCRELERİ */
.fin-table > tbody > tr > td {
    padding: 14px 16px !important;

    font-family: inherit;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;

    color: #334155;
    vertical-align: middle;

    border-bottom: 1px solid #edf1f5;

    background-color: transparent;
    transition: background-color 0.2s ease;
}

/* SATIRLAR */
.fin-table > tbody > tr {
    height: 54px;
}

/* HOVER */
.fin-table > tbody > tr:hover > td {
    background-color: #f8fafc;
}

/* İLK SÜTUN */
.fin-table > tbody > tr > td:first-child {
    padding-left: 20px !important;
    font-weight: 600;
    color: #0f172a;
}

/* SON SÜTUN */
.fin-table > tbody > tr > td:last-child {
    padding-right: 20px !important;
}

/* KALIN YAZILAR */
.fin-table tbody td strong,
.fin-table tbody td b {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

/* İKİNCİL BİLGİLER */
.fin-table tbody td small,
.fin-table tbody td .text-muted {
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    color: #94a3b8 !important;
}

/* SAYISAL DEĞERLER */
.fin-table tbody td.text-end,
.fin-table tbody td .amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ORTALI HÜCRELER */
.fin-table tbody td.text-center {
    text-align: center;
}

/* DURUM ETİKETLERİ */
.fin-table tbody td .badge,
.fin-table tbody td .rec-status,
.fin-table tbody td .rec-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;

    padding: 5px 9px;
    border-radius: 7px;
    white-space: nowrap;
}

/* BUTONLAR */
.fin-table tbody td .btn,
.fin-table tbody td .rec-btn {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;

    padding: 7px 11px;
    border-radius: 7px;
}

/* BUTON GRUPLARI */
.fin-table tbody td .rec-row-actions,
.fin-table tbody td .btn-group {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* SON SATIR */
.fin-table tbody tr:last-child td {
    border-bottom: none;
}

/* MOBİL */
@media (max-width: 768px) {

    .fin-table > tbody > tr > td {
        padding: 11px 12px !important;
        font-size: 12px;
    }

    .fin-table > tbody > tr > td:first-child {
        padding-left: 14px !important;
    }

    .fin-table > tbody > tr > td:last-child {
        padding-right: 14px !important;
    }

    .fin-table tbody td strong {
        font-size: 12px;
    }

    .fin-table tbody td .btn,
    .fin-table tbody td .rec-btn {
        font-size: 11px;
        padding: 6px 9px;
    }
}

.fin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    color: black;
    --bs-table-bg: transparent;
}

/* TABLO BAŞLIKLARI */
.fin-table thead th {
    background: #f8fafc;
    color: #64748b;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.45px;
    line-height: 1.45;

    padding: 13px 15px;
    vertical-align: middle;

    text-transform: uppercase;
    white-space: nowrap;

    border-top: 1px solid #e8edf3;
    border-bottom: 1px solid #e2e8f0;
}

/* TABLO SATIRLARI */
.fin-table tbody td {
    font-size: 13px;
    font-weight: 450;
    line-height: 1.5;
    color: black;

    padding: 13px 15px;
    vertical-align: middle;

    border-bottom: 1px solid #edf1f5;
}

/* SATIR ÜZERİNE GELİNCE */
.fin-table tbody tr:hover td {
    background-color: #f8fafc;
}

/* İLK VE SON SÜTUN KENARLARI */
.fin-table thead th:first-child {
    padding-left: 18px;
}

.fin-table thead th:last-child {
    border-top-right-radius: 10px;
    padding-right: 18px;
}

.fin-table tbody td:first-child {
    padding-left: 18px;
}

.fin-table tbody td:last-child {
    padding-right: 18px;
}

/* TUTARLAR VE SAYILAR */
.fin-table .text-end {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

/* BUTONLAR */
.fin-table .btn {
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 7px;
}

/* DURUM ETİKETLERİ */
.fin-table .badge,
.fin-table .rec-count,
.fin-table .rec-status {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 9px;
    border-radius: 6px;
}

/* UZUN TABLOLARDA YATAY KAYDIRMA */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* MOBİL GÖRÜNÜM */
@media (max-width: 768px) {
    .fin-table thead th {
        font-size: 10px;
        padding: 11px 12px;
        letter-spacing: 0.2px;
    }

    .fin-table tbody td {
        font-size: 12px;
        padding: 11px 12px;
    }

    .fin-table thead th:first-child,
    .fin-table tbody td:first-child {
        padding-left: 12px;
    }

    .fin-table thead th:last-child,
    .fin-table tbody td:last-child {
        padding-right: 12px;
    }
}


/* =====================================
   FINANSIM - PREMIUM TYPOGRAPHY
===================================== */

:root {
    --fin-font: "Plus Jakarta Sans", sans-serif;
    --fin-text: #253247;
    --fin-muted: #718096;
    --fin-border: #edf0f5;
}

/* TABLO GENELİ */
.fin-table {
    font-family: var(--fin-font) !important;
    font-size: 13px;
    letter-spacing: -0.15px;
}

/* TABLO BAŞLIKLARI */
.fin-table > thead > tr > th {
    font-family: var(--fin-font) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.65px;
    line-height: 1.5;
    color: #7b8799 !important;

    padding: 15px 17px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e9edf3 !important;
    vertical-align: middle;
    white-space: nowrap;
}

/* TABLO GÖVDESİ */
.fin-table > tbody > tr > td {
    font-family: var(--fin-font) !important;
    font-size: 12.75px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px;
    line-height: 1.6;

    color: var(--fin-text) !important;
    padding: 15px 17px !important;
    vertical-align: middle;
    border-bottom: 1px solid var(--fin-border);
}

/* İLK SÜTUN - ÖNEMLİ BİLGİ */
.fin-table > tbody > tr > td:first-child {
    font-weight: 700 !important;
    color: #182337 !important;
}

/* KALIN YAZILAR */
.fin-table tbody td strong {
    font-family: var(--fin-font);
    font-size: 12.75px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* SAYISAL VERİLER */
.fin-table tbody td.text-end,
.fin-table tbody td .amount {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    letter-spacing: -0.25px;
}

/* YARDIMCI YAZILAR */
.fin-table tbody td small,
.fin-table tbody td .text-muted {
    font-size: 11.5px !important;
    font-weight: 500;
    color: var(--fin-muted) !important;
}

/* DURUM ETİKETLERİ */
.fin-table tbody .badge,
.fin-table tbody .rec-count,
.fin-table tbody .rec-status {
    font-family: var(--fin-font);
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0;
    padding: 6px 10px;
    border-radius: 8px;
}

/* İŞLEM BUTONLARI */
.fin-table tbody .btn,
.fin-table tbody .rec-btn {
    font-family: var(--fin-font);
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 7px 11px;
    border-radius: 8px;
}

/* HOVER */
.fin-table.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: #f5f8ff;
}

/* MOBİL */
@media (max-width: 768px) {
    .fin-table > thead > tr > th {
        padding: 12px 13px !important;
        font-size: 10px !important;
    }

    .fin-table > tbody > tr > td {
        padding: 12px 13px !important;
        font-size: 12px !important;
    }
}