:root{

--primary:#0D47A1;
--secondary:#1565C0;
--accent:#2196F3;

--dark:#1A1A1A;
--light:#F8FAFC;

--white:#FFFFFF;

--success:#16A34A;

--shadow:0 12px 35px rgba(0,0,0,.08);

--radius:16px;

}

*{
margin:5px;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html, body{
height:100%;
}

body{
background:#f7f9fc;
color:#222;
line-height:1.6;
overflow-x:hidden;
display:flex;
flex-direction:column;
min-height:100vh;
}

main{
flex:1;
}

.container{
  width:90%;
  max-width:1100px;
  margin:auto;
  padding:0 20px; /* horizontal inset for page content */
}

@media(min-width:1024px){
  .container{ padding:0 40px; }
}

.header{

background:white;

position:sticky;

top:0;

z-index:999;

box-shadow:0 4px 20px rgba(0,0,0,.05);

}

.header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:100%;
  margin:0;
  padding:12px 20px; /* small inset from edges */
}

@media(min-width:1024px){
  .header .container{ padding:12px 40px; }
}

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

/* Header edge alignment: logo/title at left edge, controls at right edge */
.header .container > .logo{ padding-left:0; }
.header .container > nav{ padding: right 2px; }

.logo img{

width:60px;

height:60px;

object-fit:contain;

}

nav{

display:flex;

gap:25px;

}

nav a{

text-decoration:none;

font-weight:500;

color:#333;

}

.hero{
  position:relative;
  height:60vh;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
  overflow:hidden;
}

.hero-img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  opacity:1;
  transition:opacity .6s ease;
}

.hero-controls{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-top:24px;
  flex-wrap:wrap;
  z-index:3;
}

.hero h1{
  font-size:3.2rem;
  margin-bottom:18px;
  line-height:1.1;
}

.hero p{
  font-size:1.1rem;
  margin-bottom:24px;
}

.overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:2;
}


.hero-content{

max-width:850px;

position:relative;

z-index:2;

}

.hero-controls{

position:relative;

display:flex;

align-items:center;

justify-content:center;

gap:14px;

margin-top:30px;

flex-wrap:wrap;

z-index:2;

}

.hero-dots{

display:flex;

gap:10px;

}

.hero-dot{

width:12px;

height:12px;

border-radius:50%;

border:none;

background:rgba(255,255,255,.45);

cursor:pointer;

transition:.25s;

}

.hero-dot.active{

background:#fff;

box-shadow:0 0 0 4px rgba(255,255,255,.12);

}

.slider-btn{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

border:1px solid rgba(255,255,255,.75);

background:rgba(255,255,255,.15);

color:#fff;

font-size:1.6rem;

cursor:pointer;

transition:.25s;

}

.slider-btn:hover{

background:rgba(255,255,255,.3);

transform:scale(1.04);

}

.hero h1{

font-size:4rem;

margin-bottom:20px;

line-height:1.1;

}

.hero p{

font-size:1.2rem;

margin-bottom:30px;

}

.btn-primary{

background:var(--accent);

color:white;

padding:15px 30px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-primary:hover{

transform:translateY(-3px);

}

.btn-secondary{

background:white;

color:var(--primary);

padding:15px 30px;

border-radius:50px;

text-decoration:none;

font-weight:600;

}

.btn-danger{
  background:#ef4444;
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}

.btn-danger:hover{ transform:translateY(-2px); }

.products{

padding:90px 0;

}

.product-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:40px;

}


.product-card{
  background:white;
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:.3s;
  display:flex;
  flex-direction:column;
  min-height:440px;
}

.product-card:hover{
  transform:translateY(-10px);
}

.product-card img{
  width:100%;
  height:320px;
  object-fit:contain;
  background: #fafafa;
}

.product-card h3{
  padding:16px 20px 6px 20px;
}

.product-card p{
  padding:0 20px 12px 20px;
  color:#666;
  font-size:0.95rem;
}

.product-card .product-quote-btn{
  margin:12px 20px 20px 20px;
  padding:12px 18px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  align-self:flex-start;
}

.product-card .product-quote-btn:hover{
  transform:translateY(-2px);
}

/* Admin modal and dashboard improvements */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1200;}
.modal-overlay[aria-hidden="true"]{display:none}
.modal-window{background:#fff;border-radius:12px;max-width:900px;width:100%;box-shadow:0 20px 60px rgba(2,6,23,0.2);overflow:hidden}
.modal-header{padding:18px 20px;border-bottom:1px solid #f1f5f9}
.modal-header h3{margin:0;font-size:1.15rem}
.modal-body{padding:18px 20px;max-height:70vh;overflow:auto}
.modal-footer{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid #f1f5f9;background:#fff}
.modal-footer-left{display:flex;align-items:center}
.modal-footer-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.modal-close{background:transparent;border:1px solid #e6e6e6;border-radius:6px;padding:6px 10px;font-size:18px;cursor:pointer}
.modal-close:hover{transform:translateY(-2px)}

.dashboard-card{background:#fff;padding:16px;border-radius:12px;box-shadow:var(--shadow);margin-bottom:12px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.stat-card{background:#fff;padding:16px;border-radius:12px;box-shadow:var(--shadow);text-align:center}
.stat-card h3{font-size:0.9rem;color:#64748b;margin-bottom:6px}
.stat-card h1{
  font-size:clamp(1rem,2.6vw,1.6rem);
  margin:0;
  line-height:1.1;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* make modal action buttons consistent */
.modal-footer .btn-primary{padding:8px 12px;border-radius:8px}
.modal-footer .btn-secondary{padding:8px 10px;border-radius:8px}


.product-variants{
  padding:0 20px 20px 20px;
  flex-grow:1;
}

.product-variants p{
  padding:0;
  margin:0 0 10px 0;
  color:#666;
  font-size:0.95rem;
}

.variant-divider{
  border:none;
  border-top:1px solid #e0e0e0;
  margin:12px 0;
}

.product-variants .product-quote-btn{
  margin:8px 0 0 0;
}

.calculator{

padding:90px 0;

background:#eef5ff;

}

.calculator-card{

background:white;

max-width:800px;

margin:auto;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

.calculator select,
.calculator input{

width:100%;

padding:15px;

margin-bottom:15px;

border:1px solid #ddd;

border-radius:10px;

}

.estimate-box{

margin-top:25px;

padding:25px;

background:#f8fafc;

border-radius:15px;

}

.estimate-box h3{

color:var(--success);

font-size:1.8rem;

}

.state-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(150px,1fr));

gap:20px;

padding:60px 0;

}

.state-card{

background:white;

padding:30px;

border-radius:15px;

text-align:center;

font-weight:600;

box-shadow:var(--shadow);

transition:.3s;

cursor:pointer;

}

.state-card:hover{

background:var(--primary);

color:white;

}

/* Delivery coverage images and responsive utilities */
.state-card img{
  width:100%;
  height:140px;
  object-fit:cover;
  border-radius:10px;
  display:block;
  margin:0 0 12px 0;
  background:#f8fafc;
}

.state-name{
  display:block;
  font-size:1rem;
  margin-top:6px;
  color:inherit;
}

.responsive-img{
  width:100%;
  height:auto;
  display:block;
  max-height:360px;
  object-fit:cover;
  border-radius:12px;
}

@media(max-width:640px){
  .state-card{ padding:16px; }
  .state-card img{ height:110px; }
}

.why-us{

padding:90px 0;

}

.why-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.why-card{

text-align: center;  

background:white;

padding:30px;

border-radius:18px;

box-shadow:var(--shadow);

}

.quote-form{

padding:90px 0;

background:white;

}

.quote-form form{

max-width:900px;

margin:auto;

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:20px;

}

.quote-form input,
.quote-form select,
.quote-form textarea{

padding:15px;

border-radius:10px;

border:1px solid #ddd;

}

.quote-form textarea{

grid-column:span 2;

height:140px;

}

.quote-form button{

grid-column:span 2;

padding:18px;

background:var(--primary);

color:white;

border:none;

border-radius:12px;

font-size:1rem;

font-weight:600;

cursor:pointer;

}

footer{
padding:40px 20px;
background:#0d47a1;
color:#fff;
text-align:center;
margin-top:auto;
width:100%;
box-sizing:border-box;
}

footer p{

margin:0 0 12px;

max-width:900px;

margin-left:auto;

margin-right:auto;

line-height:1.6;

}

footer a{

color:#BBDEFB;

text-decoration:none;

font-weight:600;

}

footer a:hover{

color:#fff;

}

.contact{

padding:90px 0;

background:#0d47a1;

color:white;

}

.contact-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}

.whatsapp-float{

position:fixed;

bottom:25px;

right:25px;

width:65px;

height: 11px;

border-radius:50%;

background:#25D366;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

color:white;

text-decoration:none;

box-shadow:
0 10px 30px rgba(0,0,0,.2);

z-index:9999;

}

.success-modal{

position:fixed;

inset:0;

background:
rgba(0,0,0,.55);

display:none;

align-items:center;

justify-content:center;

}

.modal-content{

background:white;

padding:40px;

border-radius:20px;

max-width:450px;

text-align:center;

}

/* Generic modal styles for admin forms */
.modal-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.45);
  z-index:10000;
  padding:24px;
}

.modal-overlay[aria-hidden="false"]{
  display:flex;
}

.modal-window{
  background:#fff;
  width:100%;
  max-width:1100px;
  min-height:640px;
  border-radius:14px;
  box-shadow:0 20px 60px rgba(12,20,40,0.18);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

/* Smaller modal size for admin quote form to avoid overly large modal */
#quoteModal .modal-window{
  max-width:900px;
  min-height:420px;
}

/* Quote modal visual improvements */
#quoteModal .modal-body h4{ margin-top:0; margin-bottom:6px; color:#0d47a1 }
#quoteModal .modal-body p{ color:#333; margin-bottom:12px }
#quoteModal .modal-body ul{ list-style:none; padding:0 }
#quoteModal .modal-body li{ padding:10px; border:1px solid #eef2ff; margin-bottom:8px; border-radius:8px; background:#fbfcff }
#quoteModal .modal-actions{ display:flex; gap:12px; justify-content:flex-end }

/* Request modal specifics */
#requestModal .modal-window{ max-width:920px; min-height:360px; border-radius:14px; overflow:hidden; }
#requestModal .modal-header{ background:linear-gradient(90deg,#0d47a1 0%, #1565C0 100%); color:#fff; padding:20px 24px; }
#requestModal .modal-header h3{ color:#fff; margin:0; }
#requestModal .request-top{ display:flex; gap:18px; align-items:center; padding:18px 22px; border-bottom:1px solid rgba(255,255,255,0.06); background:linear-gradient(180deg, rgba(13,71,161,0.06), rgba(21,101,192,0.02)); }
#requestModal .request-avatar{ width:64px; height:64px; border-radius:12px; background:#fff; color:#0d47a1; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:var(--shadow); }
#requestModal .request-meta{ flex:1; }
#requestModal .request-meta h4{ margin:0 0 6px 0; color:#0d47a1 }
#requestModal .request-grid{ display:grid; grid-template-columns: 1fr 320px; gap:18px; padding:16px 22px; }
#requestModal .request-details{ background:#fff; padding:14px; border-radius:10px; box-shadow:var(--shadow); }
#requestModal .request-side{ background:#fbfcff; padding:14px; border-radius:10px; box-shadow:var(--shadow); }
#requestModal .request-side h4{ margin-top:0; color:#0d47a1 }
#requestModal .quote-list li{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
#requestModal .modal-actions{ padding:12px 22px 18px; border-top:1px solid #f1f5f9; display:flex; gap:10px; justify-content:flex-end }
#requestModal .btn-primary{ background:#0d47a1; border-radius:10px; padding:10px 16px; }
#requestModal .btn-secondary{ background:#fff; color:#0d47a1; border:1px solid rgba(13,71,161,0.08); border-radius:10px; padding:10px 14px; }

/* Improve generic modal readability */
.modal-body h4{ color:#0d47a1; margin-bottom:8px }
.modal-body p{ color:#334155 }
.modal-body label{ display:block; margin-bottom:8px; font-weight:600; color:#334155 }
.modal-body input, .modal-body select, .modal-body textarea{ width:100%; padding:10px; border-radius:8px; border:1px solid #e6edf3; margin-bottom:12px }

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid #f1f5f9;
}

.modal-header h3{ margin:0; font-size:1.05rem; }

.modal-close{
  background:transparent;
  border:none;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  padding:6px 10px;
}

.modal-body{
  padding:18px 22px 26px 22px;
  overflow:auto;
  max-height:60vh;
}

.modal-actions{ padding:12px 22px; border-top:1px solid #f1f5f9; background:#fbfdff; }

@media (max-width: 720px){
  .modal-window{ max-width:100%; border-radius:10px; }
  .modal-body{ padding:14px; }
}

@media(max-width:768px){

.hero h1{

font-size:2.5rem;

}

.quote-form form{

grid-template-columns:1fr;

}

.quote-form textarea,
.quote-form button{

grid-column:span 1;

}

nav{

display:none;

}

}

.field-note{
  display:block;
  margin-top:-10px;
  margin-bottom:16px;
  font-size:.95rem;
  color:#55617a;
}

.admin-page .admin-layout{
  display:grid;
  /* make the admin shell span the full viewport width (override .container) */
  width:100%;
  max-width:none;
  margin:0;
  grid-template-columns:280px 1fr;
  gap:30px;
  align-items:start;
  padding:28px 20px 48px;
}

.admin-page .admin-sidebar{
  background:#0d47a1;
  color:#fff;
  border-radius:24px;
  padding:28px 24px;
  position:sticky;
  top:20px;
  min-height:calc(100vh - 96px);
  box-shadow:0 24px 60px rgba(0,0,0,.16);
}

.admin-page .admin-sidebar .brand h2{
  margin-bottom:6px;
}

.admin-page .admin-sidebar p{
  opacity:.78;
  line-height:1.6;
  margin-bottom:28px;
}

.admin-page .admin-sidebar ul{
  list-style:none;
  padding:0;
  margin:0;
}

.admin-page .admin-sidebar li{
  margin-bottom:12px;
}

.admin-page .admin-sidebar a{
  display:block;
  color:#e8f0ff;
  text-decoration:none;
  padding:12px 14px;
  border-radius:14px;
  transition:.25s;
}

.admin-page .admin-sidebar a:hover,
.admin-page .admin-sidebar .active a{
  background:rgba(255,255,255,.12);
  color:#fff;
}

.admin-page .admin-main{
  display:flex;
  flex-direction:column;
  gap:28px;
  width:100%;
}

.admin-page .admin-grid{
  display:grid;
  /* use equal-width parallel panels by default for a more balanced layout */
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
  align-items:start;
}

/* Quotation page: make the recent quotes list take most of the width */
.admin-page.quotations-page .admin-grid{
  grid-template-columns: minmax(300px,420px) 1fr;
}

/* Messages page: ensure chat window content stays inside panels and is wider */
.admin-page.messages-page .admin-chat-shell{
  /* left: conversation list 40%, right: chat window 60% */
  grid-template-columns: 40% 60%;
}

/* Ensure admin panels contain overflowing content and keep padding */
.admin-page .admin-panel, .admin-page .chat-list-panel, .admin-page .chat-window-panel{
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Deliveries page: make left panel (deliveries list) wider: 60:40 */
.admin-page.deliveries-page .admin-grid{
  grid-template-columns: 60% 40%;
}

.admin-page .admin-panel{
  background:white;
  padding:20px;
  border-radius:16px;
  box-shadow:var(--shadow);
  border:1px solid rgba(15,23,42,0.03);
}

/* helper to visually separate adjacent panels */
.admin-page .panel-separated{
  border-left:1px solid rgba(15,23,42,0.04);
  padding-left:18px;
}

.admin-page .admin-panel h3{
  margin-top:0;
  margin-bottom:18px;
  font-size:1.15rem;
  color:#0f172a;
}

/* Compact quote form in admin to reduce vertical length */
.admin-page .quote-form-panel{
  background:white;
  padding:18px;
  border-radius:14px;
  box-shadow:var(--shadow);
  /* constrain width so "New Quote" panel is visually smaller */
  max-width:560px;
  align-self:start;
}

.modal-form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(240px,1fr));
  gap:20px;
}

.modal-group{
  background:#f8faff;
  border:1px solid #e8eef7;
  border-radius:14px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.modal-group h4{
  margin:0 0 10px 0;
  font-size:1rem;
  color:#0f172a;
}

.modal-group-full{
  grid-column:1 / -1;
}

.modal-group label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:0.95rem;
}

.modal-group input,
.modal-group textarea,
.modal-group select{
  padding:12px;
  border-radius:10px;
  border:1px solid #d7dfe9;
  background:#fff;
  font-size:0.95rem;
}

.modal-group textarea{
  min-height:100px;
  resize:vertical;
}

.quote-summary{
  background:#eef4ff;
  border-color:#dbe9ff;
}

.summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(15,23,42,0.08);
}

.summary-row:last-child{
  border-bottom:none;
}

.modal-actions{
  padding:0;
  margin-top:18px;
  display:flex;
  justify-content:flex-end;
  gap:12px;
  background:transparent;
}

@media (max-width: 1080px) {
  .modal-form-grid{
    grid-template-columns:repeat(2,minmax(240px,1fr));
  }
}

@media (max-width: 760px) {
  .modal-form-grid{
    grid-template-columns:1fr;
  }
  .modal-group{
    padding:16px;
  }
}


/* Tracking page adjustments */
.home-page .quote-form-panel{
  max-width:760px;
  margin:20px auto;
  padding:18px;
  border-radius:12px;
}

.home-page .quote-form-panel .admin-form{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}

.home-page .quote-form-panel .admin-form label{ flex:1; }

.home-page .quote-form-panel .admin-form input{ width:100%; padding:12px; }

.tracking-result .dashboard-card{ margin-top:18px; }


@media (max-width: 960px) {
  .admin-page .admin-grid{
    grid-template-columns:1fr;
  }
}

.admin-page .dashboard-panel{
  display:grid;
  gap:24px;
}

.admin-page .dashboard-card{
  background:white;
  padding:30px;
  border-radius:24px;
  box-shadow:var(--shadow);
}

.admin-page .stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.admin-page .stat-card{
  background:white;
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow);
}

.admin-page .stat-card h3{
  font-size:1rem;
  color:#667085;
  margin-bottom:14px;
}

.admin-page .stat-card h1{
  font-size:clamp(1.4rem,4vw,2.4rem);
  margin:0;
  line-height:1.05;
  max-width:100%;
  overflow-wrap:break-word;
  word-break:break-word;
}

/* ensure long currency strings don't overflow their card */
.admin-page .stat-card{min-height:84px}

.admin-page .table-section{
  background:white;
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:18px;
}

.admin-page .table-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}

.admin-page .table-scroll{
  overflow-x:auto;
}

.admin-page table{
  width:100%;
  border-collapse:collapse;
  min-width:860px;
}

.admin-page th,
.admin-page td{
  text-align:left;
  padding:16px 14px;
  border-bottom:1px solid #f1f5f9;
}

.admin-page th{
  color:#475569;
  font-size:.95rem;
  letter-spacing:.02em;
}

.admin-page tbody tr:hover{
  background:#f8fafc;
}

.admin-page .status-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  background:#eef2ff;
  color:#1e40af;
  font-size:.85rem;
  font-weight:600;
}

.admin-page .status-chip.status-approved{
  background:#e6f4ea;
  color:#166534;
}

.admin-page .status-chip.status-pending{
  background:#fff7e6;
  color:#92400e;
}

.admin-page .status-chip.status-declined{
  background:#fbe4e6;
  color:#9a1f1f;
}

.admin-page .status-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:6px;
  background:#f0f0f0;
  color:#666;
  font-size:.8rem;
  font-weight:600;
}

.admin-page .status-badge.status-new{
  background:#dbeafe;
  color:#0c4a6e;
}

.admin-page .status-badge.status-read{
  background:#dcfce7;
  color:#166534;
}

.admin-page .status-badge.status-replied{
  background:#f3e8ff;
  color:#6b21a8;
}

.admin-page .status-badge.status-handled{
  background:#d1d5db;
  color:#374151;
}

.admin-page .contact-reply-btn{
  background:#10b981;
  border:none;
  color:white;
  width:32px;
  height:32px;
  border-radius:6px;
  cursor:pointer;
  font-size:.9rem;
  transition:.3s;
}

.admin-page .contact-reply-btn:hover{
  background:#059669;
}

.admin-page .message-list{
  display:grid;
  gap:12px;
}

.admin-page .message-card{
  display:block;
  width:100%;
  text-align:left;
  padding:16px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
}

.admin-page .message-card:hover,
.admin-page .message-card.active{
  background:#f8fafc;
  border-color:#93c5fd;
  transform:translateY(-1px);
}

.admin-page .message-card-avatar{
  width:44px;
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b3d2e;
  color:#fff;
  font-weight:700;
  margin-right:14px;
  flex-shrink:0;
}

.admin-page .message-card-content{
  display:grid;
  gap:6px;
  text-align:left;
}

.admin-page .admin-chat-shell{
  display:grid;
  /* make the conversation (right) panel larger for easier reading */
  grid-template-columns:350px minmax(600px, 1fr);
  gap:24px;
  margin-top:25px;
}

.admin-page .chat-list-panel,
.admin-page .chat-window-panel{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:18px;
  box-shadow:0 1px 14px rgba(15, 23, 42, 0.06);
}

.admin-page .chat-list-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:16px;
}

.admin-page .chat-list-header h3,
.admin-page .chat-list-header p{
  margin:0;
}

.admin-page .chat-window-header{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:20px;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:18px;
}

.admin-page .chat-window-header h3{
  margin:0;
}

.admin-page .chat-action-row{
  display:flex;
  gap:10px;
}

.admin-page .admin-action{
  border:1px solid #cbd5e1;
  border-radius:999px;
  padding:10px 16px;
  font-size:.95rem;
  cursor:pointer;
  transition:all .2s ease;
  background:#fff;
  color:#0f172a;
}

.admin-page .admin-action:hover{
  border-color:#0b3d2e;
  background:#f8fafc;
}

.admin-page .admin-action.end-chat{
  color:#ca8a04;
}

.admin-page .admin-action.delete-chat{
  color:#b91c1c;
}

.admin-page .chat-subtitle{
  margin:6px 0 0;
  color:#475569;
  font-size:.95rem;
}

.admin-page .chat-body{
  min-height:320px;
  max-height:520px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px;
  background:#e5ddd5;
  border-radius:18px;
  margin-bottom:18px;
}

.admin-page .chat-bubble{
  max-width:78%;
  padding:14px 16px;
  border-radius:18px;
  box-shadow:0 2px 8px rgba(15, 23, 42, 0.08);
  position:relative;
  display:inline-flex;
  flex-direction:column;
  gap:8px;
}

.admin-page .chat-bubble.user{
  align-self:flex-end;
  background:#dcf8c6;
  border-bottom-right-radius:4px;
}

.admin-page .chat-bubble.admin{
  align-self:flex-start;
  background:#ffffff;
  border-bottom-left-radius:4px;
}

.admin-page .chat-bubble.system{
  align-self:center;
  background:#f8fafc;
  border-radius:18px;
  color:#475569;
  text-align:center;
  max-width:100%;
}

.admin-page .chat-ended-note{
  padding:12px 16px;
  margin-bottom:16px;
  border:1px dashed #cbd5e1;
  border-radius:14px;
  background:#fff7ed;
  color:#92400e;
}

.admin-page .chat-bubble small{
  color:#475569;
  font-size:.8rem;
  opacity:.85;
}

.admin-page .chat-compose-form{
  display:grid;
  gap:14px;
}

.admin-page .chat-compose-form textarea,
.admin-page .chat-compose-form select{
  width:100%;
  padding:14px 16px;
  border:1px solid #cbd5e1;
  border-radius:18px;
  font-family:inherit;
  font-size:1rem;
  resize:vertical;
}

.admin-page .chat-compose-form button{
  width:auto;
  align-self:flex-start;
  background:#0b3d2e;
  color:#fff;
  border:none;
  padding:14px 20px;
  border-radius:18px;
  cursor:pointer;
}

.admin-page .chat-compose-form button:hover{
  background:#f4b400;
  color:#000;
}

.admin-page .chat-window-empty{
  min-height:320px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#475569;
  font-size:1rem;
  text-align:center;
}

.admin-page .message-card{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr);
  gap:14px;
  align-items:start;
}

.admin-page .message-card p{
  margin:0;
  color:#475569;
  line-height:1.5;
}

.admin-page .message-card small{
  color:#64748b;
}

.admin-page .message-detail{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.admin-page .message-detail-body{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.admin-page .message-text,
.admin-page .admin-notes{
  background:#f1f5f9;
  padding:14px;
  border-radius:12px;
  white-space:pre-wrap;
}

.admin-page .message-reply-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.admin-page .message-reply-form textarea,
.admin-page .message-reply-form select{
  width:100%;
  padding:12px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  font-family:inherit;
}

.admin-page .message-reply-form button{
  width:auto;
  align-self:flex-start;
  background:#0b3d2e;
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:10px;
  cursor:pointer;
}

.admin-page .message-reply-form button:hover{
  background:#f4b400;
  color:#000;
}

.sidebar-contacts{
  margin-top:30px;
  padding:16px;
  background:#f9fafb;
  border-radius:10px;
  border-top:2px solid #e5e7eb;
}

.sidebar-contacts h3{
  margin:0 0 12px 0;
  font-size:.95rem;
  color:#374151;
}

.contacts-list table{
  width:100%;
  border-collapse:collapse;
}

.contacts-list tr{
  display:block;
  margin-bottom:12px;
  padding:8px;
  background:white;
  border-radius:6px;
  border-left:3px solid #3b82f6;
}

.contacts-list td{
  display:block;
  font-size:.8rem;
  color:#555;
  line-height:1.3;
}

.contacts-list td strong{
  color:#1f2937;
}

.contacts-list td small{
  color:#9ca3af;
  display:block;
  font-size:.75rem;
}

.admin-page .admin-forms{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:24px;
}

.admin-page .admin-form{
  background:white;
  padding:28px;
  border-radius:24px;
  box-shadow:var(--shadow);
  display:grid;
  gap:18px;
}

.admin-page .admin-form h2{
  margin:0;
  margin-bottom:10px;
}

.admin-page .admin-form .form-row{
  display:grid;
  gap:10px;
}

.admin-page .admin-form .form-row label{
  font-size:.95rem;
  color:#475569;
}

.admin-page .admin-form input,
.admin-page .admin-form textarea{
  border:1px solid #d6d9e6;
  border-radius:14px;
  padding:14px 16px;
  font-size:1rem;
  color:#111827;
  background:#f8fafc;
}

.admin-page .admin-form textarea{
  min-height:120px;
  resize:vertical;
}

.admin-page .admin-form button{
  background:var(--primary);
  color:white;
  border:none;
  border-radius:12px;
  padding:15px 18px;
  font-weight:700;
  cursor:pointer;
}

.admin-page .admin-form .form-row-full{
  grid-column:1/-1;
}

@media(max-width:1024px){
  .admin-page .admin-layout{
    grid-template-columns:1fr;
  }

  .admin-page .admin-sidebar{
    min-height:auto;
    position:relative;
    top:0;
  }
}