/* ============================================================
   石榴毕设绘图助手：顶部按钮布局与观感修复（仅样式覆盖，不修改 app.min.js）
   修复点：
   1) 按钮 margin-top:-10px 上浮压叠上方搜索框（重叠）
   2) 按钮文字因 padding-top:2 贴底被 overflow:hidden 裁切
   3) 按钮之间无明显界限 → 加边框 / 圆角 / 间距 / 阴影
   4) 按钮分布不均匀 → 容器改 flex + 统一 gap，宽度按内容自适应
   5) 按钮字体较小、整体较小 → 字号 14px、高度 30px、左右内边距加大
   6) 窄屏(<=1180px)按钮行溢出右缘被裁（按钮重合/消失）
   方案：宽屏保持原版右对齐观感并增强辨识度；窄屏菜单条换行，按钮独占一行，
        顶部区域加高 32px，工具栏与主区同步下移。
   ============================================================ */

/* 1) 按钮容器：flex 布局 + 统一间距（解决分布不均） */
.geButtonContainer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* 2) 按钮本体：清晰边界（边框+圆角+阴影）、字体加大、尺寸加大、垂直居中 */
.geButtonContainer .geBtn,
.geButtonContainer .geBtn.gePrimaryBtn {
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    margin-top: 0 !important;
    padding: 0 14px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 30px !important;
    line-height: 28px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center !important;
    border: 1px solid #d87a06 !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
    box-sizing: border-box !important;
    background-image: none !important;
    min-width: 72px !important;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

/* 3) 注入的「石榴课程 / 石榴官网」红色链接按钮：边界与主按钮一致 */
.geButtonContainer .geBtn.pdm-red {
    background-color: #d93025 !important;
    border: 1px solid #b3261e !important;
    color: #ffffff !important;
}

.geButtonContainer .geBtn:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .28) !important;
    transform: translateY(-1px);
}

/* 4) 窄屏：菜单条换行，按钮独占第二行右对齐；
      顶部区 64px -> 96px，工具栏 64 -> 96，主区 103 -> 135 */
@media (max-width: 1180px) {
    .geMenubar {
        flex-wrap: wrap !important;
    }

    .geButtonContainer {
        flex: 1 1 100% !important;
        justify-content: flex-end !important;
        margin-left: 0 !important;
        padding-right: 8px !important;
    }

    .geMenubarContainer {
        height: 96px !important;
    }

    .geToolbarContainer {
        top: 96px !important;
    }

    .geSidebarContainer,
    .geFormatContainer,
    .geDiagramContainer,
    .geHsplit {
        top: 135px !important;
    }
}

/* 5) 窗口过窄时按钮允许更紧凑（防止横向溢出） */
@media (max-width: 700px) {
    .geButtonContainer .geBtn {
        min-width: 0 !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
}