/**
 * YOOAdmin - Panel theme variables and layout
 *
 * @package YOOAdmin
 */

:root{
  --yp-primary:#eda934;
  --yp-surface:#F3F4F6;
  --yp-text:#646970;
  --yp-muted:rgba(31,41,55,.70);
  --yp-border:rgba(31,41,55,.12);
  --yp-card-bg:#fff;
  --yp-card-shadow:0 6px 20px rgba(0,0,0,.06);
  --yp-radius:10px;
  --yp-gap:16px;
  --hero-h:320px;
  --btn-radius:6px;

  --yp-blue:#3b82f6; --yp-green:#10b981; --yp-purple:#8b5cf6;
  --yp-teal:#14b8a6; --yp-indigo:#6366f1; --yp-slate:#64748b;
}

/* wrapper */
#yoomain.yp-wrap{max-width:none;width:100%;background:var(--yp-surface);}

/* topbar */
.yp-topbar-min{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;margin:8px 0 16px;background:#fff;border:1px solid var(--yp-border);border-radius:10px;box-shadow:var(--yp-card-shadow);}
.yp-topbar-min__left,.yp-topbar-min__right{display:flex;gap:6px;align-items:center;}
.yp-ticon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid var(--yp-border);background:#fff;color:var(--yp-text);text-decoration:none;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;}
.yp-ticon:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.06);}

/* grid layout */
#yoopanel.yp-sections{display:grid;gap:var(--yp-gap);grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch;}

/* Row 1 */
#yoopanel [data-card="license"]{grid-column:span 4;min-height:var(--hero-h);}
#yoopanel [data-card="promo"]{grid-column:span 8;min-height:var(--hero-h);}

/* Row 2 */
#yoopanel [data-card="theme"]{grid-column:span 6;}

/* Row 3: three services next to each other */
#yoopanel [data-card="service-cloud"],
#yoopanel [data-card="service-brand"],
#yoopanel [data-card="service-staging"]{grid-column:span 4;}

/* Health */
#yoopanel [data-card^="health-"]{grid-column:span 4;}

/* Keep side-by-side on typical admin widths */
@media (max-width:1024px){
  #yoopanel [data-card="license"],#yoopanel [data-card="promo"]{grid-column:span 12;}
  #yoopanel [data-card="theme"]{grid-column:span 12;}
  #yoopanel [data-card="service-cloud"],
  #yoopanel [data-card="service-brand"],
  #yoopanel [data-card="service-staging"]{grid-column:span 12;}
  #yoopanel [data-card^="health-"]{grid-column:span 6;}
}
@media (max-width:800px){
  #yoopanel.yp-sections{grid-template-columns:repeat(2,1fr);}
  #yoopanel.yp-sections>.yp-card{grid-column:auto;}
}

/* Very small screens - single column */
@media (max-width:480px){
  #yoopanel.yp-sections{grid-template-columns:repeat(1,1fr);}
}

/* Mobile optimizations for tiles */
@media (max-width:782px){
  #yoopanel .yp-tile{
    padding:10px;
    gap:8px;
    flex-direction:column;
    text-align:center;
  }
  #yoopanel .yp-tile__icon{
    width:40px;
    height:40px;
  }
  #yoopanel .yp-tile__meta{
    width:100%;
  }
  #yoopanel .yp-tile__meta strong{
    font-size:13px;
    display:block;
  }
  #yoopanel .yp-tile__meta small{
    font-size:11px;
    display:none;
  }
  #yoopanel .yp-tag{
    margin:4px auto 0;
  }
}

/* cards */
#yoopanel .yp-card{background:#fff;border:1px solid var(--yp-border);border-radius:10px;box-shadow:var(--yp-card-shadow);display:flex;flex-direction:column;min-height:180px;height:100%;transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease,opacity .2s ease;opacity:0;transform:translateY(6px);}
#yoopanel .yp-card.is-mounted{opacity:1;transform:translateY(0);}
#yoopanel .yp-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.08);border-color:color-mix(in oklab,var(--yp-slate)22%,var(--yp-border));}
#yoopanel .yp-card__head{padding:12px 14px;border-bottom:1px solid var(--yp-border);display:flex;align-items:center;justify-content:space-between;gap:10px;}
#yoopanel .yp-card__title{margin:0;font-weight:600;letter-spacing:.2px;color:var(--yp-text);display:flex;align-items:center;gap:8px;}
#yoopanel .yp-card__body{padding:14px 16px;flex:1;}
#yoopanel .yp-card__body.-no-pad{padding:0;}
#yoopanel .yp-card__foot{padding:12px 16px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}

/* license */
#yoopanel [data-card="license"] .yp-card__body{display:grid;gap:10px;}
#yoopanel .yp-license__top{display:flex;gap:8px;align-items:center;}
#yoopanel .yp-badge{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--yp-text);background:#fff;border:1px solid var(--yp-border);}
#yoopanel .yp-verified{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;background:#10b9811a;border:1px solid #10b98133;font-weight:600;}
#yoopanel .yp-kv.-compact{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
#yoopanel .yp-kv.-compact>div{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:8px;border:1px dashed var(--yp-border);background:#fff;}
#yoopanel .yp-license__key{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:#fff;border:1px solid var(--yp-border);}

/* theme */
#yoopanel .yp-theme{display:grid;grid-template-columns:140px 1fr;gap:16px;align-items:center;}
#yoopanel .yp-theme__preview{position:relative;aspect-ratio:4/3;border-radius:8px;border:1px solid var(--yp-border);background:linear-gradient(135deg,#f7f7f7,#fff);display:flex;align-items:center;justify-content:center;}
#yoopanel .yp-theme__thumb{width:82%;height:72%;border-radius:6px;background:linear-gradient(180deg,#eaeaea,#ddd);}
#yoopanel .yp-theme__badge{position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;background:#12b76a1a;border:1px solid #12b76a33;font-weight:600;}
#yoopanel .yp-theme__name{margin:0 0 4px;font-weight:600;}

/* buttons (unified radius) */
#yoopanel .yp-pill,
#yoopanel .yp-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 14px;border-radius:var(--btn-radius);
  text-decoration:none;font-weight:600;background:#fff;color:var(--yp-text);
  border:1px solid var(--yp-border);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease,background .12s;
}
#yoopanel .yp-pill:hover,#yoopanel .yp-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.06);}
#yoopanel .yp-btn--primary{background:var(--yp-text);color:#fff !important;border-color:var(--yp-text);}
#yoopanel .yp-pill.-blue{border-color:color-mix(in oklab,var(--yp-blue)22%,#fff);}
#yoopanel .yp-pill.-teal{border-color:color-mix(in oklab,var(--yp-teal)22%,#fff);}
#yoopanel .yp-pill.-indigo{border-color:color-mix(in oklab,var(--yp-indigo)22%,#fff);}
#yoopanel .yp-pill.-slate{border-color:color-mix(in oklab,var(--yp-slate)20%,#fff);}

/* slider: square top, rounded bottom only */
#yoopanel [data-card="promo"] .yp-card__body{display:flex;padding:0;}
#yoopanel .yp-slider{position:relative;overflow:hidden;background:#fff;border-radius:0 0 10px 10px;flex:1;height:100%;}
#yoopanel .yp-slider.-tight{border:none;}
#yoopanel .yp-slider__track{display:flex;transition:transform .35s ease;}
#yoopanel .yp-slide{
  min-width:100%;
  height:100%;
  background:var(--img) center/cover no-repeat, linear-gradient(135deg,#f3f4f6,#e5e7eb);
  position:relative;
}
#yoopanel .yp-slide__content{position:absolute;left:16px;bottom:16px;background:rgba(0,0,0,.55);color:#fff;padding:10px 12px;border-radius:8px;}
#yoopanel .yp-slider__nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:999px;border:1px solid var(--yp-border);background:#fff;cursor:pointer;}
#yoopanel .yp-slider__nav.-prev{left:10px;}#yoopanel .yp-slider__nav.-next{right:10px;}

/* tiles (neutral) */
#yoopanel .yp-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
@media (max-width:782px){ 
  #yoopanel .yp-card__body .yp-tiles,
  #yoopanel .yp-tiles{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  } 
}
@media (max-width:480px){ 
  #yoopanel .yp-card__body .yp-tiles,
  #yoopanel .yp-tiles{
    grid-template-columns:1fr !important;
  } 
}
#yoopanel .yp-tile{display:flex;align-items:center;gap:10px;padding:12px;border-radius:8px;text-decoration:none;color:#1F2937;border:1px solid var(--yp-border);background:#fff;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;}
#yoopanel .yp-tile:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.06);border-color:color-mix(in oklab,var(--yp-slate)22%,#fff);}
#yoopanel .yp-tile__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--yp-border);background:#f7f7f8;}
#yoopanel .yp-tile__meta strong{font-weight:600;}
#yoopanel .yp-tile__meta small{color:var(--yp-muted);}
#yoopanel .yp-tag{margin-left:auto;display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:999px;border:1px solid var(--yp-border);font-size:12px;font-weight:600;color:var(--yp-text);background:#fff;}
#yoopanel .yp-tag.-ok{border-color:#10b98133;background:#10b9811a;}
#yoopanel .yp-tag.-muted{opacity:.75;}

/* health mini */
#yoopanel .yp-health-mini{display:grid;gap:6px;}
#yoopanel .yp-health-mini strong{font-weight:600;}
#yoopanel .yp-spark{display:block;margin-top:2px;}

/* drag & drop */
#yoopanel .yp-card.dragging{opacity:.6;}
#yoopanel .yp-drop-hint{height:10px;border-radius:6px;margin:4px 0;border:2px dashed color-mix(in oklab,var(--yp-text) 35%, #fff);}

/* Row 2 equal height */
:root{ --row2-h:220px; }
#yoopanel [data-card="theme"]{ min-height:var(--row2-h); }

/* License card highlight */
#yoopanel [data-card="license"]{
  border-color: color-mix(in oklab, var(--yp-primary) 35%, var(--yp-border));
  box-shadow: 0 10px 26px rgba(232,158,67,.08);
  background: color-mix(in oklab, var(--yp-primary) 5%, #fff);
  position: relative;
}
#yoopanel [data-card="license"]::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background: var(--yp-primary); border-radius:10px 0 0 10px;
}