/**

 * ATS Service - Components

 * Buttons, Cards, Forms, Tables

 */



/* ===== BUTTONS ===== */

.btn {

    display: inline-block;

    padding: var(--space-3) var(--space-6);

    font-family: var(--font-body);

    font-size: var(--font-size-base);

    font-weight: var(--font-weight-medium);

    text-align: center;

    text-decoration: none;

    border: none;

    border-radius: var(--radius-base);

    cursor: pointer;

    transition: all var(--transition-base);

    position: relative;

    overflow: hidden;

}



.btn::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 0;

    height: 0;

    border-radius: var(--radius-full);

    background: rgba(255, 255, 255, 0.3);

    transform: translate(-50%, -50%);

    transition: width var(--transition-slow), height var(--transition-slow);

}



.btn:active::before {

    width: 300px;

    height: 300px;

}



.btn--primary {

    background: var(--gradient-primary);

    color: var(--text-white);

    box-shadow: var(--shadow-primary);

}



.btn--primary:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-xl);

}



.btn--secondary {

    background: var(--gradient-secondary);

    color: var(--text-white);

    box-shadow: var(--shadow-secondary);

}



.btn--secondary:hover {

    transform: translateY(-2px);

    box-shadow: var(--shadow-xl);

}



.btn--outline {

    background: transparent;

    border: 2px solid var(--ats-primary);

    color: var(--ats-primary);

}



.btn--outline:hover {

    background: var(--ats-primary);

    color: var(--text-white);

}



.btn--large {

    padding: var(--space-4) var(--space-10);

    font-size: var(--font-size-lg);

}



.btn--small {

    padding: var(--space-2) var(--space-4);

    font-size: var(--font-size-sm);

}



.btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    transform: none !important;

}



/* ===== CARDS ===== */

.card {

    background: var(--bg-white);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);

    overflow: hidden;

    transition: all var(--transition-base);

}



.card:hover {

    transform: translateY(-4px);

    box-shadow: var(--shadow-xl);

}



.card__header {

    padding: var(--space-6);

    border-bottom: 1px solid var(--gray-200);

}



.card__title {

    font-size: var(--font-size-xl);

    font-weight: var(--font-weight-bold);

    color: var(--ats-primary);

    margin: 0;

}



.card__body {

    padding: var(--space-6);

}



.card__footer {

    padding: var(--space-4) var(--space-6);

    background: var(--gray-50);

    border-top: 1px solid var(--gray-200);

}



.card__image {

    width: 100%;

    height: 200px;

    object-fit: cover;

}



/* ===== FORMS ===== */

.form-group {

    margin-bottom: var(--space-6);

}



.form-label {

    display: block;

    margin-bottom: var(--space-2);

    font-weight: var(--font-weight-medium);

    color: var(--text-primary);

    font-size: var(--font-size-sm);

}



.form-control {

    width: 100%;

    padding: var(--space-3) var(--space-4);

    font-family: var(--font-body);

    font-size: var(--font-size-base);

    color: var(--text-primary);

    background: var(--bg-white);

    border: 2px solid var(--gray-300);

    border-radius: var(--radius-base);

    transition: all var(--transition-fast);

}



.form-control:focus {

    outline: none;

    border-color: var(--ats-primary);

    box-shadow: 0 0 0 3px rgba(0, 0, 102, 0.1);

}



.form-control::placeholder {

    color: var(--gray-400);

}



/* Floating Labels */

.form-floating {

    position: relative;

}



.form-floating .form-control {

    padding: var(--space-5) var(--space-4) var(--space-2);

}



.form-floating .form-label {

    position: absolute;

    top: var(--space-4);

    left: var(--space-4);

    color: var(--gray-500);

    pointer-events: none;

    transition: all var(--transition-fast);

}



.form-floating .form-control:focus ~ .form-label,

.form-floating .form-control:not(:placeholder-shown) ~ .form-label {

    top: var(--space-1);

    font-size: var(--font-size-xs);

    color: var(--ats-primary);

}



.form-error {

    color: var(--color-error);

    font-size: var(--font-size-sm);

    margin-top: var(--space-2);

}



.form-success {

    color: var(--color-success);

    font-size: var(--font-size-sm);

    margin-top: var(--space-2);

}



/* ===== TABLES ===== */

.table {

    width: 100%;

    border-collapse: collapse;

    background: var(--bg-white);

    border-radius: var(--radius-base);

    overflow: hidden;

    box-shadow: var(--shadow-md);

}



.table th,

.table td {

    padding: var(--space-4);

    text-align: left;

    border-bottom: 1px solid var(--gray-200);

}



.table th {

    background: var(--gray-50);

    font-weight: var(--font-weight-semibold);

    color: var(--ats-primary);

    text-transform: uppercase;

    font-size: var(--font-size-sm);

    letter-spacing: 0.5px;

}



.table tbody tr:hover {

    background: var(--gray-50);

}



.table--striped tbody tr:nth-child(even) {

    background: var(--gray-50);

}



.table--bordered th,

.table--bordered td {

    border: 1px solid var(--gray-200);

}



/* Responsive Table */

@media (max-width: 768px) {

    .table-responsive {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }

}



/* ===== BADGES ===== */

.badge {

    display: inline-block;

    padding: var(--space-1) var(--space-3);

    font-size: var(--font-size-xs);

    font-weight: var(--font-weight-semibold);

    border-radius: var(--radius-full);

    text-transform: uppercase;

    letter-spacing: 0.5px;

}



.badge--primary {

    background: var(--ats-primary);

    color: var(--text-white);

}



.badge--secondary {

    background: var(--ats-secondary);

    color: var(--text-white);

}



.badge--success {

    background: var(--color-success);

    color: var(--text-white);

}



.badge--warning {

    background: var(--color-warning);

    color: var(--text-white);

}



.badge--error {

    background: var(--color-error);

    color: var(--text-white);

}



/* ===== MODALS ===== */

.modal-backdrop {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    backdrop-filter: blur(4px);

    z-index: var(--z-modal-backdrop);

    opacity: 0;

    transition: opacity var(--transition-base);

}



.modal-backdrop.active {

    opacity: 1;

}



.modal {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) scale(0.9);

    max-width: 600px;

    width: 90%;

    max-height: 90vh;

    background: var(--bg-white);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-2xl);

    z-index: var(--z-modal);

    opacity: 0;

    transition: all var(--transition-base);

    overflow: hidden;

}



.modal.active {

    opacity: 1;

    transform: translate(-50%, -50%) scale(1);

}



.modal__header {

    padding: var(--space-6);

    border-bottom: 1px solid var(--gray-200);

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.modal__title {

    font-size: var(--font-size-2xl);

    margin: 0;

}



.modal__close {

    background: none;

    border: none;

    font-size: var(--font-size-3xl);

    color: var(--gray-500);

    cursor: pointer;

    transition: color var(--transition-fast);

}



.modal__close:hover {

    color: var(--ats-secondary);

}



.modal__body {

    padding: var(--space-6);

    max-height: 60vh;

    overflow-y: auto;

}



.modal__footer {

    padding: var(--space-4) var(--space-6);

    border-top: 1px solid var(--gray-200);

    display: flex;

    gap: var(--space-4);

    justify-content: flex-end;

}



/* ===== LOADING SPINNER ===== */

.spinner {

    display: inline-block;

    width: 40px;

    height: 40px;

    border: 4px solid var(--gray-200);

    border-top-color: var(--ats-primary);

    border-radius: var(--radius-full);

    animation: spin 1s linear infinite;

}



@keyframes spin {

    to { transform: rotate(360deg); }

}



.spinner--small {

    width: 20px;

    height: 20px;

    border-width: 2px;

}



.spinner--large {

    width: 60px;

    height: 60px;

    border-width: 6px;

}