/* === General Layout  ========================================================================= */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #fffda8;
    background: #e6f0ff; 
    background: #CCCCff; 
}

html {
  scroll-padding-top: 5em;  /* offset for in-page anchor jumps */
  scroll-behavior: smooth;
}

div { padding: 0px 0px;}

.content {
    padding: 2px 20px;
    margin: 0;

}
h2 {
    font-size: 1.35em;
    padding: 2px 0;
    margin: 0;
}

/* === Footer Text ============================================================================= */
footer {
    font-size: 0.85em;
    padding: 5px 20px;
    margin: 0;
    text-align: left;
  }
/* ================================================================================================================= */
/* === Banner                                                                                                        */
/* ================================================================================================================= */
.topbar {
    background: #336699;
    color: white;
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 2000;
}
.left-group {
    display: flex;
    align-items: center;
    gap: 15px;
}
.right-group {
    display: flex;
    align-items: center;
}
/* === Daemon Lights =========================================================================== */
.daemon-lights {
    display: flex;
    flex-direction: column; /* --- Stack Vertically -------------------------------------------- */
    gap: 4px;               /* --- Space Between Dots                                            */
    margin: 2px 5px;        /* --- Spacing Before Logo ----------------------------------------- */
}
.daemon-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
/* --- Status Colors --------------------------------------------------------------------------- */
.daemon-light.fsm-online  { background: #28a745; }  /* Green      */
.daemon-light.fsm-offline { background: #ffc107; }  /* Amber      */
.daemon-light.fsm-dead    { background: #343a40; }  /* dark gray  */
.daemon-light.fsm-waiting { background: #007bff; }  /* light blue */
.daemon-light.fsm-deleted { background: #ffff00; }  /* light blue */

/* === Logos and Icons ========================================================================= */
.logo {
    font-size: 1.5em;
    font-weight: bold;
    white-space: nowrap;
}
.top-icons { display: none; } /* --- Hidden By Default (Mobile) -------------------------------- */

.top-icons .ti:hover { background: rgba(255,255,255,0.65); }

.breadcrumbs {
    font-size: 1.0em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.breadcrumbs span { color: yellow; }


/* === Only Show Top Icons On Medium To Large Screens ========================================== */
@media (min-width: 600px) {
  .top-icons { 
    display: flex; 
  }
  .top-icons .ti {
    display: inline-flex;
    font-size: 1.3em;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    line-height: 1;
    padding: 4px 8px; /* --- Bigger Click Target ----------------------------------------------- */
    margin-left: 0px;
    border-radius: 6px;
    }

}

/* === Increase Icon Size And Gap On Larger Screens ============================================ */
@media (min-width: 1024px) { 
  .top-icons { 
    font-size: 1.8em; 
    display: flex; 
    gap: 25px;
    padding: 8px 12px; 
    margin-left: 50px;
    }
}

/* ================================================================================================================= */
/* === Menu Dropdown                                                                                                 */
/* ================================================================================================================= */
.menu-btn {
    font-size: 1.2em;
    width: 1.4em
    cursor: pointer;
    user-select: none;
}
.menu-icon {
    font-size: 1.5em;
    display: inline-block;
    width: 1.4em;
}

/* =====================================================
   Main dropdown menu
===================================================== */
.menu-dropdown {
    display: none;
    padding: 5px 4px 8px 4px;
    position: absolute;
    top: 2em;
    right: 20px;
    background: white;
    color: black;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    min-width: 230px;
    z-index: 1000;
    transition: 200ms ease-in-out;
}
/* =====================================================
   Standard menu links
===================================================== */
.menu-dropdown a,
.submenu-title {
    display: block;
    padding: 4px 4px;
    text-decoration: none;
    color: black;
    font-size: inherit;
    line-height: 1.4;
    cursor: pointer;
}
.menu-dropdown a:hover,
.submenu-title:hover {
    background: #f0f0f0;
    border-radius: 4px;
}
/* =====================================================
   Submenu container
===================================================== */
.submenu {
    position: relative;
}
/* =====================================================
   Arrow indicator
===================================================== */
.submenu-title::after {
    content: "▸";
    float: right;
    transition: transform 0.2s ease;
}
/* rotate arrow when open */
.submenu.open .submenu-title::after {
    transform: rotate(90deg);
}
/* =====================================================
   Submenu content
===================================================== */
.submenu-content {
    display: none;
    padding-left: 18px;      /* indentation */
}
/* expanded submenu */
.submenu.open .submenu-content {
    display: block;
}
/* submenu links */
.submenu-content a {
    display: block;
    padding: 4px;
    text-decoration: none;
    color: black;
    font-size: inherit;
}
.submenu-content a:hover {
    background: #f0f0f0;
    border-radius: 4px;
}

/* =====================================================
   Divider
===================================================== */

.menu-dropdown hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 6px 0;
}

/* =====================================================
   Larger icons on desktop
===================================================== */
@media (min-width: 1024px) {
    .menu-btn {
        font-size: 2em;
    }
}

/* ================================================================================================================= */
/* === Flash Messages                                                                                                */
/* ================================================================================================================= */
.flash {
    margin: 0;
    padding: 2px 10px;
    border-radius: 5px;
}
.ok {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.info {
    background: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}
li { padding: 3px;}

/* ================================================================================================================= */
/* === Tables                                                                                                        */
/* ================================================================================================================= */
table {
    border-collapse: collapse;
    table-layout: auto;
    width: auto;
    margin-top: 15px;
    margin-right: auto;
}
th, td {
    border: 1px solid #ccc;
    padding: 6px;
    text-align: center;     /* ensure left alignment ------------------------------------------- */
    white-space: nowrap;    /* prevent text wrapping ------------------------------------------- */
}
th {
    background: #336699;
    color: #ffffff;
}
tr:nth-child(even) { background: #E0FFFF; }
tr:nth-child(odd)  { background: #FFFACD; }


/* ================================================================================================================= */
/* === Buttons and Colours                                                                                           */
/* ================================================================================================================= */
.fsm-waiting { color: #007bff; } /* light blue */
.fsm-online  { color: #28a745; } /* green      */
.fsm-offline { color: #ffc107; } /* amber      */
.fsm-sick    { color: #fd7e14; } /* orange     */
.fsm-dying   { color: #dc3545; } /* red        */
.fsm-dead    { color: #343a40; } /* dark gray  */
.fsm-deleted { color: #708090; } /* slate grey */

/* === Toggle Buttons (Row-level) ============================================================== */
.toggle-btn {
    min-width: 80px;
    max-width: 180px;
    padding: 2px;
    border: none;
    border-radius: 4px;
    background: #cc66ff;
    color: #fff;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toggle-btn .label-off { display: none; }

.toggle-btn.active       { background: #28a745; } /* green */
.toggle-btn.active:hover { background: #dc3545; } /* red   */

.toggle-btn.active:hover .label-on  { display: none;   }
.toggle-btn.active:hover .label-off { display: inline; }

.toggle-btn.inactive       { background: #dc3545; } /* red   */
.toggle-btn.inactive:hover { background: #28a745; } /* green */
}
.toggle-btn.inactive:hover .label-on  { display: none;   }
.toggle-btn.inactive:hover .label-off { display: inline; }


/* === Bulk Buttons (Section-level) ============================================================ */
.bulk-btn {
    min-width: 50px;
    max-width: 180px;
    background: #cc66ff;
    padding: 4px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 5px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.3s;
}
.bulk-btn.activate         { background: #28a745; }
.bulk-btn.activate:hover   { background: #218838; }

.bulk-btn.deactivate       { background: #dc3545; }
.bulk-btn.deactivate:hover { background: #c82333; }

.bulk-btn[disabled] {
  opacity: .5;
  cursor: default;
  pointer-events: none; /* optional */
}

/* === Monitor inline buttons (ID / Status) ==================================================== */
.syd-btn {
    min-width: 50px;
    max-width: 180px;
    background: #3399ff;
    padding: 4px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 5px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.3s;
}
.syd-btn:hover { 
    text-decoration: none; 
    background: #336699;
 }
.syd-btn:disabled {
  color: #9aa7b7;
  text-decoration: none;
  cursor: not-allowed;
}
.syd-btn:focus-visible {
  outline: 2px solid #5bb0ff;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- quick visual confirmation on auto-filled field ------------------------------------------ */
.quickfill-flash { outline: 2px solid #5bb0ff; outline-offset: 2px; border-radius: 4px; }


/* === Column header controls (Hold/Resume stacks) === */
.col-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.col-controls .bulk-btn {
  width: 100%;
  padding: 3px 6px;
  font-size: 0.75em;
}

/* ================================================================================================================= */
/* === Report                                                                                                        */
/* ================================================================================================================= */
.report {
    margin: 5px;
    padding: 2px 20px;
    border: none;
    border-radius: 10px;
    font-family: Arial, sans-serif;
    background: #F0F8FF;
}

.code-block {
  --bg: #3871a9;         /* dark background */
  --fg: #FFFFFF;         /* foreground */
  --border: #1b2540;

  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 1rem 0;
  font: 0.75rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre;       /* keeps indentation */
  tab-size: 2;
  overflow: auto;         /* scroll if long */
  position: relative;
}

.ini, .bash {
  background: #0F0F0F;
  color: #fff;
  min-width: 40%;
  width: max-content;
}

.json {
  background: #3871a9;
  color: #fff;
  min-width: 80%;
  width: max-content;
}

/* Optional: show a small language label */
.code-block[data-lang]::before {
  content: attr(data-lang);
  position: absolute;
  top: 6px;
  right: 130px;
  font-size: 0.7rem;
  opacity: 0.7;
}

.code-block .copy-link {
  color: #FFF;
  top: 6px;
  right: 8px;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 0 8px;
  border: none;
  text-decoration: none;
  opacity: .8;
  cursor: pointer;
  background: transparent;
  position: absolute;
}
.code-block .copy-link:hover { opacity: 1; }

code {
    background: #ccc;
    margin: 2px;
    padding: 2px 10px;
    border: none;
    border-radius: 10px;
}

/* ==== Adminer MySQL Admin iFRame==== */
.adminer-embed {
margin-top: 0px;
border: 2px solid #dbe4f4;
border-radius: 10px;
overflow: hidden;
/* Fill the viewport under your banner; adjust 120px if your header is taller */
height: calc(100vh - 125px);
background: #ccc;
}
.adminer-embed iframe {
width: 100%;
height: 100%;
border: 0;
display: block;
}

/* ==== Monitor page styling (scoped) ==== */
.monitor-page { padding: 0 0 10px 0; }

/* Filters as tidy cards */
.monitor-page .filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 250px));
  gap: 8px;
  margin: 8px 0 10px;
}
.monitor-page .filters label {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #ccd6e6;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.monitor-page .filters input,
.monitor-page .filters select {
  font: inherit;
  padding: 4px 6px;
  border: 1px solid #cfd7e6;
  border-radius: 6px;
  background: #fff;
}

/* Make the toggle look active when filters are open */
# toggle-filters.activate { /* reuses your .bulk-btn styles */
  /* nothing else needed; class is for visual cue if you want */
}
/* Controls / pagination bars */
.monitor-page .controls-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}
.monitor-page .ps-select { min-width: 90px; }

/* Table tweaks to match your theme */
.monitor-page .table-wrap { overflow:auto; }
.monitor-page table { width: 100%; border-collapse: collapse; }
.monitor-page th, .monitor-page td { white-space: nowrap; }
.monitor-page th a { color: #fff; text-decoration: none; }            /* header links on #336699 */
.monitor-page th a:hover { text-decoration: underline; }              /* match your th bg color */ /* :contentReference[oaicite:0]{index=0} */

/* Buttons that look like links (for ID / Status cells) */
.monitor-page .linklike {
  background: none; border: none; padding: 0;
  color: #0b5fb3; cursor: pointer; font: inherit;
  text-decoration: underline;
}
.monitor-page .linklike:hover { text-decoration: none; }

/* Muted text */
.monitor-page .muted { color: #555; }

/* ==== Modal (popup) styling ==== */
.monitor-page .modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  display: none; align-items: center; justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(1px);
}
.monitor-page .modal {
  animation: mp-pop .12s ease-out;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #dbe4f4;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  display: flex;              /* stack header + body */
  flex-direction: column;
  max-height: 86vh;          /* keep it from growing too tall */
  overflow: hidden;      
  width: min(980px, 92vw);
}
@keyframes mp-pop { from { transform: scale(.98); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.monitor-page .modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: #336699;           /* your header color */             /* :contentReference[oaicite:1]{index=1} */
  color: #fff;
  border-bottom: 1px solid #2b5888;
  position: sticky; top: 0; z-index: 1;
}
.monitor-page .modal-header {
  font-size: 1.05em;
  flex: 0 0 auto;             /* fixed height area */
  /* position: sticky; top: 0;  (optional; not needed since body scrolls) */
}
.monitor-page .modal-body {
  padding: 12px;
  background: #fff;
  flex: 1 1 auto;             /* take remaining height */
  overflow-x: auto;           /* horizontal scrollbar when needed */
  overflow-y: auto;           /* vertical scrollbar when needed */
  -webkit-overflow-scrolling: touch; /* smoother on iOS */
}

/* Key/value layout in the vertical details */
.monitor-page .kv {
  display: grid; grid-template-columns: 180px 1fr;
  gap: 8px 12px; margin: 6px 0 10px;
}
.monitor-page .kv dt { font-weight: 600; color: #333; }
.monitor-page .kv dd { margin: 0; }

/* If long <pre> blocks appear, allow them to scroll horizontally instead of stretching */
.monitor-page pre.msg {
  white-space: pre-wrap; 
  word-break: break-word; 
  background: #fafcff;
  border: 1px solid #e3ebf7;
  border-radius: 8px; padding: 8px;
  overflow-x: auto;
  
}

/* Modal action row */
.monitor-page .modal-actions {
  display: flex; gap: 8px; margin-top: 12px;
}

/* Optional: slightly tighter table inside modal so it can scroll horizontally */
.monitor-page .modal-body .table {
  table-layout: auto;         /* let columns size naturally */
  width: max-content;         /* allow horizontal growth; body will scroll */
  min-width: 100%;            /* but don't get smaller than the modal */
}

/* Log Page ************************************************************************************ */
.log-page { 
    padding: 6px 0 12px;  
}
.log-toolbar { 
    display:flex; 
    flex-wrap:wrap; 
    gap:8px; 
    align-items:center; 
    margin:8px 0;
}
.log-toolbar .grow { 
    flex: 1 1 auto; 
}
.log-meta { 
    font-size:12px; 
    color:#666; 
    margin-left:auto; 
}
.log-wrap { 
    border:1px solid #dbe4f4; 
    background:#0c0f14; 
    color:#e6eefc; 
    border-radius:10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.18); 
}
.log-out { 
    font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    padding:10px; 
    white-space:pre; 
    overflow:auto; 
    height:60vh; 
 }
.log-out code { 
    color:inherit; 
    background:none; 
}
.badge { 
    display:inline-block; 
    padding:2px 6px; 
    border-radius:999px; 
    font-size:11px; 
    background:#2a3444; 
    color:#cfe1ff; 
}
.pill { 
    padding:4px 10px; 
    border-radius:999px; 
    background:#162030; 
    color:#cfe1ff; 
}
.muted { 
    color:#9fb0c7; 
}
.field { 
    display:inline-flex; 
    gap:6px; 
    align-items:center; 
}
.field input[type="text"] { 
    padding:4px 6px; 
    border:1px solid #cfd7e6; 
    border-radius:6px; 
}
.field select { 
    padding:4px 6px; 
    border:1px solid #cfd7e6; 
    border-radius:6px; 
}
/* ********************************************************************************************* */

/* === Dark Mode === */
body.dark {
    background: #1e1e1e;
    color: #ddd;
}
body.dark table {
    border-color: #555;
}
body.dark tr:nth-child(even) { background: #2a2a2a; }
body.dark tr:nth-child(odd) { background: #222; }
body.dark .topbar { background: #111; }
body.dark .menu-dropdown { background: #333; color: #ddd; }
body.dark .menu-dropdown a { color: #ddd; }
body.dark .menu-dropdown a:hover { background: #444; }

/* Dark mode harmony with your theme */
body.dark .monitor-page .filters label { background:#222; border-color:#444; }
body.dark .monitor-page .filters input,
body.dark .monitor-page .filters select { background:#111; color:#ddd; border-color:#444; }
body.dark .monitor-page .modal { background:#1f1f1f; border-color:#333; }
body.dark .monitor-page .modal-header { background:#111; color:#ddd; }
body.dark .monitor-page .modal-body { background:#1f1f1f; color:#ddd; }
body.dark .monitor-page pre.msg { background:#111; border-color:#333; color:#ddd; }

/* === Responsive Tables === */
.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  table-layout: auto; /* natural sizing for important columns */
}

th, td {
  white-space: nowrap;  /* prevent wrapping in all columns */
}

@media (max-width: 1100px) {
  .monitor-page .filters { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
  .monitor-page .kv { grid-template-columns: 140px 1fr; }
}

/* Hide non-essential columns on smaller screens */
@media (max-width: 768px) {
  /* Section headings */
  h2 {
    font-size: 1.1em;
    padding: 2px 0;
    margin: 3px 0;
  }

  /* Footer text */
  footer {
    font-size: 0.75em;
    padding: 5px 6px;
    margin: 0;
    text-align: left;
  }

  /* Tables condensed */
  table {
    font-size: 0.85em;
    margin-top: 4px;
  }

  li {
    font-size: 0.85em;
    margin-top: 4px;
  }

  th, td {
    padding: 4px 6px;
  }

  /* Bulk buttons smaller */
  .bulk-btn {
    width: auto;
    padding: 4px 6px;
    font-size: 0.85em;
    margin: 2px 2px;
  }

  /* Toggle buttons smaller */
  .toggle-btn {
    width: 90px;
    padding: 3px;
    font-size: 0.85em;
  }

  /* Topbar tighter */
  .topbar {
    height: 3em;
    padding: 0 10px;
  }

  .logo {
    font-size: 1.2em;
  }

  .breadcrumbs {
    font-size: 0.85em;
    gap: 3px;
  }

  .daemon-lights {
    gap: 3px;
    margin-right: 6px;
  }

  /* Flash messages */
  .flash {
    padding: 6px;
    font-size: 0.85em;
    margin-bottom: 2px;
  }

  /* Reduce spacing between sections */
  hr {
    margin: 4px 0;
  }

  .content {
    padding: 6px;
  }
}

@media (max-width: 640px) {
  .monitor-page .filters { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .monitor-page .kv { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Footer text */
  footer {
    font-size: 0.65em;
    padding: 5px 6px;
    margin: 0;
    text-align: left;
  }
}