/* JobCardHub Office Tasks / Office Notes - live v0.14.30 */

/* ---------- Tasks page ---------- */
.tjc-task-shell{
    overflow:hidden;
    padding:0!important;
    border:1px solid #dbe7f3!important;
    border-radius:16px!important;
    background:#fff!important;
    box-shadow:0 6px 18px rgba(15,23,42,.04)!important;
}
.tjc-task-page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:20px 22px 15px;
}
.tjc-task-page-head .tjc-section-title{
    margin:0 0 3px!important;
    color:#172b4d!important;
    font-size:17px!important;
    line-height:1.2!important;
    font-weight:900!important;
}
.tjc-task-page-head .tjc-queue-subtitle{
    margin:0!important;
    color:#6b7f96!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:700!important;
}
.tjc-task-new-button,
.tjc-task-form-actions .tjc-office-primary-action{
    min-height:36px!important;
    height:36px!important;
    padding:0 13px!important;
    border:1px solid #176de5!important;
    border-radius:9px!important;
    background:#176de5!important;
    color:#fff!important;
    font-size:11px!important;
    font-weight:800!important;
    line-height:1!important;
    text-decoration:none!important;
    box-shadow:0 4px 10px rgba(23,109,229,.14)!important;
}
.tjc-task-back-button{
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    min-height:34px!important;
    height:34px!important;
    padding:0 12px!important;
    margin:0!important;
    border:1px solid #d7e1ed!important;
    border-radius:9px!important;
    background:#f8fbff!important;
    color:#31506f!important;
    font-size:11px!important;
    font-weight:800!important;
    line-height:1!important;
    text-decoration:none!important;
    white-space:nowrap!important;
    box-shadow:none!important;
}
.tjc-task-notice{
    margin:0 22px 14px!important;
    padding:9px 11px!important;
    border-radius:9px!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:700!important;
}
.tjc-task-notice.is-success{background:#ecfdf3!important;color:#067647!important}
.tjc-task-notice.is-error{background:#fff1f0!important;color:#b42318!important}

.tjc-task-viewbar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    margin:0 22px 15px;
    padding:0;
    border:0;
    background:transparent;
}
.tjc-task-viewbar a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:32px;
    height:32px;
    padding:0 10px;
    border:1px solid #d6e1ed;
    border-radius:8px;
    background:#fff;
    color:#52677f;
    font-size:10.5px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:none;
}
.tjc-task-viewbar a:hover{border-color:#b9cde5;color:#214b9a;background:#f8fbff}
.tjc-task-viewbar a.is-active{
    border-color:#8fb5e8;
    background:#eef6ff;
    color:#176de5;
    box-shadow:none;
}
.tjc-task-viewbar b{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:17px;
    height:17px;
    padding:0 4px;
    border-radius:999px;
    background:#eef2f6;
    color:#667a91;
    font-size:8.5px;
    font-weight:900;
}
.tjc-task-viewbar a.is-active b{background:#dbeaff;color:#176de5}


.tjc-task-empty-state{
    min-height:125px;
    margin:0 22px 20px;
    padding:22px 18px;
    border:1px dashed #d6e1ed;
    border-radius:12px;
    background:#fafcff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#74859a;
}
.tjc-task-empty-icon{
    width:30px;
    height:30px;
    margin-bottom:7px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#edf5ff;
    color:#176de5;
    font-size:15px;
    font-weight:900;
}
.tjc-task-empty-state strong{color:#284361;font-size:12px;font-weight:800}
.tjc-task-empty-state p{max-width:430px;margin:4px 0 0;color:#75879b;font-size:10.5px;line-height:1.4;font-weight:600}

.tjc-task-list{border-top:1px solid #e8eef5}
.tjc-task-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:62px;
    padding:11px 22px;
    border-bottom:1px solid #e8eef5;
    background:#fff;
}
.tjc-task-row:last-child{border-bottom:0}
.tjc-task-row.is-overdue{box-shadow:inset 3px 0 0 #d92d20}
.tjc-task-row.is-completed{opacity:.64}
.tjc-task-row-main{min-width:0}
.tjc-task-row-main>strong{display:block;color:#17375f;font-size:12px;line-height:1.25;font-weight:800}
.tjc-task-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:5px;color:#74859a;font-size:10px;line-height:1.2}
.tjc-task-meta span+span:before,
.tjc-task-meta span+a:before{content:'•';margin-right:7px;color:#b0bdcb}
.tjc-task-meta a{color:#176de5;text-decoration:none;font-weight:700}
.tjc-task-high{color:#b42318!important;font-weight:800!important}
.tjc-task-actions{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.tjc-task-actions form{margin:0!important}
.tjc-task-actions>a,
.tjc-task-actions button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:64px!important;
    min-height:30px!important;
    height:30px!important;
    padding:0 9px!important;
    margin:0!important;
    border:1px solid #d6e0eb!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#31506f!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1!important;
    text-decoration:none!important;
    cursor:pointer!important;
}
.tjc-task-actions .tjc-task-complete{border-color:#b7dfc3!important;background:#f3fbf5!important;color:#067647!important}

/* ---------- New/Edit task form ---------- */
.tjc-task-form-shell{max-width:none}
.tjc-task-form{
    margin:0!important;
    padding:4px 22px 20px!important;
}
.tjc-task-form-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(180px,.42fr);
    gap:14px 16px;
}
.tjc-task-field{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    min-width:0!important;
    margin:0!important;
}
.tjc-task-field-full{grid-column:1/-1}
.tjc-task-field>span{
    color:#5f738b!important;
    font-size:9.5px!important;
    line-height:1.1!important;
    font-weight:900!important;
    letter-spacing:.05em!important;
    text-transform:uppercase!important;
}
.tjc-task-field input,
.tjc-task-field select,
.tjc-task-field textarea{
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    border:1px solid #cfdae7!important;
    border-radius:9px!important;
    background:#fff!important;
    color:#142b47!important;
    font-family:Arial,sans-serif!important;
    font-size:12px!important;
    font-weight:500!important;
    box-shadow:none!important;
    outline:none!important;
}
.tjc-task-field input,
.tjc-task-field select{
    min-height:38px!important;
    height:38px!important;
    padding:0 11px!important;
}
.tjc-task-field textarea{
    min-height:92px!important;
    padding:10px 11px!important;
    line-height:1.45!important;
    resize:vertical!important;
}
.tjc-task-field input:focus,
.tjc-task-field select:focus,
.tjc-task-field textarea:focus{border-color:#76a7ec!important;box-shadow:0 0 0 3px rgba(23,109,229,.08)!important}
.tjc-task-relation-strip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    width:max-content;
    max-width:100%;
    margin:0 0 12px;
    padding:6px 9px;
    border:1px solid #dae5f0;
    border-radius:8px;
    background:#f8fbff;
    color:#6b7f96;
    font-size:10px;
}
.tjc-task-relation-strip strong{color:#284361;font-weight:800}
.tjc-task-form-actions{display:flex;justify-content:flex-start;margin-top:15px}
.tjc-task-secondary-actions{
    display:flex;
    align-items:center;
    gap:7px;
    padding:0 22px 20px;
}
.tjc-task-secondary-actions form{margin:0!important}
.tjc-task-secondary-button{
    min-height:30px!important;
    height:30px!important;
    padding:0 10px!important;
    border:1px solid #d5e0eb!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#405a75!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1!important;
    cursor:pointer!important;
}
.tjc-task-secondary-button.is-danger{color:#b42318!important;border-color:#efc9c5!important;background:#fffafa!important}

/* ---------- Job card: Office Notes & Tasks ---------- */
.tjc-office-work-card{
    grid-column:1/-1!important;
    box-sizing:border-box!important;
    width:100%!important;
    margin:9px 0 0!important;
    padding:10px 0 0!important;
    border:0!important;
    border-top:1px solid #e3eaf2!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-family:Arial,sans-serif!important;
}
.tjc-office-work-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important}
.tjc-office-work-head>strong{display:block!important;margin:0!important;color:#294562!important;font-size:11px!important;line-height:1.2!important;font-weight:850!important}
.tjc-office-work-actions{display:flex!important;align-items:center!important;gap:5px!important;flex:0 0 auto!important}
.tjc-office-mini-button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:64px!important;
    min-height:28px!important;
    height:28px!important;
    padding:0 9px!important;
    margin:0!important;
    border:1px solid #cfdbe8!important;
    border-radius:7px!important;
    background:#fff!important;
    color:#31506f!important;
    font-family:Arial,sans-serif!important;
    font-size:10px!important;
    font-weight:800!important;
    line-height:1!important;
    box-shadow:none!important;
    cursor:pointer!important;
}
.tjc-office-mini-button.is-primary{border-color:#176de5!important;background:#176de5!important;color:#fff!important}
.tjc-office-work-empty-one{margin-top:6px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:#8291a2!important;font-size:10px!important;line-height:1.35!important;font-weight:600!important}
.tjc-office-work-stream{display:grid!important;gap:5px!important;margin-top:9px!important}
.tjc-office-work-item{
    display:flex!important;
    align-items:flex-start!important;
    gap:8px!important;
    padding:8px 9px!important;
    border:1px solid #e1e9f1!important;
    border-radius:8px!important;
    background:#fff!important;
    color:#2d4764!important;
    text-decoration:none!important;
}
.tjc-office-work-item:hover{border-color:#c8d8ea!important;background:#fbfdff!important}
.tjc-office-work-type{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;min-width:38px!important;height:20px!important;padding:0 6px!important;border-radius:999px!important;background:#eef2f6!important;color:#60758c!important;font-size:8.5px!important;font-weight:900!important;line-height:1!important;text-transform:uppercase!important;letter-spacing:.04em!important}
.tjc-office-work-type.is-task{background:#eaf3ff!important;color:#176de5!important}
.tjc-office-work-copy{display:block!important;min-width:0!important;margin:0!important}
.tjc-office-work-copy strong{display:block!important;color:#294562!important;font-size:10.5px!important;line-height:1.3!important;font-weight:800!important}
.tjc-office-work-copy small{display:block!important;margin-top:2px!important;color:#8594a5!important;font-size:9px!important;line-height:1.25!important;font-weight:600!important}
.tjc-office-work-card .tjc-task-notice{margin:8px 0 0!important;padding:7px 9px!important;font-size:9.5px!important}

/* ---------- Job-card note/task dialogs ---------- */
.tjc-office-work-dialog{
    width:min(520px,calc(100vw - 28px))!important;
    max-width:520px!important;
    padding:0!important;
    border:0!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 24px 70px rgba(20,43,72,.28)!important;
    overflow:hidden!important;
    font-family:Arial,sans-serif!important;
}
.tjc-office-work-dialog::backdrop{background:rgba(13,31,54,.42)!important}
.tjc-office-dialog-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;padding:15px 17px 12px!important;border-bottom:1px solid #e6edf4!important;background:#fff!important}
.tjc-office-dialog-head strong{display:block!important;color:#17375f!important;font-size:14px!important;line-height:1.2!important;font-weight:900!important}
.tjc-office-dialog-head span{display:block!important;margin-top:3px!important;color:#75869a!important;font-size:10px!important;line-height:1.35!important;font-weight:600!important}
.tjc-office-dialog-head>button{display:flex!important;align-items:center!important;justify-content:center!important;width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;padding:0!important;border:1px solid #d8e2ed!important;border-radius:7px!important;background:#fff!important;color:#536a83!important;font-size:18px!important;line-height:1!important;cursor:pointer!important}
.tjc-office-dialog-body{padding:15px 17px 17px!important;background:#fff!important}
.tjc-office-dialog-body .tjc-form-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:11px!important}
.tjc-office-dialog-body .tjc-form-field{display:flex!important;flex-direction:column!important;gap:5px!important;margin:0!important;min-width:0!important}
.tjc-office-dialog-body .tjc-form-field-full{grid-column:1/-1!important}
.tjc-office-dialog-body .tjc-form-field>span{color:#60758c!important;font-size:9px!important;font-weight:900!important;letter-spacing:.05em!important;text-transform:uppercase!important}
.tjc-office-dialog-body input,
.tjc-office-dialog-body select,
.tjc-office-dialog-body textarea{box-sizing:border-box!important;width:100%!important;border:1px solid #cfdae7!important;border-radius:8px!important;background:#fff!important;color:#142b47!important;font-family:Arial,sans-serif!important;font-size:11px!important;box-shadow:none!important}
.tjc-office-dialog-body input,
.tjc-office-dialog-body select{min-height:36px!important;height:36px!important;padding:0 10px!important}
.tjc-office-dialog-body textarea{min-height:88px!important;padding:9px 10px!important;line-height:1.4!important;resize:vertical!important}
.tjc-office-dialog-actions{display:flex!important;justify-content:flex-end!important;gap:7px!important;margin-top:13px!important}
.tjc-office-dialog-actions .tjc-office-dialog-cancel,
.tjc-office-dialog-actions .tjc-office-dialog-submit{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:82px!important;min-height:34px!important;height:34px!important;padding:0 11px!important;border-radius:8px!important;font-size:10px!important;font-weight:850!important;line-height:1!important;box-shadow:none!important;cursor:pointer!important}
.tjc-office-dialog-actions .tjc-office-dialog-cancel{border:1px solid #d2dde8!important;background:#fff!important;color:#52677f!important}
.tjc-office-dialog-actions .tjc-office-dialog-submit{border:1px solid #2874d5!important;background:#2874d5!important;color:#fff!important}

@media(max-width:780px){
    .tjc-task-page-head{padding:16px 14px 12px;align-items:center}
    .tjc-task-form-shell .tjc-task-page-head{align-items:flex-start!important;gap:10px!important}
    .tjc-task-form-shell .tjc-task-page-head>div{flex:1 1 auto!important;min-width:0!important}
    .tjc-task-form-shell .tjc-task-back-button{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:0!important;
        max-width:none!important;
        height:32px!important;
        min-height:32px!important;
        padding:0 10px!important;
        border-radius:8px!important;
        font-size:10px!important;
        white-space:nowrap!important;
    }
    .tjc-task-form-grid{min-width:0!important}
    .tjc-task-form .tjc-task-field input[type="date"],
    .tjc-task-form .tjc-task-field input[type="time"]{
        box-sizing:border-box!important;
        display:block!important;
        inline-size:100%!important;
        width:100%!important;
        min-inline-size:0!important;
        min-width:0!important;
        max-inline-size:100%!important;
        max-width:100%!important;
    }
    .tjc-task-viewbar{display:flex;max-width:calc(100% - 28px);margin:0 14px 13px;overflow-x:auto}
    .tjc-task-viewbar a{flex:0 0 auto}
    .tjc-task-empty-state{margin:0 14px 16px;min-height:110px}
    .tjc-task-row{padding:11px 14px;align-items:flex-start;flex-direction:column}
    .tjc-task-actions{width:100%}
    .tjc-task-form{padding:3px 14px 16px!important}
    .tjc-task-form-grid{grid-template-columns:1fr}
    .tjc-task-field-full{grid-column:auto}
    .tjc-task-secondary-actions{padding:0 14px 16px}
    .tjc-office-work-head{align-items:flex-start!important;flex-direction:column!important}
    .tjc-office-work-actions{width:auto!important}
    .tjc-office-dialog-body .tjc-form-grid{grid-template-columns:1fr!important}
    .tjc-office-dialog-body .tjc-form-field-full{grid-column:auto!important}
    .tjc-office-dialog-actions{flex-direction:column-reverse!important}
    .tjc-office-dialog-actions .tjc-office-dialog-cancel,
    .tjc-office-dialog-actions .tjc-office-dialog-submit{width:100%!important}
}

/* ---------- Task reminders / calendar ---------- */
.tjc-task-calendar-option{
    display:flex!important;
    align-items:flex-start!important;
    gap:9px!important;
    box-sizing:border-box!important;
    margin:0!important;
    padding:10px 11px!important;
    border:1px solid #d8e3ef!important;
    border-radius:9px!important;
    background:#f8fbff!important;
    color:#294562!important;
    cursor:pointer!important;
}
.tjc-task-calendar-option input[type="checkbox"]{
    flex:0 0 16px!important;
    width:16px!important;
    min-width:16px!important;
    max-width:16px!important;
    height:16px!important;
    min-height:16px!important;
    max-height:16px!important;
    margin:1px 0 0!important;
    padding:0!important;
    accent-color:#176de5!important;
}
.tjc-task-calendar-option>span{display:block!important;min-width:0!important}
.tjc-task-calendar-option strong{display:block!important;color:#294562!important;font-size:10.5px!important;line-height:1.25!important;font-weight:850!important;text-transform:none!important;letter-spacing:0!important}
.tjc-task-calendar-option small{display:block!important;margin-top:2px!important;color:#76889d!important;font-size:9.5px!important;line-height:1.35!important;font-weight:600!important}