/* ============================================================
   OUTLET ANNY PREMIUM UI
============================================================ */

:root {

    --anny-burgundy: #6B1E32;
    --anny-burgundy-hover: #541727;
    --anny-burgundy-deep: #3D101C;

    --anny-pink: #E8A9B7;
    --anny-pink-2: #EFC0CA;
    --anny-light-pink: #F7DDE3;
    --anny-blush: #FFF8FA;

    --anny-white: #FFFFFF;

    --anny-text: #35181F;
    --anny-muted: #87656D;

    --anny-border: #F0D5DC;
    --anny-border-light: #F8E8EC;

    --success: #15845C;
    --success-bg: #E7F7F0;

    --warning: #BD6D1B;
    --warning-bg: #FFF1DC;

    --shipping: #3774A7;
    --shipping-bg: #EAF3FA;

    --lavender: #7D63A5;
    --lavender-bg: #F0EBF7;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;

    --shadow-xs:
        0 1px 3px rgba(107, 30, 50, .03);

    --shadow-sm:
        0 4px 14px rgba(107, 30, 50, .055);

    --shadow-md:
        0 10px 28px rgba(107, 30, 50, .09);

    --transition:
        180ms ease;
}


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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background:
        radial-gradient(
            circle at 0 100%,
            rgba(232, 169, 183, .08),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 0,
            rgba(247, 221, 227, .36),
            transparent 30%
        ),
        var(--anny-blush);

    color: var(--anny-text);

    font-family:
        "Plus Jakarta Sans",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size: 14px;
}


a {
    color: inherit;
    text-decoration: none;
}


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


button,
a {
    -webkit-tap-highlight-color: transparent;
}


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

.top-header {

    position: sticky;
    z-index: 100;
    top: 0;

    min-height: 90px;

    display: grid;

    grid-template-columns:
        minmax(260px, auto)
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 16px;

    padding:
        8px
        clamp(16px, 2vw, 32px);

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

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid var(--anny-border-light);

    overflow: hidden;
}


.header-flower {

    position: absolute;

    pointer-events: none;

    opacity: .28;

    width: 145px;
}


.header-flower-left {
    left: -42px;
    top: -37px;
}


.header-flower-right {
    right: -35px;
    top: -42px;
}


.brand-area {

    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
}


.brand-logo {

    width: 76px;
    height: 76px;

    flex: 0 0 auto;

    object-fit: cover;

    border-radius: 50%;

    box-shadow:
        0 4px 14px
        rgba(107, 30, 50, .10);
}


.brand-text {

    display: flex;
    flex-direction: column;

    gap: 3px;

    white-space: nowrap;
}


.brand-text strong {

    color: var(--anny-burgundy);

    font-family:
        "DM Serif Display",
        Georgia,
        serif;

    font-size:
        clamp(22px, 1.8vw, 32px);

    line-height: 1;
}


.brand-text span {

    color: var(--anny-burgundy);

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

    letter-spacing: .28em;
}


/* ============================================================
   NAV
============================================================ */

.main-nav {

    position: relative;
    z-index: 2;

    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;

    gap: 5px;

    min-width: 0;
    flex: 1 1 auto;
}


.main-nav .nav-row {

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

    gap: 4px 6px;

    flex-wrap: wrap;
    width: 100%;
}


.nav-item {

    min-height: 34px;

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

    gap: 6px;

    padding:
        6px 11px;

    color:
        var(--anny-burgundy);

    border-radius:
        8px;

    font-size:
        12.5px;

    font-weight: 600;

    white-space:
        nowrap;

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


.nav-item svg {

    width: 16px;
    height: 16px;

    stroke-width: 1.8;
}


.nav-item:hover {

    background:
        var(--anny-light-pink);
}


.nav-item.active {

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--anny-burgundy),
            #8A2843
        );

    box-shadow:
        0 4px 12px
        rgba(107, 30, 50, .16);
}


.profile-area {

    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 210px;

    padding-left: 22px;

    border-left:
        1px solid var(--anny-border);
}


.profile-avatar {

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex: 0 0 auto;

    color: white;

    background:
        linear-gradient(
            135deg,
            #B8697D,
            var(--anny-burgundy)
        );

    border-radius: 50%;

    font-size: 20px;
}


.profile-info {

    min-width: 0;

    display: flex;
    flex-direction: column;
}


.profile-info strong {

    color: var(--anny-burgundy);
}


.profile-info span {

    color: var(--anny-muted);

    font-size: 12px;
}


.profile-area > svg {

    width: 16px;
}


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

.app-main {

    width: 100%;
}


.anny-page {

    width: 100%;

    padding:
        16px
        clamp(16px, 1.7vw, 28px)
        28px;
}


/* ============================================================
   KPI
============================================================ */

.kpi-grid {

    display: grid;

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

    gap: 12px;

    margin-bottom: 16px;
}


.kpi-card {

    position: relative;

    min-height: 112px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 16px;

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

    border:
        1px solid
        rgba(240, 213, 220, .72);

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

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

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


.kpi-card:hover {

    transform:
        translateY(-2px);

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


.kpi-icon {

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #FBE4E9,
            #F4C8D2
        );

    color:
        var(--anny-burgundy);

    border-radius:
        50%;
}


.kpi-icon svg {

    width: 25px;
    height: 25px;

    stroke-width: 1.7;
}


.kpi-content {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.kpi-content strong {

    color:
        var(--anny-burgundy);

    font-size: 27px;

    line-height: 1;
}


.kpi-content span {

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


.kpi-content small {

    color:
        var(--anny-muted);

    font-size: 11px;
}


.kpi-chevron {

    position: absolute;

    right: 12px;

    width: 17px;

    color:
        #C55F78;
}


/* ============================================================
   WORKSPACE
============================================================ */

.anny-workspace {

    display: grid;

    grid-template-columns:
        minmax(290px, 1.08fr)
        minmax(540px, 2fr)
        minmax(300px, 1.08fr);

    gap: 12px;

    align-items: start;
}


.panel {

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

    border:
        1px solid
        var(--anny-border-light);

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

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

    overflow: hidden;
}


.bag-sidebar,
.message-center {

    min-height: 680px;
}


.bag-detail {

    min-height: 680px;
}


/* ============================================================
   PANEL HEADERS
============================================================ */

.panel-header {

    min-height: 68px;

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

    gap: 12px;

    padding: 12px 14px;
}


.panel-title {

    display: flex;
    align-items: center;

    gap: 10px;
}


.panel-title > svg {

    color:
        var(--anny-burgundy);

    width: 26px;
    height: 26px;
}


.panel-title h2 {

    margin: 0;

    color:
        var(--anny-burgundy);

    font-family:
        "DM Serif Display",
        Georgia,
        serif;

    font-size: 26px;
}


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

.btn {

    min-height: 42px;

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

    gap: 7px;

    padding:
        9px 15px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    cursor: pointer;

    font-weight: 700;

    transition:
        all var(--transition);
}


.btn svg {

    width: 18px;
    height: 18px;
}


.btn-primary {

    color: white;

    background:
        var(--anny-burgundy);

    box-shadow:
        0 4px 12px
        rgba(107, 30, 50, .14);
}


.btn-primary:hover {

    background:
        var(--anny-burgundy-hover);

    transform:
        translateY(-1px);
}


.btn-secondary {

    color:
        var(--anny-burgundy);

    background:
        #F5BEC9;
}


.btn-secondary:hover {

    background:
        #EFAEBB;
}


.btn-outline {

    color:
        var(--anny-burgundy);

    background:
        white;

    border-color:
        var(--anny-pink);
}


.btn-outline:hover {

    background:
        var(--anny-light-pink);
}


.btn-whatsapp {

    color:
        var(--anny-burgundy);

    background:
        #FCE1E7;

    border-color:
        #F3CBD4;
}


.btn-small {

    min-height: 32px;

    padding:
        5px 10px;

    font-size:
        11px;
}


.btn-compact {

    min-height: 39px;

    padding:
        8px 12px;

    font-size: 12px;
}


.btn-action {

    flex: 1;

    min-height: 47px;
}


/* ============================================================
   FILTERS
============================================================ */

.filter-tabs {

    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    padding:
        0 13px 10px;
}


.filter-tab {

    min-height: 32px;

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

    gap: 5px;

    padding:
        6px 11px;

    color:
        #57353D;

    border-radius:
        999px;

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


.filter-tab.active {

    color:
        white;

    background:
        var(--anny-burgundy);
}


.search-row {

    display: flex;

    gap: 8px;

    padding:
        0 13px 11px;
}


.search-input {

    min-height: 40px;

    flex: 1;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        0 11px;

    background:
        white;

    border:
        1px solid
        #E8DCE0;

    border-radius:
        9px;
}


.search-input svg {

    flex: 0 0 auto;

    width: 17px;

    color:
        #7F7A80;
}


.search-input input {

    width: 100%;

    border: 0;
    outline: 0;

    color:
        var(--anny-text);

    background:
        transparent;

    font-size: 12px;
}


.icon-btn {

    width: 40px;
    height: 40px;

    display: inline-grid;
    place-items: center;

    padding: 0;

    color:
        var(--anny-burgundy);

    background:
        white;

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

    border-radius:
        9px;

    cursor: pointer;
}


.icon-btn svg {

    width: 17px;
}


/* ============================================================
   BAG LIST
============================================================ */

.bag-list {

    padding:
        0 10px 12px;

    display: flex;
    flex-direction: column;

    gap: 6px;
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}


.bag-row {

    position: relative;

    min-height: 78px;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 9px;

    padding:
        10px;

    border:
        1px solid transparent;

    border-radius:
        12px;

    transition:
        all var(--transition);
}


.bag-row:hover {

    background:
        #FFF4F6;
}


.bag-row.selected {

    background:
        linear-gradient(
            90deg,
            #FCE6EB,
            #FFF5F7
        );

    border-color:
        #F3CAD4;
}


.bag-row.selected::before {

    content: "";

    position: absolute;

    left: 0;
    top: 10px;
    bottom: 10px;

    width: 3px;

    background:
        var(--anny-burgundy);

    border-radius:
        0 3px 3px 0;
}


.bag-row-icon {

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    color:
        var(--anny-burgundy);

    background:
        #FCE2E8;

    border-radius:
        50%;
}


.bag-row-icon svg {

    width: 18px;
}


.bag-row-main {

    min-width: 0;
}


.bag-row-top {

    display: flex;
    align-items: center;

    gap: 6px;
}


.bag-row-top strong {

    color:
        var(--anny-burgundy);

    font-size: 12px;
}


.bag-row-name {

    margin-top: 2px;

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


.bag-row-main small {

    color:
        #A2848C;

    font-size: 10px;
}


.bag-row-value {

    display: flex;
    align-items: center;

    gap: 5px;
}


.bag-row-value strong {

    color:
        var(--anny-text);

    font-size: 12px;
}


.bag-row-value svg {

    width: 15px;

    color:
        var(--anny-burgundy);
}


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

.status-badge {

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

    min-height: 23px;

    padding:
        3px 8px;

    border-radius:
        999px;

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


.status-ready_for_pickup {

    color:
        var(--anny-burgundy);

    background:
        #F8C9D3;
}


.status-ready_for_shipping {

    color:
        #356A94;

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


.status-shipped {

    color:
        #285F8E;

    background:
        #DCEFFA;
}


.status-delivered {

    color:
        #167653;

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


.status-open {

    color:
        var(--anny-burgundy);

    background:
        var(--anny-light-pink);
}


.status-payment_pending {

    color:
        #9C5911;

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


/* ============================================================
   BAG DETAIL
============================================================ */

.bag-detail {

    padding:
        0 12px 12px;
}


.bag-detail-header {

    min-height: 84px;

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

    gap: 20px;

    padding:
        12px 4px;
}


.bag-id-row {

    display: flex;
    align-items: center;

    gap: 9px;
}


.bag-id-row > svg {

    width: 26px;
    height: 26px;

    color:
        var(--anny-burgundy);
}


.bag-id-row h1 {

    margin: 0;

    color:
        var(--anny-burgundy);

    font-size: 23px;
}


.customer-meta {

    margin-top: 7px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 10px;

    color:
        #704850;

    font-size: 11px;
}


.customer-meta span,
.customer-meta a {

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

    gap: 5px;
}


.customer-meta svg {

    width: 14px;
}


.customer-meta .separator {

    width: 1px;
    height: 15px;

    background:
        var(--anny-border);
}


.whatsapp-round {

    width: 27px;
    height: 27px;

    display: inline-grid !important;
    place-items: center;

    color:
        white;

    background:
        #159447;

    border-radius:
        50%;
}


.whatsapp-round svg {

    width: 15px;
}


.detail-header-actions {

    display: flex;
    align-items: center;

    gap: 7px;
}


/* ============================================================
   TIMELINE
============================================================ */

.bag-timeline {

    min-height: 125px;

    display: flex;
    align-items: flex-start;

    padding:
        20px 20px 10px;

    background:
        #FFFDFD;

    border:
        1px solid
        var(--anny-border-light);

    border-radius:
        12px;
}


.timeline-step {

    position: relative;

    width: 105px;

    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    color:
        #9F7C84;
}


.timeline-circle {

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    color:
        #A86174;

    background:
        #F8DDE3;

    border-radius:
        50%;
}


.timeline-circle svg {

    width: 18px;
}


.timeline-step.done .timeline-circle,
.timeline-step.current .timeline-circle {

    color:
        white;

    background:
        var(--anny-burgundy);
}


.timeline-step strong {

    margin-top: 7px;

    color:
        var(--anny-burgundy);

    font-size: 9px;
}


.timeline-step span {

    margin-top: 2px;

    font-size: 9px;
}


.timeline-step small {

    margin-top: 2px;

    color:
        #AA8A91;

    font-size: 8px;
}


.timeline-line {

    height: 3px;

    flex: 1;

    margin-top: 19px;

    background:
        linear-gradient(
            90deg,
            #DB6F88,
            #F6CDD6
        );
}


/* ============================================================
   ACTIONS
============================================================ */

.bag-actions {

    display: flex;

    gap: 8px;

    margin:
        10px 0;
}


.bag-actions form {

    flex: 1;

    display: flex;
}


/* ============================================================
   INNER CARD
============================================================ */

.inner-card {

    position: relative;

    overflow: hidden;

    background:
        white;

    border:
        1px solid
        var(--anny-border-light);

    border-radius:
        11px;
}


.inner-card-header {

    min-height: 43px;

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

    gap: 10px;

    padding:
        9px 12px;

    border-bottom:
        1px solid
        #F3E5E8;
}


.inner-card-header > div {

    display: flex;
    align-items: center;

    gap: 7px;
}


.inner-card-header svg {

    width: 17px;

    color:
        var(--anny-burgundy);
}


.inner-card-header strong {

    font-size: 11px;
}


.bag-total {

    color:
        var(--anny-burgundy);

    font-size: 11px !important;
}


/* ============================================================
   BAG ITEMS
============================================================ */

.bag-items {

    padding:
        0 12px;
}


.bag-item {

    min-height: 63px;

    display: grid;

    grid-template-columns:
        54px
        minmax(0, 1fr)
        55px
        80px
        28px;

    align-items: center;

    gap: 9px;

    border-bottom:
        1px solid
        #F5E8EB;
}


.bag-item:last-child {

    border-bottom: 0;
}


.bag-item img {

    width: 48px;
    height: 48px;

    object-fit: cover;

    border-radius:
        7px;
}


.bag-item-info {

    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.bag-item-info strong {

    overflow: hidden;

    font-size: 11px;

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


.bag-item-info small {

    color:
        var(--anny-muted);

    font-size: 9px;
}


.size-pill {

    justify-self: center;

    min-width: 36px;

    padding:
        5px 8px;

    text-align: center;

    color:
        #68434B;

    background:
        #FAE9ED;

    border-radius:
        999px;

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


.item-price {

    text-align: right;

    font-size: 10px;
}


/* ============================================================
   BOTTOM
============================================================ */

.bottom-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    margin-top:
        8px;
}


.shipping-fields {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

    padding:
        10px 12px;
}


.field-display {

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.field-display label {

    color:
        var(--anny-muted);

    font-size: 9px;
}


.field-display span {

    min-height: 35px;

    display: flex;
    align-items: center;

    padding:
        0 9px;

    background:
        #FFFBFC;

    border:
        1px solid
        #EEE3E6;

    border-radius:
        7px;

    font-size: 10px;
}


.observation-card {

    min-height: 110px;
}


.observation-card p {

    position: relative;
    z-index: 2;

    margin:
        10px 12px;

    color:
        #8A5663;

    font-size: 10px;
}


.card-flower {

    position: absolute;

    width: 85px;

    right: -20px;
    bottom: -25px;

    opacity: .25;
}


/* ============================================================
   MESSAGE CENTER
============================================================ */

.message-center {

    padding:
        0 12px 12px;
}


.message-header {

    min-height: 67px;

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

    gap: 8px;
}


.message-title {

    display: flex;
    align-items: center;

    gap: 8px;
}


.message-title h2 {

    margin: 0;

    color:
        var(--anny-burgundy);

    font-family:
        "DM Serif Display",
        Georgia,
        serif;

    font-size: 20px;
}


.whatsapp-big {

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: white;

    background:
        #159447;

    border-radius: 50%;
}


.whatsapp-big svg {

    width: 19px;
}


.message-tabs {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 4px;

    margin-bottom:
        9px;

    padding: 3px;

    background:
        #FFF6F8;

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

    border-radius:
        9px;
}


.message-tab {

    min-height: 31px;

    color:
        #69454E;

    background:
        transparent;

    border: 0;

    border-radius:
        7px;

    cursor: pointer;

    font-size: 11px;
}


.message-tab.active {

    color:
        var(--anny-burgundy);

    background:
        white;

    box-shadow:
        0 1px 5px
        rgba(107, 30, 50, .06);

    font-weight: 700;
}


.message-tab-content {

    display: none;
}


.message-tab-content.active {

    display: block;
}


.message-template-card {

    min-height: 75px;

    display: grid;

    grid-template-columns:
        40px
        minmax(0, 1fr)
        24px;

    align-items: center;

    gap: 8px;

    margin-bottom:
        7px;

    padding:
        8px;

    background:
        white;

    border:
        1px solid
        #F5E7EA;

    border-radius:
        10px;
}


.template-icon {

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    color:
        var(--anny-burgundy);

    background:
        #FCE9ED;

    border-radius:
        8px;
}


.template-icon svg {

    width: 17px;
}


.template-body {

    min-width: 0;
}


.template-body strong {

    display: block;

    font-size: 10px;
}


.template-body p {

    display: -webkit-box;

    overflow: hidden;

    margin:
        3px 0 0;

    color:
        #785F65;

    font-size: 9px;
    line-height: 1.4;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.template-edit {

    color:
        #B44B67;
}


.template-edit svg {

    width: 16px;
}


.new-template-btn {

    min-height: 43px;

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

    gap: 7px;

    color:
        var(--anny-burgundy);

    background:
        linear-gradient(
            135deg,
            #F8CCD5,
            #F4B8C6
        );

    border-radius:
        9px;

    font-weight: 700;

    font-size: 11px;
}


.recent-message {

    display: flex;
    flex-direction: column;

    gap: 4px;

    padding:
        10px;

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


.recent-message strong {

    font-size:
        11px;
}


.recent-message span {

    color:
        var(--anny-muted);

    font-size:
        10px;
}


.recent-message small {

    color:
        #AA8F95;

    font-size:
        8px;
}


/* ============================================================
   MODAL
============================================================ */

.modal-backdrop {

    position: fixed;

    z-index: 1000;

    inset: 0;

    display: none;
    place-items: center;

    padding: 20px;

    background:
        rgba(47, 17, 25, .32);

    backdrop-filter:
        blur(4px);
}


.modal-backdrop.open {

    display: grid;
}


.modal-card {

    position: relative;

    width: min(470px, 100%);

    padding:
        20px;

    background:
        white;

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

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

    box-shadow:
        0 24px 60px
        rgba(61, 16, 28, .24);
}


.modal-close {

    position: absolute;

    right: 12px;
    top: 12px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color:
        var(--anny-muted);

    background:
        transparent;

    border: 0;

    cursor: pointer;
}


.modal-header {

    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom:
        17px;
}


.modal-icon {

    width: 45px;
    height: 45px;

    display: grid;
    place-items: center;

    color:
        var(--anny-burgundy);

    background:
        var(--anny-light-pink);

    border-radius:
        50%;
}


.modal-header h3 {

    margin: 0;

    color:
        var(--anny-burgundy);

    font-size:
        18px;
}


.modal-header p {

    margin:
        2px 0 0;

    color:
        var(--anny-muted);

    font-size:
        11px;
}


.modal-form {

    display: flex;
    flex-direction: column;

    gap: 12px;
}


.modal-form label {

    display: flex;
    flex-direction: column;

    gap: 5px;

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


.modal-form input,
.modal-form textarea {

    width: 100%;

    padding:
        10px 11px;

    color:
        var(--anny-text);

    background:
        white;

    border:
        1px solid
        #E8D7DC;

    border-radius:
        9px;

    outline: 0;
}


.modal-form input:focus,
.modal-form textarea:focus {

    border-color:
        var(--anny-pink);

    box-shadow:
        0 0 0 3px
        rgba(232, 169, 183, .18);
}


.modal-footer {

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

    gap: 8px;

    margin-top:
        5px;
}


/* ============================================================
   EMPTY STATE
============================================================ */

.empty-state,
.detail-empty-state {

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

    text-align: center;

    color:
        var(--anny-muted);
}


.empty-state {

    min-height: 150px;

    gap: 5px;
}


.empty-state svg {

    width: 32px;

    color:
        var(--anny-pink);
}


.empty-state.compact {

    min-height: 130px;
}


.detail-empty-state {

    min-height: 640px;
}


.detail-empty-state img {

    width: 100px;
    height: 100px;

    margin-bottom:
        13px;

    border-radius:
        50%;
}


.detail-empty-state h2 {

    margin:
        0 0 5px;

    color:
        var(--anny-burgundy);
}


.detail-empty-state p {

    margin: 0;
}


/* ============================================================
   BUTTON SPINNER
============================================================ */

.button-spinner {

    width: 14px;
    height: 14px;

    border:
        2px solid rgba(255,255,255,.35);

    border-top-color:
        currentColor;

    border-radius:
        50%;

    animation:
        buttonSpin .65s linear infinite;
    display: inline-block;
    vertical-align: middle;
}


@keyframes buttonSpin {

    to {
        transform: rotate(360deg);
    }

}


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

@media (max-width: 1450px) {

    .top-header {

        grid-template-columns:
            270px
            minmax(0, 1fr)
            180px;
    }

    .brand-logo {

        width: 75px;
        height: 75px;
    }

    .brand-text strong {

        font-size:
            28px;
    }

    .nav-item {

        padding:
            8px 10px;

        font-size:
            12px;
    }

    .anny-workspace {

        grid-template-columns:
            minmax(260px, .95fr)
            minmax(500px, 1.8fr)
            minmax(280px, 1fr);
    }

}


@media (max-width: 1180px) {

    .top-header {

        grid-template-columns:
            auto
            1fr;

        align-items:
            start;
    }

    .brand-area {

        grid-row:
            1;
    }

    .profile-area {

        justify-self:
            end;

        grid-column:
            2;

        grid-row:
            1;
    }

    .main-nav {

        grid-column:
            1 / -1;

        grid-row:
            2;

        width:
            100%;
    }

    .kpi-grid {

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

    .anny-workspace {

        grid-template-columns:
            minmax(270px, .85fr)
            minmax(0, 1.8fr);
    }

    .message-center {

        grid-column:
            1 / -1;

        min-height:
            auto;
    }

}


@media (max-width: 820px) {

    .anny-page {

        padding:
            10px;
    }

    .brand-text span {

        display:
            none;
    }

    .brand-logo {

        width:
            58px;

        height:
            58px;
    }

    .profile-info {

        display:
            none;
    }

    .profile-area {

        min-width:
            auto;

        padding-left:
            10px;
    }

    .kpi-grid {

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

        gap:
            8px;
    }

    .kpi-card {

        min-height:
            88px;

        padding:
            11px;
    }

    .kpi-icon {

        width:
            43px;

        height:
            43px;

        flex-basis:
            43px;
    }

    .kpi-content strong {

        font-size:
            21px;
    }

    .anny-workspace {

        display:
            flex;

        flex-direction:
            column;
    }

    .panel {

        width:
            100%;
    }

    .bag-sidebar,
    .bag-detail,
    .message-center {

        min-height:
            auto;
    }

    .bottom-grid {

        grid-template-columns:
            1fr;
    }

}


@media (max-width: 520px) {

    .top-header {

        gap:
            8px;

        padding:
            8px 10px;
    }

    .brand-text strong {

        font-size:
            21px;
    }

    .profile-avatar {

        width:
            38px;

        height:
            38px;

        font-size:
            15px;
    }

    .main-nav {
        display: none !important;
    }


    .nav-item {

        justify-content:
            center;

        min-height:
            44px;

        min-width:
            0;

        padding:
            6px 4px;

        font-size:
            10.5px;
    }

    .nav-item svg {

        width:
            15px;

        height:
            15px;
    }

    .kpi-card {

        align-items:
            flex-start;
    }

    .kpi-content span {

        font-size:
            11px;
    }

    .kpi-content small {

        font-size:
            9px;
    }

    .bag-detail-header {

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .bag-timeline {

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }

    .bag-actions {

        flex-direction:
            column;
    }

    .bag-item {

        grid-template-columns:
            47px
            minmax(0, 1fr)
            45px;

        padding:
            7px 0;
    }

    .bag-item .size-pill {

        display:
            none;
    }

    .bag-item .icon-btn {

        display:
            none;
    }

    .message-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            10px 0;
    }

}


/* ============================================================
   SUB-HEADER BAR (Back Arrow & Breadcrumb)
============================================================ */

.sub-header-bar {
    background: rgba(255, 248, 250, 0.94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--anny-border-light);
    padding: 7px clamp(16px, 2.5vw, 40px);
    display: flex;
    align-items: center;
    min-height: 38px;
    font-size: 13px;
    color: var(--anny-burgundy);
    position: sticky;
    top: 90px;
    z-index: 90;
    transition: background 0.2s ease;
}

.sub-header-content {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--anny-burgundy);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 6px;
    background: transparent;
    transition: all 0.15s ease;
    cursor: pointer;
}

.back-link:hover {
    background: var(--anny-light-pink);
    color: var(--anny-burgundy-hover);
    transform: translateX(-2px);
}

.back-link svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.sub-header-divider {
    color: var(--anny-border);
    font-weight: 300;
    user-select: none;
}

.sub-header-current {
    font-weight: 600;
    color: var(--anny-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}


/* ============================================================
   SMARTPHONE CHAT MOCKUP (SIMULATOR)
============================================================ */

.simulator-layout {
    display: grid;
    grid-template-columns: minmax(320px, 440px) minmax(360px, 1fr);
    gap: 28px;
    align-items: start;
    max-width: 1360px;
    margin: 0 auto;
    padding: 10px 0 30px 0;
}

.phone-mockup-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    width: 100%;
}

.smartphone-frame {
    width: 100%;
    max-width: 395px;
    height: 730px;
    background: #18181C;
    border-radius: 46px;
    padding: 12px;
    box-shadow:
        0 0 0 3px #2D2D35,
        0 24px 60px -12px rgba(107, 30, 50, 0.28),
        0 12px 24px rgba(0, 0, 0, 0.18);
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.smartphone-screen {
    width: 100%;
    height: 100%;
    background: #EFEAE2;
    background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 0);
    background-size: 16px 16px;
    border-radius: 36px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.smartphone-notch {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 24px;
    background: #18181C;
    border-radius: 20px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 10px;
}

.notch-camera {
    width: 9px;
    height: 9px;
    background: #0B0B0E;
    border-radius: 50%;
    border: 1px solid #2B2B36;
}

.notch-speaker {
    width: 38px;
    height: 4px;
    background: #25252C;
    border-radius: 2px;
}

.phone-status-bar {
    height: 38px;
    background: #075E54;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px 0 22px;
    font-size: 11px;
    font-weight: 600;
    z-index: 40;
}

.phone-app-header {
    background: #075E54;
    color: white;
    padding: 8px 12px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    z-index: 30;
}

.phone-contact-info {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
}

.phone-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E8A9B7;
    color: #6B1E32;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
}

.phone-contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.phone-contact-name {
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.phone-contact-status {
    font-size: 10px;
    color: #D4F4D2;
    line-height: 1.1;
}

.phone-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.88);
}

.phone-header-actions svg {
    width: 17px;
    height: 17px;
}

.phone-chat-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
}

.phone-chat-scroll::-webkit-scrollbar {
    width: 4px;
}

.phone-chat-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 4px;
}

.phone-bubble {
    max-width: 82%;
    padding: 8px 11px;
    font-size: 12.5px;
    line-height: 1.38;
    position: relative;
    border-radius: 10px;
    box-shadow: 0 1px 1.5px rgba(0,0,0,0.12);
    word-break: break-word;
}

.phone-bubble-in {
    align-self: flex-start;
    background: #FFFFFF;
    color: #111B21;
    border-top-left-radius: 2px;
}

.phone-bubble-out {
    align-self: flex-end;
    background: #D9FDD3;
    color: #111B21;
    border-top-right-radius: 2px;
}

.phone-bubble-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-top: 3px;
    font-size: 9.5px;
    color: #667781;
}

.phone-bubble-ticks {
    color: #53BDEB;
    font-size: 11px;
    font-weight: 700;
}

.phone-input-dock {
    padding: 8px 10px;
    background: #F0F2F5;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.phone-input-field {
    flex: 1;
    background: #FFFFFF;
    border: none;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12.5px;
    outline: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.phone-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00A884;
    color: white;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease, background 0.15s ease;
}

.phone-send-btn:hover {
    background: #008f6f;
    transform: scale(1.05);
}

.phone-send-btn svg {
    width: 17px;
    height: 17px;
}


/* ============================================================
   SETTINGS HUB CARDS
============================================================ */

.settings-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.settings-card {
    background: #FFFFFF;
    border: 1px solid var(--anny-border-light);
    border-radius: var(--radius-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    box-shadow: 0 2px 8px rgba(107, 30, 50, 0.03);
    position: relative;
    overflow: hidden;
}

.settings-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(107, 30, 50, 0.08);
    border-color: var(--anny-pink);
}

.settings-card-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.settings-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--anny-light-pink);
    color: var(--anny-burgundy);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 1px solid rgba(232, 169, 183, 0.4);
}

.settings-card-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2;
}

.settings-card-title-group h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--anny-burgundy);
}

.settings-card-title-group p {
    margin: 0;
    font-size: 12.5px;
    color: var(--anny-text-muted);
    line-height: 1.4;
}

.settings-card-details {
    background: var(--anny-blush);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 12px 0 18px 0;
    font-size: 12.5px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid rgba(247, 221, 227, 0.7);
}

.settings-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-detail-label {
    color: var(--anny-text-muted);
    font-weight: 500;
}

.settings-detail-value {
    color: var(--anny-burgundy);
    font-weight: 700;
}

.settings-card-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
}


/* ============================================================
   WHATSAPP REFINED INTEGRATION CARDS
============================================================ */

.wa-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.wa-stat-card {
    background: #FFFFFF;
    border: 1px solid var(--anny-border-light);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 6px rgba(107, 30, 50, 0.03);
}

.wa-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.wa-stat-info strong {
    display: block;
    font-size: 17px;
    font-weight: 800;
    color: var(--anny-burgundy);
    line-height: 1.2;
}

.wa-stat-info span {
    font-size: 12px;
    color: var(--anny-text-muted);
}


/* Responsive adjustments for Simulator & Hub */
@media (max-width: 900px) {
    .simulator-layout {
        grid-template-columns: 1fr;
    }
    
    .sub-header-bar {
        top: 0;
    }
}


/* ============================================================
   DASHBOARD METRIC GRID & URGENT LIST
============================================================ */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.metric-card {
    background: #FFFFFF;
    border: 1px solid var(--anny-border-light);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform var(--transition), box-shadow var(--transition);
    box-shadow: 0 2px 6px rgba(107, 30, 50, 0.03);
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(107, 30, 50, 0.06);
}

.metric-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--anny-burgundy);
}

.metric-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--anny-burgundy);
    margin: 8px 0 4px 0;
    line-height: 1.1;
}

.metric-sub {
    font-size: 11.5px;
    color: var(--anny-text-muted);
}

.urgent-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.urgent-item {
    background: #FFFFFF;
    border: 1px solid var(--anny-border-light);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    transition: border-color var(--transition);
}

.urgent-item:hover {
    border-color: var(--anny-pink);
}

/* =========================================================
   MOBILE HAMBURGER MENU & LATERAL DRAWER (V1.3.1)
========================================================== */
.mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(107, 30, 50, 0.2);
    border-radius: var(--radius-md, 8px);
    color: var(--anny-burgundy, #6b1e32);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0;
}

.mobile-menu-btn:hover,
.mobile-menu-btn:focus-visible {
    background: rgba(107, 30, 50, 0.08);
    border-color: var(--anny-burgundy, #6b1e32);
    outline: none;
}

.mobile-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(40, 15, 25, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.mobile-drawer {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    background: #ffffff;
    z-index: 1201;
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    flex-direction: column;
    overflow-y: auto;
}

body.drawer-open {
    overflow: hidden !important;
}

body.drawer-open .mobile-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

body.drawer-open .mobile-drawer {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem 1.25rem;
    border-bottom: 1px solid var(--border, #eee);
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.drawer-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--anny-pink, #f3d5db);
}

.drawer-brand-text strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--anny-burgundy, #6b1e32);
    line-height: 1.2;
}

.drawer-brand-text span {
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    color: var(--anny-text-muted, #888);
    font-weight: 600;
}

.drawer-close-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(107, 30, 50, 0.06);
    border: none;
    border-radius: 50%;
    color: var(--anny-burgundy, #6b1e32);
    cursor: pointer;
    transition: background 0.2s;
}

.drawer-close-btn:hover {
    background: rgba(107, 30, 50, 0.15);
}

.drawer-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.9rem 1.25rem;
    margin: 0.75rem 1rem;
    background: var(--anny-card-bg, #faf6f5);
    border: 1px solid var(--border, #eee);
    border-radius: var(--radius-md, 8px);
}

.drawer-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--anny-burgundy, #6b1e32);
    color: #ffffff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.drawer-user-info {
    flex: 1;
    min-width: 0;
}

.drawer-user-info strong {
    display: block;
    font-size: 0.88rem;
    color: var(--anny-text-dark, #2d2024);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-user-info span {
    display: block;
    font-size: 0.75rem;
    color: var(--anny-burgundy, #6b1e32);
    font-weight: 600;
}

.drawer-logout-btn {
    color: var(--anny-text-muted, #888);
    padding: 6px;
    border-radius: 6px;
    transition: color 0.2s;
}

.drawer-logout-btn:hover {
    color: var(--danger, #dc2626);
}

.drawer-nav {
    padding: 0.5rem 1rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.drawer-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-group-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--anny-text-muted, #999);
    padding: 0.35rem 0.75rem;
    text-transform: uppercase;
}

.drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius-sm, 6px);
    color: var(--anny-text-dark, #333);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.drawer-link i,
.drawer-link svg {
    width: 18px;
    height: 18px;
    color: var(--anny-burgundy, #6b1e32);
    opacity: 0.8;
}

.drawer-link:hover {
    background: rgba(107, 30, 50, 0.05);
    color: var(--anny-burgundy, #6b1e32);
}

.drawer-link.active {
    background: var(--anny-burgundy, #6b1e32);
    color: #ffffff !important;
    font-weight: 700;
}

.drawer-link.active i,
.drawer-link.active svg {
    color: #ffffff !important;
    opacity: 1;
}

@media (max-width: 768px) {
    .main-nav {
        display: none !important;
    }

    .profile-area {
        display: none !important;
    }

    .mobile-menu-btn {
        display: inline-flex !important;
    }

    .mobile-drawer-backdrop {
        display: block !important;
    }

    .mobile-drawer {
        display: flex !important;
    }
}




.sales-quicknav{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:6px 0 38px;
  padding:10px 0 18px;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow-x:auto;
  scrollbar-width:none;
}
.sales-quicknav::-webkit-scrollbar{display:none}
.sales-quicknav::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(107,30,50,.14);
}
.sales-quicknav a{
  position:relative;
  flex:1 1 0;
  min-width:145px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 16px;
  border:1px solid rgba(107,30,50,.14);
  border-radius:999px;
  background:#fff;
  text-decoration:none;
  text-align:center;
  color:#6B1E32;
  font-weight:700;
  font-size:.78rem;
  line-height:1.1;
  box-shadow:0 2px 8px rgba(107,30,50,.03);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.sales-quicknav a:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-6px;
  top:8px;
  bottom:8px;
  width:1px;
  background:rgba(107,30,50,.10);
}
.sales-quicknav a svg{width:16px;height:16px;flex:0 0 16px}
.sales-quicknav a span{display:block;white-space:nowrap}
.sales-quicknav a:hover{
  background:#FFF8FA;
  border-color:rgba(107,30,50,.28);
  transform:translateY(-1px);
  box-shadow:0 5px 14px rgba(107,30,50,.07);
}
.sales-quicknav a.active{
  background:#6B1E32;
  border-color:#6B1E32;
  color:#fff;
  box-shadow:0 7px 16px rgba(107,30,50,.18);
}
@media(max-width:900px){
  .sales-quicknav{gap:8px;padding-bottom:16px;margin-bottom:32px}
  .sales-quicknav a{flex:0 0 auto;min-width:132px}
  .sales-quicknav a:not(:last-child)::after{right:-5px}
}
@media(max-width:620px){
  .sales-quicknav{margin-bottom:30px;padding-bottom:15px}
  .sales-quicknav a{min-width:125px;min-height:40px;padding:8px 13px;font-size:.73rem}
}

/* === Clientes CRM amigável === */
.customer-page{max-width:1180px;margin:0 auto}
.customer-page-header{display:flex;justify-content:space-between;align-items:center;gap:16px}
.customer-editor-card{background:#fff;border:1px solid rgba(107,30,50,.12);border-radius:18px;padding:18px;margin-bottom:18px;box-shadow:0 10px 28px rgba(107,30,50,.05)}
.customer-editor-card h3{margin:0;color:#6B1E32}
.customer-editor-card p{margin:4px 0 14px;color:#7E525D;font-size:.86rem}
.customer-editor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.customer-editor-grid label{display:flex;flex-direction:column;gap:6px}
.customer-editor-grid label span{font-size:.75rem;font-weight:800;color:#6f4d56;text-transform:uppercase;letter-spacing:.04em}
.customer-editor-grid input,.customer-editor-grid select,.customer-editor-grid textarea{width:100%;border:1px solid rgba(107,30,50,.15);border-radius:11px;padding:10px 12px;background:#fff;color:#35181F;font:inherit}
.customer-editor-grid .wide{grid-column:1/-1}
.customer-editor-actions{display:flex;justify-content:flex-end;gap:8px}
.customer-alert{padding:11px 14px;border-radius:11px;margin-bottom:14px;font-size:.84rem;font-weight:700}
.customer-alert.success{background:#ecfdf3;color:#166534;border:1px solid #bbf7d0}
.customer-alert.error{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}
.customer-searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid rgba(107,30,50,.12);border-radius:14px;padding:0 14px;height:48px;margin-bottom:10px}
.customer-searchbar svg{width:18px;height:18px;color:#7E525D}
.customer-searchbar input{border:0;outline:0;flex:1;min-width:0;background:transparent;font:inherit}
.customer-search-clear{font-size:.78rem;font-weight:800;color:#6B1E32;text-decoration:none}
.customer-summary{display:flex;align-items:baseline;gap:6px;color:#7E525D;font-size:.82rem;margin:0 2px 12px}
.customer-summary strong{font-size:1.05rem;color:#35181F}
.customer-summary small{margin-left:auto}
.customer-list{display:flex;flex-direction:column;gap:10px}
.customer-card{display:grid;grid-template-columns:52px 1fr auto;gap:14px;align-items:start;background:#fff;border:1px solid rgba(107,30,50,.10);border-radius:16px;padding:15px 16px;box-shadow:0 6px 20px rgba(107,30,50,.04)}
.customer-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#F7DDE3;color:#6B1E32;font-weight:900;font-size:1.15rem}
.customer-name-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.customer-name-row h3{margin:0;color:#35181F;font-size:1rem}
.customer-code{font-family:monospace;font-size:.69rem;color:#9a6f79}
.customer-status{font-size:.68rem;font-weight:900;padding:5px 8px;border-radius:999px;background:#f3f4f6;color:#4b5563}
.customer-status.status-active{background:#ecfdf3;color:#166534}
.customer-status.status-vip{background:#fff7ed;color:#9a3412}
.customer-status.status-blocked{background:#fff1f2;color:#9f1239}
.customer-contact-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px}
.customer-contact-row a,.customer-contact-row span{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:#54606c;text-decoration:none}
.customer-contact-row svg{width:14px;height:14px}
.customer-stats{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.customer-stats div{display:flex;flex-direction:column}
.customer-stats strong{font-size:.88rem;color:#35181F}
.customer-stats span{font-size:.67rem;color:#8a6b73}
.customer-notes{margin:10px 0 0;padding:9px 11px;background:#FFF8FA;border-radius:9px;font-size:.78rem;color:#6f4d56}
.customer-actions{display:flex;gap:7px;align-items:center}
.customer-delete-btn{border:1px solid #fecaca;background:#fff;color:#b91c1c}
.customer-delete-btn:disabled{opacity:.4;cursor:not-allowed}
.customer-inline-editor{grid-column:2/-1;border-top:1px solid rgba(107,30,50,.10);padding-top:14px;margin-top:4px}
.customer-empty{text-align:center;padding:42px 20px;background:#fff;border:1px dashed rgba(107,30,50,.18);border-radius:16px;color:#7E525D}
.customer-empty svg{width:34px;height:34px;color:#E8A9B7}
.customer-empty h3{margin:8px 0 4px;color:#35181F}
@media(max-width:780px){
 .customer-page-header{align-items:flex-start;flex-direction:column}
 .customer-editor-grid{grid-template-columns:1fr}
 .customer-card{grid-template-columns:44px 1fr}
 .customer-avatar{width:42px;height:42px}
 .customer-actions{grid-column:2;justify-content:flex-start;flex-wrap:wrap}
 .customer-inline-editor{grid-column:1/-1}
 .customer-stats{gap:14px}
}