/* Caminho: /estacionamento_erp/app/views/static/css/style.css */
:root {
    --rpark-green: #198754;
}

body { min-height: 100vh; }
.app-shell {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}
.navbar-brand { display: inline-flex; align-items: center; padding: .1rem 0; }
.navbar-brand-logo {
    display: block;
    width: auto;
    height: 54px;
    max-width: min(54vw, 300px);
    object-fit: contain;
    filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .16));
}
.navbar-brand:hover .navbar-brand-logo { transform: translateY(-1px); }
.navbar-brand-logo { transition: transform .18s ease; }
.card { border-radius: .8rem; }
.section-label { color: #667085; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #e9ecef; padding-bottom: .6rem; }
.metric-card { border-left: 4px solid var(--rpark-green) !important; }
.legend-dot { display: inline-block; width: .75rem; height: .75rem; margin-right: .35rem; border-radius: 50%; }
.parking-spot { min-height: 150px; padding: 1rem; border: 2px solid transparent; border-radius: .8rem; background: #fff; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .07); transition: transform .15s ease, box-shadow .15s ease; }
.parking-spot:hover { transform: translateY(-2px); box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .1); }
.parking-spot-livre { border-color: #75b798; background: #f0fff6; }
.parking-spot-ocupada { border-color: #ea868f; background: #fff5f5; }
.parking-spot-manutencao { border-color: #ffda6a; background: #fffbeb; }
.parking-spot-clickable { cursor: pointer; }
.parking-spot-clickable:focus,
.parking-spot-clickable:hover { border-color: #0d6efd; }
.spot-details { font-size: .78rem; color: #495057; line-height: 1.35; }
.spot-plate-chip { display: inline-block; margin-bottom: .3rem; padding: .18rem .45rem; border: 1px solid #cbd5e1; border-radius: .45rem; background: #f8fafc; color: #0f172a; font-weight: 700; letter-spacing: .08em; }
.detail-card { padding: .9rem 1rem; border: 1px solid #e9ecef; border-radius: .9rem; background: #f8fafc; }
.detail-label { display: inline-block; margin-bottom: .4rem; color: #667085; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.table > :not(caption) > * > * { padding: .9rem .75rem; }

.dashboard-card {
    position: relative;
    min-height: 112px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
    overflow: hidden;
}

.dashboard-card__label,
.dashboard-card__value,
.dashboard-card__icon { position: relative; z-index: 1; }
.dashboard-card__label { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-card__value { display: block; margin-top: .45rem; font-size: 2rem; line-height: 1.05; color: #0f172a; }
.dashboard-card__icon { position: absolute; top: 1rem; right: 1rem; font-size: 1.15rem; opacity: .9; }
.dashboard-card-primary .dashboard-card__label, .dashboard-card-primary .dashboard-card__icon { color: #2563eb; }
.dashboard-card-success .dashboard-card__label, .dashboard-card-success .dashboard-card__icon { color: #16a34a; }
.dashboard-card-danger .dashboard-card__label, .dashboard-card-danger .dashboard-card__icon { color: #dc2626; }
.dashboard-card-danger-soft .dashboard-card__label, .dashboard-card-danger-soft .dashboard-card__icon { color: #b91c1c; }
.dashboard-card-warning .dashboard-card__label, .dashboard-card-warning .dashboard-card__icon { color: #d97706; }
.dashboard-card-dark .dashboard-card__label, .dashboard-card-dark .dashboard-card__icon { color: #111827; }

.quick-charge-panel {
    padding: 1rem;
    border: 1px solid #e6edf6;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.quick-charge-panel__label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.quick-charge-panel__value {
    display: block;
    margin-top: .35rem;
    font-size: 1.9rem;
    line-height: 1;
    color: #0f172a;
}

.quick-charge-panel-danger .quick-charge-panel__label { color: #b91c1c; }
.quick-charge-panel-warning .quick-charge-panel__label { color: #d97706; }
.quick-charge-panel-primary .quick-charge-panel__label { color: #2563eb; }

.quick-charge-list {
    display: grid;
    gap: .7rem;
}

.quick-charge-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .75rem .85rem;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #fff;
}

.history-block {
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.history-list {
    display: grid;
    gap: .8rem;
}

.history-item {
    padding: .85rem .95rem;
    border: 1px solid #e5e7eb;
    border-radius: .9rem;
    background: #fff;
}

.history-item__title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .35rem;
}

.history-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    font-size: .88rem;
    color: #667085;
}

.parking-map-page {
    --slot-shadow: 0 10px 30px rgba(15, 23, 42, .06);
}

.parking-metric-card {
    position: relative;
    min-height: 108px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: var(--slot-shadow);
    overflow: hidden;
}

.parking-metric-card__label,
.parking-metric-card__value,
.parking-metric-card__icon { position: relative; z-index: 1; }
.parking-metric-card__label { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.parking-metric-card__value { display: block; margin-top: .45rem; font-size: 2rem; line-height: 1; color: #0f172a; }
.parking-metric-card__icon { position: absolute; top: 1rem; right: 1rem; font-size: 1.1rem; opacity: .9; }
.parking-metric-card-total .parking-metric-card__label,
.parking-metric-card-total .parking-metric-card__icon { color: #1d4ed8; }
.parking-metric-card-free .parking-metric-card__label,
.parking-metric-card-free .parking-metric-card__icon { color: #16a34a; }
.parking-metric-card-busy .parking-metric-card__label,
.parking-metric-card-busy .parking-metric-card__icon { color: #dc2626; }
.parking-metric-card-danger .parking-metric-card__label,
.parking-metric-card-danger .parking-metric-card__icon { color: #b91c1c; }
.parking-metric-card-warning .parking-metric-card__label,
.parking-metric-card-warning .parking-metric-card__icon { color: #ca8a04; }

.parking-toolbar {
    border-radius: 1.15rem;
    background: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
    box-shadow: var(--slot-shadow);
}

.parking-zone {
    padding: 1.1rem;
    border: 1px solid #e6edf6;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    box-shadow: var(--slot-shadow);
}

.parking-zone__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.parking-zone__stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.parking-zone__stat {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
}

.parking-zone__stat-free { background: #ecfdf3; color: #15803d; }
.parking-zone__stat-busy { background: #fef2f2; color: #b91c1c; }
.parking-zone__stat-warning { background: #fffbeb; color: #b45309; }
.parking-zone__stat-danger { background: #111827; color: #fff; }

.parking-zone__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
    gap: .85rem;
}

.parking-slot {
    min-height: 152px;
    padding: .9rem;
    border: 1px solid #dbe4f0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: var(--slot-shadow);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.parking-slot--livre { background: linear-gradient(180deg, #f5fff8 0%, #effcf2 100%); border-color: #b7e3c5; }
.parking-slot--ocupada { background: linear-gradient(180deg, #fffafa 0%, #fff3f4 100%); border-color: #f1c2c7; }
.parking-slot--manutencao { background: linear-gradient(180deg, #fffdf4 0%, #fff8de 100%); border-color: #f6de8d; }
.parking-slot--late { border-color: #111827; box-shadow: 0 12px 30px rgba(17, 24, 39, .14); }

.parking-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .1);
}

.parking-slot.js-map-slot {
    cursor: pointer;
}

.parking-slot.js-map-slot:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .28);
    outline-offset: 2px;
}

.parking-slot__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .8rem;
}

.parking-slot__name {
    font-size: .98rem;
    color: #0f172a;
}

.parking-slot__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .7rem;
    background: rgba(255, 255, 255, .7);
    color: #334155;
}

.parking-slot__body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.parking-slot__client {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.parking-slot__meta {
    font-size: .82rem;
    color: #667085;
}

.parking-slot__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
}

.parking-slot__empty {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .65rem;
}

.offcanvas-end {
    width: min(420px, 100vw);
}

.mensalistas-page {
    --panel-bg: linear-gradient(180deg, #f8fbff 0%, #eef3fb 100%);
    --soft-shadow: 0 14px 40px rgba(15, 23, 42, .08);
}

.mensalista-stat {
    position: relative;
    min-height: 108px;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: var(--soft-shadow);
    overflow: hidden;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.mensalista-stat:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .35);
    outline-offset: 2px;
}

.mensalista-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, .95), rgba(255, 255, 255, .65) 44%, rgba(255, 255, 255, .96) 100%);
    pointer-events: none;
}

.mensalista-stat__label,
.mensalista-stat__value,
.mensalista-stat__icon { position: relative; z-index: 1; }
.mensalista-stat__label { font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.mensalista-stat__value { margin-top: .4rem; font-size: 2.1rem; font-weight: 800; line-height: 1; color: #101828; }
.mensalista-stat__icon { position: absolute; top: 1rem; right: 1rem; font-size: 1.1rem; opacity: .85; }

.mensalista-stat-total { box-shadow: inset 0 0 0 1px rgba(187, 46, 46, .25), var(--soft-shadow); }
.mensalista-stat-total .mensalista-stat__label,
.mensalista-stat-total .mensalista-stat__icon { color: #b42318; }

.mensalista-stat-active .mensalista-stat__label,
.mensalista-stat-active .mensalista-stat__icon { color: #ca8504; }

.mensalista-stat-primary .mensalista-stat__label,
.mensalista-stat-primary .mensalista-stat__icon { color: #2e90fa; }

.mensalista-stat-warning .mensalista-stat__label,
.mensalista-stat-warning .mensalista-stat__icon { color: #d97706; }

.mensalista-stat-danger .mensalista-stat__label,
.mensalista-stat-danger .mensalista-stat__icon { color: #dc2626; }

.mensalistas-toolbar {
    border-radius: 1.15rem;
    background: var(--panel-bg);
    box-shadow: var(--soft-shadow);
}

.search-shell {
    position: relative;
}

.search-shell__icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: #98a2b3;
    pointer-events: none;
}

.search-shell__input {
    padding-left: 2.75rem;
}

.mensalistas-table-wrap {
    overflow: hidden;
    border-radius: 1.2rem;
    box-shadow: var(--soft-shadow);
}

.mensalistas-table thead th {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: .98rem;
    font-weight: 800;
    color: #101828;
    background: linear-gradient(180deg, #f4f6fb 0%, #eef2f8 100%);
    border-bottom: 1px solid #d7dee9;
    white-space: nowrap;
}

.mensalistas-table tbody td {
    background: rgba(255, 255, 255, .92);
    vertical-align: middle;
}

.mensalistas-table tbody tr:nth-child(even) td {
    background: rgba(247, 249, 252, .96);
}

.license-plate {
    display: inline-block;
    min-width: 134px;
    border: 2px solid #1f2937;
    border-radius: .55rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 20px rgba(2, 6, 23, .12);
}

.license-plate__top {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.2rem;
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .18em;
    background: linear-gradient(180deg, #124db7 0%, #083b93 100%);
}

.license-plate__flag {
    position: absolute;
    right: .38rem;
    width: .78rem;
    height: .58rem;
    border-radius: 2px;
    background:
        radial-gradient(circle at 54% 48%, #ffde59 0 16%, transparent 17%),
        linear-gradient(135deg, #0f9f4f 0%, #0f9f4f 48%, #1d4ed8 48%, #1d4ed8 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}

.license-plate__body {
    padding: .3rem .6rem .42rem;
    color: #111827;
    font-family: "Arial Black", "Segoe UI", sans-serif;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: .07em;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .96)),
        repeating-linear-gradient(
            90deg,
            rgba(148, 163, 184, .18) 0,
            rgba(148, 163, 184, .18) 1px,
            transparent 1px,
            transparent 8px
        );
}

.license-plate--compact {
    min-width: 112px;
    border-width: 1.5px;
    box-shadow: 0 6px 14px rgba(2, 6, 23, .1);
}

.license-plate--compact .license-plate__top {
    height: 1rem;
    font-size: .5rem;
}

.license-plate--compact .license-plate__flag {
    width: .65rem;
    height: .46rem;
}

.license-plate--compact .license-plate__body {
    padding: .22rem .5rem .3rem;
    font-size: 1rem;
    letter-spacing: .11em;
}

.vehicle-stack {
    display: grid;
    gap: .85rem;
}

.vehicle-entry {
    padding: .8rem .9rem;
    border: 1px solid #e6edf6;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.vehicle-entry__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
}

.vehicle-entry__meta {
    margin-bottom: .25rem;
    color: #0f172a;
}

.vehicle-entry__info,
.vehicle-entry__billing {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .8rem;
    font-size: .88rem;
    color: #667085;
}

.vehicle-entry__billing {
    margin-top: .3rem;
}

.vehicle-entry__billing strong {
    color: #111827;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 102px;
    padding: .42rem .85rem;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
}

.status-pill-danger { color: #fff; background: #dc3545; }
.status-pill-warning { color: #1f2937; background: #f59e0b; }
.status-pill-primary { color: #fff; background: #3b82f6; }
.status-pill-success { color: #fff; background: #16a34a; }
.status-pill-info { color: #fff; background: #0ea5e9; }
.status-pill-secondary { color: #fff; background: #6b7280; }

@media (max-width: 575.98px) {
    main.container { padding-left: .75rem; padding-right: .75rem; }
    .navbar-brand-logo { height: 44px; max-width: 210px; }
    .parking-spot { min-height: 135px; padding: .75rem; }
    .parking-zone { padding: .85rem; }
    .parking-zone__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; }
    .parking-slot { min-height: 138px; padding: .75rem; }
    .license-plate__body { font-size: 1.45rem; }
    .license-plate--compact .license-plate__body { font-size: .92rem; }
    .mensalista-stat__value { font-size: 1.8rem; }
    .vehicle-entry { padding: .75rem; }
}