/* FLEXBOX PAGE LAYOUT */

body, html {
  height: 100%;
  margin: 0;
}

.grid-layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto; /* Let the rows expand based on content */
  gap: 1rem;
  height: 100%; /* Full viewport height */
}

header {
  grid-area: header;
  height: auto; /* Automatically adjusts based on content */
}

footer {
  grid-area: footer;
  height: auto; /* Automatically adjusts based on content */
}

main {
  height:-20%
  grid-area: main;
  padding: 1rem; /* Optional: padding */
  overflow: auto; /* Allow scrolling if content overflows */
}



    .main-module {
      height:auto;
      max-height:500px;
      background: var(--main-bg);
      background-image: linear-gradient(to right, #fff, #789abc);
      color: var(--main-text);
      border: var(--main-border);
      border-radius: var(--main-radius);
      box-shadow: var(--main-shadow);
      padding: var(--main-padding);
      margin: 3rem auto 2rem auto; /* Top and bottom margin for spacing, auto for horizontal centering */
      width: 80vw;
      /*max-width: 900px;*/
      min-width: 320px;
      display: block;
      /* Remove flex, min-height, and overflow so height fits content */
    }
    






/* ==================================
   CSS VARIABLES FOR THEMES & COLORS
   ================================== */
:root {
  /* Modal/Overlay Variables */
  --modal-bg: #fff;
  --modal-padding: 24px 32px;
  --modal-min-width: 600px;
  --modal-max-width: 98vw;
  --modal-radius: 10px;
  --modal-shadow: 0 8px 32px #2228;
  --modal-overlay-bg: rgba(0,0,0,0.35);
  --modal-z: 30000;
  --sticky-col-text-color: #ffffff; /* Text color for sticky column */
}
:root {
  /* Core color and font variables */
  --bg-main: #f9fafc;
  --text-main: #1a2233;
  --card-bg: #fff;
  --accent: #234567;
  --accent-light: #345678;
  --accent-hover: #123456;
  --list-bg: #e8eef7;
  --shadow: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-card: 0 2px 14px rgba(30,40,90,0.06);
  --login-btn: #3b82f6;
  --login-btn-hover: #234567;
  --error: #ef4444;
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --color-white: #fff;
  /* Layout and menu variables (theme-overridable) */
  --border-radius: 8px;
  --border: 2px solid #aaaaaa;
  --border-small: 1px solid #aaaaaa;
  --padding: 12px;
  --menu-color: purple;
  --box-shadow: 10px 10px 10px #aaaaaa;
  --menu-width: 80vw;
  --margin-center: 0 auto;
  --footer-gap: 32px; /* space between main content and footer */
  /* Footer module variables */
  --footer-bg: #f1f1f1;
  --footer-text: #000000  ;
  --footer-border: var(--border);
  --footer-radius: var(--border-radius);
  --footer-shadow: var(--shadow);
  --footer-padding: var(--padding);
  /* Main module variables */
  --standard-border: 1px solid #000000;
  --main-bg: #6789ab; 

  --main-text: #1a2233;
  --main-border: var(--border);
  --main-radius: var(--border-radius);
  --main-shadow: var(--shadow);
  --main-padding: var(--padding);
  --main-width: 80vw;
  --main-margin: 0 auto 32px auto;
  --main-gap: 32px;
  --tr-odd-row-color:#eeeeee;
  --tr-even-row-color:#ffffff;
  --tr-text-color:#1a2233;
  --tr-text-color-alt:#fff;
  --first-col-first-color:#456789;
  --first-col-second-color:#000;
  --file-template-num-align:right;
  --file-template-font-variant:small-caps;
  --file-template-font-size:1rem; 
  --a-link-decoration:none;
  --menu-bg-color:#eee; 
  --gradient-color: #123456,#6789ab;
  --table-header-color:#cdef;

  /* ==================================================
     FORM LAYOUT VARIABLES (DESIGN TOKENS)
     --------------------------------------------------
     All key design variables for forms, layout, and theme
     are defined here. To adjust the look and feel of
     forms globally, edit only this section.
     ================================================== */
  /* ---- Form Layout Variables ---- */
  --pm-form-label-width: 120px;
  --pm-form-field-min-width: 220px;
  --pm-form-gap-row: 0.75em;
  --pm-form-gap-col: 1.5em;
  --pm-form-padding: 2em;
  --pm-form-radius: 8px;
  --pm-form-bg: #123456;
  --pm-form-shadow: 0 2px 12px rgba(0,0,0,0.07);

  /* ---- Form Typography ---- */
  --pm-form-label-font: 500 1rem/1.4 'Inter', Arial, sans-serif;
  --pm-form-input-font: 400 1rem/1.4 'Inter', Arial, sans-serif;

  /* ---- Form Colors ---- */
  --pm-form-label-color: #fff;
  --pm-form-input-bg: #fafbfc;
  --pm-form-input-border: #d3d7db;
  --pm-form-input-focus: #0078d4;
}

/****************************************/
/* AMALGAMATED CONTENT FROM BASE1.CSS */
/****************************************/

/* Gantt/Timeline specific variables (from base1.css, only if not present in base.css) */
:root {
  --gantt-month-divider: 2px solid var(--gantt-month-divider-color, #000);
  --gantt-month-divider-width: 2px;
  --gantt-month-divider-color: #000;
  --gantt-tr-height: 35px;
  --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --border-divider: #b0b0b0 !important;
  --table-border: 1px solid #e0e0e0;
  --gantt-table-border: 1px solid #e0e0e0;
  --gantt-zebra-border: 1px solid #e5e5e5;
  --gantt-zebra-border-odd: 1px solid #d8d8d8;
  --gantt-zebra-border-even: 1px solid #ededed;
  --gantt-row-height: 24px;
  --table-row-height: 24px;
  --table-col-width: 120px;
}


[data-theme="dark"] {
  --bg-main: #181c24;
  --text-main: #f3f6fa;
  --card-bg: #23293a;
  --accent: #6cb3fa;
  --accent-light: #a2c7fa;
  --accent-hover: #4b97d1;
  --list-bg: #222c38;
  --shadow: 0 2px 8px rgba(0,0,0,0.24);
  --shadow-card: 0 2px 14px rgba(30,40,90,0.22);
  --login-btn: #2563eb;
  --login-btn-hover: #1e40af;
  --error: #f87171;
  --footer-bg: #23293a;
  --footer-text: #f3f6fa;
  --footer-border: 2px solid #6cb3fa;
  --footer-radius: 7px;
  --footer-shadow: 0 2px 10px rgba(0,0,0,0.24);
  --footer-padding: 10px 18px;
  --main-bg: #23293a;
  --main-text: #f3f6fa;
  --main-border: 2px solid #6cb3fa;
  --main-radius: 7px;
  --main-shadow: 0 2px 10px rgba(0,0,0,0.24);
  --main-padding: 10px 18px;
  --main-width: 80vw;
  --main-margin: 0 auto 32px auto;
}

[data-theme="quirky"] {
  --bg-main: #fffbe7;
  --text-main: #3a2c1a;
  --card-bg: #ffe4e1;
  --accent: #ff69b4;
  --accent-light: #ffb347;
  --accent-hover: #ff6f61;
  --list-bg: #fff0f5;
  --shadow: 0 4px 16px rgba(255, 105, 180, 0.12);
  --shadow-card: 0 2px 14px rgba(255, 105, 180, 0.13);
  --login-btn: #ff69b4;
  --login-btn-hover: #ff1493;
  --error: #d33;
  --footer-bg: #ffb347;
  --footer-text: #3a2c1a;
  --footer-border: 2px dashed #ff69b4;
  --footer-radius: 14px;
  --footer-shadow: 0 2px 10px rgba(255,105,180,0.14);
  --footer-padding: 16px 24px;
  --main-bg: #ffe4e1;
  --main-text: #3a2c1a;
  --main-border: 2px dashed #ff69b4;
  --main-radius: 16px;
  --main-shadow: 0 4px 16px rgba(255, 105, 180, 0.12);
  --main-padding: 20px;
  --main-width: 82vw;
  --main-margin: 0 auto 40px auto;
}

body {
  background: var(--bg-main);
  font-family: var(--font-family);
  color: var(--color-white);
  border-radius: var(--border-radius);
}

/****************************************/
/* Footer module (themed, module-like) */
/****************************************/
.footer-module {
  background: var(--footer-bg);
  color: var(--footer-text);
  border: var(--footer-border);
  border-radius: var(--footer-radius);
  box-shadow: var(--footer-shadow);
  padding: var(--footer-padding);
  margin: var(--margin-center);
  max-width: var(--menu-width);
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
/******************************************/
/* END OF FOOTER MODULE STYLES */
/****************************************/




/****************************************/
/* Main module (themed, module-like) */
/****************************************/

/****************************************/
/* END OF MAIN MODULE STYLES */
/****************************************/

/****************************************/
/* Top Container Styles */
/****************************************/
#top-container {
display:grid;
grid-template-columns: 420px auto;
/* gap: 16px; */
margin: var(--margin-center);
max-width: var(--main-width);
/* background-color: var(--first-col-second-color); */
border: var(--border);
border-top-right-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
border-bottom-left-radius: 0px;
background:black;
}

#logo-container {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 2;
  background: linear-gradient(
  to right,
  var(--first-col-first-color) 0%,
  var(--first-col-second-color) 100%
);
justify-content: center;
align-items: center ;
}

#budget-form-container {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  align-items: center;
  background:var(--first-col-second-color);
  color:var(--tr-text-color-alt);
  margin:0 auto;
}

.budget-label {
    font-size: 0.8rem;
    /* color: var(--tr-text-color-alt); */
    color:white;
}

/****************************************/
/* END OF Top Container Styles */
/****************************************/






/****************************************/
/* FILE TEMPLATE STYLING */
/****************************************/
.budget-table .budget-label{

  color:white;
}
/* Gradient background for the first column of the finance table */
.budget-table td:first-child, .budget-table th:first-child {
  background: linear-gradient(
    to right,
    var(--first-col-first-color) 0%,
    var(--first-col-second-color) 100%
  );
  border-right: 1px solid #ccc;
  border-left: 2px solid #aaa;
  color: var(--tr-text-color);
  width:400px;
  font-variant: var(--file-template-font-variant);
  font-size: var(--file-template-font-size);
}

/* Right-align numeric columns in all zebra tables */
.zebra-table td:nth-child(2),
.zebra-table th:nth-child(2),
.zebra-table td:nth-child(3),
.zebra-table th:nth-child(3),
.zebra-table td:nth-child(4),
.zebra-table th:nth-child(4) {
  text-align: var(--file-template-num-align);
}

/* Right-align all number inputs project-wide */
input[type="number"] {
  text-align: var(--file-template-num-align);
}

/****************************************/
/* END OF FILE TEMPLATE STYLING */
/****************************************/



/****************************************/
/* ADDITIONAL STYLING FOR TABLES */
/****************************************/
/* Robust: apply to sticky-col and all first columns, even with extra classes or order */
.primary-col-gradient td:first-child,
.primary-col-gradient th:first-child,
.primary-col-gradient td.sticky-col:first-child,
.primary-col-gradient th.sticky-col:first-child, 
.gantt-unified-table tbody tr td.sticky-col,
.gantt-unified-table tbody tr th.sticky-col{
  background: linear-gradient(
    to right,
    var(--first-col-first-color) 0%,
    var(--first-col-second-color) 100%
  ) !important;
  border-right: 1px solid #ccc !important;
  border-left: 2px solid #aaa !important;
  color: var(--tr-text-color) !important;
  width: 400px !important;
  font-variant: var(--file-template-font-variant) !important;
  font-size: var(--file-template-font-size) !important;
}


/****************************************/
/* END OF ADDITIONAL STYLING FOR TABLES */
/****************************************/



/****************************************/
/* GENERIC TABLE & CELL STYLES (from base1.css) */
/****************************************/
.zebra-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12px;
}
.zebra-table thead th,
.table-header {
  background-color: var(--sticky-background-color);
  color: var(--table-header-color, #234567);
  border-bottom: 1.5px solid #56789a;
  font-weight: normal !important;
  text-align: left;
  padding: 4px 8px;
}
.zebra-table td,
.table-cell {
  border: var(--table-border, 1px solid #ccc);
  min-width: var(--table-col-width);
  height: var(--table-row-height);
  padding: 2px 8px;
  background: none;
  color: var(--tr-text-color);
  vertical-align: middle;
}
.gantt-lhs-static .zebra-table th,
.gantt-lhs-static .zebra-table td {
  min-width: 300px;
  max-width: 400px;
  white-space: normal;
  word-break: break-word;
  max-height: var(--gantt-row-height);
}
.zebra-table tbody tr:nth-child(odd) {
  background-color: var(--tr-odd-row-color);
}
.zebra-table tbody tr:nth-child(even) {
  background-color: var(--tr-even-row-color);
}
.zebra-table tbody tr:hover {
  background: var(--table-hover-bg, #e0e7ef);
}
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/****************************************/
/* END OF GENERIC TABLE & CELL STYLES */
/****************************************/

/****************************************/
/* TIMELINE/GANTT MODULE STYLES (from base1.css) */
/****************************************/
/* .gantt-unified-table tbody tr td.sticky-col,
.gantt-unified-table tbody tr th.sticky-col {
  background: linear-gradient(to right, var(--tr-even-row-color), var(--tr-odd-row-color));
} */
.gantt-unified-table thead th.month-end {
  border-left: none;
  border-right: var(--gantt-month-divider, 2px solid var(--gantt-month-divider-color, #000));
  position: relative;
}
.gantt-unified-table thead th.month-end::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: var(--gantt-month-divider-width, 2px);
  height: 100%;
  background: var(--gantt-month-divider-color, #000);
  z-index: 2;
  pointer-events: none;
}
.gantt-unified-table tbody tr td.sticky-col,
.gantt-unified-table tbody tr th.sticky-col {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
/****************************************/
/* END OF TIMELINE/GANTT MODULE STYLES */
/****************************************/

/****************************************/
/* END OF AMALGAMATED CONTENT FROM BASE1.CSS */
/****************************************/

/****************************************/
/* Minimal Menu Bar Styles */
/****************************************/

.menu-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card-bg);
  border: var(--border);
  border-radius: var(--border-radius);
  padding: var(--padding);
  box-shadow: var(--box-shadow);
  color: var(--menu-color);
  gap: 8px;
  max-width: var(--menu-width);
  margin: var(--margin-center);
  font-variant: small-caps;
}


.menu-left {
  display: flex;
  gap: 8px;
}

.menu-right {
  display: flex;
  align-items: center;
  margin-left: 24px;
}

.menu-logout {
  margin-left: 0 !important;
}

.menu-bar > a, .menu-bar > .dropdown {
  display: block;
  color: var(--accent);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 12px 16px;
  /* border-radius: 5px; */
  transition: background 0.2s, color 0.2s;
  position: relative;
}
.menu-bar > a:link a:hover, .menu-bar > .dropdown:hover > .dropbtn {
  background: var(--list-bg);
  color: var(--accent-hover);
  text-decoration: var(--a-link-decoration);
}


.menu-bar > a:hover, .menu-bar > .dropdown:hover > .dropbtn {
  background: var(--list-bg);
  color: var(--accent-hover);
}

.menu-bar img {
  vertical-align: middle;
  margin-right: 6px;
  width: 18px;
  height: 18px;
  filter: none;
}
/************************************************/
/* Dropdown Menu Styles */
/************************************************/


.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}


.dropbtn.toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid black;
  border-radius: 7px;
  background-color: #eee;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  top: 100%; /* directly below parent */
  min-width: 180px;
  background: var(--card-bg);
  box-shadow: 0 8px 16px rgba(0,0,0,0.10);
  border-radius: 7px;
  z-index: 1000; /* ensure it's above other elements */
  margin-top: 2px; 
  box-sizing: border-box;
}

.dropdown-content a {
  display: block;
  color: var(--accent);
  padding: 12px 18px;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.97rem;
  transition: background 0.18s, color 0.18s;
}
.dropdown-content a:hover {
  background: var(--list-bg);
  color: var(--accent-hover);
}
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover > .dropdown-content,
.dropdown:focus-within > .dropdown-content {
  display: block;
}

a#home.toolbar-btn, 
a#timeline.toolbar-btn, 
a#contact_us.toolbar-btn, 
a#help.toolbar-btn,
a#themes.toolbar-btn,
#finance.toolbar-btn{
  display: inline-flex;
  position: relative;
  border: var(--standard-border);
  border-radius: var(--border-radius);
  background-color: var(--menu-bg-color);
  width:auto;
  padding:5px;
}

a#file_template.toolbar-btn{
  position: relative;
  border: var(--standard-border);
  border-radius: var(--border-radius);
  background-color: var(--menu-bg-color);
  width:auto;
  padding:10px;
}

/********END OF DROPDOWN MENU STYLES********/




/****************************************/
/* END OF MENU BAR STYLES */
/****************************************/




/****************************************/
/* MODULE CARD STYLES (for all <main> modules) */
/****************************************/
.module-card {
  background: var(--card-bg);
  color: var(--text-main);
  border: var(--border-small);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: var(--padding);
  max-width: 1100px;
  margin: 36px auto 24px auto;
  font-size: 1.1rem;
  line-height: 1.7;
  /* Enable scrolling if content overflows main */
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* Tables inside module cards: centered and smaller font */
.module-card table {
  font-size: 12px;
  margin-left: auto;
  margin-right: auto;
}


.module-card h1,
.module-card h2,
.module-card h3 {
  color: var(--accent);
}
/* Alias for backward compatibility */
/* DEPRECATED: .starting-out-card is now replaced by .module-card. Use .module-card for all modules in <main>. */
/****************************************/
/* END OF MODULE CARD STYLES */
/****************************************/

/****************************************/
/* MODULE CARD SCROLL STYLES */
/****************************************/
.module-card-scroll {
  max-height: 60vh;
  overflow-y: auto;
}
/****************************************/
/* END OF MODULE CARD SCROLL STYLES */
/****************************************/

/****************************************/
/* GENERIC TABLE & CELL STYLES */
/****************************************/
:root {
  --table-row-height: 24px;
  --table-col-width: 120px;
  --table-header-bg: #f7fafc;
  --table-header-color: #234567;
  --table-border: 1px solid #ccc;
  --table-hover-bg: #e0e7ef;
  --gantt-row-height: 24px;
  --gantt-tr-height: 20px;
}

.zebra-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12px;
}
.zebra-table thead th,
.table-header {
  background: var(--table-header-bg);
  color: var(--table-header-color);
  border-bottom: 1.5px solid #56789a;
  font-weight: 600;
  text-align: left;
  padding: 4px 8px;
}
.zebra-table td,
.table-cell {
  border: var(--table-border);
  min-width: var(--table-col-width);
  height: var(--table-row-height);
  padding: 2px 8px;
  background: none;
  color: var(--tr-text-color);
  vertical-align: middle;
}
/* Make the first column (LHS step name) wider and allow wrapping */
.gantt-lhs-static .zebra-table th,
.gantt-lhs-static .zebra-table td {
  min-width: 300px;
  max-width: 400px;
  white-space: normal;
  word-break: break-word;
  height: var(--gantt-row-height);
}

.zebra-table tbody tr:nth-child(odd) {
  background-color: var(--tr-odd-row-color);
}
.zebra-table tbody tr:nth-child(even) {
  background-color: var(--tr-even-row-color);
}
.zebra-table tbody tr:hover {
  background: var(--table-hover-bg);
}
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }


.bar-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  padding: 0 4px;
  line-height: 1.2;
}
.bar-inner {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  height: 20px;
  background: var(--bar-color, #bbb);
  /* ...other styles as needed... */
}

/****************************************/
/* END OF GENERIC TABLE & CELL STYLES */
/****************************************/

/****************************************/
/* GENERIC TOOLTIP STYLES FOR TABLES */
/****************************************/
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltiptext {
  visibility: hidden;
  width: 220px;
  background: #234567;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 12px;
  position: absolute;
  z-index: 20;
  left: 110%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  white-space: pre-line;
}
.tooltip:hover .tooltiptext,
.tooltip:focus-within .tooltiptext {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/****************************************/
/* END GENERIC TOOLTIP STYLES */
/****************************************/

/****************************************/
/* MODULE CARD LIST STYLES */
/****************************************/
.module-card-list,
.starting-out-list {
  background: var(--list-bg);
  border:var(--border);
  border-radius: 6px;
  padding: 18px 24px 18px 36px;
  margin: 18px 0 18px 0;
  list-style-type: square;
}
.module-card-list li,
.starting-out-list li {
  background: none;
  color: var(--accent);
  margin-bottom: 10px;
  font-size: 1.05rem;
  padding-left: 0;
}
/****************************************/
/* END OF MODULE CARD LIST STYLES */
/****************************************/

/* ==========================
   LOGIN OVERLAY STYLES START
   ========================== */
#login-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.login-box {
  background: var(--card-bg);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 32px 30px;
  min-width: 320px;
  max-width: 90vw;
}
.login-box h2 {
  margin-top: 0;
  margin-bottom: 18px;
  font-size: 1.3rem;
  color: var(--accent);
}
.login-box label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--accent-light);
}
.login-box input[type=text], .login-box input[type=password] {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 16px;
  border: 1px solid #c2c7d2;
  border-radius: 4px;
  font-size: 1rem;
}
.login-box button[type=submit] {
  width: 100%;
  padding: 10px 0;
  background: var(--login-btn);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
}
.login-box button[type=submit]:hover {
  background: var(--login-btn-hover);
}
#login-error {
  color: var(--error);
  margin-top: 10px;
  font-size: 1rem;
  display: none;
}
/* ========================
   LOGIN OVERLAY STYLES END
   ======================== */

/****************************************/
/* UNIVERSAL MODAL STYLES (.pm-modal)
   --------------------------------------
   Uses design tokens from :root for easy
   global adjustment and theming.
*****************************************/
.pm-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: var(--modal-z);
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  background: var(--modal-overlay-bg);
}

.pm-modal__content {
  background: var(--modal-bg);
  padding: var(--modal-padding);
  min-width: var(--modal-min-width);
  max-width: var(--modal-max-width);
  width: fit-content;
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  position: relative;
  overflow: auto;
}

/* UNIVERSAL FORM LAYOUT STYLES (.pm-form)
   --------------------------------------
   Uses design tokens from :root for easy
   global adjustment and theming.
*****************************************/
.pm-form {
  display: grid;
  grid-template-columns: var(--pm-form-label-width) 1fr;
  gap: var(--pm-form-gap-row) var(--pm-form-gap-col);
  align-items: center;
  justify-content: center;
  margin: 3em auto;
  padding: var(--pm-form-padding);
  background-color: var(--pm-form-bg);
  border-radius: var(--pm-form-radius);
  box-shadow: var(--pm-form-shadow);
  max-width: 400px;
  border:2px solid #000;
}

.pm-form__row {
  display: contents; /* Allows label/input to participate in grid directly */

}

.pm-form__label {
  text-align: right;
  font: var(--pm-form-label-font);
  color: var(--pm-form-label-color);
  padding-right: 0.5em;
}

.pm-form__input {
  text-align: left;
  min-width: var(--pm-form-field-min-width);
  font: var(--pm-form-input-font);
  background: var(--pm-form-input-bg);
  border: 1px solid var(--pm-form-input-border);
  border-radius: 4px;
  padding: 0.5em 0.75em;
  transition: border-color 0.2s;
}
.pm-form__input:focus {
  border-color: var(--pm-form-input-focus);
  outline: none;
}

/* Responsive: stack labels on top for narrow containers or .pm-form--stacked */
@media (max-width: 480px) {
  .pm-form,
  .pm-form.pm-form--stacked {
    grid-template-columns: 1fr;
  }
  .pm-form__label {
    text-align: left;
    padding-bottom: 0.25em;
    padding-right: 0;
  }
}

.pm-form--stacked {
  grid-template-columns: 1fr;
}
.pm-form--stacked .pm-form__label {
  text-align: left;
  padding-bottom: 0.25em;
  padding-right: 0;
}
/****************************************/
/* END UNIVERSAL FORM LAYOUT STYLES */









/****************************************/
/* STICKY COLUMN STYLING */
/****************************************/

.sticky-col {

  position: sticky;
  left: 0;
  z-index: 2000 !important;
  background: linear-gradient(to right, var(--gradient-color));
  color: var(--sticky-col-text-color, #ffffff); /* Use variable, fallback to white */
  font-size: 14px !important;
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border: 0px solid #345678 !important; /* Consider var for border color too if needed */
}


.sticky-col td{
  border-right: 1px solid #ccc;
  border-left: 2px solid #aaa;
  background: linear-gradient(
    to right,
    var(--first-col-first-color) 0%,
    var(--first-col-second-color) 100%
  );
}
/****************************************/
/* END OF STICKY COLUMN STYLING */
/****************************************/