/**
 * Arrange Your Data Frontend Styles V5.5 (Layout Updated)
 *
 * Defines the appearance of the frontend data management panel, including:
 * - Login form styling.
 * - Logged-in area layout (toolbar, data entry panel, data list).
 * - Individual data item presentation with updated layout for username/actions.
 * - Button styles using CSS variables set via PHP settings.
 * - Styles for real-time validation messages and infinite scroll loader.
 * - Responsive adjustments for various screen sizes.
 */

/* ==========================================================================
   CSS Custom Properties (Variables) - Defined via PHP inline style
   ========================================================================== */
   :root {
    /* Default fallbacks in case PHP fails to output styles */
    /* Panel & General Colors */
    --ayd-panel-bg-color: #f0f2f5;
    --ayd-login-bg-color: #ffffff;
    --ayd-list-bg-color: #ffffff;
    --ayd-list-text-color: #333333;
    --ayd-label-color: #555555; /* Used for field icons now */
    --ayd-value-color: #111111;
    --ayd-copy-icon-color: #007bff;
    --ayd-initial-bg-color: #e9ecef;
    --ayd-initial-text-color: #495057;
    --ayd-heading-color: #2c3e50;

    /* Text Sizes */
    --ayd-base-text-size: 16px;
    --ayd-url-text-size: 20px;
    --ayd-id-label-text-size: 16px; /* Affects field icon size indirectly */
    --ayd-value-text-size: 10px;
    --ayd-user-text-size: 10px;

    /* Button Colors (Primary) */
    --ayd-btn-primary-bg: #007bff;
    --ayd-btn-primary-text: #ffffff;
    --ayd-btn-primary-bg-hover: #0056b3;
    --ayd-btn-primary-text-hover: #ffffff;

    /* Button Colors (Secondary) */
    --ayd-btn-secondary-bg: #6c757d;
    --ayd-btn-secondary-text: #ffffff;
    --ayd-btn-secondary-bg-hover: #5a6268;
    --ayd-btn-secondary-text-hover: #ffffff;

    /* Button Colors (Danger/Logout) */
    --ayd-btn-danger-bg: #dc3545;
    --ayd-btn-danger-text: #ffffff;
    --ayd-btn-danger-bg-hover: #c82333;
    --ayd-btn-danger-text-hover: #ffffff;
}

/* ==========================================================================
   Main Plugin Container
   ========================================================================== */
.ayd-frontend-container {
    padding: 20px 15px;             /* Inner spacing */
    margin: 20px 0;                 /* Outer spacing */
    border-radius: 8px;             /* Rounded corners */
    font-size: var(--ayd-base-text-size); /* Base font size for the panel */
    color: var(--ayd-list-text-color);  /* Default text color */
    box-shadow: 0 3px 8px rgba(0,0,0,0.05); /* Subtle shadow */
    /* Background is set via inline style (gradient or solid color) */
    position: relative;             /* Needed for absolute positioning of spinners */
    overflow: hidden;               /* Prevent content spill */
}

/* ==========================================================================
   Login Form Styling
   ========================================================================== */
.ayd-login-wrapper {
    max-width: 450px;               /* Limit form width */
    margin: 40px auto;              /* Center form vertically and horizontally */
}

.ayd-login-form {
    background-color: var(--ayd-login-bg-color); /* Form background */
    padding: 30px 35px;             /* Inner padding */
    border-radius: 8px;             /* Match container rounding */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* More prominent shadow for form */
}

.ayd-login-form h2 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
    color: #333;
    font-weight: 600;
    font-size: 1.4em;
}

/* Area for login success/error messages */
.ayd-login-message {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid transparent; /* Border color set by JS */
    border-radius: 4px;
    text-align: center;
    display: none;                  /* Initially hidden */
}

.ayd-login-form p {
    margin-bottom: 20px;            /* Spacing between form elements */
}

.ayd-login-form label {
    display: block;                 /* Ensure label is on its own line */
    margin-bottom: 8px;
    font-weight: 500;
    color: #444;
}

.ayd-login-form input[type="text"],
.ayd-login-form input[type="password"] {
    width: 100%;                    /* Full width inputs */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;         /* Include padding and border in width */
    font-size: 1em;
}

/* Remember Me checkbox alignment */
.ayd-remember-field {
    display: flex;
    align-items: center;
    gap: 8px;                      /* Space between checkbox and label */
}
.ayd-remember-field input[type="checkbox"] {
    margin: 0;                      /* Remove default margins */
    width: 16px;
    height: 16px;
}
.ayd-remember-field label {
    margin-bottom: 0;               /* Remove bottom margin for inline alignment */
    font-weight: normal;
    color: #555;
}

/* Login button container */
.ayd-login-submit {
    text-align: center;
    margin-top: 30px;
}

/* ==========================================================================
   General Button Styles
   ========================================================================== */
.ayd-button {
    padding: 10px 20px;             /* Default button padding */
    font-size: 1em;                 /* Default button font size */
    border-radius: 5px;             /* Rounded corners */
    cursor: pointer;
    border: none;                   /* Remove default borders */
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
    display: inline-flex;           /* Use flex for icon alignment */
    align-items: center;
    justify-content: center;
    gap: 6px;                       /* Space between icon and text */
    line-height: 1.5;               /* Standard line height */
    text-decoration: none;          /* Remove underline */
    white-space: nowrap;            /* Prevent text wrapping */
    vertical-align: middle;         /* Align button with surrounding text */
}

/* Icon alignment within buttons */
.ayd-button .dashicons {
    font-size: 1.2em;               /* Icon size relative to button font size */
    height: auto;                   /* Allow icon to size naturally */
    width: auto;
    line-height: 1;                 /* Ensure icon aligns well vertically */
}

/* Primary Button Styles */
.ayd-button.button-primary {
    background-color: var(--ayd-btn-primary-bg);
    color: var(--ayd-btn-primary-text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow */
}
.ayd-button.button-primary:hover,
.ayd-button.button-primary:focus { /* Add focus style for accessibility */
    background-color: var(--ayd-btn-primary-bg-hover);
    color: var(--ayd-btn-primary-text-hover);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* Slightly larger shadow on hover/focus */
    outline: none;                  /* Remove default browser outline */
}

/* Secondary Button Styles */
.ayd-button.button-secondary {
    background-color: var(--ayd-btn-secondary-bg);
    color: var(--ayd-btn-secondary-text);
}
.ayd-button.button-secondary:hover,
.ayd-button.button-secondary:focus {
    background-color: var(--ayd-btn-secondary-bg-hover);
    color: var(--ayd-btn-secondary-text-hover);
    outline: none;
}

/* Danger/Logout Button Styles */
.ayd-button.button-danger,
.ayd-button.button-logout {
    background-color: var(--ayd-btn-danger-bg);
    color: var(--ayd-btn-danger-text);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.ayd-button.button-danger:hover,
.ayd-button.button-logout:hover,
.ayd-button.button-danger:focus,
.ayd-button.button-logout:focus {
    background-color: var(--ayd-btn-danger-bg-hover);
    color: var(--ayd-btn-danger-text-hover);
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    outline: none;
}

/* Small Button variant (used in list item actions) */
.ayd-button.button-small {
    padding: 4px 8px;
    font-size: 0.85em;
    gap: 4px;
}
.ayd-button.button-small .dashicons {
    font-size: 1.8em;
    vertical-align: -1px; /* Fine-tune vertical alignment */
}

/* Icon-Only Button variant (used in toolbar) */
.ayd-button.ayd-button-icon-only {
    padding: 8px 10px;              /* Adjust padding for square-like shape */
    min-width: auto;                /* Remove default min-width */
    line-height: 1;                 /* Reset line-height */
    gap: 0;                         /* No gap needed */
}
.ayd-button.ayd-button-icon-only .dashicons {
    margin: 0;                      /* Remove margins */
    font-size: 1.4em;               /* Icon size */
    vertical-align: middle;         /* Center icon */
}

/* Disabled Button State */
.ayd-button:disabled,
.ayd-button[disabled] {
    opacity: 0.65;                  /* Reduce opacity */
    cursor: not-allowed;            /* Indicate non-interactive */
    box-shadow: none;               /* Remove shadow */
}


/* ==========================================================================
   Logged-In Area: Toolbar (Search & Action Buttons)
   ========================================================================== */
.ayd-toolbar {
    display: flex;
    flex-wrap: nowrap;              /* Prevent wrapping on larger screens */
    align-items: center;            /* Vertically align items */
    gap: 10px;                      /* Space between toolbar items */
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Separator */
}

/* Desktop Toolbar Layout: Search left, Buttons grouped right */
.ayd-search-bar {
    order: 1;                       /* First item */
    flex-grow: 1;                   /* Take available space */
    min-width: 200px;               /* Minimum width for the search bar */
    position: relative;             /* For positioning spinner inside */
}

/* Action buttons order and alignment */
#ayd-create-button {
    order: 2;                       /* Second item group */
    margin-left: auto;              /* Push this and subsequent buttons to the right */
}
#ayd-delete-all-button { order: 3; }
#ayd-logout-button { order: 4; }

/* Search Bar Input Styling */
.ayd-search-bar input[type="search"] {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;              /* Input padding */
    padding-right: 30px;            /* Make space for spinner */
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95em;
}

/* Search Spinner Positioning */
.ayd-search-spinner {
    position: absolute;
    right: 10px;                    /* Position inside the right padding */
    top: 50%;
    transform: translateY(-50%);    /* Center vertically */
    display: none;                  /* Hidden initially */
}

/* ==========================================================================
   Data Entry / Edit Panel
   ========================================================================== */
#ayd-data-entry-panel {
    margin-top: 10px;               /* Space below toolbar */
    padding: 20px 25px;             /* Inner padding */
    background-color: var(--ayd-list-bg-color); /* Use list background color */
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    margin-bottom: 25px;            /* Space above data list */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: none;                  /* Initially hidden, shown via JS */
}

#ayd-data-entry-panel h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--ayd-heading-color);
    font-size: 1.2em;
}

/* Area for form submission success/error messages */
#ayd-data-entry-panel .ayd-form-response {
    display: none;                  /* Hidden initially */
    margin-bottom: 15px;
    padding: 10px 15px;
    border: 1px solid transparent;  /* Border color set by JS */
    border-radius: 4px;
}

#ayd-data-entry-panel p {
    margin-bottom: 18px;            /* Spacing between form fields */
    position: relative;             /* For positioning validation messages */
}

#ayd-data-entry-panel label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #444;
}

#ayd-data-entry-panel input[type="text"],
#ayd-data-entry-panel input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; /* Smooth focus effect */
}

#ayd-data-entry-panel input[type="file"] {
    padding: 8px 10px;              /* Adjust padding for file input */
    background-color: #f8f9fa;      /* Slight background differentiation */
}

/* Style for input fields with validation errors */
#ayd-data-entry-panel input.ayd-input-error {
    border-color: var(--ayd-btn-danger-bg, #dc3545) !important; /* Use danger color */
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important; /* Red glow effect */
}

/* Style for inline validation messages below input fields */
.ayd-validation-message {
    display: none;                  /* Hidden initially, shown via JS */
    font-size: 0.85em;              /* Smaller text */
    margin-top: 5px;                /* Space below input */
    padding-left: 2px;
}
.ayd-validation-message.ayd-error {
    color: var(--ayd-btn-danger-bg, #dc3545); /* Red for errors */
}
.ayd-validation-message.ayd-success {
    color: #28a745;                 /* Green for success (optional) */
}
.ayd-validation-message.ayd-checking {
    color: #6c757d;                 /* Grey for checking status */
    font-style: italic;
}
/* Spinner inside validation messages */
.ayd-validation-message .ayd-inline-spinner {
    margin-left: 5px;
    border-width: 2px;
    width: 12px;
    height: 12px;
}

/* Container for form action buttons (Save, Cancel) */
.ayd-form-actions {
    margin-top: 25px;               /* Space above buttons */
    display: flex;
    gap: 10px;                      /* Space between buttons */
    align-items: center;            /* Align spinner with buttons */
}


/* ==========================================================================
   Data List Heading ("My Panels")
   ========================================================================== */
.ayd-data-heading {
    font-size: 1.5em;
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--ayd-heading-color);
    padding-bottom: 5px;            /* Space below text before border */
    border-bottom: 2px solid var(--ayd-heading-color); /* Underline effect */
    display: inline-block;          /* Prevent underline spanning full width */
}


/* ==========================================================================
   Data List & Individual Items (Updated Layout)
   ========================================================================== */
#ayd-data-list {
    /* Container for all data items */
    position: relative;
}

/* Main item container - Desktop uses Flexbox row layout */
.ayd-data-item {
    display: flex;                  /* Use flexbox for layout */
    background-color: var(--ayd-list-bg-color);
    padding: 18px 20px;             /* Inner padding */
    margin-bottom: 15px;            /* Space between items */
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08); /* Item shadow */
    align-items: flex-start;        /* Align profile and details top */
    flex-wrap: nowrap;              /* Prevent wrapping on large screens */
    gap: 20px;                      /* Space between left (details) and right (bottom-row) */
    color: var(--ayd-list-text-color);
    transition: box-shadow 0.2s ease, background-color 0.2s ease; /* Hover effect */
    position: relative;             /* For potential future use */
}
.ayd-data-item:hover {
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12); /* Enhance shadow on hover */
}

/* Left column: Profile + Main Details (URL, ID, Pass, Code) */
.ayd-data-left {
    display: flex;
    align-items: flex-start;        /* Align profile pic and details top */
    gap: 18px;                      /* Space between profile pic and details */
    flex-grow: 1;                   /* Allow left column to take available space */
    min-width: 65%;                 /* Prevent excessive shrinking on smaller flex containers */
    overflow: hidden;               /* Prevent content overflow */
}

/* Container for main text details (URL, ID, Pass, Code) - inside .ayd-data-left */
.ayd-details {
    flex-grow: 1;                   /* Allow details to take remaining space in left column */
    overflow: hidden;               /* Prevent long text spill */
}

/* Paragraphs within the main details section */
.ayd-details p {
    margin: 0 0 8px 0;              /* Spacing between detail lines */
    line-height: 1.45;              /* Adjust line height for readability */
    font-size: var(--ayd-base-text-size);
    color: var(--ayd-list-text-color);
    display: flex;                  /* Use flex to align icon and value/copy */
    align-items: center;            /* Vertically center icon and text */
    gap: 8px;                       /* Space between icon and value/copy group */
}
.ayd-details p:last-child {
    margin-bottom: 0;               /* Remove bottom margin from the last detail line */
}

/* Bottom Row Container (Holds Username + Actions) - Desktop Layout */
/* On Desktop, it acts like the old right column */
.ayd-bottom-row {
    flex-shrink: 0;                 /* Prevent shrinking */
    display: flex;
    flex-direction: column;         /* Stack username and actions vertically */
    align-items: flex-end;          /* Align them to the right */
    min-width: 100px;               /* Ensure some space */
    gap: 40px;
}

/* Username paragraph inside bottom row (Desktop Layout) */
.ayd-bottom-row .ayd-detail-user {
    order: 1;                       /* Username appears first */
    margin: 0;                      /* Reset margin */
    padding: 2px 0;                 /* Adjust vertical spacing if needed */
    font-size: var(--ayd-user-text-size); /* Use the variable */
    /* Inherit flex alignment from parent (.ayd-bottom-row) */
    display: flex;                  /* Ensure icons align */
    align-items: center;
    gap: 8px;
    width: 100%;                   /* Take full width of the column */
    justify-content: flex-end;     /* Align content to the right */
}
/* Style for the empty username placeholder */
.ayd-bottom-row .ayd-detail-user-empty {
    display: none; /* Hide empty placeholder on desktop */
    min-height: 1.5em; /* Ensure some height if displayed */
}


/* Actions container inside bottom row (Desktop Layout) */
.ayd-bottom-row .ayd-actions {
    order: 2;                       /* Actions appear below username */
    margin-top: 5px;                /* Space between username and actions */
    display: flex;
    gap: 14px;
    padding-top: 0;                 /* Remove previous padding */
}

/* Profile picture / Initial circle */
.ayd-profile {
    flex-shrink: 0;                 /* Prevent profile circle from shrinking */
    width: 50px;
    height: 50px;
    border-radius: 50%;             /* Make it circular */
    overflow: hidden;               /* Clip image to circle */
    background-color: var(--ayd-initial-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(0,0,0,0.05); /* Subtle border */
}
.ayd-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;              /* Ensure image covers the circle */
}

/* Initial character style */
.ayd-initial {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--ayd-initial-text-color);
    user-select: none;              /* Prevent text selection */
}

/* Field Icons (shared by all fields) */
.ayd-field-icon {
    display: inline-flex;           /* Use flex for centering icon */
    align-items: center;
    justify-content: center;
    color: var(--ayd-label-color, #555555); /* Use label color variable */
    font-size: 1.1em;               /* Icon size */
    text-align: center;
    flex-shrink: 0;                 /* Prevent icon shrinking */
    opacity: 0.8;                   /* Slightly muted appearance */
}
.ayd-field-icon .dashicons {
    line-height: 1;                 /* Center dashicon vertically */
    vertical-align: middle;
}

/* Field Value styling (shared by all fields) */
.ayd-value {
    color: var(--ayd-value-color);
    word-break: break-all;          /* Allow long values to wrap */
}

/* Specific text sizes for different values */
.ayd-detail-url a.ayd-value {
    font-size: var(--ayd-url-text-size);
    flex-grow: 0;                   /* Prevent URL value pushing copy icon too far */
    word-break: break-word;         /* Break URL more naturally */
    text-decoration: none;          /* Remove default underline */
    color: var(--ayd-value-color);  /* Ensure color applies to link */
}
.ayd-detail-url a.ayd-value:hover {
    text-decoration: underline;     /* Add underline on hover */
}
.ayd-detail-id .ayd-value,
.ayd-detail-pass .ayd-value,
.ayd-detail-code .ayd-value {
    font-size: var(--ayd-value-text-size);
}
/* Username text size is controlled via .ayd-bottom-row .ayd-detail-user */

/* Copy Icon styling */
.ayd-copy {
    cursor: pointer;
    color: var(--ayd-copy-icon-color);
    display: inline-flex;           /* Align icon */
    align-items: center;
    padding-left: 5px;              /* Space between value and copy icon */
    transition: color 0.2s ease, opacity 0.2s ease; /* Smooth hover */
    flex-shrink: 0;                 /* Prevent copy icon shrinking */
}
.ayd-copy:hover {
    opacity: 0.7;                   /* Dim on hover */
}
.ayd-copy .dashicons {
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
}

/* Message shown when list is empty or no search results found */
.ayd-no-results,
.ayd-error-message {
    text-align: center;
    padding: 30px 15px;
    color: #6c757d;
    background-color: var(--ayd-list-bg-color); /* Use list background */
    border-radius: 5px;
    margin-top: 10px;
    border: 1px dashed #ced4da;     /* Dashed border for visual distinction */
}


/* ==========================================================================
   Spinners
   ========================================================================== */
/* General spinner style */
.ayd-spinner {
    display: none;                  /* Hidden by default, shown via JS */
    width: 18px;
    height: 18px;
    border: 3px solid rgba(0,123,255,0.2); /* Lighter track */
    border-radius: 50%;
    border-top-color: var(--ayd-btn-primary-bg, #007bff); /* Active part color */
    animation: ayd-spin 0.8s linear infinite; /* Animation */
    vertical-align: middle;         /* Align with text */
    margin-left: 8px;               /* Default spacing */
}

/* Smaller spinner variant used in validation messages */
.ayd-inline-spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
    margin-left: 5px;
}

/* Spinner style when placed inside a button */
.ayd-button .ayd-spinner {
    width: 1em;                     /* Size relative to button font */
    height: 1em;
    border-width: 2px;
    margin-left: 0;
    margin-right: 6px;              /* Space before button text */
    border-top-color: currentColor; /* Match button's text color */
}

/* Reusable spin animation class (applied by JS sometimes) */
.ayd-spin {
    animation: ayd-spin 1s linear infinite;
}

/* Spin animation keyframes */
@keyframes ayd-spin {
    to { transform: rotate(360deg); }
}


/* ==========================================================================
   Infinite Scroll Loader / Status Message
   ========================================================================== */
#ayd-load-more-status {
    display: none;                  /* Hidden by default, shown via JS */
    text-align: center;
    padding: 20px 0;
    color: #6c757d;
    font-style: italic;
}
/* Center spinner within the status div */
#ayd-load-more-status .ayd-spinner {
    margin-left: 0;
    display: inline-block;          /* Ensure spinner shows */
}
/* Error state for load more status */
#ayd-load-more-status.ayd-error {
    color: var(--ayd-btn-danger-bg, #dc3545);
    font-style: normal;
}


/* ==========================================================================
   Responsive Design Adjustments (Updated for new layout)
   ========================================================================== */

/* Medium Screens (Tablets, smaller laptops) */
@media (max-width: 768px) {

    /* --- Toolbar Layout: Stack Search on top, Buttons below --- */
    .ayd-toolbar {
        flex-wrap: wrap;            /* Allow items to wrap */
        gap: 10px;
        border-bottom: none;        /* Remove border */
        padding-bottom: 5px;
        margin-bottom: 10px;        /* Adjust spacing */
    }
    /* Search bar: Full width on top row */
    .ayd-search-bar {
        order: 1;                   /* First item */
        flex-basis: 100%;           /* Take full width */
        min-width: unset;           /* Reset min-width */
        margin-bottom: 10px;        /* Space below search */
    }
    /* Buttons: Grouped on the second row, aligned right */
    #ayd-create-button,
    #ayd-delete-all-button,
    #ayd-logout-button {
        order: 2;                   /* Second group */
        flex-basis: auto;           /* Allow buttons to size naturally */
        margin-left: 5px;           /* Add slight spacing between buttons */
    }
    #ayd-create-button {
        margin-left: auto;          /* Keep create button pushed right */
    }
    /* --- End Toolbar Layout --- */

    /* --- Data Item Layout Adjustments --- */
    .ayd-data-item {
        flex-direction: column;     /* Stack left and bottom row */
        align-items: stretch;       /* Stretch columns to full width */
        gap: 10px;                  /* Adjust gap */
        padding: 15px;
    }

    /* Left column (Profile + Main Details) */
    .ayd-data-left {
        min-width: unset;
        width: 100%;
        gap: 12px;
        /* Add border below the main details */
        padding-bottom: 12px;
        margin-bottom: 10px; /* Space before the bottom row */
        border-bottom: 1px solid #eee;
    }

    /* Bottom Row (Username + Actions) on Mobile */
    .ayd-bottom-row {
        display: flex;
        flex-direction: row;        /* Arrange items horizontally */
        justify-content: space-between; /* Push username left, actions right */
        align-items: center;      /* Vertically center items */
        width: 100%;
        min-width: unset;
        padding-top: 5px; /* Add some space above */
    }

    /* Username paragraph inside bottom row (Mobile) */
    .ayd-bottom-row .ayd-detail-user {
        order: 1;                   /* Username on the left */
        flex-grow: 1;               /* Allow username to take available space */
        margin-right: 10px;         /* Add space between username and actions */
        padding: 0;                 /* Reset padding */
        width: auto;                /* Don't force 100% width here */
        justify-content: flex-start;/* Align username content left */
        /* Ensure it doesn't wrap unnecessarily */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Show empty placeholder on mobile to maintain alignment */
     .ayd-bottom-row .ayd-detail-user-empty {
        display: flex;              /* Use flex to take space */
        min-height: 1.5em;          /* Give it some height */
        flex-grow: 1;               /* Take up space like username would */
        margin-right: 10px;
    }

    /* Actions container inside bottom row (Mobile) */
    .ayd-bottom-row .ayd-actions {
        order: 2;                   /* Actions on the right */
        flex-shrink: 0;             /* Prevent actions from shrinking */
        margin-top: 0;              /* Reset margin */
        padding-top: 0;
    }

    /* Adjust profile pic size */
    .ayd-profile {
        width: 45px;
        height: 45px;
    }
    .ayd-initial {
        font-size: 1.2em;
    }

    /* Smaller Icon-Only Buttons on mobile */
    .ayd-button.ayd-button-icon-only {
        padding: 6px 8px;
    }
    .ayd-button.ayd-button-icon-only .dashicons {
        font-size: 1.3em;
    }
    /* --- End Data Item Layout --- */
}


/* Smallest Screens (Phones) */
@media (max-width: 480px) {
    .ayd-frontend-container {
        padding: 15px 10px;         /* Further reduce padding */
    }
    .ayd-login-form {
        padding: 25px 20px;         /* Reduce login form padding */
    }
    .ayd-toolbar {
        gap: 8px;                   /* Reduce toolbar gap */
    }
    #ayd-data-entry-panel {
        padding: 15px;              /* Reduce panel padding */
    }
    .ayd-data-item {
        padding: 12px;              /* Reduce item padding */
        gap: 8px;                   /* Reduce item gap */
    }
    .ayd-data-left {
        gap: 10px;
        padding-bottom: 10px;
        margin-bottom: 0px; /* Adjust space */
    }
    .ayd-profile {
        width: 40px;                /* Smaller profile pic */
        height: 40px;
    }
    .ayd-initial {
        font-size: 1.1em;           /* Smaller initial */
    }
    .ayd-bottom-row {
        padding-top: 3px;           /* Adjust space */
    }
     .ayd-bottom-row .ayd-detail-user {
         margin-right: 5px;         /* Further reduce space between user/actions */
         font-size: calc( var(--ayd-user-text-size) * 0.9 ); /* Slightly smaller user text on smallest screens */
     }
     .ayd-bottom-row .ayd-actions .ayd-button.button-small {
        padding: 3px 6px;          /* Smaller action buttons */
        font-size: 0.75em;
     }
     .ayd-bottom-row .ayd-actions .ayd-button.button-small .dashicons {
         font-size: 1.4em;
     }

    .ayd-button.button-small {
        padding: 5px 10px;          /* Adjust general small button padding */
        font-size: 0.8em;           /* Smaller button text */
    }
    .ayd-details p {
        margin-bottom: 6px;         /* Reduce spacing between detail lines */
        gap: 5px;                   /* Reduce gap between icon and value */
    }
    .ayd-field-icon {
       font-size: 1em;               /* Smaller field icon */
    }
    .ayd-copy .dashicons {
        font-size: 16px;            /* Smaller copy icon */
    }
}