/* =========================================================
   FireFlow Responsive UI v1.3
   Desktop / Tablet / Smartphone
   ========================================================= */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:clamp(14px,.18vw + 13.2px,16px);overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
.content{width:100%;padding:clamp(18px,2.2vw,32px)}
.page-head h1{font-size:clamp(22px,1.2vw + 17px,30px);line-height:1.2;overflow-wrap:anywhere}
.page-head p,.card,td,.form-group label,.form-control,.form-group input,.form-group select,.form-group textarea{font-size:clamp(13px,.12vw + 12.3px,15px)}
.card{padding:clamp(15px,1.5vw,22px)}
.stat .value{font-size:clamp(24px,1.5vw + 17px,32px);overflow-wrap:anywhere}
.section-title h2{font-size:clamp(16px,.45vw + 14px,19px)}
.brand img,.login-branding img,.login-card img{object-fit:contain}
.login-branding,.login-card .login-branding{width:100%;justify-content:center;text-align:center}
.login-brand-logo{max-width:min(100%,320px);margin-inline:auto}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;scrollbar-width:thin}
.table-wrap table{min-width:760px}
.mobile-menu-toggle{display:none;width:42px;height:42px;flex:0 0 42px;border:1px solid var(--line);border-radius:10px;background:var(--btn-light-bg);color:var(--text);align-items:center;justify-content:center;cursor:pointer;padding:9px}
.mobile-menu-toggle span{display:block;width:20px;height:2px;background:currentColor;border-radius:999px;transition:transform .2s ease,opacity .2s ease}
.mobile-menu-toggle span+span{margin-top:4px}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.sidebar-backdrop{display:none;position:fixed;inset:0;z-index:39;background:rgba(3,7,18,.62);backdrop-filter:blur(2px)}
body.sidebar-open{overflow:hidden}
@media (min-width:1200px){.content{max-width:1500px}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1199px){
.sidebar{position:fixed!important;inset:0 auto 0 0!important;width:min(300px,84vw)!important;transform:translateX(-105%);transition:transform .23s ease;z-index:40;box-shadow:14px 0 40px rgba(0,0,0,.28)}
body.sidebar-open .sidebar{transform:translateX(0)}
body.sidebar-open .sidebar-backdrop{display:block}
.main-shell{margin-left:0!important;width:100%}
.mobile-menu-toggle{display:inline-flex}
.topbar{min-height:66px;height:auto;padding:10px clamp(14px,2.2vw,24px);gap:12px}
.topbar-user,.topbar-title-group{min-width:0}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.detail-grid{grid-template-columns:1fr}
.management-grid{grid-template-columns:1fr 1fr}
.form-card{max-width:none}
.nav-link{min-height:44px;display:flex;align-items:center}
}
@media (max-width:900px){
.page-head{align-items:stretch}.page-head>div:first-child{min-width:0}.management-grid,.audit-grid{grid-template-columns:1fr}.info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.commercial-steps{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;-webkit-overflow-scrolling:touch}.commercial-step{flex:0 0 auto}.top-actions{margin-left:auto}
}
@media (max-width:767px){
.content{padding:16px}.topbar{min-height:60px;padding:9px 12px}.topbar-user{flex:1;min-width:0}.topbar-user strong,.topbar-title-group strong{max-width:min(38vw,180px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-badge{display:none}.top-actions{gap:6px}
.theme-toggle{width:42px;height:42px;min-height:42px;padding:0;justify-content:center}.theme-toggle-text{display:none!important}.notification-button{min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center}.top-actions form .btn,.top-actions .btn-small{min-height:42px;padding-inline:10px}
.page-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:17px}.page-head>div:last-child:not(:first-child){justify-content:flex-start!important;max-width:100%}
.stats,.form-grid,.info-grid,.action-grid,.management-grid,.audit-grid{grid-template-columns:1fr!important}.grid{gap:12px}.card{border-radius:11px}.section-title{align-items:flex-start;gap:10px;flex-wrap:wrap}
.filter-bar{display:grid;grid-template-columns:1fr 1fr;gap:9px}.filter-bar .form-control,.filter-bar input,.filter-bar select{width:100%!important;min-width:0!important}.filter-bar .form-control:first-child{grid-column:1/-1}
.form-control,.form-group input,.form-group select,.form-group textarea,.btn{min-height:44px}.form-group textarea{min-height:110px}.checkbox-list ul,ul.checkbox-list{grid-template-columns:1fr}.inline-form{grid-template-columns:1fr}
.pipeline-row{grid-template-columns:76px minmax(80px,1fr) 30px;gap:8px;font-size:12px}.pipeline-label{overflow:hidden;text-overflow:ellipsis}
.file-row,.notification-row,.workload-row,.activity-row{align-items:flex-start}.file-row{flex-direction:column}.file-row>*{max-width:100%}.notification-row{flex-direction:column;gap:8px}.comment-head{flex-direction:column;gap:3px}
.table-wrap{margin-inline:-2px;padding-bottom:5px}.table-wrap table{min-width:690px}th,td{padding:10px 9px}
.login-page{padding:16px;align-items:center}.login-card{width:min(100%,460px);padding:clamp(22px,6vw,30px);border-radius:14px}.login-brand-logo{max-width:min(100%,270px)}.login-theme{top:10px;right:10px}
}
@media (max-width:520px){
.content{padding:13px}.filter-bar{grid-template-columns:1fr}.filter-bar .form-control:first-child{grid-column:auto}.page-head h1{font-size:22px}.card{padding:14px}.stat .value{font-size:24px}.topbar-user strong,.topbar-title-group strong{max-width:30vw;font-size:13px}
.top-actions form .btn{font-size:0;width:42px;padding:0}.pipeline-row{grid-template-columns:66px 1fr 26px}.login-card{padding:22px 18px}.login-card label{font-size:13px}
}
@media (max-width:380px){
.topbar{gap:6px}.mobile-menu-toggle,.theme-toggle,.notification-button,.top-actions form .btn{width:38px;min-width:38px;height:38px;min-height:38px}.topbar-user strong,.topbar-title-group strong{display:none}.table-wrap table{min-width:640px}
}
@media (max-height:520px) and (orientation:landscape) and (max-width:950px){.sidebar{padding-top:12px}.brand{padding-bottom:10px}.nav-label{margin-top:10px}.login-page{align-items:start}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* =========================================================
   Project detail header actions - mobile improvement
   ========================================================= */

.project-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.project-head-actions .project-head-status,
.project-head-actions .project-head-edit {
    min-height: 36px;
}

.project-head-actions .project-head-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
}

/* Tablet */
@media (max-width: 991px) {
    .project-head-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .project-head-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .project-head-actions .project-head-status {
        width: 100%;
        min-height: 40px;
        padding: 8px 10px;
        font-size: 12px;
        white-space: normal;
        border-radius: 12px;
    }

    .project-head-actions .project-head-edit,
    .project-head-actions .project-head-branch-btn {
        grid-column: 1 / -1;
        width: 100%;
        min-height: 42px;
        font-size: 13px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

/* Small smartphone */
@media (max-width: 420px) {
    .project-head-actions .project-head-status {
        font-size: 11px;
        padding: 8px;
    }

    .project-head-actions .project-head-edit,
    .project-head-actions .project-head-branch-btn {
        font-size: 12px;
    }
}
/* =========================================================
   Scope checklist + Requires drawing cleanup
   ========================================================= */

.checkbox-list-scopes ul,
.checkbox-list-scopes {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checkbox-list-scopes ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 10px 12px;
}

.checkbox-list-scopes li {
    margin: 0;
    padding: 0;
}

.checkbox-list-scopes label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 8px 0;
    min-height: 36px;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
}

.checkbox-list-scopes label:hover {
    border-color: var(--blue);
    background: var(--status-blue-bg);
}

.checkbox-list-scopes input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: var(--blue);
}

.checkbox-inline-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    min-height: 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--btn-light-bg);
    color: var(--text);
}

.checkbox-inline-card input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: var(--blue);
}

.checkbox-inline-card span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

/* Tablet */
@media (max-width: 991px) {
    .checkbox-list-scopes ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .checkbox-list-scopes ul {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .checkbox-list-scopes label {
        padding: 10px 12px;
        min-height: 44px;
        font-size: 13px;
    }

    .checkbox-inline-card {
        padding: 10px 12px;
        min-height: 44px;
    }

    .checkbox-inline-card span {
        font-size: 13px;
    }
}

/* =========================================================
   FireFlow Scope Compact v2
   2 item per baris + checkbox kanan
   ========================================================= */

.scope-field {
    margin-bottom: 12px !important;
}

.scope-checklist {
    width: 100%;
    margin: 0;
}

.scope-checklist ul,
.scope-checklist > div {
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
    width: 100%;
}

.scope-checklist li,
.scope-checklist > div > div {
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.scope-checklist label {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    width: 100%;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 12px !important;
    font-weight: 650;
    line-height: 1.25;
    cursor: pointer;
}

.scope-checklist input[type="checkbox"] {
    order: 99 !important;
    position: static !important;
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    accent-color: #60a5fa;
    box-shadow: none !important;
    transform: none !important;
}

.requires-drawing-field {
    margin-top: 2px !important;
    margin-bottom: 14px !important;
}

.requires-drawing-field > label:not(.single-checkbox-row) {
    display: none !important;
}

.single-checkbox-row {
    box-sizing: border-box;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    width: 100%;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 9px 11px !important;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface-soft);
    color: var(--text);
    cursor: pointer;
}

.single-checkbox-row span {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}

.single-checkbox-row input[type="checkbox"] {
    position: static !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    accent-color: #60a5fa;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 991px) {
    .scope-checklist ul,
    .scope-checklist > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }
}

@media (max-width: 767px) {
    .scope-checklist ul,
    .scope-checklist > div {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .scope-checklist label {
        min-height: 38px !important;
        padding: 7px 8px !important;
        font-size: 10.8px !important;
        border-radius: 8px;
    }

    .scope-checklist input[type="checkbox"] {
        flex-basis: 16px !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
    }

    .single-checkbox-row {
        min-height: 40px !important;
        padding: 8px 10px !important;
    }

    .single-checkbox-row span {
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .scope-checklist ul,
    .scope-checklist > div {
        gap: 5px !important;
    }

    .scope-checklist label {
        padding: 6px 7px !important;
        font-size: 10px !important;
    }

    .scope-checklist input[type="checkbox"] {
        flex-basis: 15px !important;
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        min-height: 15px !important;
    }
}

/* =========================================================
   FireFlow - Customer Detail Responsive Layout
   ========================================================= */

.customer-detail-head {
    align-items: center;
}

.customer-detail-heading {
    min-width: 0;
}

.customer-detail-heading h1 {
    overflow-wrap: anywhere;
}

.customer-page-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.customer-detail-layout {
    display: grid;
    grid-template-columns: minmax(300px, .85fr) minmax(0, 2fr);
    gap: 16px;
    align-items: start;
}

.customer-information-card,
.active-projects-card {
    min-width: 0;
}

.customer-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.customer-info-item,
.customer-address {
    min-width: 0;
}

.customer-info-item .k,
.customer-address .k {
    color: var(--muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 800;
    margin-bottom: 4px;
}

.customer-info-item .v,
.customer-address .v {
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.customer-address {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.customer-project-count {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: 10px;
    font-weight: 700;
}

.customer-projects-table {
    width: 100%;
    min-width: 580px;
}

.customer-projects-table th:first-child,
.customer-projects-table td:first-child {
    width: 58%;
}

.customer-projects-table th:nth-child(2),
.customer-projects-table td:nth-child(2) {
    width: 22%;
}

.customer-projects-table th:nth-child(3),
.customer-projects-table td:nth-child(3) {
    width: 20%;
}

.customer-project-name {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text);
    overflow-wrap: anywhere;
}

.customer-stage-text {
    display: inline-block;
    white-space: normal;
    line-height: 1.25;
}

/* Tablet: jangan paksa kedua card berdampingan */
@media (max-width: 991px) {
    .customer-detail-layout {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .customer-information-card,
    .active-projects-card {
        width: 100%;
    }

    .customer-info-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .customer-projects-table {
        min-width: 0 !important;
    }
}

/* Smartphone */
@media (max-width: 767px) {
    .customer-detail-head {
        align-items: stretch;
    }

    .customer-page-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
        justify-content: stretch;
    }

    .customer-page-actions .btn {
        width: 100%;
        min-height: 42px;
    }

    .customer-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .customer-info-item {
        padding: 9px 10px;
        border: 1px solid var(--line-soft);
        border-radius: 9px;
        background: var(--surface-soft);
    }

    .customer-info-item .k,
    .customer-address .k {
        font-size: 9px;
    }

    .customer-info-item .v,
    .customer-address .v {
        font-size: 12px;
    }

    .customer-address {
        margin-top: 10px;
        padding: 10px;
        border: 1px solid var(--line-soft);
        border-radius: 9px;
        background: var(--surface-soft);
    }

    .customer-projects-wrap {
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .customer-projects-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .customer-projects-table thead {
        display: none;
    }

    .customer-projects-table tbody {
        display: grid;
        gap: 9px;
        width: 100%;
    }

    .customer-projects-table tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        width: 100%;
        padding: 11px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-soft);
    }

    .customer-projects-table td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        min-width: 0;
        font-size: 12px;
    }

    .customer-projects-table td:first-child {
        grid-column: 1 / -1;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--line-soft) !important;
    }

    .customer-projects-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 9px;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 800;
    }

    .customer-projects-table .project-link {
        display: inline-block;
        font-size: 12px;
    }

    .customer-project-name {
        margin-top: 4px;
        font-size: 11px;
    }

    .customer-empty-project {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .customer-empty-project td {
        padding: 14px !important;
    }

    .customer-empty-project td::before {
        display: none !important;
    }
}

/* Smartphone kecil */
@media (max-width: 390px) {
    .customer-info-grid {
        gap: 7px;
    }

    .customer-info-item {
        padding: 8px;
    }

    .customer-info-item .v {
        font-size: 11px;
    }

    .customer-projects-table tr {
        padding: 9px;
    }
}

/* =========================================================
   FireFlow Sales Dashboard - Vertical Project Sections
   My Projects + Team Activity selalu bertumpuk ke bawah
   ========================================================= */

.sales-dashboard-stack {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    gap: 16px;
}

.sales-dashboard-stack > .card {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.sales-projects-card .table-wrap,
.sales-team-activity-card .table-wrap {
    width: 100%;
    max-width: 100%;
}

.sales-projects-card table,
.sales-team-activity-card table {
    width: 100%;
    min-width: 0;
    table-layout: auto;
}

/* Keep dashboard My Projects mobile behavior identical to /projects/mine. */
@media (max-width: 900px) {
    .sales-projects-card .table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .sales-projects-card .project-table-unified {
        min-width: 690px;
        table-layout: auto;
    }
}

@media (max-width: 640px) {
    .sales-projects-card .table-wrap {
        margin-inline: -2px;
        padding-bottom: 5px;
    }
    .sales-projects-card .project-table-unified {
        min-width: 640px;
    }
}

@media (min-width: 992px) {
    .sales-projects-card table th:first-child,
    .sales-projects-card table td:first-child {
        width: 52%;
    }

    .sales-projects-card table th:nth-child(2),
    .sales-projects-card table td:nth-child(2) {
        width: 28%;
    }

    .sales-projects-card table th:nth-child(3),
    .sales-projects-card table td:nth-child(3) {
        width: 20%;
    }

    .sales-team-activity-card table th:first-child,
    .sales-team-activity-card table td:first-child {
        width: 58%;
    }

    .sales-team-activity-card table th:nth-child(2),
    .sales-team-activity-card table td:nth-child(2) {
        width: 22%;
    }

    .sales-team-activity-card table th:nth-child(3),
    .sales-team-activity-card table td:nth-child(3) {
        width: 20%;
    }
}

@media (max-width: 991px) {
    .sales-dashboard-stack {
        gap: 12px;
    }

    .sales-projects-card table,
    .sales-team-activity-card table {
        min-width: 0 !important;
    }
}

@media (max-width: 767px) {
    .sales-projects-card,
    .sales-team-activity-card {
        padding: 14px;
    }

    .sales-projects-card .section-title,
    .sales-team-activity-card .section-title {
        margin-bottom: 10px;
    }

    .sales-projects-card .table-wrap,
    .sales-team-activity-card .table-wrap {
        overflow: visible !important;
        padding: 0 !important;
    }

    .sales-projects-card table,
    .sales-team-activity-card table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .sales-projects-card thead,
    .sales-team-activity-card thead {
        display: none;
    }

    .sales-projects-card tbody,
    .sales-team-activity-card tbody {
        display: grid;
        width: 100%;
        gap: 8px;
    }

    .sales-projects-card tr,
    .sales-team-activity-card tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
        width: 100%;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 10px;
        background: var(--surface-soft);
    }

    .sales-projects-card td,
    .sales-team-activity-card td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        font-size: 12px;
        line-height: 1.35;
    }

    .sales-projects-card td:first-child,
    .sales-team-activity-card td:first-child {
        grid-column: 1 / -1;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--line-soft) !important;
    }

    .sales-projects-card td:nth-child(2)::before {
        content: "STAGE";
    }

    .sales-projects-card td:nth-child(3)::before {
        content: "DEADLINE";
    }

    .sales-team-activity-card td:nth-child(2)::before {
        content: "SALES";
    }

    .sales-team-activity-card td:nth-child(3)::before {
        content: "STATUS";
    }

    .sales-projects-card td:nth-child(n+2)::before,
    .sales-team-activity-card td:nth-child(n+2)::before {
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 9px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .05em;
    }

    .sales-projects-card .project-link,
    .sales-team-activity-card .project-link {
        font-size: 12px;
        line-height: 1.25;
    }

    .sales-projects-card .small,
    .sales-team-activity-card .small {
        font-size: 11px;
        line-height: 1.3;
    }

    .sales-projects-card .status,
    .sales-team-activity-card .status {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
        padding: 5px 7px;
    }

    .sales-projects-card .empty,
    .sales-team-activity-card .empty {
        grid-column: 1 / -1;
        padding: 12px !important;
        text-align: center;
    }
}

@media (max-width: 390px) {
    .sales-projects-card tr,
    .sales-team-activity-card tr {
        gap: 7px;
        padding: 9px;
    }

    .sales-projects-card td,
    .sales-team-activity-card td {
        font-size: 11px;
    }
}

/* Dashboard My Projects: preserve desktop table horizontally on mobile. */
@media (max-width: 900px) {
    .sales-projects-card .table-wrap {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: -2px !important;
        padding-bottom: 6px !important;
    }
    .sales-projects-card .project-table-unified {
        display: table !important;
        width: max-content !important;
        min-width: 980px !important;
        table-layout: auto !important;
    }
    .sales-projects-card .project-table-unified thead {
        display: table-header-group !important;
    }
    .sales-projects-card .project-table-unified tbody {
        display: table-row-group !important;
        width: auto !important;
    }
    .sales-projects-card .project-table-unified tr {
        display: table-row !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .sales-projects-card .project-table-unified th,
    .sales-projects-card .project-table-unified td {
        display: table-cell !important;
        width: auto !important;
        min-width: max-content !important;
        padding: 10px 9px !important;
        box-sizing: border-box !important;
    }
    .sales-projects-card .project-table-unified th:first-child,
    .sales-projects-card .project-table-unified td:first-child {
        width: 170px !important;
        min-width: 170px !important;
        max-width: 170px !important;
    }
    .sales-projects-card .project-table-unified .project-table-identity {
        min-width: 0 !important;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .sales-projects-card .project-table-unified .project-link {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .sales-projects-card .project-table-unified th,
    .sales-projects-card .project-table-unified td {
        border: 1px solid var(--line-soft) !important;
        white-space: normal !important;
        vertical-align: top !important;
    }
    .sales-projects-card .project-table-unified td:first-child {
        padding-bottom: 10px !important;
        border-bottom: 1px solid var(--line-soft) !important;
    }
    .sales-projects-card .project-table-unified td::before {
        display: none !important;
        content: none !important;
    }
}

/* =========================================================
   FireFlow - Closed Project Overview
   ========================================================= */

.project-overview-wide {
    grid-column: 1 / -1 !important;
}

.project-overview-loss-note .v {
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 767px) {
    .project-overview-wide {
        grid-column: 1 / -1 !important;
    }

    .project-overview-loss-note {
        padding-top: 2px;
    }

    .project-overview-loss-note .v {
        font-size: 12px;
    }
}

/* =========================================================
   FireFlow - Project Deadline Highlight
   Yellow: 1-3 days | Red: today/overdue
   ========================================================= */

.deadline-highlight-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: -4px 0 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

.deadline-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.deadline-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}

.deadline-legend-dot.warning {
    background: #f59e0b;
}

.deadline-legend-dot.danger {
    background: #ef4444;
}

table tbody tr.project-deadline-warning > td {
    background: rgba(245, 158, 11, .14) !important;
}

table tbody tr.project-deadline-danger > td {
    background: rgba(239, 68, 68, .16) !important;
}

table tbody tr.project-deadline-warning > td:first-child {
    box-shadow: inset 4px 0 0 #f59e0b;
}

table tbody tr.project-deadline-danger > td:first-child {
    box-shadow: inset 4px 0 0 #ef4444;
}

table tbody tr.project-deadline-warning:hover > td {
    background: rgba(245, 158, 11, .20) !important;
}

table tbody tr.project-deadline-danger:hover > td {
    background: rgba(239, 68, 68, .22) !important;
}

.project-deadline-cell strong {
    display: block;
    white-space: nowrap;
}

.deadline-source {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.2;
}

.deadline-state {
    display: inline-flex;
    align-items: center;
    margin-top: 5px;
    padding: 3px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
}

.deadline-state.warning {
    background: rgba(245, 158, 11, .20);
    color: #f59e0b;
}

.deadline-state.danger {
    background: rgba(239, 68, 68, .20);
    color: #ef4444;
}

@media (max-width: 767px) {
    .deadline-highlight-legend {
        gap: 8px 14px;
        font-size: 10px;
        margin-bottom: 10px;
    }

    table tbody tr.project-deadline-warning {
        border-left: 4px solid #f59e0b;
    }

    table tbody tr.project-deadline-danger {
        border-left: 4px solid #ef4444;
    }

    .project-deadline-cell strong {
        font-size: 11px;
    }
}

/* FireFlow Dashboard Deadline v2 */
.dashboard-deadline-legend {
    margin: -2px 0 12px;
}

.dashboard-recent-projects .project-deadline-cell {
    min-width: 118px;
}

@media (max-width: 767px) {
    .dashboard-recent-projects .table-wrap {
        overflow-x: auto;
    }

    .dashboard-recent-projects table {
        min-width: 720px;
    }
}

/* FireFlow Inquiry Date + Latest Progress */
.project-stage-cell {
    min-width: 190px;
    max-width: 280px;
}

.stage-progress-note {
    margin-top: 6px;
    color: var(--text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

.stage-progress-meta {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.3;
    white-space: normal;
}

.inquiry-date-cell {
    white-space: nowrap;
}

.dashboard-recent-projects .project-stage-cell {
    min-width: 200px;
}

@media (max-width: 767px) {
    .stage-progress-note {
        font-size: 10px;
    }

    .stage-progress-meta {
        font-size: 9px;
    }

    .inquiry-date-cell {
        font-size: 10px;
    }
}

/* FireFlow - Inquiry Date Above Project Title */
.project-inquiry-date {
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .project-inquiry-date {
        margin-bottom: 3px;
        font-size: 9px;
    }
}

/* =========================================================
   FireFlow - Quotation Status Open / Ongoing / Close
   ========================================================= */
.quotation-status-card { margin-bottom: 18px; }
.quotation-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.quotation-status-item {
    display: block;
    min-width: 0;
    padding: 14px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.quotation-status-item:hover { transform: translateY(-1px); }
.quotation-status-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.quotation-status-label {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.quotation-status-count {
    font-size: 28px;
    font-weight: 850;
    line-height: 1;
}
.quotation-status-desc {
    margin-top: 8px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}
.quotation-open { border-left: 4px solid #64748b; }
.quotation-ongoing { border-left: 4px solid #3b82f6; }
.quotation-close { border-left: 4px solid #22c55e; }
@media (max-width: 767px) {
    .quotation-status-grid { grid-template-columns: 1fr; gap: 8px; }
    .quotation-status-item { padding: 12px 13px; }
    .quotation-status-count { font-size: 24px; }
}

/* =========================================================
   FireFlow - Projects Card Vertical Compact
   ========================================================= */

.quotation-status-card-compact .quotation-status-title {
    margin-bottom: 12px;
}

.quotation-status-card-compact .quotation-status-title h2 {
    margin: 0;
}

.quotation-status-grid-vertical {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

.quotation-status-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding: 13px 15px !important;
    border-radius: 10px;
}

.quotation-status-row .quotation-status-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.quotation-status-row .quotation-status-count {
    margin-left: auto;
    font-size: 24px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

.quotation-status-card-compact .quotation-status-desc,
.quotation-status-card-compact > .section-title .muted {
    display: none !important;
}

@media (max-width: 767px) {
    .quotation-status-card-compact {
        padding: 14px;
    }

    .quotation-status-row {
        padding: 12px 13px !important;
    }

    .quotation-status-row .quotation-status-count {
        font-size: 22px;
    }
}

/* FireFlow Workflow V2 */
.required-star{color:#ef4444;margin-left:2px;font-weight:900}
.team-cell{min-width:180px}.team-line{display:grid;grid-template-columns:64px 1fr;gap:6px;margin:2px 0;font-size:10px;line-height:1.35}
.team-line span{color:var(--muted);font-weight:700}.start-date-cell{white-space:nowrap;font-size:10px}
.fireflow-language-switch{display:inline-flex;gap:3px;padding:3px;border:1px solid var(--border);border-radius:9px}
.fireflow-language-switch button{min-width:34px;min-height:30px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:10px;font-weight:800;cursor:pointer}
.fireflow-language-switch button[aria-pressed="true"]{background:var(--panel);color:var(--text)}

/* Tablet masih horizontal 1 baris ke samping */
@media (max-width: 1024px) and (min-width: 768px) {
    #id_required_documents,
    .required-document-checklist {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile menjadi 1 kolom ke bawah */
@media (max-width: 767px) {
    #id_required_documents,
    .required-document-checklist {
        grid-template-columns: 1fr;
    }

    #id_required_documents label,
    .required-document-checklist label {
        min-height: 38px;
        padding: 10px 11px;
    }
}

/* FIREFLOW_TOPBAR_RIGHT_CLUSTER_V1 */
.topbar-right-cluster {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
}

.topbar-right-cluster .topbar-actions,
.topbar-right-cluster .header-actions,
.topbar-right-cluster .action-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.topbar-right-cluster .language-switch,
.topbar-right-cluster .language-toggle,
.topbar-right-cluster .lang-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.topbar-right-cluster .topbar-actions > *,
.topbar-right-cluster .header-actions > *,
.topbar-right-cluster .action-group > * {
    margin: 0;
}

@media (max-width: 767px) {
    .topbar-right-cluster {
        gap: 10px;
    }

    .topbar-right-cluster .topbar-actions,
    .topbar-right-cluster .header-actions,
    .topbar-right-cluster .action-group {
        gap: 8px;
    }
}

/* FIREFLOW_HIDE_LEGACY_MARGIN_V1 */
[data-field="gross_profit"], [data-field="gross_margin"], .gross-profit, .gross-margin, #id_gross_profit, #id_gross_margin { display:none !important; }


/* FIREFLOW_PROJECT_TABLE_READABILITY_V1 START */
/* Targeted readability refinements for All / My / Recent Projects */
.project-table-unified thead th {
    font-size: 12px;
    letter-spacing: .05em;
}

.project-table-unified td {
    font-size: 13px;
}

.project-table-unified .project-link {
    font-size: 14px;
    line-height: 1.35;
}

.project-table-unified .status {
    font-size: 12px;
    padding: 5px 10px;
}

.project-table-unified .small {
    font-size: 12px;
}

.project-table-unified .team-line {
    gap: 8px;
    margin: 3px 0;
    font-size: 11px;
    line-height: 1.4;
}

.project-table-unified .team-line span,
.project-table-unified .project-date-label,
.project-table-unified .project-inquiry-date,
.project-table-unified .deadline-source,
.project-table-unified .stage-progress-meta {
    color: var(--text);
    opacity: .74;
}

.project-table-unified .project-date-label {
    font-size: 12px;
    font-weight: 700;
}

.project-table-unified .project-date-line strong {
    font-size: 13px;
}

.project-table-unified .stage-progress-note {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-strong);
}

.project-table-unified .stage-progress-meta {
    font-size: 10px;
    line-height: 1.35;
}

.project-table-unified .project-inquiry-date {
    margin-bottom: 5px;
    font-size: 10px;
}

.project-table-unified .deadline-source {
    font-size: 10px;
    line-height: 1.3;
}

.deadline-highlight-legend {
    font-size: 12px;
}

.deadline-legend-dot.danger {
    background: #e68484;
}

table tbody tr.project-deadline-danger > td {
    background: rgba(239, 68, 68, .10) !important;
}

table tbody tr.project-deadline-danger > td:first-child {
    box-shadow: inset 4px 0 0 #e68484;
}

table tbody tr.project-deadline-danger:hover > td {
    background: rgba(239, 68, 68, .14) !important;
}

.project-table-unified .deadline-state {
    margin-top: 6px;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
}

.project-table-unified .deadline-state.warning {
    background: rgba(245, 158, 11, .18);
    color: #ffd48a;
}

.project-table-unified .deadline-state.danger {
    background: rgba(221, 91, 102, .88);
    color: #ffffff;
}

@media (max-width: 767px) {
    .project-table-unified .project-link {
        font-size: 13px;
    }

    .project-table-unified .team-line,
    .project-table-unified .stage-progress-note {
        font-size: 11px;
    }

    .project-table-unified .stage-progress-meta,
    .project-table-unified .project-inquiry-date,
    .project-table-unified .deadline-source,
    .project-table-unified .deadline-state {
        font-size: 10px;
    }

    .project-table-unified .project-date-label {
        font-size: 11px;
    }

    .project-table-unified .project-date-line strong,
    .project-deadline-cell strong {
        font-size: 12px;
    }
}
/* FIREFLOW_PROJECT_TABLE_READABILITY_V1 END */

/* FIREFLOW_RESPONSIVE_LOGOUT_SVG_V5 */
@media (max-width: 767px){.top-actions form .btn{width:42px;padding:0;display:inline-flex;align-items:center;justify-content:center}.top-actions form .btn .ff-logout-text{display:none}.top-actions form .btn .ff-logout-icon{display:inline-block;width:18px;height:18px}}

/* FIREFLOW_SCOPE_CHECKLIST_SPACING_V2_1 START */
.scope-field {
    margin-bottom: 16px !important;
}

.scope-checklist {
    width: 100%;
    margin: 10px 0 0 !important;
}

.scope-checklist ul,
.scope-checklist > div {
    gap: 14px 16px !important;
    align-items: stretch !important;
}

.scope-checklist li,
.scope-checklist > div > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.scope-checklist label {
    min-height: 46px !important;
    padding: 11px 13px !important;
    border-radius: 10px !important;
    gap: 10px !important;
    line-height: 1.3 !important;
}

.scope-checklist input[type="checkbox"] {
    margin-left: 12px !important;
}

.scope-detail-input-wrap-v1 {
    margin-top: 10px !important;
}

.required-document-grid-v3,
#id_required_documents,
.required-document-checklist {
    margin: 10px 0 0 !important;
    gap: 12px !important;
}

.required-document-item-v3,
#id_required_documents > div,
#id_required_documents > li,
.required-document-checklist > div,
.required-document-checklist > li {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.required-document-item-v3 label,
#id_required_documents label,
.required-document-checklist label {
    min-height: 46px !important;
    padding: 11px 13px !important;
    border-radius: 10px !important;
    line-height: 1.3 !important;
}

@media (max-width: 767px) {
    .scope-checklist ul,
    .scope-checklist > div {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .scope-checklist label,
    .required-document-item-v3 label,
    #id_required_documents label,
    .required-document-checklist label {
        min-height: 44px !important;
        padding: 10px 12px !important;
    }
}
/* FIREFLOW_SCOPE_CHECKLIST_SPACING_V2_1 END */

/* FIREFLOW_SCOPE_CHECKLIST_SPACING_V2_3 START */
#fireflow-scope-checklist-v1 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
}

#fireflow-scope-checklist-v1 > .scope-checklist-item-v1 {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

#fireflow-scope-checklist-v1 > .scope-checklist-item-v1 > label {
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
}

#fireflow-scope-checklist-v1 > .scope-checklist-item-v1 > label input[type="checkbox"] {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 0 0 10px !important;
}

#fireflow-scope-checklist-v1 .scope-detail-input-wrap-v1 {
    margin-top: 8px !important;
}
/* FIREFLOW_THEME_CONTRAST_RESPONSIVE_V1 START */
html[data-theme="light"] .project-table-unified .deadline-state.warning {
    background: #fffaeb !important;
    color: #93370d !important;
    border: 1px solid #fedf89 !important;
}
html[data-theme="light"] .project-table-unified .deadline-state.danger {
    background: #fef3f2 !important;
    color: #b42318 !important;
    border: 1px solid #fecdca !important;
}
html[data-theme="light"] table tbody tr.project-deadline-warning > td {
    background: #fffaeb !important;
    color: #7a2e0b;
}
html[data-theme="light"] table tbody tr.project-deadline-danger > td {
    background: #fef3f2 !important;
    color: #912018;
}
html[data-theme="light"] table tbody tr.project-deadline-warning:hover > td {
    background: #fff3cd !important;
}
html[data-theme="light"] table tbody tr.project-deadline-danger:hover > td {
    background: #fee4e2 !important;
}
html[data-theme="light"] .deadline-legend-dot.warning { background: #b54708; }
html[data-theme="light"] .deadline-legend-dot.danger { background: #b42318; }
html[data-theme="light"] .required-star { color: #b42318; }
/* FIREFLOW_THEME_CONTRAST_RESPONSIVE_V1 END */

/* FireFlow project tables: keep identity visible during horizontal browsing. */
.project-table-unified th:first-child,
.project-table-unified td:first-child {
    position:sticky;
    left: 0;
    z-index: 2;
    background: var(--surface);
    box-shadow: 6px 0 10px rgba(0,0,0,.08);
}
.project-table-unified thead th:first-child { z-index: 3; }
.project-table-unified .project-table-identity { min-width: 180px; }
@media (max-width: 767px) {
    .project-table-unified .project-table-identity { min-width: 170px; }
        .project-table-mobile-hint {
            display: block;
            margin: 0 0 8px;
            color: var(--muted);
            font-size: 11px;
            font-weight: 650;
        }
    }

    .project-table-mobile-hint {
        display: none;
    }

/* FIREFLOW_DEADLINE_SOLID_ROW_BACKGROUND_V1 */
table tbody tr.project-deadline-warning > td,
table tbody tr.project-deadline-warning > td:first-child {
    background-color: #2d2637 !important;
}

table tbody tr.project-deadline-danger > td,
table tbody tr.project-deadline-danger > td:first-child {
    background-color: #30212b !important;
}

table tbody tr.project-deadline-warning:hover > td,
table tbody tr.project-deadline-warning:hover > td:first-child {
    background-color: #3a3048 !important;
}

table tbody tr.project-deadline-danger:hover > td,
table tbody tr.project-deadline-danger:hover > td:first-child {
    background-color: #402631 !important;
}

html[data-theme="light"] table tbody tr.project-deadline-warning > td,
html[data-theme="light"] table tbody tr.project-deadline-warning > td:first-child {
    background-color: #fffaeb !important;
}

html[data-theme="light"] table tbody tr.project-deadline-danger > td,
html[data-theme="light"] table tbody tr.project-deadline-danger > td:first-child {
    background-color: #fef3f2 !important;
}

html[data-theme="light"] table tbody tr.project-deadline-warning:hover > td,
html[data-theme="light"] table tbody tr.project-deadline-warning:hover > td:first-child {
    background-color: #fff3cd !important;
}

html[data-theme="light"] table tbody tr.project-deadline-danger:hover > td,
html[data-theme="light"] table tbody tr.project-deadline-danger:hover > td:first-child {
    background-color: #fee4e2 !important;
}