/* Scoped Production Sheet CSS. In _Layout.cshtml set: */
.production-sheet-page {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--primary-soft: #eff6ff;
--success: #059669;
--success-soft: #ecfdf5;
--danger: #dc2626;
--danger-soft: #fef2f2;
--warning: #d97706;
--warning-soft: #fffbeb;
--dark: #0f172a;
--muted: #64748b;
--page-bg: #f8fafc;
--card-bg: #ffffff;
--soft-bg: #f1f5f9;
--border: #e2e8f0;
--radius-lg: 14px;
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
--shadow-md: 0 6px 14px rgba(15, 23, 42, 0.08);
}
body.production-sheet-page {
background: var(--page-bg);
color: var(--dark);
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 14px;
}
.production-sheet-page .dashboard-page {
max-width: 1500px;
margin: 0 auto;
padding: 28px 18px;
}
.production-sheet-page .dashboard-topbar {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 14px;
margin-bottom: 16px;
}
.production-sheet-page .dashboard-title h2 {
margin: 0;
color: var(--dark);
font-size: 1.35rem;
font-weight: 900;
}
.production-sheet-page .dashboard-title p {
margin: 4px 0 0;
color: var(--muted);
font-size: 0.85rem;
}
.production-sheet-page .dashboard-toolbar {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px;
margin-bottom: 18px;
box-shadow: var(--shadow-sm);
}
.production-sheet-page .kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.production-sheet-page .kpi-card {
background: linear-gradient(180deg, #ffffff, #f8fafc);
border: 1px solid var(--border);
border-radius: 12px;
padding: 11px 13px;
}
.production-sheet-page .kpi-card span {
display: block;
color: var(--muted);
font-size: 0.72rem;
font-weight: 600;
margin-bottom: 3px;
}
.production-sheet-page .kpi-card strong {
color: var(--dark);
font-size: 1.15rem;
font-weight: 800;
line-height: 1.1;
}
.production-sheet-page .kpi-card.is-clickable {
cursor: pointer;
transition: 0.18s ease;
position: relative;
overflow: hidden;
}
.production-sheet-page .kpi-card.is-clickable:hover {
transform: translateY(-1px);
border-color: #bfdbfe;
box-shadow: var(--shadow-md);
}
.production-sheet-page .kpi-card.is-clickable.is-active {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.production-sheet-page .kpi-card.kpi-success {
background: linear-gradient(180deg, #ffffff, #ecfdf5);
}
.production-sheet-page .kpi-card.kpi-warning {
background: linear-gradient(180deg, #ffffff, #fffbeb);
}
.production-sheet-page .kpi-card.kpi-danger {
background: linear-gradient(180deg, #ffffff, #fef2f2);
}
.production-sheet-page .kpi-card.kpi-muted {
background: linear-gradient(180deg, #ffffff, #f8fafc);
}
.production-sheet-page .kpi-icon-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.production-sheet-page .kpi-icon-row i {
color: var(--primary);
font-size: 1rem;
}
.production-sheet-page .task-status-card {
border-left: 5px solid var(--border);
}
.production-sheet-page .task-status-card .task-details-summary {
background: #f8fafc;
}
.production-sheet-page .task-status-delivered {
border-left-color: #16a34a;
}
.production-sheet-page .task-status-delivered .task-details-summary {
background: #ecfdf5;
}
.production-sheet-page .task-status-submitted {
border-left-color: #2563eb;
}
.production-sheet-page .task-status-submitted .task-details-summary {
background: #eff6ff;
}
.production-sheet-page .task-status-assigned {
border-left-color: #7c3aed;
}
.production-sheet-page .task-status-assigned .task-details-summary {
background: #f5f3ff;
}
.production-sheet-page .task-status-started {
border-left-color: #d97706;
}
.production-sheet-page .task-status-started .task-details-summary {
background: #fffbeb;
}
.production-sheet-page .task-status-rejected {
border-left-color: #dc2626;
}
.production-sheet-page .task-status-rejected .task-details-summary {
background: #fef2f2;
}
.production-sheet-page .task-status-cancelled {
border-left-color: #64748b;
}
.production-sheet-page .task-status-cancelled .task-details-summary {
background: #f1f5f9;
}
.production-sheet-page .task-status-other {
border-left-color: #0891b2;
}
.production-sheet-page .task-status-other .task-details-summary {
background: #ecfeff;
}
.production-sheet-page .task-status-badge {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
padding: 3px 8px;
font-size: 0.72rem;
font-weight: 900;
border: 1px solid var(--border);
line-height: 1;
}
.production-sheet-page .task-status-badge.task-status-delivered {
background: #dcfce7;
color: #166534;
border-color: #bbf7d0;
}
.production-sheet-page .task-status-badge.task-status-submitted {
background: #dbeafe;
color: #1d4ed8;
border-color: #bfdbfe;
}
.production-sheet-page .task-status-badge.task-status-assigned {
background: #ede9fe;
color: #6d28d9;
border-color: #ddd6fe;
}
.production-sheet-page .task-status-badge.task-status-started {
background: #fef3c7;
color: #92400e;
border-color: #fde68a;
}
.production-sheet-page .task-status-badge.task-status-rejected {
background: #fee2e2;
color: #b91c1c;
border-color: #fecaca;
}
.production-sheet-page .task-status-badge.task-status-cancelled {
background: #e2e8f0;
color: #475569;
border-color: #cbd5e1;
}
.production-sheet-page .task-status-badge.task-status-other {
background: #cffafe;
color: #0e7490;
border-color: #a5f3fc;
}
.production-sheet-page .task-rank-flag {
display: inline-flex;
align-items: center;
gap: 4px;
border-radius: 999px;
padding: 3px 8px;
font-size: 0.7rem;
font-weight: 900;
border: 1px solid var(--border);
line-height: 1;
white-space: nowrap;
}
.production-sheet-page .task-rank-flag.task-rank-done {
background: #f0fdf4;
color: #15803d;
border-color: #bbf7d0;
}
.production-sheet-page .task-rank-flag.task-rank-pending {
background: #fff7ed;
color: #c2410c;
border-color: #fed7aa;
}
.production-sheet-page .task-resource-name {
color: var(--dark);
font-size: 0.78rem;
font-weight: 800;
}
.production-sheet-page .dashboard-toolbar {
display: flex;
flex-direction: column;
gap: 12px;
}
.production-sheet-page .dashboard-filter-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: flex-end;
}
.production-sheet-page .filter-bar {
display: grid;
grid-template-columns: minmax(260px, 1.4fr) repeat(4, minmax(135px, 150px)) auto;
gap: 10px;
align-items: end;
}
.production-sheet-page .date-filter-wrap {
display: flex;
flex-direction: column;
gap: 4px;
}
.production-sheet-page .date-filter-wrap.created-at-filter {
flex-direction: row;
align-items: end;
gap: 8px;
}
.production-sheet-page .date-filter-wrap.created-at-filter .created-at-input-wrap {
display: flex;
flex-direction: column;
gap: 4px;
}
.production-sheet-page .dashboard-filter-row .btn-custom,
.production-sheet-page .filter-bar .btn-custom,
.production-sheet-page .excel-filter-btn {
min-height: 38px;
white-space: nowrap;
}
.production-sheet-page .export-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-left: auto;
}
@media (max-width: 1200px) {
.production-sheet-page .filter-bar {
grid-template-columns: 1fr 1fr;
}
.production-sheet-page .search-input {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.production-sheet-page .dashboard-filter-row,
.production-sheet-page .filter-bar,
.production-sheet-page .export-actions {
display: flex;
flex-direction: column;
align-items: stretch;
}
.production-sheet-page .date-filter-wrap.created-at-filter {
flex-direction: column;
align-items: stretch;
}
}
.production-sheet-page .search-input,
.production-sheet-page .status-select,
.production-sheet-page .date-filter-input {
width: 100%;
border: 1px solid var(--border);
border-radius: 10px;
padding: 9px 12px;
font-size: 0.85rem;
background: #ffffff;
color: var(--dark);
outline: none;
}
.production-sheet-page .search-input:focus,
.production-sheet-page .status-select:focus,
.production-sheet-page .date-filter-input:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.production-sheet-page .date-filter-wrap {
position: relative;
}
.production-sheet-page .date-filter-wrap label {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 0.68rem;
font-weight: 800;
line-height: 1;
}
.production-sheet-page .date-filter-wrap .date-filter-input {
padding-top: 8px;
padding-bottom: 8px;
}
.production-sheet-page .active-filter-label {
margin-top: 10px;
color: var(--muted);
font-size: 0.78rem;
}
.production-sheet-page .project-card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 16px;
margin-bottom: 14px;
box-shadow: var(--shadow-sm);
transition: 0.2s ease;
}
.production-sheet-page .project-card:hover {
box-shadow: var(--shadow-md);
border-color: #bfdbfe;
}
.production-sheet-page .project-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 14px;
align-items: flex-start;
padding-bottom: 14px;
margin-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.production-sheet-page .project-title h3 {
font-size: 1.05rem;
font-weight: 800;
margin: 0 0 9px;
color: var(--dark);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
line-height: 1.35;
}
.production-sheet-page .project-title-main {
display: inline-flex;
align-items: center;
gap: 7px;
}
.production-sheet-page .project-title-main i {
color: var(--primary);
}
.production-sheet-page .project-info-text {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 0.8rem;
color: var(--muted);
}
.production-sheet-page .info-chip {
display: inline-flex;
align-items: center;
gap: 5px;
background: var(--soft-bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px 9px;
line-height: 1;
}
.production-sheet-page .info-chip i {
color: var(--primary);
font-size: 0.85rem;
}
.production-sheet-page .project-meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 10px;
}
.production-sheet-page .badge-pill {
padding: 4px 9px;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1;
white-space: nowrap;
}
.production-sheet-page .status-opened {
background: var(--success-soft);
color: var(--success);
border: 1px solid #bbf7d0;
}
.production-sheet-page .status-closed {
background: #f1f5f9;
color: #475569;
border: 1px solid var(--border);
}
.production-sheet-page .status-danger {
background: var(--danger-soft);
color: var(--danger);
border: 1px solid #fecaca;
}
.production-sheet-page .meta-pill {
background: #ffffff;
color: var(--muted);
border: 1px solid var(--border);
}
.production-sheet-page .filter-link {
background: transparent;
border: none;
padding: 0;
color: var(--primary);
font-weight: 800;
cursor: pointer;
font-size: 0.78rem;
}
.production-sheet-page .filter-link:hover {
text-decoration: underline;
}
.production-sheet-page .actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.production-sheet-page .btn-custom {
padding: 7px 11px;
border-radius: 9px;
font-size: 0.78rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid transparent;
cursor: pointer;
transition: 0.15s ease;
white-space: nowrap;
}
.production-sheet-page .btn-primary-custom {
background: var(--primary);
color: #ffffff;
}
.production-sheet-page .btn-primary-custom:hover {
background: var(--primary-dark);
color: #ffffff;
text-decoration: none;
}
.production-sheet-page .btn-outline-custom {
background: #ffffff;
color: var(--muted);
border-color: var(--border);
}
.production-sheet-page .btn-outline-custom:hover {
background: var(--soft-bg);
color: var(--dark);
text-decoration: none;
}
.production-sheet-page .btn-danger-custom {
background: var(--danger-soft);
color: var(--danger);
border-color: #fecaca;
}
.production-sheet-page .btn-danger-custom:hover {
background: var(--danger);
color: #ffffff;
text-decoration: none;
}
.production-sheet-page .btn-warning-custom {
background: var(--warning-soft);
color: var(--warning);
border-color: #fed7aa;
}
.production-sheet-page .btn-warning-custom:hover {
background: var(--warning);
color: #ffffff;
text-decoration: none;
}
.production-sheet-page .next-action-dropdown {
display: inline-flex;
position: relative;
}
.production-sheet-page .next-action-current {
min-width: 158px;
justify-content: space-between;
border-color: var(--na-border);
background: var(--na-bg);
color: var(--na-color);
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}
.production-sheet-page .next-action-current:hover,
.production-sheet-page .next-action-current:focus {
background: var(--na-bg);
color: var(--na-color);
border-color: var(--na-border);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
text-decoration: none;
}
.production-sheet-page .next-action-current:disabled {
opacity: 0.75;
cursor: not-allowed;
}
.production-sheet-page .next-action-chevron {
margin-left: auto;
font-size: 0.78rem;
opacity: 0.75;
}
.production-sheet-page .next-action-menu {
min-width: 230px;
padding: 8px;
border: 1px solid var(--border);
border-radius: 12px;
box-shadow: var(--shadow-md);
}
.production-sheet-page .next-action-option {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
border: 1px solid transparent;
border-radius: 10px;
padding: 9px 10px;
margin-bottom: 4px;
background: #ffffff;
color: var(--dark);
font-size: 0.78rem;
font-weight: 800;
text-align: left;
cursor: pointer;
transition: 0.15s ease;
}
.production-sheet-page .next-action-option:last-child {
margin-bottom: 0;
}
.production-sheet-page .next-action-option:hover,
.production-sheet-page .next-action-option.is-selected {
background: var(--na-bg);
color: var(--na-color);
border-color: var(--na-border);
}
.production-sheet-page .next-action-option.is-selected::after {
content: "\F26A";
font-family: "bootstrap-icons";
margin-left: auto;
color: var(--na-color);
font-size: 0.9rem;
}
.production-sheet-page .next-action-dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--na-color);
box-shadow: 0 0 0 3px var(--na-bg);
flex: 0 0 auto;
}
.production-sheet-page .next-action-mini {
background: var(--na-bg);
color: var(--na-color);
border-color: var(--na-border);
font-weight: 900;
}
.production-sheet-page .next-action-assign {
--na-bg: #eff6ff;
--na-border: #bfdbfe;
--na-color: #1d4ed8;
}
.production-sheet-page .next-action-followup {
--na-bg: #fff7ed;
--na-border: #fed7aa;
--na-color: #c2410c;
}
.production-sheet-page .next-action-fup-deliver {
--na-bg: #ecfdf5;
--na-border: #bbf7d0;
--na-color: #047857;
}
.production-sheet-page .next-action-assign-editing {
--na-bg: #f5f3ff;
--na-border: #ddd6fe;
--na-color: #6d28d9;
}
.production-sheet-page .next-action-qa {
--na-bg: #ecfeff;
--na-border: #a5f3fc;
--na-color: #0e7490;
}
.production-sheet-page .next-action-none {
--na-bg: #f8fafc;
--na-border: #cbd5e1;
--na-color: #475569;
}
.production-sheet-page .jobs-container {
display: flex;
flex-direction: column;
gap: 9px;
}
.production-sheet-page details.job-box {
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.production-sheet-page details.job-box[open] {
background: #ffffff;
border-color: #bfdbfe;
}
.production-sheet-page summary.job-summary {
list-style: none;
cursor: pointer;
padding: 12px 14px;
display: grid;
grid-template-columns: 1fr auto;
gap: 12px;
align-items: center;
}
.production-sheet-page summary.job-summary::-webkit-details-marker {
display: none;
}
.production-sheet-page .job-title-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin-bottom: 8px;
}
.production-sheet-page .job-title-row h4 {
font-size: 0.94rem;
font-weight: 900;
color: var(--dark);
margin: 0;
}
.production-sheet-page .job-mini-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.production-sheet-page .job-mini-item {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 999px;
padding: 5px 8px;
font-size: 0.72rem;
color: var(--muted);
display: inline-flex;
align-items: center;
gap: 4px;
line-height: 1;
}
.production-sheet-page .job-mini-item strong {
color: var(--dark);
font-weight: 800;
}
.production-sheet-page .job-content {
border-top: 1px solid var(--border);
padding: 12px 14px 14px;
}
.production-sheet-page .stat-item {
background: #ffffff;
border: 1px solid var(--border);
padding: 8px 9px;
border-radius: 10px;
text-align: left;
}
.production-sheet-page .task-details-box {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 10px;
margin-top: 8px;
overflow: hidden;
}
.production-sheet-page .task-details-summary {
list-style: none;
cursor: pointer;
padding: 10px 12px;
background: #ecfeff;
}
.production-sheet-page .task-details-summary::-webkit-details-marker {
display: none;
}
.production-sheet-page .task-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.production-sheet-page .task-details-summary h5 {
font-size: 0.84rem;
font-weight: 800;
color: var(--dark);
margin: 0;
line-height: 1.55;
}
.production-sheet-page .task-details-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 9px;
padding: 12px;
background: #f8fafc;
border-top: 1px solid var(--border);
}
.production-sheet-page .task-info-item {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 9px;
padding: 8px 9px;
}
.production-sheet-page .task-info-item span {
display: block;
color: var(--muted);
font-size: 0.68rem;
font-weight: 600;
margin-bottom: 2px;
}
.production-sheet-page .task-info-item strong {
color: var(--dark);
font-size: 0.79rem;
font-weight: 800;
word-break: break-word;
}
.production-sheet-page .task-instructions-box {
margin: 12px;
padding: 12px;
background: var(--warning-soft);
border-left: 4px solid var(--warning);
border-radius: 8px;
}
.production-sheet-page .task-instructions-box h6 {
color: #92400e;
font-size: 0.78rem;
font-weight: 800;
margin: 0 0 6px;
}
.production-sheet-page .task-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 12px;
border-top: 1px solid var(--border);
background: #ffffff;
}
.production-sheet-page .empty-state {
text-align: center;
padding: 42px 20px;
background: #ffffff;
border-radius: var(--radius-lg);
border: 1px dashed var(--border);
color: var(--muted);
}
.production-sheet-page .empty-state i {
font-size: 2.4rem;
color: #cbd5e1;
margin-bottom: 12px;
}
.production-sheet-page .empty-state h3 {
color: var(--dark);
font-size: 1rem;
margin-bottom: 5px;
}
.production-sheet-page .cpo-modal .modal-content,
.production-sheet-page .job-rate-modal .modal-content {
border: 0;
border-radius: 16px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
overflow: hidden;
}
.production-sheet-page .cpo-modal .modal-header,
.production-sheet-page .job-rate-modal .modal-header {
background: linear-gradient(180deg, #ffffff, #f8fafc);
border-bottom: 1px solid var(--border);
padding: 16px 18px;
}
.production-sheet-page .cpo-modal .modal-title,
.production-sheet-page .job-rate-modal .modal-title {
font-size: 1rem;
font-weight: 800;
color: var(--dark);
display: flex;
align-items: center;
gap: 8px;
}
.production-sheet-page .cpo-modal .modal-body,
.production-sheet-page .job-rate-modal .modal-body {
padding: 18px;
}
.production-sheet-page .cpo-modal .form-label,
.production-sheet-page .job-rate-modal label {
font-size: 0.78rem;
font-weight: 800;
color: var(--dark);
margin-bottom: 6px;
}
.production-sheet-page .cpo-modal .form-control,
.production-sheet-page .job-rate-modal .form-control {
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
font-size: 0.85rem;
}
.production-sheet-page .cpo-modal .form-control:focus,
.production-sheet-page .job-rate-modal .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.production-sheet-page .cpo-modal .modal-footer,
.production-sheet-page .job-rate-modal .modal-footer {
border-top: 1px solid var(--border);
padding: 14px 18px;
background: #ffffff;
}
.production-sheet-page .modal-close-btn {
border: 0;
background: transparent;
color: var(--muted);
font-size: 1rem;
line-height: 1;
padding: 4px;
cursor: pointer;
}
.production-sheet-page .modal-close-btn:hover {
color: var(--dark);
}
.production-sheet-page .cpo-upload-box {
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 12px;
padding: 14px;
}
.production-sheet-page .cpo-file-hint {
display: block;
margin-top: 6px;
font-size: 0.72rem;
color: var(--muted);
}
.production-sheet-page .cpo-selected-file {
margin-top: 8px;
font-size: 0.75rem;
font-weight: 700;
color: var(--primary);
display: none;
}
.production-sheet-page .btn-plain-dropdown {
background: #ffffff;
color: var(--dark);
border: 1px solid var(--border);
}
.production-sheet-page .btn-plain-dropdown:hover,
.production-sheet-page .btn-plain-dropdown:focus {
background: #f8fafc;
color: var(--dark);
border-color: var(--border);
box-shadow: none;
}
.production-sheet-page .cpo-actions-dropdown .dropdown-menu {
min-width: 145px;
padding: 6px;
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: var(--shadow-sm);
}
.production-sheet-page .cpo-actions-dropdown .dropdown-item {
font-size: 0.78rem;
font-weight: 600;
color: var(--dark);
border-radius: 7px;
padding: 8px 10px;
display: flex;
align-items: center;
gap: 7px;
}
.production-sheet-page .cpo-actions-dropdown .dropdown-item:hover {
background: #f8fafc;
color: var(--dark);
}
.production-sheet-page .form-group {
margin-bottom: 1rem;
}
@media (max-width: 1200px) {
.production-sheet-page .filter-bar {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 900px) {
.production-sheet-page .dashboard-topbar,
.production-sheet-page .project-head,
.production-sheet-page summary.job-summary,
.production-sheet-page .task-summary-row {
grid-template-columns: 1fr;
flex-direction: column;
align-items: flex-start;
}
.production-sheet-page .actions {
justify-content: flex-start;
}
.production-sheet-page .filter-bar {
grid-template-columns: 1fr;
}
}
.production-sheet-page .cpo-modal .modal-content,
.production-sheet-page .job-rate-modal .modal-content,
.production-sheet-page .evaluation-modal .modal-content {
border: 0;
border-radius: 16px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
overflow: hidden;
}
.production-sheet-page .cpo-modal .modal-header,
.production-sheet-page .job-rate-modal .modal-header,
.production-sheet-page .evaluation-modal .modal-header {
background: linear-gradient(180deg, #ffffff, #f8fafc);
border-bottom: 1px solid var(--border);
padding: 16px 18px;
}
.production-sheet-page .cpo-modal .modal-title,
.production-sheet-page .job-rate-modal .modal-title,
.production-sheet-page .evaluation-modal .modal-title {
font-size: 1rem;
font-weight: 800;
color: var(--dark);
display: flex;
align-items: center;
gap: 8px;
}
.production-sheet-page .cpo-modal .modal-body,
.production-sheet-page .job-rate-modal .modal-body,
.production-sheet-page .evaluation-modal .modal-body {
padding: 18px;
}
.production-sheet-page .cpo-modal .modal-footer,
.production-sheet-page .job-rate-modal .modal-footer,
.production-sheet-page .evaluation-modal .modal-footer {
border-top: 1px solid var(--border);
padding: 14px 18px;
background: #ffffff;
}
.production-sheet-page .evaluation-intro {
background: var(--primary-soft);
border: 1px solid #bfdbfe;
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 16px;
}
.production-sheet-page .evaluation-intro strong {
display: block;
color: var(--dark);
font-size: 0.9rem;
margin-bottom: 4px;
}
.production-sheet-page .evaluation-intro span {
color: var(--muted);
font-size: 0.78rem;
}
.production-sheet-page .rating-row {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 13px 14px;
margin-bottom: 12px;
}
.production-sheet-page .rating-label {
display: block;
color: var(--dark);
font-size: 0.82rem;
font-weight: 800;
margin-bottom: 8px;
}
.production-sheet-page .star-rating {
display: inline-flex;
flex-direction: row-reverse;
gap: 4px;
}
.production-sheet-page .star-rating input {
display: none;
}
.production-sheet-page .star-rating label {
cursor: pointer;
color: #cbd5e1;
font-size: 1.55rem;
line-height: 1;
transition: 0.15s ease;
}
.production-sheet-page .star-rating input:checked ~ label,
.production-sheet-page .star-rating label:hover,
.production-sheet-page .star-rating label:hover ~ label {
color: #f59e0b;
}
.production-sheet-page .evaluation-comment label {
font-size: 0.78rem;
font-weight: 800;
color: var(--dark);
margin-bottom: 6px;
}
.production-sheet-page .evaluation-comment textarea {
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
font-size: 0.85rem;
resize: vertical;
min-height: 90px;
}
.production-sheet-page .evaluation-comment textarea:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.production-sheet-page .project-notes-modal .modal-content {
border: 0;
border-radius: 16px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
overflow: hidden;
}
.production-sheet-page .project-notes-modal .modal-header {
background: linear-gradient(180deg, #ffffff, #f8fafc);
border-bottom: 1px solid var(--border);
padding: 16px 18px;
}
.production-sheet-page .project-notes-modal .modal-title {
font-size: 1rem;
font-weight: 800;
color: var(--dark);
display: flex;
align-items: center;
gap: 8px;
}
.production-sheet-page .project-notes-modal .modal-body {
padding: 18px;
}
.production-sheet-page .project-note-write-box {
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px;
}
.production-sheet-page .project-note-item {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 10px;
}
.production-sheet-page .project-note-header {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 6px;
font-size: 0.78rem;
}
.production-sheet-page .project-note-user {
font-weight: 900;
color: var(--dark);
}
.production-sheet-page .project-note-date {
color: var(--muted);
white-space: nowrap;
}
.production-sheet-page .project-note-text {
color: var(--dark);
font-size: 0.85rem;
line-height: 1.6;
white-space: pre-wrap;
}
.production-sheet-page .project-notes-empty {
background: #f8fafc;
border: 1px dashed var(--border);
border-radius: 12px;
padding: 18px;
text-align: center;
color: var(--muted);
font-size: 0.85rem;
}
.production-sheet-page .project-notes-modal {
z-index: 1065;
}
.production-sheet-page .project-notes-modal .modal-dialog {
max-width: 760px;
width: calc(100% - 28px);
}
.production-sheet-page .project-notes-modal .form-label {
font-size: 0.78rem;
font-weight: 800;
color: var(--dark);
margin-bottom: 6px;
}
.production-sheet-page .project-notes-modal .form-control {
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
font-size: 0.85rem;
}
.production-sheet-page .project-notes-modal .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.production-sheet-page .project-notes-list {
max-height: 380px;
overflow-y: auto;
padding-right: 4px;
}
.production-sheet-page .project-notes-list::-webkit-scrollbar {
width: 7px;
}
.production-sheet-page .project-notes-list::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 999px;
}
.production-sheet-page .notes-count-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 2px 6px;
margin-left: 4px;
border-radius: 999px;
background: #dc2626;
color: #fff;
font-size: 11px;
font-weight: 800;
}
.production-sheet-page .scorecard-query-modal {
z-index: 1065;
}
.production-sheet-page .scorecard-query-modal .modal-dialog {
max-width: 900px;
width: calc(100% - 28px);
}
.production-sheet-page .scorecard-query-modal .modal-content {
border: 0;
border-radius: 16px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
overflow: hidden;
}
.production-sheet-page .scorecard-query-modal .modal-header {
background: linear-gradient(180deg, #ffffff, #f8fafc);
border-bottom: 1px solid var(--border);
padding: 16px 18px;
}
.production-sheet-page .scorecard-query-modal .modal-title {
font-size: 1rem;
font-weight: 800;
color: var(--dark);
display: flex;
align-items: center;
gap: 8px;
}
.production-sheet-page .scorecard-query-modal .modal-body {
padding: 18px;
}
.production-sheet-page .scorecard-query-modal .modal-footer {
border-top: 1px solid var(--border);
padding: 14px 18px;
background: #ffffff;
}
.production-sheet-page .scorecard-query-modal .form-label {
font-size: 0.78rem;
font-weight: 800;
color: var(--dark);
margin-bottom: 6px;
}
.production-sheet-page .scorecard-query-modal .form-control {
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
font-size: 0.85rem;
min-height: 42px;
}
.production-sheet-page .scorecard-query-modal .form-control:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
}
.production-sheet-page .scorecard-query-modal .form-control[readonly],
.production-sheet-page .scorecard-query-modal .form-control:disabled {
background: #f8fafc;
color: #475569;
}
.production-sheet-page .scorecard-form-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.production-sheet-page .scorecard-existing-box {
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 12px;
padding: 12px;
}
.production-sheet-page .scorecard-existing-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.production-sheet-page .scorecard-existing-header strong {
color: var(--dark);
font-size: 0.86rem;
font-weight: 900;
}
.production-sheet-page .scorecard-existing-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
background: #ffffff;
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
margin-bottom: 8px;
}
.production-sheet-page .scorecard-existing-item:last-child {
margin-bottom: 0;
}
.production-sheet-page .scorecard-existing-title {
color: var(--dark);
font-size: 0.82rem;
font-weight: 900;
margin-bottom: 4px;
}
.production-sheet-page .scorecard-existing-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
color: var(--muted);
font-size: 0.74rem;
}
.production-sheet-page .scorecard-message {
margin-top: 12px;
border-radius: 10px;
padding: 10px 12px;
font-size: 0.82rem;
font-weight: 700;
}
.production-sheet-page .scorecard-message.is-success {
background: var(--success-soft);
color: var(--success);
border: 1px solid #bbf7d0;
}
.production-sheet-page .scorecard-message.is-danger {
background: var(--danger-soft);
color: var(--danger);
border: 1px solid #fecaca;
}
@media (max-width: 900px) {
.production-sheet-page .scorecard-form-grid {
grid-template-columns: 1fr;
}
.production-sheet-page .scorecard-existing-item {
grid-template-columns: 1fr;
}
}
.production-sheet-page .project-card,
.production-sheet-page .jobs-container,
.production-sheet-page details.job-box,
.production-sheet-page details.job-box[open],
.production-sheet-page summary.job-summary,
.production-sheet-page .job-content,
.production-sheet-page .actions {
overflow: visible !important;
}
.production-sheet-page details.job-box {
position: relative;
z-index: 1;
}
.production-sheet-page details.job-box.next-action-open {
z-index: 99999 !important;
}
.production-sheet-page .next-action-dropdown {
position: relative;
z-index: 1000;
}
.production-sheet-page .next-action-dropdown.show,
.production-sheet-page .next-action-dropdown .dropdown-menu.show,
.production-sheet-page .next-action-menu.show {
z-index: 999999 !important;
}
.production-sheet-page .next-action-menu {
z-index: 999999 !important;
}
.production-sheet-page .next-action-mini {
position: relative;
z-index: 1;
}
.production-sheet-page .next-action-assign {
--na-bg: #eff6ff;
--na-border: #bfdbfe;
--na-color: #1d4ed8;
}
.production-sheet-page .next-action-followup {
--na-bg: #fff7ed;
--na-border: #fed7aa;
--na-color: #c2410c;
}
.production-sheet-page .next-action-fup-deliver {
--na-bg: #ecfdf5;
--na-border: #bbf7d0;
--na-color: #047857;
}
.production-sheet-page .next-action-assign-editing {
--na-bg: #f5f3ff;
--na-border: #ddd6fe;
--na-color: #6d28d9;
}
.production-sheet-page .next-action-qa {
--na-bg: #ecfeff;
--na-border: #a5f3fc;
--na-color: #0e7490;
}
.production-sheet-page .next-action-none {
--na-bg: #f8fafc;
--na-border: #cbd5e1;
--na-color: #475569;
}
.production-sheet-page .next-action-current,
.production-sheet-page .next-action-mini {
background: var(--na-bg) !important;
color: var(--na-color) !important;
border-color: var(--na-border) !important;
}
.production-sheet-page .next-action-current:hover,
.production-sheet-page .next-action-current:focus {
background: var(--na-bg) !important;
color: var(--na-color) !important;
border-color: var(--na-border) !important;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
text-decoration: none;
}
.production-sheet-page .next-action-modal .modal-content {
border: 0;
border-radius: 16px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
overflow: hidden;
}
.production-sheet-page .next-action-modal .modal-header {
background: linear-gradient(180deg, #ffffff, #f8fafc);
border-bottom: 1px solid #e2e8f0;
padding: 16px 18px;
}
.production-sheet-page .next-action-modal .modal-title {
font-size: 1rem;
font-weight: 800;
color: #0f172a;
display: flex;
align-items: center;
gap: 8px;
}
.production-sheet-page .next-action-modal .modal-body {
padding: 18px;
}
.production-sheet-page .next-action-modal .modal-footer {
border-top: 1px solid #e2e8f0;
padding: 14px 18px;
background: #ffffff;
}
.production-sheet-page .next-action-modal-intro {
background: #eff6ff;
border: 1px solid #bfdbfe;
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 14px;
}
.production-sheet-page .next-action-modal-intro strong {
display: block;
color: #0f172a;
font-size: 0.9rem;
margin-bottom: 4px;
}
.production-sheet-page .next-action-modal-intro span {
color: #64748b;
font-size: 0.78rem;
}
.production-sheet-page .next-action-choice-grid {
display: grid;
grid-template-columns: 1fr;
gap: 9px;
}
.production-sheet-page .next-action-choice {
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 12px;
background: #ffffff;
padding: 12px;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 10px;
align-items: center;
text-align: left;
cursor: pointer;
transition: 0.16s ease;
}
.production-sheet-page .next-action-choice:hover,
.production-sheet-page .next-action-choice.is-selected {
background: var(--na-bg);
border-color: var(--na-border);
transform: translateY(-1px);
}
.production-sheet-page .next-action-choice-icon {
width: 34px;
height: 34px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--na-bg);
color: var(--na-color);
border: 1px solid var(--na-border);
}
.production-sheet-page .next-action-choice-content strong {
display: block;
color: #0f172a;
font-size: 0.84rem;
font-weight: 900;
line-height: 1.2;
}
.production-sheet-page .next-action-choice-content small {
display: block;
color: #64748b;
font-size: 0.72rem;
margin-top: 3px;
line-height: 1.35;
}
.production-sheet-page .next-action-choice-check {
color: var(--na-color);
opacity: 0;
font-size: 1.1rem;
}
.production-sheet-page .next-action-choice.is-selected .next-action-choice-check {
opacity: 1;
}
.production-sheet-page .next-action-message {
margin-top: 12px;
border-radius: 10px;
padding: 10px 12px;
font-size: 0.82rem;
font-weight: 700;
}
.production-sheet-page .next-action-message.is-success {
background: #ecfdf5;
color: #059669;
border: 1px solid #bbf7d0;
}
.production-sheet-page .next-action-message.is-danger {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
}
.production-sheet-page .create-job-modal .select2-container {
width: 100% !important;
}
.production-sheet-page .select2-container--open {
z-index: 99999 !important;
}
.production-sheet-page .create-job-modal .select2-container .select2-selection--single {
height: 38px;
border: 1px solid #ced4da;
border-radius: 6px;
}
.production-sheet-page .create-job-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 36px;
}
.production-sheet-page .create-job-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 36px;
}
.production-sheet-page .excel-filter {
position: relative;
}
.production-sheet-page .excel-filter-btn {
min-height: 42px;
padding: 0 14px;
border: 1px solid #dbe3ef;
background: #fff;
color: #111827;
border-radius: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
}
.production-sheet-page .excel-filter-btn:hover {
border-color: #2563eb;
}
.production-sheet-page .excel-filter-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 9999;
width: 230px;
background: #fff;
border: 1px solid #dbe3ef;
border-radius: 14px;
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.14);
padding: 10px;
display: none;
}
.production-sheet-page .excel-filter-menu.is-open {
display: block;
}
.production-sheet-page .excel-filter-option {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 10px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
color: #111827;
}
.production-sheet-page .excel-filter-option:hover {
background: #f1f5f9;
}
.production-sheet-page .excel-filter-option input {
width: 16px;
height: 16px;
}
.production-sheet-page .excel-filter {
position: relative;
}
.production-sheet-page .excel-filter-btn {
min-height: 42px;
padding: 0 14px;
border: 1px solid #dbe3ef;
background: #ffffff;
color: #111827;
border-radius: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
white-space: nowrap;
}
.production-sheet-page .excel-filter-btn:hover {
border-color: #2563eb;
}
.production-sheet-page .excel-filter-menu {
position: absolute;
top: calc(100% + 8px);
left: 0;
z-index: 99999;
width: 240px;
background: #ffffff;
border: 1px solid #dbe3ef;
border-radius: 14px;
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.14);
padding: 10px;
display: none;
}
.production-sheet-page .excel-filter-menu.is-open {
display: block;
}
.production-sheet-page .excel-filter-option {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 10px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
color: #111827;
margin: 0;
}
.production-sheet-page .excel-filter-option:hover {
background: #f1f5f9;
}
.production-sheet-page .excel-filter-option input {
width: 16px;
height: 16px;
}
.production-sheet-page .evaluation-modal {
z-index: 1065 !important;
}
.production-sheet-page .modal-backdrop {
z-index: 1060 !important;
}
.production-sheet-page .evaluation-modal .modal-dialog {
max-height: calc(100vh - 40px);
}
.production-sheet-page .evaluation-modal .modal-content {
max-height: calc(100vh - 40px);
overflow-y: auto;
}
.production-sheet-page .resource-invoice-link {
display: inline-flex;
align-items: center;
gap: 6px;
width: fit-content;
margin-top: 4px;
padding: 6px 10px;
border-radius: 999px;
background: #0f766e;
color: #ffffff !important;
font-size: 0.75rem;
font-weight: 800;
text-decoration: none !important;
border: 1px solid #0f766e;
box-shadow: 0 4px 10px rgba(15, 118, 110, 0.18);
}
.production-sheet-page .resource-invoice-link:hover {
background: #115e59;
border-color: #115e59;
color: #ffffff !important;
transform: translateY(-1px);
}
.production-sheet-page .resource-invoice-empty {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 4px;
color: #94a3b8 !important;
font-size: 0.75rem;
font-weight: 800;
}
.production-sheet-page .dashboard-filter-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-bottom: 18px;
padding: 16px;
border: 1px solid #dbeafe;
border-radius: 20px;
background: linear-gradient(135deg, #f8fafc, #ecfeff);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.production-sheet-page .dashboard-status-filter {
position: relative;
min-width: 150px;
}
.production-sheet-page .dashboard-filter-btn {
width: 100%;
min-height: 54px;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
border-radius: 16px;
font-weight: 800;
font-size: 14px;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.production-sheet-page .dashboard-filter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}
.production-sheet-page .project-filter-btn {
background: linear-gradient(135deg, #0f766e, #14b8a6);
color: #fff;
border: none;
}
.production-sheet-page .task-filter-btn {
background: linear-gradient(135deg, #1d4ed8, #38bdf8);
color: #fff;
border: none;
}
.production-sheet-page .next-filter-btn {
background: linear-gradient(135deg, #7c3aed, #a855f7);
color: #fff;
border: none;
}
.production-sheet-page .filter-total-badge,
.production-sheet-page .js-project-status-filter-count,
.production-sheet-page .js-task-status-filter-count,
.production-sheet-page .js-next-step-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 24px;
height: 24px;
padding: 0 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
color: #fff;
font-size: 12px;
font-weight: 900;
}
.production-sheet-page .excel-filter-menu {
min-width: 260px;
border-radius: 16px;
padding: 10px;
border: 1px solid #e2e8f0;
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.18);
background: #fff;
z-index: 1080;
}
.production-sheet-page .excel-filter-option {
display: grid;
grid-template-columns: 20px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
margin-bottom: 6px;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.production-sheet-page .excel-filter-option:hover {
background: #f1f5f9;
transform: translateX(2px);
}
.production-sheet-page .excel-filter-option input {
width: 16px;
height: 16px;
accent-color: #0f766e;
}
.production-sheet-page .excel-filter-option strong {
min-width: 28px;
padding: 3px 8px;
border-radius: 999px;
background: #e0f2fe;
color: #075985;
font-size: 12px;
text-align: center;
}
.production-sheet-page .status-option-opened strong,
.production-sheet-page .task-option-delivered strong {
background: #dcfce7;
color: #166534;
}
.production-sheet-page .status-option-closed strong,
.production-sheet-page .task-option-cancelled strong {
background: #e5e7eb;
color: #374151;
}
.production-sheet-page .task-option-assigned strong {
background: #dbeafe;
color: #1d4ed8;
}
.production-sheet-page .task-option-submitted strong {
background: #fef3c7;
color: #92400e;
}
.production-sheet-page .task-option-rejected strong {
background: #fee2e2;
color: #991b1b;
}
@media (max-width: 768px) {
.production-sheet-page .dashboard-status-filter {
width: 100%;
min-width: 100%;
}
}
.production-sheet-page .task-pending-client {
border-color: #f59e0b !important;
box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.25);
}
.production-sheet-page .pending-client-filter-btn .filter-total-badge {
background: #f59e0b;
color: #111827;
font-weight: 800;
}
.production-sheet-page .next-filter-btn .filter-total-badge {
background: rgba(255, 255, 255, 0.22);
color: #fff;
font-weight: 800;
}
.production-sheet-page .project-card.is-compact-project-card {
position: relative;
overflow: visible;
padding: 10px 18px 12px !important;
}
.production-sheet-page .project-toggle {
min-height: 38px;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 999px;
backdrop-filter: blur(16px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
color: #0f172a;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
padding: 0 14px;
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.production-sheet-page .project-toggle:hover {
transform: translateY(-1px);
background: #ffffff;
border-color: rgba(37, 99, 235, 0.22);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
}
.production-sheet-page .project-toggle:focus-visible {
outline: 3px solid rgba(59, 130, 246, 0.24);
outline-offset: 2px;
}
.production-sheet-page .project-toggle i {
transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.production-sheet-page .project-head-wrapper.open .project-toggle-chevron {
transform: rotate(180deg);
}
.production-sheet-page .project-head-wrapper:not(.open) {
display: inline-flex;
align-items: center;
gap: 7px;
flex-wrap: nowrap;
width: auto;
max-width: 100%;
margin: 0;
padding: 0;
line-height: 1;
}
.production-sheet-page .project-card.is-compact-project-card > .project-head-wrapper:not(.open) {
position: absolute;
top: 0;
left: 50%;
z-index: 5;
transform: translate(-50%, -50%);
}
.production-sheet-page .project-card.is-compact-project-card .jobs-container {
margin-top: 0 !important;
}
.production-sheet-page .project-head-wrapper:not(.open) .project-toggle {
min-height: 38px;
padding: 0 14px;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88);
font-size: 0.98rem;
}
.production-sheet-page .project-head-wrapper:not(.open) .project-head {
display: inline-flex;
align-items: center;
gap: 7px;
flex: 0 1 auto;
min-width: 0;
width: auto;
}
.production-sheet-page .project-title {
min-width: 0;
}
.production-sheet-page .project-head-wrapper:not(.open) .project-title {
display: inline-flex;
align-items: center;
min-width: 0;
width: auto;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
}
.production-sheet-page .project-title-text {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.production-sheet-page .project-head-wrapper:not(.open) .project-title h3 {
margin: 0;
gap: 0;
line-height: 1;
padding: 0 !important;
border: 0 !important;
}
.production-sheet-page .project-head-wrapper:not(.open) .project-title-main {
max-width: 280px;
height: 38px;
padding: 0 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(15, 23, 42, 0.10);
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.88);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.98rem;
}
.production-sheet-page .project-head-wrapper:not(.open) .project-title::before,
.production-sheet-page .project-head-wrapper:not(.open) .project-title::after,
.production-sheet-page .project-head-wrapper:not(.open) .project-title h3::before,
.production-sheet-page .project-head-wrapper:not(.open) .project-title h3::after {
display: none !important;
content: none !important;
}
.production-sheet-page .project-head-wrapper:not(.open) .project-info-text,
.production-sheet-page .project-head-wrapper:not(.open) .project-meta {
display: none !important;
}
.production-sheet-page .project-head-wrapper.open .project-info-text,
.production-sheet-page .project-head-wrapper.open .project-meta,
.production-sheet-page .project-head-wrapper.open .actions {
animation: projectHeadFadeIn 0.22s ease both;
}
.production-sheet-page .project-head-wrapper .filter-link {
border: 0;
background: transparent;
padding: 0;
color: #0369a1;
font-weight: 800;
cursor: pointer;
}
.production-sheet-page .project-head-wrapper .filter-link:hover {
color: #075985;
text-decoration: underline;
text-underline-offset: 3px;
}
.production-sheet-page .project-head-wrapper .actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.production-sheet-page .project-head-wrapper:not(.open) .actions {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
width: auto;
margin: 0;
}
.production-sheet-page .project-head-wrapper:not(.open) .actions > :not(.js-open-project-notes):not(.js-open-scorecard-modal) {
display: none !important;
}
.production-sheet-page .notes-count-badge {
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
color: #fff;
font-size: 0.68rem;
font-weight: 900;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 5px;
box-shadow: 0 2px 6px rgba(255, 59, 48, 0.35);
}
.production-sheet-page .project-head-wrapper:not(.open) .notes-count-badge {
min-width: 16px;
height: 16px;
padding: 0 5px;
font-size: 0.62rem;
margin-left: 3px;
}
@keyframes projectHeadFadeIn {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 768px) {
.production-sheet-page .project-head-wrapper {
gap: 8px;
}
.production-sheet-page .project-card.is-compact-project-card > .project-head-wrapper:not(.open) {
left: 50%;
max-width: calc(100% - 24px);
}
.production-sheet-page .project-head {
min-width: 0;
}
.production-sheet-page .project-head-wrapper .actions {
width: 100%;
}
.production-sheet-page .project-head-wrapper.open {
grid-template-columns: 1fr;
padding: 12px;
}
.production-sheet-page .project-head-wrapper.open .project-head {
flex-direction: column;
}
.production-sheet-page .project-head-wrapper:not(.open) .project-title-main {
max-width: 190px;
}
}
.production-sheet-page .project-title-main {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.production-sheet-page .project-title-text {
color: inherit;
font: inherit;
font-weight: inherit;
user-select: text;
cursor: text;
}
.production-sheet-page .project-title-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
background: transparent;
border: none;
cursor: pointer;
}
.production-sheet-page .projects-list {
display: flex;
flex-direction: column;
gap: 18px;
}
.production-sheet-page .project-card.is-filter-hidden {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
}
.production-sheet-page .pinned-scorecards {
margin: 14px 0 24px;
border: 1px solid #f59e0b;
border-radius: 14px;
background: #fffbeb;
overflow: hidden;
}
.production-sheet-page .pinned-scorecards summary {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
color: #92400e;
font-weight: 800;
cursor: pointer;
}
.production-sheet-page .pinned-count {
min-width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
background: #f59e0b;
}
.production-sheet-page .pinned-scorecards-list {
max-height: 220px;
padding: 8px;
overflow-y: auto;
border-top: 1px solid #fde68a;
}
.production-sheet-page .pinned-scorecard-item {
display: grid;
grid-template-columns: auto auto 1fr 1fr 1fr auto;
gap: 10px;
align-items: center;
padding: 10px 12px;
color: #334155;
text-decoration: none;
border-radius: 10px;
background: white;
margin-bottom: 6px;
}
.production-sheet-page .pinned-scorecard-item:hover {
background: #fff7d6;
}
.production-sheet-page .pinned-scorecard-item > i,
.production-sheet-page .pinned-deadline {
color: #d97706;
}
.production-sheet-page .pinned-scorecard-item {
width: 100%;
border: 0;
text-align: left;
cursor: pointer;
font: inherit;
}
.production-sheet-page .project-card {
position: relative;
overflow: visible;
}
.production-sheet-page .project-card.is-compact-project-card {
margin-top: 32px;
}
.production-sheet-page .project-card.is-compact-project-card > .project-head-wrapper:not(.open) {
display: none !important;
}
.production-sheet-page .project-compact-tabs {
display: none;
}
.production-sheet-page .project-card.is-compact-project-card > .project-compact-tabs {
position: absolute;
top: -25px;
left: 14px;
z-index: 25;
display: inline-flex;
align-items: flex-end;
gap: 0;
max-width: calc(100% - 28px);
overflow: visible;
}
.production-sheet-page .project-compact-tab {
height: 26px;
min-height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 0 10px;
margin: 0;
margin-left: -1px;
border: 1px solid #cbd5e1;
border-bottom-color: #ecfeff;
border-radius: 8px 8px 0 0;
background: #ffffff;
color: #0f172a;
font-size: 0.68rem;
font-weight: 800;
line-height: 1;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.9) inset;
}
.production-sheet-page .project-compact-tab:focus,
.production-sheet-page .project-compact-tab:active,
.production-sheet-page .project-compact-tab:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.production-sheet-page .compact-project-number-tab {
margin-left: 0;
color: #047857;
background: linear-gradient(180deg, #f0fdf4, #dcfce7);
border-color: #bbf7d0;
border-bottom-color: #ecfeff;
max-width: 260px;
}
.production-sheet-page .compact-deadline-tab {
color: #b91c1c;
background: linear-gradient(180deg, #fff7ed, #fee2e2);
border-color: #fecaca;
border-bottom-color: #ecfeff;
cursor: default;
}
.production-sheet-page .compact-notes-tab {
color: #1d4ed8;
background: linear-gradient(180deg, #ffffff, #eff6ff);
border-color: #bfdbfe;
border-bottom-color: #ecfeff;
}
.production-sheet-page .compact-scorecard-tab {
color: #92400e;
background: linear-gradient(180deg, #ffffff, #fffbeb);
border-color: #fde68a;
border-bottom-color: #ecfeff;
}
.production-sheet-page .project-compact-tabs .notes-count-badge {
min-width: 14px;
height: 14px;
padding: 0 4px;
margin-left: 2px;
font-size: 0.55rem;
line-height: 14px;
border-radius: 999px;
}
.production-sheet-page .project-compact-tabs .project-toggle-chevron {
font-size: 0.66rem;
}
.production-sheet-page .project-card:not(.is-compact-project-card) > .project-compact-tabs {
display: none !important;
}
@media (max-width: 768px) {
.production-sheet-page .project-card.is-compact-project-card {
margin-top: 31px;
}
.production-sheet-page .project-card.is-compact-project-card > .project-compact-tabs {
top: -24px;
left: 10px;
max-width: calc(100% - 20px);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
.production-sheet-page .project-card.is-compact-project-card > .project-compact-tabs::-webkit-scrollbar {
display: none;
}
.production-sheet-page .project-compact-tab {
height: 25px;
min-height: 25px;
padding: 0 8px;
font-size: 0.64rem;
}
.production-sheet-page .compact-project-number-tab {
max-width: 155px;
}
}
html body.production-sheet-page,
body.production-sheet-page {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body.production-sheet-page {
font-size: 12px !important;
line-height: 1.28 !important;
}
.production-sheet-page .dashboard-page {
width: calc(100vw - 10px) !important;
max-width: none !important;
margin-left: calc(50% - 50vw + 5px) !important;
margin-right: calc(50% - 50vw + 5px) !important;
padding: 8px 5px 14px !important;
}
.production-sheet-page main .dashboard-page,
.production-sheet-page .container .dashboard-page,
.production-sheet-page .container-fluid .dashboard-page {
max-width: none !important;
}
.production-sheet-page .dashboard-topbar {
gap: 8px !important;
margin-bottom: 8px !important;
align-items: center !important;
}
.production-sheet-page .dashboard-title h2 {
font-size: 1rem !important;
line-height: 1.1 !important;
}
.production-sheet-page .dashboard-title p {
font-size: 0.68rem !important;
margin-top: 2px !important;
}
.production-sheet-page .dashboard-toolbar {
padding: 8px !important;
margin-bottom: 10px !important;
gap: 7px !important;
border-radius: 10px !important;
}
.production-sheet-page .projects-list {
gap: 8px !important;
}
.production-sheet-page .kpi-grid {
grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)) !important;
gap: 6px !important;
margin-bottom: 8px !important;
}
.production-sheet-page .kpi-card {
padding: 7px 8px !important;
border-radius: 8px !important;
}
.production-sheet-page .kpi-card span {
font-size: 0.58rem !important;
margin-bottom: 1px !important;
}
.production-sheet-page .kpi-card strong {
font-size: 0.92rem !important;
}
.production-sheet-page .kpi-icon-row {
gap: 4px !important;
}
.production-sheet-page .kpi-icon-row i {
font-size: 0.78rem !important;
}
.production-sheet-page .dashboard-filter-row {
gap: 6px !important;
margin-bottom: 8px !important;
padding: 7px !important;
border-radius: 10px !important;
align-items: flex-end !important;
box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
}
.production-sheet-page .filter-bar {
grid-template-columns: minmax(180px, 1fr) repeat(4, minmax(100px, 120px)) auto !important;
gap: 6px !important;
}
.production-sheet-page .date-filter-wrap label {
font-size: 0.58rem !important;
margin-bottom: 2px !important;
}
.production-sheet-page .search-input,
.production-sheet-page .status-select,
.production-sheet-page .date-filter-input,
.production-sheet-page .scorecard-query-modal .form-control,
.production-sheet-page .project-notes-modal .form-control,
.production-sheet-page .cpo-modal .form-control,
.production-sheet-page .job-rate-modal .form-control,
.production-sheet-page .evaluation-comment textarea {
min-height: 28px !important;
padding: 5px 8px !important;
border-radius: 7px !important;
font-size: 0.72rem !important;
}
.production-sheet-page .excel-filter,
.production-sheet-page .dashboard-status-filter {
min-width: 118px !important;
}
.production-sheet-page .excel-filter-btn,
.production-sheet-page .dashboard-filter-btn {
min-height: 30px !important;
height: 30px !important;
padding: 0 9px !important;
border-radius: 9px !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
gap: 5px !important;
box-shadow: none !important;
}
.production-sheet-page .dashboard-filter-btn:hover {
transform: none !important;
box-shadow: none !important;
}
.production-sheet-page .excel-filter-menu {
top: calc(100% + 4px) !important;
width: 210px !important;
min-width: 210px !important;
padding: 6px !important;
border-radius: 10px !important;
}
.production-sheet-page .excel-filter-option {
grid-template-columns: 16px 1fr auto !important;
gap: 6px !important;
padding: 6px 7px !important;
margin-bottom: 3px !important;
border-radius: 7px !important;
font-size: 0.68rem !important;
}
.production-sheet-page .excel-filter-option input {
width: 13px !important;
height: 13px !important;
}
.production-sheet-page .export-actions {
gap: 5px !important;
}
.production-sheet-page .btn-custom,
.production-sheet-page .btn,
.production-sheet-page .dropdown-item,
.production-sheet-page .resource-invoice-link {
min-height: 26px !important;
padding: 5px 8px !important;
border-radius: 7px !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
gap: 4px !important;
line-height: 1 !important;
}
.production-sheet-page .btn-custom i,
.production-sheet-page .btn i,
.production-sheet-page .dropdown-item i {
font-size: 0.78rem !important;
}
.production-sheet-page .btn-custom:focus,
.production-sheet-page .btn-custom:active,
.production-sheet-page .btn-custom:focus-visible,
.production-sheet-page .btn:focus,
.production-sheet-page .btn:active,
.production-sheet-page .btn:focus-visible,
.production-sheet-page button:focus,
.production-sheet-page button:active,
.production-sheet-page button:focus-visible,
.production-sheet-page a:focus,
.production-sheet-page a:active,
.production-sheet-page a:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.production-sheet-page .dropdown-menu {
padding: 5px !important;
border-radius: 8px !important;
}
.production-sheet-page .project-card {
padding: 8px !important;
margin-bottom: 9px !important;
border-radius: 10px !important;
box-shadow: var(--shadow-sm) !important;
}
.production-sheet-page .project-card:hover {
box-shadow: var(--shadow-sm) !important;
}
.production-sheet-page .project-card.is-compact-project-card {
margin-top: 27px !important;
padding: 7px 8px 8px !important;
overflow: visible !important;
}
.production-sheet-page .project-card.is-filter-hidden {
display: none !important;
}
.production-sheet-page .project-head {
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 8px !important;
padding-bottom: 7px !important;
margin-bottom: 7px !important;
}
.production-sheet-page .project-title h3 {
font-size: 0.86rem !important;
gap: 5px !important;
margin-bottom: 5px !important;
line-height: 1.25 !important;
}
.production-sheet-page .project-title-main {
gap: 5px !important;
}
.production-sheet-page .project-info-text {
gap: 5px !important;
font-size: 0.68rem !important;
}
.production-sheet-page .info-chip,
.production-sheet-page .badge-pill,
.production-sheet-page .meta-pill {
padding: 3px 6px !important;
gap: 3px !important;
font-size: 0.62rem !important;
line-height: 1 !important;
}
.production-sheet-page .info-chip i,
.production-sheet-page .badge-pill i {
font-size: 0.7rem !important;
}
.production-sheet-page .project-meta {
gap: 4px !important;
margin-top: 5px !important;
}
.production-sheet-page .actions,
.production-sheet-page .project-head-wrapper .actions,
.production-sheet-page .task-actions {
gap: 4px !important;
}
.production-sheet-page .project-compact-tabs {
display: none;
}
.production-sheet-page .project-card.is-compact-project-card > .project-head-wrapper:not(.open) {
display: none !important;
}
.production-sheet-page .project-card.is-compact-project-card > .project-compact-tabs {
position: absolute !important;
top: -21px !important;
left: 8px !important;
z-index: 25 !important;
display: inline-flex !important;
align-items: flex-end !important;
gap: 0 !important;
max-width: calc(100% - 16px) !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scrollbar-width: none !important;
}
.production-sheet-page .project-card.is-compact-project-card > .project-compact-tabs::-webkit-scrollbar {
display: none !important;
}
.production-sheet-page .project-compact-tab {
height: 21px !important;
min-height: 21px !important;
padding: 0 7px !important;
margin: 0 0 0 -1px !important;
border: 1px solid #cbd5e1 !important;
border-bottom-color: #ecfeff !important;
border-radius: 6px 6px 0 0 !important;
font-size: 0.58rem !important;
font-weight: 900 !important;
line-height: 1 !important;
gap: 4px !important;
box-shadow: none !important;
white-space: nowrap !important;
}
.production-sheet-page .project-compact-tab:focus,
.production-sheet-page .project-compact-tab:active,
.production-sheet-page .project-compact-tab:focus-visible {
outline: none !important;
box-shadow: none !important;
}
.production-sheet-page .compact-project-number-tab {
margin-left: 0 !important;
max-width: 220px !important;
}
.production-sheet-page .compact-deadline-tab {
cursor: default !important;
}
.production-sheet-page .project-compact-tabs .notes-count-badge {
min-width: 12px !important;
height: 12px !important;
padding: 0 3px !important;
margin-left: 1px !important;
font-size: 0.48rem !important;
line-height: 12px !important;
}
.production-sheet-page .project-compact-tabs .project-toggle-chevron {
font-size: 0.56rem !important;
}
.production-sheet-page .jobs-container {
gap: 6px !important;
}
.production-sheet-page details.job-box {
border-radius: 8px !important;
}
.production-sheet-page summary.job-summary {
padding: 7px 8px !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 7px !important;
}
.production-sheet-page .job-title-row {
gap: 5px !important;
margin-bottom: 5px !important;
}
.production-sheet-page .job-title-row h4 {
font-size: 0.78rem !important;
}
.production-sheet-page .job-mini-grid {
gap: 4px !important;
}
.production-sheet-page .job-mini-item {
padding: 3px 6px !important;
font-size: 0.6rem !important;
gap: 3px !important;
}
.production-sheet-page .job-content {
padding: 7px 8px 8px !important;
}
.production-sheet-page .stat-item {
padding: 6px 7px !important;
border-radius: 7px !important;
font-size: 0.68rem !important;
}
.production-sheet-page .task-details-box {
margin-top: 6px !important;
border-radius: 8px !important;
border-left-width: 3px !important;
}
.production-sheet-page .task-details-summary {
padding: 7px 8px !important;
}
.production-sheet-page .task-summary-row {
gap: 7px !important;
}
.production-sheet-page .task-details-summary h5 {
font-size: 0.70rem !important;
line-height: 1.35 !important;
}
.production-sheet-page .task-status-badge,
.production-sheet-page .task-rank-flag {
padding: 2px 5px !important;
gap: 2px !important;
font-size: 0.58rem !important;
}
.production-sheet-page .task-resource-name {
font-size: 0.64rem !important;
}
.production-sheet-page .task-details-grid {
grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
gap: 6px !important;
padding: 7px !important;
}
.production-sheet-page .task-info-item {
padding: 6px 7px !important;
border-radius: 7px !important;
}
.production-sheet-page .task-info-item span {
font-size: 0.56rem !important;
margin-bottom: 1px !important;
}
.production-sheet-page .task-info-item strong {
font-size: 0.66rem !important;
}
.production-sheet-page .task-actions {
padding: 7px !important;
}
.production-sheet-page .next-action-current {
min-width: 118px !important;
}
.production-sheet-page .next-action-modal .modal-content,
.production-sheet-page .cpo-modal .modal-content,
.production-sheet-page .job-rate-modal .modal-content,
.production-sheet-page .evaluation-modal .modal-content,
.production-sheet-page .project-notes-modal .modal-content,
.production-sheet-page .scorecard-query-modal .modal-content {
border-radius: 10px !important;
}
.production-sheet-page .next-action-modal .modal-header,
.production-sheet-page .cpo-modal .modal-header,
.production-sheet-page .job-rate-modal .modal-header,
.production-sheet-page .evaluation-modal .modal-header,
.production-sheet-page .project-notes-modal .modal-header,
.production-sheet-page .scorecard-query-modal .modal-header {
padding: 9px 11px !important;
}
.production-sheet-page .next-action-modal .modal-title,
.production-sheet-page .cpo-modal .modal-title,
.production-sheet-page .job-rate-modal .modal-title,
.production-sheet-page .evaluation-modal .modal-title,
.production-sheet-page .project-notes-modal .modal-title,
.production-sheet-page .scorecard-query-modal .modal-title {
font-size: 0.82rem !important;
}
.production-sheet-page .next-action-modal .modal-body,
.production-sheet-page .cpo-modal .modal-body,
.production-sheet-page .job-rate-modal .modal-body,
.production-sheet-page .evaluation-modal .modal-body,
.production-sheet-page .project-notes-modal .modal-body,
.production-sheet-page .scorecard-query-modal .modal-body {
padding: 10px !important;
}
.production-sheet-page .next-action-modal .modal-footer,
.production-sheet-page .cpo-modal .modal-footer,
.production-sheet-page .job-rate-modal .modal-footer,
.production-sheet-page .evaluation-modal .modal-footer,
.production-sheet-page .project-notes-modal .modal-footer,
.production-sheet-page .scorecard-query-modal .modal-footer {
padding: 8px 10px !important;
}
.production-sheet-page .next-action-modal-intro,
.production-sheet-page .evaluation-intro,
.production-sheet-page .project-note-write-box,
.production-sheet-page .scorecard-existing-box {
padding: 8px !important;
margin-bottom: 8px !important;
border-radius: 8px !important;
}
.production-sheet-page .next-action-modal-intro strong,
.production-sheet-page .evaluation-intro strong {
font-size: 0.72rem !important;
}
.production-sheet-page .next-action-modal-intro span,
.production-sheet-page .evaluation-intro span {
font-size: 0.62rem !important;
}
.production-sheet-page .next-action-choice-grid {
gap: 6px !important;
}
.production-sheet-page .next-action-choice {
padding: 8px !important;
border-radius: 8px !important;
gap: 7px !important;
}
.production-sheet-page .next-action-choice-icon {
width: 26px !important;
height: 26px !important;
}
.production-sheet-page .next-action-choice-content strong {
font-size: 0.70rem !important;
}
.production-sheet-page .next-action-choice-content small {
font-size: 0.60rem !important;
margin-top: 1px !important;
}
.production-sheet-page .rating-row {
padding: 8px !important;
margin-bottom: 7px !important;
border-radius: 8px !important;
}
.production-sheet-page .rating-label {
font-size: 0.68rem !important;
margin-bottom: 5px !important;
}
.production-sheet-page .star-rating label {
font-size: 1.15rem !important;
}
.production-sheet-page .evaluation-comment textarea {
min-height: 62px !important;
}
.production-sheet-page .scorecard-form-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 7px !important;
}
.production-sheet-page .scorecard-existing-item {
padding: 7px 8px !important;
border-radius: 8px !important;
gap: 6px !important;
}
.production-sheet-page .scorecard-existing-title {
font-size: 0.68rem !important;
}
.production-sheet-page .scorecard-existing-meta,
.production-sheet-page .project-note-header,
.production-sheet-page .project-note-text {
font-size: 0.66rem !important;
}
.production-sheet-page .project-notes-list {
max-height: 300px !important;
}
.production-sheet-page .project-note-item {
padding: 8px !important;
border-radius: 8px !important;
margin-bottom: 6px !important;
}
.production-sheet-page .notes-count-badge {
min-width: 14px !important;
height: 14px !important;
padding: 0 4px !important;
font-size: 0.55rem !important;
line-height: 14px !important;
}
.production-sheet-page .pinned-scorecards {
margin: 8px 0 12px !important;
border-radius: 9px !important;
}
.production-sheet-page .pinned-scorecards summary {
padding: 7px 9px !important;
font-size: 0.72rem !important;
}
.production-sheet-page .pinned-count {
min-width: 20px !important;
height: 20px !important;
font-size: 0.66rem !important;
}
.production-sheet-page .pinned-scorecards-list {
max-height: 175px !important;
padding: 5px !important;
}
.production-sheet-page .pinned-scorecard-item {
grid-template-columns: auto auto 1fr 1fr 1fr auto !important;
gap: 6px !important;
padding: 6px 7px !important;
border-radius: 7px !important;
font-size: 0.66rem !important;
}
@media (max-width: 1200px) {
.production-sheet-page .filter-bar {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.production-sheet-page .scorecard-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 992px) {
.production-sheet-page .dashboard-page {
width: calc(100vw - 6px) !important;
margin-left: calc(50% - 50vw + 3px) !important;
margin-right: calc(50% - 50vw + 3px) !important;
padding-left: 3px !important;
padding-right: 3px !important;
}
.production-sheet-page .dashboard-topbar,
.production-sheet-page .project-head,
.production-sheet-page summary.job-summary,
.production-sheet-page .task-summary-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
}
.production-sheet-page .project-head .actions,
.production-sheet-page summary.job-summary .actions,
.production-sheet-page .task-actions {
width: 100% !important;
justify-content: flex-start !important;
}
.production-sheet-page .filter-bar,
.production-sheet-page .scorecard-form-grid {
grid-template-columns: 1fr !important;
}
.production-sheet-page .dashboard-filter-row,
.production-sheet-page .export-actions {
align-items: stretch !important;
}
.production-sheet-page .excel-filter,
.production-sheet-page .dashboard-status-filter {
min-width: 0 !important;
width: auto !important;
}
}
@media (max-width: 768px) {
body.production-sheet-page {
font-size: 11px !important;
}
.production-sheet-page .dashboard-page {
width: calc(100vw - 4px) !important;
margin-left: calc(50% - 50vw + 2px) !important;
margin-right: calc(50% - 50vw + 2px) !important;
padding: 6px 2px 10px !important;
}
.production-sheet-page .dashboard-toolbar,
.production-sheet-page .dashboard-filter-row,
.production-sheet-page .project-card {
border-radius: 8px !important;
}
.production-sheet-page .kpi-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.production-sheet-page .dashboard-status-filter,
.production-sheet-page .excel-filter {
width: 100% !important;
min-width: 100% !important;
}
.production-sheet-page .dashboard-filter-btn,
.production-sheet-page .excel-filter-btn {
justify-content: center !important;
}
.production-sheet-page .project-card.is-compact-project-card {
margin-top: 25px !important;
}
.production-sheet-page .project-card.is-compact-project-card > .project-compact-tabs {
top: -20px !important;
left: 5px !important;
max-width: calc(100% - 10px) !important;
}
.production-sheet-page .project-compact-tab {
height: 20px !important;
min-height: 20px !important;
padding: 0 6px !important;
font-size: 0.54rem !important;
}
.production-sheet-page .compact-project-number-tab {
max-width: 145px !important;
}
.production-sheet-page .task-details-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.production-sheet-page .pinned-scorecard-item {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 480px) {
.production-sheet-page .kpi-grid,
.production-sheet-page .task-details-grid {
grid-template-columns: 1fr !important;
}
.production-sheet-page .project-compact-tab {
padding: 0 5px !important;
}
.production-sheet-page .compact-deadline-tab {
max-width: 120px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.production-sheet-page .btn-custom,
.production-sheet-page .btn {
width: auto !important;
max-width: 100% !important;
}
}