/* ==========================================================================

   Base Grid Layout for Node Summaries

   ========================================================================== */

.node_display

{

  display: grid;

  /* grid-template-columns: 180px minmax(400px, 1fr); /* Slightly widened label track for longer headers */

  grid-template-columns: 180px 1fr;

  gap: 10px;

  align-items: start;

  grid-auto-rows: auto;

  width: 100%;

  overflow: visible;

  color: #2c3e50;

  border: solid 1px #bdc3c7;

  background-color: #f8f9fa; /* Neutral soft light grey baseline instead of old pink */

  margin: 0px 0px 15px 0px;

  padding: 12px;

  border-radius: 4px;

  box-sizing: border-box !important;

}


.node_display_header

{

  font-weight: bold;

  color: #34495e;

}


.node_display > .uilabel

{

  width: 100%;

  text-align: left;

  word-wrap: break-word;

}


/* ==========================================================================

   Specialized Host Display Telemetry Styling

   ========================================================================== */

#host_display 

{

  background-color: #f4f7f6; /* Technical slate-tinted background */

  border: 1px solid #7f8c8d;

}


/* Subtle separator column feel for headers */

#host_display > .node_display_header 

{

  border-right: 2px solid #bdc3c7;

  padding-right: 8px;

}


/* Highlight risk warnings when capacities are exceeded */

#host_display > .uilabel:contains("[!! OVERPROVISIONED RISK !!]"),

#host_display > .uilabel:contains("MISSED HEARTBEAT") 

{

  color: #c0392b; /* Crimson alert */

  font-weight: bold;

}


/* ==========================================================================

   Existing Specialized Node Configurations (Kept intact)

   ========================================================================== */

#customer_display

{

  color: black;

  border: solid 1px #888;

  background-color: rgb(202, 214, 203); 

  padding: 8px;

  margin-bottom: 15px;

}


#domain_display

{

  color: black;

  border: solid 1px black;

  background-color: rgb(154, 194, 225);

  padding: 6px;

}


#ftp_user_display

{

  color: black;

  border: solid 1px black;

  background-color: rgb(214, 227, 163);

  padding: 6px;

}


#order_display

{

  color: black;

  border: solid 1px #888;

  background-color: rgb(210, 220, 225); 

  padding: 8px;

  margin-bottom: 15px;

}


#order_display > .node_display_header 

{

  color: #333;

  border-right: 1px solid rgba(0,0,0,0.1);

}


#unit_display {

    background-color: #f4f6f7; 

    border: 1px solid #34495e; 

    padding: 10px;

    margin-bottom: 20px;

}


#unit_display > .node_display_header {

    color: #2c3e50;

    font-weight: bold;

    /* border-right: 2px solid #34495e; */

    padding-right: 10px;

}


#disp_sync_status {

    font-weight: bold;

    text-transform: uppercase;

}


.status-running { color: #27ae60; } 

.status-pending { color: #f39c12; } 

.status-error   { color: #c0392b; } 


.node_display > .status_row_layout {

    display: flex !important;

    align-items: center;

    gap: 12px;

    width: 100%;

}


.status_row_layout #hudisp_sync_status {

    width: 400px !important;    

    min-width: 400px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    font-weight: bold;

    display: inline-block;

}


#hudisp_status_icon {

    width: 32px !important;

    height: 32px !important;

    object-fit: contain;

    flex-shrink: 0;            

}


/* Container layout to force side-by-side positioning */

.gauges_container {

    display: flex !important;

    flex-direction: row;

    flex-wrap: nowrap;

    justify-content: space-around;

    align-items: center;

    gap: 20px;

    width: 100%;

    margin: 2px 0;

    padding: 2px 10px;

    box-sizing: border-box;

}


/* Base style constraints for each gauge instance */

.gauges_container > div, 

.gauges_container > ui-gauge { /* Adjust selector based on how UIGauge compiles to DOM */

    flex: 1 1 0px;

    min-width: 120px;

    max-width: 250px; /* Prevents them from bloating on wide screens */

    aspect-ratio: 1 / 1; /* Guarantees a perfect square for round styles */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    margin: 0;

    padding: 0;


}


/* Ensure underlying svg canvas vectors fit perfectly inside the component bounding box */

.gauges_container svg {

    width: 100%;

    height: 100%;

    max-height: 220px;

    display: block;

}


/*

 * for the backup table

 */

/* Enforce a clean structural box around the tabbed subgrid */

div.uiTableContainer {

    max-height: 280px; /* Cap vertical expansion so the forms stay in view */

    border: 1px solid #dcdcdc;

    border-radius: 4px;

    margin-bottom: 15px;

    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);

}


/* Base structural adjustments for our specific table class */

table.uiTableBackupGrid {

    font-size: 13px; /* Slightly tighter text footprint inside tabs */

    font-family: inherit;

}


/* Subdue the intense cornflower blue header row to an elegant slate gray */

table.uiTableBackupGrid th {

    background-color: #6c7a89; 

    color: #ffffff;

    font-weight: 600;

    padding: 10px 12px;

    position: sticky; /* Keep headers pinned at top if scrolling the body */

    top: 0;

    z-index: 2;

}


/* Refine cell padding and add subtle divider borders */

table.uiTableBackupGrid td {

    padding: 10px 12px;

    border-bottom: 1px solid #eef0f2;

    vertical-align: middle;

}


/* Softer zebra row variations */

table.uiTableBackupGrid tr:nth-child(even) {

    background-color: #fafbfc;

}


/* Subtle, professional hover state instead of a deep gray block */

table.uiTableBackupGrid tr:hover:not(.active) {

    background-color: #f1f3f5;

}


/* Soft administrative blue for the active row instead of deepskyblue */

table.uiTableBackupGrid tr.active {

    background-color: #e2f0fd;

    color: #0b5ed7;

}


/* --- Inline Action Buttons Styling --- */

table.uiTableBackupGrid button.btn_table_action,

table.uiTableBackupGrid button.btn_table_danger {

    padding: 4px 8px;

    font-size: 12px;

    font-weight: 500;

    border-radius: 3px;

    border: 1px solid #dcdcdc;

    background-color: #ffffff;

    cursor: pointer;

    transition: all 0.15s ease-in-out;

}


/* Restore Button */

table.uiTableBackupGrid button.btn_table_action {

    color: #2b78e4;

}

table.uiTableBackupGrid button.btn_table_action:hover {

    background-color: #eaf2fe;

    border-color: #2b78e4;

}


/* Delete Button */

table.uiTableBackupGrid button.btn_table_danger {

    color: #dc3545;

}

table.uiTableBackupGrid button.btn_table_danger:hover {

    background-color: #fdf2f4;

    border-color: #dc3545;

}



/* ==========================================================================

   Specialized Overrides for Backup & Recovery Form Tab Layouts

   ========================================================================== */


/* 1. Normalize the restrictive 3-column structural form layout constraints */

#unitBackupForm.uiForm {

    grid-template-columns: 180px 2.5fr 2fr !important; /* Matches the 180px width of your top .node_display summary metrics label rail */

    grid-gap: 12px !important;

    padding: 15px 5px !important;

    width: 100%;

}


/* 2. Standardize element alignment (Fixing core UIForm.css center-alignment bugs) */

#unitBackupForm .uiFormLabel {

    justify-content: flex-start !important; /* Left-align description labels */

    color: #34495e !important;              /* Matches your .node_display_header corporate charcoal style */

    font-size: 14px !important;

    font-weight: 500 !important;

}


#unitBackupForm .uiFormInput {

    justify-content: flex-start !important; /* Keep input boxes properly aligned to the left edge */

}


/* 3. Strip legacy terminal-green/matrix inputs inside this tab wrapper */

#unitBackupForm .uiFormInput > input,

#unitBackupForm .uiFormInput > select {

    width: 100% !important;                  /* Overrides the rigid 200px terminal limits */

    max-width: 450px !important;            /* Clean horizontal containment boundary line */

    height: 32px !important;

    background-color: #ffffff !important;    /* Pristine background fill */

    color: #2c3e50 !important;               /* Matching font profile color keys */

    border: 1px solid #bdc3c7 !important;    /* Standard grey border accent lines */

    border-radius: 4px !important;

    padding: 4px 8px !important;

    font-family: inherit !important;         /* Drop blocky monospaced system font types */

    font-size: 14px !important;

    box-sizing: border-box !important;

}


/* Style description hint rows below variables */

#unitBackupForm .uiFormHint {

    justify-content: flex-start !important;

    color: #7f8c8d !important;               /* Muted grey font accents */

    font-size: 12px !important;

    padding: 0 5px !important;

}


/* 4. Functional Native Forms Button Modernization (Bypass missing xml classes) */

#unitBackupForm button[name="btn_trigger_backup"],

#unitBackupForm button[name="btn_save_retention"] {

    width: auto !important;                  /* Discard the rigid 60px/100px .uiButton rules */

    min-width: 160px !important;

    max-width: 250px !important;

    height: 34px !important;

    padding: 0 16px !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    border-radius: 4px !important;

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    border: none !important;

    cursor: pointer !important;

    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;

    transition: background-color 0.15s ease-in-out !important;

}


/* Primary Snapshot Call-To-Action Variant styling elements */

#unitBackupForm button[name="btn_trigger_backup"] {

    background: #2b78e4 !important;          /* Standard Blue Accent Color matching table actions */

    color: #ffffff !important;

}

#unitBackupForm button[name="btn_trigger_backup"]:hover:not(:disabled) {

    background: #1462ce !important;

}


/* Secondary Settings Action Button Variant styling elements */

#unitBackupForm button[name="btn_save_retention"] {

    background: #eef0f2 !important;

    color: #34495e !important;

    border: 1px solid #cbd5e1 !important;

}

#unitBackupForm button[name="btn_save_retention"]:hover:not(:disabled) {

    background: #dcdde1 !important;

}


/* Security Lockout System Adjustments */

#unitBackupForm button:disabled,

#unitBackupForm input:disabled,

#unitBackupForm select:disabled {

    background-color: #eaeded !important;

    color: #95a5a6 !important;

    border-color: #d5dbdb !important;

    cursor: not-allowed !important;

    box-shadow: none !important;

}


/* ==========================================================================

   Backup Data Table Stretching & Width Optimization

   ========================================================================== */


/* Enforce a clean structural box around the tabbed subgrid and force width */

div.uiTableContainer {

    width: 100% !important;   /* Force the container to occupy full tab width */

    max-height: 280px; 

    border: 1px solid #dcdcdc;

    border-radius: 4px;

    margin-bottom: 20px;

    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);

    box-sizing: border-box;

    flex-shrink: 0 !important; /* Prevent flex boxes from pinching the data grid out of frame */

}


/* Ensure the layout table expanding properties span corner-to-corner */

table.uiTableBackupGrid {

    width: 100% !important;

    table-layout: fixed;      /* Forces strict column width adherence */

    font-size: 13px;

    font-family: inherit;

}


/* * Assign clean, explicit percentage allocations to the remaining columns.

 * Adjust these values based on your exact layout column indexes.

 */

table.uiTableBackupGrid th:nth-child(1),

table.uiTableBackupGrid td:nth-child(1) {

    width: 15% !important;    /* Snapshot Date/Time Column */

}


table.uiTableBackupGrid th:nth-child(2),

table.uiTableBackupGrid td:nth-child(2) {

    width: 10% !important;    /* Type Column */

}


table.uiTableBackupGrid th:nth-child(3),

table.uiTableBackupGrid td:nth-child(3) {

    width: 12% !important;    /* Path Column */

}


table.uiTableBackupGrid th:nth-child(4),

table.uiTableBackupGrid td:nth-child(4) {

    width: 10% !important;    /* Size Column */

}


table.uiTableBackupGrid th:nth-child(5),

table.uiTableBackupGrid td:nth-child(5) {

    width: 35% !important;    /* Description / Note Column (Gives text room to breathe) */

}


table.uiTableBackupGrid th:nth-child(6),

table.uiTableBackupGrid td:nth-child(6) {

    width: 20% !important;    /* State / Status Text + Image Column */

}


/* ==========================================================================

   Structural Layout Containers Height & Scroll Normalization

   ========================================================================== */


/* 1. Fix the Hosts Admin Screen layout breakout */

.admin_layout_grid {

    display: flex !important;

    flex-direction: column !important; /* Flatten grid matrix to a clean vertical stack */

    width: 100% !important;

    height: 100% !important;           /* Contain it exactly within the framework pane */

    overflow-y: auto !important;       /* ✅ Auto rolls localized vertical scrollbars when viewport shrinks */

    overflow-x: hidden !important;

    box-sizing: border-box;

    padding-bottom: 25px !important;   /* Leaves breathing space for action buttons */

}


/* 2. Fix the Hosting Unit Tab view clipping without breaking toggle displays */

div.UITabbedPane {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    height: 100% !important;

    overflow: visible !important;      /* Allow inner child contents to dictate constraints */

}


/* Target the underlying framework content wrappers sitting inside tab items */

.UITabbedPane > div.uipanel {

    overflow-y: auto !important;       /* ✅ Auto scrolls form views exclusively, leaving tab buttons pinned */

    overflow-x: hidden !important;

    box-sizing: border-box;

    padding-bottom: 25px !important;

}


/* 3. Global structural assurance for input forms inside these containers */

#hostEditForm,

#hostingUnitEditForm,

#unitBackupForm {

    height: auto !important;

    overflow: visible !important;      /* Let forms expand naturally so their parents scroll them */

}