/* ============================================================
 * funnyai.com - 电子表格视图（funny_grid.php）专用样式
 * 文件：/office/css/funny_grid.css
 * 创建：2026-08-31（从 funny_grid.php 拆出来，方便管理）
 * 说明：所有 .fg-* 前缀的样式集中在这里。
 *      引入方式：PageHeader->addCSS('/office/css/funny_grid.css?v=...')
 * ============================================================ */

/* 高亮行（兼容老代码用的 .hilite） */
.hilite { background: #fda; }

/* ----------------------------------------------------------
 * 登录态相关（早期版本用过，目前默认未启用，保留向后兼容）
 * ---------------------------------------------------------- */
.fg-login-bar {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 16px;
    margin: 0 auto 12px;
    max-width: 960px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: #92400e;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.10);
}
.fg-login-bar .emoji { font-size: 22px; }
.fg-login-bar .text { flex: 1 1 auto; }
.fg-login-bar a.btn-login {
    background: #f59e0b; color: #fff; padding: 6px 16px;
    border-radius: 6px; text-decoration: none; font-weight: 600;
    font-size: 13px; transition: background 0.2s;
}
.fg-login-bar a.btn-login:hover { background: #d97706; }

/* 已登录时显示 */
.fg-user-bar {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border: 1px solid #3b82f6;
    border-radius: 8px;
    padding: 8px 16px;
    margin: 0 auto 12px;
    max-width: 960px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: #1e40af;
}

/* ----------------------------------------------------------
 * 未登录悬浮角标（右上角小药丸）
 * ---------------------------------------------------------- */
.fg-login-hint {
    position: fixed; top: 8px; right: 8px; z-index: 9998;
    background: rgba(245, 158, 11, 0.95); color: #fff;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12px; box-shadow: 0 2px 8px rgba(245,158,11,0.3);
    text-decoration: none; font-weight: 500;
    display: inline-flex; align-items: center; gap: 4px;
}
.fg-login-hint:hover { background: #d97706; color: #fff; text-decoration: none; }

/* ----------------------------------------------------------
 * 文档元信息条（doc-name + 访问范围 chip + 作者）
 * ---------------------------------------------------------- */
.fg-meta-bar {
    background: transparent;
    border: none;
    padding: 4px 16px;
    margin: 12px auto 8px;
    max-width: 960px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #4b5563;
}
.fg-meta-bar .doc-name { font-size: 15px; font-weight: 600; color: #1f2937; }
.fg-meta-bar .public-chip {
    padding: 2px 10px; border-radius: 999px;
    color: #fff; font-size: 12px; font-weight: 600;
}
.fg-meta-bar .creator { color: #6b7280; }

/* ----------------------------------------------------------
 * 顶部工具栏
 * ---------------------------------------------------------- */
.fg-toolbar {
    background: transparent;
    padding: 6px 14px;
    margin: 0 auto 8px;
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4b5563;
}
.fg-toolbar select,
.fg-toolbar input[type=text] {
    padding: 5px 10px; border: 1px solid #d1d5db; border-radius: 4px;
    font-size: 13px; background: #fff;
}
.fg-toolbar label { color: #6b7280; margin-right: 4px; }
.fg-toolbar input[type=button],
.fg-toolbar button,
.fg-toolbar a.btn {
    padding: 5px 14px; border-radius: 5px; border: 1px solid #d1d5db;
    background: #fff; color: #1f2937; font-size: 13px; cursor: pointer;
    text-decoration: none; transition: all 0.15s; font-family: inherit;
}
.fg-toolbar input[type=button]:hover,
.fg-toolbar button:hover,
.fg-toolbar a.btn:hover {
    background: #f3f4f6; border-color: #9ca3af;
}
.fg-toolbar input[type=button].primary,
.fg-toolbar button.primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; border-color: #1d4ed8;
}
.fg-toolbar input[type=button].primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
}
.fg-toolbar .sep { width: 1px; height: 20px; background: #e5e7eb; margin: 0 4px; }

/* 当前 ID / 错误提示 */
#ID { color: #2563eb; font-weight: 600; }
#Msg { color: #dc2626; font-weight: 500; margin-left: 8px; }

/* ----------------------------------------------------------
 * 全局覆盖（覆盖 login.css 旧 body 限制 + 灰背景）
 * ---------------------------------------------------------- */
html, body {
    width: 100% !important; max-width: none !important;
    margin: 0 !important; text-align: left !important;
}
body { background: #f3f4f6; margin: 0; }

/* ----------------------------------------------------------
 * 电子表格区域（v25 布局美化）
 * - main-column 居中且限制最大宽度
 * - #sheet 占满 main-column 宽度与剩余高度
 * - 圆角 + 阴影让表格有"卡片"感
 * ---------------------------------------------------------- */
.main-column {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px 24px;
    box-sizing: border-box;
}
#sheet {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
    padding: 12px;
    /* 2026-08-31 v25: 让 #sheet 自适应内部 jSUI 内容高度，而不是固定的 vh，
       这样就不会有大片空白 */
    display: inline-block;
    min-width: 100%;
    box-sizing: border-box;
}
#sheet .jSUI {
    width: 100% !important;
    border-radius: 6px;
    overflow: visible;
}
#sheet .jSEnclosure {
    width: 100% !important;
    border-radius: 4px;
}
#sheet .jSScroll,
#sheet .jSEditPane {
    border-radius: 4px;
    width: 100% !important;
}
/* 表格标题栏配色 */
#sheet .jSHeader {
    background: linear-gradient(180deg, #e0f2fe, #f0f9ff) !important;
    border-radius: 6px 6px 0 0;
}
#sheet .jSTitle {
    font-weight: 700 !important;
    color: #0c4a6e !important;
    font-size: 15px !important;
}
/* 让顶栏按钮在窄屏也能换行好看 */
@media (max-width: 720px) {
    .fg-toolbar { padding: 8px; }
    .fg-meta-bar { padding: 6px 8px; flex-wrap: wrap; }
}