/* Copyright © Riela Cyber Security Centre. All rights reserved. Intellectual Property of Riela Cyber Security Centre. */

[hidden]{display:none !important;}

:root{
  --sand-light:#fdf3e1;
  --sand:#f6e3bd;
  --sea:#12a6c9;
  --sea-deep:#0c7d9c;
  --sea-darker:#08536a;
  --sun:#ffc23c;
  --sunset:#ff8a5b;
  --coral:#ff6b6b;
  --text:#0f3b4a;
  --text-soft:#4a6b76;
  --white:#ffffff;
  --radius:18px;
  --shadow:0 10px 30px rgba(9,80,99,.15);
  --shadow-sm:0 4px 14px rgba(9,80,99,.12);
  font-size:16px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Tajawal',system-ui,sans-serif;
  color:var(--text);
  min-height:100vh;
  background:linear-gradient(180deg,#bdeefb 0%,#8fe0ee 18%,var(--sand-light) 45%,var(--sand) 100%);
  position:relative;
  overflow-x:hidden;
}

.bg-decor{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg-decor .sun{
  position:absolute; top:-40px; inset-inline-end:-40px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6d8, var(--sun) 60%, var(--sunset) 100%);
  box-shadow:0 0 80px 20px rgba(255,194,60,.55);
}
.bg-decor .waves{position:absolute;bottom:0;left:0;width:100%;height:140px;fill:rgba(18,166,201,.18);}

.screen{position:relative;z-index:1;}

.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Login */
.login-screen{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.login-card{
  width:100%;max-width:400px;
  padding:36px 28px;
  text-align:center;
}
.brand{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:22px;}
.brand-row{flex-direction:row;gap:10px;margin-bottom:0;}
.brand-emoji{font-size:42px;line-height:1;}
.brand h1{margin:0;font-size:28px;font-weight:800;color:var(--sea-deep);letter-spacing:1px;}
.brand-sub{margin:0;color:var(--text-soft);font-size:14px;}

.login-form{display:flex;flex-direction:column;gap:16px;text-align:start;}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500;color:var(--text-soft);flex:1;}
.field input,.field textarea{
  font-family:inherit;font-size:16px;color:var(--text);
  border:2px solid #e4ecee;border-radius:12px;
  padding:12px 14px;background:#fbfdfe;
  transition:border-color .15s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--sea);}
.field-row{display:flex;gap:12px;}
.field-row .field{min-width:0;}
textarea{resize:vertical;min-height:70px;}

.btn{
  font-family:inherit;font-weight:700;font-size:15px;
  border:none;border-radius:12px;cursor:pointer;
  padding:12px 20px;transition:transform .08s, box-shadow .15s, opacity .15s;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:linear-gradient(135deg,var(--sea),var(--sea-deep));color:#fff;box-shadow:var(--shadow-sm);}
.btn-primary:hover{opacity:.92;}
.btn-danger{background:#fde8e8;color:#c53030;}
.btn-ghost{background:transparent;color:var(--sea-deep);border:2px solid rgba(18,166,201,.3);}
.btn-block{width:100%;}
.btn-sm{padding:8px 14px;font-size:13px;}

.error-msg{color:#c53030;background:#fde8e8;border-radius:10px;padding:8px 12px;font-size:13px;margin:0;}

/* App header */
.app-header{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(18,166,201,.15);
}
.app-header-inner{
  max-width:820px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
}
.app-header .brand h1{font-size:20px;}
.app-header .brand-emoji{font-size:24px;}

.app-main{max-width:820px;margin:0 auto;padding:18px 14px 100px;display:flex;flex-direction:column;gap:18px;}

/* Calendar */
.calendar-card{padding:18px 16px 20px;}
.month-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.month-label{margin:0;font-size:18px;font-weight:700;color:var(--sea-deep);}
.icon-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--sand-light);color:var(--sea-deep);
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.icon-btn:hover{background:var(--sand);}

.weekday-row,.calendar-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.weekday-row{margin-bottom:6px;}
.weekday-row span{text-align:center;font-size:12px;font-weight:700;color:var(--text-soft);padding:4px 0;}

.day-cell{
  position:relative;
  min-height:56px;
  border-radius:10px;
  background:#f7fbfc;
  border:1px solid transparent;
  display:flex;flex-direction:column;align-items:center;
  padding:6px 2px 4px;
  cursor:pointer;
  font-size:13px;
  gap:3px;
  transition:background .12s;
}
.day-cell:hover{background:#eaf6f9;}
.day-cell.other-month{opacity:.35;}
.day-cell.today{border-color:var(--sun);}
.day-cell .day-num{font-weight:700;}
.day-pill{
  font-size:10px;line-height:1.3;
  background:linear-gradient(135deg,var(--sea),var(--sea-deep));
  color:#fff;border-radius:6px;padding:1px 5px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.day-pill.more{background:var(--sunset);}
.day-cell.has-booking{background:#e8f7fa;}

.calendar-legend{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:var(--text-soft);}
.legend-dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--sea),var(--sea-deep));display:inline-block;}

/* Agenda */
.agenda-card{padding:18px 16px 20px;}
.agenda-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.agenda-header h2{margin:0;font-size:17px;color:var(--sea-deep);}

.agenda-list{display:flex;flex-direction:column;gap:10px;}
.agenda-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  border:1px solid #eaf1f2;border-radius:12px;padding:12px 14px;
  background:#fcfefe;
}
.agenda-item-main{display:flex;flex-direction:column;gap:3px;min-width:0;}
.agenda-name{font-weight:700;color:var(--text);}
.agenda-dates{font-size:13px;color:var(--sea-deep);font-weight:600;}
.agenda-notes{font-size:13px;color:var(--text-soft);white-space:pre-wrap;word-break:break-word;}
.agenda-actions{display:flex;gap:6px;flex-shrink:0;}
.empty-msg{color:var(--text-soft);text-align:center;padding:10px 0;font-size:14px;}

/* FAB */
.fab{
  position:fixed;bottom:22px;inset-inline-end:22px;z-index:20;
  width:56px;height:56px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--sunset),var(--coral));
  color:#fff;font-size:28px;line-height:1;cursor:pointer;
  box-shadow:0 8px 22px rgba(255,107,107,.45);
}
.fab:active{transform:scale(.94);}

/* Modal */
.modal-backdrop{
  position:fixed;inset:0;z-index:50;
  background:rgba(8,60,75,.45);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.modal{width:100%;max-width:440px;max-height:88vh;overflow-y:auto;padding:22px 20px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.modal-header h3{margin:0;font-size:18px;color:var(--sea-deep);}

.booking-form{display:flex;flex-direction:column;gap:14px;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;}

.overlap-warning{
  background:#fff6e5;border:1px solid #ffe1a3;border-radius:12px;padding:10px 12px;font-size:13px;
}
.overlap-warning ul{margin:6px 0;padding-inline-start:18px;}
.checkbox-field{display:flex;align-items:center;gap:8px;margin-top:6px;font-weight:600;cursor:pointer;}

@media (max-width:480px){
  .day-cell{min-height:46px;font-size:11px;}
  .day-pill{display:none;}
  .day-cell.has-booking::after{
    content:"";position:absolute;bottom:5px;width:6px;height:6px;border-radius:50%;
    background:var(--sea-deep);
  }
  .login-card{padding:28px 20px;}
}