:root{

--primary:#003b70;
--secondary:#eef6ff;

}
body{
  font-family: Arial, sans-serif;
  background:#f4f6f9;
  margin:0;
  padding:20px;
}

.container{
  max-width:1000px;
  margin:auto;
  background:white;
  padding:30px;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.header{
  text-align:center;
  margin-bottom:30px;
}

.logo{
  width:220px;
  margin-bottom:20px;
}

h1{
  color:var(--primary);
}

.info-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:30px;
}

label{
  display:block;
  margin-bottom:8px;
  font-weight:bold;
}

input,
select,
textarea{
  width:100%;
  padding:12px;
  border:1px solid #ccc;
  border-radius:8px;
  box-sizing:border-box;
}

textarea{
  min-height:120px;
}

table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
}

th,
td{
  border:1px solid #ddd;
  padding:12px;
  text-align:center;
}

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

.total-score{
  margin-top:15px;
  font-size:20px;
  font-weight:bold;
  text-align:right;
}

button{
  width:100%;
  padding:16px;
  margin-top:30px;
  border:none;
  background:var(--primary);
  color:white;
  font-size:18px;
  border-radius:10px;
  cursor:pointer;
}

button:hover{
  background:#00509e;
}

.footer{
  margin-top:30px;
  text-align:center;
  color:#999;
  font-size:12px;
}

@media(max-width:768px){

  .info-grid{
    grid-template-columns:1fr;
  }

  table{
    font-size:12px;
  }

}
.stats-grid{

  display:grid;

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

  gap:20px;

  margin-bottom:30px;
}

.stat-card{

  background:var(--primary);


  color:white;

  padding:20px;

  border-radius:16px;

  text-align:center;
}

.stat-card h3{

  margin-bottom:10px;
}

.stat-card div{

  font-size:32px;

  font-weight:700;

  margin-top:10px;
}
.stat-card h3{

  font-size:20px;

  margin-bottom:10px;
}
.pass{

  color:green;
  font-weight:bold;
}

.fail{

  color:red;
  font-weight:bold;
}
.filter-bar{

  display:flex;
  gap:15px;
  margin-bottom:20px;
}

.filter-bar select{

  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
}
.chart-container{

  background: white;

  padding: 20px;

  border-radius: 14px;

  margin-bottom: 30px;

  height: 320px;

  position: relative;
}

.chart-container canvas{

  width: 100% !important;

  height: 100% !important;
}
.table-wrap{
  overflow-x:auto;
}

.export-box{
  margin:10px 0 20px;
  font-size:13px;
  color:#666;
}

.export-box summary{
  cursor:pointer;
  width:max-content;
}

.export-box button{
  margin-top:10px;
  width:auto;
  padding:8px 14px;
  font-size:13px;
  background:#888;
}

.filter-bar input{
  padding:10px;
  border-radius:8px;
  border:1px solid #ccc;
}
.tab-bar{
  display:flex;
  gap:12px;
  margin-bottom:25px;
}

.tab-btn{
  flex:1;
  padding:14px;
  border:none;
  border-radius:12px;
  background:#ddd;
  color:#333;
  font-weight:bold;
  cursor:pointer;
}

.tab-btn.active{

background:var(--primary);
color:white;

}

#companyDetailTable th,
#companyDetailTable td{
  text-align:left;
}

#companyDetailTable th:not(:first-child),
#companyDetailTable td:not(:first-child){
  text-align:center;
}
.year-compare-box{
  background:#f7f9fc;
  padding:15px;
  border-radius:12px;
  margin-bottom:15px;
}

#yearCompareBox{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
  margin-top:10px;
}

#yearCompareBox label{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:normal;
}
.customer-form{
  background:#f7f9fc;
  padding:20px;
  border-radius:14px;
  margin-bottom:25px;
}

.customer-form h2{
  margin-top:0;
  color:var(--primary);
}

.customer-form input,
.customer-form select{
  margin-bottom:12px;
}

.customer-form button{
  margin-top:5px;
}
.delete-btn{
  width:auto;
  padding:8px 12px;
  margin:0;
  font-size:13px;
  border-radius:8px;
  background:#b91c1c;
}
.admin-menu{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
  margin-top:30px;
}


.menu-card{
  background:var(--primary);
  color:white;
  padding:30px;
  border-radius:16px;
  text-decoration:none;
  transition:.2s;
}


.menu-card:hover{
  transform:translateY(-5px);
}


.menu-card h2{
  margin-top:0;
}


.menu-card p{
  opacity:.9;
}


@media(max-width:700px){

.admin-menu{
grid-template-columns:1fr;
}

}
/* ===== ADMIN NAVIGATION ===== */

.admin-nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  background:white;
  padding:12px;
  border-radius:14px;

  margin-bottom:25px;

  box-shadow:
  0 5px 20px rgba(0,0,0,.08);
}


.admin-nav a{

  text-decoration:none;

  padding:10px 16px;

  border-radius:10px;

  background:#eef2f7;

  color:var(--primary);

  font-weight:600;

  transition:.2s;

}


.admin-nav a:hover{

  background:var(--primary);

  color:white;

}


@media(max-width:700px){

.admin-nav a{

flex:1;

text-align:center;

font-size:13px;

}

}
.logout-btn{

margin-left:auto;

width:auto;

padding:10px 18px;

border:none;

border-radius:10px;

background:#b91c1c;

color:white;

font-size:14px;

font-weight:600;

cursor:pointer;

}


.logout-btn:hover{

opacity:.85;

}


.logout-btn:hover{

opacity:.8;

}
.login-page{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:#eef3f8;

}


.login-card{

width:380px;

background:white;

padding:40px;

border-radius:22px;

text-align:center;

box-shadow:
0 20px 40px rgba(0,0,0,.1);

}


.login-card input{

width:100%;

margin:15px 0;

}


.remember{

display:flex;

justify-content:center;

align-items:center;

gap:10px;

margin:15px 0 25px;

font-weight:600;

}


.remember input{

width:auto;

margin:0;

}


#loginError{

color:red;

font-weight:bold;

}
.login-card .logo{

width:230px;

margin-bottom:30px;

}


.login-card button{

margin-top:10px;

}


.login-card h1{

margin-bottom:30px;

}
.password-box{

display:flex;

align-items:center;

border:1px solid #cbd5e1;

border-radius:8px;

overflow:hidden;

margin:15px 0;

}


.password-box input{

border:none;

margin:0;

flex:1;

}


.password-box input:focus{

outline:none;

}


.password-box button{

width:55px;

height:100%;

margin:0;

background:white;

color:var(--primary);

font-size:20px;

border:none;

cursor:pointer;

}
.company-grid{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:40px;

}


.company-card{

background:var(--primary);
color:white;
padding:40px;
border-radius:18px;
text-align:center;
cursor:pointer;
transition:.2s;

}


.company-card:hover{

transform:scale(1.03);

}


.company-card img{

height:100px;
object-fit:contain;
background:white;
border-radius:15px;
padding:10px;

}
/* ===== CUSTOMER STATUS TABLE FIX ===== */

#customerTable{

width:100%;
table-layout:fixed;
border-collapse:collapse;

}


#customerTable th,
#customerTable td{

text-align:center;
vertical-align:middle;
padding:18px 12px;

}


/* Company */
#customerTable th:nth-child(1),
#customerTable td:nth-child(1){

width:25%;

}


/* Branch */
#customerTable th:nth-child(2),
#customerTable td:nth-child(2){

width:20%;

}


/* Status */
#customerTable th:nth-child(3),
#customerTable td:nth-child(3){

width:18%;

}


/* Link */
#customerTable th:nth-child(4),
#customerTable td:nth-child(4){

width:22%;

}


/* Action */
#customerTable th:nth-child(5),
#customerTable td:nth-child(5){

width:15%;

}


.copy-btn{

width:auto;
min-width:150px;
margin:0;

}


.delete-btn{

margin:0;

}
/* =========================
 CUSTOMER STATUS TABLE
========================= */

#customerTable{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}


#customerTable th,
#customerTable td{

  padding:16px 10px;
  text-align:center;
  vertical-align:middle;

}


/* Customer ID */
#customerTable th:nth-child(1),
#customerTable td:nth-child(1){

  width:12%;

}


/* Company */
#customerTable th:nth-child(2),
#customerTable td:nth-child(2){

  width:25%;

}


/* Branch */
#customerTable th:nth-child(3),
#customerTable td:nth-child(3){

  width:18%;

}


/* Status */
#customerTable th:nth-child(4),
#customerTable td:nth-child(4){

  width:17%;

}


/* Evaluation Link */
#customerTable th:nth-child(5),
#customerTable td:nth-child(5){

  width:18%;

}


/* Action */
#customerTable th:nth-child(6),
#customerTable td:nth-child(6){

  width:10%;

}


/* Copy Button */
.copy-btn{

  width:auto !important;
  min-width:120px;

  padding:12px 18px;

  margin:0;

}


/* Delete Button */
.delete-btn{

  width:auto !important;

  padding:8px 14px;

  margin:0;

}
/* =========================
 MODERN GLASS UI V2
========================= */


body{

background:
linear-gradient(
135deg,
var(--secondary),
#ffffff
);

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif;

}


/* Main Card */

.container{

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

backdrop-filter:
blur(18px);

border-radius:28px;

box-shadow:
0 20px 50px rgba(0,0,0,.08);

}


/* Logo */

.logo{

max-height:90px;

object-fit:contain;

}


/* Header */

.header h1{

font-size:32px;

font-weight:800;

}


/* Cards */

.stat-card,
.chart-container,
.customer-form,
.year-compare-box{

border-radius:24px;

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

}


/* Input */

input,
select,
textarea{

border-radius:14px;

border:
1px solid #d9e2ec;

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

}


/* Button */

button{

border-radius:16px;

transition:.25s;

}


button:hover{

transform:
translateY(-2px);

}


/* Navbar */

.admin-nav{

border-radius:22px;

backdrop-filter:
blur(20px);

}


.admin-nav a{

border-radius:14px;

}


/* Menu Cards */

.menu-card{

border-radius:26px;

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

}


/* Table */

table{

overflow:hidden;

border-radius:18px;

}


th{

border:none;

}


td{

border-color:#edf2f7;

}


/* Mobile */

@media(max-width:700px){


body{

padding:12px;

}


.container{

padding:20px;

border-radius:22px;

}


.header h1{

font-size:24px;

}


}
/* =========================
 CUSTOMER EVALUATION PAGE
 MOBILE GLASS UI
========================= */


.customer-page{

min-height:100vh;

background:
linear-gradient(
135deg,
var(--secondary),
#ffffff
);

padding:20px;

}


/* Main survey card */

.survey-card{

max-width:850px;

margin:auto;

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

backdrop-filter:
blur(20px);

padding:35px;

border-radius:32px;

box-shadow:
0 25px 60px
rgba(0,0,0,.1);

}


/* Logo */

.survey-logo{

width:220px;

max-height:100px;

object-fit:contain;

margin-bottom:20px;

}


/* Header */

.survey-header{

text-align:center;

margin-bottom:35px;

}


.survey-header h1{

color:var(--primary);

font-size:32px;

margin-bottom:5px;

}


.survey-header p{

color:#64748b;

}


/* Customer info */


.customer-info{

background:white;

padding:25px;

border-radius:24px;

margin-bottom:25px;

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

}



/* Question Card */


.question-card{

background:white;

padding:25px;

border-radius:24px;

margin-bottom:20px;

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

}


.question-card h2{

margin-top:0;

color:var(--primary);

}



/* Rating */


.rating-group{

display:grid;

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

gap:12px;

}


.rating-group label{

cursor:pointer;

}


.rating-group input{

display:none;

}


.rating-group span{

display:block;

padding:14px;

border-radius:18px;

text-align:center;

background:#eef2f7;

transition:.2s;

}


.rating-group input:checked + span{

background:var(--primary);

color:white;

transform:scale(1.05);

}



/* Comment */


.comment-card{

background:white;

padding:25px;

border-radius:24px;

}



/* Submit */


.submit-btn{

border-radius:20px;

font-weight:bold;

font-size:18px;

}



/* PHONE */


@media(max-width:700px){


.customer-page{

padding:12px;

}


.survey-card{

padding:22px;

border-radius:24px;

}


.survey-header h1{

font-size:24px;

}


.rating-group{

grid-template-columns:1fr 1fr;

}


.survey-logo{

width:170px;

}


}
/* CUSTOMER FORM POLISH */

#evaluationForm section{

background:white;

padding:25px;

border-radius:22px;

margin-bottom:25px;

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

}


.score-note{

background:
var(--secondary);

color:
var(--primary);

padding:15px;

border-radius:16px;

font-weight:bold;

margin-bottom:25px;

}


.grand-total{

background:
var(--primary);

color:white;

padding:25px;

border-radius:20px;

font-size:24px;

font-weight:bold;

text-align:center;

margin:30px 0;

}


#evaluationForm table{

border-radius:15px;

overflow:hidden;

}


#evaluationForm td:first-child{

text-align:left;

}


#submitBtn{

border-radius:50px;

font-weight:bold;

}
/* ===== CUSTOMER EXPORT BUTTON ===== */

.export-actions{

display:flex;
gap:15px;
margin:25px 0;

}


.export-actions button{

width:auto;

padding:12px 20px;

border-radius:12px;

font-size:15px;

}


@media(max-width:700px){

.export-actions{

flex-direction:column;

}

.export-actions button{

width:100%;

}

}