/* CanAction – Shared Frontend Styles */
:root {
    --ca-primary: #2563eb;
    --ca-primary-dark: #1d4ed8;
    --ca-success: #16a34a;
    --ca-warning: #d97706;
    --ca-danger: #dc2626;
    --ca-gray-50: #f9fafb;
    --ca-gray-100: #f3f4f6;
    --ca-gray-200: #e5e7eb;
    --ca-gray-500: #6b7280;
    --ca-gray-700: #374151;
    --ca-gray-900: #111827;
    --ca-radius: 8px;
    --ca-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --ca-shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
}

/* Buttons */
.ca-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: var(--ca-radius);
    border: none;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, transform .1s;
}
.ca-btn:hover { text-decoration: none; }
.ca-btn:active { transform: scale(.97); }
.ca-btn-primary { background: var(--ca-primary); color: #fff; }
.ca-btn-primary:hover { background: var(--ca-primary-dark); color: #fff; }
.ca-btn-secondary { background: var(--ca-gray-100); color: var(--ca-gray-700); border: 1px solid var(--ca-gray-200); }
.ca-btn-secondary:hover { background: var(--ca-gray-200); }
.ca-btn-danger { background: var(--ca-danger); color: #fff; }
.ca-btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.ca-btn-large { padding: 13px 28px; font-size: 1rem; }
.ca-btn-text { background: none; border: none; color: var(--ca-primary); cursor: pointer; padding: 0; font-size: 0.9rem; }

/* Forms */
.ca-form { max-width: 700px; }
.ca-form-group { margin-bottom: 18px; }
.ca-form-group label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--ca-gray-700); font-size: 0.875rem; }
.ca-form-group input[type="text"],
.ca-form-group input[type="email"],
.ca-form-group input[type="number"],
.ca-form-group select,
.ca-form-group textarea {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    font-size: 0.9rem;
    color: var(--ca-gray-900);
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.ca-form-group input:focus,
.ca-form-group select:focus,
.ca-form-group textarea:focus {
    outline: none;
    border-color: var(--ca-primary);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.ca-form-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.ca-col-2 { grid-column: span 2; }
.ca-col-3 { grid-column: span 3; }
.ca-col-4 { grid-column: span 4; }
.ca-col-5 { grid-column: span 5; }
.ca-col-6 { grid-column: span 6; }
.ca-col-8 { grid-column: span 8; }
@media(max-width:640px) {
    .ca-form-row { grid-template-columns: 1fr; }
    .ca-col-2,.ca-col-3,.ca-col-4,.ca-col-5,.ca-col-6,.ca-col-8 { grid-column: span 1; }
}

/* Notices */
.ca-notice {
    padding: 12px 16px;
    border-radius: var(--ca-radius);
    margin-bottom: 16px;
    font-size: 0.9rem;
    border-left: 4px solid transparent;
}
.ca-notice-success { background: #f0fdf4; border-color: var(--ca-success); color: #166534; }
.ca-notice-warning { background: #fffbeb; border-color: var(--ca-warning); color: #92400e; }
.ca-notice-error   { background: #fef2f2; border-color: var(--ca-danger); color: #991b1b; }
.ca-notice-info    { background: #eff6ff; border-color: var(--ca-primary); color: #1e40af; }

/* Status badges */
.ca-status-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--ca-gray-100);
    color: var(--ca-gray-700);
}
.ca-status-approved { background: #dcfce7; color: #166534; }
.ca-status-pending  { background: #fef9c3; color: #854d0e; }
.ca-status-rejected { background: #fee2e2; color: #991b1b; }
.ca-status-sold     { background: #e0e7ff; color: #3730a3; }

/* Image preview grid */
.ca-image-preview-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ca-image-preview-grid img { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ca-gray-200); }

/* Privacy note */
.ca-privacy-note { font-size: 0.8rem; color: var(--ca-gray-500); margin: 8px 0; }

/* Empty state */
.ca-empty-state { text-align: center; padding: 48px 24px; color: var(--ca-gray-500); }

/* Modal */
.ca-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.ca-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.ca-modal-content {
    position: relative; z-index: 1;
    background: #fff; border-radius: 12px;
    padding: 24px; max-width: 680px; width: 95%;
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.ca-modal-close {
    position: absolute; top: 14px; right: 14px;
    background: none; border: none; font-size: 1.2rem;
    cursor: pointer; color: var(--ca-gray-500);
}
.ca-modal-close:hover { color: var(--ca-gray-900); }