/**
 * SSO Connector for JumpCloud - Admin Styles (v3.1)
 *
 * @version 1.0.9
 * @author Gemini
 * @reference Screenshot 2025-12-16 at 18.43.42.png, with toggle-able descriptions
 */

/* --- Root Variables from New Reference --- */
:root {
    --jc-primary-accent: #2563EB;
    --jc-bg-color: #FFFFFF;
    --jc-content-bg: #FFFFFF;
    --jc-border-color: #E5E7EB;
    --jc-input-bg: #F9FAFB;
    --jc-text-header: #111827;
    --jc-text-body: #374151;
    --jc-text-secondary: #6B7280;
    --jc-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --jc-radius: 6px;
    --jc-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --jc-success-color: #00C48C;
    --jc-error-color: #FF4757;
}

/* --- Base & Wrapper --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

body, #wpbody {
    background-color: var(--jc-bg-color);
}
.wrap.jc-sso-settings {
    font-family: var(--jc-font-family);
    max-width: 100%;
    color: var(--jc-text-body);
}

/* --- Main Container --- */
.jc-sso-settings form, .jc-section-card { /* Updated selector */
    /* border: 1px solid var(--jc-border-color); */
    border-radius: var(--jc-radius);
    background: var(--jc-content-bg);
    /* margin-top: 1.5rem; */
    /* box-shadow: var(--jc-shadow); */
    /* padding: 1.5rem; */ /* Add internal padding to the card */
}

/* Specific styling for elements inside jc-section-card */
.jc-section-card h2 {
    font-size: 16px; /* Slightly smaller than main page h2 */
    font-weight: 500;
    color: var(--jc-text-header);
    margin: 0 0 0.5rem 0; /* Adjust margin within card */
    padding: 0;
}
.jc-section-card p {
    font-size: 14px;
    color: var(--jc-text-secondary);
    margin: 0 0 1rem 0; /* Adjust margin within card */
    padding: 0;
}
.jc-section-card #jc-sp-metadata-table {
    margin-top: 1rem; /* Space after description */
}
.jc-section-card #jumpssco-test-result-container {
    margin-top: 1.5rem; /* Space after table */
}
.jc-section-card #jumpssco-test-result-container + p {
    margin-top: 1rem; /* Space below test results */
}
/* Original form table styling (keep outside jc-section-card specific overrides) */
.form-table {
    padding: 1rem 1.5rem;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* --- Header & Titles --- */
.jc-sso-header {
    border-bottom: 1px solid var(--jc-border-color);
    padding: 1.5rem 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}
.jc-sso-header img { width: 28px; height: 28px; }
.jc-sso-header h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--jc-text-header);
}
.jc-sso-settings > h2,
.jc-sso-settings form > h2 {
    font-size: 16px;
    font-weight: 500;
    margin: 2.5rem 0 0.5rem;
    padding: 0 1.5rem;
    border: none;
    color: var(--jc-text-header);
}
.jc-sso-settings > p,
.jc-sso-settings form > p:not(.submit) {
    font-size: 14px;
    color: var(--jc-text-secondary);
    margin: 0;
    padding: 0 1.5rem; /* Added horizontal padding */
}

/* --- Tabs --- */
.nav-tab-wrapper {
    padding: 0 !important;
    padding-top: 0 !important;
    border-bottom: 1px solid var(--jc-border-color);
    margin: 0;
}
.nav-tab {
    padding: 16px 0;
    margin-right: 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--jc-text-secondary);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
}
.nav-tab:hover {
    color: var(--jc-primary-accent);
}
.nav-tab-active, .nav-tab-active:hover {
    color: var(--jc-primary-accent);
    border-bottom-color: var(--jc-primary-accent);
    background: transparent;
}

/* --- Form Rows & Fields --- */
.form-table tr {
    display: block;
    padding: 1.5rem 0; /* Changed from 1.5rem 0 to 1.5rem for horizontal padding */
    border-bottom: 1px solid var(--jc-border-color);
}
.form-table tr:first-child { padding-top: 1rem; }
.form-table tr:last-child { border-bottom: none; padding-bottom: 1rem; }

.form-table th, .form-table td {
    display: block;
    width: 100%;
    padding: 0;
}
.form-table th {
    font-size: 14px;
    font-weight: 500;
    color: var(--jc-text-header);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
}

/* --- Inputs --- */
.form-table input[type="text"],
.form-table input[type="url"],
.form-table input[type="email"],
.form-table input[type="number"],
.form-table textarea {
    width: 100%;
    padding: 9px 12px;
    border-radius: var(--jc-radius);
    border: 1px solid #CFD8E1;
    background: var(--jc-bg-color);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    font-family: var(--jc-font-family);
    font-size: 14px;
    transition: all 0.2s ease;
}
.form-table input[type="text"]:focus,
.form-table input[type="url"]:focus,
.form-table input[type="email"]:focus,
.form-table input[type="number"]:focus,
.form-table textarea:focus {
    border-color: var(--jc-primary-accent);
    background: var(--jc-bg-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: none;
}
.form-table input[type="text"]::placeholder,
.form-table input[type="url"]::placeholder,
.form-table input[type="email"]::placeholder,
.form-table input[type="number"]::placeholder {
    color: #ccc !important;
}
.form-table textarea {
    height: 140px;
    font-family: monospace;
}

/* --- Description Toggle --- */
.jc-toggle-icon {
    cursor: pointer;
    display: inline-flex;
    margin-left: 8px;
    color: #9CA3AF;
}
.jc-toggle-icon .dashicons {
    font-size: 18px;
    transition: color 0.2s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.jc-toggle-icon:hover .dashicons {
    color: var(--jc-primary-accent);
}
.jc-toggle-icon.is-active .dashicons {
    transform: rotate(180deg);
    color: var(--jc-primary-accent);
}
.form-table td p.description {
    margin-top: 8px;
    padding: 12px;
    background-color: var(--jc-input-bg);
    border-radius: var(--jc-radius);
    font-size: 13px;
    line-height: 1.5;
    color: var(--jc-text-secondary);
    border: 1px solid var(--jc-border-color);
}

/* --- Metadata Table & Copy Button --- */
#jc-sp-metadata-table tr {
    padding: 1.5rem 0; /* Remove horizontal padding for metadata rows */
}
#jc-sp-metadata-table td { display: flex; align-items: center; gap: 12px; }
#jc-sp-metadata-table td code {
    flex-grow: 1;
    background: var(--jc-input-bg);
    padding: 8px 12px;
    border-radius: var(--jc-radius);
    font-size: 13px;
    border: 1px solid var(--jc-border-color);
    color: var(--jc-text-body);
    word-break: break-all;
}
.jc-copy-button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #9CA3AF;
    padding: 0;
    transition: color 0.2s;
}
.jc-copy-button .dashicons { font-size: 18px; }
.jc-copy-button:hover { color: var(--jc-primary-accent); }
.jc-copy-button .dashicons-yes-alt { color: var(--jc-success-color, #22c55e); }


/* --- Alerts & Buttons --- */
#test-jumpcloud-sso-config { margin-top: 1rem; }
#jumpssco-test-result-container { margin: 1.5rem 0 0; padding: 0; }
#jumpssco-test-result-container:not(:empty) > div { padding: 12px 16px; border-radius: var(--jc-radius); border: 1px solid; font-weight: 500; font-size: 14px; }
#jumpssco-test-result-container .notice-success { border-color: #A7F3D0; background-color: #F0FDF4; color: #14532D; }
#jumpssco-test-result-container .notice-error { border-color: #FECDD3; background-color: #FFF1F2; color: #881337; }

/* --- Footer Area (Submit, Test) --- */
form > p.submit, .wrap.jc-sso-settings > #jumpssco-test-result-container + p {
    padding: 1.5rem 0;
    margin: 0;
    border-top: 1px solid var(--jc-border-color);
}
.submit .button-primary, #test-jumpcloud-sso-config {
    background: var(--jc-primary-accent) !important;
    border: 1px solid var(--jc-primary-accent) !important;
    color: #fff !important;
    padding: 9px 18px !important;
    height: auto !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: var(--jc-radius) !important;
    box-shadow: var(--jc-shadow) !important;
}
.submit .button-primary:hover, #test-jumpcloud-sso-config:hover {
    background: #1D4ED8 !important;
    border-color: #1D4ED8 !important;
}
.spinner { vertical-align: middle; margin-left: 8px; }

/* --- Final cleanup --- */
.wrap.jc-sso-settings > a[href*="buymeacoffee"] {
    display: inline-block;
    padding: 1.5rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}
hr { display: none; }
h1, h2 { color: var(--jc-text-header); }
form > .form-table { margin-top: 0; }
#jc-sp-metadata-table { margin-top: 0; padding-top: 1.5rem }
.form-table tr.premium-field th, .form-table tr.premium-field td { opacity: 0.6; }