/* cg-sparkplug.css
   Basic admin + frontend styles used by CG-SparkPlug admin pages and minimal front-end widgets.
   Extend & replace with nicer design later.
*/

.cgsp-panel {
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    margin-bottom: 16px;
  }
  
  .cgsp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }
  
  .cgsp-kpi {
    padding: 12px;
    border-radius: 6px;
    background: linear-gradient(180deg,#fbfbfb,#ffffff);
    border: 1px solid #f1f1f1;
  }
  
  .cgsp-kpi h3 {
    margin: 0 0 8px 0;
    font-size: 14px;
  }
  
  .cgsp-kpi .value {
    font-size: 20px;
    font-weight: 700;
  }
  
  .cgsp-table {
    width: 100%;
    border-collapse: collapse;
  }
  
  .cgsp-table th, .cgsp-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #efefef;
    text-align: left;
  }
  
  .cgsp-btn {
    display:inline-block;
    padding:6px 10px;
    border-radius:6px;
    background:#0073aa;
    color:#fff;
    text-decoration:none;
    border: none;
    cursor: pointer;
  }
  
  .cgsp-btn.secondary {
    background:#f5f5f5;
    color:#333;
    border:1px solid #ddd;
  }
  
  .cgsp-form-row {
    margin-bottom:12px;
  }
  
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }