:root{
  --primary:#2f5ea8;
  --primary-dark:#254a84;
  --accent:#5478FF;
  --danger:#ff4d4f;
  --danger-dark:#d9363e;
  --warning:#ff8a00;
}

*, *::before, *::after{
  box-sizing: border-box;
}

body{
margin:0;
font-family:Arial;
background:#f4f6fb;
}

.login-container{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

.login-box{
  background:white;
  padding:30px;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  width:300px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.login-box input{
  padding:10px;
  border:1px solid #ccc;
  border-radius:5px;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.sidebar-logo{
    width:32px;
    height:32px;
    object-fit:contain;
}

.layout{
display:flex;
min-height:100vh;
}

.sidebar{
position:fixed;
top:0;
left:0;
width:260px;
height:100vh;
background:var(--primary);
color:white;
padding:20px;
display:flex;
flex-direction: column;
overflow-y:auto;
z-index:100;
}

.sidebar nav{
  flex:1;
}

#logoutBtn {
  background: var(--danger);
  color: white;
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
}

#logoutBtn:hover {
  background: var(--danger-dark);
}

.logo{
margin-bottom:30px;
}

.nav-item{
display:block;
padding:12px;
margin-bottom:6px;
cursor:pointer;
border-radius:6px;
}

.nav-item:hover{
background:var(--primary-dark);
}

.nav-item.active{
background:var(--accent);
}

.main{
flex:1;
margin-left:260px;
padding:25px;
min-width:0;
}

.header{
margin-bottom:20px;
}

.cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

table{
width:100%;
border-collapse:collapse;
background:white;
}

th,td{
padding:12px;
border-bottom:1px solid #eee;
text-align:left;
}

.toolbar{
margin-bottom:15px;
}

button{
padding:8px 12px;
border:none;
border-radius:4px;
cursor:pointer;
}

.primary{
background:var(--primary);
color:white;
}

.primary:hover{
background:var(--primary-dark);
}

.danger{
background:var(--danger);
color:white;
}

.danger:hover{
background:var(--danger-dark);
}

.hidden{
display:none;
}



.form-feedback-msg {
    margin-top: 8px;
    margin-bottom: 0;
    font-size: 13px;
    font-weight: 500;
    min-height: 14px; 
    display: block;
}


/* Overlay */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none;
}

/* Form box */
.form-container {
  background: white;
  padding: 25px;
  border-radius: 10px;
  width: 300px;
  position: relative;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.fields{
  width: 100%;
}

.password-wrapper{
	display:flex;
	position:relative;
}
.togglePassword{
	position:absolute;
    font-size: 18px;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    cursor: pointer;
}

.activity-child-row{
    background: rgb(248, 250, 255);
}

/* Close button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 22px;
  cursor: pointer;
  color: var(--danger);
}

.close-btn:hover {
  color: var(--danger-dark);
}

/* Inputs */
.form-container input {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/* Submit */
.submit-btn {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.submit-btn:hover {
  background: var(--primary);
}

/* Modal Background Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Modal Box Container */
.modal-box {
    background: #ffffff;
    padding: 24px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}

/* Typography elements */
.modal-title {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 18px;
    color: #333333;
}

.modal-text {
    color: #555555;
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Action alignment layouts */
.modal-actions {
    display: flex;
    justify-content: flex-end;
}

.confirm-container {
    display: none; /* Controlled via JS when needed */
    gap: 10px;
}

/* Base button presets */
.btn {
    padding: 8px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s ease;
}

.btn-primary {
    background-color: #2f5ea8;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #224682;
}

/* Utility visibility class */
.hidden {
    display: none !important;
}


/* ========================================
   FIXED-HEIGHT MODALS
   (Manage URLs / Add Team Member / View User / Add User)
   All four share the same overall window size. Sized so the content
   fits without an outer scrollbar — only the inner URL box/list
   scrolls, and only once it actually needs to.
======================================== */
.fixed-modal {
  height: 456px;
  max-height: 90vh;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Wider, two-column layout (Add User / Add Team Member / Manage URLs / View User) */
.wide-modal {
  width: 560px;
  max-width: 92vw;
}

.fixed-modal h2 {
  flex-shrink: 0;
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.3;
}

/* Two fields side by side on one row (e.g. First/Last name, Mobile/Email) */
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex-shrink: 0;
}

.form-row-2col input {
  margin: 6px 0;
}

.wide-modal .password-wrapper input {
  margin: 6px 0;
}

.url-section-label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  display: block;
  margin: 0;
  flex-shrink: 0;
}

/* Row holding the "Allowed URLs" label and the action button(s) (Copy All /
   +Add URL) side by side */
.url-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin: 8px 0 4px;
  min-height: 24px;
}

.url-section-header-end {
  justify-content: flex-end;
  gap: 8px;
}

/* Groups multiple action buttons (Copy All, +Add URL) together on the
   right side of a .url-section-header row, in visual/DOM order. */
.url-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.add-url-btn-inline {
  padding: 6px 14px;
  background: #e8f0fe;
  color: #2f5ea8;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.add-url-btn-inline:hover {
  background: #d9e6fd;
}

/* "Copy All" button — same footprint/family as +Add URL, styled distinctly
   so the two aren't confused at a glance. */
.copy-all-btn-inline {
  padding: 6px 14px;
  background: #eef2ff;
  color: #2f5ea8;
  border: 1px solid #dbe4fb;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.copy-all-btn-inline:hover {
  background: #e1e9fe;
}

.copy-all-btn-inline:disabled {
  cursor: default;
}

/* Fixed-size URL box: shows the first URL plus room for two more (3 total),
   scrolls for the rest. Because the box height never changes, short lists
   just leave empty space inside it instead of shifting anything below it. */
.url-box-3 {
  height: 130px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 8px;
  flex-shrink: 0;
  margin-bottom: 8px;
}

/* Flexible URL area: fills whatever vertical space remains in the
   fixed-height modal (after the other fields), and scrolls once
   the list can't fit any more. */
.url-flex-box {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 10px;
}

.details-scroll-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.view-user-fields {
  flex-shrink: 0;
}

.view-user-url-link {
  color: #2f5ea8;
  text-decoration: underline;
}

/* URL row styles — 6px vertical gap between one URL field and the next,
   everywhere URL rows are rendered (Add User, Manage URLs, etc). */
.url-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.url-row:last-child {
  margin-bottom: 0;
}

.url-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.url-checkbox-row:last-child {
  margin-bottom: 0;
}

.add-url-btn {
  flex-shrink: 0;
}

.fixed-modal .submit-btn {
  flex-shrink: 0;
  margin-top: 0;
}

.fixed-modal .form-feedback-msg {
  flex-shrink: 0;
  margin-top: 8px;
  margin-bottom: 0;
  min-height: 16px;
}

/* ========================================
   DASHBOARD — "Active Users" card label
   Matches the Status column's "Active" pill styling
   (same green, same dot, same weight/size).
======================================== */
.active-users-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2e7d32;
}

.active-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e7d32;
  display: inline-block;
  flex-shrink: 0;
}

/* ========================================
   TOOLBAR — Add button / counter / search bar row
======================================== */
.toolbar-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.counter-text {
  font-size: 13px;
  font-weight: 600;
  color: #555;
}

.search-input {
  width: 240px;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ========================================
   SORTABLE TABLE HEADERS
   Green = ascending, red = descending
   (color codes reused from the app's existing
   --danger and status-Active green)
======================================== */
th[data-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

th[data-sort]:hover {
  color: var(--primary);
}

.sort-arrow {
  display: inline-block;
  font-size: 11px;
  margin-left: 2px;
}

/* ========================================
   PAGINATION CONTROLS
======================================== */
.pagination-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

.page-btn {
  padding: 6px 14px;
  background: #fff;
  color: var(--primary);
  border: 1px solid #dde5f7;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.page-btn:hover:not(:disabled) {
  background: #eef2ff;
}

.page-btn:disabled {
  color: #bbb;
  cursor: default;
  border-color: #eee;
}

.page-indicator {
  font-size: 13px;
  color: #555;
  font-weight: 500;
}

/* ========================================
   ACTIVITY LOG — Name / Email column dropdowns
======================================== */
.activity-header-toggle {
  cursor: pointer;
  user-select: none;
}

.activity-header-toggle:hover {
  color: var(--primary);
}

.activity-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  width: 220px;
  background: #fff;
  border: 1px solid #dde5f7;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 50;
  padding: 8px;
  font-weight: 400;
  text-transform: none;
}

.activity-dropdown-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 12px;
  margin-bottom: 6px;
  box-sizing: border-box;
}

.activity-dropdown-search:focus {
  outline: none;
  border-color: var(--primary);
}

.activity-dropdown-list {
  max-height: 160px;
  overflow-y: auto;
}

.activity-dropdown-item {
  padding: 8px 10px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-dropdown-item:hover {
  background: #f5f7ff;
}

.activity-remove-btn:hover {
  text-decoration: underline;
}