/* ============================================================
   VoERP Design System V2
   Responsive • Professional • Accessible • User Friendly
   ============================================================ */

:root {
    /* Brand */
    --voerp-primary-900: #12345b;
    --voerp-primary-800: #174678;
    --voerp-primary-700: #1d5d9b;
    --voerp-primary-600: #2374c6;
    --voerp-primary-500: #3187df;
    --voerp-primary-100: #eaf4ff;
    --voerp-primary-50: #f5faff;

    /* Accent */
    --voerp-teal-700: #087b72;
    --voerp-teal-600: #0f968a;
    --voerp-teal-100: #dff8f4;

    --voerp-green-700: #087443;
    --voerp-green-600: #0b9254;
    --voerp-green-100: #e7f8ee;

    --voerp-amber-700: #a95a05;
    --voerp-amber-600: #c76b08;
    --voerp-amber-100: #fff3d8;

    --voerp-red-700: #b42318;
    --voerp-red-600: #d92d20;
    --voerp-red-100: #feeceb;

    /* Neutrals */
    --voerp-navy-950: #071525;
    --voerp-navy-900: #0c2037;
    --voerp-navy-800: #14304d;
    --voerp-navy-700: #1e405f;

    --voerp-bg: #f4f7fb;
    --voerp-bg-soft: #f8fafc;
    --voerp-surface: #ffffff;
    --voerp-surface-soft: #fbfcfe;

    --voerp-text: #182230;
    --voerp-text-secondary: #344054;
    --voerp-muted: #667085;
    --voerp-subtle: #98a2b3;

    --voerp-border: #e1e7ef;
    --voerp-border-strong: #d0d8e4;

    /* Geometry */
    --voerp-radius-xs: 6px;
    --voerp-radius-sm: 9px;
    --voerp-radius: 12px;
    --voerp-radius-lg: 16px;
    --voerp-radius-xl: 20px;

    /* Shadows */
    --voerp-shadow-xs:
        0 1px 2px rgba(16, 24, 40, 0.03);

    --voerp-shadow-sm:
        0 1px 3px rgba(16, 24, 40, 0.04),
        0 4px 10px rgba(16, 24, 40, 0.035);

    --voerp-shadow:
        0 4px 18px rgba(16, 24, 40, 0.07);

    --voerp-shadow-lg:
        0 14px 34px rgba(16, 24, 40, 0.10);

    /* Transitions */
    --voerp-transition:
        160ms cubic-bezier(.2, .8, .2, 1);

    /* Layout */
    --voerp-content-max: 1680px;
}


/* ============================================================
   RESET / FOUNDATION
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    margin: 0;

    color: var(--voerp-text);

    background:
        radial-gradient(
            circle at 92% 3%,
            rgba(49, 135, 223, 0.07),
            transparent 26rem
        ),
        radial-gradient(
            circle at 18% 100%,
            rgba(15, 150, 138, 0.035),
            transparent 30rem
        ),
        var(--voerp-bg);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 14px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--voerp-text);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

h1,
.h1 {
    font-size: clamp(1.65rem, 2vw, 2.15rem);
}

h2,
.h2 {
    font-size: clamp(1.35rem, 1.6vw, 1.75rem);
}

h3,
.h3 {
    font-size: clamp(1.15rem, 1.4vw, 1.5rem);
}

h4,
.h4,
h5,
.h5 {
    font-weight: 700;
}

small,
.small {
    font-size: 0.82rem;
}

.text-muted {
    color: var(--voerp-muted) !important;
}

.fw-semibold {
    font-weight: 650 !important;
}

a {
    color: var(--voerp-primary-600);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;

    transition:
        color var(--voerp-transition);
}

a:hover {
    color: var(--voerp-primary-800);
}


/* ============================================================
   MAIN LAYOUT
   ============================================================ */

main {
    min-width: 0;
}

.container,
.container-fluid {
    --bs-gutter-x: 2rem;
}

.container-fluid {
    width: 100%;
}

main > .container-fluid,
main > .container {
    max-width: var(--voerp-content-max);
}


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

h1.h3 {
    margin-bottom: 0.25rem;

    color: var(--voerp-navy-900);

    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 760;
}

h1.h3 + .text-muted,
h1.h3 + p {
    font-size: 0.9rem;
}


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

.card {
    border:
        1px solid
        var(--voerp-border);

    border-radius:
        var(--voerp-radius-lg);

    background:
        var(--voerp-surface);

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

    overflow: hidden;

    transition:
        border-color var(--voerp-transition),
        box-shadow var(--voerp-transition),
        transform var(--voerp-transition);
}

.card:hover {
    border-color:
        var(--voerp-border-strong);

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

.card-header {
    padding:
        1rem
        1.2rem;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fafcff 100%
        ) !important;

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

.card-header strong {
    color:
        var(--voerp-navy-900);

    font-weight: 720;
}

.card-body {
    padding: 1.2rem;
}


/* KPI / small information boxes */

.card .border.rounded {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        var(--voerp-border) !important;

    border-radius:
        var(--voerp-radius) !important;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fbfe
        );

    transition:
        transform var(--voerp-transition),
        border-color var(--voerp-transition),
        box-shadow var(--voerp-transition);
}

.card .border.rounded:hover {
    transform:
        translateY(-2px);

    border-color:
        #c4d4e7 !important;

    box-shadow:
        0 7px 18px
        rgba(16, 24, 40, 0.06);
}


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

.btn {
    min-height: 40px;

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

    gap: 0.42rem;

    border-radius:
        var(--voerp-radius-sm);

    font-size: 0.875rem;
    font-weight: 650;

    padding:
        0.52rem
        0.9rem;

    transition:
        transform var(--voerp-transition),
        box-shadow var(--voerp-transition),
        background-color var(--voerp-transition),
        border-color var(--voerp-transition);
}

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

.btn:active {
    transform: none;
}

.btn-primary {
    color: #fff;

    border-color:
        var(--voerp-primary-700);

    background:
        linear-gradient(
            135deg,
            var(--voerp-primary-500),
            var(--voerp-primary-700)
        );

    box-shadow:
        0 4px 10px
        rgba(35, 116, 198, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff;

    border-color:
        var(--voerp-primary-800);

    background:
        linear-gradient(
            135deg,
            var(--voerp-primary-600),
            var(--voerp-primary-800)
        );

    box-shadow:
        0 6px 14px
        rgba(35, 116, 198, 0.22);
}

.btn-success {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #16a874,
            #087c58
        );

    border-color:
        #087c58;
}

.btn-danger {
    background:
        var(--voerp-red-600);

    border-color:
        var(--voerp-red-600);
}

.btn-outline-primary {
    color:
        var(--voerp-primary-700);

    border-color:
        #b7cee9;

    background:
        rgba(255, 255, 255, 0.7);
}

.btn-outline-primary:hover {
    color: #fff;

    border-color:
        var(--voerp-primary-600);

    background:
        var(--voerp-primary-600);
}

.btn-outline-secondary {
    color:
        var(--voerp-text-secondary);

    border-color:
        var(--voerp-border-strong);

    background:
        rgba(255, 255, 255, 0.7);
}

.btn-sm {
    min-height: 34px;

    padding:
        0.38rem
        0.68rem;

    border-radius:
        8px;
}


/* ============================================================
   FORMS
   ============================================================ */

.form-label {
    margin-bottom:
        0.42rem;

    color:
        var(--voerp-text-secondary);

    font-size:
        0.82rem;

    font-weight:
        650;
}

.form-control,
.form-select {
    min-height:
        43px;

    padding:
        0.55rem
        0.75rem;

    color:
        var(--voerp-text);

    background-color:
        #fff;

    border:
        1px solid
        #ccd6e2;

    border-radius:
        var(--voerp-radius-sm);

    box-shadow:
        none;

    transition:
        border-color var(--voerp-transition),
        box-shadow var(--voerp-transition),
        background-color var(--voerp-transition);
}

.form-control:hover,
.form-select:hover {
    border-color:
        #aab9ca;
}

.form-control:focus,
.form-select:focus {
    border-color:
        var(--voerp-primary-500);

    box-shadow:
        0 0 0 3px
        rgba(49, 135, 223, 0.13);
}

.form-control::placeholder {
    color:
        #98a2b3;
}

textarea.form-control {
    min-height:
        95px;

    resize:
        vertical;
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    border-color:
        var(--voerp-primary-600);

    background-color:
        var(--voerp-primary-600);
}


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

.table-responsive {
    width: 100%;

    border-radius:
        var(--voerp-radius);

    scrollbar-width:
        thin;
}

.table {
    --bs-table-bg: transparent;

    width: 100%;

    margin-bottom: 0;

    color:
        var(--voerp-text);
}

.table > thead > tr > th {
    padding:
        0.78rem
        0.8rem;

    color:
        #526176;

    background:
        #f7f9fc;

    border-bottom:
        1px solid
        var(--voerp-border);

    font-size:
        0.73rem;

    font-weight:
        720;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;

    vertical-align:
        middle;

    white-space:
        nowrap;
}

.table > tbody > tr > td {
    padding:
        0.82rem
        0.8rem;

    border-color:
        #edf1f5;

    vertical-align:
        middle;
}

.table-hover > tbody > tr {
    transition:
        background-color
        var(--voerp-transition);
}

.table-hover > tbody > tr:hover > * {
    background:
        #f5f9ff;
}


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

.badge {
    border-radius:
        999px;

    padding:
        0.42em
        0.68em;

    font-size:
        0.71rem;

    font-weight:
        720;

    letter-spacing:
        0.012em;
}

.text-bg-primary {
    color:
        #17559b !important;

    background:
        #eaf4ff !important;

    border:
        1px solid
        #bad9f8;
}

.text-bg-success {
    color:
        var(--voerp-green-700) !important;

    background:
        var(--voerp-green-100) !important;

    border:
        1px solid
        #b7e8cb;
}

.text-bg-info {
    color:
        #08758b !important;

    background:
        #e6faff !important;

    border:
        1px solid
        #b1eaf5;
}

.text-bg-warning {
    color:
        var(--voerp-amber-700) !important;

    background:
        var(--voerp-amber-100) !important;

    border:
        1px solid
        #f3d39c;
}

.text-bg-danger {
    color:
        var(--voerp-red-700) !important;

    background:
        var(--voerp-red-100) !important;

    border:
        1px solid
        #f4c3bf;
}

.text-bg-secondary {
    color:
        #475467 !important;

    background:
        #f2f4f7 !important;

    border:
        1px solid
        #d0d5dd;
}


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

.sidebar,
aside.sidebar,
aside.bg-dark,
.sidebar-wrapper {
    position: relative;

    color:
        #dce7f3;

    background:
        linear-gradient(
            180deg,
            #071729 0%,
            #0d2945 54%,
            #12395a 100%
        ) !important;

    box-shadow:
        8px 0 30px
        rgba(7, 21, 37, 0.10);
}

.sidebar::before,
aside.sidebar::before,
.sidebar-wrapper::before {
    content: "";

    position: absolute;

    inset:
        0
        0
        auto
        0;

    height:
        180px;

    pointer-events:
        none;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(63, 153, 232, 0.18),
            transparent 62%
        );
}

.sidebar .nav-link,
aside .nav-link {
    position: relative;

    display: flex;
    align-items: center;

    gap:
        0.68rem;

    min-height:
        42px;

    margin:
        2px
        8px;

    padding:
        0.62rem
        0.72rem;

    color:
        #bfd0e1;

    border-radius:
        9px;

    font-size:
        0.86rem;

    font-weight:
        560;

    transition:
        background-color var(--voerp-transition),
        color var(--voerp-transition),
        transform var(--voerp-transition);
}

.sidebar .nav-link:hover,
aside .nav-link:hover {
    color:
        #fff;

    background:
        rgba(255,255,255,0.075);

    transform:
        translateX(2px);
}

.sidebar .nav-link.active,
aside .nav-link.active {
    color:
        #fff;

    background:
        linear-gradient(
            135deg,
            rgba(49, 135, 223, 1),
            rgba(27, 103, 172, 0.94)
        );

    box-shadow:
        0 6px 15px
        rgba(20, 91, 154, 0.26);
}

.sidebar small.text-uppercase,
aside small.text-uppercase,
.sidebar .menu-title,
.sidebar .nav-header {
    display: block;

    margin-top:
        1rem;

    margin-bottom:
        0.35rem;

    padding:
        0
        1rem;

    color:
        #7791aa !important;

    font-size:
        0.64rem;

    font-weight:
        760;

    letter-spacing:
        0.105em;

    text-transform:
        uppercase;
}


/* ============================================================
   NAVBAR / HEADER
   ============================================================ */

.navbar {
    min-height:
        58px;

    background:
        rgba(255, 255, 255, 0.94) !important;

    border-bottom:
        1px solid
        rgba(221, 229, 239, 0.92);

    box-shadow:
        0 1px 5px
        rgba(16, 24, 40, 0.03);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


/* ============================================================
   DROPDOWNS
   ============================================================ */

.dropdown-menu {
    padding:
        0.45rem;

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

    border-radius:
        var(--voerp-radius);

    box-shadow:
        var(--voerp-shadow-lg);
}

.dropdown-item {
    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    border-radius:
        8px;

    padding:
        0.48rem
        0.7rem;
}

.dropdown-item:hover {
    background:
        var(--voerp-primary-50);
}


/* ============================================================
   ALERTS
   ============================================================ */

.alert {
    border-radius:
        var(--voerp-radius);

    border-width:
        1px;

    box-shadow:
        var(--voerp-shadow-xs);
}


/* ============================================================
   EMPTY STATES
   ============================================================ */

.table td.text-center.text-muted,
.empty-state {
    padding-top:
        2rem !important;

    padding-bottom:
        2rem !important;

    color:
        var(--voerp-muted) !important;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline:
        3px solid
        rgba(49, 135, 223, 0.22);

    outline-offset:
        2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* ============================================================
   LARGE DESKTOP
   ============================================================ */

@media (min-width: 1440px) {

    body {
        font-size:
            14.5px;
    }

    .card-body {
        padding:
            1.35rem;
    }

    .container,
    .container-fluid {
        --bs-gutter-x:
            2.25rem;
    }
}


/* ============================================================
   LAPTOP
   ============================================================ */

@media (min-width: 992px) and (max-width: 1439.98px) {

    body {
        font-size:
            14px;
    }

    .container,
    .container-fluid {
        --bs-gutter-x:
            1.6rem;
    }

    .card-body {
        padding:
            1.05rem;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding-left:
            0.65rem;

        padding-right:
            0.65rem;
    }
}


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

@media (min-width: 768px) and (max-width: 991.98px) {

    body {
        font-size:
            13.8px;
    }

    .container,
    .container-fluid {
        --bs-gutter-x:
            1.35rem;
    }

    .card {
        border-radius:
            14px;
    }

    .card-body {
        padding:
            1rem;
    }

    .btn {
        min-height:
            42px;
    }

    .form-control,
    .form-select {
        min-height:
            44px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding:
            0.7rem
            0.62rem;
    }
}


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

@media (max-width: 767.98px) {

    body {
        font-size:
            13.5px;

        background:
            var(--voerp-bg);
    }

    .container,
    .container-fluid {
        --bs-gutter-x:
            1rem;
    }

    h1.h3 {
        font-size:
            1.4rem;
    }

    .card {
        border-radius:
            12px;
    }

    .card-body {
        padding:
            0.9rem;
    }

    .card-header {
        padding:
            0.85rem
            0.9rem;
    }

    .btn {
        min-height:
            44px;

        padding-left:
            0.85rem;

        padding-right:
            0.85rem;
    }

    .btn-sm {
        min-height:
            38px;
    }

    .form-control,
    .form-select {
        min-height:
            46px;

        font-size:
            16px;
    }

    textarea.form-control {
        font-size:
            16px;
    }

    .table-responsive {
        margin-left:
            -0.2rem;

        margin-right:
            -0.2rem;

        padding-bottom:
            0.3rem;
    }

    .table {
        min-width:
            680px;
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding:
            0.68rem
            0.6rem;
    }

    .d-flex.flex-wrap.gap-2 > .btn {
        flex:
            1 1 auto;
    }

    .navbar {
        min-height:
            54px;
    }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 420px) {

    .container,
    .container-fluid {
        --bs-gutter-x:
            0.8rem;
    }

    h1.h3 {
        font-size:
            1.28rem;
    }

    .card-body {
        padding:
            0.8rem;
    }

    .row.g-3 {
        --bs-gutter-x:
            0.8rem;

        --bs-gutter-y:
            0.8rem;
    }

    .badge {
        font-size:
            0.68rem;
    }
}


/* ============================================================
   TOUCH DEVICES
   ============================================================ */

@media (hover: none) and (pointer: coarse) {

    .btn:hover,
    .card:hover,
    .card .border.rounded:hover,
    .sidebar .nav-link:hover,
    aside .nav-link:hover {
        transform:
            none;
    }

    .nav-link,
    .dropdown-item,
    .btn {
        min-height:
            44px;
    }
}


/* ============================================================
   PRINT
   ============================================================ */

@media print {

    body {
        background:
            #fff !important;
    }

    .sidebar,
    aside,
    .navbar,
    .btn {
        display:
            none !important;
    }

    .card {
        border:
            1px solid
            #ccc;

        box-shadow:
            none;
    }
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width:
        9px;

    height:
        9px;
}

::-webkit-scrollbar-track {
    background:
        transparent;
}

::-webkit-scrollbar-thumb {
    background:
        #c4cfdd;

    border-radius:
        999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        #9eafc2;
}


/* ============================================================
   ICON SYSTEM
   ============================================================ */

.nav-link .bi {
    width: 1.15rem;

    flex:
        0 0
        1.15rem;

    font-size:
        1rem;

    text-align:
        center;

    opacity:
        0.88;
}

.nav-link.active .bi {
    opacity:
        1;
}

.btn .bi {
    font-size:
        0.95rem;
}

h1 .bi,
h2 .bi,
h3 .bi {
    color:
        var(--voerp-primary-600);
}


/* Soft icon block usable in dashboards */

.voerp-icon {
    width:
        42px;

    height:
        42px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0
        42px;

    border-radius:
        11px;

    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);

    font-size:
        1.15rem;
}

.voerp-icon-success {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}

.voerp-icon-warning {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}

.voerp-icon-teal {
    color:
        var(--voerp-teal-700);

    background:
        var(--voerp-teal-100);
}


/* ============================================================
   MOBILE NAVIGATION SAFETY
   ============================================================ */

@media (max-width: 991.98px) {

    .sidebar,
    aside.sidebar,
    .sidebar-wrapper {
        max-width:
            280px;
    }

    main {
        width:
            100%;

        min-width:
            0;
    }

    .d-flex.justify-content-between {
        gap:
            0.75rem;
    }
}


@media (max-width: 575.98px) {

    .d-flex.flex-wrap.justify-content-between.align-items-center {
        align-items:
            stretch !important;
    }

    .d-flex.flex-wrap.justify-content-between.align-items-center > div:first-child {
        min-width:
            0;
    }

    .d-flex.flex-wrap.justify-content-between.align-items-center > .d-flex {
        width:
            100%;
    }

    .d-flex.flex-wrap.justify-content-between.align-items-center > .d-flex > .btn {
        flex:
            1 1 auto;
    }

    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        min-width:
            0;
    }
}


/* ============================================================
   VOERP SIDEBAR ICON SYSTEM V3
   ============================================================ */

.voerp-nav-icon {
    width: 31px;
    height: 31px;

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

    flex: 0 0 31px;

    border-radius: 8px;

    color: #9eb9d3;

    background:
        rgba(255, 255, 255, 0.045);

    transition:
        color var(--voerp-transition),
        background-color var(--voerp-transition),
        transform var(--voerp-transition);
}

.voerp-nav-icon .bi {
    width: auto;
    font-size: 0.98rem;
    line-height: 1;
    opacity: 1;
}

.voerp-nav-label {
    flex: 1 1 auto;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar .nav-link:hover .voerp-nav-icon,
aside .nav-link:hover .voerp-nav-icon {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.10);
}

.sidebar .nav-link.active .voerp-nav-icon,
aside .nav-link.active .voerp-nav-icon {
    color: #ffffff;

    background:
        rgba(255, 255, 255, 0.16);

    box-shadow:
        inset 0 0 0 1px
        rgba(255, 255, 255, 0.08);
}

.sidebar .nav-link.active .voerp-nav-icon {
    transform: scale(1.03);
}


/* Menü öğelerini daha rahat hedef haline getir */

.sidebar .nav-link,
aside .nav-link {
    min-height: 46px;
    padding: 0.44rem 0.55rem;
}


/* Bölüm başlıklarından önce hafif ayrım */

.sidebar small.text-uppercase,
aside small.text-uppercase,
.sidebar .menu-title,
.sidebar .nav-header {
    position: relative;

    margin-top: 1.25rem;
    padding-top: 0.2rem;
}


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

.voerp-mobile-menu-button {
    display: none;

    position: fixed;
    top: 11px;
    left: 12px;
    z-index: 1080;

    width: 42px;
    height: 42px;

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

    padding: 0;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--voerp-primary-500),
            var(--voerp-primary-700)
        );

    border: 0;
    border-radius: 11px;

    box-shadow:
        0 6px 18px
        rgba(23, 70, 120, 0.25);
}

.voerp-mobile-menu-button .bi {
    font-size: 1.3rem;
}

.voerp-sidebar-backdrop {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 1040;

    background:
        rgba(6, 20, 35, 0.54);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


@media (max-width: 991.98px) {

    .voerp-mobile-menu-button {
        display: inline-flex;
    }

    .sidebar,
    aside.sidebar,
    aside.bg-dark,
    .sidebar-wrapper {
        position: fixed !important;

        top: 0;
        bottom: 0;
        left: 0;

        width: min(86vw, 288px) !important;
        max-width: 288px !important;

        z-index: 1050;

        overflow-y: auto;
        overscroll-behavior: contain;

        transform: translateX(-105%);

        transition:
            transform
            220ms
            cubic-bezier(.2, .8, .2, 1);

        box-shadow:
            16px 0 40px
            rgba(5, 20, 36, 0.25);
    }

    body.voerp-sidebar-open .sidebar,
    body.voerp-sidebar-open aside.sidebar,
    body.voerp-sidebar-open aside.bg-dark,
    body.voerp-sidebar-open .sidebar-wrapper {
        transform: translateX(0);
    }

    body.voerp-sidebar-open {
        overflow: hidden;
    }

    body.voerp-sidebar-open .voerp-sidebar-backdrop {
        display: block;
    }

    main,
    .main-content,
    .content-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .navbar {
        padding-left: 4.25rem;
    }
}


@media (min-width: 992px) {

    .voerp-mobile-menu-button,
    .voerp-sidebar-backdrop {
        display: none !important;
    }
}


/* ============================================================
   VOERP DASHBOARD COMPONENTS
   ============================================================ */

.voerp-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.voerp-dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 1rem;
}

.voerp-dashboard-grid {
    display: grid;

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

    gap: 1rem;
}

.voerp-kpi-card {
    position: relative;

    min-width: 0;

    padding: 1.15rem;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fbff
        );

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

    border-radius:
        var(--voerp-radius-lg);

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

    transition:
        transform var(--voerp-transition),
        box-shadow var(--voerp-transition),
        border-color var(--voerp-transition);
}

.voerp-kpi-card:hover {
    transform: translateY(-2px);

    border-color:
        #c6d5e6;

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

.voerp-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;
}

.voerp-kpi-icon {
    width: 44px;
    height: 44px;

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

    flex: 0 0 44px;

    border-radius: 12px;

    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);

    font-size: 1.2rem;
}

.voerp-kpi-icon.success {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}

.voerp-kpi-icon.warning {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}

.voerp-kpi-icon.teal {
    color:
        var(--voerp-teal-700);

    background:
        var(--voerp-teal-100);
}

.voerp-kpi-icon.danger {
    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);
}

.voerp-kpi-label {
    margin-bottom: 0.3rem;

    color:
        var(--voerp-muted);

    font-size:
        0.78rem;

    font-weight:
        650;

    text-transform:
        uppercase;

    letter-spacing:
        0.045em;
}

.voerp-kpi-value {
    color:
        var(--voerp-navy-900);

    font-size:
        clamp(1.45rem, 2vw, 2rem);

    font-weight:
        760;

    letter-spacing:
        -0.035em;

    line-height:
        1.1;
}

.voerp-kpi-subtitle {
    margin-top: 0.6rem;

    color:
        var(--voerp-muted);

    font-size:
        0.78rem;
}


/* Dashboard action tiles */

.voerp-quick-actions {
    display: grid;

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

    gap: 0.8rem;
}

.voerp-quick-action {
    min-height: 82px;

    display: flex;
    align-items: center;

    gap: 0.8rem;

    padding: 0.9rem;

    color:
        var(--voerp-text);

    text-decoration: none;

    background:
        #ffffff;

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

    border-radius:
        var(--voerp-radius);

    transition:
        transform var(--voerp-transition),
        border-color var(--voerp-transition),
        box-shadow var(--voerp-transition);
}

.voerp-quick-action:hover {
    color:
        var(--voerp-text);

    transform:
        translateY(-2px);

    border-color:
        #bed0e4;

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

.voerp-quick-action-icon {
    width: 40px;
    height: 40px;

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

    flex: 0 0 40px;

    border-radius: 11px;

    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);

    font-size: 1.05rem;
}

.voerp-quick-action-title {
    font-weight: 700;
}

.voerp-quick-action-description {
    margin-top: 0.1rem;

    color:
        var(--voerp-muted);

    font-size:
        0.76rem;
}


/* Dashboard responsiveness */

@media (max-width: 1199.98px) {

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

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


@media (max-width: 575.98px) {

    .voerp-dashboard-grid,
    .voerp-quick-actions {
        grid-template-columns:
            1fr;
    }

    .voerp-kpi-card {
        padding:
            1rem;
    }

    .voerp-kpi-value {
        font-size:
            1.65rem;
    }
}


/* ============================================================
   VOERP COMPLETE SIDEBAR NAVIGATION
   Mevcut base.html yapısına göre
   ============================================================ */

.sidebar > a,
.sidebar-subitem {
    display: flex !important;
    align-items: center;
    gap: 0.68rem;

    min-height: 46px;

    margin: 2px 8px;

    padding: 0.48rem 0.58rem !important;

    color: #bfd0e1 !important;

    border-radius: 9px;

    font-size: 0.86rem;
    font-weight: 560;

    text-decoration: none;

    transition:
        color var(--voerp-transition),
        background-color var(--voerp-transition),
        transform var(--voerp-transition);
}

.sidebar > a:hover,
.sidebar-subitem:hover {
    color: #fff !important;

    background:
        rgba(255, 255, 255, 0.075) !important;

    transform: translateX(2px);
}

.sidebar > a.active,
.sidebar-subitem.active {
    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            rgba(49, 135, 223, 0.98),
            rgba(29, 93, 155, 0.96)
        ) !important;

    border-left: 0 !important;

    box-shadow:
        0 6px 16px
        rgba(16, 86, 150, 0.26);
}


/* Ana menü ikon kutuları */

.voerp-nav-icon {
    width: 31px;
    height: 31px;

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

    flex: 0 0 31px;

    border-radius: 8px;

    color: #a9c4de;

    background:
        rgba(255, 255, 255, 0.055);

    transition:
        color var(--voerp-transition),
        background-color var(--voerp-transition),
        transform var(--voerp-transition);
}

.voerp-nav-icon i {
    font-size: 1rem;
    line-height: 1;
}

.voerp-nav-label {
    flex: 1 1 auto;
    min-width: 0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar > a:hover .voerp-nav-icon,
.sidebar-subitem:hover .voerp-nav-icon {
    color: #fff;

    background:
        rgba(255,255,255,0.11);
}

.sidebar > a.active .voerp-nav-icon,
.sidebar-subitem.active .voerp-nav-icon {
    color: #fff;

    background:
        rgba(255,255,255,0.16);
}


/* ============================================================
   COLLAPSIBLE SECTION HEADERS
   ============================================================ */

.sidebar-section-toggle {
    min-height: 46px;

    display: flex;
    align-items: center;

    width: calc(100% - 16px);

    margin: 4px 8px;

    padding: 0.46rem 0.58rem;

    border: 0;
    border-radius: 9px;

    color: #b8c9da;

    background: transparent;

    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0;

    text-transform: none;

    transition:
        color var(--voerp-transition),
        background-color var(--voerp-transition);
}

.sidebar-section-toggle:hover {
    color: #fff;

    background:
        rgba(255,255,255,0.075);
}

.voerp-section-title {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 0.68rem;
}


/* Alt menüler biraz daha ince */

.sidebar-subitem {
    margin-left: 16px;
    margin-right: 8px;

    font-size: 0.82rem !important;
}

.sidebar-subitem .voerp-nav-icon {
    width: 28px;
    height: 28px;

    flex-basis: 28px;

    border-radius: 7px;
}


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

.sidebar .brand {
    position: relative;

    padding:
        1.25rem
        1rem
        1.1rem;

    color: #fff;

    font-size: 1.35rem;
    font-weight: 780;

    letter-spacing: -0.035em;

    border-bottom:
        1px solid
        rgba(255,255,255,0.075);
}

.sidebar .brand::before {
    content: "";

    display: inline-block;

    width: 10px;
    height: 10px;

    margin-right: 8px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #61b7ff,
            #3ee0c1
        );

    box-shadow:
        0 0 16px
        rgba(74, 192, 255, 0.65);
}

.sidebar .brand small {
    margin-top: 0.22rem;
    margin-left: 22px;

    color: #839db6;

    font-size: 0.67rem;

    letter-spacing: 0.035em;
}


/* ============================================================
   MOBILE NAV LINK FIX
   ============================================================ */

@media (max-width: 991.98px) {

    .sidebar > a,
    .sidebar-subitem,
    .sidebar-section-toggle {
        min-height: 48px;
    }
}


/* ============================================================
   VOERP DASHBOARD V3
   ============================================================ */

.voerp-dashboard-hero {
    position: relative;

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

    gap: 1.25rem;

    padding: 1.5rem 1.6rem;

    overflow: hidden;

    border:
        1px solid
        rgba(49, 135, 223, 0.16);

    border-radius:
        var(--voerp-radius-xl);

    background:
        linear-gradient(
            120deg,
            #ffffff 0%,
            #f4f9ff 58%,
            #edf8f7 100%
        );

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

.voerp-dashboard-hero::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right: -80px;
    top: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(49,135,223,.13),
            transparent 68%
        );

    pointer-events: none;
}


.voerp-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: .4rem;

    margin-bottom: .4rem;

    color:
        var(--voerp-primary-700);

    font-size: .72rem;
    font-weight: 750;

    letter-spacing: .075em;

    text-transform: uppercase;
}


.voerp-dashboard-title {
    margin: 0;

    color:
        var(--voerp-navy-900);

    font-size:
        clamp(1.7rem, 2.5vw, 2.35rem);

    font-weight: 790;

    letter-spacing: -.045em;
}


.voerp-dashboard-lead {
    max-width: 640px;

    margin:
        .35rem
        0
        0;

    color:
        var(--voerp-muted);

    font-size: .93rem;
}


.voerp-dashboard-company {
    position: relative;

    display: flex;
    align-items: center;

    gap: .75rem;

    min-width: 220px;

    padding:
        .75rem
        .9rem;

    border:
        1px solid
        rgba(49,135,223,.13);

    border-radius:
        var(--voerp-radius);

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

    backdrop-filter:
        blur(8px);
}


.voerp-dashboard-company-icon {
    width: 40px;
    height: 40px;

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

    flex: 0 0 40px;

    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);

    border-radius: 10px;

    font-size: 1rem;
}


/* KPI */

.voerp-kpi-link {
    color: inherit;
    text-decoration: none;
}

.voerp-kpi-link:hover {
    color: inherit;
}

.voerp-kpi-unit {
    color:
        var(--voerp-muted);

    font-size: .75rem;
    font-weight: 650;
}


/* Finance strip */

.voerp-finance-strip {
    display: grid;

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

    gap: .8rem;
}


.voerp-mini-stat {
    display: flex;
    align-items: center;

    gap: .75rem;

    min-width: 0;

    padding:
        .85rem
        .95rem;

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

    border-radius:
        var(--voerp-radius);

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

    box-shadow:
        var(--voerp-shadow-xs);
}


.voerp-mini-icon {
    width: 38px;
    height: 38px;

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

    flex: 0 0 38px;

    border-radius: 10px;

    font-size: 1rem;
}


.voerp-mini-icon.debit {
    color: #b54708;
    background: #fff7e8;
}

.voerp-mini-icon.credit {
    color: #087443;
    background: #eafaf0;
}

.voerp-mini-icon.balance {
    color: #1d5d9b;
    background: #edf6ff;
}

.voerp-mini-icon.document {
    color: #087b72;
    background: #e7f8f5;
}


.voerp-mini-label {
    color:
        var(--voerp-muted);

    font-size: .72rem;
}


.voerp-mini-value {
    margin-top: .12rem;

    color:
        var(--voerp-navy-900);

    font-size: 1rem;
    font-weight: 720;

    white-space: nowrap;
}


/* Sections */

.voerp-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    margin-bottom: .7rem;
}

.voerp-section-heading h2,
.voerp-panel-heading h2 {
    margin: 0;

    font-size: 1rem;
    font-weight: 730;
}

.voerp-section-heading p,
.voerp-panel-heading p {
    margin:
        .15rem
        0
        0;

    color:
        var(--voerp-muted);

    font-size: .78rem;
}


/* Quick action extras */

.voerp-quick-action {
    position: relative;
}

.voerp-quick-action > span:nth-child(2) {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.voerp-quick-action-icon.success {
    color: var(--voerp-green-700);
    background: var(--voerp-green-100);
}

.voerp-quick-action-icon.warning {
    color: var(--voerp-amber-700);
    background: var(--voerp-amber-100);
}

.voerp-action-arrow {
    margin-left: auto;

    color:
        var(--voerp-subtle);
}


/* Two-column cards */

.voerp-dashboard-two-column {
    display: grid;

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

    gap: 1rem;
}


.voerp-dashboard-panel {
    min-width: 0;
}


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

    gap: 1rem;

    padding:
        1rem
        1.15rem;

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


.voerp-panel-heading {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: .7rem;
}


.voerp-panel-icon {
    width: 39px;
    height: 39px;

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

    flex: 0 0 39px;

    border-radius: 10px;

    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);
}


.voerp-panel-icon.success {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}

.voerp-panel-icon.warning {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}

.voerp-panel-icon.danger {
    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);
}


/* Management numbers */

.voerp-management-grid {
    display: grid;

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

    gap: 0;

    padding: .4rem;
}

.voerp-management-grid > div {
    min-width: 0;

    padding:
        .85rem
        .9rem;

    border-radius: 9px;
}

.voerp-management-grid > div:hover {
    background:
        var(--voerp-bg-soft);
}

.voerp-management-grid span {
    display: block;

    color:
        var(--voerp-muted);

    font-size: .74rem;
}

.voerp-management-grid strong {
    display: block;

    margin-top: .25rem;

    color:
        var(--voerp-navy-900);

    font-size: 1.03rem;
}


/* Clean lists */

.voerp-clean-list {
    padding: .35rem;
}

.voerp-clean-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        .78rem
        .8rem;

    color:
        var(--voerp-text);

    text-decoration: none;

    border-radius:
        10px;

    transition:
        background-color
        var(--voerp-transition);
}

.voerp-clean-list-item:hover {
    color:
        var(--voerp-text);

    background:
        var(--voerp-primary-50);
}

.voerp-clean-list-item + .voerp-clean-list-item {
    border-top:
        1px solid
        #edf1f5;
}

.voerp-clean-list-item span {
    display: block;

    margin-top: .12rem;

    color:
        var(--voerp-muted);

    font-size: .74rem;
}


/* Empty states */

.voerp-empty-state {
    min-height: 135px;

    display: flex;
    flex-direction: column;

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

    gap: .25rem;

    padding: 1rem;

    color:
        var(--voerp-muted);

    text-align: center;
}

.voerp-empty-state i {
    margin-bottom: .3rem;

    color:
        #9bb4cb;

    font-size: 1.65rem;
}

.voerp-empty-state strong {
    color:
        var(--voerp-text-secondary);

    font-size: .86rem;
}

.voerp-empty-state span {
    font-size: .75rem;
}


/* Bottom transaction status */

.voerp-status-strip {
    display: grid;

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

    gap: .7rem;
}

.voerp-status-item {
    display: flex;
    align-items: center;

    gap: .65rem;

    padding:
        .75rem
        .85rem;

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

    border-radius:
        var(--voerp-radius);

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

.voerp-status-item span:not(.voerp-status-dot) {
    display: block;

    color:
        var(--voerp-muted);

    font-size: .72rem;
}

.voerp-status-item strong {
    display: block;

    color:
        var(--voerp-navy-900);

    font-size: 1.05rem;
}

.voerp-status-dot {
    width: 10px;
    height: 10px;

    flex: 0 0 10px;

    border-radius: 50%;
}

.voerp-status-dot.total {
    background: var(--voerp-primary-500);
}

.voerp-status-dot.posted {
    background: var(--voerp-green-600);
}

.voerp-status-dot.draft {
    background: var(--voerp-amber-600);
}

.voerp-status-dot.cancelled {
    background: var(--voerp-subtle);
}


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

@media (max-width: 1199.98px) {

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


@media (max-width: 991.98px) {

    .voerp-dashboard-two-column {
        grid-template-columns: 1fr;
    }

    .voerp-dashboard-hero {
        align-items: flex-start;
    }
}


@media (max-width: 767.98px) {

    .voerp-dashboard-hero {
        flex-direction: column;

        padding: 1.15rem;
    }

    .voerp-dashboard-company {
        width: 100%;
    }

    .voerp-finance-strip {
        grid-template-columns: 1fr 1fr;
    }

    .voerp-panel-header {
        align-items: flex-start;
    }
}


@media (max-width: 575.98px) {

    .voerp-finance-strip,
    .voerp-management-grid,
    .voerp-status-strip {
        grid-template-columns: 1fr;
    }

    .voerp-panel-header {
        flex-direction: column;
    }

    .voerp-panel-header .btn {
        width: 100%;
    }

    .voerp-clean-list-item {
        align-items: flex-start;
    }
}


/* ============================================================
   SIDEBAR FINAL POLISH
   ============================================================ */

@media (min-width: 992px) {
    .sidebar {
        position: sticky;
        top: 0;

        height: 100vh;
        min-height: 100vh;

        overflow-y: auto;
        overflow-x: hidden;
    }
}

.sidebar-section-toggle .voerp-section-title {
    flex: 1 1 auto;
}

.sidebar-section-toggle::after {
    margin-left: auto;
}

.sidebar-section-toggle .voerp-nav-icon {
    margin: 0;
}

.sidebar > a,
.sidebar-subitem,
.sidebar-section-toggle {
    font-weight: 590;
}

.sidebar > a {
    margin-left: 8px;
    margin-right: 8px;
}

.sidebar-subitem {
    margin-left: 16px;
}

.sidebar-subitem .voerp-nav-label {
    font-size: .82rem;
}

/* Bildirim badge'i ikon/metin dengesini bozmasın */
.sidebar .badge {
    margin-left: auto;
    flex: 0 0 auto;
}


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

main > .d-flex.justify-content-between.mb-4 {
    min-height: 58px;

    display: flex;
    align-items: center;

    margin:
        -1rem
        -1rem
        1.25rem !important;

    padding:
        .7rem
        1rem;

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

    border-bottom:
        1px solid
        var(--voerp-border);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

main > .d-flex.justify-content-between.mb-4 > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .45rem;
}

main > .d-flex.justify-content-between.mb-4 b {
    color:
        var(--voerp-navy-900);

    font-size: .88rem;
    font-weight: 720;
}

main > .d-flex.justify-content-between.mb-4 .badge {
    margin-left: 0 !important;
}

main > .d-flex.justify-content-between.mb-4 .dropdown-toggle {
    background: #fff;

    border-color:
        var(--voerp-border-strong);
}

main > .d-flex.justify-content-between.mb-4 .btn-outline-danger {
    color:
        var(--voerp-red-600);

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

    border-color:
        #f0aaa5;
}


/* Mobil top bar */

@media (max-width: 991.98px) {

    main > .d-flex.justify-content-between.mb-4 {
        margin:
            -.6rem
            -.5rem
            1rem !important;

        padding-left:
            4rem;
    }
}


@media (max-width: 575.98px) {

    main > .d-flex.justify-content-between.mb-4 {
        min-height: 60px;

        gap: .6rem;
    }

    main > .d-flex.justify-content-between.mb-4 b {
        max-width: 120px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    main > .d-flex.justify-content-between.mb-4 .badge {
        display: none;
    }

    main > .d-flex.justify-content-between.mb-4 .dropdown-toggle {
        font-size: 0;

        width: 40px;
        height: 40px;

        padding: 0;
    }

    main > .d-flex.justify-content-between.mb-4 .dropdown-toggle::before {
        content: "\F1DD";

        font-family: "bootstrap-icons";

        font-size: 1rem;
    }
}


/* ============================================================
   VOERP APPLICATION UI V4
   GLOBAL PAGE SYSTEM
   ============================================================ */


/* ------------------------------------------------------------
   CONTENT AREA
   ------------------------------------------------------------ */

main {
    min-width: 0;
    overflow-x: hidden;
}

main > * {
    min-width: 0;
}

main > .d-flex.justify-content-between.mb-4 + * {
    animation: voerpPageIn 180ms ease-out;
}

@keyframes voerpPageIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

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


/* ------------------------------------------------------------
   STANDARD PAGE HEADERS
   ------------------------------------------------------------ */

.voerp-page-header,
main .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 1.25rem !important;

    padding: 1.1rem 1.2rem;

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

    border-radius:
        var(--voerp-radius-lg);

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.96),
            rgba(246,250,255,.94)
        );

    box-shadow:
        var(--voerp-shadow-xs);
}

.voerp-page-header h1,
main .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4 h1 {
    margin-bottom: .15rem !important;

    color:
        var(--voerp-navy-900);

    font-size:
        clamp(1.35rem, 1.7vw, 1.75rem);

    font-weight: 770;

    letter-spacing: -.035em;
}


/* ------------------------------------------------------------
   SECTION TITLES
   ------------------------------------------------------------ */

.card h2.h5,
.card h3.h6 {
    color:
        var(--voerp-navy-900);
}

.card h2.h5 {
    font-size: .98rem;
    font-weight: 730;
}

.card h3.h6 {
    font-size: .86rem;
    font-weight: 700;
}


/* ------------------------------------------------------------
   DATA CARDS
   ------------------------------------------------------------ */

.card.card-body {
    padding: 1.15rem;
}

.card.card-body.mb-3 {
    margin-bottom: 1rem !important;
}


/* Kart başlıkları için ince görsel vurgu */

.card > .d-flex:first-child h2,
.card-body > h2:first-child {
    position: relative;
}


/* ------------------------------------------------------------
   INFORMATION TILES
   ------------------------------------------------------------ */

.card .row .border.rounded {
    min-height: 78px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card .row .border.rounded .small.text-muted {
    margin-bottom: .18rem;

    font-size: .72rem;
    font-weight: 620;

    letter-spacing: .015em;
}

.card .row .border.rounded .fs-5 {
    color:
        var(--voerp-navy-900);

    font-size: 1.12rem !important;
    font-weight: 730 !important;
}


/* ------------------------------------------------------------
   TABLE SYSTEM
   ------------------------------------------------------------ */

.table-responsive {
    position: relative;

    border:
        1px solid
        #e7ecf3;

    border-radius:
        var(--voerp-radius);

    background: #fff;
}

.table-responsive > .table {
    border-collapse: separate;
    border-spacing: 0;
}

.table > thead > tr > th:first-child {
    padding-left: 1rem;
}

.table > tbody > tr > td:first-child {
    padding-left: 1rem;
}

.table > thead > tr > th:last-child,
.table > tbody > tr > td:last-child {
    padding-right: 1rem;
}


/* Zebra çizgisi yerine çok hafif satır ayrımı */

.table > tbody > tr:nth-child(even) > * {
    background:
        rgba(248,250,252,.42);
}

.table-hover > tbody > tr:hover > * {
    background:
        #f3f8ff !important;
}


/* Para / sayısal alanlar */

.table td.text-end,
.table th.text-end {
    font-variant-numeric:
        tabular-nums;
}


/* ------------------------------------------------------------
   FORM PANELS
   ------------------------------------------------------------ */

form .card,
.voerp-form-panel {
    overflow: visible;
}

form .card-body {
    position: relative;
}

form .row {
    --bs-gutter-y: 1rem;
}

form label {
    color:
        var(--voerp-text-secondary);
}


/* Hata alanları */

.invalid-feedback,
.text-danger {
    font-weight: 540;
}

.form-control.is-invalid,
.form-select.is-invalid {
    background-color:
        #fffafa;
}


/* Readonly */

.form-control[readonly],
.form-control:disabled,
.form-select:disabled {
    color:
        #667085;

    background:
        #f7f9fc;
}


/* ------------------------------------------------------------
   SEARCH / FILTER AREAS
   ------------------------------------------------------------ */

.voerp-filter-bar,
form[action=""][method="get"],
form[method="get"] {
    border-radius:
        var(--voerp-radius);
}


/* ------------------------------------------------------------
   ACTION BUTTON GROUPS
   ------------------------------------------------------------ */

.voerp-actions,
.d-flex.flex-wrap.gap-2 {
    align-items: center;
}


/* Kritik aksiyonların yanlışlıkla baskınlaşmasını önle */

.btn-outline-danger {
    color:
        var(--voerp-red-600);

    border-color:
        #efb0ac;

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

.btn-outline-danger:hover {
    color: #fff;

    border-color:
        var(--voerp-red-600);

    background:
        var(--voerp-red-600);
}


/* ------------------------------------------------------------
   EMPTY STATES
   ------------------------------------------------------------ */

td.text-center.text-muted.py-3,
td.text-center.text-muted.py-4 {
    height: 100px;

    vertical-align: middle;

    color:
        var(--voerp-muted) !important;
}


/* ------------------------------------------------------------
   PAGINATION
   ------------------------------------------------------------ */

.pagination {
    gap: .25rem;
}

.page-link {
    min-width: 36px;
    min-height: 36px;

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

    color:
        var(--voerp-primary-700);

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

    border-radius:
        8px !important;

    background: #fff;
}

.page-link:hover {
    color:
        var(--voerp-primary-800);

    background:
        var(--voerp-primary-50);
}

.page-item.active .page-link {
    border-color:
        var(--voerp-primary-600);

    background:
        var(--voerp-primary-600);
}


/* ------------------------------------------------------------
   MODALS
   ------------------------------------------------------------ */

.modal-content {
    border: 0;

    border-radius:
        var(--voerp-radius-lg);

    box-shadow:
        0 24px 70px
        rgba(12,32,55,.20);
}

.modal-header,
.modal-footer {
    border-color:
        var(--voerp-border);
}


/* ------------------------------------------------------------
   TOOLTIP-LIKE HELP TEXT
   ------------------------------------------------------------ */

.form-text {
    margin-top: .3rem;

    color:
        var(--voerp-muted);

    font-size: .74rem;
}


/* ------------------------------------------------------------
   MOBILE / TABLET PAGE SYSTEM
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

    main {
        padding:
            1rem !important;
    }

    .voerp-page-header,
    main .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4 {
        padding:
            1rem;
    }

    .card.card-body {
        padding:
            1rem;
    }
}


@media (max-width: 767.98px) {

    main {
        padding:
            .8rem !important;
    }

    .voerp-page-header,
    main .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4 {
        flex-direction:
            column;

        align-items:
            stretch !important;

        padding:
            .9rem;

        border-radius:
            12px;
    }

    .voerp-page-header > .d-flex,
    main .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4 > .d-flex {
        width: 100%;
    }

    .voerp-page-header .btn,
    main .d-flex.flex-wrap.justify-content-between.align-items-center.gap-2.mb-4 > .d-flex .btn {
        flex:
            1 1 auto;
    }

    .card {
        border-radius:
            12px;
    }

    .card.card-body {
        padding:
            .9rem;
    }

    /* Veri tabloları mobilde yatay kayar,
       masaüstü kolon yapısı bozulmaz. */

    .table-responsive {
        width: 100%;

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;

        border-radius:
            10px;
    }

    .table-responsive .table {
        min-width:
            720px;
    }

    .table-responsive::after {
        content: "";

        position: sticky;
        right: 0;

        width: 1px;
    }

    .form-control,
    .form-select,
    .btn {
        min-height:
            44px;
    }
}


@media (max-width: 480px) {

    main {
        padding:
            .65rem !important;
    }

    .card.card-body {
        padding:
            .8rem;
    }

    .row.g-3 {
        --bs-gutter-x:
            .7rem;

        --bs-gutter-y:
            .7rem;
    }
}


/* ------------------------------------------------------------
   HIGH DENSITY DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 1600px) {

    main {
        padding:
            1.6rem !important;
    }

    .table > tbody > tr > td {
        padding-top:
            .82rem;

        padding-bottom:
            .82rem;
    }
}


/* ============================================================
   PAGE TITLE ICONS
   ============================================================ */

main h1.h3 {
    display: flex;
    align-items: center;

    gap: .65rem;
}

.voerp-title-icon {
    width: 38px;
    height: 38px;

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

    flex: 0 0 38px;

    border-radius: 10px;

    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);

    font-size: 1rem;
}


/* Buton ikonları */

.btn > .bi:first-child {
    margin-right: .1rem;
}


/* Dashboard/sidebar hariç ikonların aşırı baskınlaşmasını önler */

main .btn .bi {
    line-height: 1;
    opacity: .92;
}


/* ============================================================
   CRM / ACCOUNT DETAIL
   ============================================================ */

[data-panel="customer-products"] {
    border-left:
        3px solid
        var(--voerp-amber-600);
}

[data-panel="container-balance"] {
    border-left:
        3px solid
        var(--voerp-teal-600);
}

[data-panel="collection-actions"] {
    border-left:
        3px solid
        var(--voerp-green-600);
}

[data-panel="payment-actions"] {
    border-left:
        3px solid
        var(--voerp-primary-500);
}


[data-panel="customer-products"] h2::before {
    content: "\F1C8";

    margin-right: .45rem;

    color:
        var(--voerp-amber-600);

    font-family:
        "bootstrap-icons";
}


[data-panel="container-balance"] h2::before {
    content: "\F1C7";

    margin-right: .45rem;

    color:
        var(--voerp-teal-600);

    font-family:
        "bootstrap-icons";
}


[data-panel="collection-actions"] h2::before {
    content: "\F45C";

    margin-right: .45rem;

    color:
        var(--voerp-green-600);

    font-family:
        "bootstrap-icons";
}


[data-panel="payment-actions"] h2::before {
    content: "\F2E6";

    margin-right: .45rem;

    color:
        var(--voerp-primary-600);

    font-family:
        "bootstrap-icons";
}


/* ============================================================
   TRADE / DATA ENTRY UX
   ============================================================ */

@media (max-width: 767.98px) {

    form .row > [class*="col-"] {
        min-width: 0;
    }

    form .form-label {
        font-size: .8rem;
    }

    form .form-control,
    form .form-select {
        width: 100%;

        min-height: 46px;

        font-size: 16px;
    }

    form textarea.form-control {
        min-height: 90px;
    }

    /* Form altındaki ana aksiyonlar */
    form .d-flex.gap-2,
    form .d-flex.flex-wrap.gap-2 {
        width: 100%;

        flex-wrap: wrap;
    }

    form .d-flex.gap-2 > .btn,
    form .d-flex.flex-wrap.gap-2 > .btn {
        flex: 1 1 140px;

        min-height: 46px;
    }
}


/* Tablet veri girişi */

@media (
    min-width: 768px
) and (
    max-width: 1199.98px
) {

    form .form-control,
    form .form-select {
        min-height: 44px;
    }
}


/* ============================================================
   VOERP V5 — HIGH VALUE WORKSCREENS
   Cari • Stok • Ticari İşlem
   ============================================================ */


/* ------------------------------------------------------------
   ORTAK ÇALIŞMA EKRANI
   ------------------------------------------------------------ */

.voerp-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

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

    gap: .75rem;

    padding: .85rem 1rem;

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

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

    box-shadow: var(--voerp-shadow-xs);
}

.voerp-workspace-toolbar .form-control,
.voerp-workspace-toolbar .form-select {
    min-height: 38px;
}


/* ------------------------------------------------------------
   CARİ DETAY
   ------------------------------------------------------------ */

[data-panel="customer-products"],
[data-panel="container-balance"],
[data-panel="collection-actions"],
[data-panel="payment-actions"] {
    position: relative;
}

[data-panel="customer-products"] {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #fffaf1
        );
}

[data-panel="container-balance"] {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f3fbfa
        );
}


/* Emanet ürün kartları */

[data-panel="customer-products"] .border.rounded {
    min-height: 150px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fffaf4
        );

    border-color:
        #f0ddbc !important;
}

[data-panel="customer-products"] .fs-4 {
    color:
        var(--voerp-amber-700);

    font-size:
        1.7rem !important;
}


/* Finansal bilgi kartlarının renk ayrımı */

.card .row.g-3 .border.rounded {
    position: relative;
}

.card .row.g-3 .border.rounded::before {
    content: "";

    position: absolute;

    left: 0;
    top: 14px;
    bottom: 14px;

    width: 3px;

    border-radius: 0 3px 3px 0;

    background:
        #d9e4f1;
}


/* Cari detay tabloları */

[data-panel="container-balance"] table td,
[data-panel="container-balance"] table th {
    white-space: nowrap;
}

[data-panel="container-balance"] table td:first-child {
    white-space: normal;

    min-width: 220px;
}


/* ------------------------------------------------------------
   STOCK SCREEN
   ------------------------------------------------------------ */

.voerp-stock-summary {
    display: grid;

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

    gap: .85rem;

    margin-bottom: 1rem;
}

.voerp-stock-stat {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: .75rem;

    padding: .95rem;

    background: #fff;

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

    border-radius:
        var(--voerp-radius);

    box-shadow:
        var(--voerp-shadow-xs);
}

.voerp-stock-stat-icon {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 11px;

    font-size: 1.05rem;
}

.voerp-stock-stat-icon.full {
    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);
}

.voerp-stock-stat-icon.empty {
    color:
        var(--voerp-teal-700);

    background:
        var(--voerp-teal-100);
}

.voerp-stock-stat-icon.total {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}

.voerp-stock-stat-icon.alert {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}

.voerp-stock-stat-label {
    color:
        var(--voerp-muted);

    font-size:
        .72rem;

    font-weight:
        630;
}

.voerp-stock-stat-value {
    margin-top:
        .1rem;

    color:
        var(--voerp-navy-900);

    font-size:
        1.2rem;

    font-weight:
        750;

    font-variant-numeric:
        tabular-nums;
}


/* Stok durum badge'leri */

.voerp-stock-condition {
    display: inline-flex;
    align-items: center;

    gap: .3rem;

    padding:
        .32rem
        .58rem;

    border-radius:
        999px;

    font-size:
        .71rem;

    font-weight:
        690;
}

.voerp-stock-condition.full {
    color:
        #17559b;

    background:
        #eaf4ff;

    border:
        1px solid
        #bed9f4;
}

.voerp-stock-condition.empty {
    color:
        #087b72;

    background:
        #e5f8f5;

    border:
        1px solid
        #bce8e1;
}


/* ------------------------------------------------------------
   TRADE DOCUMENT FORM
   ------------------------------------------------------------ */

.voerp-trade-form {
    display: flex;
    flex-direction: column;

    gap: 1rem;
}


/* Belge üst bilgileri */

.voerp-trade-header {
    display: grid;

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

    gap: .85rem;

    padding: 1rem;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f5f9ff
        );

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

    border-radius:
        var(--voerp-radius-lg);

    box-shadow:
        var(--voerp-shadow-xs);
}


/* Satır kartları */

.voerp-trade-lines {
    padding: 1rem;

    background: #fff;

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

    border-radius:
        var(--voerp-radius-lg);

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

.voerp-trade-lines-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .75rem;

    margin-bottom: .9rem;
}

.voerp-trade-lines-title {
    margin: 0;

    color:
        var(--voerp-navy-900);

    font-size: .98rem;

    font-weight: 730;
}


/* Formset satırları */

.voerp-line-row {
    position: relative;

    margin-bottom: .65rem;

    padding: .75rem;

    background:
        #fafcff;

    border:
        1px solid
        #e4ebf3;

    border-radius:
        11px;

    transition:
        border-color var(--voerp-transition),
        background-color var(--voerp-transition),
        box-shadow var(--voerp-transition);
}

.voerp-line-row:hover {
    border-color:
        #bfd1e5;

    background:
        #f7fbff;

    box-shadow:
        var(--voerp-shadow-xs);
}


/* Return / empty cylinder area */

.voerp-return-lines {
    padding: 1rem;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f1fbf9
        );

    border:
        1px solid
        #cce9e4;

    border-radius:
        var(--voerp-radius-lg);
}

.voerp-return-lines .voerp-trade-lines-title {
    color:
        var(--voerp-teal-700);
}


/* Toplam / sonuç kutusu */

.voerp-trade-summary {
    position: sticky;

    bottom: 12px;

    z-index: 20;

    display: flex;
    justify-content: flex-end;

    margin-top: 1rem;
}

.voerp-trade-summary-card {
    min-width: 290px;

    padding: .9rem 1rem;

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

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

    border-radius:
        var(--voerp-radius);

    box-shadow:
        0 10px 28px
        rgba(12,32,55,.11);

    backdrop-filter:
        blur(10px);
}

.voerp-trade-summary-total {
    display: flex;
    justify-content: space-between;

    gap: 1rem;

    padding-top: .6rem;

    margin-top: .55rem;

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

    color:
        var(--voerp-navy-900);

    font-size:
        1.1rem;

    font-weight:
        760;
}


/* ------------------------------------------------------------
   FORM UX
   ------------------------------------------------------------ */

.voerp-required::after {
    content: " *";

    color:
        var(--voerp-red-600);
}

.voerp-help {
    display: flex;
    align-items: flex-start;

    gap: .35rem;

    margin-top: .3rem;

    color:
        var(--voerp-muted);

    font-size:
        .73rem;
}

.voerp-help i {
    margin-top: .1rem;

    color:
        var(--voerp-primary-500);
}


/* ------------------------------------------------------------
   BUTTON PRIORITY
   ------------------------------------------------------------ */

.voerp-primary-action {
    min-width:
        120px;
}

.voerp-destructive-action {
    margin-left:
        auto;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 1199.98px) {

    .voerp-stock-summary,
    .voerp-trade-header {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}


@media (max-width: 767.98px) {

    .voerp-stock-summary,
    .voerp-trade-header {
        grid-template-columns:
            1fr;
    }

    .voerp-stock-stat {
        min-height:
            72px;
    }

    .voerp-trade-lines,
    .voerp-return-lines {
        padding:
            .8rem;
    }

    .voerp-line-row {
        padding:
            .7rem;
    }

    .voerp-trade-summary {
        position:
            static;
    }

    .voerp-trade-summary-card {
        width:
            100%;

        min-width:
            0;
    }
}


/* Küçük mobilde tablo yoğunluğunu azalt */

@media (max-width: 575.98px) {

    [data-panel="container-balance"] table {
        min-width:
            640px;
    }

    .voerp-stock-summary {
        gap:
            .65rem;
    }
}


/* ============================================================
   FORM MICRO UX
   ============================================================ */

.voerp-number-input {
    font-variant-numeric:
        tabular-nums;

    text-align:
        right;
}

.voerp-delete-control {
    color:
        var(--voerp-red-600);
}

.voerp-delete-control .form-check-label {
    color:
        var(--voerp-red-600);
}


/* Tablo içinde aksiyon sütunu */

.table td:last-child .btn {
    white-space:
        nowrap;
}


/* Mobil yatay tablo kaydırma ipucu */

@media (max-width: 767.98px) {

    .table-responsive {
        position:
            relative;
    }

    .table-responsive::before {
        content:
            "← tabloyu kaydır →";

        display:
            block;

        padding:
            .35rem
            .6rem;

        color:
            var(--voerp-muted);

        background:
            #f8fafc;

        border-bottom:
            1px solid
            #edf1f5;

        font-size:
            .67rem;

        text-align:
            right;
    }
}


/* ============================================================
   VOERP V5.1 — WORKSCREEN FINAL POLISH
   ============================================================ */


/* ------------------------------------------------------------
   TRADE FORM
   ------------------------------------------------------------ */

.voerp-page-trade .card {
    box-shadow:
        0 2px 8px rgba(16,24,40,.045);
}

.voerp-page-trade .card-header {
    min-height: 48px;

    display: flex;
    align-items: center;

    padding:
        .8rem
        1rem;
}

.voerp-page-trade .card-header,
.voerp-page-trade .card-header strong {
    color:
        var(--voerp-navy-900);

    font-weight: 720;
}


/* Masaüstünde satış formunu biraz sıkıştır */

@media (min-width: 1200px) {

    .voerp-page-trade .form-control,
    .voerp-page-trade .form-select {
        min-height: 40px;
    }

    .voerp-page-trade textarea.form-control {
        min-height: 82px;
    }

    .voerp-page-trade form .row {
        --bs-gutter-y: .8rem;
    }
}


/* Ürün satırını belge bilgilerinden görsel olarak ayır */

.voerp-page-trade .card + .card {
    margin-top: 1rem;
}


/* Satır türü / ürün / birim / stok durumu */
.voerp-page-trade select {
    font-weight: 540;
}


/* Satışın temel miktar alanı */
.voerp-page-trade input[type="number"] {
    font-variant-numeric:
        tabular-nums;
}


/* ------------------------------------------------------------
   STOCK
   ------------------------------------------------------------ */

.voerp-page-stock .table td {
    font-variant-numeric:
        tabular-nums;
}

.voerp-page-stock .table td.fw-semibold,
.voerp-page-stock .table strong {
    color:
        var(--voerp-navy-900);
}


/* DOLU */

.voerp-page-stock .badge.text-bg-success {
    color:
        #087443 !important;

    background:
        #e6f8ed !important;

    border-color:
        #b9e8cc !important;
}


/* BOŞ */

.voerp-page-stock .badge.text-bg-info {
    color:
        #08758b !important;

    background:
        #e5f9fc !important;

    border-color:
        #b5e8f0 !important;
}


/* Fiziksel toplam */
.voerp-page-stock table td.text-end {
    font-variant-numeric:
        tabular-nums;
}


/* ------------------------------------------------------------
   ACCOUNT DETAIL
   ------------------------------------------------------------ */

.voerp-page-account-detail
main .row > .col-lg-8 {
    min-width: 0;
}

.voerp-page-account-detail
main .row > .col-lg-4 {
    min-width: 0;
}


/* Sağ taraftaki yardımcı kartlar */

.voerp-page-account-detail
.col-lg-4 > .card {
    position: relative;
}

@media (min-width: 992px) {

    .voerp-page-account-detail
    .col-lg-4 {
        align-self: flex-start;
    }
}


/* Finansal durum KPI'ları */

.voerp-page-account-detail
.card .row.g-3 .border.rounded {
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbff
        );
}


/* Finansal rakamlar */

.voerp-page-account-detail
.card .fs-5.fw-semibold {
    font-variant-numeric:
        tabular-nums;

    letter-spacing:
        -.02em;
}


/* Limit aşımı daha net */

.voerp-page-account-detail
.badge.text-bg-danger {
    font-weight: 720;
}


/* ------------------------------------------------------------
   TABLE COLUMN LEGIBILITY
   ------------------------------------------------------------ */

.table thead th {
    position: relative;
}

.table tbody td {
    line-height: 1.35;
}


/* Sayısal sütunlarda rakamlar hizalı */

.table .text-end {
    font-variant-numeric:
        tabular-nums;
}


/* ------------------------------------------------------------
   DESKTOP SPACING
   ------------------------------------------------------------ */

@media (min-width: 1400px) {

    main {
        padding:
            1.45rem !important;
    }

    .card.card-body {
        padding:
            1.1rem;
    }
}


/* ------------------------------------------------------------
   LAPTOP
   ------------------------------------------------------------ */

@media (
    min-width: 992px
) and (
    max-width: 1399.98px
) {

    main {
        padding:
            1.1rem !important;
    }

    .card.card-body {
        padding:
            1rem;
    }
}


/* ------------------------------------------------------------
   MOBILE WORKSCREENS
   ------------------------------------------------------------ */

@media (max-width: 767.98px) {

    .voerp-page-trade .card-header,
    .voerp-page-account-detail .card-header {
        min-height: 44px;
    }

    .voerp-page-account-detail
    .row.g-3 > [class*="col-md-"] {
        width: 100%;
    }

    .voerp-page-stock
    .table-responsive,
    .voerp-page-trade
    .table-responsive,
    .voerp-page-account-detail
    .table-responsive {
        box-shadow:
            inset -12px 0 18px -18px rgba(12,32,55,.25);
    }
}


/* ============================================================
   TOPBAR FINAL
   ============================================================ */

main > .d-flex.justify-content-between.mb-4 {
    position: relative;

    min-height: 56px;

    border-bottom:
        1px solid
        rgba(208,216,228,.82);

    box-shadow:
        0 1px 0 rgba(255,255,255,.75);
}


/* Firma değiştir */

main > .d-flex.justify-content-between.mb-4
.dropdown-toggle {
    min-height: 36px;

    border-radius: 9px;

    font-weight: 620;
}


/* Owner badge */

main > .d-flex.justify-content-between.mb-4
.badge.text-bg-secondary {
    color:
        #526176 !important;

    background:
        #f1f4f8 !important;

    border-color:
        #d7dee8 !important;
}


/* Çıkış, birincil aksiyon gibi görünmesin */

main > .d-flex.justify-content-between.mb-4
.btn-outline-danger {
    min-height: 36px;

    padding:
        .38rem
        .72rem;

    font-size:
        .78rem;
}


/* ============================================================
   TRADE UX V6
   ============================================================ */

.trade-line-row {
    position: relative;

    transition:
        border-color var(--voerp-transition),
        background-color var(--voerp-transition),
        opacity var(--voerp-transition);
}


/* DOLU */

.trade-line-row.voerp-condition-full {
    border-left:
        4px solid
        var(--voerp-green-600) !important;

    background:
        linear-gradient(
            90deg,
            rgba(231,248,238,.55),
            #fff 16%
        ) !important;
}


/* BOŞ */

.trade-line-row.voerp-condition-empty {
    border-left:
        4px solid
        var(--voerp-teal-600) !important;

    background:
        linear-gradient(
            90deg,
            rgba(223,248,244,.62),
            #fff 16%
        ) !important;
}


/* İADE */

.trade-line-row.voerp-condition-return {
    border-left:
        4px solid
        var(--voerp-amber-600) !important;
}


/* Stok tipi etiketi */

.voerp-stock-hint {
    display: inline-flex;
    align-items: center;

    gap: .3rem;

    padding:
        .28rem
        .5rem;

    border-radius:
        999px;

    font-size:
        .7rem;

    font-weight:
        650;
}

.voerp-stock-hint.tracked {
    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);
}

.voerp-stock-hint.service {
    color:
        #475467;

    background:
        #f2f4f7;
}


/* Otomatik fiyat geldiğinde kısa vurgulama */

.voerp-auto-filled {
    animation:
        voerpAutoFill
        .7s ease;
}

@keyframes voerpAutoFill {

    0%,
    100% {
        box-shadow:
            0 0 0 0
            rgba(15,150,138,0);
    }

    40% {
        border-color:
            var(--voerp-teal-600);

        box-shadow:
            0 0 0 4px
            rgba(15,150,138,.12);
    }
}


/* Satır sonucu */

.voerp-line-result {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: .7rem;

    margin-top:
        .55rem;

    padding-top:
        .55rem;

    border-top:
        1px dashed
        #dce4ee;

    color:
        var(--voerp-muted);

    font-size:
        .75rem;
}

.voerp-line-result strong {
    color:
        var(--voerp-navy-900);

    font-size:
        .92rem;

    font-variant-numeric:
        tabular-nums;
}


/* Silinen formset satırı */

.voerp-line-deleted {
    opacity: .42;

    background:
        #f8f8f8 !important;
}

.voerp-line-deleted::after {
    content:
        "Silinecek";

    position:
        absolute;

    top: .55rem;
    right: .65rem;

    padding:
        .2rem
        .45rem;

    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);

    border-radius:
        999px;

    font-size:
        .65rem;

    font-weight:
        700;
}


/* ============================================================
   LIVE TRADE SUMMARY
   ============================================================ */

.voerp-live-summary {
    position: sticky;

    bottom: 12px;

    z-index: 25;

    margin-top: 1rem;

    padding:
        .9rem
        1rem;

    border:
        1px solid
        #cdd9e7;

    border-radius:
        var(--voerp-radius-lg);

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

    box-shadow:
        0 14px 36px
        rgba(12,32,55,.13);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.voerp-live-summary-head {
    margin-bottom:
        .7rem;
}


.voerp-live-summary-title {
    display: flex;
    align-items: center;

    gap: .4rem;

    color:
        var(--voerp-navy-900);

    font-weight:
        740;
}


.voerp-live-summary-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0,1fr));

    gap:
        .7rem;
}


.voerp-live-summary-grid > div {
    min-width: 0;

    padding:
        .55rem
        .7rem;

    border-radius:
        9px;

    background:
        #f8fafc;
}


.voerp-live-summary-grid span {
    display: block;

    color:
        var(--voerp-muted);

    font-size:
        .68rem;
}


.voerp-live-summary-grid strong {
    display: block;

    margin-top:
        .15rem;

    color:
        var(--voerp-navy-900);

    font-size:
        .92rem;

    font-variant-numeric:
        tabular-nums;
}


.voerp-live-summary-total {
    background:
        var(--voerp-primary-100) !important;
}


.voerp-live-summary-total strong {
    color:
        var(--voerp-primary-800);

    font-size:
        1.08rem;
}


@media (max-width: 991.98px) {

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

    .voerp-live-summary-total {
        grid-column:
            span 2;
    }
}


@media (max-width: 575.98px) {

    .voerp-live-summary {
        position: static;
    }

    .voerp-live-summary-grid {
        grid-template-columns: 1fr;
    }

    .voerp-live-summary-total {
        grid-column: auto;
    }
}


/* ============================================================
   LIVE STOCK AVAILABILITY
   ============================================================ */

.voerp-stock-availability {
    margin:
        .45rem
        0
        .7rem;

    border-radius:
        10px;

    transition:
        background-color
        var(--voerp-transition),
        border-color
        var(--voerp-transition);
}


.voerp-stock-availability:empty {
    display: none;
}


.voerp-stock-availability.loading,
.voerp-stock-availability.neutral {
    display: flex;
    align-items: center;

    gap: .45rem;

    padding:
        .48rem
        .65rem;

    color:
        var(--voerp-muted);

    background:
        #f7f9fc;

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

    font-size:
        .72rem;
}


.voerp-stock-availability-values {
    display: grid;

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

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

    border-radius:
        10px 10px 0 0;

    overflow: hidden;
}


.voerp-stock-availability-values > span {
    padding:
        .48rem
        .6rem;

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


.voerp-stock-availability-values > span +
span {
    border-left:
        1px solid
        var(--voerp-border);
}


.voerp-stock-availability-values small {
    display: block;

    color:
        var(--voerp-muted);

    font-size:
        .64rem;
}


.voerp-stock-availability-values strong {
    display: block;

    margin-top:
        .1rem;

    color:
        var(--voerp-navy-900);

    font-size:
        .78rem;

    font-variant-numeric:
        tabular-nums;
}


.voerp-stock-availability-status {
    display: flex;
    align-items: center;

    gap: .4rem;

    padding:
        .46rem
        .6rem;

    border:
        1px solid;

    border-top: 0;

    border-radius:
        0 0 10px 10px;

    font-size:
        .72rem;
}


/* Yeterli */

.voerp-stock-availability.sufficient
.voerp-stock-availability-status {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);

    border-color:
        #b7e8ca;
}


/* Eksik */

.voerp-stock-availability.insufficient
.voerp-stock-availability-status {
    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);

    border-color:
        #f2beb9;
}


/* Negatif stok izinli */

.voerp-stock-availability.warning
.voerp-stock-availability-status {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);

    border-color:
        #eed09c;
}


/* Miktar girilmemiş */

.voerp-stock-availability.neutral
.voerp-stock-availability-status {
    color:
        var(--voerp-muted);

    background:
        #f7f9fc;

    border-color:
        var(--voerp-border);
}


@media (max-width: 575.98px) {

    .voerp-stock-availability-values {
        grid-template-columns:
            1fr;
    }

    .voerp-stock-availability-values
    > span + span {
        border-left: 0;

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


/* ============================================================
   VOERP LIVE STOCK AVAILABILITY
   ============================================================ */

.voerp-stock-availability {
    margin:
        .45rem
        0
        .65rem;

    border-radius:
        10px;

    overflow: hidden;
}

.voerp-stock-availability:empty {
    display: none;
}


/* Basit mesaj */

.voerp-stock-message {
    display: flex;
    align-items: center;

    gap: .42rem;

    padding:
        .48rem
        .62rem;

    font-size:
        .72rem;
}

.voerp-stock-availability.neutral
.voerp-stock-message,
.voerp-stock-availability.loading
.voerp-stock-message {
    color:
        var(--voerp-muted);

    background:
        #f7f9fc;

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

    border-radius:
        9px;
}

.voerp-stock-availability.warning
.voerp-stock-message {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);

    border:
        1px solid
        #efd198;

    border-radius:
        9px;
}


/* Mevcut / İstenen / Kalan */

.voerp-stock-availability-values {
    display: grid;

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

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

    border-radius:
        10px 10px 0 0;

    overflow: hidden;
}

.voerp-stock-availability-values > div {
    min-width: 0;

    padding:
        .46rem
        .58rem;

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

.voerp-stock-availability-values > div + div {
    border-left:
        1px solid
        var(--voerp-border);
}

.voerp-stock-availability-values small {
    display: block;

    color:
        var(--voerp-muted);

    font-size:
        .64rem;
}

.voerp-stock-availability-values strong {
    display: block;

    margin-top:
        .08rem;

    color:
        var(--voerp-navy-900);

    font-size:
        .8rem;

    font-weight:
        720;

    font-variant-numeric:
        tabular-nums;
}


/* Sonuç */

.voerp-stock-availability-status {
    display: flex;
    align-items: center;

    gap: .4rem;

    padding:
        .45rem
        .58rem;

    border:
        1px solid;

    border-top: 0;

    border-radius:
        0 0 10px 10px;

    font-size:
        .72rem;
}


/* Yeterli */

.voerp-stock-availability.sufficient
.voerp-stock-availability-status {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);

    border-color:
        #b7e7c9;
}


/* Yetersiz */

.voerp-stock-availability.insufficient
.voerp-stock-availability-status {
    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);

    border-color:
        #efbeb9;
}


/* Negatif stok izinli */

.voerp-stock-availability.warning
.voerp-stock-availability-status {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);

    border-color:
        #efd198;
}


/* Henüz miktar yok */

.voerp-stock-availability.neutral
.voerp-stock-availability-status {
    color:
        var(--voerp-muted);

    background:
        #f7f9fc;

    border-color:
        var(--voerp-border);
}


/* DOLU satırındaki stok kutusu */

.trade-line-row.voerp-condition-full
.voerp-stock-availability-values {
    border-color:
        #cce7d6;
}


/* BOŞ satırındaki stok kutusu */

.trade-line-row.voerp-condition-empty
.voerp-stock-availability-values {
    border-color:
        #bfe5e1;
}


@media (max-width: 575.98px) {

    .voerp-stock-availability-values {
        grid-template-columns: 1fr;
    }

    .voerp-stock-availability-values > div + div {
        border-left: 0;

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


/* ============================================================
   CUSTOMER CONSIGNMENT PREVIEW
   ============================================================ */

.voerp-consignment-preview {
    margin-top: 1rem;

    border:
        1px solid
        #cfe2df;

    border-radius:
        var(--voerp-radius-lg);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f4fbfa
        );

    overflow: hidden;

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


.voerp-consignment-header {
    display: flex;
    align-items: center;

    gap: .7rem;

    padding:
        .85rem
        1rem;

    border-bottom:
        1px solid
        #dcece9;
}


.voerp-consignment-icon {
    width: 40px;
    height: 40px;

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

    flex:
        0 0 40px;

    border-radius:
        10px;

    color:
        var(--voerp-teal-700);

    background:
        var(--voerp-teal-100);

    font-size:
        1rem;
}


.voerp-consignment-title {
    color:
        var(--voerp-navy-900);

    font-size:
        .92rem;

    font-weight:
        740;
}


.voerp-consignment-content {
    padding:
        .55rem;
}


.voerp-consignment-empty {
    min-height: 75px;

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

    gap: .5rem;

    color:
        var(--voerp-muted);

    font-size:
        .76rem;
}


.voerp-consignment-empty.error {
    color:
        var(--voerp-red-700);
}


.voerp-consignment-row {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(190px, 1.15fr)
        minmax(380px, 2fr)
        auto;

    align-items: center;

    gap: .8rem;

    padding:
        .7rem
        .8rem;

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

    border-radius:
        10px;

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


.voerp-consignment-row +
.voerp-consignment-row {
    margin-top:
        .45rem;
}


.voerp-consignment-row.increase {
    border-left:
        4px solid
        var(--voerp-amber-600);
}


.voerp-consignment-row.decrease {
    border-left:
        4px solid
        var(--voerp-green-600);
}


.voerp-consignment-product {
    min-width: 0;
}


.voerp-consignment-product-code {
    margin-bottom:
        .1rem;

    color:
        var(--voerp-muted);

    font-size:
        .67rem;

    font-weight:
        650;
}


.voerp-consignment-product strong {
    display: block;

    overflow: hidden;

    color:
        var(--voerp-navy-900);

    font-size:
        .78rem;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.voerp-consignment-numbers {
    display: grid;

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

    gap: .35rem;
}


.voerp-consignment-numbers > div {
    min-width: 0;

    padding:
        .4rem
        .5rem;

    border-radius:
        8px;

    background:
        #f8fafc;
}


.voerp-consignment-numbers span {
    display: block;

    color:
        var(--voerp-muted);

    font-size:
        .62rem;
}


.voerp-consignment-numbers strong {
    display: block;

    margin-top:
        .08rem;

    color:
        var(--voerp-navy-900);

    font-size:
        .78rem;

    font-variant-numeric:
        tabular-nums;
}


.voerp-consignment-numbers .after {
    background:
        var(--voerp-teal-100);
}


.voerp-consignment-numbers
.after strong {
    color:
        var(--voerp-teal-700);

    font-size:
        .88rem;
}


.voerp-consignment-state {
    padding:
        .28rem
        .48rem;

    border-radius:
        999px;

    color:
        var(--voerp-muted);

    background:
        #f2f4f7;

    font-size:
        .65rem;

    font-weight:
        700;

    white-space: nowrap;
}


.voerp-consignment-row.increase
.voerp-consignment-state {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}


.voerp-consignment-row.decrease
.voerp-consignment-state {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}


@media (max-width: 991.98px) {

    .voerp-consignment-row {
        grid-template-columns: 1fr;
    }

    .voerp-consignment-state {
        justify-self:
            start;
    }
}


@media (max-width: 575.98px) {

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


/* ============================================================
   SALES OPERATION V2
   CONSIGNMENT SUMMARY
   ============================================================ */

.voerp-consignment-transaction-summary {
    padding:
        .7rem
        .8rem
        0;
}


/* Üst başlık */

.voerp-operation-summary-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .7rem;

    margin-bottom:
        .55rem;

    padding:
        .55rem
        .65rem;

    border:
        1px solid
        #dce7e5;

    border-radius:
        9px;

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


.voerp-operation-summary-heading > div:first-child {
    display: flex;
    align-items: center;

    gap: .4rem;

    color:
        var(--voerp-navy-900);

    font-size:
        .76rem;
}


.voerp-operation-summary-heading
> div:first-child i {
    color:
        var(--voerp-teal-700);
}


/* Sayaçlar */

.voerp-operation-summary-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .3rem;
}


.voerp-operation-chip {
    display: inline-flex;
    align-items: center;

    min-height: 24px;

    padding:
        .18rem
        .45rem;

    border-radius:
        999px;

    font-size:
        .62rem;

    font-weight:
        700;
}


.voerp-operation-chip.increase {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}


.voerp-operation-chip.decrease {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}


.voerp-operation-chip.exchange {
    color:
        var(--voerp-teal-700);

    background:
        var(--voerp-teal-100);
}


.voerp-operation-chip.danger {
    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);
}


/* Ürün kartları */

.voerp-operation-summary-cards {
    display: grid;

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

    gap: .5rem;
}


.voerp-operation-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: .75rem;

    min-width: 0;

    padding:
        .7rem
        .75rem;

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

    border-left:
        4px solid
        var(--voerp-subtle);

    border-radius:
        10px;

    background: #fff;
}


.voerp-operation-summary-card.increase {
    border-left-color:
        var(--voerp-amber-600);
}


.voerp-operation-summary-card.decrease {
    border-left-color:
        var(--voerp-green-600);
}


.voerp-operation-summary-card.exchange {
    border-left-color:
        var(--voerp-teal-600);
}


.voerp-operation-summary-card.danger {
    border-left-color:
        var(--voerp-red-600);

    background:
        linear-gradient(
            135deg,
            #fff,
            #fff7f6
        );
}


/* Sol bilgi */

.voerp-operation-summary-main {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: .6rem;
}


.voerp-operation-summary-icon {
    width: 34px;
    height: 34px;

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

    flex:
        0 0 34px;

    border-radius:
        9px;

    color:
        var(--voerp-teal-700);

    background:
        var(--voerp-teal-100);
}


.voerp-operation-summary-card.increase
.voerp-operation-summary-icon {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}


.voerp-operation-summary-card.decrease
.voerp-operation-summary-icon {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}


.voerp-operation-summary-card.danger
.voerp-operation-summary-icon {
    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);
}


.voerp-operation-summary-copy {
    min-width: 0;
}


.voerp-operation-summary-product {
    margin-bottom:
        .08rem;

    overflow: hidden;

    color:
        var(--voerp-muted);

    font-size:
        .62rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


.voerp-operation-summary-copy strong {
    display: block;

    color:
        var(--voerp-navy-900);

    font-size:
        .75rem;
}


.voerp-operation-summary-copy > span {
    display: block;

    margin-top:
        .08rem;

    color:
        var(--voerp-muted);

    font-size:
        .65rem;
}


/* Net değişim */

.voerp-operation-summary-net {
    flex:
        0 0 auto;

    min-width:
        92px;

    padding-left:
        .7rem;

    border-left:
        1px solid
        var(--voerp-border);

    text-align:
        right;
}


.voerp-operation-summary-net span {
    display: block;

    color:
        var(--voerp-muted);

    font-size:
        .6rem;
}


.voerp-operation-summary-net strong {
    display: block;

    margin-top:
        .08rem;

    color:
        var(--voerp-navy-900);

    font-size:
        .9rem;

    font-variant-numeric:
        tabular-nums;
}


.voerp-operation-summary-card.increase
.voerp-operation-summary-net strong {
    color:
        var(--voerp-amber-700);
}


.voerp-operation-summary-card.decrease
.voerp-operation-summary-net strong {
    color:
        var(--voerp-green-700);
}


.voerp-operation-summary-card.exchange
.voerp-operation-summary-net strong {
    color:
        var(--voerp-teal-700);
}


.voerp-operation-summary-card.danger
.voerp-operation-summary-net strong {
    color:
        var(--voerp-red-700);
}


/* Responsive */

@media (max-width: 1199.98px) {

    .voerp-operation-summary-cards {
        grid-template-columns:
            1fr;
    }
}


@media (max-width: 767.98px) {

    .voerp-operation-summary-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .voerp-operation-summary-card {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .voerp-operation-summary-net {
        width:
            100%;

        padding:
            .5rem
            0
            0;

        border-left:
            0;

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

        text-align:
            left;
    }
}


/* ============================================================
   OPERATION READINESS PANEL
   ============================================================ */

.voerp-readiness-panel {
    margin-top:
        1rem;

    border:
        1px solid
        #d7e1ec;

    border-radius:
        var(--voerp-radius-lg);

    background:
        #fff;

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

    overflow:
        hidden;
}


.voerp-readiness-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        .85rem
        1rem;

    border-bottom:
        1px solid
        var(--voerp-border);

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7fafe
        );
}


.voerp-readiness-heading {
    display:
        flex;

    align-items:
        center;

    gap:
        .65rem;
}


.voerp-readiness-icon {
    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 40px;

    border-radius:
        10px;

    color:
        var(--voerp-primary-700);

    background:
        var(--voerp-primary-100);
}


.voerp-readiness-title {
    color:
        var(--voerp-navy-900);

    font-size:
        .9rem;

    font-weight:
        750;
}


/* Genel durum */

.voerp-readiness-overall {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        .4rem;

    min-height:
        34px;

    padding:
        .35rem
        .6rem;

    border-radius:
        999px;

    font-size:
        .7rem;

    white-space:
        nowrap;
}


.voerp-readiness-overall.neutral {
    color:
        var(--voerp-muted);

    background:
        #f2f4f7;
}


.voerp-readiness-overall.success {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}


.voerp-readiness-overall.warning {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}


.voerp-readiness-overall.danger {
    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);
}


/* 4 kontrol kartı */

.voerp-readiness-grid {
    display:
        grid;

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

    gap:
        .65rem;

    padding:
        .75rem;
}


.voerp-readiness-item {
    min-width:
        0;

    display:
        flex;

    align-items:
        flex-start;

    gap:
        .55rem;

    padding:
        .65rem;

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

    border-radius:
        10px;

    background:
        #fafbfd;

    transition:
        border-color
        var(--voerp-transition),
        background-color
        var(--voerp-transition);
}


.voerp-readiness-item-icon {
    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 30px;

    border-radius:
        8px;

    color:
        var(--voerp-muted);

    background:
        #eef2f6;
}


.voerp-readiness-item span {
    display:
        block;

    color:
        var(--voerp-muted);

    font-size:
        .63rem;
}


.voerp-readiness-item strong {
    display:
        block;

    margin-top:
        .08rem;

    color:
        var(--voerp-navy-900);

    font-size:
        .76rem;
}


.voerp-readiness-item small {
    display:
        block;

    margin-top:
        .12rem;

    color:
        var(--voerp-muted);

    font-size:
        .61rem;

    line-height:
        1.35;
}


/* Success */

.voerp-readiness-item.success {
    border-color:
        #c7e9d3;

    background:
        #f5fcf7;
}


.voerp-readiness-item.success
.voerp-readiness-item-icon {
    color:
        var(--voerp-green-700);

    background:
        var(--voerp-green-100);
}


/* Warning */

.voerp-readiness-item.warning {
    border-color:
        #efd49e;

    background:
        #fffbf3;
}


.voerp-readiness-item.warning
.voerp-readiness-item-icon {
    color:
        var(--voerp-amber-700);

    background:
        var(--voerp-amber-100);
}


/* Danger */

.voerp-readiness-item.danger {
    border-color:
        #efc3be;

    background:
        #fff7f6;
}


.voerp-readiness-item.danger
.voerp-readiness-item-icon {
    color:
        var(--voerp-red-700);

    background:
        var(--voerp-red-100);
}


/* Tablet */

@media (max-width: 1199.98px) {

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


/* Mobil */

@media (max-width: 767.98px) {

    .voerp-readiness-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .voerp-readiness-grid {
        grid-template-columns:
            1fr;
    }
}