/* ==========================================================
   THULO_C5_B5_R1_B1_R4_PERSISTENT_HOSTING_WORKSPACE_CSS

   Hosting Reconciliation + Service Management

   Persistent admin-head stylesheet authority.

   These rules MUST remain outside the Infrastructure SPA
   replacement surface because the SPA replaces only:

       .thulo-infrastructure-shell

   and does not reload page-local style elements.
   ========================================================== */

/* ==========================================================
   THULO_C5_B5_R1_B1_R2_HOSTING_WORKSPACE_SHARED_STYLES
   Shared Hosting Reconciliation / Service Management styles.
   Must live in the Infrastructure asset authority so SPA
   navigation and hard navigation render identically.
   ========================================================== */

.thr-head{
    margin:18px 0 14px;
}
.thr-eyebrow{
    color:#da2128;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}
.thr-head h1{
    margin:5px 0;
    font-size:28px;
}
.thr-head p{
    margin:0;
    color:#7b8794;
}
.thr-kpis{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:14px;
}
.thr-kpis>div{
    background:#fff;
    border:1px solid #e5e9ef;
    border-radius:10px;
    padding:13px 14px;
}
.thr-kpis span{
    display:block;
    color:#7c8794;
    font-size:11px;
}
.thr-kpis strong{
    display:block;
    margin-top:4px;
    font-size:22px;
}
.thr-tabs{
    display:flex;
    gap:6px;
    margin-bottom:10px;
}
.thr-tabs a{
    padding:8px 12px;
    border-radius:8px;
    color:#667085;
    font-size:12px;
    font-weight:700;
}
.thr-tabs a.active{
    background:#fff1f2;
    color:#da2128;
}
.thr-card{
    background:#fff;
    border:1px solid #e5e9ef;
    border-radius:10px;
    padding:12px;
}
.thr-filter{
    display:grid;
    grid-template-columns:minmax(250px,1fr) 190px auto;
    gap:8px;
    margin-bottom:12px;
}
.thr-filter input,
.thr-filter select{
    height:36px;
    border:1px solid #dfe4ea;
    border-radius:7px;
    padding:0 9px;
}
.thr-table{
    margin-bottom:0;
}
.thr-table th{
    font-size:11px;
    color:#667085;
}
.thr-table td{
    vertical-align:middle!important;
}
.thr-badge{
    display:inline-flex;
    align-items:center;
    padding:3px 7px;
    border-radius:999px;
    font-size:10px;
    font-weight:750;
}
.thr-badge.good{
    background:#ecfdf3;
    color:#027a48;
}
.thr-badge.warning{
    background:#fff7e6;
    color:#a15c00;
}
.thr-badge.legacy{
    background:#f2f4f7;
    color:#667085;
}
.thr-note{
    margin-bottom:12px;
    padding:10px 12px;
    border:1px solid #e5e9ef;
    border-radius:8px;
    background:#fafbfc;
    color:#667085;
    font-size:11px;
}
@media(max-width:900px){
    .thr-kpis{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .thr-filter{
        grid-template-columns:1fr;
    }
}


.thm-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin:18px 0 14px;
}
.thm-eyebrow{
    color:#da2128;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
}
.thm-head h1{
    margin:4px 0;
    font-size:28px;
}
.thm-head p{
    margin:0;
    color:#7d8794;
}
.thm-statuses{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}
.thm-pill{
    display:inline-flex;
    padding:5px 9px;
    border-radius:999px;
    background:#eef7f1;
    color:#297a49;
    font-size:10px;
    font-weight:750;
}
.thm-pill.legacy{
    background:#f2f4f7;
    color:#667085;
}
.thm-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}
.thm-card{
    background:#fff;
    border:1px solid #e5e9ef;
    border-radius:10px;
    padding:14px;
}
.thm-card h3{
    margin:0 0 12px;
    font-size:14px;
}
.thm-field{
    margin-bottom:12px;
}
.thm-field label,
.thm-pair label{
    display:block;
    margin-bottom:5px;
    color:#667085;
    font-size:10px;
    font-weight:750;
}
.thm-field select,
.thm-field input{
    width:100%;
    height:36px;
    border:1px solid #dfe4ea;
    border-radius:7px;
    padding:0 9px;
}
.thm-field small,
.thm-action-note{
    display:block;
    margin-top:5px;
    color:#8b95a1;
    font-size:10px;
}
.thm-pair{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-bottom:12px;
}
.thm-pair>div{
    border:1px solid #edf0f3;
    border-radius:8px;
    padding:9px;
}
.thm-pair strong{
    font-size:12px;
}
.thm-notice{
    padding:10px;
    border-radius:8px;
    background:#fafbfc;
    border:1px solid #e5e9ef;
    color:#667085;
    font-size:10.5px;
}
.thm-actions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}
.thm-divider{
    height:1px;
    margin:12px 0;
    background:#edf0f3;
}
@media(max-width:900px){
    .thm-grid{
        grid-template-columns:1fr;
    }
    .thm-head{
        flex-direction:column;
    }
}

/* END THULO_C5_B5_R1_B1_R4_PERSISTENT_HOSTING_WORKSPACE_CSS */

/* ==========================================================
   THULO_C5_B5_R1_B2_B1_MAIN_HOSTING_PERSISTENT_CSS

   Persistent presentation authority for the primary Hosting
   workspace screens.

   Existing local styles remain temporarily for safe direct
   navigation compatibility. This persistent copy prevents
   Infrastructure SPA transitions from losing page styling.
   ========================================================== */

/* SOURCE: INFRASTRUCTURE | application/views/admin/infrastructure/hosting/infrastructure.php */
.thi-kpis{
    display:grid;
    grid-template-columns:
        repeat(5,minmax(0,1fr));
    gap:10px;
    margin-bottom:16px;
}

.thi-kpis>div{
    border:1px solid #e7eaee;
    border-radius:10px;
    padding:13px 14px;
    background:#fff;
}

.thi-kpis span{
    display:block;
    color:#8a94a0;
    font-size:10px;
    font-weight:700;
}

.thi-kpis strong{
    display:block;
    margin-top:5px;
    color:#344054;
    font-size:21px;
}

.thi-filters{
    display:grid;
    grid-template-columns:
        minmax(180px,2fr)
        minmax(140px,1fr)
        minmax(140px,1fr)
        minmax(120px,1fr)
        auto;
    gap:8px;
    margin-bottom:13px;
}

.thi-context-note{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:13px;
    padding:10px 12px;
    border:1px solid #e6eaf0;
    border-radius:8px;
    background:#fafbfc;
    font-size:10.5px;
}

.thi-context-note strong{
    color:#475467;
}

.thi-context-note span{
    color:#8a94a0;
}

.thi-type,
.thi-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 7px;
    border-radius:999px;
    background:#eef2f6;
    color:#59636f;
    font-size:9px;
    font-weight:800;
    text-transform:capitalize;
}

.thi-badge.warning{
    background:#fff7e8;
    color:#9a6700;
}

@media(max-width:1000px){

    .thi-kpis{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .thi-filters{
        grid-template-columns:1fr;
    }
}

/* SOURCE: PROVIDERS | application/views/admin/infrastructure/hosting/providers.php */
.thp-note{
    display:flex;
    gap:8px;
    align-items:center;
    padding:10px 12px;
    margin-bottom:14px;
    border:1px solid #e6eaf0;
    border-radius:8px;
    background:#fafbfc;
    font-size:10.5px;
}

.thp-note strong{
    color:#475467;
}

.thp-note span{
    color:#8a94a0;
}

.thp-status{
    display:inline-flex;
    padding:4px 8px;
    border-radius:999px;
    background:#eef2f6;
    color:#59636f;
    font-size:9px;
    font-weight:800;
    text-transform:capitalize;
}

/* SOURCE: CONNECTIONS | application/views/admin/infrastructure/hosting/connections.php */
.thi-context-note{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:13px;
    padding:10px 12px;
    border:1px solid #e6eaf0;
    border-radius:8px;
    background:#fafbfc;
    font-size:10.5px;
}

.thi-context-note strong{
    color:#475467;
}

.thi-context-note span{
    color:#8a94a0;
}

/* SOURCE: CREDENTIALS | application/views/admin/infrastructure/hosting/credentials.php */
.thc-note{
    display:flex;
    gap:8px;
    padding:10px 12px;
    margin-bottom:14px;
    border:1px solid #e6eaf0;
    border-radius:8px;
    background:#fafbfc;
    color:#7c8795;
    font-size:10.5px;
}

.thc-note strong{
    color:#475467;
}

.thc-summary{
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:10px;
    margin-bottom:16px;
}

.thc-summary > div{
    padding:12px;
    border:1px solid #e6eaf0;
    border-radius:8px;
    background:#fff;
}

.thc-summary span{
    display:block;
    color:#8b95a3;
    font-size:10px;
}

.thc-summary strong{
    display:block;
    margin-top:2px;
    color:#344054;
    font-size:18px;
}

@media(max-width:850px){
    .thc-summary{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

/* END THULO_C5_B5_R1_B2_B1_MAIN_HOSTING_PERSISTENT_CSS */



/* ==========================================================
   THULO_C5_B5_R2_B1_RECON_ACTION_UI
   ========================================================== */

.thm-inline-action-form{
    display:inline-flex;
    margin:0;
}

.thm-action-feedback{
    margin-top:12px;
    padding:10px 12px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f8fafc;
    font-size:12px;
    line-height:1.55;
}

.thm-action-feedback.is-success{
    border-color:#bbf7d0;
    background:#f0fdf4;
}

.thm-action-feedback.is-error{
    border-color:#fecaca;
    background:#fef2f2;
}

.thm-action-feedback strong{
    display:block;
    margin-bottom:3px;
}

/* END THULO_C5_B5_R2_B1_RECON_ACTION_UI */


/* ============================================================
   THULO_C5_B5_R2_B2_B1_PLAN_ENDPOINT_CONTROLS
   ============================================================ */

.thm-control-form{
    display:block;
}

.thm-control-form select{
    width:100%;
}

.thm-control-actions{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.thm-control-actions .btn{
    min-width:118px;
}

/* END THULO_C5_B5_R2_B2_B1_PLAN_ENDPOINT_CONTROLS */


/* ============================================================
   THULO_C5_B5_R3_B2_PLAN_CHANGE_UI
   ============================================================ */

.thm-plan-change{
    margin-top:18px;
}

.thm-plan-change-preview{
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:14px;
}

.thm-plan-change-preview>div{
    border:1px solid #e7e9ec;
    border-radius:8px;
    padding:11px 13px;
    background:#fafbfc;
}

.thm-plan-change-preview span{
    display:block;
    font-size:12px;
    color:#7a7f87;
    margin-bottom:4px;
}

.thm-plan-change-preview strong{
    display:block;
    font-size:14px;
}

.thm-notice.is-success{
    border-color:#b8dfc6;
}

.thm-notice.is-error{
    border-color:#ecc3c3;
}

@media (max-width:767px){
    .thm-plan-change-preview{
        grid-template-columns:1fr;
    }
}

/* END THULO_C5_B5_R3_B2_PLAN_CHANGE_UI */


/* ============================================================
   THULO_C5_B5_R3_B2_R2C_BILLING_CYCLE_UI
   ============================================================ */

.thm-plan-change [hidden]{
    display:none !important;
}

.thm-plan-change .thm-field + .thm-field{
    margin-top:12px;
}

.thm-plan-change .thm-field small{
    display:block;
    margin-top:6px;
}

/* END THULO_C5_B5_R3_B2_R2C_BILLING_CYCLE_UI */