/* MAPTOO Components — Buttons, Cards, Forms, Tables, Modals, Badges, Alerts */

/* ------------------------------------------------------------------ Buttons */

.maptoo-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--maptoo-font);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.maptoo-btn-primary {
    background: var(--maptoo-blue);
    color: white;
}
.maptoo-btn-primary:hover { background: #3E5CD0; }
.maptoo-btn-primary:disabled { background: var(--maptoo-gray); opacity: 0.6; cursor: not-allowed; }

.maptoo-btn-secondary {
    background: white;
    color: var(--maptoo-navy);
    border: 2px solid var(--maptoo-navy);
    padding: 8px 18px;
}
.maptoo-btn-secondary:hover { background: var(--maptoo-navy); color: white; }

.maptoo-btn-danger {
    background: var(--maptoo-error);
    color: white;
}
.maptoo-btn-danger:hover { background: #C0392B; }

.maptoo-btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.maptoo-btn:focus-visible {
    outline: 2px solid var(--maptoo-blue);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ Cards */

.maptoo-card {
    background: white;
    border: 1px solid rgba(15, 27, 68, 0.08);
    border-radius: var(--radius-md);
    padding: var(--sp-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}

.maptoo-card:hover {
    box-shadow: var(--shadow-md);
}

.maptoo-card-clickable {
    cursor: pointer;
}

/* ------------------------------------------------------------------ Forms */

.maptoo-form-group {
    margin-bottom: var(--sp-md);
}

.maptoo-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--maptoo-navy);
    margin-bottom: var(--sp-xs);
}

.maptoo-input,
.maptoo-select,
.maptoo-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(15, 27, 68, 0.2);
    border-radius: var(--radius-sm);
    font-family: var(--maptoo-font);
    font-size: 15px;
    color: var(--maptoo-navy);
    transition: all 0.2s;
}

.maptoo-input:focus,
.maptoo-select:focus,
.maptoo-textarea:focus {
    outline: none;
    border-color: var(--maptoo-blue);
    box-shadow: 0 0 0 3px rgba(79, 108, 224, 0.15);
}

.maptoo-input:focus-visible,
.maptoo-select:focus-visible,
.maptoo-textarea:focus-visible {
    outline: 2px solid var(--maptoo-blue);
    outline-offset: 1px;
    border-color: var(--maptoo-blue);
    box-shadow: 0 0 0 3px rgba(79, 108, 224, 0.15);
}

.maptoo-input::placeholder,
.maptoo-textarea::placeholder {
    color: rgba(122, 139, 181, 0.6);
}

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

/* ------------------------------------------------------------------ Tables */

.maptoo-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.maptoo-table th {
    background: rgba(172, 194, 255, 0.2);
    color: var(--maptoo-navy);
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 2px solid rgba(15, 27, 68, 0.1);
}

.maptoo-table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(15, 27, 68, 0.06);
}

.maptoo-table tr:hover td {
    background: rgba(172, 194, 255, 0.08);
}

/* ------------------------------------------------------------------ Modals */

.maptoo-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.maptoo-modal {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

.maptoo-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-md) var(--sp-lg);
    border-bottom: 2px solid var(--maptoo-blue);
}

.maptoo-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--maptoo-navy);
}

.maptoo-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--maptoo-gray);
    cursor: pointer;
    line-height: 1;
}
.maptoo-modal-close:hover { color: var(--maptoo-navy); }
.maptoo-modal-close:focus-visible {
    outline: 2px solid var(--maptoo-blue);
    outline-offset: 2px;
}

.maptoo-modal-body {
    padding: var(--sp-lg);
}

.maptoo-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-sm);
    padding: var(--sp-md) var(--sp-lg);
    border-top: 1px solid rgba(15, 27, 68, 0.08);
}

@media (max-width: 768px) {
    .maptoo-modal { width: 95%; max-width: none; }
}

/* ------------------------------------------------------------------ Badges */

.maptoo-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-draft { background: rgba(122, 139, 181, 0.15); color: var(--maptoo-gray); }
.status-submitted { background: rgba(79, 108, 224, 0.15); color: var(--maptoo-blue); }
.status-reviewing { background: rgba(230, 126, 34, 0.15); color: var(--maptoo-warning); }
.status-feedback { background: rgba(230, 126, 34, 0.15); color: var(--maptoo-warning); }
.status-approved { background: rgba(39, 174, 96, 0.15); color: var(--maptoo-success); }
.status-published { background: rgba(39, 174, 96, 0.2); color: #1E8449; }
.status-rejected { background: rgba(231, 76, 60, 0.15); color: var(--maptoo-error); }
.status-archived { background: rgba(15, 27, 68, 0.08); color: var(--maptoo-gray); }

.type-wz { background: #EBF0FF; color: #3355BB; }
.type-mpzp { background: #E8F8EF; color: #1B7A3D; }
.type-zpi { background: #FFF5EB; color: #B5651D; }
.type-pog { background: #F5EBFF; color: #7B3FA0; }

/* ------------------------------------------------------------------ Alerts */

.maptoo-alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border-left: 4px solid;
    font-size: 14px;
    margin-bottom: var(--sp-md);
}

.maptoo-alert-success { background: rgba(39, 174, 96, 0.08); border-color: var(--maptoo-success); }
.maptoo-alert-warning { background: rgba(230, 126, 34, 0.08); border-color: var(--maptoo-warning); }
.maptoo-alert-error { background: rgba(231, 76, 60, 0.08); border-color: var(--maptoo-error); }
.maptoo-alert-info { background: rgba(79, 108, 224, 0.08); border-color: var(--maptoo-info); }

/* ------------------------------------------------------------------ Pagination */

.maptoo-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    margin-top: var(--sp-lg);
}

.maptoo-pagination button {
    padding: 6px 12px;
    border: 1px solid rgba(15, 27, 68, 0.15);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--maptoo-navy);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.maptoo-pagination button:hover { background: rgba(172, 194, 255, 0.15); }
.maptoo-pagination button.active { background: var(--maptoo-blue); color: white; border-color: var(--maptoo-blue); }
.maptoo-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }