/* Operavantis Portal — Base styles (professional, B2B-focused) */
.op-portal{font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; color:#0b1f3a; background:#f6f7f9; position:relative; min-height:100vh;}
.op-global-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.75);opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:20;}
.op-global-loader.is-visible{opacity:1;pointer-events:auto;}
.op-global-loader__box{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;background:rgba(255,255,255,0.92);border:1px solid rgba(15,23,42,0.08);box-shadow:0 16px 40px rgba(15,23,42,0.12);}
.op-global-loader__spinner{width:38px;height:38px;border:3px solid rgba(11,31,58,0.1);border-top-color:rgba(11,31,58,0.75);border-radius:50%;animation:op-portal-spin 0.9s linear infinite;}
.op-global-loader__text{margin:0;font-size:15px;font-weight:600;color:#0b1f3a;}
.op-nav{display:flex;gap:12px;margin-bottom:18px;padding:10px 0;border-bottom:1px solid #e6e9ee}
.op-nav a{color:#0b1f3a;text-decoration:none;font-weight:600;padding:6px 10px;border-radius:4px}
.op-nav a.active, .op-nav a:hover{background:#e9f0ff;color:#08306b}
.op-main{max-width:1100px;margin:18px auto;padding:22px;background:#ffffff;border:1px solid #e6e9ee;border-radius:8px;box-shadow:0 1px 2px rgba(11,31,58,0.03)}
.op-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.op-title{font-size:20px;font-weight:700}
.op-subtitle{font-size:13px;color:#6b7280}
.op-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.op-grid.op-single-column{grid-template-columns:1fr !important}
@media (max-width:900px){.op-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.op-grid{grid-template-columns:1fr}}
.op-card{background:#ffffff;border:1px solid #eef2f6;padding:14px;border-radius:8px}
.op-card h3{margin:0 0 8px 0;font-size:16px}
.op-list{display:flex;flex-direction:column;gap:10px}
.op-list-item{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid #f0f4f8;border-radius:6px;background:#fcfdff}
.op-list-item .title{font-weight:600}
.op-meta{font-size:13px;color:#6b7280}
/* Status badges */
.op-badge{display:inline-block;padding:6px 8px;font-size:12px;border-radius:999px;font-weight:700;color:#fff}
.op-badge--active{background:#0ea5a4}
.op-badge--closed{background:#64748b}
.op-badge--new{background:#2563eb}
.op-badge--reviewed{background:#f59e0b}

/* Compact table for applications */
.op-table{width:100%;border-collapse:collapse}
.op-table th,.op-table td{padding:10px;border-bottom:1px solid #eef2f6;text-align:left}
.op-actions a{color:#2563eb;text-decoration:none}

/* Footer small */
.op-footer{font-size:12px;color:#9ca3af;margin-top:14px;text-align:center}

/* Accessibility focus */
a:focus{outline:3px solid rgba(37,99,235,0.15);outline-offset:2px}
/* Buttons */
.op-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:20px 20px;
    border-radius:10px;
    border:none;
    font-weight:600;
    font-size:14px;
    line-height:1.3;
    color:#fff;
    background:#0b5ed7;
    cursor:pointer;
    transition:transform 0.25s ease, box-shadow 0.25s ease;
    box-shadow:0 4px 14px rgba(11,94,215,0.2);
}
.op-button:hover,
.op-button:focus-visible {
    transform:translateY(-1px);
    box-shadow:0 8px 24px rgba(11,94,215,0.25);
}
.op-button-primary {
    background:#0b5ed7;
}
.op-button--loading {
    cursor:wait;
    opacity:.85;
}
.op-button__spinner{
    width:18px;
    height:18px;
    border:2px solid rgba(255,255,255,0.6);
    border-top-color:rgba(255,255,255,0.95);
    border-radius:50%;
    margin-right:8px;
    display:inline-block;
    animation:op-portal-spin .9s linear infinite;
}
.op-button__label{display:inline-block;}
.op-status-actions{
    flex:0 0 220px;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-start;
}
@media (max-width:768px){
    .op-status-actions{
        flex:1 1 100%;
        max-width:100%;
        width:100%;
    }
    .op-status-actions form{
        width:100%;
    }
}
.op-form-submit {
    padding: 16px 20px;
    min-height: 56px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}
@media (max-width:640px) {
    .op-button { width:100%; }
    .op-form-submit {
        min-height: 64px;
        padding: 16px 18px;
        line-height: 1.3;
    }
}

@keyframes op-portal-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }