:root {
--debug: 0px;;
}
/* Basic page */

body {
	font-family: Arial, sans-serif;
	background: #E6F0F7;
	color: #333;
	min-height: 100vh;
	margin: 0px;        
}
header {
    width: 100%;
    background: #fff;
    color: white;
    padding-left: 10px;
    box-sizing: border-box;
}
.page-content {
    margin: 20px;
}

/* Form */
form {
background: #fff;
padding: 10px;
}

/* Labels */
label {
display: block;
margin-top: 10px;
margin-bottom: 5px;
font-weight: bold;
}

/* Text inputs */
input,
select,
textarea {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #bbb;
border-radius: 4px;
font-size: 16px;
}

/* Textarea */
textarea {
resize: vertical;
min-height: 100px;
}
button:not([class*="note-"]), .btn:not([class*="note-"]) {
    background-color: #3182ce; /* Now ignores all Summernote UI components */
}

/****************************************************/
.logo-img {
height: 85px; /* Increased height to make the custom script signature stand out clearly */
width: auto;
display: block;
border: var(--debug) dashed blue;
}
.nav-container {
margin: 0 auto;
display: flex;
padding: 5px;
padding-left: 10px;
border: 0px dashed red;
background: #fff;
}
.navbar {
width: 100%;
display: flex;
justify-content: flex-end; /* Align items right */
align-items: center;        /* Vertical alignment */
padding: 5px;
border: var(--debug) dashed yellow;
box-sizing: border-box;
}
/***************************************************
BUTTONS
***************************************************/
.btn {
	display: inline-block;
	padding: 8px 16px;            
	background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);          
	color: #ffffff;               
	text-decoration: none;
	border: 1px solid #1e40af;    /* Ultra-subtle border to anchor the gradient edge */
	border-radius: 6px;           
	font-size: 14px;              
	font-weight: 500;             
	transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
	width: 160px;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.1); /* Added subtle inner top light */
	box-sizing: border-box;
	vertical-align: middle;
	font-family: inherit;
	cursor: pointer;
	margin: 4px;                  
	line-height: 1.5;          
	text-align: center;
}
.btn.active {
	background: #E4E4E4;
	color: black;
	border-color: #111827;
	box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.15);
	cursor: default;
	pointer-events: none;
}

.btn:hover {
	/* Slightly brighter gradient shift on hover */
	background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);          
	color: #ffffff;               
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.1); 
}

.btn:active {
	/* Inverted depth look for the click */
	background: linear-gradient(180deg, #1e40af 0%, #1d4ed8 100%);          
	transform: scale(0.98);       
}

/* --- Red Gradient Variant --- */
.btn.danger {
	background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
	border-1px solid #991b1b;
}

.btn.danger:hover {
	background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
}

.btn.danger:active {
	background: linear-gradient(180deg, #991b1b 0%, #b91c1c 100%);
}

/* --- Layout Modifiers --- */
.btn.wide {
	width: 100%;
}

.btn.inline {
	height: auto;                 
	padding: 4px 12px;            
	width: auto;                  
	min-width: 90px;
	border-radius: 4px;
	font-size: 13px;
}

/* --- Layout Modifiers --- */
.btn.wide {
	width: 100%;
}

.btn.inline {
	height: auto;                 /* Let padding handle height for better scaling */
	padding: 4px 12px;            /* Scaled down padding for inline variant */
	width: auto;                  /* Auto width lets the text fit nicely */
	min-width: 90px;
	border-radius: 4px;
	font-size: 13px;
}

/***************************************************
LOGIN FORM
***************************************************/
.login-div{
	margin-top: 40px;
	border: 1px solid black;
	border-radius: 10px;
	width: 400px;
	padding: 10px;
	margin-left:auto;
	margin-right:auto;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	position: relative;
}
.login-title{
	text-align: center;
	border: 0px dashed red;
	font-size: 2rem;
}
.login-button-div{
	margin-top: 10px;
	text-align: center;
	border: 0px dashed red;
	font-size: 1rem;
}
/*****************************************************
****************************************************/
.alert-success, .alert-error {
    transition: opacity 0.5s ease;
    opacity: 1;
}
.alert-error{
	color: red;
	text-align: center;
}
.alert-success{
	color: green;
	text-align: center;
}

/*****************************************************
****************************************************/

.spinner-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.85);
    z-index: 10;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #4da3ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/*****************************************************
****************************************************/
.menu-card {
	border: 1px dashed red;
	background: #fff; 
  border: 1px solid #e2e8f0; 
  border-radius: 8px; 
  padding: 15px; /* Cut half from 30px */
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.05); 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  transition: transform 0.2s; 
}
.card-details h3 { 
    font-family: 'Cinzel', serif; 
    font-size: 1.2rem; /* Reduced from 1.4rem */
    color: var(--remax-blue); 
    margin-bottom: 6px; 
}
.card-details p { 
    color: #4a5568; 
    font-size: 0.88rem; 
    margin-bottom: 15px; /* Reduced from 25px */
}
.mgmt-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 15px; /* Reduced from 25px */
}

@media (min-width: 768px) { 
    .mgmt-grid { grid-template-columns: 1fr 1fr; } 
}
@media (min-width: 900px) { 
    .grid { grid-template-columns: 1fr 2fr; } 
}

/* Admin Data Tables */
.tab-log-view { 
  width: 100%; 
  border-collapse: collapse; 
  margin-top: 1px; 
  text-align: left;
  border: 1px solid blue;
}

.tab-log-view th, 
.tab-log-view td { 
  padding: 4px; 
  border-bottom: 1px solid #eee; 
  font-family: 'Montserrat', sans-serif; 
  font-size: 14px;
  border: 1px dashed red;
  /* Smooth transition effect for the background color change */
  transition: background-color 0.15s ease;
}

.tab-log-view th { 
  background-color: #9CAAB8; 
  font-weight: 600;
  text-align: center; 
}

/* --- Highlight Whole Row on Hover --- */
.tab-log-view tbody tr:hover {
  background-color: #FFFFB7;
  cursor: pointer;
}
/************************************************************
/***********************************************************/
.rows-container {
	display: flex; 
	flex-direction: 
	column; gap: 5px;
	border: 0px dashed red;
	margin-top:10px;
}
.rows-card{
	background: #fff; 
	border: 3px solid #e0e0e0; 
	border-radius: 8px; 
	padding: 15px 20px; 
	display: flex; 
	justify-content: 
	space-between; 
	align-items: center; 
	box-shadow: 0 1px 3px rgba(0,0,0,0.02); 
	gap: 20px;
}
.rows-card:hover {
	background: #DDE7F0;                /* Very subtle off-white/slate tint */
	border-color: #A0B3C9;            /* Slightly darker border to define the shape */
	transform: translateY(-2px);       /* Subtle lift effect */
	/*box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -4px rgba(0, 0, 0, 0.05); */
}

/* --- Optional Active State (When Clicked) --- */
.rows-card:active {
	background: #f1f5f9;
	transform: translateY(0);          /* Snaps back down on click */
	box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9); /* or background color matching your theme */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    
    /* Hide it by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show it only when active is present */
.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.contact-div{
	margin-top: 10px;
	border: 1px solid black;
	border-radius: 10px;
	width: 500px;
	padding: 3px;
	margin-left:auto;
	margin-right:auto;
	background: #fff;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	position: relative;
}