* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Kumbh Sans", sans-serif !important;
    overflow-x: hidden !important;
    transition: all 0.5s;
    position: relative;
    background-color: #F3F6FD;

}
@media (min-width: 768px) {

    .sidebar_collapsed #sidebar {
        width: 80px;
    }

    .sidebar_collapsed header {
        left: 80px;
    }

    .sidebar_collapsed nav span,
    .sidebar_collapsed .leading-tight {
        display: none;
    }


    .sidebar_collapsed nav span,
    .sidebar_collapsed .main_name {
        display: none;
    }




    .sidebar_collapsed nav a {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    #sidebar i {
        width: 20px;
        text-align: center;
    }


}

@media (max-width: 767px) {

    #sidebar {
        transform: translateX(-100%);
        width: 16rem;
    }

    .mobile-sidebar-open #sidebar {
        transform: translateX(0);
    }

    header {
        left: 0 !important;
    }
}



.sidebar_collapsed .main_content{
    padding-left: 100px;
}


/* TAB BUTTON */
.tab-btn {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    color: #6b7280;
    transition: all 0.2s ease;
}

.tab-btn:hover {
    color: #374151;
}

/* ACTIVE TAB */
.tab-btn.active {
    background-color: #ffffff;
    color: #2563eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* TAB PANELS */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}



.shadow-card {
    --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}






/* Stage badges */
.stage-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    display: inline-block;
    letter-spacing: .04em;
}

.stage-design {
    background: #f3e8ff;
    color: #7c3aed;
    border-color: #e9d5ff;
}

.stage-procurement {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.stage-production {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.stage-qc {
    background: #fefce8;
    color: #a16207;
    border-color: #fde68a;
}

/* Status pills */
.status-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid;
    display: inline-block;
}

.status-active {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.status-ongoing {
    background: #e0f2fe;
    color: #075985;
    border-color: #bae6fd;
}

/* MAIN CONTAINER */
.job-tabs {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

/* MAIN TAB */
.job-tab {
  min-width: 160px;
  height: 80px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  transition: border-color .2s, box-shadow .2s;
}

.job-tab span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #6b7280;
}

.job-tab i {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;

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

/* ACTIVE MAIN TAB */
.job-tab.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}

.job-tab.active span,
.job-tab.active i {
  color: #2563eb;
}

/* GROUP TAB */
.job-tab-group {
  min-width: auto;
  padding: 8px;
}

/* SUB TABS */
.job-sub-tabs {
  display: flex;
  gap: 6px;
}

.job-sub-tabs button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  color: #9ca3af;
  cursor: pointer;
  transition: all .2s ease;
}

/* ACTIVE SUB TAB */
.job-sub-tabs button.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* IMPORTANT: WHEN SUB TAB IS ACTIVE → FULL GROUP ACTIVE */
.job-tab-group.active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.25);
}


.hidden {
  display: none;
}


/* BASE STATUS BADGE */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font-size: 12px;
    font-weight: 500;

    padding: 2px 10px;
    border-radius: 9999px;
    border: 1px solid transparent;

    line-height: 1.4;
    white-space: nowrap;
}

/* PENDING */
.status-pending {
    background-color: #fef3c7;   /* yellow-100 */
    color: #b45309;              /* yellow-700 */
    border-color: #fde68a;       /* yellow-200 */
}

/* APPROVED */
.status-approved {
    background-color: #dcfce7;   /* green-100 */
    color: #15803d;              /* green-700 */
    border-color: #bbf7d0;       /* green-200 */
}

/* REJECTED */
.status-rejected {
    background-color: #fee2e2;   /* red-100 */
    color: #b91c1c;              /* red-700 */
    border-color: #fecaca;       /* red-200 */
}

/* NOTE BELOW STATUS */
.status-note {
    margin-top: 4px;
    font-size: 10px;
    color: #9ca3af;              /* gray-400 */
}


.material-icon {
    width: 32px;
    height: 32px;
    background: #fff7ed;
    color: #f97316;
    border: 1px solid #fed7aa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

/* Progress */
.material-progress {
    font-size: 11px;
    color: #4b5563;
}

.progress-value {
    font-weight: 600;
    margin-bottom: 4px;
}

.progress-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* Status */
.material-status {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid;
    display: inline-block;
}

.status-ordered {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.status-partial {
    background: #fef9c3;
    color: #a16207;
    border-color: #fde68a;
}

.status-sufficient {
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.status-critical {
    background: #ffedd5;
    color: #9a3412;
    border-color: #fed7aa;
}

/* Actions */
.action-btn {
    width: 32px;
    height: 32px;
    background: #f9fafb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    cursor: pointer;
}

.action-btn:hover {
    background: #f3f4f6;
}


/* STATUS BASE */
.status {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* STATUS VARIANTS */
.status-progress {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.status-completed {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.status-pending {
    background: #fff7ed;
    color: #c2410c;
    border-color: #fed7aa;
}

.status-rejected {
    background: #fef2f2;
    color: #b91c1c;
    border-color: #fecaca;
}

/* ICON BUTTON */
.icon-btn {
    color: #d1d5db;
    transition: color 0.2s;
}
.icon-btn:hover {
    color: #2563eb;
}

/* ADD BUTTON */
.add-btn {
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    background: #ffffff;
    border: 1px solid #dbeafe;
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}
.add-btn:hover {
    color: #1e40af;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.15);
}


.photo-card {
    position: relative;
    height: 128px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: #f3f4f6;
}

.photo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 4px;
    padding: 4px;
    cursor: pointer;
    font-size: 12px;
}