/* ---------------- GLOBAL ---------------- */

.global{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}

.index{
background:#ffffff;
color:#1a2c44;
margin-left:150px;
max-width:1550px;   /* makes page smaller */
margin-left:40px;  /* move page slightly left */
margin-right:auto;
padding:20px;
}

/* ---------------- HEADER ---------------- */
.logo img{
    width:200px;
    height:auto;
    margin-left: 24px;
    margin-top: -30px;
    margin-bottom: -40px;
}
header{
display:flex;
justify-content:space-between;
align-items:center;
margin-right: 1140px;
padding:8px 7%;
background:#ffffff;
}

.language{
color:#0077cc;
cursor:pointer;
}

/* ---------------- MAIN CONTAINER ---------------- */

.container{
max-width:1200px;
margin:auto;
padding:40px 20px;
}

.title{
font-size:36px;
font-weight:700;
margin-bottom:40px;
}

/* ---------------- GRID ---------------- */

.grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}

/* ---------------- RATING ---------------- */

.rating-box{
margin-bottom:30px;
}

.rating{
display:flex;
gap:10px;
margin:20px 0;
}

.rating input{
display:none;
}

.rating label{
flex:1;
padding:14px;
border:2px solid #0077cc;
background:white;
border-radius:4px;
cursor:pointer;
font-size:16px;
text-align:center;
color:#0077cc;
transition:0.3s;
}

.rating input:checked + label{
background:#0077cc;
color:white;
}

.labels{
display:flex;
justify-content:space-between;
font-size:14px;
font-weight:bold;
margin-bottom:40px;
}

/* ---------------- FORM ELEMENTS ---------------- */

select,
textarea,
input{
width:100%;
padding:14px;
border:2px solid #0077cc;
border-radius:4px;
margin-top:10px;
font-size:15px;
}

textarea{
height:130px;
resize:none;
}

/* ---------------- FLOATING FORM ---------------- */

.form-group{
position:relative;
margin-bottom:25px;
}
.input-group1{
position:relative;
width:100%;
}

.input-group1 label{
position:absolute;
left:14px;
top:16px;
background:#ffffff;
padding:0 6px;
color:#666;
font-size:15px;
transition:0.25s;
pointer-events:none;
}

.input-group1 input{
width:100%;
padding:16px;
border:2px solid #0077cc;
border-radius:5px;
font-size:15px;
outline:none;
background:transparent;
}

.input-group1 input:focus + label,
.input-group1 input:not(:placeholder-shown) + label{
top:-0.4px;
font-size:12px;
color:#0077cc;
}
.form-group label{
position:absolute;
left:15px;
top:16px;
background:white;
padding:0 6px;
font-size:15px;
color:#666;
transition:0.25s;
pointer-events:none;
}

select:focus + label,
select:valid + label,
textarea:focus + label,
textarea:not(:placeholder-shown) + label{
top:-0.3px;
font-size:12px;
color:#0077cc;
}
.input-group{
position:relative;
}
.container1{
display:flex;
gap:40px;
align-items:flex-start;
}
.input-group input{
width:100%;
padding:30px -10PX;
border:2px solid #0077cc;
border-radius:5px;
font-size:15px;
outline:none;
background:transparent;
}

.input-group label{
position:absolute;
left:14px;
top:16px;
background:#e9e9e9;
padding:0 6px;
color:#666;
font-size:15px;
transition:0.25s;
pointer-events:none;
}

/* floating behaviour */

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
top:-0.05px;
font-size:12px;
color:#0077cc;
}

/* ---------------- CHARACTER COUNT ---------------- */

.char-count{
position:absolute;
right:10px;
bottom:8px;
font-size:12px;
color:#000;
}

/* ---------------- RIGHT SIDE CONTACT ---------------- */

.right{
background:rgb(232, 232, 232);
padding:25px;
border-radius:8px;
width:600px;
height:auto;
display:inline-block;
}

.right p{
font-size:14px;
margin-bottom:50px;
}
.right1{
font-size:10px;
margin-bottom:28px;
}
/* ---------------- INPUT ROW ---------------- */

.row{
display:flex;
gap:20px;
margin-bottom:20px;
}
.right h2{
margin-top:0;
margin-bottom:25px;
font-size:25px;
}
.desc{
font-size:12px;
line-height:1.4;
margin-bottom:20px;
}
.right input{
margin-bottom:2px;
}
.right h4{
margin-top:15px;
margin-bottom:20px;
}
.row input{
flex:1;
}

/* ---------------- CHECKBOX ---------------- */

.checkbox{
display:flex;
gap:12px;
align-items:flex-start;
margin-top:10px;
}

.checkbox input{
width:18px;
height:18px;
cursor:pointer;
margin-top:25px;
}

.checkbox p{
font-size:14px;
line-height:1.6;
}

.checkbox a{
color:#0077cc;
text-decoration:none;
}

.checkbox a:hover{
text-decoration:underline;
}

/* ---------------- BUTTON ---------------- */

.btn-container{
display:flex;
justify-content:flex-end;
margin-top:40px;
}

.feedback-btn{
background:#1b77c5;
color:white;
border:none;
padding:14px 28px;
font-size:16px;
border-radius:6px;
cursor:pointer;
display:flex;
align-items:center;
gap:10px;
transition:0.3s;
}

.feedback-btn:hover{
background:#166ab2;
}

.feedback-btn .arrow{
font-size:18px;
background:transparent;
}

/* ---------------- ADMIN PANEL ---------------- */

/* DASHBOARD BODY */

.admin-dash{
font-family:Arial, Helvetica, sans-serif;
background:#f2f2f2;
padding:40px;
margin:0;
}

/* MAIN CONTAINER */

.dashboard-container{

max-width:1100px;
margin:auto;
}

/* TITLE */

h1{
color:#0b3a63;
margin-bottom:20px;
}

/* ADMIN CONTROLS */

.admin-controls{
margin-bottom:20px;
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
}

.admin-controls input{
padding:8px;
width:250px;
border:1px solid #ccc;
border-radius:5px;
}

/* BUTTONS */

.btn{
padding:8px 14px;
color:white;
text-decoration:none;
border-radius:5px;
font-size:14px;
display:inline-block;
}

.export{
background:#28a745;
}

.logout{
background:#dc3545;
}

.delete{
background:#ff9800;
border:none;
cursor:pointer;
}

/* STATS CARDS */

.stats{
display:flex;
gap:20px;
margin-bottom:25px;
flex-wrap:wrap;
}

.card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
width:200px;
text-align:center;
}

.card h3{
margin-bottom:10px;
color:#0b3a63;
}

/* TABLE WRAPPER */

.table-container{
overflow-x:auto;
}

/* TABLE */

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

/* TABLE CELLS */

.admin-dash th,
.admin-dash td{
padding:12px;
border:1px solid #ddd;
text-align:left;
}

/* HEADER */

.admin-dash th{
background:#1b73b9;
color:white;
}

/* ROW STYLING */

.admin-dash tr:nth-child(even){
background:#f9f9f9;
}

.admin-dash tr:hover{
background:#eef5ff;
}


/* ---------------- ADMIN LOGIN ---------------- */

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

.admin-login{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#4facfe,#00f2fe);
}

.login-box{
background:white;
padding:40px;
width:350px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.2);
text-align:center;
}

.login-box h2{
margin-bottom:25px;
}

.login-box input{
width:100%;
padding:12px;
margin:10px 0;
border:1px solid #ccc;
border-radius:5px;
font-size:14px;
}

.login-box button{
width:100%;
padding:12px;
background:#4facfe;
border:none;
color:white;
font-size:16px;
border-radius:5px;
cursor:pointer;
}

.login-box button:hover{
background:#007bff;
}

.error{
color:red;
margin-bottom:10px;
}
/* ---------------- MOBILE ---------------- */

@media(max-width:900px){

body{
margin-left:0;
}

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

.row{
flex-direction:column;
}

.title{
font-size:28px;
}

.feedback-btn{
width:100%;
justify-content:center;
}

}
/* Dashboard container */
.dashboard-container{
width:96%;
margin:auto;
max-width:1600px;
}

/* Stats cards */
.stats{
display:flex;
gap:20px;
margin-bottom:30px;
}

.card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
text-align:center;
flex:1;
}

/* Controls */
.admin-controls{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

.admin-controls input{
padding:10px;
width:250px;
border:1px solid #ccc;
border-radius:5px;
}

/* Buttons group */
.admin-buttons{
display:flex;
gap:10px;
}

/* Date filter */
.date-group{
display:flex;
gap:20px;
}

.input-box{
position:relative;
}

.input-box input{
padding:12px 10px;
font-size:14px;
border:1px solid #ccc;
border-radius:6px;
width:200px;
background:white;
}

/* label inside input */
.input-box label{
position:absolute;
left:10px;
top:12px;
background:rgb(241, 241, 241);
padding:0 5px;
color:#777;
font-size:14px;
transition:0.25s;
pointer-events:none;
}

/* move label up */
.input-box input:focus + label,
.input-box input:not(:placeholder-shown) + label{
top:-8px;
font-size:12px;
color:#141414;
}
.date-filter{
display:flex;
align-items:center;
gap:10px;
margin-bottom:20px;
}

.date-filter input{
padding:8px;
border-radius:5px;
border:1px solid #ccc;
}

/* Table */
.top-controls{
display:flex;
align-items:center;
gap:12px;
margin:20px 0;
flex-wrap:nowrap;
}

/* Search */
#search{
width:220px;
padding:8px;
border-radius:5px;
border:1px solid #ccc;
}

/* Date inputs */
.top-controls input[type="date"]{
width:150px;
padding:6px;
border-radius:5px;
border:1px solid #ccc;
}

/* Buttons on right */
.right-buttons{
margin-left:auto;
display:flex;
gap:10px;
}

/* Buttons */
.btn{
padding:7px 14px;
border:none;
border-radius:5px;
cursor:pointer;
color:white;
font-size:14px;
}

.logout{
background:#dc3545;
}

#table{
width:100%;
border-collapse:collapse;
background:white;
font-size:16px;
}

#table th{
padding:16px;
font-size:17px;
}

#table td{
padding:16px;
}
#table th:nth-child(10),
#table td:nth-child(10){
    width:100px;
    white-space:nowrap;
}

/* Buttons */
.btn{
padding:8px 14px;
border:none;
border-radius:5px;
cursor:pointer;
color:white;
}

.logout{
background:#dc3545;
}


.filter{
background:#3498db;
}

.reset-link{
color:#6c5ce7;
text-decoration:none;
margin-left:5px;
}
.change-password{
margin-top:40px;
background:white;
padding:20px;
border-radius:8px;
width:350px;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.change-password h2{
margin-bottom:15px;
}

.change-password input{
width:100%;
padding:8px;
margin-bottom:10px;
border:1px solid #ccc;
border-radius:5px;
}

.update{
background:#28a745;
}
.logout-btn{
background:#dc3545;
color:white;
padding:8px 18px;
border-radius:6px;
text-decoration:none;
font-size:14px;
display:inline-block;
transition:0.3s;
}
.logout-container{
display:flex;
justify-content:flex-end;
margin-bottom:-35px;
}
.logout-btn:hover{
background:#c82333;
}
.action-buttons{
display:flex;
gap:20px;
justify-content:right;   /* center buttons */
margin-top:25px;
}

.btn{
padding:10px 20px;
border:none;
border-radius:6px;
font-size:14px;
cursor:pointer;
}

.delete{
background:#f39c12;
color:white;
}

.export{
background:#28a745;
color:white;
}
.change-pass{
background:#0077cc;
color:white;
padding:8px 16px;
border-radius:6px;
text-decoration:none;
margin-right:10px;
display:inline-block;
}

.change-pass:hover{
background:#005fa3;
}
@media (max-width:768px){

/* Container */
.container{
padding:20px;
}
html, body{
overflow-x:hidden;
}
.container{
max-width:100%;
padding:20px;
box-sizing:border-box;
}
/* Title */
.title{
font-size:26px;
text-align:center;
margin-bottom:20px;
}

/* Grid becomes single column */
.grid{
display:block;
}

/* Sections spacing */
.grid > div{
margin-bottom:30px;
}

/* Headings */
h2{
font-size:20px;
margin-bottom:15px;
}

h4{
font-size:16px;
}

/* Rating numbers */
.rating{
display:flex;
gap:10px;
justify-content:space-between;
flex-wrap:nowrap;
}

.rating label{
flex:1;
text-align:center;
padding:12px 0;
font-size:16px;
}

/* Rating labels */
.labels{
font-size:12px;
display:flex;
justify-content:space-between;
}

/* Form rows stack */
.row{
flex-direction:column;
gap:15px;
}

/* Inputs */
.input-group,
.input-group1{
width:100%;
}

.input-group input,
.input-group1 input,
.form-group select,
textarea{
width:100%;
font-size:14px;
padding:12px;
}

/* Textarea */
textarea{
min-height:100px;
}

/* Description text */
.desc{
font-size:14px;
line-height:1.5;
}

/* Checkbox */
.checkbox{
flex-direction:column;
align-items:flex-start;
font-size:13px;
}

/* Button */
.btn-container{
text-align:center;
margin-top:20px;
}

.feedback-btn{
width:100%;
padding:14px;
font-size:16px;
}

}
@media (max-width:768px){

/* Page padding */
.container{
padding:20px 16px;
}

/* Logo */
.logo img{
max-width:160px;
margin:auto;
display:block;
}

/* Title */
.title{
font-size:26px;
text-align:center;
margin-bottom:25px;
}

/* Grid becomes single column */
.grid{
display:block;
}

/* Rating box spacing */
.rating-box{
margin-bottom:25px;
}

/* Rating buttons */
.rating{
display:flex;
gap:10px;
justify-content:space-between;
flex-wrap:nowrap;
}

.rating label{
flex:1;
text-align:center;
padding:12px 0;
font-size:16px;
}


/* Labels */
.labels{
font-size:12px;
margin-top:8px;
display:flex;
justify-content:space-between;
}

/* Inputs full width */
.input-group,
.input-group1,
.form-group{
width:100%;
margin-bottom:20px;
}

input,
select,
textarea{
width:100%;
max-width:100%;
box-sizing:border-box;
}

/* Textarea */
textarea{
min-height:120px;
}

/* Character count */
.char-count{
text-align:right;
font-size:12px;
margin-top:5px;
}

/* Contact section box */
.right{
width:100%;
padding:20px;
box-sizing:border-box;
}

/* Description */
.desc{
font-size:14px;
line-height:1.6;
}

/* Row inputs stack */
.row{
display:block;
}

.row .input-group{
margin-bottom:20px;
}

/* Checkbox */
.checkbox{
display:flex;
gap:10px;
align-items:flex-start;
font-size:13px;
margin-top:10px;
}

/* Submit button */
.btn-container{
margin-top:30px;
text-align:center;
}

.feedback-btn{
width:100%;
padding:14px;
font-size:16px;
border-radius:6px;
}

}