/* Custom styles - Bootstrap handles the rest */

/* Base font size smaller */
body {
    font-size: 0.875rem;
}

/* Table vertical alignment */
.table td, .table th {
    vertical-align: middle;
    padding: 0.4rem 0.5rem;
}

/* Card header with section title */
.card-header {
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-primary);
    color: white;
}
.card-header h2 {
    color: white;
}
.card-header .badge {
    vertical-align: middle;
}

/* Actions column consistent width */
.table td:last-child {
    white-space: nowrap;
    width: 1%;
}

/* Table header styling */
.table thead th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom-width: 2px;
}

/* Card footer for forms */
.card-footer {
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-light);
}

/* Title styling */
.app-title {
    color: var(--bs-primary);
    font-weight: 600;
}
.app-title i {
    margin-right: 0.5rem;
    color: var(--bs-danger);
}

/* Action buttons spacing */
.table .btn {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
}
.table .btn + .btn {
    margin-left: 0.25rem;
}

/* Status indicators */
.status-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
}
.status-online { background-color: var(--bs-success); }
.status-error { background-color: var(--bs-danger); }
.status-warning { background-color: var(--bs-warning); }
.status-info { background-color: var(--bs-info); }

/* Sortable columns */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px !important;
}
th.sortable:hover { background-color: rgba(0,0,0,0.05); }
th.sortable::after {
    content: '\2195';
    position: absolute;
    right: 4px;
    opacity: 0.3;
    font-size: 0.75em;
}
th.sortable.sort-asc::after { content: '\2191'; opacity: 1; }
th.sortable.sort-desc::after { content: '\2193'; opacity: 1; }

/* Screenshot thumbnails */
.screenshot-thumbnail {
    width: 70px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--bs-border-color);
    transition: transform 0.2s;
}
.screenshot-thumbnail:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.screenshot-placeholder {
    display: inline-block;
    width: 70px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: var(--bs-secondary-bg);
    border-radius: 4px;
    color: var(--bs-secondary-color);
    font-size: 0.75em;
    border: 1px dashed var(--bs-border-color);
}

/* Favicon */
.favicon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: middle;
}

/* Text truncation for long cells */
.text-truncate-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SSL warning */
.ssl-warning { color: var(--bs-danger); font-weight: bold; }

/* Robots status */
.robots-blocked { color: var(--bs-danger); font-weight: bold; }
.robots-ok { color: var(--bs-success); }

/* Error message under server name */
.error-message {
    font-size: 0.75em;
    color: var(--bs-secondary-color);
    margin-top: 2px;
}

/* Responsive: hide columns on smaller screens */
@media (max-width: 992px) {
    .col-backend, .col-robots, .col-ns { display: none; }
}
@media (max-width: 768px) {
    .col-ip, .col-server { display: none; }
    .screenshot-thumbnail, .screenshot-placeholder {
        width: 50px;
        height: 28px;
        line-height: 28px;
    }
}

/* Dark theme adjustments */
[data-bs-theme="dark"] th.sortable:hover {
    background-color: rgba(255,255,255,0.05);
}
[data-bs-theme="dark"] .card-footer {
    background-color: var(--bs-dark);
}

/* Auth section */
#auth-section {
    display: inline-flex;
    align-items: center;
}
#user-avatar {
    border: 1px solid var(--bs-border-color);
}
#login-btn .bi-google {
    font-size: 0.85em;
}

/* --- Réordonnancement par glisser-déposer --- */
/* La colonne n'apparaît qu'en mode edit ET sans tri par colonne actif :
   réordonner une vue triée écrirait un ordre sans rapport avec l'affichage. */
.col-reorder {
    display: none;
    width: 1%;
    padding-right: 0;
}
table.can-reorder .col-reorder {
    display: table-cell;
}

.reorder-handle {
    cursor: grab;
    color: var(--bs-secondary-color);
    opacity: 0.55;
}
.reorder-handle:hover {
    opacity: 1;
}
tr.dragging .reorder-handle {
    cursor: grabbing;
}

table.can-reorder tbody tr.dragging {
    opacity: 0.4;
}
table.can-reorder tbody tr.dragging td {
    background-color: var(--bs-tertiary-bg);
}

/* Indice discret dans l'en-tête de section quand le tri bloque le glisser */
.reorder-hint {
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.75;
}