.htc-app{max-width:680px;margin:24px auto;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif}.htc-card{background:#fff;border:1px solid #ddd;border-radius:18px;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.07)}.htc-card h2{text-align:center;margin:0 0 8px;font-size:26px}.htc-date{text-align:center;font-weight:700;margin-bottom:22px}.htc-card label{display:block;font-weight:700;margin:14px 0 6px}.htc-card select,.htc-card input,.htc-card textarea{width:100%;box-sizing:border-box;font-size:17px;padding:12px;border:1px solid #bbb;border-radius:10px}.htc-card textarea{min-height:85px;margin-top:8px}.htc-state{margin:18px 0 12px;padding:12px;text-align:center;border-radius:10px;background:#eee;font-weight:800}.htc-state.working{background:#e7f6eb}.htc-state.off{background:#f2f2f2}.htc-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.htc-btn{min-height:86px;border:0;border-radius:14px;font-size:28px;font-weight:900;color:#fff;cursor:pointer}.htc-btn.in{background:#2271b1}.htc-btn.out{background:#555}.htc-btn:disabled{opacity:.3}.htc-row{display:grid;grid-template-columns:70px 1fr auto;gap:8px;padding:10px 4px;border-bottom:1px solid #eee;align-items:center}.htc-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.htc-summary span{background:#f2f2f2;border-radius:999px;padding:5px 9px;font-size:13px}.htc-request-box{margin-top:24px;padding:16px;border:1px solid #ddd;border-radius:12px;background:#fafafa}.htc-request-box h3{margin-top:0}.htc-req-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.htc-request-btn{width:100%;margin-top:10px;padding:13px;border:0;border-radius:10px;font-size:17px;font-weight:800;cursor:pointer}.htc-msg{margin-top:14px;font-weight:700;text-align:center}.htc-empty,.htc-empty-state{padding:16px;background:#f7f7f7;border-radius:10px}.htc-admin-link{display:inline-block;padding:10px 14px;background:#2271b1;color:#fff;text-decoration:none;border-radius:8px}.htc-req-list{margin-top:10px;font-size:13px}@media(max-width:480px){.htc-card{padding:16px}.htc-btn{font-size:24px;min-height:78px}.htc-row{grid-template-columns:60px 1fr}.htc-row span:last-child{grid-column:2}.htc-req-grid{grid-template-columns:1fr}}.htc-admin-entry{text-align:right;margin:-8px 0 12px}.htc-admin-entry a{font-size:14px;text-decoration:none}.htc-portal-nav{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 18px}.htc-portal-nav a{padding:10px 14px;border-radius:9px;background:#f0f0f0;text-decoration:none;font-weight:700}.htc-portal-nav a.active{background:#2271b1;color:#fff}.htc-admin-portal{max-width:1100px}.htc-portal-body .wrap{margin:0}.htc-portal-body table{font-size:14px}
/* 専用管理者画面でも職員フォームを十分な幅で表示 */
.htc-admin-portal{max-width:1280px!important}
.htc-portal-body{overflow-x:auto}
.htc-portal-body .htc-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.htc-portal-body .htc-table-wrap table{min-width:1100px}
.htc-portal-body .htc-table-wrap input[name="employee_code"]{width:130px;min-width:130px}
.htc-portal-body .htc-table-wrap input[name="department"],
.htc-portal-body .htc-table-wrap input[name="job_title"],
.htc-portal-body .htc-table-wrap input[name="name"]{width:180px;min-width:180px}
.htc-portal-body .htc-table-wrap input[name="pin"]{width:170px;min-width:170px}
.htc-portal-body .htc-table-wrap input{box-sizing:border-box;min-height:38px;font-size:15px;padding:6px 9px}

/* Ver.1.2.2 日付・時刻を大きく表示 */
.htc-date{
    font-size:48px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:.02em;
    margin-top:14px;
    margin-bottom:28px;
}
@media(max-width:600px){
    .htc-date{font-size:36px;line-height:1.3}
}

/* Ver.1.2.3 日付・曜日・時刻を3段表示 */
.htc-date{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
}
#htcDateLine{
    font-size:46px;
    line-height:1.15;
    font-weight:800;
}
#htcWeekLine{
    font-size:42px;
    line-height:1.15;
    font-weight:800;
}
#htcTimeLine{
    font-size:64px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:.04em;
}
@media(max-width:600px){
    #htcDateLine{font-size:34px}
    #htcWeekLine{font-size:30px}
    #htcTimeLine{font-size:48px}
}

.htc-manager-check{
    display:flex!important;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid #ccc;
    border-radius:9px;
    background:#fff;
    font-weight:700;
}
.htc-manager-check input{width:auto!important;min-height:auto!important}

/* Ver.1.2.7: PIN警告・状態表示拡大・スマホ幅最適化 */
html,body{
    max-width:100%;
    overflow-x:hidden;
}
.htc-app,
.htc-app *{
    box-sizing:border-box;
}
.htc-app{
    width:100%;
    max-width:680px;
    margin:16px auto;
    padding:0 12px;
}
.htc-card{
    width:100%;
    max-width:100%;
    margin:0;
}
.htc-state{
    font-size:24px;
    line-height:1.35;
    padding:16px 12px;
}
.htc-alert{
    display:none;
    width:100%;
    margin:12px 0 16px;
    padding:18px 14px;
    border:3px solid #d63638;
    border-radius:12px;
    background:#fff1f1;
    color:#b32d2e;
    text-align:center;
    font-size:28px;
    line-height:1.25;
    font-weight:900;
}
.htc-alert.show{
    display:block;
}
.htc-actions{
    width:100%;
}
.htc-card select,
.htc-card input,
.htc-card textarea,
.htc-card button{
    max-width:100%;
}
@media(max-width:600px){
    .htc-app{
        width:100vw;
        max-width:100vw;
        margin:0;
        padding:8px;
    }
    .htc-card{
        width:100%;
        border-radius:12px;
        padding:14px;
    }
    .htc-state{
        font-size:26px;
        padding:17px 10px;
    }
    .htc-alert{
        font-size:30px;
        padding:20px 12px;
    }
    .htc-actions{
        grid-template-columns:1fr 1fr;
        gap:8px;
    }
    .htc-btn{
        width:100%;
        min-width:0;
        font-size:23px;
    }
    .htc-card select,
    .htc-card input,
    .htc-card textarea{
        width:100%;
        min-width:0;
    }
}
@media(max-width:360px){
    .htc-actions{
        grid-template-columns:1fr;
    }
    .htc-btn{
        min-height:70px;
    }
}

/* Ver.1.2.8 集計画面 */
.htc-portal-body .htc-filter label{
    display:flex;
    align-items:center;
    gap:6px;
    font-weight:700;
}
.htc-portal-body .htc-filter input[type="date"]{
    min-width:155px;
}

/* Ver.1.2.9 打刻受付フィードバック */
.htc-punch-overlay{
    position:fixed;
    inset:0;
    z-index:999999;
    display:none;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    background:transparent;
}
.htc-punch-overlay.show{
    display:flex;
}
.htc-punch-ring{
    width:50vmin;
    height:50vmin;
    max-width:50vw;
    max-height:50vw;
    min-width:180px;
    min-height:180px;
    border-radius:50%;
    background:transparent;
    border:18px solid #14532d;box-shadow:0 0 0 10px rgba(20,83,45,.12),0 16px 45px rgba(0,0,0,.18);
    animation:htcPunchPop 1.5s ease-out both;
}
@keyframes htcPunchPop{
    0%{transform:scale(.7);opacity:0}
    12%{transform:scale(1.05);opacity:1}
    22%{transform:scale(1);opacity:1}
    82%{transform:scale(1);opacity:1}
    100%{transform:scale(.96);opacity:0}
}
@media(max-width:600px){
    .htc-punch-ring{
        width:50vw;
        height:50vw;
        min-width:150px;
        min-height:150px;
    }
}

/* Ver.1.4.0 オフライン対応 */
.htc-connectivity{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px}.htc-net,.htc-pending{display:inline-block;padding:6px 10px;border-radius:999px;font-size:14px;font-weight:800}.htc-net.online{background:#e7f6eb;color:#14532d}.htc-net.offline{background:#fff4e5;color:#9a4d00}.htc-pending{background:#f2f2f2;color:#333}.htc-pending.has-pending{background:#fff4e5;color:#9a4d00}.htc-offline-notice{display:none;margin:8px 0 12px;padding:10px 12px;border:2px solid #d97706;border-radius:10px;background:#fff7ed;color:#7c2d12;font-weight:800;text-align:center}.htc-offline-notice.show{display:block}

.htc-pin-error-overlay{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden;background:rgba(255,255,255,.10)}
.htc-pin-error-overlay.show{opacity:1;visibility:visible}
.htc-pin-error-x{font-size:min(52vw,420px);line-height:1;font-weight:900;color:#b91c1c;text-shadow:0 4px 14px rgba(0,0,0,.20)}

/* Ver.1.4.6 管理者画面・集計画面の視認性改善 */
.htc-admin-portal{
    width:min(98vw,1600px)!important;
    max-width:min(98vw,1600px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
}
.htc-portal-body{
    width:100%;
    max-width:none;
    overflow:visible;
}
.htc-portal-body .wrap{
    width:100%;
    max-width:none;
    margin:0;
}
.htc-portal-body .htc-table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    border:1px solid #ddd;
    border-radius:10px;
}
.htc-portal-body .htc-table-wrap table{
    width:max-content;
    min-width:100%;
    table-layout:auto;
}
.htc-portal-body .htc-table-wrap th,
.htc-portal-body .htc-table-wrap td{
    white-space:nowrap;
    vertical-align:middle;
}
.htc-portal-body .htc-filter,
.htc-portal-body .htc-box{
    max-width:100%;
}
.htc-excel-button{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 16px!important;
    font-weight:800!important;
    text-decoration:none!important;
    white-space:nowrap;
}
@media(min-width:1000px){
    .htc-app:has(.htc-admin-portal){
        max-width:none!important;
        width:100%!important;
        padding-left:12px;
        padding-right:12px;
    }
}
@media(max-width:700px){
    .htc-admin-portal{
        width:100vw!important;
        max-width:100vw!important;
        border-radius:0!important;
        padding:10px!important;
    }
    .htc-portal-nav{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
        position:sticky;
        top:0;
        z-index:20;
        background:#fff;
        padding:6px 0 10px;
    }
    .htc-portal-nav a{
        display:flex;
        align-items:center;
        justify-content:center;
        min-height:44px;
        padding:8px 6px;
        font-size:14px;
        text-align:center;
    }
    .htc-portal-body .htc-filter,
    .htc-portal-body .htc-box{
        display:grid;
        grid-template-columns:1fr;
        align-items:stretch;
        gap:8px;
        padding:10px;
    }
    .htc-portal-body .htc-filter label{
        display:grid;
        grid-template-columns:1fr;
        gap:4px;
    }
    .htc-portal-body .htc-filter input,
    .htc-portal-body .htc-filter select,
    .htc-portal-body .htc-filter button,
    .htc-portal-body .htc-filter .button,
    .htc-portal-body .htc-box input,
    .htc-portal-body .htc-box select,
    .htc-portal-body .htc-box button{
        width:100%!important;
        max-width:100%!important;
        min-height:44px;
        font-size:16px!important;
    }
    .htc-portal-body .htc-table-wrap{
        margin-left:0;
        margin-right:0;
        border-radius:8px;
        box-shadow:inset -10px 0 12px -12px rgba(0,0,0,.35);
    }
    .htc-portal-body .htc-table-wrap table{
        min-width:900px;
        font-size:13px;
    }
    .htc-portal-body .htc-table-wrap th,
    .htc-portal-body .htc-table-wrap td{
        padding:8px 7px!important;
    }
    .htc-excel-button{
        width:100%!important;
        min-height:46px;
        font-size:16px!important;
    }
}

/* Ver.1.4.7 CSV / Excel icon buttons */
.htc-export-icon{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    min-width:46px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0!important;
    border-radius:9px!important;
    font-weight:900!important;
    font-size:12px!important;
    line-height:1!important;
    text-decoration:none!important;
    vertical-align:middle;
    position:relative;
}
.htc-export-icon::before{
    content:"";
    display:block;
    position:absolute;
    top:7px;
    left:11px;
    width:22px;
    height:26px;
    border:2px solid currentColor;
    border-radius:3px;
    opacity:.28;
}
.htc-export-icon span{position:relative;z-index:1;letter-spacing:-.3px}
.htc-csv-icon{color:#135e96!important;background:#f0f6fc!important;border-color:#72aee6!important}
.htc-excel-icon{color:#166534!important;background:#f0fdf4!important;border-color:#86efac!important}
.htc-export-icon:hover,.htc-export-icon:focus{filter:brightness(.96);transform:translateY(-1px)}
@media(max-width:700px){
    .htc-export-icon{width:52px!important;min-width:52px!important;height:48px!important;min-height:48px!important;font-size:13px!important}
}

/* Ver.1.4.8 layout fixes */

/* 1) 区分select: reserve space for native arrow and prevent overlap */
.htc-day-type-select{
    min-width:150px!important;
    padding-right:34px!important;
    appearance:auto!important;
    -webkit-appearance:menulist!important;
    background-position:right 10px center!important;
}

/* 2) 設定画面: time input + checkbox aligned on same row */
.htc-setting-row{
    display:flex;
    align-items:flex-end;
    gap:24px;
    flex-wrap:wrap;
    padding:8px 0 16px;
}
.htc-setting-main{
    flex:1 1 420px;
    min-width:280px;
}
.htc-setting-main input[type="time"]{
    width:220px!important;
    max-width:100%!important;
}
.htc-setting-check{
    display:flex!important;
    align-items:center!important;
    gap:8px;
    margin:0 0 6px 0!important;
    font-weight:700;
    white-space:nowrap;
}
.htc-setting-check input[type="checkbox"]{
    width:auto!important;
    min-width:0!important;
    margin:0!important;
}

/* 3) Registered employees table alignment */
.htc-employee-table{
    table-layout:auto!important;
    width:max-content!important;
    min-width:1120px!important;
}
.htc-employee-table th,
.htc-employee-table td{
    vertical-align:middle!important;
    text-align:left!important;
}
.htc-employee-table th:nth-child(1),
.htc-employee-table td:nth-child(1){min-width:140px}
.htc-employee-table th:nth-child(2),
.htc-employee-table td:nth-child(2){min-width:180px}
.htc-employee-table th:nth-child(3),
.htc-employee-table td:nth-child(3){min-width:180px}
.htc-employee-table th:nth-child(4),
.htc-employee-table td:nth-child(4){min-width:220px}
.htc-employee-table th:nth-child(5),
.htc-employee-table td:nth-child(5){min-width:150px;text-align:center!important}
.htc-employee-table th:nth-child(6),
.htc-employee-table td:nth-child(6){min-width:220px;text-align:center!important}
.htc-employee-table th:nth-child(7),
.htc-employee-table td:nth-child(7){min-width:160px;text-align:center!important}

.htc-employee-table input[type="text"],
.htc-employee-table input[type="password"],
.htc-employee-table input:not([type]),
.htc-employee-table input[name="employee_code"],
.htc-employee-table input[name="department"],
.htc-employee-table input[name="job_title"],
.htc-employee-table input[name="name"],
.htc-employee-table input[name="pin"]{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:40px!important;
}
.htc-employee-table td:nth-child(5) label,
.htc-employee-table td:nth-child(6) label{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px;
    white-space:nowrap;
}
.htc-employee-table td:nth-child(5) input[type="checkbox"],
.htc-employee-table td:nth-child(6) input[type="checkbox"]{
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    margin:0!important;
}
.htc-employee-table td:nth-child(7){
    white-space:nowrap!important;
}
.htc-employee-table td:nth-child(7) .button,
.htc-employee-table td:nth-child(7) a{
    display:inline-block!important;
    margin:2px 4px!important;
}

/* Mobile: keep the table intact and scroll horizontally */
@media(max-width:700px){
    .htc-setting-row{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        align-items:start;
    }
    .htc-setting-main{
        min-width:0;
    }
    .htc-setting-main input[type="time"]{
        width:100%!important;
    }
    .htc-setting-check{
        justify-content:flex-start!important;
        min-height:44px;
    }
    .htc-day-type-select{
        width:100%!important;
        min-width:140px!important;
        padding-right:36px!important;
    }
    .htc-employee-table{
        min-width:1080px!important;
    }
}

/* Ver.1.4.9 select and employee-table correction */
.htc-day-type-select{
    min-width:160px!important;
    padding:10px 42px 10px 14px!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    -moz-appearance:none!important;
    background-color:#fff!important;
    background-image:
      linear-gradient(45deg,transparent 50%,#333 50%),
      linear-gradient(135deg,#333 50%,transparent 50%)!important;
    background-position:
      calc(100% - 18px) 50%,
      calc(100% - 12px) 50%!important;
    background-size:6px 6px,6px 6px!important;
    background-repeat:no-repeat!important;
}
.htc-day-type-select::-ms-expand{display:none!important}

.htc-employee-table{
    border-collapse:separate!important;
    border-spacing:0!important;
    table-layout:fixed!important;
    width:1180px!important;
    min-width:1180px!important;
}
.htc-employee-table th,
.htc-employee-table td{
    box-sizing:border-box!important;
    vertical-align:middle!important;
    padding:10px!important;
}
.htc-employee-table th:nth-child(1),.htc-employee-table td:nth-child(1){width:140px!important}
.htc-employee-table th:nth-child(2),.htc-employee-table td:nth-child(2){width:170px!important}
.htc-employee-table th:nth-child(3),.htc-employee-table td:nth-child(3){width:170px!important}
.htc-employee-table th:nth-child(4),.htc-employee-table td:nth-child(4){width:210px!important}
.htc-employee-table th:nth-child(5),.htc-employee-table td:nth-child(5){width:150px!important}
.htc-employee-table th:nth-child(6),.htc-employee-table td:nth-child(6){width:210px!important}
.htc-employee-table th:nth-child(7),.htc-employee-table td:nth-child(7){width:130px!important}

.htc-employee-table td > input:not([type="checkbox"]){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:40px!important;
    margin:0!important;
}
.htc-center-cell,.htc-action-cell{text-align:center!important}
.htc-status-pin-cell{text-align:left!important}
.htc-inline-check{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    margin:0 0 8px 0!important;
    white-space:nowrap!important;
}
.htc-inline-check input[type="checkbox"]{
    appearance:auto!important;
    -webkit-appearance:checkbox!important;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    margin:0!important;
    padding:0!important;
}
.htc-status-pin-cell > input[type="password"]{
    width:100%!important;
    height:40px!important;
    margin:0!important;
}
.htc-action-cell .button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:36px!important;
    margin:3px!important;
}
@media(max-width:700px){
    .htc-employee-table{width:1180px!important;min-width:1180px!important}
    .htc-day-type-select{width:160px!important;min-width:160px!important}
}

/* Ver.1.5.0 */
.htc-admin-portal-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    margin-bottom:10px;
}
.htc-admin-portal-head h2{margin:0!important}
.htc-back-main{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:8px 14px;
    border:1px solid #2271b1;
    border-radius:9px;
    background:#2271b1;
    color:#fff!important;
    text-decoration:none!important;
    font-weight:800;
    white-space:nowrap;
}
.htc-back-main:hover{filter:brightness(.94)}
.htc-msg-success{
    margin-top:14px!important;
    padding:14px!important;
    border:2px solid #15803d!important;
    border-radius:10px!important;
    background:#f0fdf4!important;
    color:#166534!important;
    font-size:20px!important;
    font-weight:900!important;
}
.htc-seven-digit{
    width:10ch!important;
    min-width:10ch!important;
    max-width:10ch!important;
    box-sizing:border-box!important;
}
.htc-status-pin-cell{
    overflow:hidden!important;
}
.htc-status-pin-cell > input[type="password"],
.htc-status-pin-cell input[name="pin"]{
    display:block!important;
    width:150px!important;
    min-width:0!important;
    max-width:150px!important;
    height:40px!important;
    box-sizing:border-box!important;
    margin:8px auto 0!important;
}
.htc-employee-table th:nth-child(6),
.htc-employee-table td:nth-child(6){
    width:190px!important;
}
.htc-employee-table th:nth-child(7),
.htc-employee-table td:nth-child(7){
    width:150px!important;
}
@media(max-width:700px){
    .htc-admin-portal-head{
        align-items:flex-start;
    }
    .htc-admin-portal-head h2{font-size:22px!important}
    .htc-back-main{
        min-height:40px;
        padding:7px 10px;
        font-size:13px;
    }
    .htc-seven-digit{
        width:10ch!important;
        min-width:10ch!important;
    }
}

/* Ver.1.5.2 打刻記録フィルター */
.htc-entry-filter{
    display:flex;
    align-items:flex-end;
    gap:10px;
    flex-wrap:wrap;
}
.htc-entry-filter label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-weight:700;
}
.htc-entry-filter-result{
    margin:10px 0 14px;
    padding:9px 12px;
    background:#f6f7f7;
    border-left:4px solid #2271b1;
}
@media(max-width:700px){
    .htc-entry-filter{
        display:grid;
        grid-template-columns:1fr;
    }
    .htc-entry-filter input,
    .htc-entry-filter select,
    .htc-entry-filter button{
        width:100%!important;
        min-height:44px;
        font-size:16px;
    }
}

/* Ver.1.5.4 打刻記録の職員選択 */
.htc-entry-filter select[name="employee_id"]{
    width:320px!important;
    min-width:320px!important;
    max-width:420px!important;
    padding-right:44px!important;
    box-sizing:border-box!important;
}
@media(max-width:700px){
    .htc-entry-filter select[name="employee_id"]{
        width:100%!important;
        min-width:100%!important;
        max-width:100%!important;
        padding-right:46px!important;
    }
}

/* Ver.1.5.6 退勤ボタン */
#htcOut{
 background:#e84a6a!important;border-color:#cf3656!important;color:#fff!important;
}
#htcOut:hover,#htcOut:focus{
 background:#d93d5d!important;border-color:#bd2f4c!important;color:#fff!important;
}
#htcOut:disabled{
 background:#e9a1b0!important;border-color:#dda0ad!important;color:#fff!important;opacity:.72;
}

/* Ver.1.5.7 退勤ボタン：PIN警告と同じ暗い赤 */
#htcOut{
    background:#b91c1c!important;
    border-color:#991b1b!important;
    color:#fff!important;
}
#htcOut:hover,#htcOut:focus{
    background:#991b1b!important;
    border-color:#7f1d1d!important;
    color:#fff!important;
}
#htcOut:disabled{
    background:#b91c1c!important;
    border-color:#991b1b!important;
    color:#fff!important;
    opacity:.55;
}

/* =========================================================
   Ver.1.6.0 タブレット1画面対応
   目的：縦持ちタブレットで
   職員選択 → PIN → 出勤/退勤ボタン
   までをスクロールせず表示しやすくする
   ========================================================= */

/* タブレット縦画面を主対象 */
@media (min-width:701px) and (max-width:1100px){

    .htc-app{
        width:100%!important;
        max-width:100%!important;
        margin:0 auto!important;
        padding:8px 12px!important;
        box-sizing:border-box!important;
    }

    .htc-punch-card{
        width:100%!important;
        max-width:760px!important;
        margin:0 auto!important;
        padding:14px 20px 16px!important;
        box-sizing:border-box!important;
    }

    .htc-punch-card h2{
        margin:0 0 6px!important;
        font-size:28px!important;
        line-height:1.15!important;
    }

    .htc-connectivity{
        margin:2px 0 4px!important;
        gap:8px!important;
    }

    .htc-net,
    .htc-pending{
        padding:4px 9px!important;
        font-size:13px!important;
    }

    .htc-offline-notice{
        margin:4px 0 6px!important;
        padding:6px 10px!important;
        font-size:13px!important;
    }

    /* 日付・曜日・時刻を少し圧縮 */
    #htcClock,
    .htc-date{
        margin:2px 0 8px!important;
        padding:0!important;
    }

    #htcDateLine{
        font-size:26px!important;
        line-height:1.05!important;
        margin:0!important;
    }

    #htcWeekLine{
        font-size:22px!important;
        line-height:1.05!important;
        margin:1px 0!important;
    }

    #htcTimeLine{
        font-size:48px!important;
        line-height:1!important;
        margin:2px 0 4px!important;
    }

    .htc-punch-card label{
        margin-top:4px!important;
        margin-bottom:2px!important;
        font-size:15px!important;
    }

    .htc-punch-card select,
    .htc-punch-card input[type="password"]{
        min-height:44px!important;
        height:44px!important;
        padding-top:6px!important;
        padding-bottom:6px!important;
        font-size:18px!important;
        margin-bottom:5px!important;
    }

    #htcState{
        margin:5px 0!important;
        padding:7px 10px!important;
        min-height:38px!important;
        font-size:17px!important;
        line-height:1.2!important;
    }

    #htcAlert{
        margin:4px 0!important;
        padding:8px 10px!important;
        font-size:18px!important;
        line-height:1.2!important;
    }

    .htc-actions{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        gap:12px!important;
        margin:8px 0 6px!important;
    }

    .htc-actions .htc-btn{
        min-height:64px!important;
        height:64px!important;
        padding:8px!important;
        font-size:28px!important;
        line-height:1!important;
        border-radius:12px!important;
    }

    /* ボタンより下の情報は詰める */
    #htcToday{
        margin-top:6px!important;
    }

    #htcToday h3{
        margin:6px 0 4px!important;
        font-size:17px!important;
    }

    #htcToday .htc-summary,
    #htcToday .htc-row,
    #htcToday .htc-empty,
    #htcToday .htc-req-list{
        font-size:13px!important;
        line-height:1.2!important;
    }

    .htc-request-box{
        margin-top:10px!important;
    }
}

/* 高さが低めのタブレットではさらに上部をコンパクト化 */
@media (min-width:701px) and (max-width:1100px) and (max-height:900px){

    .htc-punch-card{
        padding-top:8px!important;
        padding-bottom:10px!important;
    }

    .htc-punch-card h2{
        font-size:24px!important;
        margin-bottom:2px!important;
    }

    .htc-connectivity{
        margin:0 0 2px!important;
    }

    #htcDateLine{
        font-size:22px!important;
    }

    #htcWeekLine{
        font-size:18px!important;
    }

    #htcTimeLine{
        font-size:42px!important;
        margin:0 0 2px!important;
    }

    .htc-punch-card select,
    .htc-punch-card input[type="password"]{
        min-height:40px!important;
        height:40px!important;
        font-size:17px!important;
        margin-bottom:3px!important;
    }

    #htcState{
        margin:3px 0!important;
        min-height:34px!important;
        padding:5px 8px!important;
        font-size:16px!important;
    }

    .htc-actions{
        margin:5px 0!important;
    }

    .htc-actions .htc-btn{
        min-height:58px!important;
        height:58px!important;
        font-size:26px!important;
    }
}

/* iPad系で横向きの場合も、横幅を無駄に広げすぎない */
@media (min-width:900px) and (max-width:1366px) and (orientation:landscape){
    .htc-punch-card{
        max-width:820px!important;
        padding-top:10px!important;
        padding-bottom:12px!important;
    }

    #htcTimeLine{
        font-size:46px!important;
    }

    .htc-actions .htc-btn{
        min-height:60px!important;
        height:60px!important;
    }
}

/* Ver.1.6.1 大型PINテンキー */
#htcPin{cursor:pointer!important;caret-color:transparent!important;background:#fff!important}
.htc-pinpad{position:fixed;inset:0;z-index:2147483646;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.38);box-sizing:border-box}
.htc-pinpad.show{display:flex}
body.htc-pinpad-open{overflow:hidden!important}
.htc-pinpad-panel{width:min(92vw,520px);max-height:94vh;overflow:auto;box-sizing:border-box;padding:18px;border-radius:22px;background:#fff;box-shadow:0 16px 48px rgba(0,0,0,.28)}
.htc-pinpad-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;font-size:26px}
.htc-pinpad-close{width:48px;height:48px;border:0;border-radius:50%;background:#eee;font-size:30px;line-height:1;cursor:pointer}
.htc-pinpad-dots{min-height:52px;display:flex;align-items:center;justify-content:center;margin:8px 0 14px;padding:8px 12px;border:2px solid #d0d0d0;border-radius:12px;background:#fafafa;font-size:28px;font-weight:800;letter-spacing:4px;text-align:center}
.htc-pinpad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.htc-pin-key{min-height:82px;border:2px solid #c7c7c7;border-radius:16px;background:#fff;color:#222;font-size:36px;font-weight:900;box-shadow:0 2px 5px rgba(0,0,0,.08);cursor:pointer;touch-action:manipulation}
.htc-pin-key:active{transform:scale(.97);background:#f2f2f2}
.htc-pin-key-sub{font-size:20px;background:#f5f5f5}
.htc-pinpad-done{width:100%;min-height:58px;margin-top:14px;border:0;border-radius:14px;background:#2271b1;color:#fff;font-size:24px;font-weight:900;cursor:pointer;touch-action:manipulation}
@media (min-width:701px) and (max-width:1100px){.htc-pinpad-panel{width:min(88vw,560px);padding:20px}.htc-pin-key{min-height:88px;font-size:40px}}
@media (max-height:760px){.htc-pinpad-panel{padding:12px}.htc-pinpad-head{font-size:20px;margin-bottom:5px}.htc-pinpad-close{width:40px;height:40px;font-size:24px}.htc-pinpad-dots{min-height:40px;font-size:22px;margin:5px 0 8px}.htc-pinpad-grid{gap:8px}.htc-pin-key{min-height:58px;font-size:30px}.htc-pin-key-sub{font-size:17px}.htc-pinpad-done{min-height:48px;margin-top:8px;font-size:20px}}

/* Ver.1.6.2 勤務状態を明確な2行表示 */
#htcState .htc-state-main{
    display:block;
    font-size:1.08em;
    font-weight:900;
    line-height:1.15;
}
#htcState .htc-state-sub{
    display:block;
    margin-top:4px;
    font-size:.82em;
    font-weight:600;
    line-height:1.25;
    opacity:.82;
}
@media (min-width:701px) and (max-width:1100px){
    #htcState .htc-state-main{font-size:18px}
    #htcState .htc-state-sub{font-size:14px;margin-top:2px}
}