/* ===== Aikuto Simple Ledger (Frontend) ===== */
/* 强作用域：避免污染主题/后台 */
.aikuto-ledger-root,
.aikuto-ledger-form{
    box-sizing:border-box;
}
.aikuto-ledger-root * ,
.aikuto-ledger-form * {
    box-sizing:border-box;
}

.aikuto-ledger-root{
    --ledger-bg: #ffffff;
    --ledger-border: rgba(0,0,0,.10);
    --ledger-text: #111827;
    --ledger-subtle: rgba(17,24,39,.70);
    --ledger-primary: #2271b1;
    --ledger-primary-hover:#1e5f93;
    --ledger-card-radius: 14px;
    --ledger-shadow: 0 6px 22px rgba(0,0,0,.06);
    color: var(--ledger-text);
    font-size: 15px;
    line-height: 1.55;
}

.aikuto-ledger-root .ledger-card{
    background: var(--ledger-bg);
    border: 1px solid var(--ledger-border);
    border-radius: var(--ledger-card-radius);
    box-shadow: var(--ledger-shadow);
    padding: 14px;
    margin: 12px 0;
}

.aikuto-ledger-root .subtle,
.aikuto-ledger-form .subtle{
    color: var(--ledger-subtle);
    font-size: 13px;
}

.aikuto-ledger-root .ledger-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom: 10px;
}

.aikuto-ledger-root .ledger-left select{
    min-width: 220px;
    padding: 8px 10px;
    border: 1px solid var(--ledger-border);
    border-radius: 10px;
    background: #fff;
}

.aikuto-ledger-root .ledger-tabs{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

/* ✅ 修复“按钮空白”：强制设置按钮文字色 + 背景色 */
.aikuto-ledger-root .ledger-btn,
.aikuto-ledger-form .ledger-btn{
    appearance:none;
    border: 1px solid var(--ledger-primary) !important;
    background: var(--ledger-primary) !important;
    color: #fff !important;               /* ✅ 关键：不让主题把文字色覆盖成透明/同色 */
    padding: 8px 12px;
    border-radius: 12px;
    cursor:pointer;
    font-weight: 700;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-decoration:none !important;
    line-height: 1;
    transition: all .15s ease;
}

.aikuto-ledger-root .ledger-btn:hover,
.aikuto-ledger-form .ledger-btn:hover{
    background: var(--ledger-primary-hover) !important;
    border-color: var(--ledger-primary-hover) !important;
    color:#fff !important;
}

.aikuto-ledger-root .ledger-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}

.aikuto-ledger-root .ledger-tabs .ledger-btn.active{
    background: #111827 !important;
    border-color:#111827 !important;
}

.aikuto-ledger-root .ledger-filters .ledger-filter-grid{
    display:grid;
    grid-template-columns: 2fr 1fr 1fr 2fr;
    gap:12px;
}

.aikuto-ledger-root .ledger-filters .field label{
    display:block;
    font-weight: 700;
    margin-bottom: 6px;
}

.aikuto-ledger-root input[type="text"],
.aikuto-ledger-root input[type="number"],
.aikuto-ledger-form input[type="text"],
.aikuto-ledger-form input[type="number"],
.aikuto-ledger-form input[type="date"],
.aikuto-ledger-root input[type="date"]{
    width:100%;
    padding: 9px 10px;
    border: 1px solid var(--ledger-border);
    border-radius: 10px;
    background:#fff;
    color: var(--ledger-text);
}

.aikuto-ledger-root .ledger-filter-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top: 10px;
}

.aikuto-ledger-root .ledger-filter-tip{
    color: var(--ledger-subtle);
    font-size: 13px;
}

.aikuto-ledger-root .summary-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:12px;
}

.aikuto-ledger-root .summary-box{
    border: 1px solid var(--ledger-border);
    border-radius: 12px;
    padding: 12px;
    background:#fff;
}

.aikuto-ledger-root .summary-box .k{
    color: var(--ledger-subtle);
    font-weight: 700;
    font-size: 13px;
}

.aikuto-ledger-root .summary-box .v{
    margin-top: 6px;
    font-size: 18px;
    font-weight: 800;
}

.aikuto-ledger-root .progress-bar{
    margin-top: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.08);
    overflow:hidden;
}
.aikuto-ledger-root .progress-bar > div{
    height: 100%;
    background: var(--ledger-primary);
    width: 0%;
}

.aikuto-ledger-root .ledger-h3{
    margin:0 0 10px 0;
    font-size: 16px;
    font-weight: 900;
}

.aikuto-ledger-root .ledger-table{
    width:100%;
    border-collapse: collapse;
}
.aikuto-ledger-root .ledger-table th,
.aikuto-ledger-root .ledger-table td{
    text-align:left;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-variant-numeric: tabular-nums;
}

.aikuto-ledger-root .ledger-list{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    overflow:hidden;
}

.aikuto-ledger-root .ledger-row{
    display:grid;
    grid-template-columns: 140px 140px 1fr;
    gap:10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0,0,0,.08);
    align-items:start;
}
.aikuto-ledger-root .ledger-row:last-child{ border-bottom:none; }
.aikuto-ledger-root .ledger-row.header{
    background: rgba(34,113,177,.08);
    font-weight: 900;
}

.aikuto-ledger-root .ledger-month-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.aikuto-ledger-root .ledger-month{
    font-weight: 900;
}

.aikuto-ledger-root .ledger-actions{
    margin-top: 12px;
}

/* ===== Calendar ===== */
.aikuto-ledger-root .ledger-calendar{
    border: 1px solid var(--ledger-border);
    border-radius: var(--ledger-card-radius);
    background:#fff;
    box-shadow: var(--ledger-shadow);
    padding: 12px;
    margin: 12px 0;
}

.aikuto-ledger-root .calendar-head{
    margin-bottom: 10px;
}

.aikuto-ledger-root .cal-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.aikuto-ledger-root .cal-title{
    text-align:center;
    flex: 1;
}
.aikuto-ledger-root .cal-ym{
    font-weight: 1000;
    font-size: 18px;
}

.aikuto-ledger-root .calendar-grid{
    display:grid;
    grid-template-columns: repeat(7, 1fr);
    gap:8px;
}

.aikuto-ledger-root .calendar-cell{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 12px;
    padding: 8px;
    min-height: 110px;
    background:#fff;
    overflow:hidden;
}

.aikuto-ledger-root .calendar-cell.is-empty{
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.06);
}

.aikuto-ledger-root .calendar-cell .d{
    font-weight: 900;
    font-size: 14px;
    margin-bottom: 6px;
}

.aikuto-ledger-root .calendar-cell .t{
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--ledger-primary);
}

.aikuto-ledger-root .calendar-cell .items{
    font-size: 12px;
    color: rgba(17,24,39,.80);
    line-height: 1.35;
}

/* messages */
.aikuto-ledger-root .ledger-msg-ok,
.aikuto-ledger-form .ledger-msg-ok{
    margin-top:10px;
    padding:10px 12px;
    border-radius:12px;
    background:#e7f7ed;
    border:1px solid #b7e1c3;
}

.aikuto-ledger-root .ledger-msg-err,
.aikuto-ledger-form .ledger-msg-err{
    margin-top:10px;
    padding:10px 12px;
    border-radius:12px;
    background:#f8d7da;
    border:1px solid #f5c6cb;
}

/* form */
.aikuto-ledger-form{
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 14px;
    padding: 14px;
    background:#fff;
    box-shadow: 0 6px 22px rgba(0,0,0,.06);
}
.aikuto-ledger-form label{
    display:block;
    font-weight: 900;
    margin: 10px 0 6px 0;
}
.aikuto-ledger-form .ledger-add-form{
    margin-top: 8px;
}

/* responsive */
@media (max-width: 1100px){
    .aikuto-ledger-root .ledger-filter-grid{
        grid-template-columns: 1fr 1fr;
    }
    .aikuto-ledger-root .summary-grid{
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 640px){
    .aikuto-ledger-root .ledger-filter-grid{
        grid-template-columns: 1fr;
    }
    .aikuto-ledger-root .summary-grid{
        grid-template-columns: 1fr;
    }
    .aikuto-ledger-root .ledger-row{
        grid-template-columns: 120px 120px 1fr;
    }
}
/* =========================
   ✅ Bravada/主题强覆盖修复：提交按钮“可点但不可见”
   一定放在 ledger.css 最末尾
   ========================= */
body .aikuto-ledger-form .ledger-add-form button.ledger-btn,
body .aikuto-ledger-form .ledger-add-form .ledger-btn,
body .aikuto-ledger-root .ledger-btn,
body .aikuto-ledger-root button.ledger-btn{
    /* 强制可见 */
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;

    /* 强制按钮外观 */
    background-color: #e53935 !important;
    background-image: none !important;
    border: 1px solid #e53935 !important;

    /* 强制文字可见（很多主题会用 text-fill 置透明） */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    /* 防止主题把字体/高度搞没 */
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    min-height: 46px !important;
    padding: 12px 16px !important;

    /* 防止主题加奇怪的滤镜/阴影导致看不见 */
    filter: none !important;
    text-shadow: none !important;
    box-shadow: none !important;

    /* 防止被覆盖成透明按钮 */
    border-radius: 12px !important;

    /* 防止被遮挡 */
    position: relative !important;
    z-index: 5 !important;

    /* 全宽（你这个表单一般要全宽按钮） */
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
}

body .aikuto-ledger-form .ledger-add-form button.ledger-btn:hover,
body .aikuto-ledger-form .ledger-add-form .ledger-btn:hover{
    background-color: #c62828 !important;
    border-color: #c62828 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* =========================
   ✅ 还款页表单：只改样式，缩短控件与按钮
   放在 ledger.css 最末尾（在所有规则之后）
   ========================= */

/* 1) 仅针对前台“记一笔还款”这个表单容器 */
.aikuto-ledger-form{
    max-width: 560px;
    margin: 0 auto;
}

/* 2) 覆盖你上面把 input/select 写死 100% 的规则：改为自适应 + 最大宽度 */
body .aikuto-ledger-form select,
body .aikuto-ledger-form input[type="text"],
body .aikuto-ledger-form input[type="number"],
body .aikuto-ledger-form input[type="date"]{
    width: auto !important;         /* ✅ 不要 100% */
    max-width: 360px !important;    /* ✅ 控件别太长 */
    min-width: 220px !important;    /* ✅ 控件别太短 */
    display: inline-block;
}

/* 3) 日期/金额更短一点（更符合截图里的布局） */
body .aikuto-ledger-form input[type="date"]{
    max-width: 260px !important;
    min-width: 200px !important;
}
body .aikuto-ledger-form input[type="number"]{
    max-width: 220px !important;
    min-width: 160px !important;
}

/* 4) 借款项目 select 稍微宽些但别拉满 */
body .aikuto-ledger-form select{
    max-width: 360px !important;
    min-width: 240px !important;
}

/* 5) 备注也别拉满（比金额宽） */
body .aikuto-ledger-form input[type="text"]{
    max-width: 360px !important;
    min-width: 240px !important;
}

/* 6) 按钮：PC 端不全宽，变“短按钮”；手机端依然全宽更好点按 */
body .aikuto-ledger-form .ledger-add-form button.ledger-btn,
body .aikuto-ledger-form .ledger-add-form .ledger-btn{
    width: auto !important;         /* ✅ 覆盖你之前的 width:100% */
    min-width: 180px !important;
    padding: 12px 22px !important;
    margin-top: 8px;
}

/* 7) 让按钮居中（不改 HTML 的情况下，用 margin 实现） */
body .aikuto-ledger-form .ledger-add-form button.ledger-btn,
body .aikuto-ledger-form .ledger-add-form .ledger-btn{
    display: inline-flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 8) 移动端：控件和按钮恢复全宽，避免太窄不好用 */
@media (max-width: 640px){
    body .aikuto-ledger-form select,
    body .aikuto-ledger-form input[type="text"],
    body .aikuto-ledger-form input[type="number"],
    body .aikuto-ledger-form input[type="date"]{
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body .aikuto-ledger-form .ledger-add-form button.ledger-btn,
    body .aikuto-ledger-form .ledger-add-form .ledger-btn{
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* =========================
   ✅ 项目进度页：按钮过长/过大 - 紧凑化
   放在 ledger.css 最末尾
   ========================= */

/* 1) 通用：把页面里按钮从“全宽大红条”改成“自适应短按钮” */
body .aikuto-ledger-root .ledger-btn,
body .aikuto-ledger-root button.ledger-btn{
    width: auto !important;          /* ✅ 覆盖 width:100% */
    min-width: 0 !important;
    padding: 8px 14px !important;    /* ✅ 更紧凑 */
    min-height: 38px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
}

/* 2) tab 切换按钮（列表/账本/日历）：别太宽，允许换行 */
body .aikuto-ledger-root .ledger-tabs .ledger-btn{
    padding: 8px 12px !important;
}

/* 3) 筛选区的“应用筛选/重置”：不要占满 */
body .aikuto-ledger-root .ledger-filter-actions .ledger-btn{
    width: auto !important;
}

/* 4) ✅ 日历月份左右箭头（上一月/下一月）——页面里是 aria-label 按钮，不带 class */
body .aikuto-ledger-root .cal-nav button[aria-label="上一月"],
body .aikuto-ledger-root .cal-nav button[aria-label="下一月"]{
    width: 44px !important;          /* ✅ 固定小按钮 */
    min-width: 44px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* 用你已有的红色风格（和 ledger-btn 一致） */
    background-color: #e53935 !important;
    border: 1px solid #e53935 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 900 !important;
}

/* hover */
body .aikuto-ledger-root .cal-nav button[aria-label="上一月"]:hover,
body .aikuto-ledger-root .cal-nav button[aria-label="下一月"]:hover{
    background-color: #c62828 !important;
    border-color: #c62828 !important;
}

/* 5) “加载更多”按钮：桌面端短一点并居中 */
body .aikuto-ledger-root .ledger-actions .ledger-btn{
    width: auto !important;
    min-width: 180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-flex !important;
    justify-content: center !important;
}

/* 6) 移动端仍然保留全宽（好点按） */
@media (max-width: 640px){
    body .aikuto-ledger-root .ledger-filter-actions .ledger-btn,
    body .aikuto-ledger-root .ledger-actions .ledger-btn{
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================
   ✅ 进度条：改成绿色 + 更粗
   放在 ledger.css 最末尾
   ========================= */

.aikuto-ledger-root .progress-bar{
    height: 12px;                 /* ✅ 更粗（原来 8px） */
    border-radius: 999px;
    background: rgba(0,0,0,.10);
    overflow: hidden;
}

.aikuto-ledger-root .progress-bar > div{
    height: 100%;
    width: 0%;
    background: #22c55e;          /* ✅ 绿色 */
}