/* ============ Components: buttons, cards, tables, modals, drawers, flashes ============ */
/* ---- Cards / containers ---- */
.card{background:var(--card);border-radius:var(--radius-card);box-shadow:0 0 0 1px rgba(8,14,26,.07),0 1px 3px rgba(8,14,26,.06)}
.card-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hairline)}
.card-h h2{font-size:15.5px;font-weight:700;flex:none}
.card-b{padding:16px}
.card-f{padding:10px 16px;border-top:1px solid var(--hairline);display:flex;align-items:center;gap:10px}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:32px;padding:0 14px;border-radius:20px;font-size:13.5px;font-weight:600;line-height:1;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:box-shadow .12s,background .12s,color .12s;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:#0972d3;color:#fff;border-color:#0972d3}
.btn-primary:hover{background:#0569c5;border-color:#0569c5}
.btn-primary:active{background:#045fb4}
.btn-normal{background:#fff;color:#0f1b2a;border-color:#6e7c8c}
.btn-normal:hover{background:#f2f4f5;border-color:#414d5c}
.btn-danger{background:#d91515;color:#fff;border-color:#d91515}
.btn-danger:hover{background:#b70f0f}
.btn-ghost{border-color:transparent;background:transparent;color:var(--blue-dark)}
.btn-ghost:hover{background:#eff3f8}
.btn:disabled{opacity:.45;cursor:not-allowed!important}
.btn-sm{height:26px;padding:0 11px;font-size:12.5px;border-radius:14px}
.btn-lg{height:38px;padding:0 18px;font-size:14px;border-radius:22px}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#414d5c;border:none;background:transparent;cursor:pointer}
.icon-btn:hover{background:#eaeeef}

/* ---- Inline alerts / flashes ---- */
.flash-root{position:relative;z-index:800;display:flex;flex-direction:column;gap:10px;padding:10px 24px 0}
.flash{display:flex;gap:10px;padding:12px 16px;border-radius:8px;align-items:flex-start;font-size:13.5px;box-shadow:0 1px 1px rgba(0,28,36,.16),0 0 1px rgba(9,20,49,.13);animation:flashIn .25s cubic-bezier(.2,.7,.3,1) both;position:relative}
@keyframes flashIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.flash.f-success{background:#fafdf7;border:1px solid #a6d68d}.flash.f-success .fi{color:#1d8102}
.flash.f-error{background:#fdf4f4;border:1px solid #f0b1ae}.flash.f-error .fi{color:#d91515}
.flash.f-warning{background:#fffcf5;border:1px solid #eddcb5}.flash.f-warning .fi{color:#c46a04}
.flash.f-info{background:#f5fafe;border:1px solid #a8d3ec}.flash.f-info .fi{color:#0073bb}
.flash b{font-weight:600}
.flash .fx{margin-left:auto;color:#656c71;border-radius:50%;flex:none;padding:1px}
.flash .fx:hover{background:rgba(0,0,0,.06)}
.inline-alert{display:flex;gap:10px;padding:11px 14px;border-radius:6px;font-size:13px;margin:0 0 14px;border:1px solid}
.inline-alert.i-error{background:#fdf4f4;border-color:#f0b1ae;color:#5f1212}.inline-alert.i-error svg{color:var(--red)}
.inline-alert.i-info{background:#f5fafe;border-color:#a8d3ec;color:#21384a}.inline-alert.i-info svg{color:var(--info-blue)}
.inline-alert.i-success{background:#fafdf7;border-color:#a6d68d;color:#274627}.inline-alert.i-success svg{color:#1d8102}
.inline-alert a{color:#0972d3}

/* ---- Status badges (icon + text, faithful style) ---- */
.badge{display:inline-flex;align-items:center;gap:6px;font-weight:400;font-size:13px;vertical-align:middle}
.badge .dot{width:8px;height:8px;border-radius:50%;flex:none}
.badge.st-green .dot{background:#037f0c}.badge.st-green{color:#047006}
.badge.st-red .dot{background:#d91515}.badge.st-red{color:#bb0b0b}
.badge.st-grey .dot{background:#95a3b2}.badge.st-grey{color:#5f6b7a}
.badge.st-blue .dot{background:#0073bb}.badge.st-blue{color:#0073bb}
.badge.st-orange .dot{background:#ffb84d}.badge.st-orange{color:#c46a04}
.badge .mini-spin{width:12px;height:12px;border-width:1.8px;margin:0}

/* copy affordance */
.copyable{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.copyable .copy-btn{visibility:hidden;color:#77909f;padding:1px;border-radius:4px;display:inline-flex;flex:none;cursor:pointer}
.copy-btn.copied{color:#1d8102}
.copyable:hover .copy-btn,.copy-btn.always{visibility:visible}
.copy-btn:hover{color:var(--link)}

/* ---- Tables ---- */
.tbl-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.filter-input{position:relative;flex:0 1 300px;min-width:180px;display:flex;align-items:center;background:#fff;border:1px solid #6e7c8c;border-radius:20px;height:32px;padding:0 30px 0 30px}
.filter-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(9,114,211,.25)}
.filter-input svg{position:absolute;left:11px;color:#75808f;width:14px;height:14px}
.filter-input input{border:none;outline:none;flex:1;background:transparent;font-size:13px}
.chipbar{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:#ebf1f8;border:1px solid #bfd3e8;border-radius:14px;height:24px;padding:0 6px 0 10px;font-size:12.5px;color:#14344d}
.chip button{display:inline-flex;border-radius:50%}
.chip button:hover{background:#d8e5f0}
table.aws-tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.aws-tbl-wrap{overflow-x:auto;background:#fff;border-radius:0 0 var(--radius-card) var(--radius-card)}
.awscard--flat{border-top:1px solid var(--hairline)}
.aws-tbl th{font-size:12px;font-weight:600;color:#454f5b;text-align:left;padding:11px 16px;border-bottom:1px solid var(--border);white-space:nowrap;background:#f7f8f8;user-select:none}
.aws-tbl th.sortable{cursor:pointer}
.aws-tbl th.sortable:hover{color:#16191f}
.aws-tbl th .sort-arrow{font-size:9px;margin-left:4px;color:#414d5b}
.aws-tbl td{padding:12px 16px;border-bottom:1px solid var(--hairline);vertical-align:middle;max-width:340px}
.aws-tbl tbody tr:hover{background:var(--row-hover)}
.aws-tbl tr.sel{background:#f0f6ff}
.aws-tbl tr.clickrow{cursor:pointer}
.check-cell{width:40px;text-align:center;padding-left:16px!important}
.row-sel-indic{position:relative}
tr.has-selection td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:3px;background:var(--sel-indicator);border-radius:0 2px 2px 0}
input[type=checkbox]{appearance:none;width:16px;height:16px;border:1.5px solid #57657a;border-radius:3px;background:#fff;cursor:pointer;display:inline-grid;place-content:center;vertical-align:middle}
input[type=checkbox]:checked{background:#0972d3;border-color:#0972d3}
input[type=checkbox]:checked::before{content:"";width:8.5px;height:4.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(.5px,-1px)}
input[type=radio]{appearance:none;width:15px;height:15px;border:1.5px solid #57657a;border-radius:50%;background:#fff;cursor:pointer;display:inline-grid;place-content:center;vertical-align:middle}
input[type=radio]:checked{border-color:#0972d3}
input[type=radio]:checked::before{content:"";width:7px;height:7px;border-radius:50%;background:#0972d3}
.tbl-foot{display:flex;align-items:center;padding:10px 16px;font-size:12.5px;color:var(--text-2);border-top:1px solid var(--hairline);flex-wrap:wrap;gap:8px}
.pager{display:flex;align-items:center;gap:2px;margin-left:auto}
.pager button{height:28px;min-width:28px;border-radius:4px;padding:0 6px;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;color:#37455c}
.pager button.cur{background:#f2f4f5;border:1px solid #d5dbdb;font-weight:700;color:#16191f}
.pager button:hover:not(:disabled):not(.cur){background:#f0f6ff;color:var(--link)}
.pager button:disabled{opacity:.35;cursor:default}
.resource-count{padding:12px 16px;border-top:1px solid var(--hairline);color:var(--text-2);font-size:13px}
.tbl-empty{padding:46px 16px;text-align:center;background:#fff;border-radius:0 0 var(--radius-card) var(--radius-card)}
.skel-row td{height:47px}
.skel{position:relative;overflow:hidden;background:#e7ebee;border-radius:4px;height:12px;display:block}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:shimmer 1.3s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* column preferences modal check grid */
.pref-cols{columns:2;column-gap:16px;font-size:13px;padding:2px 4px}
.pref-cols label{display:flex;gap:8px;align-items:center;padding:5px 2px;break-inside:avoid;cursor:pointer}

/* ---- Tabs ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--hairline);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:10px 14px;font-size:13.5px;color:#47586a;border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer;font-weight:500}
.tab:hover{color:#16191f}
.tab.active{color:var(--blue-dark);border-bottom-color:var(--orange);font-weight:600}
.subtab-rail{background:#eef1f2;border-bottom:1px solid var(--hairline)}

/* ---- Modals ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,7,17,.62);z-index:900;display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;animation:mfade .15s both}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:10px;width:min(520px,94vw);box-shadow:var(--shadow-modal);animation:mup .18s cubic-bezier(.2,.8,.3,1) both;max-height:calc(100vh - 120px);display:flex;flex-direction:column}
@keyframes mup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.modal.sm{width:420px}.modal.lg{width:720px}.modal.xl{width:min(980px,96vw)}
.modal-h{padding:18px 22px 12px;font-size:17px;font-weight:700;display:flex;gap:10px;align-items:flex-start}
.modal-b{padding:0 22px 8px;overflow-y:auto}
.modal-f{padding:16px 22px 20px;display:flex;justify-content:flex-end;gap:10px;border-radius:0 0 10px 10px}
.modal-x{position:absolute;right:14px;top:14px;color:#414d5c;border-radius:50%;padding:5px;display:flex}
.modal-x:hover{background:#eaeeef}
.modal{position:relative}
.confirm-list{list-style:disc;padding-left:22px;color:#414d5b;font-size:13px}
.danger-head{color:#16191f}

/* ---- Help drawer / info drawer ---- */
.drawer-scrim{position:fixed;inset:0;background:rgba(0,7,17,.42);z-index:890;animation:mfade .15s both}
.drawer{position:fixed;top:0;right:0;bottom:0;background:#fff;z-index:895;width:480px;max-width:92vw;box-shadow:-4px 0 18px rgba(0,0,0,.24);animation:slideL .22s cubic-bezier(.25,.7,.3,1) both;display:flex;flex-direction:column}
@keyframes slideL{from{transform:translateX(48px);opacity:.4}to{transform:none;opacity:1}}
.drawer-h{padding:18px 22px;display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid var(--hairline)}
.drawer-h h3{font-size:17px;font-weight:700}
.drawer-b{padding:16px 22px;overflow-y:auto;font-size:13.5px;color:#303b47;line-height:1.6}
.drawer-b p{margin-bottom:12px}
.drawer-b ul{margin:0 0 12px 20px}
.drawer-b li{margin-bottom:6px}
.drawer-f{padding:14px 22px;border-top:1px solid var(--hairline);display:flex;justify-content:space-between}
.info-dot{display:inline-flex;color:#0073bb;cursor:pointer;border-radius:50%;vertical-align:-2px;margin-left:2px}
.info-dot:hover{color:#0a4a74}

/* ---- Forms ---- */
.form-field{margin-bottom:18px}
.field-label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#181d22}
.opt-tag{color:var(--text-2);font-weight:400}
.text-input,.select{width:100%;max-width:420px;height:32px;border:1px solid #6e7c8c;border-radius:6px;padding:0 10px;font-size:13.5px;background:#fff;outline:none}
textarea.text-input{height:auto;padding:8px 10px;resize:vertical;font-family:var(--mono);font-size:12.5px;line-height:1.5}
.text-input:focus,.select:focus,textarea.text-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(9,114,211,.25)}
.select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23545e6c'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:26px;max-width:420px}
.field-hint{font-size:12px;color:var(--text-2);margin-top:4px}
.field-error{font-size:12.5px;color:#cc1414;margin-top:4px;display:flex;gap:5px;align-items:flex-start}
.text-input.invalid,.select.invalid{border-color:#d91515;box-shadow:0 0 0 3px rgba(217,21,21,.18)}
.charcount{float:right;font-size:11.5px;color:var(--text-3);font-weight:400}
.radio-card{display:flex;gap:10px;border:1px solid #dde1e4;border-radius:8px;padding:11px 13px;cursor:pointer;align-items:flex-start;background:#fff}
.radio-card:hover{border-color:#a8b3bd}
.radio-card.checked{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.radio-card input{pointer-events:none;margin-top:2px}
.rc-title{font-weight:600;font-size:13.5px}
.rc-sub{font-size:12.5px;color:var(--text-2)}

/* tooltip-ish title attr replaced by visual cues only */

/* ---- Empty state ---- */
.empty-state{background:#fff;border-radius:var(--radius-card);text-align:center;padding:52px 24px;box-shadow:0 0 0 1px rgba(8,14,26,.07)}
.empty-icon{margin:0 auto 14px;width:64px;height:64px;border-radius:50%;background:#f0f3f6;display:flex;align-items:center;justify-content:center;color:#9aa7b3}
.empty-state h3{font-size:16px;margin-bottom:6px}
.empty-state p{color:var(--text-2);max-width:430px;margin:0 auto 16px;font-size:13.5px}

/* ---- Breadcrumb path (S3 folders etc.) ---- */
.path-crumb{font-size:14px}
.path-crumb a{margin-right:2px}
.path-crumb .sep{color:var(--text-2);margin:0 3px}

/* notifications badge pulse */
.bell-badge.zeroed{display:none}

/* misc links collection row */
.link-bunch a{margin-right:14px}
.kv-table{width:100%;border-collapse:collapse;font-size:13px}
.kv-table th{width:220px;text-align:left;color:#454f5b;font-weight:400;padding:6px 12px 6px 0;vertical-align:top}
.kv-table td{padding:6px 0;word-break:break-word}
.detail-header{display:flex;gap:14px;align-items:flex-start;padding:4px 0 12px}
.big-name{font-size:19px;font-weight:700;word-break:break-word}
.props-tabs-extra{background:#fff}
@media(max-width:600px){
  .kv-table th{width:130px}
  .aws-tbl td,.aws-tbl th{padding:10px 10px}
  .filter-input{flex-basis:170px}
}