/* Hide Navbar on web pages only - not on desk */
.website-list .navbar-light,
nav.navbar.navbar-light.navbar-expand-lg {
  display: none !important;
}

.web-footer {
  display: none !important;
}

/* Brand Colors - Adjust these to match your design */
:root {
  --brand-color: #F4831F;
  --brand-dark: #f4831fe6;

  --background: #ffffff;
  --foreground: #020617;

  --card: #ffffff;
  --card-foreground: #020617;

  --popover: #ffffff;
  --popover-foreground: #020617;

  /* SESQ Brand: #f58220 -> hsl(28, 91%, 54%) */
  --brand: #f27a0f;

  --green: #009f5f;
  --dark-green: #006b40;

  --primary: #f27a0f;
  --primary-foreground: #ffffff;

  --secondary: #fff5ef;
  --secondary-foreground: #6b2d07;

  --muted: #f1f5f9;
  --muted-foreground: #64748b;

  --accent: #fff5ef;
  --accent-foreground: #6b2d07;

  --destructive: #dc2626;
  --destructive-foreground: #f8fafc;

  --border: #e8edf5;
  --input: #e8edf5;
  --ring: #f27a0f;

  --radius: 0.75rem;

  --sidebar-background: #fafafa;
  --sidebar-foreground: #42464c;
  --sidebar-primary: #f27a0f;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #fff5ef;
  --sidebar-accent-foreground: #6b2d07;
  --sidebar-border: #e8e8e8;
  --sidebar-ring: #f27a0f;
}

/* Make complete Frappe desk full screen */
.navbar .container,
.page-container .container,
.page-content .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 40px !important;
  padding-right: 40px !important;
}

@media (max-width: 768px) {

  .navbar .container,
  .page-container .container,
  .page-content .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* Ensure standard workspace blocks also stretch to fill the screen */
.ce-block__content,
.ce-toolbar__content {
  max-width: 100% !important;
}

/* Comman style */
/* .body-sidebar{
  background-color: var(--sidebar-accent) !important;
} */

p {
  font-size: 16px !important;
  color: var(--muted-foreground) !important;
  font-weight: 400 !important;
}

.small,
small {
  font-size: .875em !important;
}

.rounded-sm {
  border-radius: calc(var(--radius) - 4px) !important;
}

.rounded-md {
  border-radius: calc(var(--radius) - 2px) !important;
}

.plain-btn {
  text-decoration: none;
  color: var(--bs-black);
  font-weight: 500;
}

.btn {
  font-weight: 500 !important;
}

.plain-btn:hover {
  color: var(--accent-foreground);
  background: var(--accent);
}

.border-input {
  border: 1px solid var(--input) !important;
}

.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-md {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.input-text {
  border: 1px solid var(--border);
}

.text-muted {
  color: var(--muted-foreground) !important;
}

/* Header Styles */
.custom-header {
  backdrop-filter: blur(10px);
  z-index: 1040;
}

.nav-link {
  color: #6b7280 !important;
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
  color: #000 !important;
  font-weight: 500;
}

/* Brand color classes */
.text-brand {
  color: var(--brand-color) !important;
}

.custom-btn-primary {
  background-color: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
}

.custom-btn-primary:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

.btn-outline-primary {
  color: var(--brand-color) !important;
  border-color: var(--brand-color) !important;
}

.btn-outline-primary:hover {
  background-color: var(--brand-color) !important;
  color: white !important;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(135deg, rgba(255, 245, 239, 0.75) 0%, transparent 50%, rgba(235, 178, 155, 0.336) 100%);
}

.custom-sparkle {
  font-size: 1rem;
}

/* Card hover effects */
.card {
  transition: transform 0.2s, box-shadow 0.2s;
  border-radius: 20px;
  padding: 20px;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.card-title {
  font-weight: 600 !important;
}

/* About & Sign */
.about-section .card,
.sign-section .card {
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

/* .about-section img {
  border-radius: 50%;
} */

.hero-section .badge {
  border-radius: 40px;
  background: var(--background) !important;
  font-weight: 400 !important;
  border-color: var(--border) !important;
  color: var(--muted-foreground) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2rem;
  }

  .display-5 {
    font-size: 1.75rem;
  }
}

/* Ensure proper spacing */
section {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  section {
    padding: 5rem 0;
  }
}

/* OTP Login Page */
.otp-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
  /* Adjust based on header/footer height */
  background: linear-gradient(135deg, rgba(255, 245, 239, 0.75) 0%, transparent 50%, rgba(235, 178, 155, 0.336) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  padding: 40px 20px;
}

.otp-card {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(185, 53, 0, 0.1);
  width: 100%;
  max-width: 500px;
  text-align: center;
}

.otp-inputs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.otp-inputs input {
  width: 50px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  border: 1px solid var(--muted-foreground);
  border-radius: 8px;
  transition: border 0.2s;
}

.otp-inputs input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(244, 124, 32, 0.2);
  /* Using primary color with transparency */
  outline: none;
}

.resend {
  margin-top: 14px;
  font-size: 13px;
}

.resend a {
  color: var(--primary-color) !important;
  font-weight: 500;
  text-decoration: none;
}

.resend a:hover {
  text-decoration: underline !important;
}

@media (max-width: 480px) {
  .otp-wrapper {
    padding: 20px 10px;
  }

  .otp-card {
    padding: 1.5rem;
  }

  .otp-inputs {
    gap: 6px;
  }

  .otp-inputs input {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* School Dashboard */
.status-badge {
  padding: 0.2rem 0.8rem;
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 9px;
  text-transform: uppercase;
}

.status-badge.failed {
  background-color: var(--card-foreground) !important;
}

.status-badge.passed {
  background-color: var(--green) !important;
  /* #009f5f */
}

.status-badge {
  align-self: flex-start;
}

.download-report-btn {
  background: #fff !important;
  color: var(--card-foreground) !important;
  font-weight: 500;
  border: 1px solid var(--border);
  margin-left: 30px;
}

.download-report-btn:hover {
  color: var(--accent-foreground) !important;
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}

.view-assessment-btn,
.start-assessment-btn {
  background-color: var(--brand-color) !important;
  color: #fff !important;
  font-weight: 500;
  border: 1px solid var(--border-color);
}

.view-assessment-btn:hover,
.start-assessment-btn:hover {
  background-color: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}

.save-btn {
  background: var(--foreground) !important;
  color: var(--card) !important;
  font-weight: 500;
  border: 1px solid var(--border);
}

.save-btn:hover {
  color: var(--accent-foreground) !important;
  background: var(--accent) !important;
  border: 1px solid var(--card-foreground) !important;
}

/* Swayalgo */
.swayalgo {
  color: var(--muted-foreground) !important;
  text-decoration: none;
}

.swayalgo:hover {
  color: var(--accent-foreground) !important;
  text-decoration: underline;
}

.vidyabharati {
  color: var(--muted-foreground) !important;
  text-decoration: none;
}

.vidyabharati:hover {
  color: var(--brand) !important;
  text-decoration: underline;
}

.progress-percentage {
  color: var(--accent-foreground);
}

/* New status classes for report completion */
.status-badge.completed {
  background-color: var(--green) !important;
  /* Green color for completed reports */
}

.status-badge.processing {
  background-color: var(--brand-color) !important;
  /* Orange color for processing reports */
}

/* File Input Customization */
input[type="file"]::file-selector-button {
  /* color: var(--accent-foreground);
  background: var(--accent); */
  background: var(--foreground);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

input[type="file"]::file-selector-button:hover {
  background: #363841;
}

nav.navbar.navbar-light.navbar-expand-lg {
  display: none !important;

}

.web-footer {
  display: none !important;
}

/* User List */
/* Only SESQ custom buttons */
.custom-actions button[data-label="Add%20Manager"],
.custom-actions button[data-label="Add%20Assessor"] {
  background-color: #171717;
  color: var(--card);
}

/* Hover */
.custom-actions button[data-label="Add%20Manager"]:hover,
.custom-actions button[data-label="Add%20Assessor"]:hover {
  background-color: #171717;
  color: var(--card);
}

#page-size {
  background: #fff;
  border-radius: 10px;
}

.assessor-list-container span,
.assessor-list-container td span {
  font-size: 14px;
}



/* 1. Hide the default Frappe "F" icon/svg */
.navbar-brand .frappe-icon,
.navbar-brand .app-logo {
  display: none !important;
}

/* 2. Inject Vidya Bharati logo as a background to the brand container */
.navbar-brand::before {
  content: "" !important;
  display: inline-block !important;
  background-image: url('/assets/sesq/images/vidya-bharati-logo.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  width: 70px !important;
  /* Matches the standard Frappe icon size */
  height: 70px !important;
  margin-right: 8px !important;
  /* Space between logo and the text labels */
  vertical-align: middle !important;
}

/* 3. Ensure the breadcrumb text labels are visible and aligned */
.navbar-brand .brand-label,
.navbar-brand .breadcrumb {
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
}

/* 4. Reset container width so it doesn't push the text away */
.navbar-brand {
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: auto !important;
}

/* Increase the main navbar bar height so logo and profile avatar are fully visible */
.navbar {
  min-height: 85px !important;
  height: 85px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure inner flex container fills the full navbar height */
.navbar .navbar-flex,
.navbar .container,
.navbar .container-fluid {
  min-height: 85px !important;
  height: 85px !important;
  display: flex !important;
  align-items: center !important;
}

/* Make avatar slightly larger to look proportional in the taller header */
.navbar .avatar.avatar-small {
  width: 36px !important;
  height: 36px !important;
}

/* Align navbar-brand vertically in the taller header */
.navbar .navbar-brand {
  height: 85px !important;
  display: inline-flex !important;
  align-items: center !important;
}


/* =============================================
   SIDEBAR HIDDEN - ROLE BASED (NON-ADMIN ONLY)
   ============================================= */

body.sesq-hide-sidebar .desk-sidebar,
body.sesq-hide-sidebar .sidebar-toggle-btn,
body.sesq-hide-sidebar .sidebar-toggle-icon {
  display: none !important;
}

body.sesq-hide-sidebar .desk-body {
  grid-template-columns: 1fr !important;
}

body.sesq-hide-sidebar .desk-body {
  grid-template-columns: 1fr !important;
}

body.sesq-hide-sidebar .desk-body>.main-section {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.sesq-hide-sidebar .page-container,
body.sesq-hide-sidebar .layout-main-section-wrapper,
body.sesq-hide-sidebar .layout-main-section,
body.sesq-hide-sidebar .layout-side-section,
body.sesq-hide-sidebar .page-content-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}