/* Basic styling for the My Account tab elements */
.pdk-management-wrapper {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
}

/* General paragraph spacing for info/message sections */
.pdk-info-section p,
.pdk-no-membership-info p,
.pdk-single-membership-info p,
.pdk-inactive-membership-info p,
.pdk-disclaimer p {
    margin-bottom: 0.5em;
}

/* General strong tag color for info/message sections */
.pdk-info-section strong,
.pdk-no-membership-info strong,
.pdk-single-membership-info strong,
.pdk-inactive-membership-info strong,
.pdk-disclaimer strong {
    color: #333;
}

/* Primary Info Section Layout */
.pdk-info-section {
    display: block; /* Single column layout for the primary info */
    margin-bottom: 20px;
}

/* Primary User Details Line: Icon, Name, Subscription Summary */
.pdk-primary-details-line {
    display: flex; /* Use flexbox to align icon, name, and subscription summary */
    align-items: center; /* Vertically align items */
    flex-wrap: wrap; /* Allow content to wrap on smaller screens */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em; /* Make the name prominent */
    line-height: 1.2;
}

.pdk-primary-details-line .pdk-status-icon-wrapper {
    margin-right: 10px; /* Space between icon and name */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.pdk-primary-details-line .pdk-primary-user-name {
    flex-grow: 0; /* Don't let name take up all space */
    margin-right: 15px; /* Space between name and subscription summary */
    white-space: nowrap; /* Keep name on one line */
}

.pdk-primary-subscription-summary {
    flex-grow: 1; /* Allow subscription summary to take remaining space */
    font-size: 0.8em; /* Smaller font for subscription details */
    color: #555;
    line-height: 1.4;
    white-space: nowrap; /* Try to keep on one line */
    overflow: hidden; /* Hide overflow if it doesn't fit */
    text-overflow: ellipsis; /* Add ellipsis if hidden */
}

.pdk-primary-subscription-summary strong {
    white-space: nowrap; /* Prevent breaking "Subscription:" or "Status:" */
}

.pdk-inactive-membership-info {
    padding-bottom: 30px;
}

/* General styling for PDK status icons (used for both primary and sub-users) */
.pdk-status-icon-wrapper {
    display: inline-flex; /* Use inline-flex to keep it inline with text, but allow flex properties */
    flex-direction: column; /* Stack icon and text vertically */
    align-items: center; /* Center horizontally */
    justify-content: center; /* Center vertically */
    font-size: 0.7em; /* Smaller text for PDK */
    line-height: 1.2; /* Compact line height */
    margin-right: 8px; /* Space between icon and name */
    v-table th, ertical-align: middle; /* Align with text baseline */
    width: 30px; /* Fixed width for consistent spacing */
    flex-shrink: 0; /* Prevent shrinking */
}

.pdk-status-icon-wrapper .dashicons {
    font-size: 1.5em; /* Make icons larger */
    margin-bottom: 2px; /* Small space between icon and text */
}

.pdk-status-icon-wrapper .pdk-icon-text {
    font-size: 0.8em; /* Even smaller text */
    text-transform: uppercase;
    font-weight: bold;
    color: #555; /* Default text color */
}

/* Specific colors for status text and icons */
.pdk-status-enabled .dashicons, .pdk-status-enabled .pdk-icon-text { color: #28a745; /* Green */ }
.pdk-status-disabled .dashicons, .pdk-status-disabled .pdk-icon-text { color: #dc3545; /* Red */ }
.pdk-status-not-set .dashicons, .pdk-status-not-set .pdk-icon-text { color: #6c757d; /* Gray */ }


/* Sub-Users Table Styling */
#pdk-sub-users-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
}

#pdk-sub-users-table th,
#pdk-sub-users-table td {
    border: 1px solid #e5e5e5;
    padding: 10px;
    text-align: left;
    vertical-align: middle;
    line-height: 1.2em;
    font-size: 14px;
}

#pdk-sub-users-table th {
    background-color: #f8f8f8;
    font-weight: bold;
}

/* Table column widths for the new layout (5 columns) */
#pdk-sub-users-table th:nth-child(1),
#pdk-sub-users-table td:nth-child(1) {
    width: 25%; /* Name column with icon */
    min-width: 150px;
}

#pdk-sub-users-table th:nth-child(2),
#pdk-sub-users-table td:nth-child(2) {
    width: 25%; /* Email */
    min-width: 150px;
}

#pdk-sub-users-table th:nth-child(3),
#pdk-sub-users-table td:nth-child(3) {
    width: 15%; /* Phone */
    min-width: 100px;
}

#pdk-sub-users-table th:nth-child(4),
#pdk-sub-users-table td:nth-child(4) {
    width: 20%; /* Added Date */
    min-width: 100px;
}

#pdk-sub-users-table th:nth-child(5),
#pdk-sub-users-table td:nth-child(5) {
    width: 15%; /* Actions */
    min-width: 80px;
    text-align: center; /* Center the remove button */
}

/* Styling for the 'X' remove button (Dashicon) */
button.pdk-remove-sub-user {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    float: right; /* Keep float right for now to align in column */
    cursor: pointer;
    vertical-align: middle;
}

button.pdk-remove-sub-user .dashicons-trash {
    color: #666;
    font-size: 1.5em;
    line-height: 1;
}

button.pdk-remove-sub-user:hover .dashicons-trash {
    color: #000;
}

/* Ensure .button-link-inline also has these properties if it wasn't already for other contexts */
.button.button-link-inline {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove old details-related CSS (ensure these are gone) */
.pdk-sub-user-details { display: none !important; }
.pdk-toggle-details { display: none !important; }


.pdk-remove-lock {
    font-size: 0.9em;
    color: #666;
    display: block;
    margin-top: 5px;
}

/* Form Styling */
#pdk-add-sub-user-form {
    background-color: #fcfcfc;
    border: 1px solid #eee;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
#pdk-add-sub-user-section form p {
    padding-bottom: 0;
    margin-bottom: 0;
}

#pdk-add-sub-user-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

#pdk-add-sub-user-form input[type="text"],
#pdk-add-sub-user-form input[type="email"] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

#pdk-add-sub-user-form .form-row-first,
#pdk-add-sub-user-form .form-row-last {
    width: 49%;
    float: left;
    margin-right: 1%;
}

#pdk-add-sub-user-form .form-row-last {
    margin-right: 0;
}

#pdk-add-sub-user-form .form-row:after {
    content: "";
    display: table;
    clear: both;
}

#pdk-add-sub-user-form .button {
    margin-top: 10px;
}

.pdk-disclaimer {
    background-color: #f7f7f7;
    border-left: 4px solid #f0ad4e;
    padding: 15px;
    margin-top: 30px;
    font-size: 0.9em;
}
.pdk-disclaimer p {
    margin: 0;
}

/* WooCommerce messages overrides for our custom messages */
.woocommerce-message.woocommerce-success { border-top-color: #83b441; }
.woocommerce-message.woocommerce-error { border-top-color: #a00; }

/* Tooltip Styling */
.pdk-tooltip {
    background-color: #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9em;
    text-align: center;
    word-break: break-all; /* Allow long IDs to break */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: none;
    max-width: 250px;
    cursor: text;
    white-space: normal; /* Allow text to wrap naturally */
    line-height: 1.4em; /* Adjust line height for readability */
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    #pdk-add-sub-user-form .form-row-first,
    #pdk-add-sub-user-form .form-row-last {
        width: 100%;
        float: none;
        margin-right: 0;
    }
    .pdk-primary-details-line {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align to start */
    }
    .pdk-primary-details-line .pdk-status-icon-wrapper {
        margin-right: 0;
        margin-bottom: 5px; /* Space below icon when stacked */
    }
    .pdk-primary-details-line .pdk-primary-user-name {
        margin-right: 0;
        margin-bottom: 5px; /* Space below name when stacked */
    }
    .pdk-primary-subscription-summary {
        white-space: normal; /* Allow text to wrap on small screens */
        text-overflow: clip; /* No ellipsis when wrapping */
    }
}