/* Glassmorphism Variables */
:root {
  --primary: #3A8DFF;
  --accent: #A259FF;
  --background: #F4F7FA;
  --glass: rgba(255,255,255,0.7);
  --glass-strong: rgba(255,255,255,0.9);
  --text: #222;
  --radius: 20px;
  --shadow: 0 4px 24px 0 rgba(31,38,135,0.10);
}

/* General Body Styling */
body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg, var(--background) 0%, #e3e9f7 100%);
  color: var(--text);
  margin: 0;
  padding: 0;
}

.body {
  padding: 2em;
  background-color: #f4f7f6;
}

/* Header Styling */
header {
  background-color: #2d3e50; /* Dark professional header background */
  color: white; /* White text for contrast */
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header h1 a {
  color: white;
  font-size: 1.6em;
  text-decoration: none;
  font-weight: 700; /* Bold title for emphasis */
}

header .logged-in {
  text-align: right;
  font-size: 0.85em;
}

header .logged-in form {
  display: inline-block;
}

header .logged-in button {
  border: 0;
  background-color: #e74c3c; /* Modern red logout button */
  color: white;
  padding: 0.5em 1em;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

header .logged-in button:hover {
  background-color: #c0392b; /* Darken button on hover */
}

/* Definition List Styling */
dd {
  margin-left: 1.5em;
}

dt {
  font-weight: bold;
  color: #2d3e50; /* Darker color for contrast */
}

/* Page Section */
.page-section {
  margin: 2em 0;
}

/* Site Detail Section */
.site-detail {
  padding: 1.5em;
  background-color: white; /* Clean white background */
  border-radius: 8px; /* Softer border radius */
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for modern look */
  border: 1px solid #e0e0e0; /* Light border */
}

/* Toolbar and Buttons */
.toolbar {
  padding: 0.5em;
  margin-top: 1.5em;
}

.toolbar>a, .button {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5em 1.2em;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(31,38,135,0.08);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.toolbar>a:hover, .button:hover {
  background: var(--accent);
  color: #fff;
}

/* Table Styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5em;
  background-color: white;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

thead tr {
  background-color: #2d3e50; /* Dark header background */
  
}

thead td {
  font-weight: bold;
  padding: 1em;
  color: white;
}

tbody tr {
  border-bottom: 1px solid #e0e0e0;
}

tbody tr:nth-child(odd) {
  background-color: #f9f9f9; /* Lighter gray background */
}

tbody tr:nth-child(even) {
  background-color: #ffffff;
}

td {
  padding: 1em;
  text-align: left;
  color: #333;
}

/* Form Styling */
form>div {
  margin: 1.5em 0;
}

form>div>label {
  min-width: 8em;
  font-weight: 500;
  display: inline-block;
}

.searchbox{
  width:100%;
  display: inline-block;
  padding: 1.5em;
  border: 1px solid #e0e0e0; /* Light border to match the theme */
  border-radius: 6px; /* Softer corners */
  background-color: #ffffff; /* Clean white background */
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
  margin: 0.5em 0; /* Space between fieldsets */
}
.searchbox fieldset{
  border: none;
  border-top: 1px solid #e0e0e0;
  display: inline-block;
  margin-right: 20px;
}
.searchbox fieldset legend{
padding: 0 5px;
  text-decoration: none;
  font-weight: bold;
}

/* Devise Login Form Glassmorphism */
#new_user {
  max-width: 400px;
  margin: 3em auto 0 auto;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5em 2em 2em 2em;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
}
#new_user h2 {
  color: var(--primary);
  font-size: 1.5em;
  font-weight: 700;
  margin-bottom: 0.5em;
  text-align: center;
}
#new_user label {
  font-weight: 600;
  margin-bottom: 0.3em;
  color: var(--text);
}
#new_user input[type="email"],
#new_user input[type="password"] {
  width: 100%;
  padding: 0.7em 1em;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: rgba(255,255,255,0.8);
  font-size: 1em;
  margin-bottom: 0;
}
#new_user input[type="submit"],
#new_user button[type="submit"] {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.7em 2em;
  font-weight: 600;
  font-size: 1em;
  box-shadow: 0 2px 8px rgba(31,38,135,0.08);
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
  margin-top: 0;
}
#new_user input[type="submit"]:hover,
#new_user button[type="submit"]:hover {
  background: var(--accent);
}
#new_user .field {
  margin-bottom: 0;
}
#new_user .actions {
  text-align: center;
}
#new_user .alert, #new_user .notice {
  margin: 0.5em 0;
  padding: 0.75em 1em;
  border-radius: 8px;
  font-weight: 600;
  background: #ffebee;
  color: #c62828;
  text-align: center;
}

/* Hide empty alert and notice paragraphs */
.notice:empty,
.alert:empty,
#new_user .notice:empty,
#new_user .alert:empty {
  display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
  header {
      flex-direction: column;
      text-align: center;
  }
  
  .toolbar {
      text-align: center;
  }

  table {
      font-size: 0.9em;
  }
}
/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
    box-sizing: border-box;
  }
  /*
    2. Remove default margin
  */
  * {
    margin: 0;
  }
  /*
    Typographic tweaks!
    3. Add accessible line-height
    4. Improve text rendering
  */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /*
    5. Improve media defaults
  */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /*
    6. Remove built-in form typography styles
  */
  input, button, textarea, select {
    font: inherit;
  }
  /*
    7. Avoid text overflows
  */
  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }
  /*
    8. Create a root stacking context
  */
  #root, #__next {
    isolation: isolate;
  }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *




 */

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

:focus {
  outline: 2px solid #3A8DFF;
  outline-offset: 2px;
}