/* =============================================================================
   Graphic House - Orders
   Style specyficzne dla zamówień
   ============================================================================= */

.order-number {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    color: var(--gh-label-color);
}

.order-card {
    border-top: 3px solid var(--gh-primary);
}

.deadline-warning {
    color: var(--gh-muted-color);
    font-weight: 600;
}

.deadline-overdue {
    color: var(--gh-primary);
    font-weight: 700;
}

/* =============================================================================
   Status Filter Buttons (order list quick filters)
   ============================================================================= */
[data-bs-theme="dark"] .btn-group .btn-dark {
    background-color: var(--gh-gray-300);
    border-color: var(--gh-gray-300);
    color: var(--gh-gray-900);
}

[data-bs-theme="dark"] .btn-group .btn-outline-dark {
    color: var(--gh-body-color);
    border-color: var(--gh-section-border);
}

[data-bs-theme="dark"] .btn-group .btn-outline-dark:hover {
    background-color: var(--gh-gray-700);
    border-color: var(--gh-gray-700);
    color: var(--gh-white);
}

/* =============================================================================
   Stages table sizing (stage list)
   ============================================================================= */
#stages-table { font-size: 0.82rem; }
#stages-table th, #stages-table td { padding: 0.25rem 0.4rem; vertical-align: middle; }

/* =============================================================================
   Table filter row (order list, stage list)
   ============================================================================= */
.table-filter-row th { padding: 2px 4px; }
.table-filter-row .form-control,
.table-filter-row .form-select { font-size: 0.78rem; }

/* =============================================================================
   Stage squares — toggle icons in lists
   Default 22px, .stage-square-lg = 28px (stage list)
   ============================================================================= */
.stage-square {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    text-transform: uppercase;
}
.stage-square-lg {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}
.stage-done {
    background-color: #198754;
    color: #fff;
    border: 1px solid #198754;
}
.stage-pending {
    background-color: #fff;
    color: #6c757d;
    border: 1.5px solid #ced4da;
}
.stage-square:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.stage-done:hover { background-color: #157347; }
.stage-pending:hover { border-color: #198754; color: #198754; }

.stage-cell { vertical-align: middle; }
.stage-meta { font-size: 0.6rem; line-height: 1.15; text-align: center; }
.stage-meta-user { font-size: 0.55rem; color: #495057; }

/* =============================================================================
   Stage comments (stage list modal)
   ============================================================================= */
.stage-comments-btn {
    font-size: 0.75rem;
    opacity: 0.6;
    transition: opacity 0.15s;
    position: relative;
    align-self: flex-start;
}
.stage-comments-btn:hover { opacity: 1; }
.stage-comments-btn.text-warning { opacity: 1; }
.stage-comment-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    background: #ffc107;
    color: #000;
    font-size: 0.5rem;
    font-weight: 700;
    border-radius: 50%;
    width: 13px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.stage-comment-item { border-bottom: 1px solid #f0f0f0; padding: 0.6rem 0; }
.stage-comment-item:last-child { border-bottom: none; }
.stage-comment-author { font-weight: 600; font-size: 0.82rem; }
.stage-comment-time { font-size: 0.72rem; color: #6c757d; }
.stage-comment-text { font-size: 0.88rem; white-space: pre-wrap; margin-top: 2px; }

/* =============================================================================
   Priority rows & drag-and-drop (stage list)
   ============================================================================= */
.top-priority-row {
    background-color: #fff8e1;
    border-left: 3px solid #ffc107;
}
.top-priority-row:hover { background-color: #fff3cd !important; }
.top-priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background-color: #ffc107;
    color: #000;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
}
.drag-handle {
    cursor: grab;
    color: #adb5bd;
    font-size: 1rem;
    user-select: none;
    width: 30px;
}
.drag-handle:hover { color: #495057; }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { background-color: #e8f4fd !important; opacity: 0.8; }
.sortable-chosen { background-color: #f0f7ff !important; }

/* Fresh orders separator & rows */
.fresh-separator td {
    background-color: #f0f4f8;
    border-top: 2px solid #b0bec5;
    border-bottom: 1px solid #cfd8dc;
}
.fresh-separator-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #546e7a;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fresh-row {
    background-color: #f8fffe;
    border-left: 3px solid #26a69a;
}
.fresh-row:hover { background-color: #e0f2f1 !important; }

/* =============================================================================
   Panel edit styles (order detail)
   ============================================================================= */
.panel-edit .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    color: #6c757d;
}
.panel-edit .mb-3 { margin-bottom: 0.75rem !important; }
.btn-panel-edit {
    font-size: 0.8rem;
    padding: 0.2rem 0.6rem;
}

/* =============================================================================
   Client search results (order form)
   ============================================================================= */
#client-search-results .list-group-item {
    cursor: pointer;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
#client-search-results .list-group-item:hover,
#client-search-results .list-group-item.active {
    background-color: var(--bs-primary);
    color: #fff;
}