/* =========================================================
   GARAGE CRM FRONTEND
   Dashboard, Follow Up, Modal, dan Struk Digital
   ========================================================= */

:root {
    --gcrm-primary: #10877c;
    --gcrm-primary-hover: #0b7067;
    --gcrm-primary-soft: #e9f8f5;

    --gcrm-blue: #2563eb;
    --gcrm-blue-soft: #edf4ff;

    --gcrm-orange: #c84a0a;
    --gcrm-orange-soft: #fff4e8;

    --gcrm-green: #07875f;
    --gcrm-green-soft: #eafaf4;

    --gcrm-red: #dc2626;
    --gcrm-red-soft: #fff0f0;

    --gcrm-background: #f4f7fb;
    --gcrm-surface: #ffffff;
    --gcrm-surface-soft: #f7f9fc;
    --gcrm-border: #dce4ed;
    --gcrm-border-soft: #e9eef4;

    --gcrm-text: #102039;
    --gcrm-muted: #6b7d98;
    --gcrm-muted-light: #9aa8bc;

    --gcrm-sidebar: #111827;
    --gcrm-sidebar-hover: #1d2737;
    --gcrm-sidebar-text: #aab6c9;

    --gcrm-radius-small: 8px;
    --gcrm-radius: 13px;
    --gcrm-radius-large: 18px;

    --gcrm-shadow:
        0 12px 35px rgba(25, 42, 67, 0.07);

    --gcrm-modal-shadow:
        0 25px 80px rgba(5, 12, 24, 0.28);

    --gcrm-transition: 180ms ease;
}

/* Logo Erfolg tetap memakai warna biru asli. */
.gcrm-brand img{width:175px!important;max-height:54px!important;padding:8px 10px!important;background:#fff!important;border-radius:9px!important;filter:none!important}

/* =========================================================
   RESET KHUSUS GARAGE CRM
   ========================================================= */

.gcrm-app,
.gcrm-app *,
.gcrm-modal,
.gcrm-modal * {
    box-sizing: border-box;
}

.gcrm-app {
    position: relative;
    display: grid !important;
    grid-template-columns: 240px minmax(0, 1fr);
    width: 100vw !important;
    min-width: 0;
    min-height: 100vh;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    color: var(--gcrm-text);
    background: var(--gcrm-background);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.5;
}

.gcrm-app *,
.gcrm-modal * {
    font-family: inherit;
}

.gcrm-app h1,
.gcrm-app h2,
.gcrm-app h3,
.gcrm-app h4,
.gcrm-app h5,
.gcrm-app h6,
.gcrm-modal h1,
.gcrm-modal h2,
.gcrm-modal h3 {
    font-family: inherit !important;
}

.gcrm-app button,
.gcrm-app input,
.gcrm-app select,
.gcrm-app textarea,
.gcrm-modal button,
.gcrm-modal input,
.gcrm-modal select,
.gcrm-modal textarea {
    font: inherit !important;
}

.gcrm-app button,
.gcrm-modal button {
    cursor: pointer;
}

.gcrm-app a {
    box-shadow: none !important;
    text-decoration: none !important;
}

.gcrm-app img,
.gcrm-modal img {
    max-width: 100%;
}

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

/* Menghilangkan jarak bawaan Elementor di halaman CRM. */

body:has(.gcrm-app) .site-content,
body:has(.gcrm-app) .content-area,
body:has(.gcrm-app) .site-main,
body:has(.gcrm-app) article,
body:has(.gcrm-app) .entry-content {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body:has(.gcrm-app) .elementor,
body:has(.gcrm-app) .elementor-section,
body:has(.gcrm-app) .elementor-container,
body:has(.gcrm-app) .elementor-column,
body:has(.gcrm-app) .elementor-widget-wrap,
body:has(.gcrm-app) .elementor-widget,
body:has(.gcrm-app) .elementor-widget-container,
body:has(.gcrm-app) .e-con,
body:has(.gcrm-app) .e-con-inner {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

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

.gcrm-sidebar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: 240px;
    height: 100vh;
    min-height: 100vh;
    padding: 25px 16px 20px;
    color: var(--gcrm-sidebar-text);
    background:
        linear-gradient(
            180deg,
            #111827 0%,
            #0c1422 100%
        );
}

.admin-bar .gcrm-sidebar {
    top: 32px;
    height: calc(100vh - 32px);
    min-height: calc(100vh - 32px);
}

.gcrm-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    margin-bottom: 26px;
    padding: 0 8px;
}

.gcrm-brand > span {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    color: #082a25;
    background: #a9f1e4;
    border-radius: 11px;
    font-size: 17px !important;
    font-weight: 900;
}

.gcrm-brand > div {
    overflow: hidden;
    min-width: 0;
}

.gcrm-brand strong {
    display: block;
    overflow: hidden;
    margin: 0;
    color: #ffffff;
    font-size: 14px !important;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcrm-brand small {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: #8290a5;
    font-size: 10px !important;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcrm-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.gcrm-sidebar nav a {
    display: flex !important;
    align-items: center;
    gap: 11px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    color: var(--gcrm-sidebar-text) !important;
    background: transparent;
    border-radius: 10px;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
    transition:
        color var(--gcrm-transition),
        background var(--gcrm-transition),
        transform var(--gcrm-transition);
}

.gcrm-sidebar nav a span {
    display: grid;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    place-items: center;
    font-size: 16px !important;
}

.gcrm-sidebar nav a:hover {
    color: #ffffff !important;
    background: var(--gcrm-sidebar-hover);
    transform: translateX(2px);
}

.gcrm-sidebar nav a.is-active {
    color: #082923 !important;
    background: #a9f1e4;
}

.gcrm-user {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding: 16px 12px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.gcrm-user small {
    color: #738197;
    font-size: 10px !important;
}

.gcrm-user strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 12px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcrm-user a {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 8px;
    color: #a9f1e4 !important;
    font-size: 11px !important;
    font-weight: 700;
}

.gcrm-user a:hover {
    color: #ffffff !important;
}

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

.gcrm-main {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    padding: 31px 30px 45px !important;
    background: var(--gcrm-background);
}

.gcrm-mobile {
    display: none;
}

.gcrm-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    width: 100%;
    margin: 0 0 25px;
}

.gcrm-head > div:first-child {
    min-width: 0;
}

.gcrm-head > div:first-child > span {
    display: block;
    margin-bottom: 8px;
    color: var(--gcrm-primary);
    font-size: 10px !important;
    font-weight: 850;
    letter-spacing: 1.4px;
    line-height: 1.2;
}

.gcrm-head h1 {
    margin: 0 0 5px !important;
    padding: 0 !important;
    color: var(--gcrm-text) !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    font-weight: 450 !important;
    line-height: 1.15 !important;
    letter-spacing: -1.1px;
}

.gcrm-head p {
    margin: 0 !important;
    color: var(--gcrm-muted) !important;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.55 !important;
}

.gcrm-head-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

/* =========================================================
   BUTTON UTAMA
   ========================================================= */

.gcrm-add-lead,
.gcrm-template-button,
.gcrm-btn-save,
.gcrm-complete-with-receipt,
.gcrm-edit-receipt,
.gcrm-print-receipt {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    margin: 0 !important;
    padding: 10px 15px !important;
    color: #ffffff !important;
    background: var(--gcrm-primary) !important;
    border: 1px solid var(--gcrm-primary) !important;
    border-radius: 9px !important;
    box-shadow:
        0 8px 22px rgba(16, 135, 124, 0.16) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap;
    transition:
        background var(--gcrm-transition),
        border-color var(--gcrm-transition),
        box-shadow var(--gcrm-transition),
        transform var(--gcrm-transition);
}

.gcrm-add-lead:hover,
.gcrm-template-button:hover,
.gcrm-btn-save:hover,
.gcrm-complete-with-receipt:hover,
.gcrm-edit-receipt:hover,
.gcrm-print-receipt:hover {
    color: #ffffff !important;
    background: var(--gcrm-primary-hover) !important;
    border-color: var(--gcrm-primary-hover) !important;
    box-shadow:
        0 10px 28px rgba(16, 135, 124, 0.23) !important;
    transform: translateY(-1px);
}

.gcrm-btn-cancel,
.gcrm-complete-without-receipt {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 41px;
    margin: 0 !important;
    padding: 10px 15px !important;
    color: var(--gcrm-text) !important;
    background: var(--gcrm-surface) !important;
    border: 1px solid var(--gcrm-border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.gcrm-btn-cancel:hover,
.gcrm-complete-without-receipt:hover {
    color: var(--gcrm-primary) !important;
    background: var(--gcrm-primary-soft) !important;
    border-color: var(--gcrm-primary) !important;
}

.gcrm-complete-without-receipt {
    color: #b45309 !important;
    background: var(--gcrm-orange-soft) !important;
    border-color: #fed7aa !important;
}

.gcrm-add-lead:disabled,
.gcrm-template-button:disabled,
.gcrm-btn-save:disabled,
.gcrm-btn-cancel:disabled,
.gcrm-edit-receipt:disabled,
.gcrm-print-receipt:disabled {
    cursor: not-allowed !important;
    opacity: 0.55;
    transform: none !important;
}

/* =========================================================
   STATISTIC CARD
   ========================================================= */

.gcrm-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin: 0 0 24px !important;
}

.gcrm-stats > a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 96px;
    padding: 18px !important;
    color: var(--gcrm-text) !important;
    background: var(--gcrm-surface);
    border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius);
    box-shadow:
        0 4px 15px rgba(25, 42, 67, 0.025) !important;
    transition:
        border-color var(--gcrm-transition),
        box-shadow var(--gcrm-transition),
        transform var(--gcrm-transition);
}

.gcrm-stats > a:hover {
    border-color: #aab8c9;
    box-shadow: var(--gcrm-shadow) !important;
    transform: translateY(-2px);
}

.gcrm-stats > a > i {
    display: grid;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    place-items: center;
    margin: 0;
    color: #3e5877;
    background: #eef3f8;
    border-radius: 11px;
    font-size: 20px !important;
    font-style: normal;
    line-height: 1;
}

.gcrm-stats > a.is-new_lead > i {
    color: var(--gcrm-orange);
    background: var(--gcrm-orange-soft);
}

.gcrm-stats > a.is-in_service > i {
    color: var(--gcrm-blue);
    background: var(--gcrm-blue-soft);
}

.gcrm-stats > a.is-completed > i {
    color: var(--gcrm-green);
    background: var(--gcrm-green-soft);
}

.gcrm-stats > a > span {
    display: block;
    overflow: hidden;
    min-width: 0;
}

.gcrm-stats > a strong {
    display: block;
    margin: 0 0 4px;
    color: var(--gcrm-text);
    font-size: 23px !important;
    font-weight: 500 !important;
    line-height: 1;
}

.gcrm-stats > a small {
    display: block;
    overflow: hidden;
    color: var(--gcrm-muted);
    font-size: 11px !important;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   INFO FOLLOW UP
   ========================================================= */

.gcrm-info {
    width: 100%;
    margin: 0 0 19px;
    padding: 13px 15px;
    color: #126789;
    background: #effaff;
    border: 1px solid #a9ddf5;
    border-radius: 9px;
    font-size: 11px !important;
    line-height: 1.55;
}

/* =========================================================
   PANEL DAN TAB
   ========================================================= */

.gcrm-panel {
    overflow: hidden;
    width: 100%;
    margin: 0 0 22px !important;
    background: var(--gcrm-surface);
    border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius);
    box-shadow:
        0 5px 18px rgba(25, 42, 67, 0.03);
}

.gcrm-tabs {
    display: flex !important;
    overflow-x: auto;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 52px;
    padding: 0 17px !important;
    border-bottom: 1px solid var(--gcrm-border);
    scrollbar-width: thin;
}

.gcrm-tabs > a {
    position: relative;
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    min-height: 52px;
    padding: 0 10px !important;
    color: var(--gcrm-muted) !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1;
    white-space: nowrap;
}

.gcrm-tabs > a::after {
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 2px;
    background: transparent;
    content: "";
}

.gcrm-tabs > a:hover,
.gcrm-tabs > a.is-active {
    color: var(--gcrm-primary) !important;
}

.gcrm-tabs > a.is-active::after {
    background: var(--gcrm-primary);
}

.gcrm-tabs > a span {
    color: var(--gcrm-muted-light);
    font-size: 10px !important;
}

/* =========================================================
   TABLE
   ========================================================= */

.gcrm-table-wrap {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.gcrm-table-wrap > table {
    width: 100% !important;
    min-width: 950px;
    margin: 0 !important;
    border: 0 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    table-layout: auto;
    background: var(--gcrm-surface);
}

.gcrm-table-wrap > table th,
.gcrm-table-wrap > table td {
    height: auto !important;
    margin: 0 !important;
    padding: 15px 15px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--gcrm-border-soft) !important;
    vertical-align: middle !important;
    text-align: left !important;
}

.gcrm-table-wrap > table th {
    color: #61728c !important;
    background: var(--gcrm-surface-soft) !important;
    font-size: 9px !important;
    font-weight: 850 !important;
    letter-spacing: 0.5px;
    line-height: 1.25 !important;
    text-transform: uppercase;
    white-space: nowrap;
}

.gcrm-table-wrap > table td {
    color: var(--gcrm-text) !important;
    background: transparent;
    font-size: 11px !important;
    font-weight: 400;
    line-height: 1.55 !important;
}

.gcrm-table-wrap > table tbody tr {
    background: transparent;
    transition: background var(--gcrm-transition);
}

.gcrm-table-wrap > table tbody tr:hover {
    background: rgba(16, 135, 124, 0.025);
}

.gcrm-table-wrap > table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.gcrm-table-wrap > table th:nth-child(1) {
    width: 115px;
}

.gcrm-table-wrap > table th:nth-child(2) {
    width: 150px;
}

.gcrm-table-wrap > table th:nth-child(3) {
    width: 145px;
}

.gcrm-table-wrap > table th:nth-child(5) {
    width: 165px;
}

.gcrm-table-wrap > table th:nth-child(6) {
    width: 250px;
}

.gcrm-table-wrap td > strong {
    display: block;
    margin: 0 0 3px;
    color: var(--gcrm-text);
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.35;
}

.gcrm-table-wrap td > small {
    display: block;
    margin: 2px 0 0;
    color: var(--gcrm-muted-light);
    font-size: 9px !important;
    line-height: 1.45;
}

.gcrm-table-wrap td > code {
    display: inline-flex;
    margin: 0 0 5px;
    padding: 4px 7px;
    color: #334155;
    background: #edf2f7;
    border: 0;
    border-radius: 6px;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace !important;
    font-size: 10px !important;
    font-weight: 700;
}

.gcrm-complaint,
.gcrm-followup-work {
    max-width: 360px;
    color: #52627a !important;
    line-height: 1.6 !important;
}

.gcrm-row-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

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

.gcrm-status {
    width: 150px !important;
    min-height: 37px !important;
    margin: 0 !important;
    padding: 8px 31px 8px 10px !important;
    color: #b9470b !important;
    background-color: var(--gcrm-orange-soft) !important;
    border: 1px solid #fb923c !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 650 !important;
    line-height: 1.2 !important;
}

.gcrm-status.status-in_service {
    color: #1d4ed8 !important;
    background-color: var(--gcrm-blue-soft) !important;
    border-color: #93b4fb !important;
}

.gcrm-status.status-completed {
    color: #047857 !important;
    background-color: var(--gcrm-green-soft) !important;
    border-color: #75d7b3 !important;
}

.gcrm-status:focus {
    border-color: var(--gcrm-primary) !important;
    box-shadow:
        0 0 0 3px rgba(16, 135, 124, 0.12) !important;
}

.gcrm-status:disabled {
    cursor: wait;
    opacity: 0.65;
}

.gcrm-save {
    display: block;
    min-height: 15px;
    margin-top: 4px;
    color: var(--gcrm-muted);
    font-size: 9px !important;
}

.gcrm-save.is-success {
    color: var(--gcrm-green);
}

.gcrm-save.is-error {
    color: var(--gcrm-red);
}

/* =========================================================
   ACTION BUTTON DALAM TABLE
   ========================================================= */

.gcrm-wa,
.gcrm-receipt-view,
.gcrm-receipt-add {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap;
    transition:
        background var(--gcrm-transition),
        color var(--gcrm-transition),
        border-color var(--gcrm-transition);
}

.gcrm-wa {
    color: #ffffff !important;
    background: var(--gcrm-primary) !important;
    border: 1px solid var(--gcrm-primary) !important;
}

.gcrm-wa:hover {
    color: #ffffff !important;
    background: var(--gcrm-primary-hover) !important;
    border-color: var(--gcrm-primary-hover) !important;
}

.gcrm-receipt-view,
.gcrm-receipt-add {
    color: var(--gcrm-primary) !important;
    background: var(--gcrm-primary-soft) !important;
    border: 1px solid #9eddd3 !important;
}

.gcrm-receipt-view:hover,
.gcrm-receipt-add:hover {
    color: #ffffff !important;
    background: var(--gcrm-primary) !important;
    border-color: var(--gcrm-primary) !important;
}

.gcrm-age {
    display: inline-flex;
    margin-bottom: 4px;
    padding: 5px 9px;
    color: #0872a3;
    background: #e2f4ff;
    border-radius: 20px;
    font-size: 10px !important;
    font-weight: 750;
}

.gcrm-not-due {
    color: var(--gcrm-muted-light);
    font-size: 10px !important;
}

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

.gcrm-empty {
    display: flex;
    min-height: 235px;
    padding: 30px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--gcrm-muted);
    text-align: center;
}

.gcrm-empty b {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 12px;
    place-items: center;
    color: var(--gcrm-primary);
    background: var(--gcrm-primary-soft);
    border-radius: 50%;
    font-size: 23px !important;
}

.gcrm-empty strong {
    color: var(--gcrm-text);
    font-size: 13px !important;
}

.gcrm-empty p {
    margin: 5px 0 0 !important;
    color: var(--gcrm-muted);
    font-size: 11px !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.gcrm-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 24px 0 0;
}

.gcrm-pages .page-numbers {
    display: grid !important;
    width: 35px;
    height: 35px;
    place-items: center;
    color: var(--gcrm-muted) !important;
    background: var(--gcrm-surface);
    border: 1px solid var(--gcrm-border);
    border-radius: 8px;
    font-size: 11px !important;
    font-weight: 700;
}

.gcrm-pages .page-numbers:hover,
.gcrm-pages .page-numbers.current {
    color: #ffffff !important;
    background: var(--gcrm-primary);
    border-color: var(--gcrm-primary);
}

/* =========================================================
   ACCESS LOGIN
   ========================================================= */

.gcrm-access {
    max-width: 520px;
    margin: 70px auto;
    padding: 35px;
    color: var(--gcrm-text);
    background: #ffffff;
    border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-large);
    box-shadow: var(--gcrm-shadow);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    text-align: center;
}

.gcrm-access h2 {
    margin: 0 0 8px;
    color: var(--gcrm-text);
    font-size: 24px;
}

.gcrm-access p {
    margin: 0 0 20px;
    color: var(--gcrm-muted);
}

.gcrm-access a {
    display: inline-flex;
    padding: 11px 17px;
    color: #ffffff;
    background: var(--gcrm-primary);
    border-radius: 9px;
    font-weight: 700;
    text-decoration: none;
}

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

.gcrm-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    display: flex !important;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 22px !important;
    opacity: 0;
    pointer-events: none;
    transition:
        visibility var(--gcrm-transition),
        opacity var(--gcrm-transition);
}

.gcrm-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.gcrm-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 15, 27, 0.72);
    backdrop-filter: blur(6px);
}

.gcrm-modal-dialog {
    position: relative;
    z-index: 2;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    width: min(690px, 100%) !important;
    max-width: 690px !important;
    max-height: calc(100vh - 44px);
    margin: 0 !important;
    padding: 0 !important;
    color: var(--gcrm-text);
    background: var(--gcrm-surface);
    border: 1px solid var(--gcrm-border);
    border-radius: var(--gcrm-radius-large);
    box-shadow: var(--gcrm-modal-shadow);
    transform: translateY(15px) scale(0.985);
    transition: transform var(--gcrm-transition);
}

.gcrm-modal.is-open .gcrm-modal-dialog {
    transform: translateY(0) scale(1);
}

.gcrm-small-dialog {
    width: min(480px, 100%) !important;
    max-width: 480px !important;
}

.gcrm-template-dialog {
    width: min(780px, 100%) !important;
    max-width: 780px !important;
}

.gcrm-receipt-dialog {
    width: min(1080px, 100%) !important;
    max-width: 1080px !important;
}

.gcrm-receipt-view-dialog {
    width: min(1020px, 100%) !important;
    max-width: 1020px !important;
}

.gcrm-modal-head {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 21px;
    background: var(--gcrm-surface);
    border-bottom: 1px solid var(--gcrm-border);
}

.gcrm-modal-head > div {
    min-width: 0;
}

.gcrm-modal-head > div > span {
    display: block;
    margin-bottom: 5px;
    color: var(--gcrm-primary);
    font-size: 9px !important;
    font-weight: 850;
    letter-spacing: 1.1px;
}

.gcrm-modal-head h2 {
    margin: 0 0 4px !important;
    padding: 0 !important;
    color: var(--gcrm-text) !important;
    font-size: 19px !important;
    font-weight: 750 !important;
    line-height: 1.3 !important;
}

.gcrm-modal-head p {
    margin: 0 !important;
    color: var(--gcrm-muted) !important;
    font-size: 11px !important;
    line-height: 1.5 !important;
}

.gcrm-modal-close {
    display: grid !important;
    flex: 0 0 34px;
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center;
    color: var(--gcrm-muted) !important;
    background: var(--gcrm-surface-soft) !important;
    border: 1px solid var(--gcrm-border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    font-size: 20px !important;
    line-height: 1 !important;
}

.gcrm-modal-close:hover {
    color: var(--gcrm-red) !important;
    background: var(--gcrm-red-soft) !important;
    border-color: #fecaca !important;
}

.gcrm-manual-form,
.gcrm-template-dialog form,
.gcrm-receipt-form {
    overflow-y: auto;
    margin: 0 !important;
    padding: 21px !important;
}

/* =========================================================
   FORM UMUM
   ========================================================= */

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

.gcrm-form-grid > label,
.gcrm-template-fields > label,
.gcrm-item-main > label,
.gcrm-item-description-wrap,
.gcrm-item-numbers > label {
    display: block !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.gcrm-form-full {
    grid-column: 1 / -1;
}

.gcrm-form-grid label > span,
.gcrm-template-fields label > span,
.gcrm-item-main label > span,
.gcrm-item-description-wrap > span,
.gcrm-item-numbers label > span {
    display: block;
    margin: 0 0 6px;
    color: var(--gcrm-text);
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.35;
}

.gcrm-form-grid label > span b,
.gcrm-template-fields label > span b,
.gcrm-item-main label > span b {
    color: var(--gcrm-red);
}

.gcrm-form-grid input,
.gcrm-form-grid select,
.gcrm-form-grid textarea,
.gcrm-template-fields textarea,
.gcrm-item-main input,
.gcrm-item-main select,
.gcrm-item-description,
.gcrm-item-numbers input,
.gcrm-item-numbers select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    color: var(--gcrm-text) !important;
    background: var(--gcrm-surface) !important;
    border: 1px solid var(--gcrm-border) !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    transition:
        border-color var(--gcrm-transition),
        box-shadow var(--gcrm-transition);
}

.gcrm-form-grid textarea,
.gcrm-template-fields textarea,
.gcrm-item-description {
    min-height: 76px !important;
    resize: vertical;
}

.gcrm-form-grid input:focus,
.gcrm-form-grid select:focus,
.gcrm-form-grid textarea:focus,
.gcrm-template-fields textarea:focus,
.gcrm-item-main input:focus,
.gcrm-item-main select:focus,
.gcrm-item-description:focus,
.gcrm-item-numbers input:focus,
.gcrm-item-numbers select:focus {
    border-color: var(--gcrm-primary) !important;
    box-shadow:
        0 0 0 3px rgba(16, 135, 124, 0.11) !important;
}

.gcrm-form-grid input.is-invalid,
.gcrm-item-name.is-invalid {
    background: var(--gcrm-red-soft) !important;
    border-color: var(--gcrm-red) !important;
}

.gcrm-form-grid label > small {
    display: block;
    margin-top: 5px;
    color: var(--gcrm-muted-light);
    font-size: 9px !important;
    line-height: 1.45;
}

.gcrm-form-message,
.gcrm-completion-message {
    display: none;
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 8px;
    font-size: 11px !important;
    line-height: 1.5;
}

.gcrm-form-message.is-success,
.gcrm-completion-message.is-success {
    display: block;
    color: #047857;
    background: var(--gcrm-green-soft);
    border: 1px solid #a7e9ce;
}

.gcrm-form-message.is-error,
.gcrm-completion-message.is-error {
    display: block;
    color: #b91c1c;
    background: var(--gcrm-red-soft);
    border: 1px solid #fecaca;
}

.gcrm-form-actions {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin: 19px -21px -21px !important;
    padding: 14px 21px !important;
    background: var(--gcrm-surface-soft);
    border-top: 1px solid var(--gcrm-border);
}

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

.gcrm-completion-content {
    overflow-y: auto;
    padding: 25px 22px 22px;
    text-align: center;
}

.gcrm-completion-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin: 0 auto 14px;
    place-items: center;
    color: var(--gcrm-primary);
    background: var(--gcrm-primary-soft);
    border-radius: 50%;
    font-size: 25px !important;
}

.gcrm-completion-content > p {
    max-width: 350px;
    margin: 0 auto 20px !important;
    color: var(--gcrm-muted) !important;
    font-size: 12px !important;
    line-height: 1.6 !important;
}

.gcrm-completion-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.gcrm-completion-actions > button {
    width: 100%;
}

/* =========================================================
   TEMPLATE WHATSAPP
   ========================================================= */

.gcrm-template-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gcrm-template-fields label > small {
    display: block;
    margin: -2px 0 7px;
    color: var(--gcrm-muted);
    font-size: 9px !important;
    line-height: 1.4;
}

.gcrm-template-help {
    margin-top: 17px;
    padding: 12px 13px;
    color: #326475;
    background: #effaff;
    border: 1px solid #b8e0ef;
    border-radius: 8px;
    font-size: 10px !important;
    line-height: 1.7;
}

.gcrm-template-help strong {
    color: #145770;
}

/* =========================================================
   FORM STRUK
   ========================================================= */

.gcrm-receipt-section {
    margin: 0 0 22px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--gcrm-border);
}

.gcrm-receipt-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.gcrm-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 15px;
}

.gcrm-section-title > span,
.gcrm-section-title-inner > span {
    display: grid;
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    place-items: center;
    color: #ffffff;
    background: var(--gcrm-primary);
    border-radius: 8px;
    font-size: 11px !important;
    font-weight: 800;
}

.gcrm-section-title > div,
.gcrm-section-title-inner > div {
    min-width: 0;
}

.gcrm-section-title strong,
.gcrm-section-title-inner strong {
    display: block;
    color: var(--gcrm-text);
    font-size: 13px !important;
    font-weight: 750;
}

.gcrm-section-title small,
.gcrm-section-title-inner small {
    display: block;
    margin-top: 2px;
    color: var(--gcrm-muted);
    font-size: 9px !important;
}

.gcrm-section-between {
    justify-content: space-between;
}

.gcrm-section-title-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gcrm-receipt-customer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-bottom: 15px;
    padding: 11px;
    background: var(--gcrm-primary-soft);
    border: 1px solid #b8e5dd;
    border-radius: 9px;
}

.gcrm-receipt-customer > div {
    min-width: 0;
    padding: 5px 9px;
}

.gcrm-receipt-customer small {
    display: block;
    margin: 0 0 3px;
    color: var(--gcrm-muted);
    font-size: 8px !important;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.gcrm-receipt-customer strong {
    display: block;
    overflow: hidden;
    color: var(--gcrm-text);
    font-size: 11px !important;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcrm-add-item {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    padding: 8px 11px !important;
    color: var(--gcrm-primary) !important;
    background: var(--gcrm-primary-soft) !important;
    border: 1px solid #9eddd3 !important;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 750 !important;
}

.gcrm-add-item:hover {
    color: #ffffff !important;
    background: var(--gcrm-primary) !important;
    border-color: var(--gcrm-primary) !important;
}

.gcrm-receipt-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gcrm-receipt-item {
    padding: 14px;
    background: var(--gcrm-surface-soft);
    border: 1px solid var(--gcrm-border);
    border-radius: 10px;
}

.gcrm-item-main {
    display: grid;
    grid-template-columns:
        minmax(110px, 0.7fr)
        minmax(250px, 2fr)
        32px;
    gap: 10px;
    align-items: end;
}

.gcrm-item-name-wrap {
    min-width: 0;
}

.gcrm-remove-item {
    display: grid !important;
    width: 32px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    place-items: center;
    color: var(--gcrm-red) !important;
    background: var(--gcrm-red-soft) !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.gcrm-remove-item:hover {
    color: #ffffff !important;
    background: var(--gcrm-red) !important;
    border-color: var(--gcrm-red) !important;
}

.gcrm-remove-item:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.gcrm-item-description-wrap {
    margin-top: 11px !important;
}

.gcrm-item-numbers {
    display: grid;
    grid-template-columns:
        minmax(80px, 0.65fr)
        minmax(150px, 1fr)
        minmax(130px, 0.9fr)
        minmax(140px, 1fr);
    gap: 10px;
    align-items: end;
    margin-top: 11px;
}

.gcrm-item-total {
    display: flex;
    min-height: 63px;
    padding: 9px 11px;
    justify-content: center;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--gcrm-border);
    border-radius: 8px;
}

.gcrm-item-total span {
    display: block;
    margin-bottom: 4px;
    color: var(--gcrm-muted);
    font-size: 9px !important;
}

.gcrm-item-total strong {
    display: block;
    overflow: hidden;
    color: var(--gcrm-primary);
    font-size: 13px !important;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcrm-payment-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 20px;
    align-items: start;
}

.gcrm-receipt-total-card {
    padding: 15px;
    background: var(--gcrm-surface-soft);
    border: 1px solid var(--gcrm-border);
    border-radius: 10px;
}

.gcrm-receipt-total-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
    color: var(--gcrm-muted);
    font-size: 11px !important;
}

.gcrm-receipt-total-card > div:last-child {
    margin-bottom: 0;
}

.gcrm-receipt-total-card strong {
    color: var(--gcrm-text);
    font-size: 12px !important;
}

.gcrm-receipt-total-card .gcrm-grand-total {
    margin-top: 13px;
    padding-top: 13px;
    color: var(--gcrm-text);
    border-top: 1px solid var(--gcrm-border);
    font-size: 13px !important;
    font-weight: 800;
}

.gcrm-receipt-total-card .gcrm-grand-total strong {
    color: var(--gcrm-primary);
    font-size: 18px !important;
}

.gcrm-receipt-form-actions {
    position: sticky;
    bottom: -21px;
    z-index: 5;
}

/* =========================================================
   MODAL VIEW STRUK
   ========================================================= */

.gcrm-receipt-view-content {
    overflow-y: auto;
    flex: 1 1 auto;
    padding: 20px;
    background: #edf2f6;
}

.gcrm-receipt-view-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 20px;
    background: var(--gcrm-surface-soft);
    border-top: 1px solid var(--gcrm-border);
}

.gcrm-receipt-loading,
.gcrm-receipt-error {
    display: flex;
    min-height: 280px;
    padding: 30px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--gcrm-muted);
    text-align: center;
}

.gcrm-receipt-loading p,
.gcrm-receipt-error p {
    margin: 8px 0 0 !important;
    color: var(--gcrm-muted);
    font-size: 11px !important;
}

.gcrm-receipt-error strong {
    color: var(--gcrm-red);
    font-size: 13px !important;
}

.gcrm-spinner {
    width: 31px;
    height: 31px;
    border: 3px solid var(--gcrm-border);
    border-top-color: var(--gcrm-primary);
    border-radius: 50%;
    animation: gcrm-spin 0.75s linear infinite;
}

@keyframes gcrm-spin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   DIGITAL RECEIPT
   ========================================================= */

.gcrm-digital-receipt {
    overflow: hidden;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    color: #172238;
    background: #ffffff;
    border: 1px solid #d9e2eb;
    border-radius: 12px;
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.08);
}

.gcrm-print-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    padding: 24px 26px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            #0b6e65 0%,
            #10877c 58%,
            #17a493 100%
        );
}

.gcrm-print-head > div:first-child > b {
    display: block;
    margin-bottom: 7px;
    color: #bff8ed;
    font-size: 10px !important;
    font-weight: 900;
    letter-spacing: 2px;
}

.gcrm-print-head h2 {
    margin: 0 0 4px !important;
    color: #ffffff !important;
    font-size: 21px !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

.gcrm-print-head p {
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 9px !important;
}

.gcrm-print-number {
    flex: 0 0 auto;
    text-align: right;
}

.gcrm-print-number span,
.gcrm-print-number small {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 8px !important;
}

.gcrm-print-number strong {
    display: block;
    margin: 4px 0;
    color: #ffffff;
    font-size: 13px !important;
    font-weight: 800;
}

.gcrm-print-customer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 18px 26px;
    background: #f8fafc;
    border-bottom: 1px solid #e1e8ef;
}

.gcrm-print-customer > div {
    min-width: 0;
    padding: 0 15px;
    border-right: 1px solid #dfe6ee;
}

.gcrm-print-customer > div:first-child {
    padding-left: 0;
}

.gcrm-print-customer > div:last-child {
    padding-right: 0;
    border-right: 0;
}

.gcrm-print-customer span,
.gcrm-print-notes span,
.gcrm-print-details > div > span,
.gcrm-view-photo > span {
    display: block;
    margin-bottom: 4px;
    color: #718096;
    font-size: 8px !important;
    font-weight: 850;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.gcrm-print-customer strong {
    display: block;
    overflow: hidden;
    margin-bottom: 2px;
    color: #172238;
    font-size: 12px !important;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gcrm-print-customer small {
    color: #8492a6;
    font-size: 9px !important;
}

.gcrm-print-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 17px 26px;
    border-bottom: 1px solid #e1e8ef;
}

.gcrm-print-notes > div {
    padding: 11px;
    background: #f8fafc;
    border: 1px solid #e5ebf1;
    border-radius: 8px;
}

.gcrm-print-notes p,
.gcrm-print-details p {
    margin: 0 !important;
    color: #344258 !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
    white-space: pre-line;
}

.gcrm-print-table-wrap {
    overflow-x: auto;
    padding: 18px 26px 0;
}

.gcrm-print-table {
    width: 100% !important;
    min-width: 620px;
    margin: 0 !important;
    border: 1px solid #dfe6ee !important;
    border-spacing: 0;
    border-collapse: collapse !important;
}

.gcrm-print-table th,
.gcrm-print-table td {
    padding: 10px 11px !important;
    border: 0 !important;
    border-right: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    vertical-align: top !important;
    text-align: left !important;
}

.gcrm-print-table th:last-child,
.gcrm-print-table td:last-child {
    border-right: 0 !important;
}

.gcrm-print-table th {
    color: #637189 !important;
    background: #f4f7fa !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.gcrm-print-table td {
    color: #334155 !important;
    background: #ffffff !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
}

.gcrm-print-table td:first-child {
    width: 42px;
}

.gcrm-print-table td:nth-child(3) {
    width: 60px;
}

.gcrm-print-table td:nth-child(4),
.gcrm-print-table td:nth-child(5) {
    width: 125px;
}

.gcrm-print-table td > strong {
    display: block;
    margin-bottom: 3px;
    color: #172238;
    font-size: 10px !important;
    font-weight: 750;
}

.gcrm-print-table td > span,
.gcrm-print-table td > em {
    display: inline-flex;
    margin: 2px 4px 2px 0;
    padding: 3px 5px;
    color: #0f766e;
    background: #e5f8f4;
    border-radius: 4px;
    font-size: 7px !important;
    font-style: normal;
    font-weight: 700;
}

.gcrm-print-table td > em {
    color: #9a5600;
    background: #fff3d8;
}

.gcrm-print-table td > small {
    display: block;
    margin-top: 3px;
    color: #748298;
    font-size: 8px !important;
    white-space: pre-line;
}

.gcrm-receipt-empty {
    padding: 28px !important;
    color: #94a3b8 !important;
    text-align: center !important;
}

.gcrm-print-bottom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    padding: 20px 26px;
}

.gcrm-print-details {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.gcrm-print-details > div {
    padding-bottom: 11px;
    border-bottom: 1px dashed #dce3eb;
}

.gcrm-print-details > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.gcrm-print-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.gcrm-print-meta p {
    padding: 8px;
    background: #f7f9fc;
    border-radius: 7px;
}

.gcrm-print-meta p span,
.gcrm-print-meta p strong {
    display: block;
}

.gcrm-print-meta p span {
    margin-bottom: 3px;
    color: #8492a6;
    font-size: 7px !important;
    text-transform: uppercase;
}

.gcrm-print-meta p strong {
    color: #334155;
    font-size: 9px !important;
}

.gcrm-print-meta .payment-paid {
    color: #047857;
}

.gcrm-print-meta .payment-partial {
    color: #b45309;
}

.gcrm-print-meta .payment-unpaid {
    color: #b91c1c;
}

.gcrm-print-total {
    align-self: start;
    padding: 14px;
    background: #f7f9fc;
    border: 1px solid #e1e7ee;
    border-radius: 9px;
}

.gcrm-print-total p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 9px !important;
    color: #718096 !important;
    font-size: 9px !important;
}

.gcrm-print-total p:last-child {
    margin-bottom: 0 !important;
}

.gcrm-print-total strong {
    color: #334155;
    font-size: 10px !important;
}

.gcrm-print-total .is-total {
    margin-top: 11px !important;
    padding-top: 11px;
    color: #172238 !important;
    border-top: 1px solid #dce3eb;
    font-size: 11px !important;
    font-weight: 800;
}

.gcrm-print-total .is-total strong {
    color: var(--gcrm-primary);
    font-size: 15px !important;
}

.gcrm-view-photo {
    margin: 0 26px 20px;
    padding: 13px;
    background: #f7f9fc;
    border: 1px solid #e1e7ee;
    border-radius: 9px;
}

.gcrm-view-photo img {
    display: block;
    max-width: 230px;
    max-height: 270px;
    object-fit: contain;
    border: 1px solid #d9e2eb;
    border-radius: 7px;
}

.gcrm-print-footer {
    padding: 14px 25px;
    color: #ffffff;
    background: #172238;
    text-align: center;
}

.gcrm-print-footer strong,
.gcrm-print-footer small {
    display: block;
}

.gcrm-print-footer strong {
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 9px !important;
}

.gcrm-print-footer small {
    color: #8fa0b9;
    font-size: 7px !important;
}

/* =========================================================
   TOAST
   ========================================================= */

.gcrm-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000001;
    max-width: min(360px, calc(100vw - 40px));
    padding: 12px 15px;
    color: #ffffff;
    background: #172238;
    border-radius: 9px;
    box-shadow:
        0 15px 40px rgba(15, 23, 42, 0.25);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 250ms ease,
        transform 250ms ease;
}

.gcrm-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.gcrm-toast-success {
    background: var(--gcrm-primary);
}

.gcrm-toast-error {
    background: #b91c1c;
}

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

@media (max-width: 1100px) {
    .gcrm-app {
        grid-template-columns: 215px minmax(0, 1fr);
    }

    .gcrm-sidebar {
        width: 215px;
    }

    .gcrm-main {
        padding: 25px 20px 40px !important;
    }

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

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

    .gcrm-payment-layout {
        grid-template-columns: 1fr;
    }

    .gcrm-receipt-total-card {
        width: min(380px, 100%);
        margin-left: auto;
    }
}

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

@media (max-width: 782px) {
    .admin-bar .gcrm-sidebar {
        top: 46px;
        height: calc(100vh - 46px);
        min-height: calc(100vh - 46px);
    }
}

@media (max-width: 760px) {
    .gcrm-app {
        display: block !important;
        width: 100% !important;
        min-height: 100vh;
        margin: 0 !important;
    }

    .gcrm-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1002;
        width: 245px;
        height: 100vh;
        min-height: 100vh;
        transform: translateX(-105%);
        transition: transform 220ms ease;
    }

    .admin-bar .gcrm-sidebar {
        top: 46px;
        height: calc(100vh - 46px);
        min-height: calc(100vh - 46px);
    }

    .gcrm-app.menu-open .gcrm-sidebar {
        transform: translateX(0);
    }

    .gcrm-overlay {
        position: fixed;
        inset: 0;
        z-index: 1001;
        display: block;
        visibility: hidden;
        margin: 0 !important;
        padding: 0 !important;
        background: rgba(8, 15, 27, 0.65) !important;
        border: 0 !important;
        border-radius: 0 !important;
        opacity: 0;
        pointer-events: none;
        transition:
            visibility var(--gcrm-transition),
            opacity var(--gcrm-transition);
    }

    .gcrm-app.menu-open .gcrm-overlay {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    .gcrm-main {
        width: 100%;
        min-height: 100vh;
        padding: 0 15px 35px !important;
    }

    .gcrm-mobile {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 40;
        align-items: center;
        gap: 11px;
        min-height: 59px;
        margin: 0 -15px 20px;
        padding: 9px 15px;
        background: rgba(244, 247, 251, 0.94);
        border-bottom: 1px solid var(--gcrm-border);
        backdrop-filter: blur(10px);
    }

    .admin-bar .gcrm-mobile {
        top: 46px;
    }

    .gcrm-menu {
        display: grid !important;
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        place-items: center;
        color: var(--gcrm-text) !important;
        background: var(--gcrm-surface) !important;
        border: 1px solid var(--gcrm-border) !important;
        border-radius: 9px !important;
        box-shadow: none !important;
        font-size: 18px !important;
    }

    .gcrm-mobile strong {
        color: var(--gcrm-text);
        font-size: 13px !important;
    }

    .gcrm-head {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .gcrm-head h1 {
        font-size: 29px !important;
    }

    .gcrm-head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .gcrm-head-actions button {
        width: 100%;
    }

    .gcrm-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .gcrm-stats > a {
        min-height: 82px;
        padding: 13px !important;
    }

    .gcrm-stats > a > i {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 16px !important;
    }

    .gcrm-stats > a strong {
        font-size: 19px !important;
    }

    .gcrm-stats > a small {
        font-size: 9px !important;
    }

    .gcrm-modal {
        align-items: flex-end;
        padding: 0 !important;
    }

    .gcrm-modal-dialog,
    .gcrm-small-dialog,
    .gcrm-template-dialog,
    .gcrm-receipt-dialog,
    .gcrm-receipt-view-dialog {
        width: 100% !important;
        max-width: none !important;
        max-height: 94vh;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius:
            17px 17px 0 0;
    }

    .gcrm-modal-head {
        padding: 16px;
    }

    .gcrm-manual-form,
    .gcrm-template-dialog form,
    .gcrm-receipt-form {
        padding: 16px !important;
    }

    .gcrm-form-actions {
        margin:
            17px -16px -16px !important;
        padding: 13px 16px !important;
    }

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

    .gcrm-form-full {
        grid-column: auto;
    }

    .gcrm-receipt-customer {
        grid-template-columns: 1fr;
    }

    .gcrm-section-between {
        align-items: flex-start;
        flex-direction: column;
    }

    .gcrm-add-item {
        width: 100%;
    }

    .gcrm-item-main {
        grid-template-columns: 1fr 42px;
    }

    .gcrm-item-main > label:first-child {
        grid-column: 1 / -1;
    }

    .gcrm-item-name-wrap {
        grid-column: 1;
    }

    .gcrm-remove-item {
        grid-column: 2;
    }

    .gcrm-item-numbers {
        grid-template-columns: 1fr;
    }

    .gcrm-receipt-total-card {
        width: 100%;
    }

    .gcrm-receipt-view-content {
        padding: 12px;
    }

    .gcrm-receipt-view-actions {
        flex-wrap: wrap;
        padding: 12px;
    }

    .gcrm-receipt-view-actions button {
        flex: 1 1 auto;
    }

    .gcrm-print-head {
        align-items: flex-start;
        flex-direction: column;
        padding: 19px;
    }

    .gcrm-print-number {
        text-align: left;
    }

    .gcrm-print-customer {
        grid-template-columns: 1fr;
        padding: 14px 19px;
    }

    .gcrm-print-customer > div,
    .gcrm-print-customer > div:first-child,
    .gcrm-print-customer > div:last-child {
        padding: 9px 0;
        border-right: 0;
        border-bottom: 1px solid #e1e8ef;
    }

    .gcrm-print-customer > div:last-child {
        border-bottom: 0;
    }

    .gcrm-print-notes {
        grid-template-columns: 1fr;
        padding: 14px 19px;
    }

    .gcrm-print-table-wrap {
        padding: 14px 19px 0;
    }

    .gcrm-print-bottom {
        grid-template-columns: 1fr;
        padding: 17px 19px;
    }

    .gcrm-view-photo {
        margin: 0 19px 17px;
    }

    .gcrm-print-meta {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .gcrm-stats {
        grid-template-columns: 1fr;
    }

    .gcrm-form-actions,
    .gcrm-receipt-view-actions {
        flex-direction: column-reverse;
    }

    .gcrm-form-actions button,
    .gcrm-receipt-view-actions button {
        width: 100%;
    }

    .gcrm-print-table-wrap {
        overflow-x: auto;
    }
}

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

@media print {
    @page {
        size: A4;
        margin: 10mm;
    }

    body.gcrm-printing {
        background: #ffffff !important;
    }

    body.gcrm-printing > * {
        visibility: hidden !important;
    }

    body.gcrm-printing
        #gcrm-receipt-view-modal,
    body.gcrm-printing
        #gcrm-receipt-view-modal *,
    body.gcrm-printing
        #gcrm-print-receipt,
    body.gcrm-printing
        #gcrm-print-receipt * {
        visibility: visible !important;
    }

    body.gcrm-printing
        #gcrm-receipt-view-modal {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        overflow: visible !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        background: #ffffff !important;
        opacity: 1 !important;
    }

    body.gcrm-printing
        .gcrm-modal-backdrop,
    body.gcrm-printing
        .gcrm-no-print,
    body.gcrm-printing
        .gcrm-receipt-view-actions {
        display: none !important;
    }

    body.gcrm-printing
        .gcrm-receipt-view-dialog,
    body.gcrm-printing
        .gcrm-receipt-view-content {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.gcrm-printing
        #gcrm-print-receipt {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    .gcrm-print-table tr,
    .gcrm-print-customer,
    .gcrm-print-notes,
    .gcrm-print-bottom {
        page-break-inside: avoid;
    }

    .gcrm-view-photo img {
        max-height: 180px;
    }
}

/* =========================================================
   GARAGE CRM 2.0 — BRANDING ERFOLG & FITUR BARU
   ========================================================= */
:root{--gcrm-primary:#075cf6;--gcrm-primary-hover:#064bd0;--gcrm-primary-soft:#eaf1ff;--gcrm-sidebar:#071326;--gcrm-sidebar-hover:#12213a}
.gcrm-brand{display:flex!important;flex-direction:column;align-items:flex-start!important;height:auto!important;padding:8px 12px!important}.gcrm-brand img{display:block;width:165px;max-height:48px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}.gcrm-brand>small{color:#7f96b8!important;font-size:10px!important;letter-spacing:1.5px;text-transform:uppercase}.gcrm-sidebar nav a.is-active{color:#05235a!important;background:#b7d1ff!important}.gcrm-sidebar nav a:hover{background:#102341}.gcrm-head>div:first-child>span{color:#075cf6}.gcrm-add-lead,.gcrm-template-button,.gcrm-btn-save,.gcrm-btn-primary,.gcrm-add-catalog{background:#075cf6!important;border-color:#075cf6!important;color:#fff!important}.gcrm-add-lead:hover,.gcrm-template-button:hover,.gcrm-btn-save:hover,.gcrm-btn-primary:hover,.gcrm-add-catalog:hover{background:#064bd0!important;border-color:#064bd0!important}
.gcrm-theme{margin-top:12px;padding:8px 10px;color:#9db0ce;background:#12213a;border:1px solid #233553;border-radius:8px;font-size:11px}.gcrm-theme:hover{color:#fff}.gcrm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.gcrm-toolbar select,.gcrm-toolbar input{min-height:40px;padding:8px 12px;background:var(--gcrm-surface);border:1px solid var(--gcrm-border);border-radius:9px;color:var(--gcrm-text)}.gcrm-toolbar input{width:min(330px,100%)}
.gcrm-detail,.gcrm-follow-result,.gcrm-edit-catalog,.gcrm-toggle-catalog,.gcrm-btn-soft{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:8px 10px;color:#075cf6;background:#edf3ff;border:1px solid #b8cefa;border-radius:7px;font-size:10px;font-weight:750}.gcrm-detail:hover,.gcrm-follow-result:hover,.gcrm-edit-catalog:hover,.gcrm-btn-soft:hover{color:#fff;background:#075cf6;border-color:#075cf6}.gcrm-toggle-catalog{color:#a4480b;background:#fff5e9;border-color:#fed0a0}
.gcrm-transaction-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:22px}.gcrm-transaction-choice button{display:flex;min-height:170px;padding:20px;align-items:flex-start;justify-content:center;flex-direction:column;text-align:left;background:var(--gcrm-surface-soft);border:1px solid var(--gcrm-border);border-radius:13px;color:var(--gcrm-text)}.gcrm-transaction-choice button:hover{border-color:#075cf6;box-shadow:0 12px 30px rgba(7,92,246,.13);transform:translateY(-2px)}.gcrm-transaction-choice b{display:grid;width:44px;height:44px;margin-bottom:14px;place-items:center;color:#075cf6;background:#eaf1ff;border-radius:11px;font-size:20px}.gcrm-transaction-choice strong{font-size:14px}.gcrm-transaction-choice span{margin-top:7px;color:var(--gcrm-muted);font-size:11px;line-height:1.6}.gcrm-receipt-form.is-quick .gcrm-full-only{display:none!important}
.gcrm-pick-catalog,.gcrm-add-item{margin-left:6px!important}.gcrm-catalog-picker{position:absolute;inset:80px 20px 20px;z-index:30;display:none;overflow:hidden;background:var(--gcrm-surface);border:1px solid var(--gcrm-border);border-radius:14px;box-shadow:0 20px 60px rgba(8,20,40,.2)}.gcrm-catalog-picker.is-open{display:block}.gcrm-catalog-picker>div{display:flex;gap:8px;padding:14px;border-bottom:1px solid var(--gcrm-border)}.gcrm-catalog-picker input{flex:1;min-height:42px;padding:9px 12px;border:1px solid var(--gcrm-border);border-radius:8px}.gcrm-catalog-picker>div button{width:42px;border:1px solid var(--gcrm-border);border-radius:8px;background:var(--gcrm-surface-soft)}.gcrm-catalog-picker section{display:flex;overflow-y:auto;max-height:calc(100% - 72px);padding:12px;flex-direction:column;gap:7px}.gcrm-catalog-picker section>button{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px;text-align:left;background:var(--gcrm-surface-soft);border:1px solid var(--gcrm-border);border-radius:9px;color:var(--gcrm-text)}.gcrm-catalog-picker section>button:hover{border-color:#075cf6;background:#edf3ff}.gcrm-catalog-picker section span b,.gcrm-catalog-picker section span small{display:block}.gcrm-catalog-picker section small{margin-top:3px;color:var(--gcrm-muted);font-size:9px}.gcrm-catalog-picker section strong{color:#075cf6;font-size:12px;white-space:nowrap}
.gcrm-detail-dialog{width:min(920px,100%)!important;max-width:920px!important}.gcrm-detail-content{overflow-y:auto;padding:20px}.gcrm-detail-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px;color:#fff;background:linear-gradient(135deg,#064bd0,#1683ff);border-radius:12px}.gcrm-detail-hero span,.gcrm-detail-hero small{display:block;font-size:10px;opacity:.8}.gcrm-detail-hero h3{margin:5px 0 2px!important;color:#fff!important;font-size:21px!important}.gcrm-detail-hero p{margin:0!important;color:#dceaff!important;font-size:11px!important}.gcrm-detail-hero>div:last-child{text-align:right}.gcrm-detail-hero b{display:block}.gcrm-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:14px}.gcrm-detail-grid section{padding:15px;background:var(--gcrm-surface-soft);border:1px solid var(--gcrm-border);border-radius:10px}.gcrm-detail-grid section.wide{grid-column:1/-1}.gcrm-detail-grid h4{margin:0 0 12px;color:var(--gcrm-text);font-size:12px}.gcrm-detail-grid p{margin:0 0 9px;color:var(--gcrm-muted);font-size:10px}.gcrm-detail-grid p span,.gcrm-detail-grid p strong{display:block}.gcrm-detail-grid p strong{margin-top:2px;color:var(--gcrm-text);font-size:11px}.gcrm-break{overflow-wrap:anywhere}.gcrm-history{display:grid;grid-template-columns:1fr 1.5fr auto;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--gcrm-border)}.gcrm-history:last-child{border-bottom:0}.gcrm-history strong,.gcrm-history small{display:block}.gcrm-history small{color:var(--gcrm-muted);font-size:9px}
.gcrm-revenue-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}.gcrm-money-card,.gcrm-metric{min-height:105px;padding:18px;background:var(--gcrm-surface);border:1px solid var(--gcrm-border);border-radius:13px}.gcrm-money-card small,.gcrm-metric small,.gcrm-metric span{display:block;color:var(--gcrm-muted);font-size:10px}.gcrm-money-card strong{display:block;margin-top:10px;color:var(--gcrm-text);font-size:21px}.gcrm-money-card.primary{color:#fff;background:linear-gradient(135deg,#064bd0,#1683ff);border:0}.gcrm-money-card.primary small,.gcrm-money-card.primary strong{color:#fff}.gcrm-money-card.green strong{color:#07875f}.gcrm-money-card.orange strong{color:#c84a0a}.gcrm-metric strong{display:block;margin:8px 0;color:#075cf6;font-size:25px}.gcrm-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.gcrm-panel-title{padding:16px 18px;border-bottom:1px solid var(--gcrm-border)}.gcrm-panel-title h2{margin:0;color:var(--gcrm-text);font-size:14px}.gcrm-mini-list{padding:8px 17px}.gcrm-mini-list>div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:11px 0;border-bottom:1px solid var(--gcrm-border-soft)}.gcrm-mini-list>div:last-child{border:0}.gcrm-mini-list span,.gcrm-mini-list small{display:block}.gcrm-mini-list span{color:var(--gcrm-text);font-size:11px}.gcrm-mini-list small{color:var(--gcrm-muted);font-size:9px}.gcrm-mini-list strong{color:#075cf6;font-size:11px}.gcrm-bars{display:flex;height:250px;padding:30px 18px 20px;align-items:flex-end;justify-content:space-around;gap:8px}.gcrm-bars>div{display:flex;position:relative;flex:1;height:100%;align-items:center;justify-content:flex-end;flex-direction:column}.gcrm-bars>div>span{width:min(34px,80%);min-height:5px;background:linear-gradient(#1683ff,#075cf6);border-radius:6px 6px 2px 2px}.gcrm-bars small{margin-top:6px;color:var(--gcrm-muted);font-size:8px}.gcrm-bars b{position:absolute;top:-20px;display:none;padding:4px;color:#fff;background:#071326;border-radius:4px;font-size:8px;white-space:nowrap}.gcrm-bars>div:hover b{display:block}
.gcrm-type,.gcrm-active{display:inline-flex;padding:5px 8px;border-radius:20px;font-size:9px;font-weight:750}.gcrm-type{color:#075cf6;background:#eaf1ff}.gcrm-type.type-part{color:#a4480b;background:#fff4e6}.gcrm-type.type-package{color:#7034a8;background:#f3eaff}.gcrm-active.is-on{color:#047857;background:#e8faf2}.gcrm-active.is-off{color:#6b7280;background:#edf0f4}
.gcrm-app.is-dark{--gcrm-background:#0b1220;--gcrm-surface:#151f2f;--gcrm-surface-soft:#1b2739;--gcrm-border:#2a3a51;--gcrm-border-soft:#233248;--gcrm-text:#eef4ff;--gcrm-muted:#95a7c1;--gcrm-muted-light:#71849f}.gcrm-app.is-dark .gcrm-main{background:var(--gcrm-background)}.gcrm-app.is-dark .gcrm-table-wrap>table,.gcrm-app.is-dark .gcrm-table-wrap>table td{background:var(--gcrm-surface)!important}.gcrm-app.is-dark .gcrm-table-wrap>table th{background:var(--gcrm-surface-soft)!important}.gcrm-app.is-dark .gcrm-item-total{background:var(--gcrm-surface)}
@media(max-width:1050px){.gcrm-revenue-cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.gcrm-brand img{filter:brightness(0) invert(1)}.gcrm-transaction-choice,.gcrm-detail-grid,.gcrm-report-grid{grid-template-columns:1fr}.gcrm-detail-grid section.wide{grid-column:auto}.gcrm-revenue-cards{grid-template-columns:1fr 1fr}.gcrm-history{grid-template-columns:1fr}.gcrm-toolbar{align-items:stretch;flex-direction:column}.gcrm-toolbar input{width:100%}.gcrm-catalog-picker{inset:60px 8px 8px}}@media(max-width:430px){.gcrm-revenue-cards{grid-template-columns:1fr}}

/* =========================================================
   FIX MODAL TERPOTONG SIDEBAR
   ========================================================= */

.gcrm-main {
    z-index: auto !important;
    overflow: visible !important;
}

.gcrm-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483000 !important;
    display: flex !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100vh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 22px !important;
    align-items: center !important;
    justify-content: center !important;
}

.gcrm-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.gcrm-modal-dialog {
    position: relative !important;
    z-index: 2 !important;
    margin: auto !important;
}

@media (max-width: 760px) {
    .gcrm-modal {
        padding: 0 !important;
        align-items: flex-end !important;
    }

    .gcrm-modal-dialog {
        margin: auto 0 0 !important;
    }
}

/* Final override logo Erfolg. */
.gcrm-sidebar .gcrm-brand img{width:175px!important;max-height:54px!important;padding:8px 10px!important;background:#fff!important;border-radius:9px!important;filter:none!important}
.gcrm-source-badge{display:inline-flex;margin-bottom:4px;padding:5px 8px;color:#075cf6;background:#eaf1ff;border-radius:20px;font-size:9px;font-weight:750}

/* =========================================================
   FILTER LAPORAN OMZET
   ========================================================= */
.gcrm-revenue-filter {
    margin-bottom: 18px;
    padding: 16px;
    background: var(--gcrm-surface);
    border: 1px solid var(--gcrm-border);
    border-radius: 14px;
}

.gcrm-range-presets {
    display: flex;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 7px;
}

.gcrm-range-presets a {
    display: inline-flex;
    min-height: 34px;
    padding: 7px 11px;
    align-items: center;
    color: var(--gcrm-muted);
    background: var(--gcrm-surface-soft);
    border: 1px solid var(--gcrm-border);
    border-radius: 8px;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}

.gcrm-range-presets a:hover,
.gcrm-range-presets a.is-active {
    color: #ffffff;
    background: #075cf6;
    border-color: #075cf6;
}

.gcrm-date-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.gcrm-date-form label {
    display: flex;
    min-width: 190px;
    flex-direction: column;
    gap: 5px;
}

.gcrm-date-form label span {
    color: var(--gcrm-muted);
    font-size: 9px;
    font-weight: 700;
}

.gcrm-date-form input {
    min-height: 40px;
    padding: 8px 11px;
    color: var(--gcrm-text);
    background: var(--gcrm-surface-soft);
    border: 1px solid var(--gcrm-border);
    border-radius: 8px;
}

.gcrm-date-form button,
.gcrm-date-form > a {
    display: inline-flex;
    min-height: 40px;
    padding: 9px 14px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 750;
    text-decoration: none;
}

.gcrm-date-form button {
    color: #ffffff;
    background: #075cf6;
    border: 1px solid #075cf6;
}

.gcrm-date-form > a {
    color: var(--gcrm-text);
    background: var(--gcrm-surface-soft);
    border: 1px solid var(--gcrm-border);
}

.gcrm-revenue-filter > p {
    margin: 12px 0 0;
    color: var(--gcrm-muted);
    font-size: 10px;
}

.gcrm-report-empty {
    margin: 0;
    padding: 18px 0;
    color: var(--gcrm-muted);
    font-size: 10px;
}

/* =========================================================
   MENU AKSI LEAD
   ========================================================= */
.gcrm-action-cell {
    width: 112px;
}

.gcrm-action-menu {
    display: inline-block;
}

.gcrm-action-trigger {
    display: inline-flex;
    min-width: 82px;
    min-height: 36px;
    padding: 8px 12px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    background: #075cf6;
    border: 1px solid #075cf6;
    border-radius: 8px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.gcrm-action-trigger:hover,
.gcrm-action-menu.is-open .gcrm-action-trigger {
    background: #064bd0;
    border-color: #064bd0;
}

.gcrm-action-trigger span {
    transition: transform .2s ease;
}

.gcrm-action-menu.is-open .gcrm-action-trigger span {
    transform: rotate(180deg);
}

.gcrm-action-popover {
    position: fixed;
    z-index: 2147482000;
    width: 200px;
    padding: 7px;
    background: var(--gcrm-surface);
    border: 1px solid var(--gcrm-border);
    border-radius: 11px;
    box-shadow: 0 16px 42px rgba(7, 19, 38, .22);
}

.gcrm-action-popover[hidden] {
    display: none !important;
}

.gcrm-action-popover > a,
.gcrm-action-popover > button {
    display: flex !important;
    width: 100% !important;
    min-height: 39px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    align-items: center;
    justify-content: flex-start !important;
    color: var(--gcrm-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-align: left;
    text-decoration: none;
}

.gcrm-action-popover > a:hover,
.gcrm-action-popover > button:hover {
    color: #075cf6 !important;
    background: #eaf1ff !important;
}

.gcrm-template-fields input[type="url"] {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--gcrm-text);
    background: var(--gcrm-surface-soft);
    border: 1px solid var(--gcrm-border);
    border-radius: 8px;
}

@media (max-width: 760px) {
    .gcrm-date-form,
    .gcrm-date-form label,
    .gcrm-date-form button,
    .gcrm-date-form > a {
        width: 100%;
    }

    .gcrm-action-popover {
        position: fixed;
        inset: auto 10px 10px 10px;
        width: auto;
        padding: 10px;
        border-radius: 14px;
        box-shadow: 0 0 0 100vmax rgba(4, 14, 30, .48), 0 18px 55px rgba(4, 14, 30, .32);
    }

    .gcrm-action-popover > a,
    .gcrm-action-popover > button {
        min-height: 48px !important;
        font-size: 12px !important;
    }
}