/* static/style.css - Reworked Theme v3.3: Added welcome page styles */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

:root {
  --bs-font-sans-serif: 'Tajawal', sans-serif;
  --bs-primary: #0d6efd;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary: #6c757d;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --sidebar-bg: #111827; /* Dark gray for sidebar */
  --sidebar-width: 260px;
  --header-height: 60px;
  --bs-body-bg: #ffffff; /* UPDATED: Changed background to white */
  --bs-body-color: #1f2937;
  --bs-card-bg: #ffffff;
  --bs-card-border-color: #e5e7eb;
  --bs-border-color: #e5e7eb;
  --bs-link-color: #0d6efd;
  --bs-link-hover-color: #0a58ca;
}

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

/* --- Main Layout: Sidebar + Content --- */
.dashboard-wrapper {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  color: #fff;
  position: fixed;
  top: 0;
  right: 0; /* Positioned on the right for RTL */
  bottom: 0;
  z-index: 1030;
  transition: transform 0.3s ease-in-out;
}

.main-content {
  flex-grow: 1;
  padding-right: var(--sidebar-width); /* Offset for the sidebar */
  transition: padding-right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;

}

/* --- Sidebar Styles --- */
.sidebar-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar-header .app-logo {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sidebar-nav {
  padding: 1rem 0;
}
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  color: #d1d5db;
  padding: 0.75rem 1.5rem;
  margin: 0.25rem 0.5rem;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}
.sidebar-nav .nav-link .nav-icon {
  width: 24px;
  margin-left: 1rem; /* Margin on the left for RTL */
  font-size: 1.1rem;
}
.sidebar-nav .nav-link:hover {
  background-color: rgba(255,255,255,0.05);
  color: #fff;
}
.sidebar-nav .nav-link.active {
  background-color: var(--bs-primary);
  color: #fff;
  font-weight: bold;
}
.sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
    color: #9ca3af;
    text-align: center;
}

/* --- Header Bar Styles --- */
.header {
  height: var(--header-height);
  background-color: var(--bs-card-bg);
  border-bottom: 1px solid var(--bs-card-border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  position: sticky;
  top: 0;
  z-index: 1020;
}
.header .user-menu {
  color: var(--bs-body-color);
}
.mobile-toggle {
    display: none; /* Hidden on desktop */
    font-size: 1.5rem;
    background: none;
    border: none;
    color: var(--bs-body-color);
}

/* --- Content Area --- */
.content-area {
  padding: 2rem;
  flex-grow: 1;
}
.content-area h1 {
    font-weight: 700;
    color: var(--bs-dark);
    font-size: 1.75rem;
}

/* --- Component Styles --- */
.card {
  border: 1px solid var(--bs-card-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.05), 0 1px 2px -1px rgba(0,0,0,0.05);
}
.card-header {
  background-color: #f9fafb;
  border-bottom: 1px solid var(--bs-border-color);
  font-weight: 700;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* MOD: Center content in button */
  gap: 0.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
}
.table-responsive {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  background-color: var(--bs-card-bg);
}
.table { margin-bottom: 0; }
.table th {
    background-color: var(--bs-light);
    font-weight: 700;
    white-space: nowrap;
}
.table td, .table th {
    vertical-align: middle;
}
.table-hover > tbody > tr:hover > * {
  background-color: #f0f5ff;
}

/* Custom rule to place check/radio input before the label in RTL */
.form-check {
  padding-left: 0;
  padding-right: 1.5em;
}
.form-check .form-check-input {
  float: right;
  margin-left: 0;
  margin-right: -1.5em;
}
.form-check.form-check-inline {
    margin-right: 0;
    margin-left: 1rem;
}

/* Enhance visibility of checkboxes and radio buttons */
.form-check-input {
    border-color: #9ca3af; /* A stronger gray for the border */
    border-width: 1px;
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* MODIFIED: Position modal close button to the top-left corner in RTL */
.modal-header {
  position: relative;
}
.modal-header .btn-close {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: auto;
  margin: 0;
}


/* --- Responsive Design for Sidebar --- */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(100%); /* Hides sidebar off-screen to the right for RTL */
    
    /* --- MODIFICATION START: Fix for Android rendering bug --- */
    -webkit-transform: translateX(100%);
    will-change: transform;
    /* --- MODIFICATION END --- */
  }
  .sidebar.is-open {
    transform: translateX(0);
    
    /* --- MODIFICATION START: Add vendor prefix --- */
    -webkit-transform: translateX(0);
    /* --- MODIFICATION END --- */
    
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
  }
  .main-content {
    padding-right: 0; /* Full width content on mobile */
  }
  .mobile-toggle {
    display: block;
  }
  .header {
    justify-content: space-between;
  }
  .backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 1025;
  }
  /* MODIFICATION: Make content-area padding smaller on mobile */
  .content-area {
    padding: 1rem;
  }
}

/* --- Welcome Page specific styles (New) --- */
.welcome-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: #fff;
    text-align: center;
    padding: 2rem;
}
.welcome-header {
    position: absolute;
    top: 2rem;
    left: 2rem;
}
.welcome-main {
    max-width: 800px;
}
.welcome-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.welcome-subtitle {
    font-size: 1.25rem;
    margin-bottom: 3rem;
    opacity: 0.9;
}
.welcome-actions {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}
.welcome-btn {
    width: 250px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 500;
    border-width: 2px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.welcome-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* --- Login Page specific styles --- */
.login-page {
    background-color: var(--bs-light); /* Lighter bg for login page */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.login-page .card {
    width: 100%;
    max-width: 450px;
    border: none;
}

/* --- Print Styles (Base) --- */
/* MODIFICATION: Reduced all font sizes by 1pt for the faculty/teacher form */
/* MODIFICATION: These .print-page styles are for SCREEN PREVIEW */
.print-page { 
    background: white; 
    font-size: 9.5pt; 
    line-height: 1.35; 
    color: black; 
    
    /* MODIFICATION: Responsive print preview for screens */
    width: 100%; /* Use 100% width */
    max-width: 210mm; /* Max-width is the A4 size */
    min-height: auto; /* Remove fixed min-height for screen */
    padding: 1rem; /* Use rem for screen padding */
    
    margin: 1rem auto; 
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.3); 
    position: relative; 
    display: flex; 
    flex-direction: column;
    box-sizing: border-box; /* MODIFICATION: Add box-sizing */
}
.print-page .header-text { text-align: center; margin-bottom: 0.5em; }
.print-page h4, .print-page h5, .print-page h6 { font-family: 'Arial', 'Tahoma', sans-serif;font-weight: bold; margin-bottom: 0.2em;}
.print-page h4 { font-size: 13pt; } .print-page h5 { font-size: 12pt; } .print-page h6 { font-size: 11pt; }
.print-page .main-form-title { margin-top: 0.4em; border-top: 1.5px solid black; border-bottom: 1.5px solid black; padding: 0.2em 0; display: block; width: 95%; margin-left: auto; margin-right: auto; font-size: 12pt; margin-bottom: 0.6em; text-align: center;}
.print-page .header-logos { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4em; height: 55px;}
.print-page .header-logos img { max-height: 100%; max-width: 120px; object-fit: contain; }
.print-page .section { margin-bottom: 0.5em; border: 1px solid #a0a0a0; padding: 0.3em; }
.print-page .section.compact-section { margin-bottom: 0.4em; padding: 0.2em; }
.print-page .section-title { font-weight: bold; margin-bottom: 0.3em; background-color: #eaeaea; padding: 0.2em; text-align:center; font-size: 10pt;}
.print-page .info-table { width: 100%; border-collapse: collapse; }
.print-page .info-table td { padding: 0.2em 0.35em; vertical-align: top; border: 1px solid #c0c0c0; font-size: 8.5pt; word-break: break-word;}
.print-page .info-table td:first-child { font-weight: bold; width: 38%; }
.print-page .info-table td:last-child { width: 62%; }
.print-page .signatures-section { display: flex; justify-content: space-around; text-align: center; margin-top: 0.8em; padding-top: 0.4em; border-top: 1px solid #a0a0a0; min-height: 70px; }
.print-page .signatures-section .sig-block { width: 30%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
.print-page .signatures-section img { max-height: 35px; max-width: 90px; object-fit: contain; display: block; margin: 0 auto 0.2em auto; }
.print-page .signatures-section span { font-size: 7.5pt; } .print-page .signatures-section small { font-size: 6.5pt; color: #333; }
.print-page .head-signature-block { text-align: center; margin-top: 0.8em; padding-top: 0.4em; border-top: 1px solid #a0a0a0; min-height: 75px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
.print-page .head-signature-block img { max-height: 45px; max-width: 120px; object-fit: contain; display: block; margin: 0 auto 0.2em auto; }
.print-page .head-signature-block span { font-size: 8.5pt; } .print-page .head-signature-block small { font-size: 7.5pt; color: #333; }
.print-page .footer-info { display: flex; justify-content: space-between; align-items: flex-end; font-size: 7pt; border-top: 1px solid black; padding-top: 0.4em; margin-top: auto; width: 100%;}
.print-page .qr-code img { max-height: 50px; max-width: 50px; } .print-page .form-id-date { text-align: right; }
.print-page .arabic-text { font-family: 'Arial', 'Tahoma', sans-serif; } .print-page .english-text { font-family: 'Times New Roman', serif; }

/* MODIFIED/NEW: Styles for faculty review and print forms */
.review-faculty-table .form-check-label i { font-size: 1.2rem; }
.print-page .conditions-table td.condition-check {
    width: 10%;
    text-align: center;
    font-size: 0.9rem; /* Reduced icon size */
    vertical-align: middle;
}
/* Styles for the redesigned faculty info table */
.print-page .info-table.faculty-info-layout { table-layout: fixed; }
.print-page .info-table.faculty-info-layout td { vertical-align: middle; font-weight: normal !important; }
.print-page .info-table.faculty-info-layout .label { font-weight: bold !important; }
/* Styles for the redesigned opinion table in faculty print form */
.print-page .opinion-table td.answer {
    text-align: center;
    vertical-align: middle;
    font-size: 9pt;
}

.print-page .opinion-table td:nth-child(1),
.print-page .opinion-table td:nth-child(3) {
    font-weight: bold !important;
}


/* NEW: Enhanced Maintenance Mode Switch */
.maintenance-switch .form-check-input {
    width: 5em;
    height: 2.5em;
    cursor: pointer;
    background-color: #dc3545; /* Red when off (Maintenance is ON) */
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/%3e%3c/svg%3e");
}
.maintenance-switch .form-check-input:checked {
    background-color: #198754; /* Green when on (Maintenance is OFF) */
    border-color: #198754;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255,255,255,1.0)'/%3e%3c/svg%3e");
}
.maintenance-switch .form-check-label {
    padding-right: 1.5em;
    font-size: 1.1rem;
    font-weight: 500;
}


@media print {
    body, html { margin: 0 !important; padding: 0 !important; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
    .dashboard-wrapper, .sidebar, .header, .alert, .btn, .page-header, .modal, .pagination, script, form, .card, h1 { display: none !important; visibility: hidden !important; }
    .main-content, .content-area, .container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important;}
    
    /* MODIFICATION: Reset .print-page styles for actual printing */
    .print-page { 
        width: 100%; /* Use 100% of the A4 page */
        height: 100%; 
        position: relative; 
        margin: 0 !important; 
        padding: 1cm !important; /* Use cm for printing */
        border: none !important; 
        box-shadow: none !important; 
        page-break-after: always; 
        box-sizing: border-box; 
        min-height: 297mm; /* Set A4 min-height for printing only */
    }
    
    .print-page .section, .print-page .signatures-section, .print-page .head-signature-block { page-break-inside: avoid; }
    .print-page .footer-info { position: absolute; bottom: 1cm; left: 1cm; right: 1cm; width: calc(100% - 2cm); margin-top: 0; }
    @page { size: A4 portrait; margin: 0; }
}

/* ---
--- NEW STYLES FOR CITATION TABLES (v7.0)
--- */

/*
  MODIFICATION (Request 2) & FIX (v7.2):
  Add styles for .is-invalid on file/select inputs.
  Bootstrap (in RTL) adds padding-left and a background-image (error icon).
  We remove the icon but must also reset the padding-left to its default value
  to prevent a large empty white space.
*/
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--bs-danger);
    background-image: none; /* Remove Bootstrap's default error icon */
    /* FIX: Reset padding-left (for RTL) to default. Bootstrap adds this for the icon. */
    padding-right: var(--bs-form-control-padding-x, 0.75rem);
}


/* Style for the file validation error message */
.file-error-message {
    color: var(--bs-danger);
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* Fieldset for grouping citation tables */
.citation-fieldset {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 1rem 1.5rem;
    margin-top: 1rem; /* MODIFICATION (Request 3): Add margin-top for spacing */
}
.citation-fieldset .fieldset-legend {
    /* MODIFICATION (Request 3): Ensure legend is styled like a label */
    font-size: 1rem; /* Match form-label font size */
    font-weight: 500; /* Match form-label font weight */
    padding: 0 0.5rem;
    width: auto;
    margin-bottom: 0.5rem; /* Match form-label margin */
    font-family: var(--bs-font-sans-serif); /* Ensure consistent font */
    float: none; /* MODIFICATION (Request 3): Disable floating */
}

/* Container for the dynamic rows */
.citation-table-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Styling for each data row */
.citation-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.citation-row .form-control {
    flex: 1 1 50%; /* Each input takes up 50% */
}
.citation-row .remove-row-btn {
    /* MODIFICATION (Request 4): Fix button click area */
    flex: 0 0 auto; /* Button doesn't grow or shrink */
    width: 38px;  /* Set explicit width */
    height: 38px; /* Set explicit height to match input */
    padding: 0;   /* Remove padding */
    line-height: 1; /* Ensure icon centers vertically */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Ensure icon inside is centered */
.citation-row .remove-row-btn .fas {
    margin: 0; /* Remove any default margins */
}


/* Styling for the header row */
.citation-row.citation-header {
    font-weight: 500;
    color: var(--bs-dark);
    margin-bottom: 0.25rem;
    padding: 0 0.5rem; /* Align with inputs */
    /* MODIFICATION (Request 4): Adjust padding to align with new button size */
    padding-left: 46px; /* Align with remove button (38px + 8px gap) */
}

/* ---
--- NEW STYLES FOR PRINTING CITATION TABLES (v7.0)
--- */
.print-page .citation-print-table {
    font-size: 8pt; /* Slightly smaller font for table data */
}
.print-page .citation-print-table th {
    background-color: #f0f0f0;
    text-align: center;
    font-size: 8.5pt;
    padding: 0.2em;
    border: 1px solid #a0a0a0;
}
.print-page .citation-print-table td {
    font-size: 8pt;
    padding: 0.2em 0.35em;
    border: 1px solid #c0c0c0;
    vertical-align: middle;
}
.print-page .citation-print-table td:last-child {
    /* For DOI link */
    width: 35%;
    text-align: left;
    direction: ltr;
}

/* ---
--- NEW STYLES FOR CITATION ROW INDEX (v8.1)
--- */
.citation-index {
    flex: 0 0 25px; /* Don't grow, don't shrink, base width 25px */
    font-weight: bold;
    color: var(--bs-secondary);
    text-align: center;
}
.citation-row.citation-header .citation-index {
    padding-right: 0.5rem; /* Align header # with row numbers */
}

/* ---
--- MODIFICATION (v9.0): Styles for new citation table in modal
--- */
.list-group-item .citation-index {
    flex: 0 0 30px;
    font-weight: bold;
    color: var(--bs-secondary);
    text-align: right;
    padding-left: 0.5rem;
}
/* Style for the new table-based modal */
.modal-body .table th {
    background-color: var(--bs-light);
}
.modal-body .table td {
    word-break: break-word; /* allow long links/titles to wrap */
}


/* ---
--- MODIFICATION: Mobile Responsive Fixes
--- */
@media (max-width: 767.98px) {
    /* 1. Stack citation form rows on mobile */
    .citation-row {
        flex-direction: column;
        align-items: stretch; /* Make inputs full width */
        gap: 0.5rem;
    }
    
    .citation-row .form-control {
        flex-basis: auto; /* Reset flex-basis */
        width: 100%;
    }
    
    .citation-row .remove-row-btn {
        width: 100%; /* Make remove button full width */
    }
    
    .citation-index {
        display: none; /* Hide the '#' number on mobile */
    }
    
    .citation-row.citation-header {
        display: none; /* Hide the header row on mobile */
    }

    /* 2. Make welcome buttons full width on small screens */
    .welcome-btn {
        width: 100%;
        max-width: 250px; /* Keep max-width */
        height: auto; /* Allow height to adjust */
        padding: 1.5rem; /* Add some padding */
    }
    .welcome-actions {
        gap: 1rem;
    }
}