/* ------------------------------------------------------------------
 *  General
 * ----------------------------------------------------------------*/

.sfco-card {
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
}

.sfco-card h2 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 16px;
}

.sfco-card h3 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 14px;
}

/* ------------------------------------------------------------------
 *  Status badges
 * ----------------------------------------------------------------*/

.sfco-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.sfco-status-new { background: #2271b1; color: #fff; }
.sfco-status-contacted { background: #f0b849; color: #000; }
.sfco-status-quoted { background: #9b59b6; color: #fff; }
.sfco-status-won { background: #00a32a; color: #fff; }
.sfco-status-lost { background: #d63638; color: #fff; }
.sfco-status-active { background: #00a32a; color: #fff; }
.sfco-status-draft { background: #999; color: #fff; }

/* Timeline badges */
.timeline-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.timeline-urgent { background: #d63638; color: #fff; }
.timeline-soon { background: #f0b849; color: #000; }
.timeline-normal { background: #00a32a; color: #fff; }

/* ------------------------------------------------------------------
 *  Form Editor Layout
 * ----------------------------------------------------------------*/

#sfco-editor-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

#sfco-editor-main {
    flex: 1;
    min-width: 0;
}

#sfco-editor-sidebar {
    width: 340px;
    flex-shrink: 0;
}

@media (max-width: 960px) {
    #sfco-editor-layout {
        flex-direction: column;
    }
    #sfco-editor-sidebar {
        width: 100%;
    }
}

/* ------------------------------------------------------------------
 *  Field List (editor)
 * ----------------------------------------------------------------*/

.sfco-field-item {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fff;
    transition: opacity 0.2s;
}

.sfco-field-item.sfco-field-disabled {
    opacity: 0.5;
}

.sfco-field-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    gap: 10px;
    cursor: default;
}

.sfco-drag-handle {
    cursor: grab;
    color: #999;
}

.sfco-field-label-display {
    flex: 1;
    font-weight: 600;
    font-size: 14px;
}

.sfco-field-type-badge {
    background: #f0f0f1;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    color: #666;
}

.sfco-field-required-badge {
    background: #fce4e4;
    color: #d63638;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
}

.sfco-field-toggle {
    margin-left: 4px;
}

.sfco-expand-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    padding: 0;
    font-size: 18px;
}

.sfco-expand-btn:hover {
    color: #2271b1;
}

.sfco-field-details {
    padding: 12px 16px 16px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.sfco-field-details p {
    margin: 0 0 10px;
}

.sfco-field-details label {
    font-weight: 500;
    font-size: 13px;
}

/* Toggle switch */
.sfco-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}

.sfco-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sfco-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 20px;
}

.sfco-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: 0.3s;
    border-radius: 50%;
}

.sfco-switch input:checked + .sfco-slider {
    background-color: #2271b1;
}

.sfco-switch input:checked + .sfco-slider:before {
    transform: translateX(16px);
}

/* ------------------------------------------------------------------
 *  Options editor (for select fields)
 * ----------------------------------------------------------------*/

.sfco-options-editor {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.sfco-options-editor > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
}

.sfco-option-row {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}

.sfco-option-row input {
    flex: 1;
}

.sfco-option-row .button {
    padding: 0 8px;
    line-height: 28px;
    color: #b32d2e;
}

/* ------------------------------------------------------------------
 *  Estimate rates
 * ----------------------------------------------------------------*/

.sfco-rate-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.sfco-rate-row input[type="text"] {
    flex: 2;
}

.sfco-rate-row input[type="number"] {
    flex: 1;
}

.sfco-rate-row .button {
    padding: 0 8px;
    line-height: 28px;
    color: #b32d2e;
}

/* ------------------------------------------------------------------
 *  Leads toolbar
 * ----------------------------------------------------------------*/

.sfco-leads-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 0;
    flex-wrap: wrap;
    gap: 10px;
}

.sfco-filters a {
    text-decoration: none;
    padding: 4px 2px;
}

.sfco-filters a.current {
    font-weight: 700;
    color: #1d2327;
}

.sfco-search {
    display: flex;
    gap: 6px;
}

.sfco-search input[type="search"] {
    width: 240px;
    padding: 4px 8px;
}

.sfco-lead-count {
    color: #999;
    font-size: 14px;
}

/* ------------------------------------------------------------------
 *  Lead Detail Layout
 * ----------------------------------------------------------------*/

#sfco-lead-detail-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

#sfco-lead-main {
    flex: 1;
    min-width: 0;
}

#sfco-lead-sidebar {
    width: 300px;
    flex-shrink: 0;
}

@media (max-width: 960px) {
    #sfco-lead-detail-layout {
        flex-direction: column;
    }
    #sfco-lead-sidebar {
        width: 100%;
    }
}

.sfco-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.sfco-detail-table th {
    text-align: left;
    padding: 8px 12px 8px 0;
    width: 140px;
    color: #666;
    font-weight: 500;
    vertical-align: top;
    border-bottom: 1px solid #f0f0f1;
}

.sfco-detail-table td {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f1;
}

#sfco-lead-status {
    width: 100%;
    padding: 6px 10px;
    font-size: 14px;
    margin-bottom: 8px;
}

#sfco-status-message {
    min-height: 20px;
}

/* ------------------------------------------------------------------
 *  Photo grid
 * ----------------------------------------------------------------*/

.sfco-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.sfco-photo-grid img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.sfco-photo-grid a {
    display: block;
}

/* ------------------------------------------------------------------
 *  Priority badges
 * ----------------------------------------------------------------*/

.sfco-priority-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sfco-priority-hot {
    background: #d63638;
    color: #fff;
}

.sfco-priority-warm {
    background: #f0b849;
    color: #000;
}

.sfco-priority-medium {
    background: #2271b1;
    color: #fff;
}

.sfco-priority-low {
    background: #e0e0e0;
    color: #666;
}

.sfco-priority-hot-row {
    border-left: 3px solid #d63638;
}

.sfco-priority-warm-row {
    border-left: 3px solid #f0b849;
}

.sfco-priority-reason {
    color: #888;
    font-size: 11px;
}

/* ------------------------------------------------------------------
 *  Table tweaks
 * ----------------------------------------------------------------*/

.wp-list-table td a {
    text-decoration: none;
}

.wp-list-table td a:hover {
    text-decoration: underline;
}

.sfco-col-id {
    width: 50px;
}

.sfco-delete-link {
    color: #b32d2e;
}

.sfco-save-btn {
    width: 100%;
}

.sfco-delete-lead-btn {
    color: #b32d2e;
    width: 100%;
}

/* ------------------------------------------------------------------
 *  Settings & PRO Upgrade Page
 * ----------------------------------------------------------------*/

.sfco-pro-banner {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    border-radius: 12px;
    padding: 40px;
    margin: 20px 0 30px;
    color: #fff;
}

.sfco-pro-banner h2 {
    margin: 0 0 8px;
    font-size: 28px;
    color: #fff;
}

.sfco-pro-banner p {
    margin: 0 0 20px;
    font-size: 16px;
    opacity: 0.9;
    max-width: 600px;
}

.sfco-pro-cta-btn {
    background: #f97316;
    border-color: #ea580c;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 28px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    text-decoration: none;
}

.sfco-pro-cta-btn:hover,
.sfco-pro-cta-btn:focus {
    background: #ea580c;
    border-color: #c2410c;
    color: #fff;
}

.sfco-pro-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .sfco-pro-grid {
        grid-template-columns: 1fr;
    }
}

.sfco-pro-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

.sfco-pro-locked {
    border-color: #e0e0e0;
}

.sfco-pro-locked .sfco-pro-teaser-fields {
    opacity: 0.4;
    pointer-events: none;
    filter: blur(1px);
}

.sfco-pro-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.sfco-pro-card-header h3 {
    margin: 0;
    font-size: 16px;
    flex: 1;
}

.sfco-pro-icon {
    color: #2563eb;
    font-size: 22px;
}

.sfco-pro-badge {
    background: #2563eb;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sfco-pro-card > p {
    color: #666;
    font-size: 13px;
    margin: 0 0 16px;
    line-height: 1.5;
}

.sfco-pro-teaser-fields {
    margin-bottom: 12px;
}

.sfco-pro-teaser-row {
    margin-bottom: 10px;
}

.sfco-pro-teaser-row label {
    display: block;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 4px;
    color: #444;
}

.sfco-pro-teaser-row select,
.sfco-pro-teaser-row input[type="text"],
.sfco-pro-teaser-row input[type="url"] {
    width: 100%;
    padding: 6px 8px;
}

.sfco-pro-teaser-row input[type="color"] {
    width: 50px;
    height: 30px;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.sfco-pro-card-overlay {
    text-align: center;
    padding-top: 8px;
}

.sfco-pro-card-overlay .button {
    background: #2563eb;
    border-color: #1d4ed8;
    color: #fff;
    font-weight: 600;
    padding: 6px 20px;
}

.sfco-pro-card-overlay .button:hover {
    background: #1d4ed8;
    color: #fff;
}

.sfco-pro-bottom-cta {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    margin-bottom: 20px;
}

.sfco-pro-bottom-cta h3 {
    margin: 0 0 8px;
    font-size: 22px;
}

.sfco-pro-bottom-cta p {
    margin: 0 0 20px;
    color: #666;
    font-size: 15px;
}

/* ------------------------------------------------------------------
 *  Email Settings Page
 * ----------------------------------------------------------------*/

.sfco-email-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.sfco-email-main {
    flex: 1;
    min-width: 0;
}

.sfco-email-sidebar {
    width: 300px;
    flex-shrink: 0;
}

@media (max-width: 960px) {
    .sfco-email-layout {
        flex-direction: column;
    }
    .sfco-email-sidebar {
        width: 100%;
    }
}

.sfco-template-tags {
    background: #f0f0f1;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 12px;
    line-height: 2;
}

.sfco-template-tags code {
    background: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    margin: 2px;
    display: inline-block;
    font-size: 12px;
}

.sfco-template-tags code:hover {
    background: #2271b1;
    color: #fff;
}

#sfco_email_template {
    font-family: monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* ------------------------------------------------------------------
 *  Help Page
 * ----------------------------------------------------------------*/

.sfco-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 860px) {
    .sfco-help-grid {
        grid-template-columns: 1fr;
    }
}

.sfco-help-steps {
    margin: 0;
    padding-left: 20px;
}

.sfco-help-steps li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.sfco-help-list {
    margin: 0;
    padding-left: 0;
    list-style: none;
}

.sfco-help-list li {
    margin-bottom: 8px;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}

.sfco-help-list li:before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: #2271b1;
    font-weight: bold;
}

.sfco-help-support {
    background: #f0f6fc;
    border-color: #2271b1;
}