﻿/* Rioiz Ops — cards, tables, stats, modals */
.ops-body .card, .ops-page .card { border: 1px solid var(--ops-border); border-radius: var(--ops-radius-md); box-shadow: var(--ops-shadow-sm); background: var(--ops-surface); transition: box-shadow 0.2s, transform 0.2s; }
.ops-body .card:hover, .ops-page .card:hover { box-shadow: var(--ops-shadow-md); }
.ops-body .card-header, .ops-page .card-header { background: transparent; border-bottom: 1px solid var(--ops-border); padding: 1.25rem 1.5rem; }
.ops-body .card-header h4, .ops-body .card-header h5, .ops-page .card-header h5 { font-family: var(--ops-font); font-weight: 600; color: var(--ops-heading); margin: 0; font-size: 1.0625rem; }
.ops-body .card-body, .ops-page .card-body { padding: 1.5rem; }
.ops-body .table thead th, .ops-page .table thead th { background: var(--ops-canvas); color: var(--ops-muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--ops-border); padding: 0.875rem 1rem; }
.ops-body .table tbody td, .ops-page .table tbody td { padding: 0.875rem 1rem; vertical-align: middle; border-color: var(--ops-border); font-size: 0.9375rem; }
.ops-body .page-breadcrumb h2, .ops-page .page-title { font-family: var(--ops-font-display); font-weight: 600; color: var(--ops-heading); font-size: 1.75rem; }
.ops-stat-card { display: block; text-decoration: none; color: inherit; }
.ops-stat-card .card-body { padding: 1.25rem 1.5rem; }
.ops-stat-card__icon { width: 48px; height: 48px; border-radius: var(--ops-radius-sm); display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ops-primary) 12%, white); color: var(--ops-primary); font-size: 1.25rem; flex-shrink: 0; }
.ops-stat-card__label { font-size: 0.8125rem; color: var(--ops-muted); font-weight: 500; margin-bottom: 0.25rem; }
.ops-stat-card__value { font-size: 1.75rem; font-weight: 700; color: var(--ops-heading); margin: 0; line-height: 1.2; }
.ops-welcome { border: 1px solid var(--ops-border); border-left: 4px solid var(--ops-primary); border-radius: var(--ops-radius-md); background: linear-gradient(135deg, rgba(15, 118, 110, 0.06), var(--ops-surface)); padding: 1.5rem 1.75rem; margin-bottom: 1.5rem; }
.ops-welcome h1 { font-family: var(--ops-font-display); font-size: 1.5rem; font-weight: 600; margin: 0 0 0.25rem; }
.ops-welcome p { color: var(--ops-muted); margin: 0; }
.ops-empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--ops-muted); }
.ops-body .modal-content, .ops-page .modal-content { border-radius: var(--ops-radius-md); border: 1px solid var(--ops-border); box-shadow: var(--ops-shadow-md); }
.ops-page .info-badge { background: color-mix(in srgb, var(--ops-primary) 10%, white); color: var(--ops-primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.375rem 0.75rem; border-radius: var(--ops-radius-pill); }
.ops-page .widget-card { border-radius: var(--ops-radius-md); }
.ops-body .customer-partner-portal-card { margin-bottom: 1.5rem; }
.ops-body.customer-partner-branded .ops-stat-card__icon,
.ops-body.customer-partner-branded .ops-welcome { border-left-color: var(--ops-primary); }
.ops-body.customer-partner-branded .btn-primary { background-color: var(--ops-primary); border-color: var(--ops-primary); }
.ops-body.customer-partner-branded .btn-outline-primary { color: var(--ops-primary); border-color: var(--ops-primary); }
.ops-body.customer-partner-branded .btn-outline-primary:hover { background-color: var(--ops-primary); border-color: var(--ops-primary); color: #fff; }
.ops-body.partner-branded .ops-stat-card__icon,
.ops-body.partner-branded .ops-welcome { border-left-color: var(--ops-primary); }
.ops-body.partner-branded .btn-primary { background-color: var(--ops-primary); border-color: var(--ops-primary); }
.ops-body.partner-branded .btn-outline-primary { color: var(--ops-primary); border-color: var(--ops-primary); }
.ops-body.partner-branded .btn-outline-primary:hover { background-color: var(--ops-primary); border-color: var(--ops-primary); color: #fff; }
.ops-body .table.table-hover tbody tr:hover { background: color-mix(in srgb, var(--ops-primary) 4%, white); }
.ops-auth-body .ops-auth__brand-logo-img { max-height: 40px; width: auto; }
