/* ================================================
   PCISHIELD ERP - COMPLETE STYLE SYSTEM
   Version 1.0
   
   TABLE OF CONTENTS:
   1. AUTOMATIC STYLES (No wrapper needed)
   2. WRAPPER-BASED STYLES (Requires specific class)
   ================================================ */

/* ########################################################
   SECTION 1: AUTOMATIC STYLES
   These styles apply automatically to all MudBlazor components
   NO WRAPPER CLASS NEEDED - Just add this CSS to your project
   ######################################################## */

/* ================================================
   1.1 DIALOG SYSTEM (AUTOMATIC)
   ================================================ */

/* Dialog Container */
.mud-dialog {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

/* Dialog Header */
.mud-dialog-title {
    background: linear-gradient(135deg, #293E8C 0%, #1B2C6A 100%) !important;
    color: white !important;
    padding: 16px 24px !important;
    min-height: 56px !important;
}

    .mud-dialog-title .mud-icon-root {
        font-size: 24px !important;
        color: white !important;
    }

    .mud-dialog-title .mud-typography-h6 {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: white !important;
    }

/* Dialog Content */
.mud-dialog-content {
    padding: 0 !important;
    max-height: calc(90vh - 108px) !important;
    overflow-y: auto !important;
}

    .mud-dialog-content .mud-container {
        padding: 20px !important;
    }

/* Dialog Footer */
.mud-dialog-actions {
    background: #F8F9FA !important;
    border-top: 1px solid #E0E0E0 !important;
    padding: 12px 24px !important;
    gap: 8px !important;
}

    /* Dialog Buttons */
    .mud-dialog-actions .btn-cancel {
        font-size: 12px !important;
        font-weight: 500 !important;
        text-transform: none !important;
        padding: 8px 20px !important;
        height: 32px !important;
    }

    .mud-dialog-actions .btn-save {
        font-size: 12px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        padding: 8px 24px !important;
        height: 32px !important;
        background: linear-gradient(135deg, #293E8C 0%, #1B2C6A 100%) !important;
        color: white !important;
    }

/* Dialog Tabs */
.mud-dialog .mud-tabs {
    border-radius: 8px !important;
    border: 1px solid #E0E0E0 !important;
}

.mud-dialog .mud-tabs-tabbar {
    background: #F8F9FA !important;
    border-bottom: 1px solid #E0E0E0 !important;
}

/* Dialog Form Fields */
.mud-dialog .mud-input {
    height: 31px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
}

.mud-dialog .mud-input-outlined-border {
    border: 1px solid #E0E0E0 !important;
    border-radius: 6px !important;
}

/* Dialog Overlay */
.mud-overlay-dialog {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
}

/* ================================================
   1.2 GLOBAL TABLE ENHANCEMENTS (AUTOMATIC)
   ================================================ */

.mud-table {
    border-radius: 8px !important;
    overflow: hidden !important;
}

.mud-table-head {
    background: #F8F9FA !important;
}

.mud-table-cell {
    font-size: 11px !important;
    padding: 10px 12px !important;
}

/* ================================================
   1.3 GLOBAL BUTTON STYLES (AUTOMATIC)
   ================================================ */

.mud-button {
    text-transform: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.mud-button-filled-primary {
    background: linear-gradient(135deg, #293E8C, #1B2C6A) !important;
}

/* ================================================
   1.4 GLOBAL CHIP STYLES (AUTOMATIC)
   ================================================ */

.mud-chip {
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    height: 22px !important;
}

/* ================================================
   1.5 GLOBAL CARD STYLES (AUTOMATIC)
   ================================================ */

.mud-card {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
}

    .mud-card:hover {
        box-shadow: 0 8px 24px rgba(41, 62, 140, 0.12) !important;
    }

/* ================================================
   1.6 GLOBAL INPUT STYLES (AUTOMATIC)
   ================================================ */

.mud-input-control {
    margin-top: 0 !important;
}

.mud-select .mud-input {
    height: 36px !important;
}

.mud-picker .mud-input {
    height: 36px !important;
}

/* ########################################################
   SECTION 2: WRAPPER-BASED STYLES
   These styles REQUIRE you to wrap your content with specific classes
   ######################################################## */

/* ================================================
   2.1 BUSINESS INTELLIGENCE DASHBOARD
   USAGE: <div class="pciShield-bi-dashboard">...</div>
   ================================================ */

.pciShield-bi-dashboard {
    --bi-text-title: 14px;
    --bi-text-metric: 24px;
    --bi-text-label: 11px;
    --bi-text-caption: 10px;
    --bi-text-percentage: 13px;
}

    .pciShield-bi-dashboard .pciShield-title-section {
        font-size: var(--bi-text-title) !important;
        font-weight: 600 !important;
        margin-bottom: 12px !important;
    }

    .pciShield-bi-dashboard .pciShield-stat-card {
        padding: 16px !important;
        height: 120px !important;
    }

    .pciShield-bi-dashboard .mud-table-cell {
        font-size: var(--bi-text-label) !important;
        padding: 8px 12px !important;
        height: 36px !important;
    }

    .pciShield-bi-dashboard .mud-chip {
        height: 22px !important;
        font-size: var(--bi-text-caption) !important;
    }

    .pciShield-bi-dashboard .mud-progress-circular {
        width: 60px !important;
        height: 60px !important;
    }

    .pciShield-bi-dashboard .mud-tabs .mud-tab {
        font-size: var(--bi-text-label) !important;
        min-height: 36px !important;
    }

/* ================================================
   2.2 MASTER-DETAIL PAGES
   USAGE: <div class="pciShield-style-master-detail">...</div>
   ================================================ */

.pciShield-style-master-detail {
    --md-title-page: 18px;
    --md-title-section: 14px;
    --md-label: 11px;
    --md-input-text: 12px;
    --md-input-height: 36px;
}

.pciShield-style-form-section {
    background: white !important;
    border: 1px solid rgba(41, 62, 140, 0.08) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
}

.pciShield-style-form-section-title {
    font-size: var(--md-title-section) !important;
    font-weight: 600 !important;
    color: #293E8C !important;
    margin-bottom: 16px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #293E8C !important;
}

.pciShield-style-field-group {
    margin-bottom: 16px !important;
}

.pciShield-style-field-label {
    font-size: var(--md-label) !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: block;
}

.pciShield-style-master-detail .mud-input {
    height: var(--md-input-height) !important;
    font-size: var(--md-input-text) !important;
}

.pciShield-style-tabs-primary .mud-tab {
    min-height: 42px !important;
    font-size: 12px !important;
}

.pciShield-style-action-section {
    background: #F8F9FA !important;
    padding: 16px 20px !important;
    border-top: 1px solid #E0E0E0 !important;
}

/* ================================================
   2.3 JOIN ENTITY CHILD TABS
   USAGE: <div class="pciShield-style-join-tab">...</div>
   ================================================ */

.pciShield-style-join-tab {
    --join-text-title: 13px;
    --join-text-subtitle: 11px;
    --join-text-meta: 10px;
}

    .pciShield-style-join-tab .mud-card {
        height: 100%;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
    }

    .pciShield-style-join-tab .mud-card-header {
        background: linear-gradient(135deg, #293E8C 0%, #1B2C6A 100%) !important;
        color: white !important;
        padding: 12px 16px !important;
    }

    .pciShield-style-join-tab .mud-card-content {
        padding: 16px !important;
    }

    .pciShield-style-join-tab .mud-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .pciShield-style-join-tab .border-primary {
        border: 2px solid #293E8C !important;
        box-shadow: 0 0 0 3px rgba(41, 62, 140, 0.08) !important;
    }

    .pciShield-style-join-tab .mud-form {
        background: #F8F9FA !important;
        padding: 12px !important;
        border-radius: 6px !important;
    }

/* ================================================
   2.4 DIALOG FORM ENHANCEMENT (OPTIONAL)
   USAGE: <div class="pciShield-style-dialog-form">...</div>
   Use inside DialogContent for enhanced form styling
   ================================================ */

.pciShield-style-dialog-form .mud-grid-item-pciShield-entity {
    width: 100% !important;
    margin-bottom: 16px !important;
}

.pciShield-style-dialog-form .style-text {
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
}

.pciShield-style-dialog-form .style-mud-input {
    width: 100% !important;
    max-width: 380px !important;
}

/* ########################################################
   SECTION 3: UTILITY CLASSES
   Can be used anywhere as needed
   ######################################################## */

/* Text Utilities */
.text-primary {
    color: #293E8C !important;
}

.text-secondary {
    color: #707070 !important;
}

.text-success {
    color: #6CB93C !important;
}

.text-warning {
    color: #F59E0B !important;
}

.text-error {
    color: #EF4444 !important;
}

/* Spacing Utilities */
.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 4px !important;
}

.mt-2 {
    margin-top: 8px !important;
}

.mt-3 {
    margin-top: 12px !important;
}

.mt-4 {
    margin-top: 16px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 4px !important;
}

.mb-2 {
    margin-bottom: 8px !important;
}

.mb-3 {
    margin-bottom: 12px !important;
}

.mb-4 {
    margin-bottom: 16px !important;
}

/* Animation Utilities */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ########################################################
   SECTION 4: RESPONSIVE OVERRIDES
   Applied automatically based on screen size
   ######################################################## */

@media (max-width: 960px) {
    .pciShield-style-form-section {
        padding: 16px !important;
    }

    .pciShield-style-join-tab .mud-grid {
        margin: -8px !important;
    }
}

@media (max-width: 600px) {
    .mud-dialog {
        margin: 16px !important;
        width: calc(100% - 32px) !important;
    }

    .pciShield-style-master-detail .mud-tab {
        font-size: 11px !important;
        min-height: 36px !important;
    }
}

/* ########################################################
   END OF STYLE SYSTEM
   
   HOW TO USE:
   1. Add this entire CSS file to your project
   2. Automatic styles work immediately
   3. For wrapper styles, add the class to your components:
      - Business Intelligence: class="pciShield-bi-dashboard"
      - Master-Detail Pages: class="pciShield-style-master-detail"
      - Join Entity Tabs: class="pciShield-style-join-tab"
      - Dialog Forms (optional): class="pciShield-style-dialog-form"
   ######################################################## */