body {
    background: #f4f4ff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1f1235;
}

/* Navbar (authenticated pages) */
.navbar-main {
    padding-top: .85rem;
    padding-bottom: .85rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(229, 223, 255, 0.8);
}

.navbar-brand-dot {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background: linear-gradient(135deg, #ff9a5a, #ff5ce8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: .55rem;
}

.navbar-brand-dot i {
    font-size: .9rem;
    color: #fff;
}

.navbar-brand-text {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: .02em;
}

.navbar-nav .nav-link {
    font-size: .85rem;
    color: #6b5da8 !important;
}

.navbar-nav .nav-link:hover {
    color: #4b36c3 !important;
}

.nav-account .nav-link {
    font-weight: 500;
}

.nav-account .btn-logout {
    border-radius: 999px;
    padding: .25rem .9rem;
    font-size: .8rem;
    border: 1px solid rgba(107, 68, 255, 0.45);
    color: #6b44ff;
    background: #fff;
}

.nav-account .btn-logout:hover {
    background: #f3ecff;
}

/* Shared hero wrapper for main pages */
.hero-wrapper {
    padding: 40px 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
    padding-bottom: 90px;
    margin-bottom: -90px;
}

.purple-warning {
    background: #f4f4ff;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e7e7ef;
}

.hero-wrapper::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    top: -80px;
    right: -40px;
    opacity: .7;
    pointer-events: none;
}

.hero-title {
    font-weight: 700;
    font-size: clamp(1.8rem, 2.5vw + 1rem, 2.6rem);
    line-height: 1.25;
    margin-bottom: .75rem;
}

.hero-subtitle {
    font-size: .98rem;
    opacity: .93;
}

.hero-divider,
.hero-divider-white {
    width: 100%;
    height: 1px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.5);
    margin: 20px 0 0 0;
}

/* Core cards / components */
.card-soft {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(24, 8, 94, 0.14);
    border: none;
}

.badge-pill {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: .75rem;
    padding: .3rem .7rem;
    margin-right: .35rem;
}

/* Buttons */
.btn-gradient-primary {
    border-radius: 999px;
    border: none;
    line-height: 36px;
    padding-inline: 1.9rem;
    font-weight: 600;
    background: linear-gradient(90deg, #8438FF, #9994FF);
    box-shadow: 0 8px 20px rgba(67, 38, 162, 0.55);
    color: #fff;
}

.btn-gradient-primary:hover {
    filter: brightness(1.05);
    color: #fff;
}

.btn-primary-soft {
    background: #fff;
    color: #6c45ff;
    line-height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(108, 69, 255, 0.35);
    font-weight: 500;
    padding-inline: 1.5rem;
}

.btn-primary-soft:hover {
    background: #f5f0ff;
    color: #5b35f3;
}

.btn-secondary-soft {
    border-radius: 999px;
    background: #f0ebff;
    line-height: 36px;
    border: none;
    padding: .55rem 1.6rem;
    font-weight: 500;
    color: #4b36c3;
}

.btn-secondary-soft:hover {
    border-radius: 999px;
    background: #d8d5de;
    border: none;
    padding: .55rem 1.6rem;
    font-weight: 500;
    color: #4b36c3;
}

/* Upload dropzone */
.upload-dropzone {
    border-radius: 16px;
    border: 2px dashed #d0c5ff;
    background: #faf7ff;
    padding: 32px 20px;
    text-align: center;
}

.upload-dropzone.dragover {
    background: #f0e7ff;
    border-color: #b49cff;
}

/* Tags / badges in tables */
.tag-badge {
    border-radius: 999px;
    padding: .16rem .6rem;
    font-size: .75rem;
    font-weight: 500;
}

.tag-status-ready {
    background: rgba(107, 68, 255, 0.08);
    color: #6b44ff;
}

.tag-status-approved {
    background: rgba(42, 199, 120, 0.08);
    color: #1a9c60;
}

.tag-status-pending {
    background: rgba(255, 193, 7, 0.08);
    color: #c18600;
}

.pdf-btn {
    border-radius: 999px;
    padding: .2rem .7rem;
    background: rgba(120, 120, 255, 0.12);
    border: none;
    color: #5a3dff;
    font-size: .8rem;
    font-weight: 600;
}

/* Forms */
.form-control, .form-select, textarea.form-control {
    border-radius: 10px;
}

/* Auth pages */
.auth-page body, body.auth-page {
    background: #f4f4ff;
}

.auth-hero {
    color: white;
    padding: 40px 32px;
    text-align: center;
}

.auth-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(36, 11, 103, 0.16);
    padding: 28px 28px;
    max-width: 480px;
    margin: 24px auto 40px;
}

.auth-link {
    font-size: .85rem;
    color: #6b44ff;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.small-muted {
    font-size: .82rem;
    color: #958cae;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
    .hero-wrapper {
        padding: 28px 22px;
    }

    .hero-wrapper::before {
        width: 260px;
        height: 260px;
        right: -80px;
        top: -120px;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand-text {
        font-size: 1rem;
    }
}


/*# sourceMappingURL=style.css.map */
.select-container {
    position: relative;
    min-width: 70px;
}

.select-container:after {
    content: "";
    position: absolute;
    top: 52%;
    right: 12px;
    width: 18px;
    height: 18px;
    opacity: 0.8;
    pointer-events: none;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat center;
    transform: translateY(-50%);
}

.hide {
    display: none;
}

.form-control.input-error {
    border-color: #f72b50;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23f72b50'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23f72b50' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.input-error:focus {
    border-color: #f72b50;
    box-shadow: 0 0 0 0.25rem rgba(247, 43, 80, 0.25);
}

.select-container .form-control.input-error {
    background-position: right calc(1.975em + 0.1875rem) center;
}

.error-text {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #f72b50;
}

table.dataTable tbody td.dataTables_empty {
    padding: 30px;
}

.dlabnav .metismenu > li {

    margin-top: 5px;
}

.header-info small {
    overflow-y: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    white-space: nowrap;
    display: inline-block;
}

.select2-container .select2-selection--single,
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #969ba0;
    background-color: #f6f6f6;
    background-clip: padding-box;
    border: 1px solid #e6e6e6;
    appearance: none;
    border-radius: 0.75rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


@media only screen and (max-width: 767px) {
    .nav-control {
        right: unset;
    }

    [data-sidebar-position="fixed"][data-layout="vertical"] .nav-header {
        position: absolute;
    }

    .nav-header .brand-logo {
        position: absolute;
        left: 1%;
    }

    .nav-header .brand-logo img {
        max-width: 250px;
        margin-top: 10px;
    }

    .nav-header {
        width: 100%;
    }

    .hamburger .line {
        background: #fff !important;
    }

}


.delete-row-btn {
    display: inline-block;
}

.count-1 .delete-row-btn {
    display: none;
}

#merchantContainer > .row:last-child .add-row-btn {
    display: inline-block;
}

#merchantContainesr > .row:first-child .add-row-btn {
    display: inline-block;
}

#merchantContainer > .row {
    margin-bottom: 10px;
}

.row.justify-content-end.form-actions-div {
    padding: 10px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.text-right {
    text-align: right;
}

.input-group-text .select-container .form-control {
    paddding: 0px;
    border: none;
    background: transparent;
    height: 2.1rem;
}

.card-footer.form-actions-divs {
    backgrosund: #ddd;
}

.input-group-text
.select-container:after {
    right: 4px;
}

.btn-whatsapp {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.btn-dribbble {
    background: #ea4c89;
    border-color: #ea4c89;
    color: #fff;
}

/* --- WIZARD LAYOUT --- */
.wizard-wrapper {
    display: flex;
}

.wizard-steps {
    padding-left: 20px;
    padding-top: 40px;
    /*border-right: 2px solid #eee;border-left: 2px solid #eee;*/
}

.wizard-step {
    padding: 14px 10px;
    margin-bottom: 5px;
    cursor: pointer;
    font-weight: 500;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    position: relative;
    transition: 0.2s;
}

.wizard-step {
    position: relative;
    height: 50px;
    background: #71707E;
    opacity: .8;
}

.wizard-step.active {
    background: #fff;
    color: #5b4bff;
    opacity: 1;
}

.wizard-step.completed .step-check {
    display: inline;
}

.wizard-step .step-index {
    color: #B7B8C0;
    font-weight: 700;
}

.wizard-step.active .step-index {
    color: #8148E0;
}

.wizard-step .step-check {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #38c172;
    display: none;
    font-weight: bold;
}

/* --- CONTENT AREA --- */
.wizard-content {
    flex: 1;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity .35s ease, transform .35s ease;
    display: none;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-right: 40px;
}

.wizard-content.active {
    display: block;
    opacity: 1;
    transform: translateX(0);  border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* --- BUTTONS --- */
.wizard-buttons {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .wizard-wrapper {
        flex-direction: column;
    }

    .wizard-steps {
        width: 100%;
    }

    .wizard-step .step-name {
        display: none;
    }
}

.authincation {
    text-align: center;
}

.login-form {
    border-radius: 20px;
    background: white;
    margin: 80px auto;
    width: 90%;
    max-width: 1000px;
    box-shadow: 0 12px 35px rgba(24, 8, 94, 0.14);
    text-align: left;
 

}

.wizard-bg img {
    border-radius: 20px;
    max-width: 100%;
    margin-top: 40px;
}

.wizard-bg {
    text-align: center;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    flex: 5;
    background-image: url(/assets/images/login-page-girl.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 600px;
    padding-right: 70px;
}

.login-form {
    background: linear-gradient(135deg, #6b44ff, #8c53ff, #4f7bff);
}

.wizard-steps {
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 364px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    flex: 1;
    min-height: 0;
}

.wizard-right {
    flex: 6;
    border-top-right-radius: 20px;
}

.wizard-rightc {
    display: flex;
    height: 100%;
    margin-left: -70px;
}

#wizardForm {
    flex: 11;
    padding-left: 30px;
    min-height: 0%;
    background: white;  border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.wizard-step .step-index {
    position: absolute;
    width: 24px;
    height: 24px;
    font-size: 25px;
    top: 4px;
    left: 16px;
}

.wizard-step .step-name {
font-size: 70%;
display: none;
}

.wizard-step.completed .step-check {
font-size: 70%;
display: none;
}

.wizard-step.completed {
    background: white;
opacity: 1
}

.wizard-step.completed .step-index {
    color: #8148E0;
}
.wizard-right-login{
background: #fff;
padding:40px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
flex:4;
padding-top: 120px;
}
/* ===============================
   DROPDOWN ROOT
================================ */
.dropdown {
    position: relative;
}

/* ===============================
   LOGO BUTTON (DEFAULT / CLOSED)
================================ */
.logo-dropdown {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 260px;
    background: #3d3a64;
    color: #fff;

    border: none;
    border-radius: 14px; /* kapalıyken tam yuvarlak */

    padding: 10px 14px;
    cursor: pointer;

    /* 🔴 border-radius animasyonu İSTEMİYORSUN → kaldır */
    transition: background .15s ease;
}

/* Hover/focus rengi bozmasın */
.logo-dropdown:hover,
.logo-dropdown:focus,
.logo-dropdown:focus-visible {
    background: #3d3a64;
    color: #fff;
    outline: none;
    box-shadow: none;
}

/* ===============================
   BOOTSTRAP BTN ACTIVE/SHOW OVERRIDE (SADECE BU BTN)
================================ */
.logo-dropdown.btn,
.logo-dropdown.btn:active,
.logo-dropdown.btn.active,
.logo-dropdown.btn.show,
.logo-dropdown[aria-expanded="true"] {
    background-color: #3d3a64 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ===============================
   OPEN STATE (WRAPPER SHOW ALMIYOR → BUTON ÜZERİNDEN YAKALA)
================================ */
.logo-dropdown.show,
.logo-dropdown[aria-expanded="true"] {
    /* 🔴 anında birleşsin */
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Eğer button üst radius da değişmesin istiyorsan dokunma.
   (İstersen burada 14px sabit kalır zaten) */

/* ===============================
   DROPDOWN MENU
================================ */
.logo-menu {
    width: 260px;
    background: #3d3a64;

    border: none;

    /* üst köşeler düz → butonla bitişik */
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;

    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;

    padding: 12px;

    margin: 0 !important;          /* 🔴 boşluk yok */
    box-shadow: none !important;   /* popup hissi yok */
}

/* Bootstrap override – kritik */
.logo-menu.dropdown-menu {
    position: absolute !important;
    top: 100% !important;          /* butonun dibine */
    left: 0 !important;
    right: auto !important;
    inset: unset !important;
    transform: none !important;

    /* Bootstrap bazen .dropdown-menu'da margin-top verir */
    margin-top: 0 !important;
}

/* ===============================
   MENU ITEM
================================ */
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;
    border-radius: 10px;

    color: #fff;
    text-decoration: none;
    font-size: 14px;

    transition: background .15s ease, color .15s ease;
}

.menu-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
}

.menu-item.active {
    background: #ff5467;
    color: #fff;
}

/* Menu icon styling */
.menu-icon {
    left: 15px;
    height: 20px;
}

/* Submenu arrow rotation */
.menu-item .submenu-arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.menu-item[aria-expanded="true"] .submenu-arrow {
    transform: rotate(180deg);
}

/* Submenu item styling */
.submenu-item {
    padding-left: 42px !important;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.1);
}

.submenu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.submenu-item.active {
    background: #ff5467;
}

/* Submenu collapse transition */
#profileSubmenu {
    transition: all 0.3s ease-in-out;
}

/* ===============================
   DIVIDER
================================ */
.logo-menu hr {
    border: none;
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 10px 0;
}

.menu-dots {
    font-size: 18px;
    opacity: .9;
}

.nav-govde {
    display: flex;
    padding: 20px 0;
    margin-left: 10%;
    margin-right: 10%;
    width: 100%;
    align-items: center;
}

.gradient-nav-area {
    position: absolute;
    background: linear-gradient(90deg, #8438FF, #9994FF);
    height: 180px;
    width: 100%;
}

.invoice-card {
    height: 100%;
}

.bg-primary {
    background: #E5E5FA;
    padding: 10px;
    border-radius: 10px;
}

.bg-secondary {
    
}

.bg-success {
    
}

.bg-warning {
    
}

/* ========================================
   Utility Classes
   ======================================== */

/* Custom Padding */
.pt-80 {
    padding-top: 80px !important;
}

/* Z-index utilities */
.z-1 {
    z-index: 1 !important;
}

.z-2 {
    z-index: 2 !important;
}

/* Opacity utilities */
.opacity-95 {
    opacity: 0.95 !important;
}

/* Primary Colors */
:root {
    --color-pink: #FF5467;
    --color-panel: #343358;
    --color-gradient-start: #8438FF;
    --color-gradient-end: #9994FF;
    --color-success: #4EC56E;
}

/* Gradient Button */
.btn-gradient {
    background: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-end));
    color: white;
    border: none;
}

.btn-gradient:hover {
    background: linear-gradient(90deg, #7530e6, #8a87e6);
    color: white;
}

/* Pink Button (Selected) */
.btn-pink {
    background-color: var(--color-pink);
    color: white;
    border: none;
}

.btn-pink:hover {
    background-color: #e64d5e;
    color: white;
}

/* Success Button */
.btn-success-custom {
    background-color: var(--color-success);
    color: white;
    border: none;
}

.btn-success-custom:hover {
    background-color: #45b162;
    color: white;
}

/* Step Circle Icon */
.step-circle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: #8334ff;
}

/* Step Item with Connecting Line */
.step-item {
    position: relative;
    margin-bottom: 20px;
}

.step-item-last {
    margin-bottom: 0;
}

.step-item:not(.step-item-last)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 36px;
    width: 2px;
    height: calc(100% + 20px);
    background-color: var(--color-gradient-start);
    opacity: 0.3;
}

/* Card Shadow */
.card-custom-shadow {
    border: 1px solid #B7B7BF !important;
    box-shadow: 4px 4px 2px 0px #B7B7BF !important;
    border-radius: 20px !important;
}

/* Upload Dropzone Shadow */
.upload-dropzone-shadow {
    border: 1px solid #B7B7BF;
    box-shadow: 3px 3px 2px 0px #B7B7BF;
    border-radius: 16px;
}

/* File Select Button */
.btn-file-select {
    color: #fff;
    background-color: #9994ff;
    border-color: #9994ff;
}

.btn-file-select:hover {
    color: white;
    background-color: #9994ff;
    border-color: #9994ff;
    opacity: 0.9;
}

/* ============================================
   Invoice Action Buttons Styling
   ============================================ */
   .approve-offer-btn,
   .reject-offer-btn,
   .pay-invoice-btn,
   .edit-invoice-btn {
       transition: all 0.3s ease;
   }
   
   .approve-offer-btn:hover {
       transform: scale(1.15);
       box-shadow: 0 4px 12px rgba(78, 197, 110, 0.4) !important;
   }
   
   .reject-offer-btn:hover {
       transform: scale(1.15);
       box-shadow: 0 4px 12px rgba(255, 84, 103, 0.4) !important;
   }
   
   .pay-invoice-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(78, 197, 110, 0.3) !important;
   }
   
   .edit-invoice-btn:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(132, 56, 255, 0.3) !important;
   }
   
   .approve-offer-btn:active,
   .reject-offer-btn:active {
       transform: scale(0.95);
   }
   
   .pay-invoice-btn:active,
   .edit-invoice-btn:active {
       transform: translateY(0);
   }