/*
Theme Name: PPG Ticket Support
Theme URI: https://ticket.p-pgroup.com
Author: P-P Group Zürich
Description: Professional digital repair ticket system. Modern dashboard UI with ticket management, KPIs, document conversion, analytics, and integrations.
Version: 3.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: ppg-tickets
*/

/* ════════════════════════════════════
   TOKENS & RESET
════════════════════════════════════ */
:root {
  --c-primary:       #185FA5;
  --c-primary-dark:  #0C447C;
  --c-primary-soft:  #EBF3FC;
  --c-accent:        #6576FF;
  --c-success:       #1EE0AC;
  --c-success-dark:  #0BAD81;
  --c-warning:       #F4BD0E;
  --c-warning-dark:  #B8890A;
  --c-danger:        #E85347;
  --c-danger-dark:   #B1312C;
  --c-info:          #09C2DE;
  --c-sidebar-bg:    #101924;
  --c-sidebar-item:  rgba(255,255,255,0.07);
  --c-sidebar-active:#1b2e42;
  --c-sidebar-text:  #8094ae;
  --c-sidebar-white: #c4cfe4;
  --c-body-bg:       #F5F6FA;
  --c-white:         #ffffff;
  --c-gray-100:      #f5f6fa;
  --c-gray-200:      #e5e9f2;
  --c-gray-300:      #dbdfea;
  --c-gray-400:      #b6bece;
  --c-gray-500:      #8094ae;
  --c-gray-600:      #526484;
  --c-gray-700:      #344357;
  --c-gray-800:      #203247;
  --c-gray-900:      #101924;
  --c-text:          #364a63;
  --c-text-soft:     #526484;
  --c-text-muted:    #8094ae;
  --c-border:        #e5e9f2;
  --radius-sm:       4px;
  --radius:          6px;
  --radius-lg:       10px;
  --radius-xl:       16px;
  --shadow-sm:       0 1px 3px rgba(33,63,100,0.08);
  --shadow:          0 3px 12px rgba(33,63,100,0.10);
  --shadow-lg:       0 8px 24px rgba(33,63,100,0.14);
  --font:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sidebar-w:       260px;
  --header-h:        65px;
  --transition:      0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }
body { font-family: var(--font); background: var(--c-body-bg); color: var(--c-text); min-height: 100vh; overflow-x: hidden; }
a { color: var(--c-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-primary-dark); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font-family: var(--font); }

/* ════════════════════════════════════
   LAYOUT — SIDEBAR + CONTENT
════════════════════════════════════ */
.ppg-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.ppg-sidebar { width: var(--sidebar-w); background: var(--c-sidebar-bg); position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; z-index: 200; display: flex; flex-direction: column; transition: transform var(--transition); }
.ppg-sidebar::-webkit-scrollbar { width: 4px; }
.ppg-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.ppg-sidebar-brand { padding: 20px 24px 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.ppg-sidebar-logo { width: 38px; height: 38px; background: var(--c-primary); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.ppg-sidebar-brand-text { line-height: 1.3; }
.ppg-sidebar-brand-name { color: #fff; font-weight: 700; font-size: 15px; }
.ppg-sidebar-brand-url { color: var(--c-sidebar-text); font-size: 11px; }

.ppg-nav-section { padding: 20px 12px 8px; }
.ppg-nav-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-gray-500); padding: 0 12px; margin-bottom: 6px; }
.ppg-nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: var(--radius); color: var(--c-sidebar-text); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--transition); text-decoration: none; margin-bottom: 2px; position: relative; }
.ppg-nav-item:hover { background: var(--c-sidebar-item); color: var(--c-sidebar-white); text-decoration: none; }
.ppg-nav-item.active { background: var(--c-primary); color: #fff; }
.ppg-nav-item.active::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; background: rgba(255,255,255,0.5); border-radius: 3px 0 0 3px; }
.ppg-nav-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0.7; }
.ppg-nav-item.active .ppg-nav-icon, .ppg-nav-item:hover .ppg-nav-icon { opacity: 1; }
.ppg-nav-badge { margin-left: auto; background: var(--c-danger); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.ppg-nav-item.active .ppg-nav-badge { background: rgba(255,255,255,0.25); }

.ppg-sidebar-user { margin-top: auto; padding: 16px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; }
.ppg-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--c-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.ppg-user-name { font-size: 13px; font-weight: 600; color: var(--c-sidebar-white); line-height: 1.2; }
.ppg-user-role { font-size: 11px; color: var(--c-sidebar-text); }
.ppg-user-logout { margin-left: auto; font-size: 18px; color: var(--c-sidebar-text); opacity: 0.6; transition: opacity var(--transition); cursor: pointer; }
.ppg-user-logout:hover { opacity: 1; color: var(--c-danger); }

/* ── Header ── */
/* FIX #4 — header background #EBEBEB (not black/white) */
/* FIX #2 — top:0 is correct now that admin bar is fully hidden */
.ppg-header { height: var(--header-h); background: #EBEBEB; border-bottom: 1px solid #d6d6d6; position: fixed; top: 0; left: var(--sidebar-w); right: 0; z-index: 100; display: flex; align-items: center; padding: 0 28px; justify-content: space-between; }
/* Ensure WP never pushes our layout down */
html { margin-top: 0 !important; }
#wpadminbar { display: none !important; }
.ppg-header-title { font-size: 18px; font-weight: 700; color: var(--c-gray-800); display: flex; align-items: center; gap: 8px; }
.ppg-header-breadcrumb { font-size: 12px; color: var(--c-gray-600); display: flex; align-items: center; gap: 6px; }
.ppg-header-breadcrumb a { color: var(--c-gray-600); }
.ppg-header-breadcrumb span { color: var(--c-gray-500); }
.ppg-header-right { display: flex; align-items: center; gap: 12px; }
.ppg-header-lang { display: flex; gap: 4px; }
.ppg-lang-btn { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--c-border); background: transparent; color: var(--c-text-muted); cursor: pointer; transition: all var(--transition); }
.ppg-lang-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ppg-header-user { display: flex; align-items: center; gap: 8px; }

/* ── Main content ── */
.ppg-content { margin-left: var(--sidebar-w); margin-top: var(--header-h); min-height: calc(100vh - var(--header-h)); padding: 28px; }
.ppg-page-header { margin-bottom: 24px; }
.ppg-page-title { font-size: 20px; font-weight: 800; color: var(--c-gray-800); margin-bottom: 4px; }
.ppg-page-sub { font-size: 13px; color: var(--c-text-muted); }

/* ════════════════════════════════════
   CARDS
════════════════════════════════════ */
.ppg-card { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.ppg-card + .ppg-card { margin-top: 16px; }
.ppg-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.ppg-card-title { font-size: 14px; font-weight: 700; color: var(--c-gray-700); }
.ppg-card-tools { display: flex; gap: 8px; align-items: center; }

/* ════════════════════════════════════
   KPI CARDS
════════════════════════════════════ */
.ppg-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.ppg-kpi { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.ppg-kpi::after { content: ''; position: absolute; right: -20px; bottom: -20px; width: 80px; height: 80px; border-radius: 50%; opacity: 0.07; }
.ppg-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-text-muted); margin-bottom: 8px; }
.ppg-kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; line-height: 1; color: var(--c-primary); margin-bottom: 4px; }
.ppg-kpi-sub { font-size: 12px; color: var(--c-text-muted); }
.ppg-kpi.kpi-success .ppg-kpi-value { color: var(--c-success-dark); }
.ppg-kpi.kpi-success::after { background: var(--c-success); }
.ppg-kpi.kpi-warning .ppg-kpi-value { color: var(--c-warning-dark); }
.ppg-kpi.kpi-warning::after { background: var(--c-warning); }
.ppg-kpi.kpi-danger .ppg-kpi-value { color: var(--c-danger); }
.ppg-kpi.kpi-danger::after { background: var(--c-danger); }
.ppg-kpi::after { background: var(--c-primary); }

/* ════════════════════════════════════
   BADGES & STATUS
════════════════════════════════════ */
.ppg-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ppg-badge-open     { background: #e3f2fd; color: #1565c0; }
.ppg-badge-progress { background: #fff8e1; color: #e65100; }
.ppg-badge-hold     { background: #fce4ec; color: #c62828; }
.ppg-badge-resolved, .ppg-badge-closed { background: #e8f5e9; color: #1b5e20; }
.ppg-badge-low      { background: #e8f5e9; color: #1b5e20; }
.ppg-badge-medium   { background: #fff8e1; color: #e65100; }
.ppg-badge-high     { background: #fbe9e7; color: #bf360c; }
.ppg-badge-critical { background: #fce4ec; color: #880e4f; }
.ppg-badge-plan     { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.ppg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ppg-dot-success { background: var(--c-success); }
.ppg-dot-warning { background: var(--c-warning); }
.ppg-dot-danger { background: var(--c-danger); }
.ppg-dot-info { background: var(--c-info); }

/* ════════════════════════════════════
   BUTTONS
════════════════════════════════════ */
.ppg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: all var(--transition); font-family: var(--font); text-decoration: none; white-space: nowrap; }
.ppg-btn:hover { text-decoration: none; }
.ppg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ppg-btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.ppg-btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: #fff; }
.ppg-btn-outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.ppg-btn-outline:hover { background: var(--c-primary-soft); }
.ppg-btn-light { background: var(--c-gray-100); color: var(--c-text-soft); border-color: var(--c-border); }
.ppg-btn-light:hover { background: var(--c-gray-200); }
.ppg-btn-success { background: var(--c-success-dark); color: #fff; border-color: var(--c-success-dark); }
.ppg-btn-danger { background: var(--c-danger); color: #fff; border-color: var(--c-danger); }
.ppg-btn-sm { padding: 6px 13px; font-size: 12px; }
.ppg-btn-xs { padding: 4px 10px; font-size: 11px; }
.ppg-btn-icon { padding: 8px; border-radius: var(--radius); }
.ppg-btn-block { width: 100%; justify-content: center; padding: 11px; }

/* ════════════════════════════════════
   FORMS
════════════════════════════════════ */
.ppg-form-group { margin-bottom: 16px; }
.ppg-label { font-size: 13px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ppg-req { background: #fde8e8; color: #c62828; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.ppg-opt { background: var(--c-gray-100); color: var(--c-text-muted); font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.ppg-hint { font-size: 11px; color: var(--c-text-muted); margin-bottom: 6px; line-height: 1.5; }
.ppg-input, .ppg-select, .ppg-textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--c-gray-300); border-radius: var(--radius); font-size: 13px; color: var(--c-text); background: #fff; outline: none; transition: all var(--transition); font-family: var(--font); }
.ppg-input:focus, .ppg-select:focus, .ppg-textarea:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(24,95,165,0.1); }
.ppg-input.error, .ppg-select.error, .ppg-textarea.error { border-color: var(--c-danger); }
.ppg-textarea { resize: vertical; min-height: 100px; line-height: 1.6; }
.ppg-field-error { font-size: 11px; color: var(--c-danger); margin-top: 4px; }
.ppg-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.ppg-check input[type=checkbox] { width: 15px; height: 15px; margin-top: 1px; flex-shrink: 0; accent-color: var(--c-primary); }

/* ════════════════════════════════════
   UPLOAD ZONE
════════════════════════════════════ */
.ppg-dropzone { border: 2px dashed var(--c-gray-300); border-radius: var(--radius-lg); padding: 32px 20px; text-align: center; cursor: pointer; transition: all var(--transition); background: var(--c-gray-100); position: relative; }
.ppg-dropzone:hover, .ppg-dropzone.dragover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.ppg-dropzone.has-files { border-color: var(--c-success-dark); background: #f0fdf4; }
.ppg-dropzone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ppg-dropzone-icon { font-size: 32px; margin-bottom: 10px; display: block; }
.ppg-dropzone-text { font-size: 14px; font-weight: 600; color: var(--c-text-soft); margin-bottom: 4px; }
.ppg-dropzone-sub { font-size: 12px; color: var(--c-text-muted); }
.ppg-file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ppg-file-chip { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 4px; padding: 4px 10px; font-size: 12px; display: flex; align-items: center; gap: 6px; }
.ppg-file-chip-remove { color: var(--c-danger); cursor: pointer; font-size: 14px; }

/* ════════════════════════════════════
   TABLES / TICKET LIST
════════════════════════════════════ */
.ppg-table-wrap { overflow-x: auto; }
.ppg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ppg-table th { background: var(--c-gray-100); color: var(--c-text-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 16px; text-align: left; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.ppg-table td { padding: 12px 16px; border-bottom: 1px solid var(--c-gray-100); color: var(--c-text); vertical-align: middle; }
.ppg-table tr:last-child td { border-bottom: none; }
.ppg-table tr:hover td { background: var(--c-gray-100); }
.ppg-table-id { font-family: monospace; font-size: 12px; color: var(--c-primary); font-weight: 700; }
.ppg-table-title { font-weight: 600; }
.ppg-table-meta { font-size: 11px; color: var(--c-text-muted); margin-top: 2px; }

/* ════════════════════════════════════
   GRID SYSTEM
════════════════════════════════════ */
.ppg-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ppg-g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.ppg-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ppg-row { display: flex; flex-wrap: wrap; gap: 16px; }
.ppg-col { flex: 1; min-width: 200px; }

/* ════════════════════════════════════
   TABS
════════════════════════════════════ */
.ppg-tabs { display: flex; border-bottom: 2px solid var(--c-border); margin-bottom: 20px; overflow-x: auto; }
.ppg-tab-btn { padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--c-text-muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition); white-space: nowrap; font-family: var(--font); }
.ppg-tab-btn:hover { color: var(--c-primary); }
.ppg-tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }

/* ════════════════════════════════════
   STEPPER
════════════════════════════════════ */
.ppg-stepper { display: flex; align-items: center; margin-bottom: 28px; overflow-x: auto; padding-bottom: 4px; }
.ppg-step { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ppg-step-num { width: 28px; height: 28px; border-radius: 50%; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--c-gray-300); background: #fff; color: var(--c-text-muted); transition: all var(--transition); }
.ppg-step.active .ppg-step-num { background: var(--c-primary); border-color: var(--c-primary); color: #fff; box-shadow: 0 0 0 4px rgba(24,95,165,0.15); }
.ppg-step.done .ppg-step-num { background: var(--c-success-dark); border-color: var(--c-success-dark); color: #fff; }
.ppg-step-label { font-size: 12px; color: var(--c-text-muted); font-weight: 600; white-space: nowrap; }
.ppg-step.active .ppg-step-label { color: var(--c-primary); }
.ppg-step-line { flex: 1; height: 2px; background: var(--c-gray-200); margin: 0 10px; min-width: 20px; }
.ppg-step.done ~ .ppg-step-line { background: var(--c-success-dark); }

/* ════════════════════════════════════
   NOTICE / ALERTS
════════════════════════════════════ */
.ppg-alert { padding: 12px 16px; border-radius: var(--radius); font-size: 13px; line-height: 1.6; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.ppg-alert-icon { flex-shrink: 0; font-size: 16px; }
.ppg-alert-info    { background: #e8f4fd; border: 1px solid #b3d7f5; color: #1a5276; }
.ppg-alert-success { background: #e8f8f2; border: 1px solid #a9dfbf; color: #1e6e48; }
.ppg-alert-warning { background: #fef9e7; border: 1px solid #f9e79f; color: #7d6608; }
.ppg-alert-danger  { background: #fdedec; border: 1px solid #f5b7b1; color: #922b21; }

/* ════════════════════════════════════
   TIMELINE
════════════════════════════════════ */
.ppg-timeline { list-style: none; position: relative; padding: 0; }
.ppg-timeline::before { content: ''; position: absolute; left: 13px; top: 0; bottom: 0; width: 1px; background: var(--c-border); }
.ppg-timeline-item { display: flex; gap: 16px; padding-bottom: 20px; }
.ppg-tl-dot { width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--c-primary); flex-shrink: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; }
.ppg-tl-dot.gray { background: var(--c-gray-400); box-shadow: 0 0 0 2px var(--c-gray-400); }
.ppg-tl-dot.green { background: var(--c-success-dark); box-shadow: 0 0 0 2px var(--c-success-dark); }
.ppg-tl-body { flex: 1; }
.ppg-tl-title { font-size: 13px; font-weight: 700; color: var(--c-gray-700); }
.ppg-tl-time { font-size: 11px; color: var(--c-text-muted); margin-top: 2px; }
.ppg-tl-note { background: var(--c-gray-100); border-radius: var(--radius); padding: 8px 12px; font-size: 12px; color: var(--c-text-soft); margin-top: 8px; line-height: 1.55; }

/* ════════════════════════════════════
   CONVERSION TOOL — PDF24 STYLE
════════════════════════════════════ */
.ppg-conv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.ppg-conv-card { background: #fff; border: 2px solid var(--c-border); border-radius: var(--radius-lg); padding: 16px 10px; text-align: center; cursor: pointer; transition: all var(--transition); }
.ppg-conv-card:hover { border-color: var(--c-primary); background: var(--c-primary-soft); transform: translateY(-2px); box-shadow: var(--shadow); }
.ppg-conv-card.sel { border-color: var(--c-primary); background: var(--c-primary-soft); box-shadow: 0 0 0 3px rgba(24,95,165,0.15); }
.ppg-conv-card.disabled { opacity: 0.4; cursor: not-allowed; }
.ppg-conv-card.disabled:hover { transform: none; border-color: var(--c-border); background: #fff; box-shadow: none; }
.ppg-conv-icon { width: 52px; height: 52px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.ppg-conv-name { font-size: 12px; font-weight: 700; color: var(--c-text); line-height: 1.3; }
.ppg-conv-sub { font-size: 10px; color: var(--c-text-muted); margin-top: 3px; }
.ppg-conv-category { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-text-muted); padding: 16px 0 8px; border-bottom: 1px solid var(--c-border); margin-bottom: 12px; }

/* ════════════════════════════════════
   INTEGRATION CARDS
════════════════════════════════════ */
.ppg-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ppg-int-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: box-shadow var(--transition); }
.ppg-int-card:hover { box-shadow: var(--shadow); }
.ppg-int-card.connected { border-color: var(--c-success-dark); background: #f0fdf4; }
.ppg-int-head { display: flex; align-items: center; gap: 10px; }
.ppg-int-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--c-gray-100); flex-shrink: 0; }
.ppg-int-name { font-size: 13px; font-weight: 700; color: var(--c-gray-700); }
.ppg-int-cat { font-size: 11px; color: var(--c-text-muted); }
.ppg-int-status { font-size: 11px; font-weight: 700; }
.ppg-int-card.connected .ppg-int-status { color: var(--c-success-dark); }
.ppg-int-desc { font-size: 12px; color: var(--c-text-muted); line-height: 1.55; }

/* ════════════════════════════════════
   PAYMENT
════════════════════════════════════ */
.ppg-payment-methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 20px; }
.ppg-pay-method { border: 2px solid var(--c-border); border-radius: var(--radius-lg); padding: 14px 10px; text-align: center; cursor: pointer; transition: all var(--transition); background: #fff; }
.ppg-pay-method:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.ppg-pay-method.sel { border-color: var(--c-primary); background: var(--c-primary-soft); }
.ppg-pay-method-icon { font-size: 26px; margin-bottom: 6px; display: block; }
.ppg-pay-method-name { font-size: 11px; font-weight: 700; color: var(--c-text); }
.ppg-card-input { background: #f8fafc; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 14px; font-size: 14px; margin-bottom: 10px; font-family: var(--font); color: var(--c-text); }
#stripe-card-element { background: #f8fafc; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 14px; }
.ppg-currency-flag { font-size: 16px; }

/* ════════════════════════════════════
   PLAN CARD
════════════════════════════════════ */
.ppg-plan-banner { background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-accent) 100%); border-radius: var(--radius-lg); padding: 20px; color: #fff; margin-bottom: 20px; }
.ppg-plan-banner-name { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.ppg-plan-banner-price { font-size: 28px; font-weight: 800; letter-spacing: -1px; }
.ppg-plan-banner-price small { font-size: 14px; font-weight: 400; opacity: 0.8; }
.ppg-plan-features { list-style: none; margin-top: 12px; }
.ppg-plan-features li { padding: 5px 0; font-size: 13px; opacity: 0.9; display: flex; align-items: center; gap: 8px; }
.ppg-plan-features li::before { content: '✓'; font-weight: 800; opacity: 1; background: rgba(255,255,255,0.2); width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }

/* ════════════════════════════════════
   SECURITY FIELDS
════════════════════════════════════ */
.ppg-sec-panel { background: #fff8f8; border: 1px solid #f5c6c6; border-radius: var(--radius-lg); padding: 20px; }
.ppg-sec-title { font-size: 13px; font-weight: 700; color: #922b21; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ppg-sec-enc { background: #e8f5e9; color: #1b5e20; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: auto; }
.ppg-sec-group { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 8px; overflow: hidden; }
.ppg-sec-group summary { padding: 10px 14px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--c-text-soft); list-style: none; display: flex; align-items: center; justify-content: space-between; }
.ppg-sec-group summary::after { content: '▾'; font-size: 12px; color: var(--c-text-muted); }
.ppg-sec-group[open] summary::after { content: '▴'; }
.ppg-sec-fields { padding: 12px 14px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border-top: 1px solid var(--c-border); }

/* ════════════════════════════════════
   CMS SELECTOR
════════════════════════════════════ */
.ppg-cms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.ppg-cms-btn { border: 2px solid var(--c-border); border-radius: var(--radius-lg); padding: 14px 8px; text-align: center; cursor: pointer; transition: all var(--transition); background: #fff; font-family: var(--font); }
.ppg-cms-btn:hover { border-color: var(--c-primary); background: var(--c-primary-soft); }
.ppg-cms-btn.sel { border-color: var(--c-primary); background: var(--c-primary-soft); box-shadow: 0 0 0 3px rgba(24,95,165,0.12); }
.ppg-cms-icon { font-size: 26px; display: block; margin-bottom: 6px; }
.ppg-cms-label { font-size: 11px; font-weight: 700; color: var(--c-text); }

/* ════════════════════════════════════
   CHARTS
════════════════════════════════════ */
.ppg-chart-card { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 20px; }
.ppg-chart-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-text-muted); margin-bottom: 16px; }
.ppg-chart-wrap { position: relative; width: 100%; }

/* ════════════════════════════════════
   LOGIN PAGE
════════════════════════════════════ */
.ppg-login-layout { min-height: 100vh; background: var(--c-body-bg); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ppg-login-card { background: #fff; border-radius: var(--radius-xl); padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow-lg); }
.ppg-login-brand { text-align: center; margin-bottom: 28px; }
.ppg-login-logo { width: 52px; height: 52px; background: var(--c-primary); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; margin: 0 auto 12px; }
.ppg-login-title { font-size: 20px; font-weight: 800; color: var(--c-gray-800); margin-bottom: 4px; }
.ppg-login-sub { font-size: 13px; color: var(--c-text-muted); }

/* ════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════ */
.ppg-progress { height: 6px; background: var(--c-gray-200); border-radius: 6px; overflow: hidden; }
.ppg-progress-bar { height: 100%; background: var(--c-primary); border-radius: 6px; transition: width 0.3s ease; }
.ppg-progress-bar.success { background: var(--c-success-dark); }
.ppg-progress-bar.warning { background: var(--c-warning); }
.ppg-progress-bar.danger { background: var(--c-danger); }

/* ════════════════════════════════════
   MISC
════════════════════════════════════ */
.ppg-divider { border: none; border-top: 1px solid var(--c-border); margin: 20px 0; }
.ppg-text-muted { color: var(--c-text-muted); }
.ppg-text-sm { font-size: 12px; }
.ppg-fw-bold { font-weight: 700; }
.ppg-mt-0 { margin-top: 0; }
.ppg-mb-0 { margin-bottom: 0; }
.ppg-spinner { width: 36px; height: 36px; border: 3px solid var(--c-gray-200); border-top-color: var(--c-primary); border-radius: 50%; animation: ppg-spin 0.7s linear infinite; margin: 0 auto; }
@keyframes ppg-spin { to { transform: rotate(360deg); } }
.ppg-empty { text-align: center; padding: 48px 20px; color: var(--c-text-muted); }
.ppg-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.4; }
.ppg-empty-text { font-size: 14px; }

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
/* ════════════════════════════════════
   RESPONSIVE — #7 mobile friendly
════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 220px; }
}
@media (max-width: 768px) {
  .ppg-sidebar { transform: translateX(-100%); box-shadow: none; }
  .ppg-sidebar.open { transform: translateX(0); box-shadow: 4px 0 24px rgba(0,0,0,0.18); }
  .ppg-content { margin-left: 0 !important; padding: 16px; }
  .ppg-header { left: 0 !important; padding: 0 16px; }
  #ppg-mob-toggle { display: flex !important; }
  .ppg-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .ppg-g2, .ppg-g3, .ppg-g4 { grid-template-columns: 1fr !important; }
  .ppg-sec-fields { grid-template-columns: 1fr !important; }
  .ppg-payment-methods { grid-template-columns: repeat(3, 1fr) !important; }
  /* Dashboard table: collapse to 2-col on mobile */
  .ppg-content [style*="grid-template-columns:70px 1fr 100px 120px 90px 90px"] {
    grid-template-columns: 60px 1fr 90px !important;
  }
  .ppg-content [style*="grid-template-columns:70px 1fr 100px 120px 90px 90px"] > span:nth-child(3),
  .ppg-content [style*="grid-template-columns:70px 1fr 100px 120px 90px 90px"] > span:nth-child(5),
  .ppg-content [style*="grid-template-columns:70px 1fr 100px 120px 90px 90px"] > span:nth-child(6) { display: none; }
}
@media (max-width: 480px) {
  .ppg-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .ppg-payment-methods { grid-template-columns: repeat(2, 1fr) !important; }
  .ppg-conv-grid { grid-template-columns: repeat(2, 1fr) !important; }
}