/**
 * Admin dashboard styles for VPN Guard plugin.
 *
 * @package   vpn-guard
 * @license   GPL-2.0-or-later
 */

/* === General Admin Container === */
.vpngd_admin { /* Prefixed */
  background-color: #fff;
  padding: 24px;
  max-width: 1200px;
  margin-top: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* === Tabs === */
.vpngd_admin .nav-tab-wrapper { /* Prefixed parent */
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  border-bottom: 1px solid #ccd0d4;
  margin-bottom: 20px;
  position: relative;
  padding-left: 0;
}

.vpngd_admin .nav-tab { /* Prefixed parent */
  font-size: 14px;
  padding: 9px 15px;
  line-height: 1.4em;
  border: 1px solid #ccd0d4;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: #f0f0f0;
  color: #50575e;
  margin-left: 0;
  margin-bottom: 0;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}

.vpngd_admin .nav-tab:hover { /* Prefixed parent */
  background: #f5f5f5;
  color: #2271b1;
}

.vpngd_admin .nav-tab-active, /* Prefixed parent */
.vpngd_admin .nav-tab-active:hover { /* Prefixed parent */
  background: #ffffff;
  color: #1d2327;
  font-weight: 600;
  border-color: #ccd0d4;
  border-bottom-color: #ffffff;
  margin-bottom: -1px;
  z-index: 1;
}

/* === Tab Content === */
.vpngd_admin .vpn-tab-content { /* Scoped to prefixed parent, uses generic WP class */
  padding: 20px;
  border: 1px solid #ccd0d4;
  border-top: none;
  background: #ffffff;
  border-radius: 0 0 4px 4px;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
}
/* Visibility of .vpn-tab-content.vpn-tab-active is controlled by JS/PHP */


/* === Headings === */
.vpngd_admin h1 { /* Prefixed */
  /* WP handles main page title styling */
}
.vpngd_admin h2 { /* Prefixed */
  font-size: 18px;
  margin-top: 0;
  margin-bottom: 20px;
  color: #222;
}

/* === Table for Logs === */
.vpngd_admin table.widefat { /* Prefixed */
  background: #fff;
  border: 1px solid #ccd0d4;
  border-radius: 6px;
  overflow: hidden; /* Ensures border-radius is effective on child elements like th */
}

.vpngd_admin table.widefat th, /* Prefixed */
.vpngd_admin table.widefat td { /* Prefixed */
  padding: 10px;
  font-size: 14px;
}

.vpngd_admin table.widefat th { /* Prefixed */
  background: #f9f9f9;
  color: #333;
  font-weight: 600;
}

/* Limit URL cell width in logs table - specific prefixed table class .vpngd_logs-table */
.vpngd_admin table.vpngd_logs-table td:nth-child(4) { /* Prefixed table class */
  max-width: 250px;
  word-break: break-all;
}


/* === Form Fields === */
.vpngd_admin input[type="text"], /* Prefixed */
.vpngd_admin input[type="search"], /* Prefixed */
.vpngd_admin input[type="password"], /* Prefixed */
.vpngd_admin input[type="number"], /* Prefixed */
.vpngd_admin textarea, /* Prefixed */
.vpngd_admin select { /* Prefixed */
  max-width: 480px;
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #8c8f94;
  border-radius: 3px;
  background: #fff;
  margin-bottom: 10px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
}

.vpngd_admin textarea { /* Prefixed */
  resize: vertical;
  min-height: 80px;
}

/* === Checkboxes and Role List === */
.vpngd_admin fieldset label, /* Prefixed */
.vpngd_admin table.form-table label { /* Prefixed */
  font-size: 14px;
  margin-bottom: 5px;
}
.vpngd_admin input[type="checkbox"] + label { /* Prefixed */
    margin-left: 5px;
}


/* === Descriptions === */
.vpngd_admin .description, /* Prefixed */
.vpngd_admin p.description { /* Prefixed */
  font-size: 13px;
  color: #50575e;
  font-style: italic;
  margin-top: 4px;
}

/* === Buttons === */
.vpngd_admin .button-primary { /* Prefixed */
  /* Standard WP styles usually suffice unless specific overrides needed */
}
.vpngd_admin .button.button-link-delete, /* Prefixed */
.vpngd_admin .button.delete { /* Prefixed */
  color: #a00;
  border-color: #a00;
}
.vpngd_admin .button.button-link-delete:hover, /* Prefixed */
.vpngd_admin .button.delete:hover { /* Prefixed */
  color: #cc0000;
  border-color: #cc0000;
}


/* === Table Word Wrapping (General for admin tables) === */
.vpngd_admin table { /* Prefixed */
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
}

.vpngd_admin table td, /* Prefixed */
.vpngd_admin table th { /* Prefixed */
  word-break: break-word; /* Fallback for older browsers */
  overflow-wrap: break-word; /* Preferred property */
}

.vpngd_admin td a { /* Prefixed */
  max-width: 100%; /* Ensure links don't overflow their cells */
  word-break: break-all; /* For long URLs without spaces */
  overflow-wrap: break-word;
}

/* === Admin Status Notice / Badge (shown via admin_notices) === */
.notice.vpngd_admin-status-badge { /* Prefixed */
  /* border-left-color is set dynamically in PHP based on notice type. */
  /* Other WP .notice styles apply. */
}
.vpngd_admin-status-badge p { /* Prefixed */
    margin: 1px;
    font-weight: 500;
}
.vpngd_admin-status-badge .dashicons { /* Prefixed */
    margin-right: 5px;

margin-top: 5px;
    margin-bottom:2px;
    vertical-align: middle;
}


/* --- Targeting Tab Styles --- */
/* IDs are prefixed in PHP, e.g., #vpngd_targeting_mode_section */
.vpngd_admin #vpngd_targeting_mode_section + table.form-table,
.vpngd_admin #vpngd_targeting_rules_section + table.form-table {
    margin-top: 0;
}

.vpngd_admin #vpngd_targeting_rules_section {
    margin-top: 30px;
}
.vpngd_admin #vpngd_targeting_rules_section + table.form-table {
    margin-top: 1em; /* Consistent with WP's general spacing */
}

/* Prefixed ID from PHP render function */
.vpngd_admin #vpngd_targeting-rules-description { /* This uses a hyphen as it's a static ID from PHP */
    margin-bottom: 15px;
    font-style: italic;
    color: #50575e;
}

/* Rules List Container - Prefixed IDs/classes from PHP/JS */
.vpngd_admin #vpngd_rules-list { /* This uses a hyphen as it's a static ID from PHP */
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #ccd0d4;
    background-color: #fff;
    border-radius: 3px;
    max-width: 700px;
}

.vpngd_admin #vpngd_no-rules-message { /* This uses a hyphen as it's a static ID from PHP */
    padding: 20px;
    text-align: center;
    color: #555;
    font-style: italic;
    background-color: #f9f9f9;
    border-top: 1px solid #e0e0e0; /* Added for visual separation if list was previously populated */
}

/* Individual Rule Item Styling - Classes from JS template now use underscore */
.vpngd_admin .vpngd_rule-item {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fdfdfd; /* Slightly off-white for differentiation */
}
.vpngd_admin .vpngd_rule-item:last-child {
    border-bottom: none;
}
.vpngd_admin .vpngd_rule-item table.form-table {
    margin-top: 0;
    margin-bottom: 5px;
    width: 100%;
}
.vpngd_admin .vpngd_rule-item table.form-table th,
.vpngd_admin .vpngd_rule-item table.form-table td {
    padding: 10px 10px 10px 0; /* Adjusted padding for consistency */
    vertical-align: top;
}
.vpngd_admin .vpngd_rule-item table.form-table th {
    width: 140px;
    padding-right: 20px;
}

/* Rule Type Select Dropdown - Class from JS template now uses underscore */
.vpngd_admin .vpngd_rule-type-select {
    min-width: 280px;
    margin-bottom: 5px; /* Space if value input appears below */
}

/* Rule Value Input Fields - Classes from JS template now use underscore */
.vpngd_admin .vpngd_rule-value-input-cell fieldset, /* Targets fieldset generated by JS */
.vpngd_admin .vpngd_rule-value-input { /* Targets text input generated by JS */
    padding-top: 5px; /* Align with select if label is on top */
}
.vpngd_admin .vpngd_rule-value-input-cell fieldset label {
    margin-right: 15px;
    margin-bottom: 8px;
    font-weight: normal;
    display: block; /* For checkbox groups to stack nicely */
}
.vpngd_admin .vpngd_rule-value-input-cell fieldset label input[type="checkbox"] {
    margin-right: 5px;
}

/* For "No value needed" text - Class from JS now uses underscore */
.vpngd_admin .vpngd_rule-value-description {
    font-style: italic;
    color: #777;
    margin-top: 5px; /* Consistent with other descriptions */
    display: block;
}

/* Remove Rule Button - Class from JS template now uses underscore */
.vpngd_admin .vpngd_remove-rule {
    color: #d63638 !important; /* Use !important sparingly, but WP buttons can be aggressive */
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    line-height: 1.5; /* Default WP button line height */
    text-decoration: underline;
    float: right;
    margin-top: 10px; /* Align with bottom of rule item if needed */
    cursor: pointer;
}
.vpngd_admin .vpngd_remove-rule:hover {
    color: #a00 !important; /* Darker red on hover */
}
.vpngd_admin .vpngd_rule-item::after { /* Clearfix for floated remove button */
    content: "";
    clear: both;
    display: table;
}

/* Add New Rule Button - Prefixed ID from PHP */
.vpngd_admin #vpngd_add-rule-button { /* This uses a hyphen as it's a static ID from PHP */
    margin-top: 20px;
    margin-bottom: 10px;
}

/* === Responsive Tab Styles === */
@media screen and (max-width: 782px) {
    .vpngd_admin .nav-tab-wrapper { /* Prefixed */
        flex-direction: column;
        border-bottom: none;
        gap: 2px;
    }
    .vpngd_admin .nav-tab { /* Prefixed */
        margin-right: 0;
        margin-bottom: 0; /* Reset for stacked tabs */
        border-radius: 4px; /* Full radius when stacked */
        border-bottom: 1px solid #ccd0d4; /* Add bottom border for stacked tabs */
        width: 100%;
        box-sizing: border-box;
    }
    .vpngd_admin .nav-tab-active, /* Prefixed */
    .vpngd_admin .nav-tab-active:hover { /* Prefixed */
        border-bottom-color: #ccd0d4; /* Keep consistent when active and stacked */
        /* margin-bottom still -1px if it needs to overlap something, or 0 if not */
    }
    .vpngd_admin .vpn-tab-content { /* Prefixed */
        border-top: 1px solid #ccd0d4; /* Ensure top border when tabs stack */
        border-radius: 4px; /* Full radius if tabs are above */
        margin-top: 10px; /* Space from stacked tabs */
    }
}

@media screen and (max-width: 480px) {
    .vpngd_admin .nav-tab { /* Prefixed */
        padding: 10px 15px; /* Slightly adjust padding for smaller screens */
        font-size: 13px;
    }
    .vpngd_admin .nav-tab .dashicons { /* Prefixed */
        /* Adjust Dashicon size or alignment if needed */
    }
    .vpngd_admin { /* Prefixed */
        padding: 15px; /* Reduce padding on very small screens */
    }
    .vpngd_admin .vpn-tab-content { /* Prefixed */
        padding: 15px;
    }
}

/* --- Nudge Styles (Review & Footer Badge) --- */
/* These use WP .notice classes, own classes for specificity. Hyphens are fine for these static BEM-like classes. */
.notice.vpngd_review-nudge, /* Prefixed */
.notice.vpngd_footer-badge-nudge { /* Prefixed */
    /* Base WP .notice styles apply. */
}

.vpngd_footer-badge-nudge p { /* Prefixed */
    margin-bottom: 12px;
    line-height: 1.6;
}
.vpngd_footer-badge-nudge .vpngd_notice-heading { /* Prefixed */
    font-size: 1.15em;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.vpngd_footer-badge-nudge .vpngd_notice-icon { /* Prefixed */
    margin-right: 8px;
    font-size: 1.3em;
}
.vpngd_footer-badge-nudge .vpngd_highlight-text { /* Prefixed */
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
}
.vpngd_footer-badge-nudge .vpngd_highlight-text .dashicons, /* Prefixed */
.vpngd_footer-badge-nudge .vpngd_highlight-text .vpngd_emoji-icon { /* Prefixed */
    margin-right: 6px;
    color: #4CAF50;
    font-size: 1.2em;
}
.vpngd_footer-badge-nudge .vpngd_notice-actions { /* Prefixed */
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}
.vpngd_footer-badge-nudge .vpngd_notice-actions .button { /* Prefixed */
    margin-left: 0 !important; /* Override WP defaults if necessary */
    margin-right: 0 !important;
}
.vpngd_footer-badge-nudge .vpngd_notice-actions .vpngd_action-icon { /* Prefixed */
    margin-right: 4px;
    font-size: 1.1em;
    vertical-align: middle;
    margin-top: -2px; /* Fine-tune alignment */
}
.vpngd_footer-badge-nudge .vpngd_skip-separator { /* Prefixed */
    color: #a0a5aa;
    margin-left: 5px;
    margin-right: 5px;
}

@media screen and (max-width: 782px) {
    .vpngd_footer-badge-nudge .vpngd_notice-actions { /* Prefixed */
        flex-direction: column;
        align-items: flex-start;
    }
    .vpngd_footer-badge-nudge .vpngd_notice-actions .button { /* Prefixed */
        margin-bottom: 8px; /* Space between stacked buttons */
    }
    .vpngd_footer-badge-nudge .vpngd_skip-separator { /* Prefixed */
        display: none; /* Hide separator when actions stack */
    }
}

/* --- Styles moved from inline in class-vpn-admin.php (render_preview_tab_content) --- */
/* Scoped within .vpngd_admin and .vpngd_preview-tab-content. Hyphens are fine for these static classes. */
.vpngd_admin .vpngd_preview-tab-content section h2 { /* Prefixed parent and class */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.3em;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}
.vpngd_admin .vpngd_preview-tab-content p,
.vpngd_admin .vpngd_preview-tab-content ul,
.vpngd_admin .vpngd_preview-tab-content ol {
    margin-bottom: 15px;
    line-height: 1.6;
}
.vpngd_admin .vpngd_preview-tab-content .button-large {
    padding: 10px 20px;
    height: auto;
    line-height: normal;
}
.vpngd_admin .vpngd_preview-tab-content .description {
    color: #555;
    font-style: italic;
}

/* --- Specific styles for logs table elements --- */
/* Hyphens are fine for these static classes. */
.vpngd_admin .vpngd_log-search { /* Prefixed class */
    /* Add specific styles if needed, beyond default form field styles */
}
.vpngd_admin .vpngd_log-actions button,
.vpngd_admin .vpngd_log-actions .spinner { /* Prefixed class */
    /* Add specific styles if needed */
}
.vpngd_admin .vpngd_whitelisted-text { /* For whitelisted text in logs */
    color: #28a745;
    font-weight: bold;
}
.vpngd_admin .vpngd_whitelist-form { /* For the small whitelist form in logs */
    display: inline; /* Keep form on one line */
}

/* --- Specific styles for feedback form elements --- */
/* Hyphens are fine for these static classes/IDs. */
.vpngd_admin .vpngd_form-wrap { /* Prefixed class */
    padding:20px;
    max-width: 650px;
}
.vpngd_admin #vpngd_feedback-form label { /* Prefixed form ID */
    font-weight: bold;
    display:block;
    margin-bottom: 5px;
}
.vpngd_admin #vpngd_feedback_status { /* Prefixed status ID */
    margin-left: 15px;
    font-weight: 500;
}
/* In vpngd-admin.css */
.vpngd_admin .form-table td fieldset label { /* Targets labels within fieldsets in your admin tables */
    margin-right: 15px !important;  /* Adjust this value as you like for spacing between days */
    display: inline-block; /* Ensures labels behave well together on the same line */
    margin-bottom: 5px;    /* Adds a little space below, good if they wrap on small screens */
}
/* --- Footer badge container on front-end (default styles) --- */
/* Hyphens are fine for these front-end classes if defined this way in PHP. */
.vpngd_footer-badge-container {
    text-align:center;
    font-size:11px;
    opacity:0.7;
    margin:25px 0;
    clear:both;
}
.vpngd_footer-badge-container a {
    color: inherit;
    text-decoration: none;
}
.vpngd_footer-badge-container a:hover {
    text-decoration: underline;
}

/* Styles for Targeting Mode radio buttons */
.vpngd_radio-label {
    display: block !important; /* Use !important to ensure it overrides potential inline or other styles */
    margin-bottom: 8px; /* Give a bit more space between them */
    padding-top: 2px; /* Small top padding for visual comfort */
    padding-bottom: 2px; /* Small bottom padding */
}

/* Optional: To make sure the radio button and text within the label are aligned vertically */
.vpngd_radio-label input[type="radio"] {
    vertical-align: middle;
    margin-right: 5px; /* Space between radio button and its text */
    margin-top: -2px; /* Adjust for perfect vertical alignment if needed */
}

/* Styles for Scheduler hour input fields */
.vpngd_hour-input {
    width: 60px;
}
.vpngd_hour-input-from {
    margin-right: 15px;
}

/* Styles for API Key field and validation button */
.vpngd_api-key-input {
    /* Use 'calc' to make it responsive while ensuring space for the button/spinner */
    width: calc(100% - 130px);
    max-width: 350px; /* Prevent it from getting too wide on large screens */
    margin-right: 10px; /* Space between input and button */
    vertical-align: middle; /* Align with button */
}
.vpngd_api-key-validate-button {
    vertical-align: middle; /* Align with input */
}
.vpngd_api-key-status-text {
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block; /* Makes it sit nicely inline */
}

/* General styles for dashicons, assuming your AdminBadge is also using them */
/* These ensure consistency across all admin notices and icons */
.vpngd_admin-status-badge .dashicons-shield-alt.vpngd_shield-icon {
    color: #46b450; /* Green for success/protected status */
}
.vpngd_admin-status-badge .dashicons-warning.vpngd_warning-icon {
    color: #ffb900; /* Yellow/Orange for warning status */
}
.vpngd_admin-status-badge .dashicons-info-outline.vpngd_info-icon {
    color: #0073aa; /* Blue for informational status */
}
.vpngd_admin-status-badge .dashicons {
    vertical-align: middle;
    margin-right: 5px;
}

/* Optional: Spinner for AJAX actions (if you haven't already put this elsewhere) */
.rotating-spinner {
    animation: vpngd-spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

@keyframes vpngd-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Specific styling for rule items in targeting (from vpngd-targeting-admin.js review) */
/* This ensures table headers within your dynamic rule items have the correct width */
.vpngd_rule-item .form-table th {
    width: 120px !important;
}

/* Specific styling for rule value description (from vpngd-targeting-admin.js review) */
.vpngd_rule-value-description {
    font-style: italic;
    color: #666;
}

/* Styles for Allowed User Roles checkboxes */
.vpngd_role-checkbox-label {
    margin-right: 15px; /* Spacing between checkboxes */
    display: inline-block; /* Allows them to sit side-by-side or wrap */
    margin-bottom: 5px; /* Adds vertical space if they wrap */
}

/* Styles for the Whitelist IP button in the Logs table */
.vpngd_whitelist-ip-button {
    /* Adjust these styles as needed to match your desired appearance */
    min-width: 90px; /* Give it a consistent width */
    text-align: center;
    /* Example: Make it green to indicate positive action */
    background: #28a744; /* Green */
    border-color: #239b3d;
    color: #fff;
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
    text-shadow: 0 -1px 1px rgba(0,0,0,.2);
    /* Ensure WP's small button styles are respected */
}
.vpngd_whitelist-ip-button:hover,
.vpngd_whitelist-ip-button:focus {
    background: #239b3d;
    border-color: #1e8733;
    color: #fff;
}