/* ============================================================
   TITLE BAR  +  COMPACT TOOLBAR  (replaces heavy ribbon)
============================================================ */

/* ── Title Bar ─────────────────────────────────────────── */
#header{
    flex-shrink:0;
    background:var(--white);
    border-bottom:1px solid var(--border);
    z-index:300;
    overflow:visible;
    box-shadow:0 1px 0 var(--border),var(--sh-xs);
}

.title-bar{
    height:var(--titlebar-h);
    display:flex;align-items:center;
    padding:0 10px;gap:6px;
    border-bottom:2px solid var(--blue);
    background:var(--white);
    position:relative;
}

/* Logo */
.app-logo{display:flex;align-items:center;gap:7px;flex-shrink:0;text-decoration:none}
.logo-icon{
    width:26px;height:26px;
    background:var(--blue);color:var(--white);
    border-radius:5px;
    display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:13px;letter-spacing:-1px;
    box-shadow:0 2px 6px rgba(0,0,255,.28);
}
.logo-text{
    font-weight:800;font-size:12px;
    letter-spacing:.18em;text-transform:uppercase;
    color:var(--black);white-space:nowrap;
}
.title-sep{width:1px;height:18px;background:var(--border);margin:0 3px}

/* Project name */
.project-name{
    border:1.5px solid transparent;background:transparent;
    color:var(--text);font-weight:600;font-size:13px;
    padding:3px 8px;border-radius:var(--r);
    width:180px;transition:all .16s;
}
.project-name:hover{border-color:var(--border);background:var(--s3)}
.project-name:focus{border-color:var(--blue);background:var(--white);
    outline:none;box-shadow:var(--sh-blu)}

/* QAT */
.qat{display:flex;align-items:center;gap:1px}
.qat-btn{
    width:28px;height:28px;padding:0;
    background:transparent;border:1px solid transparent;
    border-radius:var(--r);color:var(--text3);
    display:flex;align-items:center;justify-content:center;
    transition:all .13s;
}
.qat-btn:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}

/* File tab ribbon tabs strip */
.ribbon-shell{background:var(--s2);border-bottom:1px solid var(--border)}
.ribbon-tabs{
    display:flex;align-items:flex-end;gap:1px;
    padding:0 6px;height:28px;
    background:var(--s2);
}
.rtab{
    padding:0 12px;height:28px;border:none;
    background:transparent;font-size:11px;font-weight:600;
    color:var(--text3);border-radius:4px 4px 0 0;
    border-bottom:2px solid transparent;transition:all .13s;
}
.rtab:hover{color:var(--blue);background:var(--blue-lt)}
.rtab.active{color:var(--blue);border-bottom-color:var(--blue);background:var(--white)}
.rtab-file{background:var(--blue)!important;color:#fff!important;font-weight:700;margin-right:2px}
.rtab-file:hover{background:var(--blue-dk)!important}

/* File dropdown */
.file-menu-wrap{position:relative;display:flex;align-items:flex-end}
.file-dropdown{
    position:absolute;top:100%;left:0;
    background:var(--white);border:1px solid var(--border);
    border-radius:var(--r-lg);box-shadow:var(--sh-lg);
    min-width:210px;padding:5px;z-index:20000;
    display:none;flex-direction:column;margin-top:3px;
    animation:dropIn .15s cubic-bezier(.16,1,.3,1);
}
.file-dropdown.show{display:flex}
@keyframes dropIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}
.fd-item{
    display:flex;align-items:center;gap:9px;
    padding:8px 12px;border:none;background:transparent;
    border-radius:var(--r);font-size:12.5px;font-weight:500;
    color:var(--text2);text-align:left;width:100%;cursor:pointer;
    transition:all .11s;
}
.fd-item:hover{background:var(--blue-lt);color:var(--blue)}
.fd-item svg{color:var(--text3);flex-shrink:0;width:14px;height:14px}
.fd-item:hover svg{color:var(--blue)}
.fd-sep{height:1px;background:var(--border);margin:4px 8px}

/* ── COMPACT HORIZONTAL TOOLBAR (replaces full ribbon) ── */
.ribbon-panel{
    display:none;align-items:stretch;
    height:var(--toolbar-h);
    padding:0 6px;gap:0;
    overflow-x:auto;overflow-y:visible;
    background:var(--white);
}
.ribbon-panel::-webkit-scrollbar{height:3px}
.ribbon-panel::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.ribbon-panel.active{display:flex}

/* Group container — full height, items centred vertically */
.rg{
    display:flex;align-items:center;gap:2px;
    flex-shrink:0;padding:0 6px;
    border-right:1px solid var(--border);
    height:100%;
}
.rg:last-child{border-right:none}
.rg-label{display:none}

/* Inner body for column-layout groups (Font, Paragraph) */
.rg-body{
    display:flex;align-items:center;gap:3px;
    height:100%;
}

/* Large icon+label button */
.rb-large{
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;
    padding:4px 8px;border:1px solid transparent;
    background:transparent;border-radius:var(--r);
    min-width:46px;color:var(--text2);
    font-size:9px;font-weight:600;
    transition:all .13s;
    height:calc(var(--toolbar-h) - 8px);
    white-space:nowrap;flex-shrink:0;
    overflow:visible;
}
.rb-large svg{width:18px;height:18px;flex-shrink:0}
.rb-large span{display:block;text-align:center;line-height:1.2;margin-top:1px}
.rb-large:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}
.rb-large.active{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}
.rb-large.rb-danger:hover{background:#fff0f0;border-color:#fcc;color:#cc0000}

/* Small button (used inside rb-col) */
.rb-sm{
    display:flex;align-items:center;gap:4px;
    padding:3px 8px;border:1px solid transparent;
    background:transparent;border-radius:var(--r);
    font-size:11px;font-weight:600;color:var(--text2);
    transition:all .13s;white-space:nowrap;height:26px;
    flex-shrink:0;
}
.rb-sm svg{width:13px;height:13px;flex-shrink:0}
.rb-sm:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}

/* Column of 2–3 small buttons, vertically centred in group */
.rb-col{
    display:flex;flex-direction:column;
    justify-content:center;gap:2px;
    min-width:90px;
    height:100%;
}

/* Font section inside toolbar */
.rb-fmt{
    width:26px;height:26px;padding:0;
    border:1px solid transparent;background:transparent;
    border-radius:var(--r);font-size:13px;color:var(--text2);
    display:flex;align-items:center;justify-content:center;transition:all .13s;
}
.rb-fmt:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}
.rb-fmt.active{background:var(--blue-lt);border-color:var(--blue);color:var(--blue);font-weight:800}

.rb-icon{
    width:26px;height:26px;padding:3px;
    border:1px solid transparent;background:transparent;
    border-radius:var(--r);color:var(--text3);
    display:flex;align-items:center;justify-content:center;transition:all .13s;
}
.rb-icon svg{width:14px;height:14px}
.rb-icon:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}
.rb-icon.active{background:var(--blue-lt);border-color:var(--blue);color:var(--blue)}

.rb-xs{
    width:26px;height:24px;padding:0;
    border:1px solid var(--border2);background:var(--white);
    border-radius:var(--r);font-size:10px;font-weight:700;color:var(--text2);
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:all .13s;
}
.rb-xs:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}

.r-select{
    height:24px;border:1px solid var(--border2);border-radius:var(--r);
    font-size:11.5px;padding:0 5px;background:var(--white);color:var(--text);
    transition:border-color .13s;
}
.r-select:focus{border-color:var(--blue);outline:none}
.r-select-lg{width:110px}
.r-num{
    width:36px;height:24px;border:1px solid var(--border2);
    border-radius:var(--r);font-size:12px;text-align:center;
    padding:0 2px;background:var(--white);color:var(--text);
}
.r-num:focus{border-color:var(--blue);outline:none}
.r-divider{width:1px;height:20px;background:var(--border);margin:0 2px}
.r-check{
    display:flex;align-items:center;gap:5px;
    font-size:11.5px;font-weight:500;color:var(--text2);cursor:pointer;
}
.r-check input[type="checkbox"]{width:13px;height:13px;accent-color:var(--blue)}

.color-swatch{
    position:relative;width:26px;height:24px;
    border:1px solid var(--border2);border-radius:var(--r);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;background:var(--white);overflow:hidden;
}
.color-swatch input[type="color"]{
    position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;
}
.color-swatch:hover{border-color:var(--blue);background:var(--blue-lt)}

/* Title bar right buttons */
.title-bar-right{display:flex;align-items:center;gap:5px;margin-left:auto;flex-shrink:0}
.title-bar-left{display:flex;align-items:center;gap:6px;min-width:0;flex:1}

.btn-shortcuts{
    display:flex;align-items:center;gap:4px;
    padding:4px 10px;background:var(--s3);
    border:1px solid var(--border);border-radius:var(--r);
    color:var(--text2);font-size:11px;font-weight:600;transition:all .13s;
}
.btn-shortcuts:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}

.btn-export-png,.btn-export-pdf{
    padding:4px 12px;border-radius:var(--r);
    font-size:11px;font-weight:700;transition:all .13s;cursor:pointer;
    height:26px;display:flex;align-items:center;
}
.btn-export-png{
    background:var(--white);color:var(--blue);border:1.5px solid var(--blue);
}
.btn-export-pdf{
    background:var(--white);color:var(--black);border:1.5px solid var(--border2);
}
.btn-export-png:hover{background:var(--blue);color:var(--white)}
.btn-export-pdf:hover{background:var(--black);color:var(--white);border-color:var(--black)}

/* shortcut hint inside buttons */
.rb-shortcut-hint{
    display:inline-block;margin-left:2px;
    font-size:8px;color:var(--text4);
    background:var(--s3);border:1px solid var(--border2);
    border-radius:2px;padding:0 2px;
}