/**
 * Components CSS - Reusable component styles
 * Load order: 3rd (after utilities.css)
 *
 * Contents:
 * - Button customizations & variants
 * - Card/box components
 * - Badge/label components
 * - Form components
 * - Table/GridView components
 * - Alert components
 * - Modal components
 * - Navigation components
 *
 * NOTE: This file uses CSS custom properties from design-tokens.css.
 * All color, spacing, and typography values should reference design tokens.
 *
 * @version 1.1.0
 * @date 2026-02-08
 */

/* ==========================================================================
   LOCAL VARIABLE ALIASES - Map to design-tokens.css
   ========================================================================== */

:root {
    /* Color aliases for backward compatibility */
    --primary-color: var(--color-primary, #0052CC);
    --primary-dark: var(--color-primary-hover, #0747A6);
    --success-color: var(--color-success, #36B37E);
    --danger-color: var(--color-danger, #DE350B);
    --warning-color: var(--color-warning, #FFAB00);
    --info-color: var(--color-info, #00B8D9);

    /* Gray scale aliases */
    --gray-50: var(--bg-card, #FFFFFF);
    --gray-100: var(--bg-subtle, #FAFBFC);
    --gray-200: var(--bg-hover, #EBECF0);
    --gray-300: var(--border-subtle, #DFE1E6);
    --gray-500: var(--text-tertiary, #7A869A);
    --gray-700: var(--text-secondary, #5E6C84);

    /* Shadow aliases */
    --shadow-xs: var(--shadow-sm, 0 1px 2px rgba(9, 30, 66, 0.08));
    --shadow-sm: var(--shadow-card, 0 1px 1px rgba(9, 30, 66, 0.08), 0 0 1px rgba(9, 30, 66, 0.12));
    --shadow-md: 0 3px 6px rgba(9, 30, 66, 0.15);

    /* Transition aliases */
    --transition-sm: var(--transition-fast, 150ms ease-in-out);
    --transition-md: var(--transition-base, 200ms ease-in-out);
}

/* ==========================================================================
   Button Components
   ========================================================================== */

/* Compact button variant for tight spaces */
.btn-compact {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Extra small button variant */
.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.25;
}

/* Action button - consistent width */
.btn-action {
    min-width: 80px;
}

/* Quick filter buttons - uniform sizing */
.quick-filters .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 0.375rem;
    white-space: nowrap;
}

.quick-filters .btn i {
    font-size: 0.75rem;
}

/* Button stacking utilities */
.btn-stack {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-stack .btn {
    width: 100%;
}

/* Group of horizontally stacked buttons */
.btn-group-custom {
    display: inline-flex;
    gap: 0.5rem;
}

/* Button with icon prefix */
.btn-icon-prefix {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Button with loading state */
.btn.is-loading {
    pointer-events: none;
    opacity: 0.6;
}

/* ==========================================================================
   Card Components
   ========================================================================== */

/* Base card enhancements */
.card {
    border: none;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem;
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition-md);
}

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

/* Card header */
.card-header {
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    padding: 1rem;
    font-weight: 600;
}

.card-header.bg-primary {
    background-color: var(--primary-color) !important;
    color: white;
    font-weight: 600;
}

.card-header.bg-success {
    background-color: var(--success-color) !important;
    color: white;
    font-weight: 600;
}

.card-header.bg-danger {
    background-color: var(--danger-color) !important;
    color: white;
    font-weight: 600;
}

/* Card body */
.card-body {
    padding: 1.5rem;
}

.card-body.compact {
    padding: 1rem;
}

/* Card footer */
.card-footer {
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    padding: 1rem;
}

/* Flat card variant (no shadow) */
.card.card-flat {
    box-shadow: none;
    border: 1px solid var(--gray-300);
}

/* Bordered card variant */
.card.card-bordered {
    border: 2px solid var(--gray-300);
    box-shadow: none;
}

/* ==========================================================================
   Info Box (Modernized from AdminLTE2)
   ========================================================================== */

.info-box {
    cursor: pointer;
    transition: all var(--transition-md);
    padding: 1.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-box:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.info-box-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    font-size: 2rem;
    color: white;
}

.info-box-icon.bg-primary {
    background-color: var(--primary-color);
}

.info-box-icon.bg-success {
    background-color: var(--success-color);
}

.info-box-icon.bg-danger {
    background-color: var(--danger-color);
}

.info-box-icon.bg-warning {
    background-color: var(--warning-color);
    color: #333;
}

.info-box-icon.bg-info {
    background-color: var(--info-color);
}

.info-box-content {
    flex: 1;
    min-width: 0;
}

.info-box-title {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gray-700);
    font-weight: 500;
}

.info-box-number {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
    margin: 0.25rem 0 0 0;
}

.info-box-footer {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: 0.5rem;
}

/* ==========================================================================
   Compact Small Box - Smaller dashboard stat cards
   Use .small-box-compact class on small-box elements
   ========================================================================== */

.small-box-compact {
    border-radius: var(--radius-md);
    margin-bottom: 0.75rem;
}

.small-box-compact .inner {
    padding: 0.75rem 1rem;
}

.small-box-compact .inner h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1.2;
}

.small-box-compact .inner p {
    font-size: 0.75rem;
    margin-bottom: 0;
}

.small-box-compact .icon {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 2.5rem;
}

.small-box-compact .icon > i,
.small-box-compact .icon > svg {
    font-size: 2.5rem;
}

/* Compact Info Box - Smaller secondary stat cards */
.info-box-compact {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
}

.info-box-compact .info-box-icon {
    width: 45px;
    height: 45px;
    font-size: 1.25rem;
    border-radius: var(--radius-sm);
}

.info-box-compact .info-box-text {
    font-size: 0.75rem;
}

.info-box-compact .info-box-number {
    font-size: 1.25rem;
    margin: 0.125rem 0 0 0;
}

/* Stat row - evenly spread boxes across full width in a single row */
.stat-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.stat-row > .col,
.stat-row > [class*="col-"] {
    flex: 1 1 0;
    min-width: 120px;
    max-width: none;
    padding: 0;
}

.stat-row .small-box,
.stat-row .info-box {
    height: 100%;
    margin-bottom: 0;
}

/* Responsive stat row - allow wrapping on small screens */
@media (max-width: 768px) {
    .stat-row {
        flex-wrap: wrap;
    }
    .stat-row > .col,
    .stat-row > [class*="col-"] {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: calc(50% - 0.5rem);
    }
}

@media (max-width: 480px) {
    .stat-row > .col,
    .stat-row > [class*="col-"] {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* ==========================================================================
   Badge Components
   ========================================================================== */

/* Compact badge variant */
.badge-compact {
    padding: 0.25em 0.5em;
    font-size: 0.75rem;
}

/* Large badge variant */
.badge-lg {
    padding: 0.5em 0.75em;
    font-size: 0.875rem;
}

/* Pill badge variant */
.badge-pill {
    border-radius: 9999px;
}

/* Status badge styles */
.badge-status {
    font-weight: 600;
    padding: 0.35em 0.65em;
    text-transform: capitalize;
}

/* ==========================================================================
   Form Components
   ========================================================================== */

/* Compact form control */
.form-control-compact {
    padding: 0.375rem 0.5rem;
    font-size: 0.875rem;
}

/* Smaller form control */
.form-control-sm-custom {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Form label styling */
.form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
}

/* Form text helper */
.form-text {
    font-size: 0.875rem;
    color: var(--gray-500);
    margin-top: 0.25rem;
}

/* Input group compact variant */
.input-group-compact .input-group-text {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.input-group-compact .form-control {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Select2 container enhancements */
.select2-container--bootstrap-5 .select2-selection--single {
    height: auto;
    padding: 0.375rem 0;
}

/* ==========================================================================
   Table Components
   ========================================================================== */

/* ==========================================================================
   Sortable Header Styles - GridView column sorting with icons
   ========================================================================== */

/* Sortable column header link styling */
.table thead th a[data-sort],
.table thead th a.sortable-header,
.grid-view thead th a {
    color: #333;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.table thead th a[data-sort]:hover,
.table thead th a.sortable-header:hover,
.grid-view thead th a:hover {
    color: #007bff;
    text-decoration: none;
}

/* Active sort state */
.table thead th a[data-sort].asc,
.table thead th a[data-sort].desc,
.table thead th a.sorted {
    color: #007bff;
    font-weight: 700;
}

/* Sort icon styling */
.sort-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    font-size: 11px;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.table thead th a:hover .sort-icon {
    opacity: 1;
}

/* Active sort icon */
.sort-icon.active {
    opacity: 1;
    color: #007bff;
}

/* Yii2 GridView sort indicator classes */
.grid-view thead th.asc a .sort-icon,
.grid-view thead th.desc a .sort-icon {
    opacity: 1;
    color: #007bff;
}

/* Compact table variant */
.table-compact th,
.table-compact td {
    padding: 0.5rem !important;
    font-size: 0.875rem;
}

.table-compact th {
    font-weight: 600;
}

/* Striped table rows */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--gray-50);
}

/* Hoverable table rows */
.table-hover tbody tr:hover {
    background-color: var(--gray-100);
}

/* GridView clickable row */
.gridview-row-clickable {
    cursor: pointer;
    user-select: none;
}

.gridview-row-clickable:hover {
    background-color: var(--gray-100);
}

.gridview-row-clickable.selected {
    background-color: #d1ecf1;
}

/* ==========================================================================
   GridView Link Styling - Remove underlines from table links
   ========================================================================== */

/* Remove underlines from links in table cells by default */
.table td a,
.table th a,
table.table-bordered td a,
table.table-striped td a,
table.table-hover td a {
    text-decoration: none;
}

/* Show underline on hover for better UX */
.table td a:hover,
.table th a:hover {
    text-decoration: underline;
}

/* Action icons should never have underlines */
.table td a.action-icon,
.table td a.btn {
    text-decoration: none !important;
}

/* Table header sticky positioning */
.table-sticky-header thead {
    position: sticky;
    top: 0;
    background-color: var(--gray-200);
    z-index: 10;
}

/* ==========================================================================
   Search & Filter Cards - Right-aligned when collapsed, smooth transitions
   ========================================================================== */

/* Base transitions for all search cards - smooth collapse/expand */
.card[class*="-search"],
.card.career-search {
    transition: width 0.3s ease-in-out, margin 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Smooth card-body transitions for collapse/expand */
.card[class*="-search"] .card-body,
.card.career-search .card-body {
    transition: opacity 0.25s ease-in-out, max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    overflow: hidden;
}

/* When collapsed: compact and right-aligned */
.card.collapsed-card[class*="-search"],
.card.collapsed-card.career-search {
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}

/* Hidden card-body when collapsed - smooth fade out */
.card.collapsed-card[class*="-search"] .card-body,
.card.collapsed-card.career-search .card-body {
    opacity: 0;
    max-height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* When expanded, search cards should be full width to show all fields */
.card[class*="-search"]:not(.collapsed-card),
.card.career-search:not(.collapsed-card) {
    width: 100%;
}

/* Visible card-body when expanded - smooth fade in */
.card[class*="-search"]:not(.collapsed-card) .card-body,
.card.career-search:not(.collapsed-card) .card-body {
    opacity: 1;
    max-height: 1000px;
}

/* Smooth header transition */
.card[class*="-search"] .card-header,
.card.career-search .card-header {
    transition: padding 0.2s ease-in-out;
}

/* Ensure the card header stays compact when collapsed */
.card.collapsed-card[class*="-search"] .card-header,
.card.collapsed-card.career-search .card-header {
    padding: 0.5rem 1rem;
}

/* Style the collapsed card title - compact */
.card.collapsed-card[class*="-search"] .card-title,
.card.collapsed-card.career-search .card-title {
    font-size: 0.875rem;
    margin: 0;
}

/* Smooth icon rotation on collapse toggle button */
.card[class*="-search"] .btn-tool i,
.card.career-search .btn-tool i {
    transition: transform 0.2s ease-in-out;
}

/* ==========================================================================
   Compact Info Boxes - For Quick Stats sections
   ========================================================================== */

/* Compact info-box variant - much smaller height */
.info-box-compact,
.quick-stats-compact .info-box {
    min-height: auto !important;
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    display: flex;
    align-items: center;
}

.info-box-compact .info-box-icon,
.quick-stats-compact .info-box .info-box-icon {
    width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    font-size: 1.25rem !important;
    line-height: 50px !important;
    border-radius: 8px !important;
}

.info-box-compact .info-box-content,
.quick-stats-compact .info-box .info-box-content {
    padding: 0.25rem 0.75rem !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info-box-compact .info-box-text,
.quick-stats-compact .info-box .info-box-text {
    font-size: 0.75rem !important;
    margin-bottom: 0 !important;
}

.info-box-compact .info-box-number,
.quick-stats-compact .info-box .info-box-number {
    font-size: 1.25rem !important;
    font-weight: 700;
}

/* Compact card header for Quick Stats */
.quick-stats-compact .card-header {
    padding: 0.5rem 0.75rem !important;
}

.quick-stats-compact .card-title {
    font-size: 0.875rem !important;
}

.quick-stats-compact .card-body {
    padding: 0.75rem !important;
}

/* ==========================================================================
   Alert Components
   ========================================================================== */

.alert {
    border-radius: var(--radius-md);
    border: none;
    box-shadow: var(--shadow-xs);
}

.alert-primary {
    background-color: #d1ecf1;
    color: #0c5460;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* ==========================================================================
   Modal Components
   ========================================================================== */

.modal-header {
    background-color: var(--gray-100);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    background-color: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    padding: 1rem;
}

.modal.fade .modal-dialog {
    transition: transform var(--transition-md);
}

/* ==========================================================================
   Navigation Components
   ========================================================================== */

/* Sidebar navigation */
.sidebar-menu > li > a {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all var(--transition-sm);
}

.sidebar-menu > li > a:hover {
    background-color: var(--gray-100);
    color: var(--primary-color);
}

.sidebar-menu > li.active > a {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}

/* Breadcrumb styling */
.breadcrumb {
    background-color: transparent;
    padding: 0;
}

.breadcrumb-item {
    font-size: 0.875rem;
}

.breadcrumb-item.active {
    color: var(--gray-700);
    font-weight: 600;
}

/* ==========================================================================
   Pagination Components
   ========================================================================== */

.pagination {
    gap: 0.25rem;
}

.page-link {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--primary-color);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
}

.page-link:hover {
    color: var(--primary-dark);
    background-color: var(--gray-100);
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* GridView pagination layout - prevent text wrapping */
.gridview-pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.gridview-pagination-wrapper .summary,
.gridview-pagination-wrapper .text-dark {
    white-space: nowrap;
    font-size: 0.875rem;
}

/* ==========================================================================
   Search & Filter Card Components
   ========================================================================== */

/* Ensure Search & Filter card headers are left-aligned */
.card.card-outline .card-header .card-title {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Search filter form styling */
.card.card-outline .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   Tooltip & Popover Components
   ========================================================================== */

.tooltip-inner {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.popover {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.popover-header {
    background-color: var(--gray-100);
    font-weight: 600;
    padding: 1rem;
}

.popover-body {
    padding: 1rem;
}

/* ==========================================================================
   Progress Bar Components
   ========================================================================== */

.progress {
    height: 0.5rem;
    border-radius: var(--radius-sm);
    background-color: var(--gray-300);
}

.progress-bar {
    background-color: var(--primary-color);
    transition: width var(--transition-md);
}

.progress-bar.bg-success {
    background-color: var(--success-color) !important;
}

.progress-bar.bg-danger {
    background-color: var(--danger-color) !important;
}

.progress-bar.bg-warning {
    background-color: var(--warning-color) !important;
}

/* ==========================================================================
   Form Layout Constraints - Professional Form Widths
   ========================================================================== */

/**
 * Forms should not stretch to full page width.
 * Standard enterprise form width: 800-900px max for data entry forms.
 * This applies to:
 * - Forms with class "formatted-form"
 * - Create/update forms inside cards
 */

/* Main form constraint container */
.formatted-form,
.candidate-form,
.job-form,
.application-form,
.interview-form,
.offer-form,
.user-form {
    max-width: 900px;
}

/* Cards containing forms should constrain width */
.card-body > form,
.card-body > .formatted-form {
    max-width: 900px;
}

/* Individual field width constraints */
/* Email fields - standard width */
.formatted-form .col-md-12 .form-control[type="email"],
.formatted-form .col-md-12 input[name*="email"] {
    max-width: 400px;
}

/* Phone/Mobile fields */
.formatted-form .col-md-12 .input-group {
    max-width: 500px;
}

/* URL fields (LinkedIn, etc) */
.formatted-form .col-md-12 input[type="url"],
.formatted-form .col-md-12 input[name*="url"],
.formatted-form .col-md-12 input[name*="linkedin"] {
    max-width: 500px;
}

/* File inputs */
.formatted-form .col-md-12 input[type="file"] {
    max-width: 500px;
}

/* Multi-select dropdowns (Skills, etc) - can be wider */
.formatted-form .col-md-12 .select2-container {
    max-width: 700px !important;
}

/* Textarea fields */
.formatted-form .col-md-12 textarea {
    max-width: 700px;
}

/* Single-line text in full-width cols */
.formatted-form .col-md-12 > .mb-3 > .form-control:not([type="file"]):not(textarea),
.formatted-form .col-md-12 > .form-group > .form-control:not([type="file"]):not(textarea) {
    max-width: 500px;
}

/* Override for wrapped form-controls inside col-md-12 */
.formatted-form .col-md-12 .form-control {
    /* Let the field wrapper control width */
}

/* Create/Update page form card constraints */
.resume-create .card,
.resume-update .card,
.job-create .card,
.job-update .card,
.application-create .card,
.application-update .card,
.interview-create .card,
.interview-update .card,
.user-create .card,
.user-update .card,
[class*="-create"] .card.card-outline,
[class*="-update"] .card.card-outline {
    max-width: 950px;
}

/* View page cards can be wider since they display more info */
[class*="-view"] .card {
    /* No constraint - view pages can use full width */
}

/* Ensure inline elements in forms align properly */
.formatted-form .row {
    margin-bottom: 0.5rem;
}

/* Form section headers */
.formatted-form h5,
.formatted-form .section-title {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* Responsive: on smaller screens, let forms use full width */
@media (max-width: 991.98px) {
    .formatted-form,
    .candidate-form,
    .job-form,
    .application-form {
        max-width: 100%;
    }

    .formatted-form .col-md-12 .form-control,
    .formatted-form .col-md-12 .select2-container,
    .formatted-form .col-md-12 textarea {
        max-width: 100% !important;
    }
}