/* Custom Admin Pages - Dark Theme */
/* Uses CSS variables from custom_admin.css */

/* ===== COMMON COMPONENTS ===== */

/* Container & Section Layouts */
.custom-admin-page .dashboard-container,
.custom-admin-page .analysis-container,
.custom-admin-page .history-container,
.custom-admin-page .status-container {
    margin: 20px 0;
}

.custom-admin-page .dashboard-section,
.custom-admin-page .history-section,
.custom-admin-page .analysis-section,
.custom-admin-page .status-section {
    background: var(--bg-card, #2d2d2d);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color, #404040);
}

/* Headers */
.custom-admin-page .dashboard-header,
.custom-admin-page .history-header,
.custom-admin-page .analysis-header,
.custom-admin-page .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.custom-admin-page h2,
.custom-admin-page .dashboard-title,
.custom-admin-page .history-title,
.custom-admin-page .analysis-title,
.custom-admin-page .status-title,
.custom-admin-page .summary-title,
.custom-admin-page .history-month {
    color: var(--accent-blue, #4a9eff);
    margin: 0 0 15px 0;
}

/* ===== SUMMARY CARDS ===== */
.custom-admin-page .summary-cards,
.custom-admin-page .payment-summary,
.custom-admin-page .invoice-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}

.custom-admin-page .summary-card,
.custom-admin-page .payment-card,
.custom-admin-page .stats-card {
    flex: 1;
    min-width: 180px;
    background: var(--bg-darker, #121212);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #404040);
    text-align: center;
}

.custom-admin-page .summary-card-header,
.custom-admin-page .payment-card-header {
    font-size: 13px;
    color: var(--text-secondary, #b0b0b0);
    margin-bottom: 8px;
}

.custom-admin-page .summary-card-value,
.custom-admin-page .payment-card-value,
.custom-admin-page .stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-primary, #ffffff);
}

/* Card color variants */
.custom-admin-page .summary-card.revenue .summary-card-value,
.custom-admin-page .future-value {
    color: var(--accent-blue, #4a9eff);
}

.custom-admin-page .summary-card.profit .summary-card-value,
.custom-admin-page .summary-card.with-invoice .summary-card-value,
.custom-admin-page .paid-value,
.custom-admin-page .amount-positive {
    color: var(--accent-green, #4caf50);
}

.custom-admin-page .summary-card.cost .summary-card-value,
.custom-admin-page .current-value {
    color: var(--accent-orange, #ff9800);
}

.custom-admin-page .summary-card.tax .summary-card-value,
.custom-admin-page .summary-card.without-invoice .summary-card-value,
.custom-admin-page .amount-negative {
    color: var(--accent-red, #f44336);
}

/* ===== TABLES ===== */
.custom-admin-page .customer-table,
.custom-admin-page .payment-table,
.custom-admin-page .invoice-table,
.custom-admin-page .analysis-table,
.custom-admin-page .status-table,
.custom-admin-page .summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    background: var(--bg-card, #2d2d2d);
    border-radius: 8px;
    overflow: hidden;
}

.custom-admin-page th,
.custom-admin-page .table-header,
.custom-admin-page .table-header th {
    background: var(--bg-darker, #121212);
    color: var(--text-primary, #ffffff);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color, #404040);
}

.custom-admin-page th.right,
.custom-admin-page .th-right {
    text-align: right;
}

.custom-admin-page th.center,
.custom-admin-page .th-center {
    text-align: center;
}

.custom-admin-page td,
.custom-admin-page .cell-base,
.custom-admin-page .table-cell {
    padding: 12px;
    color: var(--text-primary, #ffffff);
    border-bottom: 1px solid var(--border-color, #404040);
}

.custom-admin-page td.right,
.custom-admin-page .cell-right,
.custom-admin-page .table-cell-price {
    text-align: right;
}

.custom-admin-page td.center,
.custom-admin-page .cell-center,
.custom-admin-page .table-cell-status {
    text-align: center;
}

.custom-admin-page tr:nth-child(even),
.custom-admin-page .row-even,
.custom-admin-page .table-row-even {
    background: var(--bg-darker, #121212);
}

.custom-admin-page tr:nth-child(odd),
.custom-admin-page .row-odd,
.custom-admin-page .table-row-odd {
    background: var(--bg-card, #2d2d2d);
}

.custom-admin-page tr:hover {
    background: #3d3d3d;
}

.custom-admin-page .table-footer,
.custom-admin-page .totals-row {
    background: var(--bg-darker, #121212);
    font-weight: bold;
    border-top: 2px solid var(--accent-green, #4caf50);
}

.custom-admin-page .footer-label {
    text-align: right;
    padding: 12px;
}

.custom-admin-page .footer-value {
    text-align: right;
    padding: 12px;
    color: var(--accent-green, #4caf50);
}

/* ===== FILTER SECTION ===== */
.custom-admin-page .filter-section {
    background: var(--bg-card, #2d2d2d);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    border: 1px solid var(--border-color, #404040);
}

.custom-admin-page .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.custom-admin-page .filter-label {
    font-weight: 600;
    color: var(--text-secondary, #b0b0b0);
    font-size: 13px;
}

.custom-admin-page .filter-input,
.custom-admin-page .filter-select {
    padding: 10px 12px;
    border: 1px solid var(--border-color, #404040);
    border-radius: 6px;
    min-width: 150px;
    background: var(--bg-darker, #121212);
    color: var(--text-primary, #ffffff);
    font-size: 14px;
}

.custom-admin-page .filter-input:focus,
.custom-admin-page .filter-select:focus {
    border-color: var(--accent-blue, #4a9eff);
    outline: none;
}

.custom-admin-page .filter-select option {
    background: var(--bg-darker, #121212);
    color: var(--text-primary, #ffffff);
}

/* ===== BUTTONS ===== */
.custom-admin-page .btn,
.custom-admin-page .filter-button,
.custom-admin-page .btn-view,
.custom-admin-page .btn-success,
.custom-admin-page .back-button {
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.custom-admin-page .btn-primary,
.custom-admin-page .filter-button {
    background: var(--accent-blue, #4a9eff);
    color: #ffffff;
}

.custom-admin-page .btn-primary:hover,
.custom-admin-page .filter-button:hover {
    background: #3a8ae8;
    transform: translateY(-1px);
}

.custom-admin-page .btn-success,
.custom-admin-page .btn-view,
.custom-admin-page .create-invoice-button,
.custom-admin-page .approve-button {
    background: var(--accent-green, #4caf50);
    color: #ffffff;
}

.custom-admin-page .btn-success:hover,
.custom-admin-page .btn-view:hover,
.custom-admin-page .create-invoice-button:hover,
.custom-admin-page .approve-button:hover {
    background: #43a047;
    transform: translateY(-1px);
}

.custom-admin-page .btn-secondary,
.custom-admin-page .back-button {
    background: #6c757d;
    color: #ffffff;
}

.custom-admin-page .btn-secondary:hover,
.custom-admin-page .back-button:hover {
    background: #5a6268;
}

.custom-admin-page .view-services-button {
    background: var(--accent-blue, #4a9eff);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.custom-admin-page .add-service-button {
    background: var(--accent-orange, #ff9800);
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.custom-admin-page .add-service-button:hover {
    background: #f57c00;
}

.custom-admin-page .print-pdf-button {
    background: var(--accent-green, #4caf50);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
}

/* ===== STATUS BADGES ===== */
.custom-admin-page .status-future,
.custom-admin-page .status-pending,
.custom-admin-page .status-payment-requested {
    background: rgba(255, 152, 0, 0.2);
    color: var(--accent-orange, #ff9800);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.custom-admin-page .status-current {
    background: rgba(255, 152, 0, 0.3);
    color: #ffb74d;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.custom-admin-page .status-paid,
.custom-admin-page .status-approved,
.custom-admin-page .status-with-invoice {
    background: rgba(76, 175, 80, 0.2);
    color: var(--accent-green, #4caf50);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.custom-admin-page .status-rejected,
.custom-admin-page .status-without-invoice {
    background: rgba(244, 67, 54, 0.2);
    color: var(--accent-red, #f44336);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
}

.custom-admin-page .service-badge {
    display: inline-block;
    padding: 3px 8px;
    background: var(--bg-darker, #121212);
    border-radius: 12px;
    font-size: 12px;
    margin: 0 2px;
    color: var(--text-secondary, #b0b0b0);
}

.custom-admin-page .future-badge {
    background: rgba(255, 152, 0, 0.2);
    color: var(--accent-orange, #ff9800);
}

.custom-admin-page .current-badge {
    background: rgba(76, 175, 80, 0.2);
    color: var(--accent-green, #4caf50);
}

.custom-admin-page .custom-badge {
    background: var(--accent-orange, #ff9800);
    color: #ffffff;
}

.custom-admin-page .approved-badge {
    background: var(--accent-green, #4caf50);
    color: #ffffff;
}

.custom-admin-page .pending-badge {
    background: rgba(255, 152, 0, 0.3);
    color: #333;
}

/* Profit margin badges */
.custom-admin-page .profit-margin {
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
}

.custom-admin-page .profit-margin.high {
    background: rgba(76, 175, 80, 0.2);
    color: var(--accent-green, #4caf50);
}

.custom-admin-page .profit-margin.medium {
    background: rgba(255, 152, 0, 0.2);
    color: var(--accent-orange, #ff9800);
}

.custom-admin-page .profit-margin.low {
    background: rgba(244, 67, 54, 0.2);
    color: var(--accent-red, #f44336);
}

/* ===== CUSTOMER ELEMENTS ===== */
.custom-admin-page .customer-name {
    font-weight: bold;
    color: var(--text-primary, #ffffff);
}

.custom-admin-page .customer-id,
.custom-admin-page .invoice-number {
    font-family: monospace;
    background: var(--bg-darker, #121212);
    padding: 2px 8px;
    border-radius: 4px;
    color: var(--text-secondary, #b0b0b0);
    font-size: 12px;
}

.custom-admin-page .customer-link {
    color: var(--accent-blue, #4a9eff);
    text-decoration: none;
    font-weight: bold;
}

.custom-admin-page .customer-link:hover {
    text-decoration: underline;
}

.custom-admin-page .customer-row {
    background: var(--bg-card, #2d2d2d);
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 6px;
    border-left: 4px solid var(--accent-blue, #4a9eff);
}

.custom-admin-page .service-count {
    color: var(--text-secondary, #b0b0b0);
}

.custom-admin-page .service-amount {
    font-weight: bold;
    color: var(--accent-green, #4caf50);
}

.custom-admin-page .invoice-date {
    font-family: monospace;
    color: var(--text-secondary, #b0b0b0);
}

/* ===== ALERTS & NOTICES ===== */
.custom-admin-page .alert {
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 15px;
    border: 1px solid;
}

.custom-admin-page .alert-success,
.custom-admin-page .paid-notice {
    background: rgba(76, 175, 80, 0.1);
    border-color: var(--accent-green, #4caf50);
    color: var(--accent-green, #4caf50);
}

.custom-admin-page .alert-warning,
.custom-admin-page .payment-request-notice {
    background: rgba(255, 152, 0, 0.1);
    border-color: var(--accent-orange, #ff9800);
    color: var(--accent-orange, #ff9800);
}

.custom-admin-page .alert-danger,
.custom-admin-page .no-payments {
    background: rgba(244, 67, 54, 0.1);
    border-color: var(--accent-red, #f44336);
    color: var(--accent-red, #f44336);
}

.custom-admin-page .alert-info,
.custom-admin-page .info-message {
    background: rgba(74, 158, 255, 0.1);
    border-color: var(--accent-blue, #4a9eff);
    color: var(--accent-blue, #4a9eff);
}

.custom-admin-page .no-data,
.custom-admin-page .no-results,
.custom-admin-page .no-invoices,
.custom-admin-page .no-notes-message {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary, #b0b0b0);
    font-style: italic;
}

/* ===== MODALS ===== */
.custom-admin-page .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    overflow: auto;
}

.custom-admin-page .modal-content {
    background: var(--bg-card, #2d2d2d);
    margin: 10% auto;
    padding: 25px;
    width: 80%;
    max-width: 800px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #404040);
    position: relative;
}

.custom-admin-page .close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    color: var(--text-secondary, #b0b0b0);
    cursor: pointer;
}

.custom-admin-page .close-button:hover {
    color: var(--text-primary, #ffffff);
}

/* ===== TABS ===== */
.custom-admin-page .tab-container {
    margin-top: 20px;
}

.custom-admin-page .tab-header {
    display: flex;
    border-bottom: 1px solid var(--border-color, #404040);
}

.custom-admin-page .tab {
    padding: 12px 20px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    margin-right: 5px;
    color: var(--text-secondary, #b0b0b0);
    background: transparent;
}

.custom-admin-page .tab:hover {
    color: var(--text-primary, #ffffff);
}

.custom-admin-page .tab.active {
    background: var(--bg-card, #2d2d2d);
    border-color: var(--border-color, #404040);
    color: var(--text-primary, #ffffff);
    margin-bottom: -1px;
}

.custom-admin-page .tab-content {
    background: var(--bg-card, #2d2d2d);
    padding: 20px;
    border: 1px solid var(--border-color, #404040);
    border-top: none;
    border-radius: 0 0 6px 6px;
}

.custom-admin-page .tab-pane {
    display: none;
}

.custom-admin-page .tab-pane.active {
    display: block;
}

/* ===== MESSAGES ===== */
.custom-admin-page .recent-messages,
.custom-admin-page .service-notes-section {
    border: 1px solid var(--border-color, #404040);
    border-radius: 6px;
    margin: 20px 0;
    overflow: hidden;
}

.custom-admin-page .message-header,
.custom-admin-page .service-notes-header {
    background: var(--bg-darker, #121212);
    color: var(--text-primary, #ffffff);
    padding: 12px 15px;
    font-weight: bold;
}

.custom-admin-page .message-item,
.custom-admin-page .service-note-item {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color, #404040);
}

.custom-admin-page .message-item:last-child,
.custom-admin-page .service-note-item:last-child {
    border-bottom: none;
}

.custom-admin-page .message-from-tailor {
    background: var(--bg-card, #2d2d2d);
}

.custom-admin-page .message-from-business {
    background: rgba(74, 158, 255, 0.1);
    text-align: right;
}

.custom-admin-page .message-meta,
.custom-admin-page .message-timestamp,
.custom-admin-page .service-date {
    font-size: 12px;
    color: var(--text-secondary, #b0b0b0);
}

.custom-admin-page .message-content,
.custom-admin-page .message-text {
    margin: 5px 0;
    color: var(--text-primary, #ffffff);
}

.custom-admin-page .service-note-content {
    background: var(--bg-darker, #121212);
    padding: 10px;
    border-radius: 4px;
    border-left: 3px solid var(--accent-blue, #4a9eff);
    color: var(--text-primary, #ffffff);
}

.custom-admin-page .service-name {
    font-weight: bold;
    color: var(--text-primary, #ffffff);
}

.custom-admin-page .service-author {
    font-size: 13px;
    color: var(--text-secondary, #b0b0b0);
}

/* ===== FORMS ===== */
.custom-admin-page .tailor-message-form {
    margin: 20px 0;
    padding: 15px;
    background: var(--bg-card, #2d2d2d);
    border: 1px solid var(--border-color, #404040);
    border-radius: 6px;
}

.custom-admin-page .tailor-message-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color, #404040);
    border-radius: 4px;
    margin-bottom: 10px;
    min-height: 80px;
    background: var(--bg-darker, #121212);
    color: var(--text-primary, #ffffff);
}

.custom-admin-page .tailor-message-button {
    background: var(--accent-blue, #4a9eff);
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
}

.custom-admin-page .tailor-message-button:hover {
    background: #3a8ae8;
}

.custom-admin-page .price-input {
    border: 1px solid var(--border-color, #404040);
    border-radius: 4px;
    text-align: right;
    background: var(--bg-darker, #121212);
    color: var(--text-primary, #ffffff);
    padding: 6px 10px;
}

.custom-admin-page .price-input.error {
    border-color: var(--accent-red, #f44336);
    background: rgba(244, 67, 54, 0.1);
}

.custom-admin-page .select-all-container {
    margin: 15px 0;
    padding: 12px;
    background: var(--bg-darker, #121212);
    border-radius: 6px;
    color: var(--text-primary, #ffffff);
}

/* ===== SUMMARY BOX ===== */
.custom-admin-page .summary-box,
.custom-admin-page .summary-results {
    background: var(--bg-card, #2d2d2d);
    border: 1px solid var(--border-color, #404040);
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 20px;
}

.custom-admin-page .summary-stats {
    display: flex;
    gap: 30px;
    margin-top: 10px;
}

.custom-admin-page .stat-item,
.custom-admin-page .stat-box {
    flex: 1;
    text-align: center;
}

.custom-admin-page .stat-label {
    color: var(--text-secondary, #b0b0b0);
    font-size: 13px;
    margin-bottom: 5px;
}

/* ===== GRAND TOTAL ===== */
.custom-admin-page .grand-total,
.custom-admin-page .total-amount {
    margin-top: 20px;
    padding: 15px;
    background: var(--bg-darker, #121212);
    border-radius: 6px;
    text-align: right;
}

.custom-admin-page .grand-total-text {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-primary, #ffffff);
}

.custom-admin-page .grand-total-value,
.custom-admin-page .total-amount {
    color: var(--accent-green, #4caf50);
    font-weight: bold;
}

/* ===== ACTION BUTTONS ===== */
.custom-admin-page .action-buttons,
.custom-admin-page .dashboard-actions,
.custom-admin-page .invoice-actions {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ===== CHECKBOX STYLING ===== */
.custom-admin-page .checkbox-column {
    width: 30px;
}

.custom-admin-page input[type="checkbox"],
.custom-admin-page .customer-radio {
    accent-color: var(--accent-blue, #4a9eff);
    transform: scale(1.1);
}

/* ===== DEBUG INFO ===== */
.custom-admin-page #debug-info {
    margin-top: 20px;
    padding: 15px;
    background: var(--bg-darker, #121212);
    border: 1px solid var(--border-color, #404040);
    border-radius: 6px;
    font-family: monospace;
    color: var(--text-secondary, #b0b0b0);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .custom-admin-page .summary-cards,
    .custom-admin-page .payment-summary,
    .custom-admin-page .invoice-summary,
    .custom-admin-page .filter-section {
        flex-direction: column;
    }

    .custom-admin-page .summary-card,
    .custom-admin-page .payment-card {
        min-width: 100%;
    }

    .custom-admin-page .dashboard-header,
    .custom-admin-page .history-header,
    .custom-admin-page .analysis-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .custom-admin-page .action-buttons,
    .custom-admin-page .dashboard-actions {
        flex-direction: column;
        width: 100%;
    }

    .custom-admin-page .btn,
    .custom-admin-page .filter-button {
        width: 100%;
        text-align: center;
    }
}