/**
 * UNIFIED COMPONENT LIBRARY
 * Water Meter Monitoring System
 *
 * @version 1.1.0 - Table alignment fixed (semantic left/right/center)
 * @requires design-tokens.css
 *
 * This file provides reusable component classes:
 * - Status badges
 * - Buttons
 * - Station cards
 * - LED indicators
 * - Data rows
 *
 * Import AFTER design-tokens.css
 */

/* ================================================
   STATUS BADGES
   ================================================
   Usage: <span class="status-badge status-badge--operational">
   ================================================ */

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-full);
    font-family: var(--font-family);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: 1;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.status-badge--operational {
    background: var(--status-operational-bg);
    color: var(--status-operational);
}

.status-badge--warning {
    background: var(--status-warning-bg);
    color: var(--status-warning);
}

.status-badge--critical {
    background: var(--status-critical-bg);
    color: var(--status-critical);
}

.status-badge--pending {
    background: var(--status-pending-bg);
    color: var(--status-pending);
}

/* Larger variant */
.status-badge--lg {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

/* ================================================
   LED STATUS INDICATORS
   ================================================
   Usage: <span class="led led--operational"></span>
   ================================================ */

.led {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    animation: led-pulse 2s ease-in-out infinite;
}

.led--operational {
    background: var(--status-operational);
    box-shadow: 0 0 6px var(--status-operational);
}

.led--warning {
    background: var(--status-warning);
    box-shadow: 0 0 6px var(--status-warning);
}

.led--critical {
    background: var(--status-critical);
    box-shadow: 0 0 6px var(--status-critical);
}

.led--pending {
    background: var(--status-pending);
    box-shadow: 0 0 6px var(--status-pending);
    animation: none; /* No pulse for pending */
}

@keyframes led-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Larger LED variant */
.led--lg {
    width: 12px;
    height: 12px;
}

/* ================================================
   BUTTONS
   ================================================
   Usage: <button class="btn btn--primary">
   ================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: 1px solid transparent;
    white-space: nowrap;
}

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

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary button */
.btn--primary {
    background: var(--primary);
    color: var(--text-inverse);
    border-color: var(--primary);
}

.btn--primary:hover:not(:disabled) {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Secondary button */
.btn--secondary {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-200);
}

.btn--secondary:hover:not(:disabled) {
    background: var(--gray-200);
    border-color: var(--gray-300);
}

/* Outline button */
.btn--outline {
    background: transparent;
    color: var(--primary);
    border-color: var(--primary);
}

.btn--outline:hover:not(:disabled) {
    background: var(--primary);
    color: var(--text-inverse);
}

/* Danger button */
.btn--danger {
    background: var(--danger);
    color: var(--text-inverse);
    border-color: var(--danger);
}

.btn--danger:hover:not(:disabled) {
    background: #dc2626;
    border-color: #dc2626;
}

/* Button sizes */
.btn--sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.btn--lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}

/* Icon-only button */
.btn--icon {
    padding: var(--space-2);
    border-radius: var(--radius-md);
}

/* ================================================
   STATION CARDS
   ================================================
   Usage:
   <div class="station-card station-card--operational">
       <div class="station-card__header">...</div>
       <div class="station-card__body">...</div>
   </div>
   ================================================ */

.station-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: all var(--transition-normal);
    border: 1px solid var(--border);
}

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

/* Status border variants */
.station-card--operational {
    border-left: 3px solid var(--status-operational);
}

.station-card--warning {
    border-left: 3px solid var(--status-warning);
}

.station-card--critical {
    border-left: 3px solid var(--status-critical);
}

.station-card--pending {
    border-left: 3px solid var(--status-pending);
}

/* Card header */
.station-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.station-card__title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.station-card__subtitle {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0;
}

/* Card body */
.station-card__body {
    padding: var(--space-4);
}

/* Data rows inside cards */
.station-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
}

.station-card__row:not(:last-child) {
    border-bottom: 1px solid var(--border-light);
}

.station-card__label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.station-card__value {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    font-family: var(--font-mono);
}

/* Card footer */
.station-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--gray-50);
    border-top: 1px solid var(--border-light);
}

/* ================================================
   KPI METRIC BOXES
   ================================================
   Usage:
   <div class="kpi-box">
       <div class="kpi-box__label">Label</div>
       <div class="kpi-box__value">123</div>
   </div>
   ================================================ */

.kpi-box {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

.kpi-box__label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

.kpi-box__value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    font-family: var(--font-mono);
    line-height: 1;
}

.kpi-box__unit {
    font-size: var(--text-sm);
    color: var(--text-muted);
    margin-left: var(--space-1);
}

/* KPI with status color */
.kpi-box--operational .kpi-box__value { color: var(--status-operational); }
.kpi-box--warning .kpi-box__value { color: var(--status-warning); }
.kpi-box--critical .kpi-box__value { color: var(--status-critical); }

/* ================================================
   UNIFIED DATA TABLE COMPONENT
   ================================================
   A complete, consistent table system for all views.
   Uses canonical tokens from design-tokens.css.

   Usage:
   <div class="table-card">
       <div class="table-card__header">
           <h3 class="table-card__title">Table Title</h3>
           <div class="table-card__actions">...</div>
       </div>
       <div class="table-card__body">
           <table class="data-table">
               <thead>...</thead>
               <tbody>...</tbody>
           </table>
       </div>
       <div class="table-card__footer">...</div>
   </div>
   ================================================ */

/* ---- TABLE CARD WRAPPER ---- */
.table-card {
    background: var(--table-card-bg);
    border-radius: var(--table-border-radius);
    box-shadow: var(--table-card-shadow);
    border: var(--table-border-width) solid var(--table-border-color);
    overflow: hidden;
}

.table-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--table-card-header-padding);
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.table-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 15px;
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.table-card__actions {
    display: flex;
    gap: var(--space-2);
}

.table-card__body {
    overflow-x: auto;
}

.table-card__footer {
    padding: var(--table-pagination-padding);
    border-top: 1px solid var(--table-row-border-color);
    background: var(--table-pagination-bg);
}

/* ---- CORE DATA TABLE ---- */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--table-cell-font-size);
}

/* Table Header */
.data-table th {
    padding: var(--table-header-padding);
    text-align: left;
    font-weight: var(--table-header-font-weight);
    font-size: var(--table-header-font-size);
    letter-spacing: var(--table-header-letter-spacing);
    color: var(--table-header-color);
    background: var(--table-header-bg);
    border-bottom: none;
    white-space: nowrap;
    transition: background var(--transition-fast);
    cursor: default;
}

.data-table th:hover {
    background: var(--table-header-bg-hover);
}

/* Table Body */
.data-table tbody tr {
    min-height: 56px; /* Minimum row height, allows content to grow */
}

.data-table td {
    padding: var(--table-cell-padding);
    border-bottom: 1px solid var(--table-row-border-color);
    color: var(--table-cell-color);
    vertical-align: middle;
    text-align: left;
}

.data-table tbody tr:hover {
    background: var(--table-row-hover-bg);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* Striped variant */
.data-table--striped tbody tr:nth-of-type(odd) {
    background: var(--table-row-stripe-bg);
}

.data-table--striped tbody tr:nth-of-type(odd):hover {
    background: var(--table-row-hover-bg);
}

/* Compact variant (tighter padding) */
.data-table--compact th,
.data-table--compact td {
    padding: var(--space-2) var(--space-3);
}

/* ---- CELL VARIANTS ---- */

/* Monospace (for IDs, ESN, IMEI, codes) */
.data-table__mono,
.cell-mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Numeric (right-aligned, tabular figures) */
.data-table__number,
.cell-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Centered content (status badges, actions) */
.data-table__center,
.cell-center {
    text-align: center;
}

/* Muted (secondary info) */
.data-table__muted,
.cell-muted {
    color: var(--text-muted);
}

/* Timestamp */
.data-table__timestamp,
.cell-timestamp {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: left;
}

/* Status cell (centered for badges) */
.data-table__status,
.cell-status {
    text-align: center;
}

/* Photo thumbnail */
.cell-photo {
    width: 50px;
    padding: var(--space-2);
    text-align: center;
}

.photo-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 2px solid var(--border-light);
    transition: all var(--transition-fast);
    display: block;
    margin: 0 auto;
}

.photo-thumbnail-link {
    display: inline-block;
    line-height: 0;
}

.photo-thumbnail-link:hover .photo-thumbnail {
    border-color: var(--primary);
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.photo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-page);
    border-radius: var(--radius-md);
    border: 2px dashed var(--border);
    margin: 0 auto;
}

/* ---- TABLE STATUS INDICATORS ---- */
.table-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-medium);
}

.table-status__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
}

.table-status--success {
    background: var(--status-operational-bg);
    color: var(--primary-dark);
}
.table-status--success .table-status__dot { background: var(--status-operational); }

.table-status--warning {
    background: var(--status-warning-bg);
    color: #92400e;
}
.table-status--warning .table-status__dot { background: var(--status-warning); }

.table-status--error {
    background: var(--status-critical-bg);
    color: #991b1b;
}
.table-status--error .table-status__dot { background: var(--status-critical); }

.table-status--pending {
    background: var(--status-pending-bg);
    color: var(--text-secondary);
}
.table-status--pending .table-status__dot { background: var(--status-pending); }

/* ---- TABLE ACTION BUTTON ---- */
.table-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.table-action-btn:hover {
    background: var(--bg-hover);
    color: var(--primary);
    border-color: var(--primary);
}

/* ---- TABLE LINKS ---- */
.table-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
}

.table-link:hover {
    color: var(--primary);
}

/* ---- TABLE EMPTY STATE ---- */
.table-empty-state {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
}

.table-empty-state__icon {
    margin-bottom: var(--space-2);
    opacity: 0.5;
}

.table-empty-state__text {
    font-size: var(--text-sm);
    margin: 0;
}

/* ---- TABLE PAGINATION ---- */
.table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.table-pagination__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.table-pagination__btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--primary);
}

.table-pagination__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Backward compatibility alias for pagination buttons */
.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.pagination-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--primary);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.table-pagination__info,
.pagination-info {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 60px;
    text-align: center;
}

.table-pagination__current,
.pagination-current {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.table-pagination__total,
.pagination-total {
    color: var(--text-secondary);
}

/* ---- HEADER ALIGNMENT HELPERS ---- */
/* Use these on <th> elements for specific columns */
.th-center {
    text-align: center;
}

.th-right {
    text-align: right;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 640px) {
    .table-card__header {
        padding: var(--space-3) var(--space-4);
    }

    .table-card__title {
        font-size: 14px;
    }

    .data-table th,
    .data-table td {
        padding: var(--space-2) var(--space-3);
    }
}

/* Hide rows beyond page limit (for JS pagination) */
.data-table tbody tr.hidden-row {
    display: none;
}

/* ================================================
   FORM ELEMENTS
   ================================================ */

.form-input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--text-primary);
    background: var(--bg-card);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

/* Search input with icon */
.search-input-wrapper {
    position: relative;
}

.search-input-wrapper .search-icon {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.search-input-wrapper .form-input {
    padding-left: var(--space-10);
}

/* ================================================
   UTILITY CLASSES
   ================================================ */

/* Text colors */
.text-operational { color: var(--status-operational); }
.text-warning { color: var(--status-warning); }
.text-critical { color: var(--status-critical); }
.text-pending { color: var(--status-pending); }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--text-primary); }

/* Background colors */
.bg-operational { background: var(--status-operational-bg); }
.bg-warning { background: var(--status-warning-bg); }
.bg-critical { background: var(--status-critical-bg); }
.bg-pending { background: var(--status-pending-bg); }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Spacing utilities */
.p-0 { padding: 0; }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.m-0 { margin: 0; }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }

/* Text utilities */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-mono { font-family: var(--font-mono); }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }

/* Border utilities */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}