:root {
    --primary: #356ba2;
    --secondary: #356ba2;
    --dark: #240046;
    --gray: #6c757d;
	--white: #ffffff;
	--danger: #808080; 
	--ok: #10b981;
	--muted: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
            height: 100%;
            font-family: 'Poppins', sans-serif;
            background: #f8f9fa;
            color: #333;
            line-height: 1.6;
}
		
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* default for large screens */
  gap: 10px;
  color: white;
  font-weight: bold;
}

.logo {
  width: 100px;
  height: 50px;
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

.container {
  display: flex;
  min-height: 94vh;
}

/* Main content - scrolls normally */
.main-content {
  flex: 1;
  padding: 0px 0px;
  /*background: #e0f0ff;*/
  background: #004080;
}

/* RIGHT SIDEBAR - Truly sticky (fixed while scrolling) */
.sidebar {
  width: 14%;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  position: sticky;   /* Key for sticky behavior */
  top: 0;             /* Sticks to top of viewport */
  height: 100vh;      /* Full viewport height */
  /*display: flex;*/
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1000;
  overflow-y: auto;   /* Allows internal scroll if ever needed */
  /*overflow-y: hidden;*/
  border-left: 1px solid #fff;

}

.sidebar .logo {
  font-size: 28px;
  font-weight: 700;
  text-align: center;
  padding: 30px 20px 20px;
  color: white;
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar ul {
  list-style: none;
  flex: 1;
  padding: 2px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.sidebar ul li a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  display: block;
  padding: 0px 0px;
  border-radius: 8px;
  transition: all 0.3s;
}

.sidebar ul li a:hover,
.sidebar ul li a.active {
  background: rgba(255,255,255,0.2);
  transform: translateX(6px);
}

h1 { font-size: 27px; margin-bottom: 4px; color: var(--white); }
p { margin-bottom: 25px; color: var(--gray); }
.btn {
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: 7px 24px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s;
}
.btn:hover {
  background: var(--secondary);
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(67,97,238,0.3);
}


a {
    color: #a2d2ff;
    text-decoration: none; /* optional: removes underline */
}

a:hover {
    color: #82c0ff; /* optional: slightly darker shade on hover */
}


/* Demo long content to test scrolling */
.demo-section { height: 900px; padding-top: 100px; }
		
.responsive-image {
  max-width: 100%;
  height: auto;
  display: block;  
}

.top-container {
  position: relative;
  width: 100%;
  /*height: 822px;*/
  height: 94vh;
  background-image: url('../img/bkgd2.jpg');
  background-size: cover;
  background-position: center;
}

.top-container-folder {
  position: relative;
  width: 100%;
  height: 740px;
  background-image: url('../img/bkgd2.jpg');
  background-size: cover;
  background-position: center;
}

.container-iframelike {
  position: relative;
  width: 100%;
  /*height: 844px;*/
  height: 94vh;
}
/*
.top-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.0); /* White with 50% opacity */
 /* color: #fff;
}
*/

.icon-circle {
  display: inline-flex;           /* Centers icon inside */
  align-items: center;
  justify-content: center;
  width: 50px;                    /* Circle diameter */
  height: 50px;
  background-color: #ffffff;      /* Circle color */
  color: white;                   /* Icon color */
  border-radius: 50%;             /* Makes it a circle */
  font-size: 24px;                /* Icon size */
}

.transparent-bg {
    max-width: 800px;    
    background-color: rgba(0, 0, 0, 0.2); /* Black with 50% opacity */
    color: #fff; /* Text stays fully opaque */
    padding: 20px;
    border-radius: 8px;
}

.transparent-bg-darker {
    background-color: rgba(53, 107, 162, 0.5);	
    /*background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
    color: #fff; /* Text stays fully opaque */
    border-radius: 8px;
}

.input-text {
    width: 100%;
    max-width: 188px;
    padding: 3px 6px;        /* Comfortable padding */
    font-size: 13px;           /* Readable text */
    border: 2px solid #a2d2ff; /* Border color */
    border-radius: 6px;        /* Rounded corners */
    outline: none;             /* Remove default outline */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-text:focus {
    border-color: #5a9de0;     /* Darker blue on focus */
    box-shadow: 0 0 8px rgba(90, 157, 224, 0.4); /* Glow effect */
}

.input-search {
    width: 100%;
    max-width: 150px;
    padding: 3px 6px;        /* Comfortable padding */
    font-size: 12px;           /* Readable text */
    border: 2px solid #a2d2ff; /* Border color */
    border-radius: 6px;        /* Rounded corners */
    outline: none;             /* Remove default outline */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.input-search:focus {
    border-color: #5a9de0;     /* Darker blue on focus */
    box-shadow: 0 0 8px rgba(90, 157, 224, 0.4); /* Glow effect */
}

.button-search {
    background-color: #5a9de0;   /* Light blue background */
    color: #333;                /* Dark text for contrast */
    border: none;               /* Remove default border */
    padding: 1px 8px;         /* Comfortable size */
    font-size: 16px;            /* Readable text */
    border-radius: 8px;         /* Rounded corners */
    cursor: pointer;            /* Pointer on hover */
    transition: background 0.3s ease, transform 0.2s ease;
}

.button-search:hover {
    background-color: #90c2ff;  /* Slightly darker on hover */
    transform: scale(1.05);     /* Subtle zoom effect */
}

.button-kpi {
    background-color: #5a9de0;   /* Light blue background */
    color: #333;                /* Dark text for contrast */
    border: none;               /* Remove default border */
    padding: 4px 8px;         /* Comfortable size */
    font-size: 16px;            /* Readable text */
    border-radius: 8px;         /* Rounded corners */
    cursor: pointer;            /* Pointer on hover */
    transition: background 0.3s ease, transform 0.2s ease;
}

.button-kpi:hover {
    background-color: #90c2ff;  /* Slightly darker on hover */
    transform: scale(1.05);     /* Subtle zoom effect */
}

.button-signin {
    /*background-color: #5a9de0;*/   /* Light blue background */
    background-color: #ffffff;
	color: #333;                /* Dark text for contrast */
    border: none;               /* Remove default border */
    padding: 4px 8px;         /* Comfortable size */
    font-size: 16px;            /* Readable text */
    border-radius: 15px;         /* Rounded corners */
    cursor: pointer;            /* Pointer on hover */
    transition: background 0.3s ease, transform 0.2s ease;
}

.button-signin:hover {
    background-color: #90c2ff;  /* Slightly darker on hover */
    transform: scale(1.05);     /* Subtle zoom effect */
}


.center-span {
    display: block;
    margin: 0 auto; /* Centers block-level element */
    text-align: center; /* Centers text inside span */
}

.systopmenu {
  background-color: rgba(53, 107, 162, 0.2);
  color: #fff;
  padding: 4px 0;
  text-align: right;
  position: sticky;
  top: 50px; /* This is essential for sticky to work */
 /* z-index: 1000; /* Ensures it stays above other content */
  /*scroll-margin-top: 300px;*/
}

.container-sysmenuselection {
  margin: auto;
  padding: 1px 10px;
}

select {
      width: 250px;
      padding: 4px;
      font-size: 16px;
      border: 1px solid #e0f0ff;
      border-radius: 5px;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

.hide-on-small {
    display: block;
}

/* Hamburger Button - Mobile only */
.menu-toggle {
  position: fixed;
  top: 3px;
  right: 5px;
  z-index: 1001;
  background: var(--primary);
  color: white;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(67,97,238,0.5);
  display: none;
}

/* Desktop: sticky sidebar always visible 1300px*/
@media (min-width: 1600px) {
  .menu-toggle { display: none !important; }
  .sidebar { transform: translateX(0) !important; }
}

/* Mobile ≤992px: off-canvas sidebar */
@media (max-width: 1600px) {
	.container { flex-direction: column; }
            
    .sidebar {
        position: fixed !important;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        transform: translateX(100%);
        box-shadow: -5px 0 30px rgba(0,0,0,0.25);
        z-index: 999;
    }
    .sidebar.active {
        transform: translateX(0);
    }
    .menu-toggle {
        display: block;
    }
    .main-content {
        padding: 0px 0px;
    }
	
	.hide-on-small {
		display: none;
    }
	
	th, td {
    font-size: 14px;
    padding: 4px;
  }
}


.table-container {
  width: 100%;
  overflow-x: auto; /* Makes table responsive */
}

.table-container-bluebg {
  width: 100%;
  overflow-x: auto; /* Makes table responsive */
  background-color: #f8f9fa;
}

table {
  width: 100%;
  border-collapse: separate;     /* Important: separate needed for the pseudo-element trick */
  border-spacing: 0;              /* Removes gaps between cells */
  position: relative;
}

th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
  background-clip: padding-box;   /* Prevents background from leaking under borders */
  position: relative;
}

/* Highlight entire column on hover */
table colgroup col:hover {
  background-color: rgba(0, 123, 255, 0.1); /* Nice light blue – change as you like */
}

/* Alternative pure-CSS method using a full-height pseudo-element (works even without <colgroup>) */
th:hover,
td:hover {
  background-color: rgba(0, 123, 255, 0.1);
}

th::before,
td::before {
  content: "";
  position: absolute;
  top: -1px;      /* adjust for border */
  bottom: -1px;   /* adjust for border */
  left: 0;
  right: 0;
  background-color: rgba(0, 123, 255, 0.1); /* same color as above */
  pointer-events: none;   /* lets the mouse event pass through to the cell */
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s;
}

th:hover::before,
td:hover::before {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  th, td {
    font-size: 12px;
    padding: 4px;
  }
}

.button-icon {
    background-color: #ffffff;   /* Light blue background */
    color: #333;                /* Dark text for contrast */
    border: none;               /* Remove default border */
    padding: 1px 1px;         /* Comfortable size */
    font-size: 10px;            /* Readable text */
    border-radius: 8px;         /* Rounded corners */
    cursor: pointer;            /* Pointer on hover */
    transition: background 0.3s ease, transform 0.2s ease;
}


.folder-bg {
    max-width: 1600px;    
    background-color: rgba(0, 0, 0, 0.2); /* Black with 50% opacity */
    color: #fff; /* Text stays fully opaque */
    padding: 8px;
    border-radius: 8px;
}

.folder-bg2 {
    max-width: 1600px;    
    background-color: rgba(0, 0, 0, 0.2); /* Black with 50% opacity */
    color: #fff; /* Text stays fully opaque */
    padding: 2px;
    border-radius: 8px;
}

.folder-bg-darker {
    background-color: rgba(53, 107, 162, 0.5);	
    /*background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
    color: #fff; /* Text stays fully opaque */
    border-radius: 8px;
}

.folder-bg-white {
    background-color: rgba(255, 255, 255, 0.9);
	/*background-color: rgba(53, 107, 162, 0.3);*/	
    /*background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
    color: #fff; /* Text stays fully opaque */
    border-radius: 8px;
}

.message { margin: .75rem 0 1rem; padding: .8rem 1rem; border-radius: 8px; background: #0b1220; border: 1px solid #1f2937; }
.message.ok { border-color: var(--ok); color: #d1fae5; }
.message.err { border-color: var(--danger); color: #fee2e2; }

ul.folders { list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; }
  .folder { padding: .8rem 1rem; border-radius: 8px; background: #0b1220; border: 1px solid #1f2937;
    display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }
  .folder-name { font-weight: 600; }
  .actions { display: flex; gap: .5rem; }
  .inline { display: inline-flex; gap: .5rem; align-items: center; }
  .danger { border-color: var(--danger); color: #fecaca; }
  .grid-row { grid-column: 1 / -1; }
  .hint { font-size: .875rem; color: var(--muted); margin-top: .25rem; }
  .rename-wrap { display: none; grid-column: 1 / -1; gap: .5rem; align-items: center; }
  .rename-wrap.active { display: grid; grid-template-columns: 1fr auto; }
  
  /* Default: large screens — align left */
  .form-row {
    display: flex;
    gap: 1rem;           /* space between the two spans */
    justify-content: flex-start;
    text-align: left;
  }

  /* Small screens — center */
  @media (max-width: 600px) {
    .form-row {
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;   /* allow wrapping if needed */
    }
  }

  .form-row span b {
    margin-right: 0.5rem; /* small space between label and select */
  }
  
  a.custom-link {
    color: #204466;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s,    transition: border-color 0.3s, color 0.3s;
	}

	a.custom-link:hover {
    border-bottom: 2px solid green;
	}
	
  iframe {
	border: none;
	width: 100%;
	/*height: 822px;*/
    height: 93vh;
	}