/* Minimal baseline pulling CSS variables to match app/globals.css */
:root{
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
  --radius: .5rem;
}

body{
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Arial, Helvetica, sans-serif;
  margin:0;
}

/* Layout */
.container{max-width:1120px;margin:0 auto;padding:0 16px 40px;}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid hsl(var(--border));}
.brand{display:flex;align-items:center;gap:16px}
.brand-logo{width:140px;height:auto}
.brand-text{display:flex;flex-direction:column}
.brand-title{margin:0;font-size:24px;font-weight:800;letter-spacing:.2px}
.tagline{font-size:13px;color:#666;margin-top:4px}
.badge{margin-left:8px;padding:3px 8px;border:1px solid hsl(var(--border));border-radius:999px;font-size:12px;color:#444;background:#f7f7f7}
.badge-priority{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid hsl(var(--border));}
.badge-high{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.badge-medium{background:#fef3c7;color:#92400e;border-color:#fde68a}
.badge-low{background:#dcfce7;color:#166534;border-color:#bbf7d0}

/* Tabs */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:24px;}
.tab{padding:10px;border:1px solid hsl(var(--border));border-radius:8px;background:transparent;cursor:pointer}
.tab:first-child{border-top-right-radius:0;border-bottom-right-radius:0;}
.tab:last-child{border-top-left-radius:0;border-bottom-left-radius:0;}
.tab:not(:first-child):not(:last-child){border-radius:0;}
.tab.active{background:#111;color:#fff;border-color:#111}
.tab-panel{display:none;margin-top:24px}
.tab-panel.active{display:block}
.btn-outline{padding:8px 12px;border:1px solid hsl(var(--border));border-radius:8px;background:transparent;cursor:pointer}
.btn-danger{padding:6px 10px;border:1px solid #fecaca;border-radius:8px;background:#fee2e2;color:#991b1b;cursor:pointer}

/* Cards */
.card{border:1px solid hsl(var(--border));border-radius:12px;background:hsl(var(--card));}
.card-header{padding:24px 24px 0}
.card-content{padding:24px}
.card-title{font-size:18px;font-weight:600}
.card-title.small{font-size:16px}
.card-sub{font-size:13px;color:#666;margin-top:6px}
.mt{margin-top:24px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* Inputs */
.row{display:flex;gap:12px}
#url-input{flex:1;padding:12px;border:1px solid hsl(var(--border));border-radius:8px}
#run-btn{padding:12px 24px;border:1px solid hsl(var(--border));border-radius:8px;background:#111;color:#fff;cursor:pointer}

/* Progress */
.error{padding:16px;border:1px solid #fecaca;background:#fee2e2;border-radius:8px;color:#991b1b}
.progress{margin-top:16px}
.progress-head{display:flex;justify-content:space-between;font-size:13px;color:#555}
.progress-bar{height:8px;background:hsl(var(--muted));border-radius:999px;overflow:hidden;margin-top:6px;border:1px solid hsl(var(--border))}
#progress-bar-fill{height:100%;width:0;background:#2563eb}
.progress-foot{font-size:11px;color:#999;margin-top:8px}

/* Circular Progress */
.progress-circle{display:flex;justify-content:center;align-items:center;margin:16px 0}
.circular-progress{position:relative;height:140px;width:140px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:
  conic-gradient(var(--cpColor, #22c55e) var(--cp, 0%), transparent 0),
  conic-gradient(#e5e7eb 0 100%)}
.circular-progress::before{content:"";position:absolute;height:110px;width:110px;background:#fff;border-radius:50%}
#circular-progress-value{position:relative;font-size:20px;font-weight:600}

/* SVG Progress Ring */
.progress-svg{width:200px;height:200px;transform:rotate(-90deg)}
.progress-bg{fill:none;stroke:#e5e7eb;stroke-width:10}
.progress-bar{
  fill:none;
  stroke-width:10;
  stroke-linecap:round;
  stroke-dasharray: 0 1; /* will be set exactly via JS to `circumference circumference` */
  stroke-dashoffset: 0;
}
.progress-circle{position:relative}
.progress-circle > #circular-progress-value{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:26px;font-weight:700}

/* Progress Modal (lightbox) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal-content{background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:24px;width:min(420px,90%)}
.modal-title{font-weight:600;margin-bottom:8px}
.modal-foot{margin-top:12px;color:#555;font-size:13px;text-align:center}
.modal-actions{display:flex;gap:12px;justify-content:center;margin-top:12px}
.btn-primary{background:#111;color:#fff;border:1px solid #111;border-radius:8px;padding:8px 14px;cursor:pointer}

/* Features */
.features{display:grid;grid-template-columns:repeat(1,1fr);gap:12px}
@media(min-width:768px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{display:flex;gap:12px;align-items:flex-start}
.dot{width:24px;height:24px;background:#dbeafe;color:#2563eb;border-radius:999px}
.feature-title{font-weight:600}
.feature-sub{color:#666;font-size:13px}

/* Impact badges for audits */
.impact{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;border:1px solid hsl(var(--border));margin-left:8px}
.impact-high{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.impact-medium{background:#fef3c7;color:#92400e;border-color:#fde68a}
.impact-low{background:#dcfce7;color:#166534;border-color:#bbf7d0}

/* Audits List (new table-like style) */
.audit-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.audit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid hsl(var(--border));
}
.audit-item:last-child {
    border-bottom: none;
}
.audit-title {
    font-weight: 600;
    font-size: 14px;
}
.audit-display-value {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

/* Waterfall List (new Gantt-style chart) */
.waterfall-container {
    padding: 0 !important; /* Override card-content padding */
}
.waterfall-summary {
    display: grid;
    grid-template-columns: 3fr 5fr 80px 80px;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 24px;
    border-bottom: 1px solid hsl(var(--border));
}
.waterfall-details-toggle {
    padding: 8px 24px;
    font-size: 13px;
    cursor: pointer;
    color: #2563eb;
    background-color: hsl(var(--muted));
    text-align: center;
}
.waterfall-details-toggle:hover {
    text-decoration: underline;
}
.waterfall-details {
    padding: 0 24px 12px;
}
.waterfall-list {
    display: flex;
    flex-direction: column;
}
.waterfall-item {
    display: grid;
    grid-template-columns: 3fr 5fr 80px 80px;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 6px 0;
    border-bottom: 1px solid hsl(var(--border));
}
.waterfall-item:last-child {
    border-bottom: none;
}
.waterfall-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.waterfall-timeline {
    position: relative;
    height: 12px;
    background-color: hsl(var(--muted));
    border-radius: 3px;
}
.waterfall-bar {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 3px;
}
.waterfall-duration, .waterfall-size {
    text-align: right;
    color: #555;
}
/* Resource Type Colors */
.waterfall-bar-document { background-color: #60a5fa; }
.waterfall-bar-script { background-color: #f87171; }
.waterfall-bar-stylesheet { background-color: #a78bfa; }
.waterfall-bar-image { background-color: #34d399; }
.waterfall-bar-font { background-color: #fbbf24; }
.waterfall-bar-other { background-color: #9ca3af; }


/* History List */
.history-list{list-style:none;padding-left:0;margin:0}
.hist-btn{border:none;background:none;text-align:left;flex:1;padding:8px;border-radius:6px;cursor:pointer}
.hist-btn:hover{background:hsl(var(--muted))}
.hist-del{border:none;background:none;color:#991b1b;font-size:12px;cursor:pointer;padding:4px}

/* Report View */
.report-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:24px}
@media(min-width:768px){.report-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.report-grid{grid-template-columns:repeat(4,1fr)}}

/* Ensure hidden attribute works for modal components */
.modal-overlay[hidden]{display:none !important}
.modal-actions[hidden]{display:none !important}

/* Modal spinner (shown at 0–99%) */
.progress-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:180px;height:180px;border:10px solid rgba(229,231,235,.6);border-top-color:#2563eb;border-radius:50%;animation:spin 0.9s linear infinite;display:none}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* What's New icons */
.whats-new-icons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.feature-item{display:flex;gap:12px;align-items:flex-start}
.feature-icon{width:28px;height:28px;flex:0 0 28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:#eef2ff;color:#3b82f6}
.feature-title{font-weight:700}
.feature-desc{font-size:13px;color:#5f6368}
@media (max-width:720px){.whats-new-icons{grid-template-columns:1fr}}