/* ============================================================================
   PAYMENT DIALOG - PROFESSIONAL AGENDRIX STYLE
   Matching QuoteDialog design system
   ============================================================================ */

/* ====== CSS VARIABLES ====== */
:root {
    /* Primary Colors - Matching app */
    --pd-primary: 13, 43, 53;
    --pd-primary-hover: 20, 60, 70;
    --pd-primary-light: 229, 237, 239;
    /* Gold Accent - Matching app */
    --pd-gold: 212, 175, 55;
    --pd-gold-hover: 200, 160, 45;
    --pd-gold-light: 254, 251, 235;
    /* Status Colors */
    --pd-success: 42, 157, 143;
    --pd-success-light: 209, 250, 229;
    --pd-success-dark: 16, 120, 107;
    --pd-warning: 245, 158, 11;
    --pd-warning-light: 254, 243, 199;
    --pd-danger: 239, 68, 68;
    --pd-danger-light: 254, 226, 226;
    --pd-info: 59, 130, 246;
    --pd-info-light: 219, 234, 254;
    /* Neutral Colors */
    --pd-white: 255, 255, 255;
    --pd-gray-50: 248, 249, 250;
    --pd-gray-100: 243, 244, 246;
    --pd-gray-200: 229, 231, 235;
    --pd-gray-300: 209, 213, 219;
    --pd-gray-400: 156, 163, 175;
    --pd-gray-500: 107, 114, 128;
    --pd-gray-600: 75, 85, 99;
    --pd-gray-700: 55, 65, 81;
    --pd-gray-800: 31, 41, 55;
    --pd-gray-900: 17, 24, 39;
    /* Compact Spacing - Matching app */
    --pd-space-1: 0.25rem;
    --pd-space-2: 0.375rem;
    --pd-space-3: 0.5rem;
    --pd-space-4: 0.75rem;
    --pd-space-5: 1rem;
    --pd-space-6: 1.25rem;
    /* Border & Shadow */
    --pd-radius: 0.25rem;
    --pd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pd-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.07);
    --pd-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Transitions */
    --pd-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   OVERLAY & DIALOG
   ============================================================================ */

.pd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(17, 24, 39, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: var(--pd-space-3);
    animation: pd-fadeIn 0.2s ease-out;
}

@keyframes pd-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.pd-dialog {
    background: rgb(var(--pd-white));
    border-radius: var(--pd-radius);
    box-shadow: var(--pd-shadow-lg);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pd-slideUp 0.2s ease-out;
}

@keyframes pd-slideUp {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================================================
   HEADER - Compact Professional
   ============================================================================ */

.pd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pd-space-3) var(--pd-space-4);
    background: linear-gradient(135deg, rgb(var(--pd-primary)) 0%, rgb(var(--pd-primary-hover)) 100%);
    border-bottom: 2px solid rgb(var(--pd-gold));
    height: 2.5rem;
}

.pd-header-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
}

.pd-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--pd-white));
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
}

    .pd-title i {
        color: rgb(var(--pd-gold));
        font-size: 1rem;
    }

.pd-subtitle {
    font-size: 0.688rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
}

.pd-status-badge {
    display: inline-flex;
    padding: 0.125rem var(--pd-space-2);
    border-radius: var(--pd-radius);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.pd-status-draft {
    background: rgb(var(--pd-info-light));
    color: rgb(var(--pd-info));
}

.pd-status-accepted {
    background: rgb(var(--pd-warning-light));
    color: rgb(var(--pd-warning));
}

.pd-status-confirmed {
    background: rgb(var(--pd-gold-light));
    color: rgb(var(--pd-gold));
}

.pd-status-paid {
    background: rgb(var(--pd-success-light));
    color: rgb(var(--pd-success));
}

.pd-status-declined {
    background: rgb(var(--pd-danger-light));
    color: rgb(var(--pd-danger));
}

.pd-btn-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--pd-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgb(var(--pd-white));
    transition: var(--pd-transition);
}

    .pd-btn-close:hover {
        background: rgba(255, 255, 255, 0.2);
    }

/* ============================================================================
   BODY
   ============================================================================ */

.pd-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--pd-space-4);
    background: rgb(var(--pd-gray-50));
}

    .pd-body::-webkit-scrollbar {
        width: 6px;
    }

    .pd-body::-webkit-scrollbar-track {
        background: rgb(var(--pd-gray-100));
    }

    .pd-body::-webkit-scrollbar-thumb {
        background: rgb(var(--pd-gray-300));
        border-radius: 3px;
    }

        .pd-body::-webkit-scrollbar-thumb:hover {
            background: rgb(var(--pd-gray-400));
        }

/* ============================================================================
   INFO BANNERS
   ============================================================================ */

.pd-info-banner {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-3);
    border-radius: var(--pd-radius);
    margin-bottom: var(--pd-space-3);
    box-shadow: var(--pd-shadow-sm);
}

    .pd-info-banner i {
        font-size: 1rem;
        flex-shrink: 0;
    }

.pd-info-banner-financial {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: rgb(59, 130, 246);
}

.pd-banner-content {
    flex: 1;
}

    .pd-banner-content strong {
        display: block;
        font-size: 0.813rem;
        font-weight: 600;
        margin-bottom: 0.125rem;
    }

    .pd-banner-content p {
        margin: 0;
        font-size: 0.688rem;
        opacity: 0.9;
    }

/* ============================================================================
   SECTIONS
   ============================================================================ */

.pd-section {
    margin-bottom: var(--pd-space-3);
    padding: var(--pd-space-4);
    background: rgb(var(--pd-white));
    border-radius: var(--pd-radius);
    border: 1px solid rgb(var(--pd-gray-200));
}

.pd-section-title {
    margin: 0 0 var(--pd-space-3) 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--pd-gray-900));
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
    padding-bottom: var(--pd-space-2);
    border-bottom: 1px solid rgb(var(--pd-gray-200));
}

    .pd-section-title i {
        color: rgb(var(--pd-primary));
        font-size: 0.938rem;
    }

/* ============================================================================
   FINANCIAL OVERVIEW GRID
   ============================================================================ */

.pd-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pd-space-3);
}

.pd-overview-card {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-4);
    background: rgb(var(--pd-gray-50));
    border: 1px solid rgb(var(--pd-gray-200));
    border-radius: var(--pd-radius);
    transition: var(--pd-transition);
}

    .pd-overview-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--pd-shadow-md);
    }

    .pd-overview-card.pd-card-success {
        background: rgb(var(--pd-success-light));
        border-color: rgb(var(--pd-success));
    }

    .pd-overview-card.pd-card-highlight {
        background: linear-gradient(135deg, rgb(var(--pd-gold-light)), rgb(var(--pd-white)));
        border: 2px solid rgb(var(--pd-gold));
        box-shadow: var(--pd-shadow-sm);
    }

.pd-overview-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--pd-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pd-overview-icon i {
        font-size: 1.125rem;
    }

    .pd-overview-icon.pd-icon-primary {
        background: rgb(var(--pd-primary-light));
        color: rgb(var(--pd-primary));
    }

    .pd-overview-icon.pd-icon-warning {
        background: rgb(var(--pd-warning-light));
        color: rgb(var(--pd-warning));
    }

    .pd-overview-icon.pd-icon-success {
        background: rgb(var(--pd-success-light));
        color: rgb(var(--pd-success));
    }

    .pd-overview-icon.pd-icon-gold {
        background: linear-gradient(135deg, rgb(var(--pd-gold)), rgb(var(--pd-gold-hover)));
        color: rgb(var(--pd-gray-900));
        box-shadow: var(--pd-shadow-sm);
    }

.pd-overview-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pd-overview-label {
    font-size: 0.688rem;
    font-weight: 600;
    color: rgb(var(--pd-gray-600));
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.pd-overview-value {
    font-size: 1rem;
    font-weight: 700;
    color: rgb(var(--pd-gray-900));
}

    .pd-overview-value.pd-value-large {
        font-size: 1.125rem;
        color: rgb(var(--pd-gold));
    }

/* ============================================================================
   FORMS
   ============================================================================ */

.pd-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pd-space-3);
    margin-bottom: var(--pd-space-3);
}

    .pd-form-row:last-child {
        margin-bottom: 0;
    }

.pd-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--pd-space-1);
}

.pd-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgb(var(--pd-gray-700));
    display: flex;
    align-items: center;
    gap: var(--pd-space-1);
}

    .pd-label i {
        font-size: 0.75rem;
        color: rgb(var(--pd-primary));
    }

.pd-required {
    color: rgb(var(--pd-danger));
    font-weight: 700;
}

.pd-input,
.pd-select,
.pd-textarea {
    width: 100%;
    padding: var(--pd-space-2) var(--pd-space-3);
    font-size: 0.813rem;
    color: rgb(var(--pd-gray-900));
    background: rgb(var(--pd-white));
    border: 1px solid rgb(var(--pd-gray-300));
    border-radius: var(--pd-radius);
    transition: var(--pd-transition);
    font-family: inherit;
}

    .pd-input:focus,
    .pd-select:focus,
    .pd-textarea:focus {
        outline: none;
        border-color: rgb(var(--pd-primary));
        box-shadow: 0 0 0 3px rgba(var(--pd-primary), 0.1);
    }

    .pd-input::placeholder,
    .pd-textarea::placeholder {
        color: rgb(var(--pd-gray-400));
    }

.pd-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
    padding-right: 2rem;
}

.pd-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.4;
}

.pd-input-group {
    display: flex;
    align-items: stretch;
    border-radius: var(--pd-radius);
    overflow: hidden;
    border: 1px solid rgb(var(--pd-gray-300));
}

    .pd-input-group:focus-within {
        border-color: rgb(var(--pd-primary));
        box-shadow: 0 0 0 3px rgba(var(--pd-primary), 0.1);
    }

.pd-input-prefix {
    display: flex;
    align-items: center;
    padding: 0 var(--pd-space-3);
    background: rgb(var(--pd-gray-100));
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(var(--pd-gray-700));
    border-right: 1px solid rgb(var(--pd-gray-300));
}

.pd-input-group .pd-input {
    border: none;
    border-radius: 0;
    flex: 1;
}

    .pd-input-group .pd-input:focus {
        box-shadow: none;
    }

/* ============================================================================
   QUICK AMOUNT BUTTONS
   ============================================================================ */

.pd-quick-amounts {
    display: flex;
    flex-direction: column;
    gap: var(--pd-space-2);
    margin-top: var(--pd-space-2);
}

.pd-btn-quick {
    display: flex;
    align-items: center;
    gap: var(--pd-space-3);
    padding: var(--pd-space-3);
    border-radius: var(--pd-radius);
    cursor: pointer;
    transition: var(--pd-transition);
    border: 1px solid;
    box-shadow: var(--pd-shadow-sm);
}

    .pd-btn-quick:hover {
        transform: translateY(-2px);
        box-shadow: var(--pd-shadow-md);
    }

    .pd-btn-quick i {
        font-size: 1.125rem;
        flex-shrink: 0;
    }

.pd-btn-quick-deposit {
    background: linear-gradient(135deg, rgb(var(--pd-warning-light)), rgb(var(--pd-white)));
    border-color: rgb(var(--pd-warning));
    color: rgb(var(--pd-warning));
}

    .pd-btn-quick-deposit:hover {
        background: rgb(var(--pd-warning-light));
    }

.pd-btn-quick-full {
    background: linear-gradient(135deg, rgb(var(--pd-success-light)), rgb(var(--pd-white)));
    border-color: rgb(var(--pd-success));
    color: rgb(var(--pd-success));
}

    .pd-btn-quick-full:hover {
        background: rgb(var(--pd-success-light));
    }

.pd-quick-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.pd-quick-label {
    font-size: 0.688rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.pd-quick-content strong {
    font-size: 0.938rem;
    font-weight: 700;
}

/* ============================================================================
   CUSTOMER CREDIT SECTION
   ============================================================================ */

.pd-credit-section {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), rgb(var(--pd-white)));
    border: 2px solid rgb(var(--pd-gold));
}

.pd-credit-banner {
    background: linear-gradient(135deg, rgb(var(--pd-gold-light)), rgb(var(--pd-white)));
    border: 1px solid rgb(var(--pd-gold));
    border-radius: var(--pd-radius);
    padding: var(--pd-space-4);
    margin-bottom: var(--pd-space-3);
}

.pd-credit-banner-content {
    display: flex;
    flex-direction: column;
    gap: var(--pd-space-3);
}

.pd-credit-info-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pd-space-4);
}

.pd-credit-info {
    display: flex;
    align-items: center;
    gap: var(--pd-space-4);
    flex: 1;
}

.pd-credit-icon-large {
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgb(var(--pd-gold)), rgb(var(--pd-gold-hover)));
    border-radius: var(--pd-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--pd-shadow-md);
}

    .pd-credit-icon-large i {
        font-size: 1.75rem;
        color: rgb(var(--pd-gray-900));
    }

.pd-credit-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pd-credit-customer {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(var(--pd-gray-700));
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.pd-credit-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--pd-gold));
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pd-credit-sublabel {
    font-size: 0.75rem;
    color: rgb(var(--pd-gray-600));
    display: flex;
    align-items: center;
    gap: var(--pd-space-1);
}

    .pd-credit-sublabel i {
        font-size: 0.688rem;
        color: rgb(var(--pd-gold));
    }

.pd-credit-actions {
    display: flex;
    gap: var(--pd-space-2);
}

.pd-btn-credit {
    background: linear-gradient(135deg, rgb(var(--pd-gold)), rgb(var(--pd-gold-hover)));
    color: rgb(var(--pd-gray-900));
    border: 1px solid rgb(var(--pd-gold));
    font-weight: 600;
    padding: var(--pd-space-3) var(--pd-space-4);
    box-shadow: var(--pd-shadow-sm);
}

    .pd-btn-credit:not(:disabled):hover {
        background: linear-gradient(135deg, rgb(var(--pd-gold-hover)), rgb(var(--pd-gold)));
        box-shadow: var(--pd-shadow-md);
    }

/* Credit Form */
.pd-credit-form {
    margin-top: var(--pd-space-4);
    padding-top: var(--pd-space-4);
    border-top: 1px solid rgba(var(--pd-gold), 0.3);
}

.pd-help-text {
    font-size: 0.75rem;
    color: rgb(var(--pd-gray-600));
    margin-top: var(--pd-space-1);
    display: flex;
    align-items: center;
    gap: var(--pd-space-1);
}

    .pd-help-text i {
        font-size: 0.688rem;
        color: rgb(var(--pd-gold));
    }

/* Credit Quick Buttons */
.pd-credit-quick-buttons {
    display: flex;
    gap: var(--pd-space-2);
    margin-top: var(--pd-space-3);
}

.pd-btn-credit-quick {
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
    padding: var(--pd-space-2) var(--pd-space-3);
    background: rgb(var(--pd-white));
    border: 1px solid rgb(var(--pd-gold));
    border-radius: var(--pd-radius);
    color: rgb(var(--pd-gray-900));
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--pd-transition);
    font-family: inherit;
}

    .pd-btn-credit-quick:hover {
        background: rgb(var(--pd-gold-light));
        transform: translateY(-1px);
        box-shadow: var(--pd-shadow-sm);
    }

    .pd-btn-credit-quick.active {
        background: linear-gradient(135deg, rgb(var(--pd-gold)), rgb(var(--pd-gold-hover)));
        border-color: rgb(var(--pd-gold));
        font-weight: 600;
        box-shadow: var(--pd-shadow-md);
    }

    .pd-btn-credit-quick i {
        font-size: 0.875rem;
        color: rgb(var(--pd-gold));
    }

    .pd-btn-credit-quick.active i {
        color: rgb(var(--pd-gray-900));
    }

/* Credit Impact Preview */
.pd-credit-impact {
    margin-top: var(--pd-space-4);
    padding: var(--pd-space-3);
    background: rgba(var(--pd-success), 0.05);
    border: 1px solid rgba(var(--pd-success), 0.3);
    border-radius: var(--pd-radius);
}

.pd-credit-impact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pd-space-2) 0;
    border-bottom: 1px solid rgba(var(--pd-gray-300), 0.5);
}

    .pd-credit-impact-row:last-of-type {
        border-bottom: 2px solid rgb(var(--pd-success));
        padding-bottom: var(--pd-space-3);
        margin-bottom: var(--pd-space-2);
    }

.pd-credit-impact-label {
    font-size: 0.813rem;
    font-weight: 500;
    color: rgb(var(--pd-gray-700));
}

.pd-credit-impact-value {
    font-size: 0.938rem;
    font-weight: 700;
    color: rgb(var(--pd-success));
}

.pd-credit-impact-note {
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
    font-size: 0.75rem;
    color: rgb(var(--pd-success-dark));
    font-weight: 500;
}

    .pd-credit-impact-note i {
        font-size: 0.875rem;
        color: rgb(var(--pd-success));
    }

/* Credit Preview in Payment Impact */
.pd-preview-credit {
    background: rgba(var(--pd-gold), 0.1);
    border: 1px solid rgba(var(--pd-gold), 0.3);
}

    .pd-preview-credit .pd-preview-label i {
        color: rgb(var(--pd-gold));
    }

.pd-value-credit {
    color: rgb(var(--pd-gold)) !important;
    font-weight: 700;
}

/* Readonly Field Style */
.pd-readonly-field {
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
    padding: var(--pd-space-3);
    background: rgb(var(--pd-gray-100));
    border: 1px solid rgb(var(--pd-gray-200));
    border-radius: var(--pd-radius);
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--pd-gray-700));
}

    .pd-readonly-field i {
        color: rgb(var(--pd-gold));
    }

/* Label Hints */
.pd-label-hint {
    font-weight: 400;
    color: rgb(var(--pd-gray-500));
    font-size: 0.75rem;
}

.pd-label-optional {
    font-weight: 400;
    color: rgb(var(--pd-gray-500));
    font-size: 0.75rem;
}

/* ============================================================================
   PAYMENT PREVIEW
   ============================================================================ */

.pd-preview-section {
    background: linear-gradient(135deg, rgb(var(--pd-primary-light)), rgb(var(--pd-white)));
    border: 2px solid rgb(var(--pd-primary));
}

.pd-preview-grid {
    display: flex;
    flex-direction: column;
    gap: var(--pd-space-2);
    margin-bottom: var(--pd-space-3);
}

.pd-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pd-space-2) var(--pd-space-3);
    font-size: 0.813rem;
    border-radius: var(--pd-radius);
    background: rgba(255, 255, 255, 0.5);
}

.pd-preview-label {
    color: rgb(var(--pd-gray-700));
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--pd-space-1);
}

    .pd-preview-label i {
        font-size: 0.75rem;
        color: rgb(var(--pd-gray-500));
    }

.pd-preview-value {
    color: rgb(var(--pd-gray-900));
    font-weight: 600;
}

    .pd-preview-value.pd-value-success {
        color: rgb(var(--pd-success));
    }

    .pd-preview-value.pd-value-highlight {
        font-size: 1rem;
        font-weight: 700;
        color: rgb(var(--pd-primary));
    }

.pd-preview-payment {
    background: rgba(42, 157, 143, 0.1);
    border: 1px solid rgba(42, 157, 143, 0.3);
}

.pd-preview-divider {
    background: rgb(var(--pd-white));
    border-top: 2px solid rgb(var(--pd-primary));
    padding: var(--pd-space-3);
}

/* ============================================================================
   STATUS NOTICES
   ============================================================================ */

.pd-status-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--pd-space-3);
    padding: var(--pd-space-3);
    border-radius: var(--pd-radius);
    border: 1px solid;
    box-shadow: var(--pd-shadow-sm);
}

.pd-notice-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pd-radius);
}

    .pd-notice-icon i {
        font-size: 1.125rem;
    }

.pd-notice-content {
    flex: 1;
}

    .pd-notice-content strong {
        display: block;
        font-size: 0.813rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .pd-notice-content p {
        margin: 0;
        font-size: 0.75rem;
        line-height: 1.4;
    }

.pd-notice-success {
    background: rgb(var(--pd-success-light));
    border-color: rgb(var(--pd-success));
    color: rgb(var(--pd-success-dark));
}

    .pd-notice-success .pd-notice-icon {
        background: rgb(var(--pd-success));
        color: rgb(var(--pd-white));
    }

.pd-notice-info {
    background: rgb(var(--pd-info-light));
    border-color: rgb(var(--pd-info));
    color: rgb(59, 130, 246);
}

    .pd-notice-info .pd-notice-icon {
        background: rgb(var(--pd-info));
        color: rgb(var(--pd-white));
    }

.pd-notice-warning {
    background: rgb(var(--pd-warning-light));
    border-color: rgb(var(--pd-warning));
    color: rgb(180, 83, 9);
}

    .pd-notice-warning .pd-notice-icon {
        background: rgb(var(--pd-warning));
        color: rgb(var(--pd-white));
    }

/* ============================================================================
   FOOTER
   ============================================================================ */

.pd-footer {
    padding: var(--pd-space-3) var(--pd-space-4);
    border-top: 1px solid rgb(var(--pd-gray-200));
    background: rgb(var(--pd-white));
    display: flex;
    gap: var(--pd-space-2);
    justify-content: flex-end;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

.pd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pd-space-1);
    padding: var(--pd-space-2) var(--pd-space-3);
    border-radius: var(--pd-radius);
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--pd-transition);
    white-space: nowrap;
    font-family: inherit;
}

    .pd-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .pd-btn:not(:disabled):hover {
        transform: translateY(-1px);
        box-shadow: var(--pd-shadow-md);
    }

.pd-btn-primary {
    background: linear-gradient(135deg, rgb(var(--pd-gold)) 0%, rgb(var(--pd-gold-hover)) 100%);
    color: rgb(var(--pd-gray-900));
}

.pd-btn-secondary {
    background: rgb(var(--pd-gray-100));
    color: rgb(var(--pd-gray-700));
    border-color: rgb(var(--pd-gray-200));
}

    .pd-btn-secondary:not(:disabled):hover {
        background: rgb(var(--pd-gray-200));
    }

/* ============================================================================
   RESPONSIVE - MOBILE OPTIMIZATION
   ============================================================================ */

@media (max-width: 768px) {
    .pd-dialog {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
        margin: 0;
    }

    .pd-overlay {
        padding: 0;
    }

    .pd-header {
        padding: var(--pd-space-3);
        height: 2.25rem;
    }

    .pd-body {
        padding: var(--pd-space-3);
    }

    .pd-section {
        padding: var(--pd-space-3);
        margin-bottom: var(--pd-space-2);
    }

    .pd-overview-grid {
        grid-template-columns: 1fr;
    }

    .pd-form-row {
        grid-template-columns: 1fr;
    }

    .pd-footer {
        flex-direction: column-reverse;
        padding: var(--pd-space-3);
        gap: var(--pd-space-1);
    }

        .pd-footer .pd-btn {
            width: 100%;
        }

    /* Credit Section Mobile */
    .pd-credit-info-group {
        flex-direction: column;
        align-items: stretch;
    }

    .pd-credit-info {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pd-credit-details {
        align-items: center;
    }

    .pd-credit-actions {
        width: 100%;
    }

        .pd-credit-actions .pd-btn {
            width: 100%;
        }

    .pd-credit-quick-buttons {
        flex-direction: column;
    }

        .pd-credit-quick-buttons .pd-btn-credit-quick {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .pd-title {
        font-size: 0.813rem;
    }

    .pd-subtitle {
        font-size: 0.625rem;
    }

    .pd-overview-icon {
        width: 2rem;
        height: 2rem;
    }

        .pd-overview-icon i {
            font-size: 1rem;
        }

    .pd-overview-value {
        font-size: 0.875rem;
    }

        .pd-overview-value.pd-value-large {
            font-size: 1rem;
        }

    .pd-btn-quick {
        padding: var(--pd-space-2);
    }

        .pd-btn-quick i {
            font-size: 1rem;
        }

    .pd-quick-label {
        font-size: 0.625rem;
    }

    .pd-quick-content strong {
        font-size: 0.813rem;
    }
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .pd-overlay {
        background: transparent;
        position: static;
        padding: 0;
    }

    .pd-dialog {
        max-width: 100%;
        max-height: none;
        box-shadow: none;
    }

    .pd-btn-close,
    .pd-footer {
        display: none;
    }

    .pd-body {
        overflow: visible;
    }
}