/*
 * Layout for the "Dispositivi affidabili" table embedded in the profile
 * page (resources/views/filament/profile-trusted-devices.blade.php).
 *
 * Why a dedicated stylesheet instead of Tailwind utilities: Filament
 * panel pages load only Filament's pre-built CSS bundle, NOT the app's
 * Vite bundle, so non-Filament utility classes (w-full, table-fixed,
 * text-center, arbitrary values) have no active rule. This file is
 * registered as a Filament asset (AppServiceProvider) and served
 * alongside the panel CSS, replacing the previous inline-style workaround.
 *
 * Color/spacing utilities that DO ship in Filament's bundle (text-gray-*,
 * bg-gray-*, ring-*, divide-y) stay in the blade.
 */

.fi-tdv {
    width: 100%;
}

.fi-tdv-empty {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.fi-tdv-empty-icon {
    height: 1.25rem;
    width: 1.25rem;
}

.fi-tdv-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: 0.75rem;
}

.fi-tdv-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.875rem;
}

/* Column widths: device gets the largest share; meta columns centered;
   action column wide enough for the "Revoca accesso" button on one line. */
.fi-tdv-col-device {
    width: 30%;
}
.fi-tdv-col-ip {
    width: 14%;
}
.fi-tdv-col-last {
    width: 16%;
}
.fi-tdv-col-trusted {
    width: 18%;
}
.fi-tdv-col-action {
    width: 22%;
}

.fi-tdv-th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
}

.fi-tdv-td {
    padding: 0.75rem 1rem;
    text-align: left;
}

.fi-tdv-center {
    text-align: center;
}

.fi-tdv-device {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.fi-tdv-device-icon {
    height: 1.25rem;
    width: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.fi-tdv-device-label {
    min-width: 0;
    font-weight: 500;
}

/* Inline-editable nickname: input + pencil affordance on one row. */
.fi-tdv-rename-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* Looks like plain text until focused, then reveals a subtle field. */
.fi-tdv-rename {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.125rem 0.375rem;
    margin: -0.125rem 0 -0.125rem -0.375rem;
    font: inherit;
    font-weight: 500;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    outline: none;
    cursor: text;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease;
}

/* Pencil button: shares the rename affordance, dims until hover/focus. */
.fi-tdv-rename-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
    border: none;
    background: transparent;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition:
        opacity 0.15s ease,
        color 0.15s ease;
}

.fi-tdv-rename-icon:hover {
    opacity: 1;
}

.fi-tdv-rename-icon-svg {
    height: 0.875rem;
    width: 0.875rem;
}

.fi-tdv-rename:hover {
    border-color: rgba(107, 114, 128, 0.3);
}

.fi-tdv-rename:focus {
    border-color: rgb(99 102 241);
    background-color: rgb(255 255 255);
    box-shadow: 0 0 0 1px rgb(99 102 241);
}

.dark .fi-tdv-rename:focus {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgb(129 140 248);
    box-shadow: 0 0 0 1px rgb(129 140 248);
}

.fi-tdv-device-current {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.fi-tdv-ip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.75rem;
}