/* IPro-GSM Main Styles - Optimized */
/* Loaded async after critical CSS */

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-center{text-align:center}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-4{margin-bottom:2rem}
.p-2{padding:1rem}
.p-4{padding:2rem}

/* ========================================
   RESPONSIVE GRID
   ======================================== */

.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

@media(max-width:768px){
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
}

/* ========================================
   CARDS
   ======================================== */

.card{
    background:#fff;
    border-radius:12px;
    padding:1.5rem;
    box-shadow:0 4px 16px rgba(0,0,0,.06);
    border:1px solid var(--border);
    transition:all .3s ease;
}

.card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.card-icon{
    width:48px;
    height:48px;
    background:var(--primary-light);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    margin-bottom:1rem;
}

.card h3{
    font-size:1.125rem;
    font-weight:700;
    margin-bottom:.5rem;
    color:var(--text);
}

.card p{
    font-size:.9375rem;
    color:var(--text-light);
    line-height:1.6;
}

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

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.75rem 1.5rem;
    font-size:1rem;
    font-weight:600;
    border-radius:8px;
    border:none;
    cursor:pointer;
    transition:all .3s ease;
    text-decoration:none;
}

.btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff;
    box-shadow:0 4px 12px rgba(26,95,180,.3);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(26,95,180,.4);
}

.btn-outline{
    background:transparent;
    border:2px solid var(--primary);
    color:var(--primary);
}

.btn-outline:hover{
    background:var(--primary);
    color:#fff;
}

.btn-large{
    padding:1rem 2rem;
    font-size:1.125rem;
}

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

.form-group{
    margin-bottom:1.5rem;
}

.form-label{
    display:block;
    margin-bottom:.5rem;
    font-weight:600;
    color:var(--text);
}

.form-input,
.form-select,
.form-textarea{
    width:100%;
    padding:.75rem 1rem;
    border:2px solid var(--border);
    border-radius:8px;
    font-size:1rem;
    font-family:inherit;
    transition:border-color .2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(26,95,180,.1);
}

.form-textarea{
    resize:vertical;
    min-height:120px;
}

/* ========================================
   ALERTS
   ======================================== */

.alert{
    padding:1rem 1.5rem;
    border-radius:8px;
    margin-bottom:1rem;
    display:flex;
    align-items:center;
    gap:.75rem;
}

.alert-info{
    background:#e8f0fe;
    color:#0d3a6e;
    border-left:4px solid var(--primary);
}

.alert-success{
    background:#d4f5e6;
    color:#155724;
    border-left:4px solid var(--accent);
}

.alert-warning{
    background:#fff3cd;
    color:#856404;
    border-left:4px solid #ffc107;
}

/* ========================================
   TABLES
   ======================================== */

.table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.table th{
    background:var(--primary-light);
    color:var(--primary-dark);
    padding:1rem;
    text-align:left;
    font-weight:700;
    font-size:.875rem;
    text-transform:uppercase;
}

.table td{
    padding:1rem;
    border-top:1px solid var(--border);
}

.table tr:hover{
    background:var(--bg-light);
}

/* ========================================
   BADGES
   ======================================== */

.badge{
    display:inline-flex;
    align-items:center;
    padding:.375rem .75rem;
    font-size:.875rem;
    font-weight:600;
    border-radius:12px;
    white-space:nowrap;
}

.badge-primary{
    background:var(--primary-light);
    color:var(--primary);
}

.badge-success{
    background:#d4f5e6;
    color:#155724;
}

.badge-warning{
    background:#fff3cd;
    color:#856404;
}

/* ========================================
   MOBILE MENU
   ======================================== */

.mobile-menu{
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:1000;
    max-height:0;
    overflow:hidden;
    transition:max-height .3s ease;
}

.mobile-menu:not(.hidden){
    max-height:500px;
}

.mobile-menu-link{
    display:block;
    padding:1rem;
    color:var(--text);
    text-decoration:none;
    border-bottom:1px solid var(--border);
    transition:background .2s;
}

.mobile-menu-link:hover{
    background:var(--bg-light);
}

.mobile-menu-link:last-child{
    border-bottom:none;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:translateY(0)}
}

.fade-in{
    animation:fadeIn .6s ease-out;
}

@keyframes slideIn{
    from{transform:translateX(-100%)}
    to{transform:translateX(0)}
}

.slide-in{
    animation:slideIn .4s ease-out;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media(min-width:768px){
    .md\:flex{display:flex}
    .md\:hidden{display:none}
    .md\:block{display:block}
}

@media(max-width:767px){
    .sm\:hidden{display:none}
    .sm\:block{display:block}
}

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

@media print{
    header,footer,.breadcrumbs,
    .mobile-menu,.btn{display:none}
    
    body{font-size:12pt;color:#000}
    a{text-decoration:underline}
    
    .container{max-width:100%;padding:0}
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Skip to main content */
.skip-link{
    position:absolute;
    top:-40px;
    left:0;
    background:var(--primary);
    color:#fff;
    padding:8px 16px;
    text-decoration:none;
    z-index:100;
}

.skip-link:focus{
    top:0;
}

/* ========================================
   INTERLINKS SPECIFIC
   ======================================== */

.interlinks-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1.5rem;
    margin:2rem 0;
}

.interlink-card{
    padding:1.5rem;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    text-decoration:none;
    color:inherit;
    transition:all .3s ease;
}

.interlink-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 24px rgba(0,0,0,.1);
    border-color:var(--primary);
}

.interlink-card h3{
    color:var(--primary);
    margin-bottom:.5rem;
    font-size:1.125rem;
}

.interlink-card p{
    font-size:.875rem;
    color:var(--text-light);
    margin:0;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for animations */
.card,
.btn,
.mobile-menu{
    will-change:transform;
}

/* Reduce motion for users who prefer it */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}

/* Dark mode support (optional) */
@media(prefers-color-scheme:dark){
    :root{
        --text:#e8e8e8;
        --text-light:#b0b0b0;
        --bg:#1a1a2e;
        --bg-light:#252540;
        --border:#3a3a5e;
    }
    
    .card{
        background:#252540;
    }
}