/* Styles ported from the embed demo to provide sidebar UI look-and-feel */
/* Keep this file in the package so consumers can load it via */
/* <link rel="stylesheet" href="/node_modules/@phuoc2409/univer-toolkit/styles/univer-embed.css"> */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: #fff; }
#page { height: 100vh; display:flex; width:100vw; min-width:600px; }
#sidebar { width:300px; flex:0 0 300px; background:#ffffff; color:#3c4043; padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; border-right:1px solid #e0e0e0; }
#sheet { flex:1 1 auto; min-width:300px; min-height:0; background:#f8f9fa; }
.sidebar-title { font-size:18px; font-weight:600; color:#202124; padding-bottom:8px; border-bottom:1px solid #e8eaed; margin-bottom:4px; }
.section { background:#f8f9fa; border:1px solid #dadce0; border-radius:8px; padding:12px; }
.section-title { font-size:13px; font-weight:600; color:#1967d2; margin-bottom:10px; }
.section-header { display:flex; align-items:center; gap:8px; font-size:13px; }
.cell-badge { background:#e8f0fe; color:#1967d2; padding:4px 12px; border-radius:4px; font-weight:600; font-size:14px; border:1px solid #d2e3fc; }
.hint { font-size:11px; color:#5f6368; margin-top:6px; line-height:1.4; }
.sep { height:1px; background:#e8eaed; }
select, input { width:100%; padding:8px 10px; border:1px solid #dadce0; border-radius:4px; background:#ffffff; color:#3c4043; font-size:13px; outline:none; transition:all .2s; }
select:hover, input:hover { border-color:#1a73e8; }
select:focus, input:focus { border-color:#1a73e8; background:#ffffff; box-shadow:0 0 0 2px rgba(26,115,232,0.2); }
.tpl-active { font-size:12px; color:#5f6368; padding:6px 10px; background:#f1f3f4; border-radius:4px; margin-bottom:10px; }
.tpl-active.active { background:#e8f0fe; color:#1967d2; border:1px solid #d2e3fc; }
.tpl-row { display:flex; gap:8px; margin-bottom:8px; }
.tpl-row select, .tpl-row input { flex:1; }
.btn-icon { width:36px; flex:0 0 36px; padding:6px; border:1px solid #dadce0; border-radius:4px; background:#ffffff; color:#5f6368; font-size:16px; cursor:pointer; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.btn-icon:hover { background:#f1f3f4; border-color:#1a73e8; color:#1a73e8; }
.btn-icon.danger:hover { background:#fce8e6; border-color:#d93025; color:#d93025; }
.btn-primary { padding:8px 16px; border:none; border-radius:4px; background:#1a73e8; color:#fff; font-size:13px; font-weight:500; cursor:pointer; transition:background .2s; white-space:nowrap; }
.btn-primary:hover { background:#1967d2; box-shadow:0 1px 2px rgba(60,64,67,0.3); }
.api-row { display:flex; gap:8px; }
.status { font-size:12px; padding:8px 10px; background:#f1f3f4; border-radius:4px; color:#3c4043; border-left:3px solid #1a73e8; margin-top:auto; }
#sidebar::-webkit-scrollbar { width:6px; }
#sidebar::-webkit-scrollbar-track { background:transparent; }
#sidebar::-webkit-scrollbar-thumb { background:#dadce0; border-radius:3px; }
.loading-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(255,255,255,0.7); z-index:100000; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#1a73e8; font-weight:500; backdrop-filter: blur(2px); }
.tag-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#f1f3f4; font-size:12px; }
.chip button { border:0; background:transparent; cursor:pointer; font-weight:700; line-height:1; }
.select2-container .select2-selection--multiple { min-height:38px; padding-bottom:2px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { margin-top:6px; }
.spinner { width:40px; height:40px; border:4px solid #e0e0e0; border-top-color:#1a73e8; border-radius:50%; animation:spin 1s linear infinite; margin-bottom:12px; }
@keyframes spin { to { transform: rotate(360deg); } }