/* ══════════════════════════════════════════════════════
   Career Compass Kenya — Main Stylesheet
   Primary colour: Green (#16a34a / #059669)
   ══════════════════════════════════════════════════════ */

/* ── ROOT / RESET ─────────────────────────────────────── */
:root {
    --cck-green-50:  #f0fdf4;
    --cck-green-100: #dcfce7;
    --cck-green-200: #bbf7d0;
    --cck-green-400: #4ade80;
    --cck-green-500: #22c55e;
    --cck-green-600: #16a34a;
    --cck-green-700: #15803d;
    --cck-green-800: #166534;
    --cck-blue-50:   #eff6ff;
    --cck-blue-600:  #2563eb;
    --cck-gray-50:   #f9fafb;
    --cck-gray-100:  #f3f4f6;
    --cck-gray-200:  #e5e7eb;
    --cck-gray-400:  #9ca3af;
    --cck-gray-600:  #4b5563;
    --cck-gray-800:  #1f2937;
    --cck-radius:    12px;
    --cck-shadow:    0 4px 16px rgba(0,0,0,.08);
    --cck-shadow-lg: 0 8px 32px rgba(0,0,0,.15);
}

.career-compass-container {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-sizing:  border-box;
    min-height:  400px;
}

.career-compass-container *,
.career-compass-container *::before,
.career-compass-container *::after {
    box-sizing: inherit;
}

/* Override WordPress theme conflicts */
.career-compass-container a {
    color: var(--cck-green-600);
}

.career-compass-container button:focus {
    outline: 2px solid var(--cck-green-500);
    outline-offset: 2px;
}

/* ── ADMIN STYLES ─────────────────────────────────────── */
.cck-admin-wrap {
    max-width: 900px;
    margin:    0;
    padding:   20px;
    font-family: 'Segoe UI', sans-serif;
}

/* Admin Header */
.cck-admin-header {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     24px 28px;
    background:  linear-gradient(135deg, #15803d 0%, #16a34a 50%, #22c55e 100%);
    color:       #fff;
    border-radius: var(--cck-radius);
    margin-bottom: 24px;
    box-shadow:  var(--cck-shadow-lg);
}

.cck-admin-header h1 {
    margin:    0 0 4px;
    font-size: 24px;
    color:     #fff;
}

.cck-admin-header p {
    margin:    0;
    opacity:   0.88;
    font-size: 14px;
}

.cck-admin-logo {
    font-size:   52px;
    line-height: 1;
    flex-shrink: 0;
}

/* Stats grid */
.cck-stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:                   16px;
    margin-bottom:         24px;
}

.cck-stat-card {
    background:    #fff;
    border-radius: var(--cck-radius);
    padding:       20px;
    box-shadow:    var(--cck-shadow);
    text-align:    center;
    border-top:    4px solid var(--cck-green-500);
    transition:    transform .2s;
}

.cck-stat-card:hover {
    transform: translateY(-2px);
}

.cck-stat-card--green {
    border-top-color: var(--cck-green-600);
    background:       var(--cck-green-50);
}

.cck-stat-icon  { font-size: 32px; margin-bottom: 8px; }
.cck-stat-value { font-size: 24px; font-weight: 800; color: var(--cck-green-700); margin-bottom: 4px; }
.cck-stat-label { font-size: 12px; color: var(--cck-gray-600); font-weight: 500; }

/* Cards */
.cck-card {
    background:    #fff;
    border-radius: var(--cck-radius);
    padding:       24px;
    box-shadow:    var(--cck-shadow);
    margin-bottom: 20px;
}

.cck-card--inner {
    background:    var(--cck-gray-50);
    border:        1px solid var(--cck-gray-200);
    box-shadow:    none;
    margin-top:    16px;
}

.cck-card h2 {
    margin-top: 0;
    color:      var(--cck-green-700);
    font-size:  18px;
}

/* Tab navigation */
.cck-tab-nav {
    display:       flex;
    gap:           4px;
    margin-bottom: 0;
    border-bottom: 2px solid var(--cck-gray-200);
    padding-bottom: 0;
    margin-bottom: 20px;
    overflow-x:    auto;
}

.cck-tab-link {
    padding:       10px 18px;
    text-decoration: none;
    font-weight:   600;
    font-size:     14px;
    color:         var(--cck-gray-600);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space:   nowrap;
    transition:    all .15s;
    border-radius: 8px 8px 0 0;
}

.cck-tab-link:hover {
    color:      var(--cck-green-600);
    background: var(--cck-green-50);
}

.cck-tab-link--active {
    color:        var(--cck-green-700);
    border-bottom-color: var(--cck-green-600);
    background:   var(--cck-green-50);
}

/* Info boxes */
.cck-info-box {
    background:    var(--cck-blue-50);
    border:        1px solid #bfdbfe;
    border-radius: 10px;
    padding:       14px 18px;
    margin-bottom: 20px;
    font-size:     14px;
    color:         var(--cck-gray-800);
    line-height:   1.6;
}

.cck-info-box--green {
    background:   var(--cck-green-50);
    border-color: var(--cck-green-200);
}

/* Payment method cards */
.cck-payment-method-card {
    background:    var(--cck-gray-50);
    border:        2px solid var(--cck-gray-200);
    border-radius: var(--cck-radius);
    margin-bottom: 16px;
    overflow:      hidden;
    transition:    border-color .2s;
}

.cck-payment-method-card--active {
    border-color: var(--cck-green-500);
    background:   var(--cck-green-50);
}

.cck-payment-method-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         16px 20px;
}

.cck-payment-method-body {
    padding:    0 20px 20px;
    border-top: 1px solid var(--cck-gray-200);
}

/* Toggle switch */
.cck-toggle {
    position: relative;
    display:  inline-block;
    width:    52px;
    height:   28px;
    flex-shrink: 0;
}

.cck-toggle input {
    opacity:  0;
    width:    0;
    height:   0;
    position: absolute;
}

.cck-toggle-slider {
    position:      absolute;
    cursor:        pointer;
    inset:         0;
    background:    var(--cck-gray-400);
    border-radius: 28px;
    transition:    .3s;
}

.cck-toggle-slider::before {
    content:       '';
    position:      absolute;
    height:        22px;
    width:         22px;
    left:          3px;
    bottom:        3px;
    background:    #fff;
    border-radius: 50%;
    transition:    .3s;
    box-shadow:    0 2px 4px rgba(0,0,0,.2);
}

.cck-toggle input:checked + .cck-toggle-slider {
    background: var(--cck-green-600);
}

.cck-toggle input:checked + .cck-toggle-slider::before {
    transform: translateX(24px);
}

.cck-toggle-label {
    display:     flex;
    align-items: flex-start;
    gap:         16px;
    cursor:      pointer;
}

/* Form elements */
.cck-form-grid {
    display: grid;
    gap:     16px;
}

.cck-form-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cck-form-group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.cck-form-group label {
    font-weight: 600;
    font-size:   13px;
    color:       var(--cck-gray-800);
}

.cck-form-group input[type="text"],
.cck-form-group input[type="password"],
.cck-form-group input[type="email"],
.cck-form-group input[type="url"],
.cck-form-group input[type="number"],
.cck-form-group select {
    border:        1.5px solid var(--cck-gray-200);
    border-radius: 8px;
    padding:       10px 12px;
    font-size:     14px;
    transition:    border-color .15s;
}

.cck-form-group input:focus,
.cck-form-group select:focus {
    outline:      none;
    border-color: var(--cck-green-500);
    box-shadow:   0 0 0 3px rgba(22,163,74,.15);
}

/* Price preview */
.cck-price-preview {
    background:    var(--cck-green-50);
    border:        2px solid var(--cck-green-200);
    border-radius: var(--cck-radius);
    padding:       20px;
    text-align:    center;
    margin-top:    16px;
}

.cck-price-preview-label {
    font-size:  12px;
    color:      var(--cck-gray-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}

.cck-price-preview-value {
    font-size:   36px;
    font-weight: 800;
    color:       var(--cck-green-700);
    margin-bottom: 6px;
}

.cck-price-preview-note {
    font-size: 13px;
    color:     var(--cck-gray-600);
}

/* Weights */
.cck-weight-row {
    margin-bottom: 20px;
    padding:       16px;
    background:    var(--cck-gray-50);
    border-radius: 10px;
    border:        1px solid var(--cck-gray-200);
}

.cck-weight-labels {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    margin-bottom:   10px;
}

.cck-weight-value {
    font-size:   22px;
    font-weight: 800;
    color:       var(--cck-green-700);
    flex-shrink: 0;
}

.cck-range-input {
    width:          100%;
    accent-color:   var(--cck-green-600);
    height:         6px;
    border-radius:  3px;
    cursor:         pointer;
}

.cck-weights-total {
    background:    var(--cck-gray-100);
    border-radius: 10px;
    padding:       14px 18px;
    text-align:    center;
    font-size:     15px;
    display:       flex;
    gap:           10px;
    align-items:   center;
    justify-content: center;
}

.cck-weights-total strong {
    font-size: 20px;
}

/* Shortcode box */
.cck-shortcode-box {
    display:       flex;
    align-items:   center;
    gap:           12px;
    background:    var(--cck-gray-100);
    border:        1px solid var(--cck-gray-200);
    border-radius: 8px;
    padding:       12px 16px;
    margin-bottom: 12px;
    font-family:   monospace;
    font-size:     16px;
}

.cck-copy-btn {
    flex-shrink: 0;
}

/* Button override for admin */
.cck-btn-primary,
.cck-btn-primary:visited {
    background:   linear-gradient(135deg, #15803d, #16a34a) !important;
    border-color: #15803d !important;
    color:        #fff !important;
    font-weight:  600;
    padding:      10px 20px !important;
    border-radius: 8px !important;
    height:       auto !important;
}

.cck-btn-primary:hover {
    background: linear-gradient(135deg, #166534, #15803d) !important;
}

.cck-submit-btn {
    background:   linear-gradient(135deg, #15803d, #16a34a) !important;
    border-color: #15803d !important;
    height:       auto !important;
    padding:      12px 28px !important;
    font-size:    15px !important;
    border-radius: 8px !important;
}

/* Payment status badges */
.cck-status-badge {
    display:       inline-block;
    padding:       3px 10px;
    border-radius: 12px;
    font-size:     12px;
    font-weight:   700;
}

.cck-status-badge--completed {
    background: var(--cck-green-100);
    color:      var(--cck-green-700);
}

.cck-status-badge--pending {
    background: #fef9c3;
    color:      #854d0e;
}

.cck-status-badge--failed {
    background: #fee2e2;
    color:      #991b1b;
}

/* Payments table */
.cck-payments-table {
    font-size: 14px;
}

.cck-payments-table th {
    background: var(--cck-gray-50);
    color:      var(--cck-gray-800);
    font-weight: 600;
}

/* Info table */
.cck-info-table {
    font-size: 13px;
}

.cck-info-table td {
    padding:      8px 12px;
    border-bottom: 1px solid var(--cck-gray-100);
}

/* Notice */
.cck-notice {
    border-left-color: var(--cck-green-600) !important;
}

/* ── RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 600px) {
    .cck-admin-wrap   { padding: 12px; }
    .cck-admin-header { flex-direction: column; text-align: center; }
    .cck-stats-grid   { grid-template-columns: 1fr 1fr; }
    .cck-form-grid--2 { grid-template-columns: 1fr; }
    .cck-tab-nav      { gap: 0; }
    .cck-tab-link     { padding: 8px 10px; font-size: 12px; }
}