/* ============================================
   CSS Variables — single source of truth
   ============================================ */
   .faulh_container {
    --color-border:       #ddd;
    --color-border-light: #e0e0e0;
    --color-bg:           #fff;
    --color-bg-subtle:    #fbfbfb;
    --color-bg-hover:     #ddd;
    --color-btn-bg:       #efefef;
    --color-text:         #000;
    --color-link:         #0073aa;
    --color-online:       #5ace5a;
    --color-offline:      #ff6a44;
    --color-idle:         #ccc;
    --radius:             3px;
    --input-height:       32px;
    --font-size-sm:       13px;
    --transition:         background-color 0.15s ease;

    border: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 20px;
    box-sizing: border-box; /* FIX: was missing, caused width overflow */
}

/* ============================================
   Inputs
   ============================================ */
.faulh_container input[type="text"],
.date-input {
    height: var(--input-height);      /* FIX: use height instead of min-height for consistency */
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    padding: 0 8px;                   /* ADDED: inputs had no horizontal padding */
    box-sizing: border-box;
    vertical-align: top;
    font-size: var(--font-size-sm);
}

.date-input {
    width: 40%;
    background-image: url(images/cal.png);
    background-position: right 8px center; /* FIX: was 98% — use explicit spacing */
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 30px;              /* ADDED: prevent text overlapping the calendar icon */
}

/* Keep readonly date inputs visually consistent with editable inputs in wp-admin */
.faulh_container .date-input[readonly] {
    background-color: var(--color-bg);
    color: var(--color-text);
    opacity: 1;
}

/* ============================================
   Basic search select
   ============================================ */
.faulh_container .basic_search select {
    height: var(--input-height);
    vertical-align: top;
    float: right;
    width: 18.5%;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    box-sizing: border-box;
    font-size: var(--font-size-sm);
}

/* ============================================
   Advanced search panel
   ============================================ */
#faulh_advanced_search {
    width: 100%;
    float: left;
    display: none;
    padding: 0 12px;
    margin-top: 15px;
    border: 1px solid var(--color-border-light);
    border-bottom: 0;
    box-sizing: border-box;
    background-color: var(--color-bg-subtle);
}

#faulh_advanced_search::after {       /* FIX: ::after (double colon) is the modern standard */
    content: "";
    clear: both;
    display: block;
}

#faulh_advanced_search > div {
    width: 46%;
    float: left;
    border-bottom: 1px solid #efefef;
    padding: 10px 0;
    box-sizing: border-box;
}

#faulh_advanced_search > div:nth-child(2n) {
    padding-left: 8%;
}

#faulh_advanced_search > div label {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    line-height: var(--input-height);
    display: inline-block;
}

#faulh_advanced_search > div label + input,
#faulh_advanced_search > div label + select {
    float: right;
    width: 50%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    height: var(--input-height);
    box-sizing: border-box;
    font-size: var(--font-size-sm);
    padding: 0 6px;
}

/* ============================================
   Toggle advanced search button
   ============================================ */
.faulh_container #faulh_show_hide_advanced_search {
    background-color: var(--color-btn-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    text-decoration: none;
    padding: 5px 20px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: 0 0 10px 0;
    text-transform: uppercase;
    cursor: pointer;
    float: right;                    /* Fallback for older browsers */
    float: inline-end;               /* FIX: respects RTL/LTR layout direction */
    transition: var(--transition);  /* ADDED: smooth hover */
    line-height: 20px;              /* ADDED: consistent height with fieldset buttons */
}

.faulh_container #faulh_show_hide_advanced_search:hover {
    background-color: var(--color-bg-hover);
}

/* ============================================
   Fieldset action buttons
   ============================================ */
.faulh_container form > fieldset {
    display: block;
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
    margin-top: 10px;
}

.faulh_container form > fieldset > *,
.edit-link {
    display: inline-block;
    background-color: var(--color-btn-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius);
    text-decoration: none;
    padding: 5px 20px;
    font-size: var(--font-size-sm) !important;
    color: var(--color-text);
    text-transform: uppercase;
    margin: 0;
    vertical-align: top;
    line-height: 20px;
    box-sizing: border-box;
    cursor: pointer;
    transition: var(--transition);  /* ADDED: smooth hover */
}

.edit-link {
    background-color: var(--color-bg);
    vertical-align: initial;
    color: var(--color-link);
}

.edit-link:hover,
.faulh_container form > fieldset > *:hover {
    background-color: var(--color-bg-hover); /* DRY: merged two identical hover rules */
}

.faulh_container .faulh-cancel-btn {
    background-color: var(--color-bg);
    color: var(--color-link);
}

/* ============================================
   Status indicators — DRY with shared base
   ============================================ */

/* FIX: shared styles extracted to avoid repeating 6 identical properties */
.is_status_online::before,
.is_status_offline::before,
.is_status_idle::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;          /* ADDED: better vertical alignment with text */
}

.is_status_online::before  { background-color: var(--color-online); }
.is_status_offline::before { background-color: var(--color-offline); }
.is_status_idle::before    { background-color: var(--color-idle); }

/* ============================================
   Admin table
   ============================================ */
.faulh_admin_table {
    position: relative;
    padding: 30px 0;
}

.faulh_admin_table table {
    margin-top: 20px;
    width: auto;
    min-width: 100%;
    white-space: nowrap;
    border-collapse: collapse;        /* ADDED: prevents double-borders */
}

.faulh_admin_table form {
    overflow: auto;
    max-width: 100%;
}

.tablenav {
    left: 0;
    right: 0;
    position: absolute;
}

.tablenav.top    { top: 0; }
.tablenav.bottom { bottom: -10px; }

/* ============================================
   Dual scrollbar wrapper
   ============================================ */
.wrapper1,
.wrapper2 {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

.wrapper1 {
    height: 20px;
    margin-top: 20px;
}

.wrapper2 {
    min-height: 210px;
    /* FIX: removed "overflow-y: none" — 'none' is invalid; hidden is already set above */
}

/* FIX: magic number width replaced with a CSS variable for easy global updates */
.content1,
.content2 {
    --table-width: 2188px;
    width: var(--table-width);
}

.content1 { min-height: 100px; }
.content2 { height: 200px; }

/* ============================================
   Sortable table headers
   ============================================ */
th.sortable a,
th.sorted a {
    display: flex;
    align-items: center;             /* ADDED: vertically centers sort icon with text */
    padding: 15px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 767px) {
    .faulh_container {
        padding: 12px;
    }

    .faulh_admin_table {
        padding: 50px 0;
    }

    /* ADDED: stack advanced search fields on mobile */
    #faulh_advanced_search > div,
    #faulh_advanced_search > div:nth-child(2n) {
        width: 100%;
        padding-left: 0;
    }

    /* ADDED: full-width inputs on mobile */
    #faulh_advanced_search > div label + input,
    #faulh_advanced_search > div label + select {
        width: 100%;
        float: none;
        display: block;
        margin-top: 4px;
    }

    .faulh_container .basic_search select {
        width: 100%;
        float: none;
    }

    .faulh_container .basic_search .date-input,
    .faulh_container .basic_search select {
        display: block;
        margin: 0 0 8px;
    }

    .date-input {
        width: 100%;
    }

    .faulh_container #faulh_show_hide_advanced_search {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .faulh_container form > fieldset > * {
        display: block;
        width: 100%;
        margin: 0 0 8px;
        text-align: center;
    }
}