@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  /* shadcn-inspired semantic tokens - dark theme */
  --background: #09090b;
  --foreground: #fafafa;
  --card: #0f0f12;
  --card-foreground: #fafafa;
  --popover: #0f0f12;
  --popover-foreground: #fafafa;
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --secondary: #1c1c22;
  --secondary-foreground: #fafafa;
  --muted: #18181b;
  --muted-foreground: #a1a1aa;
  --accent: #1c1c22;
  --accent-foreground: #fafafa;
  --destructive: #ef4444;
  --border: rgba(99,102,241,0.3);
  --input: #27272a;
  --ring: #6366f1;

  /* Extended palette */
  --success: #22c55e;
  --success-bg: rgba(34,197,94,0.08);
  --warning: #eab308;
  --warning-bg: rgba(234,179,8,0.08);
  --danger: #ef4444;
  --danger-bg: rgba(239,68,68,0.06);
  --info: #3b82f6;
  --info-bg: rgba(59,130,246,0.08);

  /* Layout */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --radius: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
}

html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--background);
  color:var(--foreground);
  font-size:14px;
  height:100vh;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* ═══════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════ */
.sidebar{
  width:var(--sidebar-w);
  background:var(--background);
  border-right:1px solid var(--border);
  position:fixed;top:var(--topbar-h);bottom:0;left:0;
  display:flex;flex-direction:column;
  z-index:100;
  transition:width 0.2s ease;
  overflow:visible;
}
.sb-nav{flex:1;overflow-y:auto;padding:12px 8px}
.sb-nav::-webkit-scrollbar{width:3px}
.sb-nav::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.sb-section{margin-bottom:6px}
.sb-section+.sb-section{border-top:1px solid var(--border);padding-top:8px}

/* Service icon colors */
.sb-link[data-svc="cloudfront"] .i{color:#f97316}
.sb-link[data-svc="ecs"] .i{color:#3b82f6}
.sb-link[data-svc="codepipeline"] .i{color:#22c55e}
.sb-link[data-svc="amplify"] .i{color:#a855f7}
.sb-link[data-svc="s3"] .i{color:#eab308}
.sb-link[data-svc="mediaconvert"] .i{color:#ec4899}
.sb-link[data-svc="rds"] .i{color:#06b6d4}

/* Sidebar collapse */
.sb-toggle{
  position:absolute;top:8px;right:-12px;width:24px;height:24px;
  border-radius:50%;background:var(--primary);color:var(--primary-foreground);
  border:2px solid var(--background);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  transition:transform 0.2s;z-index:101;
}
.sb-toggle:hover{transform:scale(1.1)}
.sidebar.collapsed{width:60px}
.sidebar.collapsed .sb-text,.sidebar.collapsed .sb-lbl,.sidebar.collapsed .tag{display:none}
.sidebar.collapsed .sb-link{justify-content:center;padding:12px 0;margin:4px}
.sidebar.collapsed .sb-toggle{transform:rotate(180deg)}
.sidebar.collapsed~.main{margin-left:60px}
.sidebar.collapsed .sb-foot-bar{display:none!important}
.sidebar.collapsed .sb-user-info{display:none!important}
.sidebar.collapsed .sb-foot{justify-content:center}
.sidebar.collapsed~.topbar .tb-l{padding-left:70px}
.sb-lbl{
  font-size:10px;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--foreground);padding:10px 12px;font-weight:600;
  background:var(--card);border:1px solid var(--primary);border-radius:var(--radius);
  margin:4px 8px;
}
.sb-link{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;margin:4px 8px;
  color:var(--muted-foreground);
  cursor:pointer;font-size:13px;font-weight:450;
  border-radius:var(--radius);
  border:1px solid var(--primary);
  background:var(--card);
  transition:all 0.2s ease;
}
.sb-link:hover{background:var(--accent);color:var(--foreground);transform:translateX(4px)}
.sb-link.active{
  background:rgba(99,102,241,0.3);
  color:#fff;
  font-weight:500;
  border-color:rgba(99,102,241,0.3);
}
.sb-link .i{font-size:16px;min-width:20px;text-align:center;opacity:0.8}
.sb-link.active .i{opacity:1}
.sb-text{font-size:13px}
.sb-link .tag{
  margin-left:auto;font-size:9px;padding:3px 8px;
  border-radius:99px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;
}
.tag-r{color:#fff;background:var(--success)}
.tag-rw{color:#fff;background:var(--warning)}

.sb-foot{
  padding:12px 16px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
  background:var(--card);
}
.sb-user-info{display:flex;flex-direction:column;gap:1px;flex:1}
.sb-foot-actions{display:flex;gap:4px}
.sb-foot-actions a{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius);cursor:pointer;font-size:13px;transition:all 0.15s;color:var(--muted-foreground);border:1px solid transparent}
.sb-foot-actions a:hover{background:var(--accent);color:var(--foreground);border-color:var(--border)}
.sb-foot-actions a:active{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);transform:scale(0.92)}
.sb-foot-bar{display:flex;border-top:1px solid var(--border);background:var(--secondary)}
.sb-foot-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px;font-size:11px;color:var(--muted-foreground);cursor:pointer;transition:all 0.15s;font-weight:500}
.sb-foot-bar a:first-child{border-right:1px solid var(--border)}
.sb-foot-bar a:hover{color:var(--foreground);background:var(--accent)}
.sb-av{
  width:32px;height:32px;min-width:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#a78bfa);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;color:#fff;
}

/* ═══════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════ */
.topbar{
  height:var(--topbar-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;
  background:var(--background);
  border-bottom:1px solid var(--border);
  position:fixed;top:0;left:0;right:0;
  z-index:110;
}
.tb-l{display:flex;align-items:center;gap:16px}
.tb-r{display:flex;align-items:center;gap:10px}
.tb-sep{width:1px;height:20px;background:var(--border)}
.tb-brand{display:flex;align-items:center;gap:8px}
.tb-brand .logo-i{font-size:20px;color:#4fc3f7}
.brand-name{font-size:16px;font-weight:700;color:var(--primary);letter-spacing:-0.4px}
.pg-title{font-size:15px;font-weight:600;letter-spacing:-0.3px}

.search-box{
  display:flex;align-items:center;gap:8px;
  background:var(--muted);border:1px solid var(--border);
  border-radius:var(--radius);padding:7px 12px;width:240px;
  transition:all 0.2s;
}
.search-box:focus-within{border-color:var(--ring);box-shadow:0 0 0 2px rgba(99,102,241,0.15)}
.search-box input{background:none;border:none;color:var(--foreground);font-size:12px;font-family:inherit;outline:none;width:100%}
.search-box input::placeholder{color:var(--muted-foreground)}
.search-box kbd{
  font-size:10px;background:var(--secondary);padding:2px 5px;
  border-radius:4px;color:var(--muted-foreground);
  font-family:'JetBrains Mono',monospace;border:1px solid var(--border);
}

.acc-sel{
  background:var(--secondary);border:1px solid var(--border);
  color:var(--foreground);padding:7px 28px 7px 12px;
  border-radius:var(--radius);font-size:12px;font-family:inherit;
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23a1a1aa' viewBox='0 0 16 16'%3E%3Cpath d='M8 12L2 6h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:all 0.15s;
}
.acc-sel:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgba(99,102,241,0.15)}

.notif{position:relative;cursor:pointer;font-size:18px;padding:6px;border-radius:var(--radius);transition:background 0.15s}
.notif:hover{background:var(--accent)}
.notif .dot{position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--destructive);border:2px solid var(--card)}
.notif-count{
  position:absolute;top:0;right:0;
  min-width:16px;height:16px;padding:0 4px;
  background:var(--destructive);color:#fff;
  font-size:9px;font-weight:700;border-radius:99px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--card);
}

/* Notification Panel */
.notif-panel{
  position:absolute;top:calc(var(--topbar-h) - 4px);right:80px;
  width:360px;max-height:420px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 48px rgba(0,0,0,0.4);
  z-index:200;display:none;overflow:hidden;
}
.notif-panel.open{display:block;animation:fadeUp 0.15s ease}
.notif-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.notif-head span{font-size:14px;font-weight:600}
.notif-head button{
  background:none;border:none;color:var(--muted-foreground);
  font-size:11px;cursor:pointer;font-family:inherit;
  padding:4px 8px;border-radius:var(--radius);transition:all 0.15s;
}
.notif-head button:hover{background:var(--accent);color:var(--foreground)}
.notif-list{max-height:350px;overflow-y:auto;padding:8px}
.notif-list::-webkit-scrollbar{width:3px}
.notif-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.notif-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 12px;border-radius:var(--radius);
  margin-bottom:4px;transition:background 0.1s;
}
.notif-item:hover{background:var(--accent)}
.notif-icon{font-size:16px;min-width:20px;padding-top:1px}
.notif-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.notif-text{font-size:12px;color:var(--foreground);line-height:1.4;word-break:break-word}
.notif-time{font-size:10px;color:var(--muted-foreground)}
.notif-error .notif-text{color:var(--destructive)}
.notif-warn .notif-text{color:var(--warning)}

.btn-out{
  background:transparent;border:1px solid var(--border);
  color:var(--muted-foreground);padding:7px 14px;
  border-radius:var(--radius);cursor:pointer;
  font-size:12px;font-family:inherit;font-weight:500;
  transition:all 0.15s;
}
.btn-out:hover{color:var(--destructive);border-color:var(--destructive);background:var(--danger-bg)}

/* ═══════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════ */
.main{
  margin-left:var(--sidebar-w);margin-top:var(--topbar-h);
  height:calc(100vh - var(--topbar-h));
  transition:margin-left 0.2s ease;
  overflow-y:auto;padding:24px;
}
.main::-webkit-scrollbar{width:6px}
.main::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.main::-webkit-scrollbar-track{background:transparent}

.pnl{display:none;opacity:0;transition:opacity 0.2s ease;pointer-events:none}
.pnl.active{display:block;opacity:1;pointer-events:all}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════
   OVERVIEW
   ═══════════════════════════════════════════ */
.ov-welcome{margin-bottom:32px}
.ov-welcome h1{font-size:24px;font-weight:700;letter-spacing:-0.5px;margin-bottom:4px}
.ov-welcome p{font-size:13px;color:var(--muted-foreground)}

.ov-attn{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-bottom:24px}
.ov-attn-item{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-radius:var(--radius-lg);cursor:pointer;transition:all 0.2s}
.ov-attn-item.fail{background:var(--danger-bg);border:1px solid rgba(239,68,68,0.15)}
.ov-attn-item.fail:hover{border-color:var(--destructive);transform:translateY(-2px);box-shadow:0 4px 12px rgba(239,68,68,0.1)}
.ov-attn-item.warn{background:var(--warning-bg);border:1px solid rgba(234,179,8,0.15)}
.ov-attn-item.warn:hover{border-color:var(--warning);transform:translateY(-2px);box-shadow:0 4px 12px rgba(234,179,8,0.1)}
.ov-attn-left{display:flex;align-items:center;gap:14px}
.ov-attn-num{font-size:32px;font-weight:800;letter-spacing:-1px}
.ov-attn-item.fail .ov-attn-num{color:var(--destructive)}
.ov-attn-item.warn .ov-attn-num{color:var(--warning)}
.ov-attn-detail{display:flex;flex-direction:column}
.ov-attn-detail strong{font-size:13px;font-weight:600}
.ov-attn-detail span{font-size:11px;color:var(--muted-foreground);margin-top:1px}
.ov-attn-act{font-size:12px;color:var(--muted-foreground);font-weight:500;opacity:0;transition:opacity 0.15s}
.ov-attn-item:hover .ov-attn-act{opacity:1}

/* Overview Pipeline Cards */
.ov-pipe-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;margin-bottom:8px;
  border-radius:var(--radius);border:1px solid var(--border);
  background:var(--muted);transition:all 0.15s;
}
.ov-pipe-card:last-child{margin-bottom:0}
.ov-pipe-card:hover{border-color:color-mix(in srgb, var(--border) 100%, white 20%)}
.ov-pipe-ok{border-left:3px solid var(--success)}
.ov-pipe-fail{border-left:3px solid var(--destructive)}
.ov-pipe-prog{border-left:3px solid var(--info)}
.ov-pipe-info{display:flex;flex-direction:column;gap:6px}
.ov-pipe-name{font-size:13px;font-weight:600}
.ov-pipe-stages{display:flex;gap:4px;align-items:center}
.ov-stage-dot{width:8px;height:8px;border-radius:50%;background:var(--border)}
.dot-ok{background:var(--success)}
.dot-fail{background:var(--destructive)}
.dot-prog{background:var(--info);animation:pulse 2s infinite}
.ov-pipe-status{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500}
.ov-pipe-ok .ov-pipe-status{color:var(--success)}
.ov-pipe-fail .ov-pipe-status{color:var(--destructive)}
.ov-pipe-prog .ov-pipe-status{color:var(--info)}
.ov-pipe-icon{font-size:14px;font-weight:700}

/* Overview Log Rows */
.ov-log-row{
  display:flex;align-items:flex-start;gap:8px;
  padding:6px 8px;margin-bottom:2px;
  border-radius:4px;font-family:'JetBrains Mono',monospace;
  transition:background 0.1s;
}
.ov-log-row:hover{background:var(--accent)}
.ov-log-time{font-size:10px;color:var(--muted-foreground);min-width:64px;opacity:0.7;padding-top:1px}
.ov-log-sev{
  font-size:9px;font-weight:700;min-width:30px;
  padding:1px 4px;border-radius:3px;text-align:center;
  background:var(--muted);color:var(--muted-foreground);
}
.ov-log-error .ov-log-sev{background:var(--danger-bg);color:var(--destructive)}
.ov-log-warn .ov-log-sev{background:var(--warning-bg);color:var(--warning)}
.ov-log-info .ov-log-sev{background:var(--info-bg);color:var(--info)}
.ov-log-msg{font-size:11px;color:var(--foreground);opacity:0.85;word-break:break-all;line-height:1.5}
.ov-log-error .ov-log-msg{color:var(--destructive)}
.ov-log-warn .ov-log-msg{color:var(--warning)}

/* ═══════════════════════════════════════════
   LOG VIEWER
   ═══════════════════════════════════════════ */
.log-header,.log-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.log-header h2,.log-head h2{font-size:17px;font-weight:600}
.log-tabs{
  display:inline-flex;gap:2px;
  background:transparent;border:1px solid var(--primary);
  border-radius:50px;padding:3px;
}
.log-tab{
  padding:6px 14px;font-size:12px;font-weight:500;
  cursor:pointer;color:var(--foreground);
  border-radius:50px;
  transition:all 0.15s;
}
.log-tab:hover{background:rgba(99,102,241,0.1)}
.log-tab.active{background:var(--primary);color:var(--primary-foreground);box-shadow:0 1px 4px rgba(99,102,241,0.4)}

.log-box{
  background:var(--background);border:1px solid var(--border);
  border-radius:var(--radius-lg);
  display:flex;flex-direction:column;
  height:calc(100vh - var(--topbar-h) - 160px);
}
.log-bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;background:var(--card);
  border-bottom:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.log-bar input{
  flex:1;background:var(--muted);border:1px solid var(--border);
  color:var(--foreground);padding:8px 12px;border-radius:var(--radius);
  font-size:12px;font-family:inherit;transition:all 0.15s;
}
.log-bar input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgba(99,102,241,0.15)}
.log-bar select{
  background:var(--muted);border:1px solid var(--border);
  color:var(--foreground);padding:8px 10px;border-radius:var(--radius);
  font-size:11px;font-family:inherit;max-width:200px;
}
.log-bar select:focus{outline:none;border-color:var(--ring)}

.live-b,.live-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;color:var(--success);font-weight:600;
  background:var(--success-bg);padding:5px 10px;border-radius:99px;
}
.live-b::before,.live-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}

/* Time pills & controls */
.time-pills{display:flex;gap:4px;align-items:center}
.tp{padding:5px 10px;font-size:11px;font-weight:500;cursor:pointer;color:var(--muted-foreground);border-radius:var(--radius);transition:all 0.15s;border:1px solid var(--border);background:var(--muted)}
.tp:hover{color:var(--foreground);border-color:var(--ring)}
.tp.active{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary);box-shadow:0 1px 4px rgba(99,102,241,0.3)}
.tz-sel{background:var(--muted);border:1px solid var(--border);color:var(--foreground);padding:4px 8px;border-radius:var(--radius);font-size:10px;font-family:inherit;font-weight:500}
.tz-sel:focus{outline:none;border-color:var(--ring)}
.btn-clear{background:none;border:1px solid var(--primary);color:var(--primary);padding:4px 10px;border-radius:50px;font-size:10px;font-family:inherit;cursor:pointer;font-weight:500;transition:all 0.15s}
.btn-clear:hover{background:rgba(99,102,241,0.12)}
.auto-toggle{display:flex;align-items:center;gap:6px;cursor:pointer}
.auto-toggle input{display:none}
.auto-slider{width:28px;height:16px;background:var(--border);border-radius:99px;position:relative;transition:background 0.2s}
.auto-slider::before{content:'';position:absolute;width:12px;height:12px;left:2px;top:2px;background:var(--foreground);border-radius:50%;transition:transform 0.2s}
.auto-toggle input:checked+.auto-slider{background:var(--success)}
.auto-toggle input:checked+.auto-slider::before{transform:translateX(12px)}

.log-stream{
  flex:1;overflow-y:auto;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;line-height:1.9;
  padding:8px 0;
}
.log-stream::-webkit-scrollbar{width:4px}
.log-stream::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

.ll{padding:6px 16px;border-bottom:1px solid var(--border)}
.ll:last-child{border-bottom:none}
.ll:hover{background:rgba(99,102,241,0.03)}
.ll.error .ll-msg{color:var(--destructive)}
.ll.warn .ll-msg{color:var(--warning)}
.ll-ts{font-size:12px;color:var(--muted-foreground);font-family:'JetBrains Mono',monospace}
.ll-msg{font-size:12px;color:var(--foreground);font-family:'JetBrains Mono',monospace;word-break:break-all;line-height:1.5;margin-top:2px}

/* ═══════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════ */
.tbl{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
table{width:100%;border-collapse:collapse}
thead{background:var(--muted)}
th{padding:12px 16px;text-align:left;color:var(--muted-foreground);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:0.5px}
td{padding:12px 16px;border-top:1px solid var(--border);font-size:13px}
tbody tr{transition:background 0.1s}
tbody tr:hover{background:var(--accent)}

/* ═══════════════════════════════════════════
   PILLS / BADGES
   ═══════════════════════════════════════════ */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:99px;font-size:11px;font-weight:500;
}
.pill::before{content:'';width:6px;height:6px;border-radius:50%}
.pill-g{background:var(--success-bg);color:var(--success)}.pill-g::before{background:var(--success)}
.pill-r{background:var(--danger-bg);color:var(--destructive)}.pill-r::before{background:var(--destructive)}
.pill-a{background:var(--warning-bg);color:var(--warning)}.pill-a::before{background:var(--warning)}
.pill-b{background:var(--info-bg);color:var(--info)}.pill-b::before{background:var(--info)}

/* ═══════════════════════════════════════════
   S3 - AWS Console style
   ═══════════════════════════════════════════ */
.s3-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.s3-breadcrumb{font-size:14px;font-weight:500}
.s3-breadcrumb a{color:var(--primary);cursor:pointer;font-weight:400}
.s3-breadcrumb a:hover{text-decoration:underline}
.s3-count{font-size:12px;color:var(--muted-foreground)}

/* Bucket list */
.s3-bucket-list{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.s3-bucket{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s}
.s3-bucket:last-child{border-bottom:none}
.s3-bucket:hover{background:var(--accent)}
.s3-bucket-icon{font-size:18px}
.s3-bucket-name{flex:1;font-size:13px;font-weight:500;color:var(--primary)}
.s3-bucket-date{font-size:12px;color:var(--muted-foreground)}

/* Objects table */
.s3-table{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.s3-table-head{display:grid;grid-template-columns:2fr 1fr 1.5fr 70px;padding:10px 18px;background:var(--muted);border-bottom:1px solid var(--border);gap:12px}
.s3-th{font-size:11px;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:0.5px}
.s3-table-row{display:grid;grid-template-columns:2fr 1fr 1.5fr 70px;padding:12px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s;gap:12px}
.s3-table-row:last-child{border-bottom:none}
.s3-table-row:hover{background:var(--accent)}
.s3-td{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s3-link{color:var(--primary);font-weight:500}
.s3-key{font-family:'JetBrains Mono',monospace;font-size:12px}
.s3-muted{color:var(--muted-foreground);font-size:12px}
.s3-del{background:none;border:1px solid rgba(239,68,68,0.3);color:var(--destructive);padding:4px 10px;border-radius:var(--radius);font-size:11px;font-family:inherit;cursor:pointer;font-weight:500;transition:all 0.15s}
.s3-del:hover{background:var(--destructive);color:#fff}
.s3-actions{display:inline-flex;gap:6px}
.s3-act-btn{padding:6px 14px;font-size:11px;font-weight:600;font-family:inherit;border-radius:50px;cursor:pointer;transition:all 0.15s;border:1px solid var(--primary);background:transparent;color:var(--primary)}
.s3-act-btn:hover{background:rgba(99,102,241,0.1)}
.s3-actions-active .s3-act-del{background:var(--destructive);color:#fff;border-color:var(--destructive)}
.s3-actions-active .s3-act-dl{background:var(--success);color:#fff;border-color:var(--success)}

/* ═══════════════════════════════════════════
   CLOUDFRONT TILES
   ═══════════════════════════════════════════ */
.cf-grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cf-tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden}
.cf-tile:hover{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary),0 8px 20px rgba(99,102,241,0.1)}
.cf-tile-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.cf-tile-status{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.cf-deployed{background:var(--success);box-shadow:0 0 6px rgba(34,197,94,0.4)}
.cf-pending{background:var(--warning);animation:pulse 2s infinite}
.cf-tile-badge{font-size:10px;font-weight:600;color:var(--success);text-transform:uppercase;letter-spacing:0.5px}
.cf-tile-alias{font-size:15px;font-weight:700;color:var(--foreground);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-tile-id{font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--primary);font-weight:500;margin-bottom:4px;opacity:0.8}
.cf-tile-origin{font-size:11px;color:var(--muted-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:14px}
.cf-tile-bottom{border-top:1px solid var(--border);padding-top:12px;display:flex;justify-content:center}
.cf-tile-btn{font-size:11px;font-weight:600;color:var(--muted-foreground);background:var(--muted);padding:6px 16px;border-radius:99px;transition:all 0.15s}
.cf-tile:hover .cf-tile-btn{background:var(--primary);color:var(--primary-foreground)}

/* ═══════════════════════════════════════════
   PIPELINE TABLE
   ═══════════════════════════════════════════ */
.cp-table{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.cp-row{display:grid;grid-template-columns:1.2fr 0.6fr 3fr 0.7fr 0.7fr;align-items:center;padding:12px 16px;gap:10px}
.cp-header{background:var(--muted);border-bottom:1px solid var(--border);font-size:10px;font-weight:600;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:0.5px;padding:10px 16px}
.cp-data{border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.1s}
.cp-data:hover{background:var(--accent)}
.s3-item.cp-data{padding:6px 16px}
.cp-col-name strong{font-size:13px}
.cp-col-source{font-size:11px;color:var(--muted-foreground);white-space:normal;word-break:break-word;line-height:1.4}
.cp-col-time{font-size:11px;color:var(--muted-foreground)}
.cp-col-action{display:flex;justify-content:flex-end;gap:6px}
.cp-row-wrap:last-child .cp-data{border-bottom:none}
.cp-expand{display:none;padding:14px 16px;background:var(--muted);border-bottom:1px solid var(--border)}
.cp-row-wrap.expanded .cp-expand{display:block}
.cp-row-wrap.expanded .cp-data{background:var(--accent)}
.btn-run{background:var(--success-bg);color:var(--success);border:1px solid rgba(34,197,94,0.2);padding:5px 12px;border-radius:99px;cursor:pointer;font-size:10px;font-weight:600;font-family:inherit;transition:all 0.15s}
.btn-run:hover{background:var(--success);color:#fff}
.btn-stop{background:var(--danger-bg);color:var(--destructive);border:1px solid rgba(239,68,68,0.2);padding:5px 12px;border-radius:99px;cursor:pointer;font-size:10px;font-weight:600;font-family:inherit;transition:all 0.15s}
.btn-stop:hover{background:var(--destructive);color:#fff}

/* Pipeline Stats & Toolbar */
.cp-stats{margin-bottom:16px}
.cps{display:flex;gap:12px;flex-wrap:wrap}
.cps-item{font-size:13px;color:var(--foreground);background:transparent;border:1px solid var(--primary);padding:8px 14px;border-radius:50px}
.cps-item strong{margin-right:4px}
.cps-ok strong{color:var(--success)}
.cps-fail strong{color:var(--destructive)}
.cps-prog strong{color:var(--info)}
.cp-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cp-toolbar input{background:var(--muted);border:1px solid var(--primary);color:var(--foreground);padding:8px 14px;border-radius:50px;font-size:12px;font-family:inherit;width:220px;transition:border-color 0.15s}
.cp-toolbar input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(99,102,241,0.15)}
.cp-filters{display:flex;gap:4px}
.cp-fil{padding:6px 12px;font-size:11px;font-weight:500;cursor:pointer;color:var(--foreground);border-radius:50px;border:1px solid var(--primary);background:transparent;transition:all 0.15s}
.cp-fil:hover{background:rgba(99,102,241,0.1)}
.cp-fil.active{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}
.mc-fil{padding:6px 12px;font-size:11px;font-weight:500;cursor:pointer;color:var(--foreground);border-radius:50px;border:1px solid var(--primary);background:transparent;transition:all 0.15s}
.mc-fil:hover{background:rgba(99,102,241,0.1)}
.mc-fil.active{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}

/* Pipeline Stages (expanded view) */
.pipe-stages{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ps{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;text-align:center;min-width:80px;transition:all 0.15s}
.ps:hover{transform:translateY(-1px)}
.ps .n{font-size:10px;color:var(--muted-foreground);font-weight:500}
.ps .v{font-size:11px;font-weight:600;margin-top:3px}
.ps-wrap{position:relative;display:inline-flex}
.ps-retry{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:var(--destructive);color:#fff;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;box-shadow:0 2px 6px rgba(239,68,68,0.4);transition:transform 0.15s}
.ps-retry:hover{transform:scale(1.2)}
.ps.ok{border-color:rgba(34,197,94,0.3);background:var(--success-bg)}.ps.ok .v{color:var(--success)}
.ps.fail{border-color:rgba(239,68,68,0.3);background:var(--danger-bg)}.ps.fail .v{color:var(--destructive)}
.ps.prog{border-color:rgba(59,130,246,0.3);background:var(--info-bg)}.ps.prog .v{color:var(--info)}
.pa{color:var(--muted-foreground);font-size:14px;opacity:0.5}
.modal-close:hover{background:var(--accent);color:var(--foreground)}
.modal-body{padding:20px 24px}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border)}
.modal-lg{width:700px;max-width:90vw}
.modal-field{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.mf-label{font-size:12px;color:var(--muted-foreground);font-weight:500}
.mf-value{font-size:13px;font-weight:600}
.modal-sep{height:1px;background:var(--border);margin:16px 0}

/* Approval specific */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:300;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex;animation:fadeUp 0.2s ease}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);width:440px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,0.5)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-head h3{font-size:16px;font-weight:700}
.modal-close{background:none;border:none;color:var(--muted-foreground);font-size:18px;cursor:pointer;padding:4px 8px;border-radius:var(--radius);transition:all 0.15s}
.modal-close:hover{background:var(--accent);color:var(--foreground)}
.modal-body{padding:20px 24px}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid var(--border)}
.modal-lg{width:700px;max-width:90vw}
.modal-field{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.mf-label{font-size:12px;color:var(--muted-foreground);font-weight:500}
.mf-value{font-size:13px;font-weight:600}
.modal-body textarea{width:100%;background:var(--background);border:1px solid var(--border);color:var(--foreground);padding:10px 14px;border-radius:var(--radius);font-size:13px;font-family:inherit;resize:vertical;transition:border-color 0.15s}
.modal-body textarea:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgba(99,102,241,0.15)}
.build-log-stream{max-height:400px;overflow-y:auto;background:var(--background);border:1px solid var(--border);border-radius:var(--radius);margin-top:12px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.7}
.build-log-stream::-webkit-scrollbar{width:4px}
.build-log-stream::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.bl-line{padding:1px 0;color:var(--muted-foreground)}
.bl-line.bl-err{color:var(--destructive);font-weight:500}
.bl-line.bl-ok{color:var(--success)}

.appr-info{margin-bottom:20px}
.appr-pipeline{font-size:16px;font-weight:700;margin-bottom:4px}
.appr-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-foreground)}
.appr-dot{width:4px;height:4px;border-radius:50%;background:var(--muted-foreground)}
.appr-notice{background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:14px;font-size:13px;color:var(--muted-foreground);text-align:center}
.appr-choices{display:flex;gap:10px;margin-bottom:16px}
.appr-choice{flex:1;cursor:pointer;display:block}
.appr-choice input{display:none}
.appr-choice-content{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--border);border-radius:var(--radius-lg);transition:all 0.15s}
.appr-choice input:checked+.appr-choice-content{border-color:var(--primary);background:rgba(99,102,241,0.05)}
.appr-approve input:checked+.appr-choice-content{border-color:var(--success);background:var(--success-bg)}
.appr-reject input:checked+.appr-choice-content{border-color:var(--destructive);background:var(--danger-bg)}
.appr-choice-icon{font-size:20px;font-weight:700;min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--muted)}
.appr-approve .appr-choice-icon{color:var(--success)}
.appr-reject .appr-choice-icon{color:var(--destructive)}
.appr-approve input:checked~.appr-choice-content .appr-choice-icon{background:var(--success);color:#fff}
.appr-reject input:checked~.appr-choice-content .appr-choice-icon{background:var(--destructive);color:#fff}
.appr-choice-content div strong{font-size:13px;display:block}
.appr-choice-content div span{font-size:11px;color:var(--muted-foreground)}
.modal-body textarea{width:100%;background:var(--background);border:1px solid var(--border);color:var(--foreground);padding:10px 14px;border-radius:var(--radius);font-size:13px;font-family:inherit;resize:vertical;transition:border-color 0.15s}
.modal-body textarea:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgba(99,102,241,0.15)}
.build-log-stream{max-height:400px;overflow-y:auto;background:var(--background);border:1px solid var(--border);border-radius:var(--radius);margin-top:12px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.7}
.build-log-stream::-webkit-scrollbar{width:4px}
.build-log-stream::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.bl-line{padding:1px 0;color:var(--muted-foreground)}
.bl-line.bl-err{color:var(--destructive);font-weight:500}
.bl-line.bl-ok{color:var(--success)}

/* ═══════════════════════════════════════════
   FORMS (Admin)
   ═══════════════════════════════════════════ */
.section-head{margin-bottom:20px}
.section-head h2{font-size:18px;font-weight:700;margin-bottom:4px}
.section-head p{font-size:13px;color:var(--muted-foreground)}

.fc{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;
}
.fr{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.fr input,.fr select{
  background:var(--background);border:1px solid var(--border);
  color:var(--foreground);padding:9px 14px;border-radius:var(--radius);
  font-size:13px;font-family:inherit;min-width:140px;transition:all 0.15s;
}
.fr input:focus,.fr select:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 2px rgba(99,102,241,0.15)}
.fr input::placeholder{color:var(--muted-foreground)}

.btn-p{
  background:var(--primary);color:var(--primary-foreground);border:none;
  padding:9px 18px;border-radius:var(--radius);cursor:pointer;
  font-size:12px;font-weight:600;font-family:inherit;
  transition:all 0.15s;
  box-shadow:0 1px 3px rgba(99,102,241,0.3);
}
.btn-p:hover{opacity:0.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(99,102,241,0.3)}

.btn-d{
  background:transparent;color:var(--destructive);
  border:1px solid rgba(239,68,68,0.2);
  padding:5px 12px;border-radius:var(--radius);cursor:pointer;
  font-size:11px;font-family:inherit;font-weight:500;transition:all 0.15s;
}
.btn-d:hover{background:var(--destructive);color:#fff}

.chk{display:flex;align-items:center;gap:6px;color:var(--muted-foreground);font-size:12px;cursor:pointer}
.chk input{accent-color:var(--primary);width:15px;height:15px;border-radius:4px}

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast{
  position:fixed;bottom:20px;right:20px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 20px;
  font-size:13px;font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  z-index:200;display:none;
  max-width:320px;
}
.toast.show{display:block;animation:slideUp 0.25s ease}
.toast.ok{border-left:3px solid var(--success)}
.toast.err{border-left:3px solid var(--destructive)}
@keyframes slideUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════════
   STATES
   ═══════════════════════════════════════════ */
.loading{color:var(--muted-foreground);padding:48px;text-align:center;font-size:13px}
.err-msg{
  color:var(--destructive);padding:16px;
  background:var(--danger-bg);border:1px solid rgba(239,68,68,0.15);
  border-radius:var(--radius);font-size:13px;
}
.empty{text-align:center;padding:48px;color:var(--muted-foreground);font-size:13px}
.empty::before{content:'';display:block;width:48px;height:48px;margin:0 auto 12px;background:var(--muted);border-radius:50%;opacity:0.5}

/* ═══════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════ */
.login-page{
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;background:var(--background);
}
.login-box{
  width:400px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:48px;
  box-shadow:0 16px 48px rgba(0,0,0,0.4);
}
.login-box h1{font-size:24px;font-weight:700;color:var(--foreground);text-align:center;margin-bottom:4px}
.login-box .sub{text-align:center;color:var(--muted-foreground);font-size:13px;margin-bottom:32px}
.login-box form{display:flex;flex-direction:column;gap:14px}
.login-box input{
  background:var(--background);border:1px solid var(--border);
  color:var(--foreground);padding:12px 16px;border-radius:var(--radius);
  font-size:14px;font-family:inherit;transition:all 0.15s;
}
.login-box input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
.login-box input::placeholder{color:var(--muted-foreground)}
.login-box button{
  background:var(--primary);color:var(--primary-foreground);border:none;
  padding:12px;border-radius:var(--radius);font-size:14px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:all 0.15s;
  box-shadow:0 2px 8px rgba(99,102,241,0.3);
  margin-top:4px;
}
.login-box button:hover{opacity:0.9;transform:translateY(-1px)}
.login-box .error{color:var(--destructive);font-size:12px;text-align:center}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:1200px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .sidebar{width:60px}
  .sidebar .sb-text,.sidebar .sb-lbl,.sidebar .tag{display:none}
  .sb-link{padding:12px 0;justify-content:center;border-radius:0}
  .main{margin-left:60px;padding:12px}
  .stats{grid-template-columns:1fr 1fr}
  .ov-grid{grid-template-columns:1fr}
  .search-box{display:none}
  .brand-name{display:none}
  .topbar{padding:8px 12px}
  .section-head h2{font-size:18px}
  .cp-table{overflow-x:auto}
  .cp-row{min-width:600px}
  .tbl{overflow-x:auto}
  .tbl table{min-width:500px}
  .log-header{flex-direction:column;gap:8px;align-items:flex-start}
  .cp-toolbar{flex-direction:column;gap:8px}
  .cp-filters{flex-wrap:wrap}
  .cps{flex-wrap:wrap;gap:8px}
  .cps-item{padding:6px 10px;font-size:11px}
  .modal{width:95vw!important;max-width:95vw!important;margin:10px}
  .modal-lg{width:95vw!important;max-width:95vw!important}
}
@media(max-width:480px){
  .sidebar{width:0;overflow:hidden;position:fixed;z-index:1000;height:100vh;transition:width 0.2s}
  .sidebar.mob-open{width:248px;overflow:visible}
  .main{margin-left:0;padding:10px}
  .stats{grid-template-columns:1fr}
  .tb-r{gap:6px}
  .login-box{width:calc(100% - 32px);padding:32px}
  .topbar .brand-name{display:none}
  .cp-row{min-width:400px}
  .tbl table{min-width:350px;font-size:11px}
  .section-head h2{font-size:16px}
  .section-head p{font-size:11px}
  .modal{padding:12px}
  .modal-body{padding:12px}
  .mob-toggle{display:inline-flex!important}
}

/* ═══════════════════════════════════════════
   THEME SWITCH  Dark [===O] Light
   ═══════════════════════════════════════════ */
.theme-lbl{font-size:11px;font-weight:500;color:var(--muted-foreground)}
.mob-toggle{display:none;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;background:var(--secondary);color:var(--foreground);font-size:18px}
.toggle-switch{position:relative;display:inline-block;width:40px;height:22px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;cursor:pointer;inset:0;
  background:var(--primary);border-radius:99px;
  transition:background 0.3s;
}
.toggle-slider::before{
  content:'';position:absolute;
  width:16px;height:16px;left:3px;bottom:3px;
  background:#fff;border-radius:50%;
  transition:transform 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(18px)}

/* ═══════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════ */
body.light{
  --background: #ffffff;
  --foreground: #09090b;
  --card: #ffffff;
  --card-foreground: #09090b;
  --popover: #ffffff;
  --popover-foreground: #09090b;
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --destructive: #ef4444;
  --border: rgba(99,102,241,0.25);
  --input: #e4e4e7;
  --ring: #6366f1;

  --success: #16a34a;
  --success-bg: rgba(22,163,74,0.06);
  --warning: #ca8a04;
  --warning-bg: rgba(202,138,4,0.06);
  --danger: #dc2626;
  --danger-bg: rgba(220,38,38,0.05);
  --info: #2563eb;
  --info-bg: rgba(37,99,235,0.06);
}
body.light .sidebar{background:#fafafa;box-shadow:1px 0 4px rgba(0,0,0,0.04)}
body.light .topbar{background:#fafafa;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
body.light .st:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08)}
body.light .pipe:hover{box-shadow:0 4px 12px rgba(0,0,0,0.06)}
body.light .log-box{background:#fafafa}
body.light .toast{box-shadow:0 8px 32px rgba(0,0,0,0.12)}
body.light .login-box{box-shadow:0 16px 48px rgba(0,0,0,0.08)}
body.light .ll:hover{background:rgba(99,102,241,0.04)}
body.light .sb-av{box-shadow:0 2px 8px rgba(99,102,241,0.2)}
body.light .sb-link.active{background:rgba(99,102,241,0.55);color:#fff;border-color:rgba(99,102,241,0.55);font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.2)}
body.light .welcome-banner{background:linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.03));border-color:rgba(99,102,241,0.12)}

/* JSON syntax highlighting - works in both themes */
.json-key { color: #6bb7ff; }
.json-str { color: #a5d6a7; }
.json-num { color: #ffcc80; }
.json-bool { color: #ce93d8; }

body.light .json-key { color: #0550ae; }
body.light .json-str { color: #116329; }
body.light .json-num { color: #953800; }
body.light .json-bool { color: #8250df; }

/* Audit timeline */
.audit-date{font-size:11px;font-weight:600;color:var(--muted-foreground);padding:12px 16px 4px;text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--border);margin-bottom:4px}
.audit-group{margin-bottom:8px}
.audit-item{display:flex;gap:10px;padding:8px 16px;border-radius:var(--radius);transition:background 0.15s}
.audit-item:hover{background:var(--muted)}
.audit-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--secondary);font-size:13px;flex-shrink:0}
.audit-body{flex:1;min-width:0}
.audit-top{display:flex;align-items:center;gap:8px}
.audit-action{font-size:12px;font-weight:500;color:var(--foreground);text-transform:capitalize}
.audit-time{font-size:10px;color:var(--muted-foreground);margin-left:auto}
.audit-detail{font-size:11px;color:var(--muted-foreground);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:400px}

/* Permissions view */
.perm-group{margin-bottom:16px;background:var(--muted);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.perm-acc-name{font-size:12px;font-weight:600;padding:10px 14px;background:var(--secondary);border-bottom:1px solid var(--border);color:var(--foreground)}
.perm-table{width:100%;border-collapse:collapse;font-size:12px}
.perm-table th{text-align:left;padding:8px 14px;color:var(--muted-foreground);font-weight:500;font-size:11px}
.perm-table td{padding:8px 14px;border-top:1px solid var(--border)}
.perm-svc{font-weight:500;text-transform:capitalize}
.perm-rm{border:1px solid var(--primary);background:transparent;color:var(--foreground);font-size:11px;cursor:pointer;border-radius:50px;padding:5px 14px;font-weight:500;white-space:nowrap}
.perm-rm:hover{background:rgba(99,102,241,0.15)}

/* Loading skeleton shimmer */
.skeleton{background:var(--muted);border-radius:var(--radius);position:relative;overflow:hidden}
.skeleton::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);animation:shimmer 1.5s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
body.light .skeleton::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,0.04),transparent)}

/* Confirm modal */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:300;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.2s}
.confirm-overlay.open{opacity:1;pointer-events:all;visibility:visible}
.confirm-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:380px;width:90%;text-align:center}
.confirm-box h4{font-size:15px;margin-bottom:8px;color:var(--foreground)}
.confirm-box p{font-size:12px;color:var(--muted-foreground);margin-bottom:20px}
.confirm-btns{display:flex;gap:10px;justify-content:center}
.confirm-btns button{padding:8px 20px;border-radius:var(--radius);font-size:12px;font-weight:500;cursor:pointer;border:none}
.confirm-cancel{background:var(--secondary);color:var(--secondary-foreground)}
.confirm-ok{background:var(--destructive);color:#fff}

/* Credentials copy modal */
.cred-box{background:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-top:12px;font-family:monospace;font-size:12px;word-break:break-all}

/* Service indicators removed */

/* Login fade-in */
.login-card{animation:fadeInUp 0.4s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Sidebar active indicator */
.sb-link.active{border-left:3px solid var(--primary);background:rgba(99,102,241,0.08)}

/* Table row hover - consolidated */

/* Smooth panel transitions - consolidated above */

/* RDS time range buttons */
.rds-time-btn{padding:6px 12px;font-size:11px;border:none;border-right:1px solid var(--primary);cursor:pointer;background:transparent;color:var(--foreground);font-weight:500;transition:all 0.15s}
.rds-time-btn:last-of-type{border-right:none}
.rds-time-btn.active{background:var(--primary);color:var(--primary-foreground)}
.rds-time-btn:hover:not(.active){background:rgba(99,102,241,0.1)}

/* Global focus style */
input:focus,select:focus,textarea:focus{border-color:var(--primary)!important;box-shadow:0 0 0 2px rgba(99,102,241,0.15)!important}
.btn-p{border:1px solid var(--primary);background:var(--primary);color:var(--primary-foreground);border-radius:50px;padding:6px 14px;font-size:12px;cursor:pointer;font-weight:500}
.btn-s{border:1px solid var(--primary)!important;border-radius:50px!important;color:var(--primary)!important;background:transparent!important}
.btn-d{border:1px solid var(--destructive)!important;border-radius:50px!important;color:var(--destructive)!important;background:transparent!important}
.acc-sel{border:1px solid var(--primary)!important;border-radius:50px!important}

/* Inputs - sidebar border match */
table input[type="checkbox"]{border-radius:4px!important;border:1px solid var(--border)!important}

/* Hover fill for primary-bordered buttons handled by btn-ol class */

/* Primary outline button hover */
.btn-ol{border:1px solid var(--primary)!important;border-radius:50px!important;background:transparent!important;color:var(--foreground)!important;cursor:pointer;font-weight:500;transition:background 0.15s}
.btn-ol:hover{background:rgba(99,102,241,0.12)!important}